Web Design with HTML and CSS

48

Defining sites in Dreamweaver or Expression Web

Web Design with HTML and CSS Digital Classroom

9 Choose Insert > Image to add an image to your site. In the Select Image Source

window, use the menu to browse to the web03lessons folder and choose the

blueberry_smoothie.jpg image, then click OK. A warning appears indicating that the

image is outside the root folder. Click Yes to copy the image into the folder with the

other content for this, then click Save.

Dreamweaver off ers to keep your site organized by placing a copy

of images that are outside your site’s folder with the other items used

in the site.

The Image Tag Accessibility Attributes window will also appear. In the Alternate Text

fi eld type “Blueberry Smoothie” and then click OK. Alternate text (commonly referred

to as an “alt tag”) improves accessibility of your page for devices such as screenreaders.

The image is displayed on the page and the fi le is copied to the root folder for this site.

Importing an existing site into Dreamweaver CS5

Importing pre-existing sites into Dreamweaver is similar to creating a new site. Instead of

pointing to an empty root folder, you will identify the path to the folder containing the

existing assets for the site.

1 Choose Site > New Site. In the Site Setup window, type Lesson 03 site for the site name.

2 Click the Folder icon to the far right of the Local Site Folder fi eld, the Choose Root

Folder window appears. Navigate to the web03lessons folder, then click Choose (Mac)

or Select (Windows), then click the Save button.

A site cache is created. In the Files panel, you can see the directory of the site.

3 Double-click the index.html document to open it. Next you will rename the images

folder in the Files panel to see how Dreamweaver updates links.