Article
Dreamweaver 8 Does Standards!
Chapter 4. Constructing the Document
If you're like most people, you probably design a Website by considering how it should look, then moving graphic elements around—either by hand-coding the HTML and CSS, or using Dreamweaver—until the page "looks" the way you want it to.
In this chapter, we're going to take a completely different approach to page design. First, we'll consider how the document should be structured in order to make it valid, accessible, and semantic. Then, in Chapter 6, Constructing the Layout with CSS, we'll make the document display as we want it to using CSS.
In this chapter, we'll structure the content of our homepage using XHTML; this will give us a framework for our site.
The New XHTML Document
In this chapter we are going to develop our document using the XHTML Strict DOCTYPE. XHTML Transitional allows you to use deprecated elements and attributes; most of these are presentational in nature. Using XHTML Strict helps us to remember that presentation belongs in CSS, not in the document: it's a good way to ensure that our site is compliant with Web standards.
There are, however, a few reasons why you might want to use XHTML Transitional:
- The site is going to be maintained by someone who's using Dreamweaver, but won't know to remove the presentational attributes inserted by Dreamweaver, which are not valid in XHTML Strict.
- You're using a Content Management System—or other third-party code—that will validate to the Transitional DOCTYPE, but contains attributes that aren't permitted in Strict.
- You have a specific need to get the layout working in very old browsers, such as Netscape 4. To do so, you're going to use certain presentational attributes (such as
border="0"on images), as those browsers provide limited CSS support.
That said, the choice to work to XHTML Strict doesn't have to be your final decision. If you aim for Strict, then realize that some third-party feature is going to require the Transitional DOCTYPE be used, you can always change the DOCTYPE declaration to suit. Developing to the Strict DOCTYPE wherever possible will ensure that you remember to keep presentation in the CSS, where it belongs!
Create a new XHTML document in Dreamweaver by selecting File > New.... In the New Document dialog, select Basic Page and HTML, then choose XHTML 1.0 Strict from the Document Type drop-down, as shown in Figure 4.1, "Creating a new XHTML page in Dreamweaver." Click Create to create the new XHTML page, and then save this page to the Code Spark site, as homepage-layout.html.
This should give you a blank page in Design View. If you switch into Code View using the buttons above the document window, you'll see your basic XHTML document, as illustrated in Figure 4.2, "Viewing the code of our basic XHTML document."
This page will become our homepage document. But for now, we're going to concentrate on creating a semantic and standards compliant document that will form a sound basis for the design and structure of the site.
Figure 4.1. Creating a new XHTML page in Dreamweaver.
Figure 4.2. Viewing the code of our basic XHTML document.
The Main Content Area
Let's start by working on the main part of this document: the page content. On the homepage, the content includes the featured tutorial abstracts, recent tutorials, browser statistics, and other content shown in Figure 4.3, "Concentrating on the homepage main content area." We'll focus our attention on the area that has not been grayed out in this image.
Figure 4.3. Concentrating on the homepage main content area.
Using Design View in Dreamweaver, type Latest ideas into homepage-layout.html. This will be the main heading on the homepage itself, so it should be marked up as a level one heading. We can do this in Dreamweaver by selecting the heading text, then choosing Heading 1 from the Property Inspector, as illustrated in Figure 4.4, "Creating a level one heading using the Property Inspector."
Figure 4.4. Creating a level one heading using the Property Inspector.
We have six blocks of content on the homepage. The top four contain details of the latest tutorials on the site, and all have the same structure: a heading (which is linked to the tutorial), the author's name and the tutorial's date of publication, a picture of the author, and some text about the tutorial itself. We can create these elements now.
In Design View, hit Enter and add the following text:
ASP is from Mars – PHP is from Venus
Select this text, and make it a level two heading by selecting Heading 2 in the Property Inspector. While the text is still selected, type # into the Property Inspector's Link field. This will turn the text into a link, which you can amend to point to the actual tutorial later. Hit Enter to create a new paragraph and type: Julian Carroll Jan 15, 2005.
The image of the author can now be added. To insert an image using Dreamweaver, click the Images button from the toolbar, as shown in Figure 4.5, "Selecting the Images button on the Common panel of the Insert toolbar."
Figure 4.5. Selecting the Images button on the Common panel of the Insert toolbar.
When you click the Images button, a dialog will open to allow you to browse your computer for the author image. Once you've found it, click OK.
Note: All Images are Provided!
All the images we used to build this site are available as part of this book's code archive. If you haven't done so already, go and grab it from sitepoint.com.
At this point, the Accessibility Attributes dialog, shown in Figure 4.6, "Adding the image tag's accessibility attributes" should open. This dialog appears if you told Dreamweaver to display accessibility attributes for images within your Preferences. We did this when we set up Dreamweaver in Chapter 2, Site Planning and Setting up for Development.
Type some alternate text into the box provided by the Accessibility Attributes dialog. This text should clearly describe the image for users who are browsing the site with images turned off, or with a device that cannot display images. As our image includes some text ("Julian—PHP & MySQL") we should to add this information to the alternate text attribute, as you can see in Figure 4.6, "Adding the image tag's accessibility attributes." I've added the following text: Photo of Julian – PHP and MySQL
Figure 4.6. Adding the image tag's accessibility attributes.
Finally, let's add a couple of short paragraphs of text to explain the tutorial. At this point, I've added some dummy placeholder text to fill the space. Our page now displays in Dreamweaver as shown in Figure 4.7, "Displaying the document in Dreamweaver."
Figure 4.7. Displaying the document in Dreamweaver.
Note: Download Mock Latin Now!
The dummy text we are using is the standard 'mock Latin' used by designers to fill out mockups. You can download some mock Latin of your very own.
Switch into Code View to see how our XHTML is shaping up. At this point, the document should contain the following markup and content:
Example 4.1. homepage-layout.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Code Spark layout</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<h1>Latest ideas </h1>
<h2><a href="#">ASP is from Mars - PHP is from Venus</a></h2>
<p>Julian Carroll Jan 15, 2005</p>
<p><img src="img/julian.jpg" alt="Photo of Julian - PHP and MySQL"
width="104" height="135" /> </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit.</p>
</body>
</html>
Note: Split that Screen!
If you have enough screen real estate, it can be helpful to work in Dreamweaver's Split Screen View as you create the XHTML document. The Split Screen feature allows you to see the Design and Code Views simultaneously. To switch into Split Screen View, click the Split button above the document window. As shown in Figure 4.8, "Working in Split Screen View", you'll be able to watch the creation of your markup in Code View as you add elements to the page in Design View.
Figure 4.8. Working in Split Screen View.
We need to add three sections just like this one for the other featured tutorials. Follow the steps above to add these sections, working from left to right, and top to bottom. Once you've done so, your document should contain the following markup:
Example 4.2. homepage-layout.html (excerpt)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Code Spark layout</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<h1>Latest ideas </h1>
<h2><a href="#">ASP is from Mars - PHP is from Venus</a></h2>
<p>Julian Carroll Jan 15, 2005</p>
<p><img src="img/julian.jpg" alt="Photo of Julian - PHP and MySQL"
width="104" height="135" /> </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit.</p>
<h2><a href="#">IIS Security - Tightening the .NET</a></h2>
<p>Brigitte Walker Jan 11,2005</p>
<p><img src="img/brigitte.jpg" alt="Photo of Brigitte - ASP and
.NET" width="104" height="135" /> </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit.</p>
<h2><a href="#">CSS: Designing with Style, not class</a></h2>
<p>Georgina Laidlaw Jan 7, 2005</p>
<p><img src="img/georgina.jpg" alt="Photo of Georgina -
CSS Design" width="104" height="135" /> </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit.</p>
<h2><a href="#">Java - Servlets yourself right</a></h2>
<p>Thomas Rutter Jan 3, 2005</p>
<p><img src="img/tom.jpg" alt="Photo of Tom - JSP and Servlets"
width="104" height="135" /> </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit.</p>
</body>
</html>
Linking to Other Tutorials
The bottom two sections of the homepage contain slightly different content. They too have headings, but one contains links to other tutorials on the site, while the other displays the latest information about the Web browsers that visitors are using to view the site. First, let's consider the section that contains links to tutorials. The layout for this section is shown in Figure 4.9, "Viewing the layout for the links section."
Figure 4.9. Viewing the layout for the links section.
The "Recent Tutorials" section is laid out in a tabular format, with headings at the top of each column, and the data arranged in the cells that follow. As this is tabular data, it's appropriate to use a table to structure this information in a semantic manner.
First, in Design View, add the RSS button image with the alternative text, RSS. Hit Enter, and type Recent Tutorials; make this into a level two heading using the Property Inspector, and hit Enter once again.
Now, let's insert a table. To do this in Dreamweaver, open the Layout Panel of the Insert toolbar, and click the Table button, as shown in Figure 4.10, "Clicking the Table button on the Insert toolbar."
Figure 4.10. Clicking the Table button on the Insert toolbar.
Note: Dreamweaver's Insert Toolbar
You probably already noticed the drop-down list on the Insert toolbar: this lets you switch between different sets of tools. Dreamweaver calls these sets of tools "panels." You can instead display the different panels as tabs by selecting Show as tabs from this drop-down list.
The Table dialog, shown in Figure 4.11, "The Table dialog", will open. This enables you to set the features of the table that you are about to insert. Give your table seven rows and two columns. Under the Header section, select Top to convert the cells in the top row of the table into th elements: table headings.
Figure 4.11. The Table dialog.
We can also add a summary here. The summary will not display on-screen in a regular graphical browser, but provides screen reader users with additional information about the table, to help them put it into context. This and the caption fields are particularly important if the context of the table is vague because of the way the page has been laid out. In our document, however, it should be easy to understand the content of the table.
Click the OK button in this dialog to insert a table into your document. Now, enter the tabular data into the cells: start with the headings "Title" and "Published" in the top row, then fill in the rest of the tutorials and their publication dates, as shown in Figure 4.12, "Viewing the table in Design View."
Figure 4.12. Viewing the table in Design View.
Make each of the tutorial titles into a link by selecting the title and entering a # into the Link field of the Property Inspector, just as you did for the tutorial headings. Once you've done this, switch into Code View to review the markup for this section. It should look like this:
<h2>Recent Tutorials</h2>
<table width="100%" border="0" summary="This table shows the most
recent tutorials posted on the site and their publication
date.">
<tr>
<th scope="col">Title</th>
<th scope="col">Published</th>
</tr>
<tr>
<td><a href="#">CSS forms - Massive feedback distortion?
</a></td>
<td>26-12-2005</td>
</tr>
<tr>
<td><a href="#">Buttons & Dials - Java Controls Explained
</a></td>
<td>23-12-2005</td>
</tr>
<tr>
<td><a href="#">Graphic Violence - Crazy Graphs with PHP
</a></td>
<td>19-12-2005</td>
</tr>
<tr>
<td><a href="#">Making the .NET Framework Work</a></td>
<td>16-12-2005</td>
</tr>
<tr>
<td><a href="#">CSS: Designing with Style, not Class
</a></td>
<td>12-12-2005</td>
</tr>
<tr>
<td><a href="#">JavaScript's Presentational Presence</a></td>
<td>9-12-2005</td>
</tr>
</table>
Displaying Browser Statistics
The final section of this main content area displays browser statistics. This content is shown in the Fireworks design in Figure 4.13, "Designing the browser statistics display for the homepage."
Figure 4.13, "Designing the browser statistics display for the homepage" comprises a heading and a pie chart, and illustrates market share for different types of browsers. A text description is provided, along with a legend for the diagram.
To start, add the heading. Then, insert the image; don't forget to add an alt attribute that clearly explains what the image is. There's no need to describe the data in the chart: the text below the chart helps with that.
Note: Making Table Data Accessible
A chart is a great way to display a lot of data succinctly, but it isn't very accessible. To rectify this, you can present the chart's data on a separate page, and use the img element's longdesc attribute to link to it. We'll take a look at longdesc in more detail in Chapter 7, Accessibility.
Figure 4.13. Designing the browser statistics display for the homepage.
We can now add the list. We create lists using the Unordered List button in Dreamweaver's Property Inspector, shown in Figure 4.14, "Creating an unordered list." Type the first list item into the document as if you were entering a new paragraph, then click the Unordered List button on the Property Inspector. When you hit Enter, a new list item will be created.
Figure 4.14. Creating an unordered list.
Once you've created all the items in the list, hit Enter twice to close the list and create a new paragraph. Now, enter the two paragraphs of text that accompany this section. That's it! The code for this final section of the homepage's content area is now complete:
<h2>Browser Stats - December - 04</h2>
<p><img src="img/browser_chart.gif" alt="Pie chart showing
browser statistics for Dec 2004" width="180" height="180" />
</p>
<ul>
<li>IE6 Win (72%)</li>
<li>Firefox/Moz (19%)</li>
<li>IE5+ Win (<5%)</li>
<li>Safari (2%)</li>
<li>Opera (<1%)</li>
<li>Other (<1%)</li>
</ul>
<p>December saw Firefox's market share jump 1% across all major
site categories presumably on the back of it's 1.0 launch push.
Increases of as much as 3% were observed in some
technically-oriented categories.</p>
<p>Overall, though IE6 continued the gradual decrease in market
share it has endured since it held 92% in November 2003, it
still enjoys 4 times greater usage than any other browser.</p>
If you view the page in a browser, you'll see all of the content displayed as in Figure 4.15, "Displaying the document in Firefox 1.0" below: our logical headings, paragraphs, tables, and lists are presented in the browser's default display style.
Figure 4.15. Displaying the document in Firefox 1.0.
