Dreamweaver Tutorial - Getting Started With Your Website


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


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.


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:

*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:

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.

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