Home arrow Web Standards arrow Page 2 - Web Standards in Dreamweaver Part 3

Web Standards in Dreamweaver Part 3

This last part of the chapter on Web Standards in Dreamweaver shows you how to create a layout with a banner at the top of the page and a navigation menu on the left side. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, 2004, Apress, ISBN: 1590593480.)

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 9
September 22, 2004
  1. · Web Standards in Dreamweaver Part 3
  2. · Adding Page Content
  3. · Validating the Document
  4. · Revalidate Your Page in Dreamweaver
  5. · Set Properties of Table Cells
  6. · CSS for Layout
  7. · Create the Navigation
  8. · The Content Area
  9. · Browser and Device Issues
  10. · Media Descriptors
  11. · Working with Dynamic Data
  12. · Resources and Summary

print this article

Web Standards in Dreamweaver Part 3 - Adding Page Content
(Page 2 of 12 )

Follow these steps to add page content.

1. In order to see how your content will look, add some dummy content, including a level 1 heading and a level 2 heading, to the main content area of the page (the middle cell of the bottom row).

The content you add will take on the font of the style you set for page’s preferences.

2. You can now set styles for your headings by going to the New CSS Style dialog box, choosing the Tag (redefines the look of a specific tag) radio button, and then choosing the tag you want to style, as shown in Figure 2-25.


Figure 2-25. Setting styles for headings

The Navigation

Follow these steps to add the table that will contain the navigation.

  1. Click the cell on the bottom left. In the Property inspector, select center from the Horz (align) drop-down list, and top from the Vert (valign) drop-down list.

  2. Insert a table that contains four rows, one column, and the summary “This table contains the navigation.” In Design view, the table looks as shown in Figure 2-26.


Figure 2-26 The table in Design view

Adding Rollover Images

To make the navigation more interesting, let’s add some rollover buttons. Dreamweaver makes it simple to add such effects.

  1. Insert the navigation images into the cells. Name them in the Property inspector as you insert them.

  2. To add the rollover effect, in the Behaviors panel, click the plus sign (+) button and choose Swap Image.

  3. Browse to the image you want and click OK, making sure that the options Preload images (which will load your image as the page loads so there is no delay when the mouse pointer rolls over it) and Restore images onMouseOut (which will roll the image back to its previous state when the mouse pointer is no longer rolling over the button) are both checked, as shown in Figure 2-27.


Figure 2-27. The Swap Image dialog box

TIP -- When adding images to your page, be sure to add alt text to the image. If you have set your preferences to prompt you for Accessibility attributes when you insert an image, a dialog box will request the alt text; otherwise, you can add it in the Property inspector.

After adding the images, this simple layout is complete, as shown in Figure 2-28.


Figure 2-28. The completed layout in Design view

The XHTML markup behind this document looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="
<title>XHTML Tables based layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="global.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
<body onload="MM_preloadImages('img/roll1b.gif', 'img/roll2b.gif',
'img/roll3b.gif', 'img/roll4b.gif')">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
summary="This table is used for layout purposes only">
<td height="20" colspan="3">&nbsp;</td>
<td height="80" colspan="3" class="banner">&nbsp;</td>
<td height="20" colspan="3">&nbsp;</td>
<td width="200" align="center" valign="top"><table width="100%" border="0"
cellspacing="0" cellpadding="0" summary="this table contains the navigation">
<td><a href="javascript:;" onmouseover="MM_swapImage
('home', '', 'img/roll1b.gif',1)" onmouseout="MM_swapImgRestore()"><img
src="img/roll1a.gif" alt="Home" name="home" width="160" height="20" border="0"
id="home" /></a></td>
<td><a href="javascript:;" onmouseover="MM_swapImage
('search', '', 'img/roll2b.gif',1)" onmouseout="MM_swapImgRestore()"><img src=
"img/roll2a.gif" alt="Search" name="search" width="160" height="20" border=
"0" id="search" /></a></td>
<td><a href="javascript:;" onmouseover="MM_swapImage
('about', '', 'img/roll3b.gif',1)" onmouseout="MM_swapImgRestore()"><img
src="img/roll3a.gif" alt="About" name="about" width="160"
height="20" border="0"
id="about" /></a></td>
<td><a href="javascript:;"
onmouseover="MM_swapImage('contact', '', 'img/roll4b.gif',1)"
onmouseout="MM_swapImgRestore()"><img src="img/roll4a.gif" alt="content"
name="contact" width="160" height="20" border="0" id="contact" /></a></td>
<td> <h1>Heading level one </h1>
<p>Content here</p></td>
<td width="40">&nbsp;</td>


This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.

Buy this book now.

blog comments powered by Disqus

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials