Activity 7.3 Look at a sample site in Dreamweaver
The recommended way to use Dreamweaver is to use it as a site management application, as well as a tool to create individual web pages. To see how this works, we will look at a sample site provided with Dreamweaver. Do this -
Create a folder called Sites on your Desktop.
Using the desktop (not Dreamweaver), find the Dreamweaver cafe_townsend folder (it should be here: C:\Program Files\Adobe\Adobe Dreamweaver CS3\Sample_files.
Copy the cafe_townsend folder into your own Sites folder (hold down the control key and drag a copy of the folder across, or copy the folder and paste).
In Dreamweaver, define a new site. Select Site>New Site. Name your site Cafe Townsend. Give it the URL http://www.cafetownsend.com
Click the Next> button.
The recommended way to use Dreamweaver is to use it as a site management application, as well as a tool to create individual web pages. To see how this works, we will look at a sample site provided with Dreamweaver. Do this -
Create a folder called Sites on your Desktop.
Using the desktop (not Dreamweaver), find the Dreamweaver cafe_townsend folder (it should be here: C:\Program Files\Adobe\Adobe Dreamweaver CS3\Sample_files.
Copy the cafe_townsend folder into your own Sites folder (hold down the control key and drag a copy of the folder across, or copy the folder and paste).
In Dreamweaver, define a new site. Select Site>New Site. Name your site Cafe Townsend. Give it the URL http://www.cafetownsend.com
Click the Next> button.
Accept the default (No) for server technology and click the Next button; accept the default (edit local copies on my machine ...) and select the path to the FinalSite folder in your own Sites folder.
In the next dialog, How do you connect to your remote server, select None. At the next dialog, select Done.
You will then see the Example1 site files in the Site panel.
Double-click on the index.html file in the Site Panel under Site>Café Townsend>completed_files>dreamweaver Local Files to open it.
You can now examine all the elements of the page and the site. You can explore this as you wish, and make any changes you want. Note the following -
a. Clicking on an image, for example the banner_graphic file at the top, will give you the following information in the Property Inspector: the name and location of the image file, its physical size (in pixels), any Alternative text, any the file it links to. Clicking on text whose properties are defined by the CSS file will show what these properties are in the Property Inspector.
In the Property Inspector you can see the font name, font size, font colour, any special formatting such as bold or aligned right, and if the text is a link. When using Dreamweaver, you will be referring to the Property Inspector constantly.
b. The page is formatted using tables, and you can see the details of the relevant table cell, including its colour, in the Property Inspector.
c. Select the Layout tab from the Insert toolbar, then click on the Expanded button. This view makes it easier to see and select tables. (But to simplify instructions, from now on we will assume you are using Standard view). Revert to Standard view again, and the Common tab.
d. Note that right clicking on an object on the page will also bring up a series of options for the current object.
f. When you are familiar with the main elements of the Dreamweaver interface, close all open files.
