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.
- 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.
- 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.
- Insert the navigation images into the cells. Name them in the Property inspector as you insert them.
- To add the rollover effect, in the Behaviors panel, click the plus sign (+) button and choose Swap Image.
- 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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++)
x.src=x.oSrc;
}
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++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].
document);
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;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<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">
<tr>
<td height="20" colspan="3"> </td>
</tr>
<tr>
<td height="80" colspan="3" class="banner"> </td>
</tr>
<tr>
<td height="20" colspan="3"> </td>
</tr>
<tr>
<td width="200" align="center" valign="top"><table width="100%" border="0"
cellspacing="0" cellpadding="0" summary="this table contains the navigation">
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
</table></td>
<td> <h1>Heading level one </h1>
<p>Content here</p></td>
<td width="40"> </td>
</tr>
</table>
</body>
</html>
 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. |
Next: Validating the Document >>
More Web Standards Articles
More By Apress Publishing
/ 4 
