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

In Part 1 of this tutorial, Gordon Mackay and I presented best practices for organizing the layers of your Fireworks comp in a logical way to promote ease of use and to mirror the structural counterparts of your target website. You created a comp for a design that you could present to a client and use to generate the required images for a CSS-based layout.

In Part 2, you will work in Dreamweaver to prepare the markup that serves as the foundation for the cascading style sheet (CSS) document. Part 3 shows you how to complete the layout and create the style sheet. The first steps in Part 2 are defining the site and creating a starting page 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.

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.

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.

The reconstruction of the Blimey layout happens in two phases. In this part of the tutorial, you will prepare the markup so that it provides the hooks for the CSS styles and in Part 3, you will complete the layout and create the style sheet.

To begin preparing your markup, add a series of div elements, or divs, to form the basic shell of the page. Figure 3 shows the structure for this layout.

The easiest way to insert divs while remaining in Design view is to use the Insert Div Tag button on the Common tab of the Insert toolbar (see Figure 4).

Understanding how divs work

It might seem reasonable to expect CSS to provide a way to use divs to create equal-height columns. However, divs expand vertically only as long as there is content to fill them. When that content ends, so does the div along with any background color or image that you set in its CSS rules (see Figure 5).

Designers work around this problem by placing columns and other page areas, such as the header and footer, in a wrapper or container div. That way, as long as there is content in any column within the wrapper div, the background color or image on the container appears.

Container divs are useful also for centering layouts on the page, and such layouts have been the prevailing trend for quite some time.

Horizontal band layouts reverse this operating procedure, however. Because the orientation is horizontal, rather than vertical, you are going to place the container inside the header, masthead, and footer divs instead of placing those divs inside the container! You are still going to use div nesting techniques, however, to create the illusion of columns using the faux column technique.

Unlike the centered, fixed-width layout that fits inside one parent container, the horizontal band layout is almost like building separate self-contained layouts. You will build four such layouts, labeled Module 1, Module 2, Module 3, and Module 4. Begin by adding the header module to the page.

Create the header module

To create the header module, follow these steps:

1. Position the cursor at the beginning of the page.
2. Click the Insert Div Tag button in the Common tab of the Insert bar.
3. Type header in the ID field of the Insert Div Tag dialog box (see Figure 6).

The Insert pop-up menu automatically selects the At Insertion Point option and positions the new div at the cursor.

When you click OK, Dreamweaver inserts an outlined representation of the header div in Design view (see Figure 7). The outlines will not appear as part of the design when the page is viewed in a browser; the CSS Layout Outlines tool is one of the Dreamweaver CS3 CSS tools that enable you to visualize and troubleshoot divs on the page. You can toggle all such visual tools on and off from the Document toolbar. They are located under the Visual Aids (eye) icon.

Note that Dreamweaver automatically adds placeholder text inside the div. In the next steps, you will delete this text and nest a container div inside the header. Although the header itself will span the entire width of the window, the content within it will be constrained to a centered, fixed-width container.

1. Delete the default text in the header div.
2. Make sure that the cursor is still inside the opening and closing header div tags.
3. Click the Insert Div Tag button.

   Note: Depending on whether you are in Code or Design view, Dreamweaver will present a different dialog box for the Insert Div Tag icon. For this tutorial, you will use Design view. If, however, you are comfortable with hand coding, you might prefer to stay in Code view and enter your markup manually. This will minimize going back and forth between Design and Code views as you tackle various tasks.

4. Type container in the Class field.
5. Click OK.

CSS IDs must be unique on each page, while classes can be reused. Because you are going to reuse this container in the other main areas of the page, you use the class selector type instead of the ID.

Even if you are not used to working with code, you will want to switch to Code and Design view to make sure that the next step works exactly as you expect:

1. Click the Split button on the Document toolbar so that both Code and Design views appear in the Document window.
2. In the code, position the cursor after the opening body tag and press the return key.
3. Click the comment icon in the Coding toolbar to the left of the Code view window. (If you do not see the Coding toolbar, select View > Toolbars > Coding to activate it.)
4. Select Apply HTML Comment.

5. Within the comment parameters, type Module 1.
6. Delete the default text between the opening and closing container div tags.
7. Replace this text with navigation list and form.

This completes the first module, or band, of the horizontal band layout.

Create the masthead module

The second module is devoted to the branding of the layout. It includes the logo and the gradient band that spans the entire width of the page behind it.

1. In Code view, position the cursor after the closing div for the header module but before the closing body tag (see Figure 11). Return to Design view, or if you prefer, you can add the next div element in Code view.
2. Click the Insert Div Tag button on the Common category of the Insert toolbar.
3. Type masthead next to the ID field and click OK.
4. Position the cursor in front of the masthead opening div and press Enter.
5. In that empty line, use the Comment icon to add an HTML Comment.
6. Type Module 2 as the comment text.
7. Make sure that the cursor is placed after the opening masthead div tag and before its closing tag.
8. Delete the default masthead text.
9. Return to Design view.
10. Click the Insert Div Tag button in the Insert toolbar.
11. In the Class field, type container and click OK
12. Delete the default text and replace it with the text logo image.

Create the content module

You will proceed a little differently with the content module. You still need the container div, but because there is no color band behind the module you do not need to add a parent content div. However, if you ever want to put color behind the content, you can wrap the following structure in a content div that can provide the hook for a CSS background color.

1. In Code view, position the cursor after the closing div tag for Module 2, the masthead div.
2. Add an HTML Comment.
3. Type Module 3 as the comment text.
4. Press Enter after the comment.
5. Return to Design view.
6. Click the Insert Div Tag button on the Insert toolbar.
7. In the dialog box, type container in the Class field and click OK.
8. Delete the default text that Dreamweaver adds to the div.
9. Be sure that you are still within the container opening and closing div tags.
10. Click the Insert Div Tag button in the Insert toolbar again.
11. In the dialog box, type content-wrapper in the ID field and click OK.
12. Delete the default text that Dreamweaver adds to the div.
13. Be sure that you are still within the content-wrapper opening and closing div tags
14. Click the Insert Div Tag button in the Insert toolbar again.
15. In the dialog box, type secondary-content in the ID field and click OK.
16. Delete the default text that Dreamweaver adds to the div.
17. Replace this text with accordion widget.
18. Now make sure that the cursor is after the closing secondary-content div tag but before the closing content-wrapper div tag (see Figure 12).
19. Click the Insert Div Tag icon in the Insert toolbar one more time.
20. In the dialog box, type main-content in the ID field and click OK.
21. Delete the default text that Dreamweaver adds to the div.
22. Replace this text with tabbed panel widget.

Note: When you write the CSS for the layout, you will float both the secondary and main content columns to the left to give them each an independent block formatting context. Part 3 of this tutorial explains this in more detail. The column div that comes first in the source order of the document will appear leftmost in the layout. This is why the secondary-content div is coded first.

Create the footer module

To complete the basic structure, create the "fat footer" module:

1. Position the cursor after the closing div tag for Module 3.
2. Add an HTML comment.
3. Type Module 4 as the comment text.
4. Press Enter after the comment.
5. Return to Design view.
6. Click the Insert Div Tag button in the Insert toolbar.
7. In the dialog box, type footer in the ID field and click OK.
8. Delete the default text that Dreamweaver adds to the div.
9. Be sure that you are still within the footer opening and closing div tags.
10. Click the Insert Div Tag button in the Insert toolbar again.
11. In the dialog box, type container in the class field and click OK.
12. Delete the default text that Dreamweaver adds to the div.
13. Be sure that you are still within the container opening and closing div tags
14. Click the Insert Div Tag button in the Insert toolbar again.
15. In the dialog box, type footer-wrapper in the ID field and click OK.
16. Delete the default text that Dreamweaver adds to the div.
17. Be sure that you are still within the footer-wrapper opening and closing div tags.
18. Click the Insert Div Tag button in the Insert toolbar again.
19. In the dialog box, type column in the Class field and click OK.
20. Delete the default text that Dreamweaver adds to the div.
21. Replace this text with column 1 content.
22. Be sure your cursor is after the complete column 1 div.
23. Click the Insert Div Tag button in the Insert toolbar again.
24. In the dialog box, type column in the class field and click OK.
25. Delete the default text that Dreamweaver adds to the div.
26. Replace this text with column 2 content.
27. Be sure your cursor is after the complete column 2 div.
28. Click the Insert Div Tag button in the Insert toolbar again.
29. In the dialog box, type column in the Class field and click OK.
30. Delete the default text that Dreamweaver adds to the div.
31. Replace this text with column 3 content.

You have now completed the main structure for the layout. You can refer to main_divs.html in the support_files folder if you want to compare your work to a completed file.

There are still a few important tasks to complete before moving on to Part 3 of this tutorial:

• Add foreground images, that is, those that get added to the content in the XHTML document. (Unlike foreground images, background images are called from within the CSS document.)
• Implement image replacement techniques for the logo to make the image more accessible.
• Add navigation links, formatted in a list.
• Add a break (br) element that will be used for a clearing class.
• Insert the Accordion and Tabbed Panels Spry widgets to the content module.
• Add dummy (that is, placeholder) text to the footer columns.

Most companies use a logo as part of their corporate identity. In web design, it is often necessary to leave the logo as an image to preserve fonts and branding. For the sake of accessibility and search engine optimization, however, it is a good practice to add a span within a heading and wrap that around the logo image. This gives it a keyword rich text equivalent in a format that is more potent than just alternative text from an alt attribute. Some developers place the logo inside a Level 1 heading to gain an advantage in search engine optimization. However, according to XML standards, you should only include one Level 1 heading, or h1, per page. If you use the h1 for the logo on every page, you lose the benefit of a unique, keyword-rich h1 for each. Your choices, then, are to use another element such as a lower level heading, or a <p> element. In this tutorial you will use the latter:

1. Select the placeholder text in the masthead container div and delete it.
2. Place your cursor in the empty div and insert logo.jpg.
3. When the Alt Text dialog box appears, type Blimey: The blog of blogs.
4. Leave the logo image selected.
5. Click the Split button in the Document toolbar so that you can type in Code view.
6. Position the cursor just above the code for the image.
7. Type <p>. If you have code hints turned on, the code hints will appear as you type.
8. Start to type the closing </p> after the image code. When you type the closing slash, Dreamweaver completes the tag for you.
9. Position the cursor after the image code but before the closing </p>.
10. Type the opening span element.
11. Type Blimey, the blog of blogs.
12. Type the closing span element.

Figure 14 shows the finished code.

You will see both the logo image and the logo span text in Design view (see Figure 15). When you write the CSS, you will position the span text off-screen where sighted visitors cannot see it, but where it is still accessible to visually impaired visitors.

The next step is to add the list of navigation links. Most experienced web developers follow the best practice of putting related groups of links in lists to enhance accessibility:

1. Delete the placeholder text in the header div.
2. Type HOME and press Enter.
3. Type ARCHIVE and press Enter.
4. Repeat these steps for AUTHOR and CONTACT (see Figure 16).

5. Select the list of links you just entered and click the unordered list button in the Property inspector (see Figure 17).

6. Select the word HOME and type javascript:; in the Link field of the Property inspector to create a dummy link (see Figure 18).

7. Repeat Step 6 for each item in the list.

Note: Dummy links do not go anywhere but they make text look and behave like a real link.

Add the search form

To add the search form, follow these steps:

1. Position the cursor after the closing </ul> tag for the unordered list of links.
2. Select Insert > Form > Form.
3. Type search in the name field on the left side of the Properties Inspector.
4. With the cursor still between the opening and closing <form> tags, select Insert > Form > Textfield.

   The Accessibility dialog box appears.

5. Type searchbox in the ID field.
6. Type Search in the Label field.
7. Select the radio button next to Attach label using the "for" attribute.
8. Leave the default position at Before form item.
9. Click OK.
10. Select Insert > Form > Image Field.
11. Navigate to the go.png image in the images folder.
12. Click Cancel when the Accessibility dialog box appears.
13. In Code View, place your cursor after the closing quote for the images/go.png code.
14. Press the space bar once.
15. Type alt="Submit" so that visually impaired visitors will know the purpose for the button.

Usually you do not need accessibility features for a standard Submit button, but because you are using an image to submit the search query, it is advisable to add alternative text.

Figure 19 shows the completed form in both Code and Design views.

Add the Spry Accordion widget

To add the Spry Accordion widget, follow these steps:

1. Delete the words accordion widget from inside the secondary content div.
2. Position the cursor in the secondary-content div.
3. Click the Spry Accordion widget icon in the Spry category of the Insert toolbar.

   Dreamweaver displays a warning dialog box to notify you that it will add a folder of dependent files (CSS and JavaScript) to your site. You will need to upload this folder to your production server when you upload the page that includes the Spry component.

   Note: By default, the widget will horizontally fill the entire width of the window. You will change that later.

4. With the widget still selected, access the Property inspector.
5. Click the plus (+) button to add another menu to the Accordion widget.

   Note: You can use the up and down arrows to change the order of the panels.

Next, add content to the panels. The first panel is open by default.

6. Change the text Label 1 to Accordion Menu 1.
7. Change the text Label 2 to Accordion Menu 2.
8. Change the text Label 3 to Accordion Menu 3.

Now, add sub navigation to the content region of each panel.

1. In the content area of Accordion Menu 1, create three links, organizing them into an unordered list.
2. Type Sublink 1, Sublink 2, and Sublink 3 for the links' text.
3. Turn the text into "dummy" links by using the javascript:; method you used for the main navigation.
4. Select all three links and copy them to the clipboard.
5. Bring focus to panel 2 by clicking the eye icon to the far right of the panel's label.

6. Paste the links into the second panel's content region.
7. Repeat these steps for panel 3.

Add the Spry Tabbed Panel widget

The steps for adding the Tabbed Panel widget are similar to those used for adding the Accordion.

1. Delete the words tabbed panel widget from the main-content div.
2. With the cursor still in the main-content div, click the Tabbed Panel icon in the Spry category of the Insert toolbar.

3. With the widget still selected, access the Property inspector.
4. Click the plus (+) button to add another panel to the Tabbed Panel widget.

Next, add content to each tabbed panel.

1. Open the filler-text.html file that is in the support_files folder.
2. Copy the text.
3. Paste it into the content region for Tab 1.
4. Repeat Step 7 for Tab 2 and Tab 3. (Hint: you can access the content region for each tab by clicking the eye icon on the right side of each tab.)

5. Click the eye icon to return to Tab 1.
6. Position the cursor in front of the first word in the content region, Ut.
7. Select Insert > Image.
8. Navigate to blimey_girl.png in the images folder for the Blimey site.
9. Type Blimey girl when the alternate text dialog box appears.

To add the footer column content, follow these steps:

1. If the filler text is not still on the clipboard, copy it again.
2. Paste the text into each column div in the footer.

If you have ever floated images on a page, you probably know that unless you add the clear property, content that follows a float may wrap around it. To prevent problems with the footer div that follows the content area of the layout, you will need to add an element to which you can later add a class for clearing.

Some developers consider it taboo to add superfluous code to your markup to solve presentation problems. In this project, you added such code when you used spans within headings and when you used wrapper divs to contain structural divs. Given the current state of evolution in CSS, however, "divitis," "classitis," and extra markup are sometimes necessary evils.

The <br> element used in this exercise is another example of a method that most easily achieves the specific goal. Some ingenious developers devise alternative methods to improve code, such as using generated content to clear floats. In the end, there are pros and cons to all methods, and the clearing element remains a stable and reliable way to introduce the clearing property with minimal extra structural markup.

Most developers use either a <div> or <br> element to provide the hook for the clearing class. This tutorial uses a <br>:

1. Place your cursor just before the comment for Module 4.
2. Type <br class="clearfloat" />.
3. Position the cursor after the closing div for the footer wrapper and before the closing div for the container.
4. Type <br class="clearfloat" />.

The code should appear as shown in Figure 28.

Later in the CSS, you will add the clear property to the class as well as some properties that ensure the break element does not take up any room in the layout.

Figure 29 shows what your comp should look like now (minus the dummy text for the last column).

Where to go from here

The preparation work is finished and the page is ready for some styling that will take it from plain to visually engaging. In Part 3, you will complete the layout and create the style sheet.