Facebook Twitter LinkedIn RSS
Home tutorial Dreamweaver tutorial 2

Dreamweaver tutorial 2

Published on September 18, 2012, by in tutorial.

In this tutorial, we will set up a “Site” (a project) and get the files we need (index.html and style.css) for project 2.

1. Site Management

A “site” in DW, basically means a project. Set up a site helps us keeping all the files in the same folder. It also helps us keep the links work right.

Create a folder on your desktop and name it “p2″.

The first thing you want to do when starting a project in DW is Site Management. In Toolbar, go to Site -> Manage Sites.

When Manage Sites window pops up, click on “New Site.”


When the Site Setup window pops up, (1) name your site “p2″ and (2) click on the folder icon to select the p2 folder on your desktop.


Click “Save” and “Done”. In your Files Panel, you should see “p2″ showing up. 

Each time you open DW, you should check if your “Site” is setup correctly. To do so, go to “Site” in your Toolbar. Click on “Manage Site.” Click on “p2″ and check if the “Local Site Folder” path is correct.


2. Downloading a html file and a css file from course website

Here are two templates, each has a html file and a css file. One template has a horizontal navigation and the other one has a vertical navigation. I will use the horizontal navigation to demonstrate.

Right click on “Home Page 1″ and say “Save Link As.”


Make sure the file name is “index.html” and the folder you are saving into is the p2 folder on your desktop.


Do the same thing for the CSS file.

Right click on “Stylesheet 1″ and say “Save Link As.”


Make suer the file name is “style.css” and you are saving it into the p2 folder on your desktop.


You should now see two files in your p2 folder: index.html and style.css.


You should also see the two files in the Files Panel in DW. If you do not see them, click on the “Refresh Button.” Double click on index.html to open the file. (Of course, you can go to your Toolbar, File -> Open, and then browse for p2 folder on desktop and index.html. This Files Panel gives you a shortcut to open files.



© Web Design & Publishing