Dreamweaver 8 Does Standards!

Other Page Elements

Now that we've completed the structure of the main content area of the homepage, it's time to move on to consider the rest of the page. We have the heading area, which contains the logo and tagline, site controls that help users to change the text size, and the main navigation. We must also consider the content that displays in our layout's sidebar: a search form, as well as quick links to the various topics and other items of interest on the site.

Before we decide where to place these elements within our document, let's take a moment to think about how site visitors are going to use these pages. Users who have a regular Web browser will see the full layout and, using CSS, we will be able to position all the page elements to make the site as usable as possible. It doesn't really matter to these users just where in the document the page elements are located, as they will see the full page design. However, for users of text-only devices, the locations of the various content elements within the actual XHTML document is very important.

Our homepage will be displayed or read aloud by a text-only browser or screen reader in the order in which the content appears in the actual XHTML document, starting with the title. Currently, our document contains only the page content, so, after the title, a screen reader would start to read the first element on the page: our "Latest ideas" heading, as depicted in Figure 4.16, "Displaying the document in the text-only Lynx browser."

Figure 4.16. Displaying the document in the text-only Lynx browser.

The page's heading section helps orient users by providing information about the site itself—the logo and tagline—as well as quick access to the site's main navigation, including the sitemap, as shown in Figure 4.17, "The heading area, including main navigation."

Figure 4.17. The heading area, including main navigation.

Note: Easing Text-only Navigation

A sitemap is very useful to visitors who use text-only browsers: it gives them a quick way to jump from page to page without having to follow the complicated navigational structures that, while easy to use in a graphical browser, can be much slower to use via other methods. Remember: to users of screen readers, or those who must tab through Web documents using their keyboard, Web pages are linear documents. A visitor using a screen reader, for example, has to wait for the Web page to be read aloud in order to get to the link they want. A sitemap can save time and frustration for these visitors—as well as those using regular browsers.

As the heading area contains information that will help users to understand the site—and to get around it—it seems logical that we should place this element at the top of the document, before the homepage's main content.

The information that appears in the sidebar, depicted in Figure 4.18, "The sidebar", is less important in terms of its ability to help users immediately understand and access the site. As a list of tutorials and information, it could also become quite lengthy.

If we placed this element before the homepage's main content, users of screen readers would need to listen to all this information before they reached the main content; this would start to get rather dull after the first page! For this reason, let's add this section after the page's main content, at the bottom of the current document. We can then position it alongside our main content using CSS.

Figure 4.18. The sidebar.

The Heading and Main Navigation

Now that we've decided where in the document we're going to place the rest of the page elements, we can start to add our heading area.

Return to your document and, in Dreamweaver's Design View, place your cursor just before the "Latest ideas" heading. Switch to Code View to make sure the cursor is outside the h1 element. Switch back to Design View and insert the Code Spark logo (logo.gif), remembering to add appropriate alternate text. Beside the image, type the tagline Inspiration for Coders; this should sit beside the bottom of the Code Spark logo.

Next, we'll add our accessibility controls. Hit Enter and type Page Controls. Our page controls are no more than a list of links, so we'll add them to the page as an unordered list. Click the Unordered list button to insert the first list item, then insert the first accessibility control image, control_larger.gif. Next, make the image into a link: select the image and type # into the Link field in the Property Inspector. Hit Enter to insert the next item, and repeat the process for the other controls (control_smaller.gif, control_low_graphics.gif and control_default_style.gif).

Figure 4.19. Creating the heading area of the page.

When you peruse your document in Design View, it should look like the display shown in Figure 4.19, "Creating the heading area of the page." Don't worry that it looks a bit untidy right now; we'll use CSS to transform this content later on.

Our final task is to add to this heading area the main navigation, which will link to the Tutorials, About, Contact and Sitemap pages. Once again, the navigation comprises an unordered list of links, so go ahead and add them to the document. Switching into Code View, we can see the markup that constitutes the heading section:

Example 4.3. homepage-layout.html (excerpt)

<p><img src="img/logo.gif" alt="Code Spark" width="290"        
   height="160" />Inspiration for Coders </p>        
<p>Page Controls</p>        
<ul>        
 <li> <a href="#"><img src="img/control_larger.gif"        
     alt="Increase Text Size" width="43" height="35"        
     border="0" /></a></li>        
 <li><a href="#"><img src="img/control_smaller.gif"        
     alt="Decrease Text Size" width="43" height="35"        
     border="0" /></a></li>        
 <li><a href="#"><img src="img/control_low_graphics.gif"        
     alt="Low Graphics" width="43" height="35"        
     border="0" /></a></li>        
 <li><a href="#"><img src="img/control_default_style.gif"        
     alt="Default Style" width="43" height="35"        
     border="0" /></a></li>        
</ul>        
<ul>        
 <li><a href="">Tutorials</a></li>        
 <li><a href="">About</a></li>        
 <li><a href="">Contact</a></li>        
 <li><a href="">Sitemap</a></li>        
</ul>

The Sidebar

The final section that we'll add to the document is the sidebar, which, as we've already decided, will be placed beneath the main content in the structure of our document.

In Design View, place your cursor at the bottom of your main content text, beneath the section about browser statistics. The first part of the sidebar is a search box, so add a level three heading that reads "Search this Site."

To create the search box, add a form element using the Forms Panel of the Insert toolbar, as shown in Figure 4.20, "Adding a form." The form will appear as a dotted red outline.

Figure 4.20. Adding a form.

Insert a text field into your form. When you do so, the Input Tag Accessibility Attributes dialog shown in Figure 4.21, "The Input Tag Accessibility Attributes dialog" will open, to help you add the correct attributes to the element.

Figure 4.21. The Input Tag Accessibility Attributes dialog.

Our original design didn't include a label for the search field, but I'm going to throw one in: it'll help when we come to validate our site for accessibility purposes. In Figure 4.21, "The Input Tag Accessibility Attributes dialog" above, I added the label Search keywords and selected the "Wrap with label tag" option.

Click OK to insert your text input and label. In the Property Inspector, change the name of the input field to keywords. I also added a <br /> after the label Search Keywords, and before the search box. Shift-Enter creates a <br /> in Dreamweaver.

Now, insert a button using the Insert toolbar. This button doesn't need a label, so select the No label tag option before you click OK. Select the button, then use the Property Inspector to change the value to Search, as shown in Figure 4.22, "Changing the value of the button to "Search.""

Figure 4.22. Changing the value of the button to "Search."

If you check Code View, the markup for the form we just added should look something like this:

Example 4.4. homepage-layout.html (excerpt)

<h3>Search this Site</h3>        
<form name="form1" id="form1" method="post" action="">        
 <label>Search keywords<br />        
 <input name="keywords" type="text" id="keywords" />        
 </label>        
 <input type="submit" name="Submit" value="Search" />        
</form>

Add another heading—"Tutorial Topics"—as a level three heading, and mark up the main sections of the site using an unordered list. Make the text in the list items into dummy links, as these will eventually link to the actual sections of the site:

• PHP & MySQL
• CSS Design
• JavaScript & DHTML
• ASP & .NET
• JSP & Servlets

Figure 4.23. Viewing the sidebar section after the search feature and three lists are added.

We can now add another heading. Insert "Reader Favorites" as a level three heading and, again, use a list with dummy links to mark up the favorite tutorials presented on the site. Figure 4.23, "Viewing the sidebar section after the search feature and three lists are added." shows this section in Design View after the three lists are added.

Validating your XHTML

We've completed our basic XHTML document. Later, we'll need to add to this document some grouping elements that will enable us to style the document. However, by first considering how the content should be structured, we've done a lot to ensure that our document is semantically structured, and accessible at its most basic level. The final task we should undertake is to validate our document to ensure that it constitutes correct XHTML.

Validation in Dreamweaver

To validate your document, click the Validate markup button at the top of the document window, and select Validate Current Document, as shown in Figure 4.24, "Validating the current document."

Figure 4.24. Validating the current document.

If you're lucky, the message "No Errors or Warnings Found" will display in the panel. However, while Dreamweaver will let you create a document with an XHTML Strict DOCTYPE, it sometimes misses required elements, or adds attributes that are not allowed by this DOCTYPE. Luckily, these are pretty easy to find and remove: any problems are listed in the Results Panel after Dreamweaver's validator is run, as shown in Figure 4.25, "Reviewing errors presented in the Results panel."

Figure 4.25. Reviewing errors presented in the Results panel.

One of the errors you're likely to see reads as follows:

This error indicates that the label element needs to be contained within some other element (not just form). XHTML Strict—as the name implies—is very strict about which elements can be contained within which other elements. We can address this issue by wrapping the whole section in <p> and </p> tags, like so:

Example 4.5. homepage-layout-strict.html (excerpt)

<p><label>Search keywords<br />        
 <input name="keywords" type="text" id="keywords" />        
 <input type="submit" name="Submit" value="Search" />        
 </label></p>

Now, revalidate your document to see if it's error-free. If not, step through the list of errors, and fix them one by one. Pretty soon, your work should be free of errors, and ready to roll! Save the file as homepage-layout-strict.html.

The more you work with Dreamweaver, the more you'll start to understand its eccentricities, and the better you'll become at correcting its markup. XHTML can become quite complex at times, and Dreamweaver 8 does a fairly good job of getting the markup right most of the time, so do try and cut it some slack.

Summary

In this chapter, we've taken what might be seen as a slightly unconventional way of beginning our page layout. We concentrated almost solely on the structure of the document, and how the actual content is to be marked up, bearing in mind our goal of standards compliance.

In the next two chapters, we'll move on to look at CSS. We'll see how we can take this structured, valid document and use CSS to create a visually attractive layout without compromising its accessibility or semantic structure.

That's it for this excerpt of Build Your Own Standards Compliant Website Using Dreamweaver 8. What's next?

Download these chapters in PDF format, and you'll have a copy you can refer to at any time.

Review the book's table of contents to find out exactly what's included.

Buy your own copy of the book now, right here at SitePoint.com.

We hope you enjoy Build Your Own Database Driven Website Using Dreamweaver 8.