• Increase font size
  • Decrease font size
  • Default font size

Stay connected with us!

dms-cs5-promo-2

Dreamweaver Tutorial - Getting Started With Your Website

Attention: open in a new window. PDFPrint

In This Tutorial:


wdpg-1You'll discover how to get started setting up a website using adobe Dreamweaver. You'll discover exactly what dreamweaver can and can't do, learn how to setup your website files, and get started building your actual website using dreamweaver



Resources:

You'll need a copy of dreamweaver either cs3, cs4 or cs5
You'll also need a web hosting account so that you're website will actually work.

Details:


In case you didn't already know, Dreamweaver is one of the most widely used commercial web editors available today. It's what we call a WYSIWYG (What You See Is What You Get) editor which means it allows you to create a website without having to be an expert programmer.
It was orginally created by macromedia but is now Adobes flagship web editor.
What Dreamweaver can and can't do
Before you get started with dreamweaver, it's important that you understand exactly what dreamweaver can and can’t do.
Many people have the misconception that you can create your entire website, from scratch using Dreamweaver, (which includes creating graphics, creating and editing video clips and creating animations etc) but that's not entirely correct.

What Dreamweaver Can NOT do

Let's start with what Dreamweaver DOESN'T do, since the list is quite short. Dreamweaver Does NOT:

  • Create / edit graphics
  • Create logos
  • Add effects to graphics
  • Record or edit audio
  • Edit video
  • Create / edit animated images (flash)*
*Some older versions of dreamweaver do allow you to create basic flash animations such as animated buttons.

All of these elements including much of your actual page layout will need to be created using other external programs. Once you've created these "assests" (such as images. buttones, videos etc) you'll use dreamweaver to bring to all together to create your web page.

What Dreamweaver CAN Do

What Dreamweaver DOES allow you to do is to bring all these various elements together and organize them on a page, then ad text and colors (and other elements) that create a complete web page that you can present to the rest of the world! Here's a short list of what dreamweaver can do:

  • Create complete web pages / web sites
  • Allow you to manage your entire site
  • Upload and download your pages for editing
  • Create Cascading style sheets to style your site
  • Add spry / javascript snippets to add extra functionality to your site 

Setting up and managing your site

One of the first concepts you'll need to get your head around is that of Remote and local sites. Let's start with remote sites.

  • Remote site: A remote site is basically your website on the web. It's where all your website files live and are publicly accessible so that people can actually view your site
  • Local site: Is simply a mirror of the remote site (eg. a copy of it) but on your own local computer. This makes it much easier to work on your website files.
Once you create new pages or editing existing page on your local site, you'll then upload the pages to your remote site which makes them accesible to people on the web.

Setting up your local site

Let's get started setting up our local site in Dreamweaver. simply click the tabe below to choose your version of dreamweaver:

Dreamweaver CS5


  1. Create a new folder on yoru computer TIP - I usually have a folder within My Documents called My Websites in which I create all new website folders.
  2. Once you've created your site folder open Dreamweaver and click on -> Site -> New Site
  3. In the site name box type a name for your website
  4. Next Click the folder icon next to the -> Local Site Folder field and browse to your new folder and select the folder you created earlier
  5. Click save
Your done setting up your local site folder.

Creating your first page
Now that you've got dreamweaver setup, it's time to create your first page.
This page will become the home page of your website, and traditionally it's called index.html (all lower case) TIP - if you name the file something else OR if you use capitals in the name, then you're home page will not work correctly when a visitor visits your site. instead of seeing the home page your visitor's will see a list of files and folder on your site.
Here are the step by step instructions on how to create your first page in Dreamweaver:

Dreamweaver CS5


  1. Click on File -> New
  2. Select Blank Page -> HTML -> Layout-None -> Create
  3. And you have a new blank page
  4. To create a pre-designed page click on More from the Welcome Screen
  5. Select HTML -> 2 column fixed, left sidebar, header and footer
  6. Click Create
  7. Click File-> Save As -> index -> Save

Where to next?
Now that you've created your first blank page, you'll need to start formatting it by adding images and text and most likely re-arranging some of the default layout.
Checkout our DreamweaverMadeSimple Dreamweaver Tutorials for step by step video on how to build your entire website, from start to finish using Dreamweaver.

Action Steps:


Enjoyed the tutorial? share it with others and leave a comment below.

How to link to this page



To create a link to this page on your website,
copy and paste the code below to your webpage.




Here's how it will appear on your web page:
Dreamweaver Tutorial - Getting Started With Your Website

Comments  

 
# teacherTYRONE DANIEL 2011-07-18 06:23
tutorials are great so far
Reply
 
 
# clavier arabe virtuel 2012clavier arabe 2012-12-21 20:58
I feel so good to read your article of about a report. Because here included so effective information. It may help me about related matter. I highly recommend it
Reply
 
 
# great tutorialashish@smschacha.com 2013-03-05 20:50
the really great tutorial. I think, dreamweaver is the best tool of website development.
Reply
 
 
# RE: great tutorialLaura Wright 2013-05-09 23:58
Hello! Yes it is. Thank you for your post.
Reply
 

Add comment


Security code
Refresh