Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 2: Markup preparation

Defining the site in Dreamweaver

This tutorial assumes that you know how to define a site in Dreamweaver. If you do not, please refer to the Dreamweaver Help files. For the Blimey site, you only need the Local Info category, which is easy to set up quickly when you select the Advanced tab of the Site Definition panel (see Figure 1):

1. In the Site name field, type blimey.
2. Click the folder icon or browse button next to the Local root folder field and navigate to the blimey folder you created in Part 1 of this tutorial.

Figure 1. Site definition for Blimey

Create a starting file

Create the new HTML file that you will use to code the main layout for the Blimey site (see Figure 2):

1. Choose File > New.
2. In the New Document dialog box, select Blank Page from the Category list.
3. Select HTML from the Page Type column.
4. Select <none> from the Layout column.
5. Be sure the Document Type is set to the default: XHTML 1.0 Transitional.
6. Click Create.
7. Save the file in your Blimey site folder as index.html.
8. In the Title field at the top of the page, type Blimey: the blog of blogs.

Figure 2. New document settings

The remaining sections of this tutorial explain how to set up the page structure, make the logo image accessible, add the Spry components, and apply some finishing touches.

Page 2 of 8

Previous Page

Next Page