Home arrow Web Standards arrow Page 7 - Web Standards in Dreamweaver, Part 1
WEB STANDARDS

Web Standards in Dreamweaver, Part 1


The first half of this chapter focuses on the use of XHTML and CSS when working in Dreamweaver. Discover why developing in XHTML instead of HTML is a good idea and how to start working in valid XHTML Transitional. Some basics of CSS design are also covered. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, Rachel Andrew and Kevin Marshall, published by Apress, 2004, ISBN: 1590593480.)

Author Info:
By: Apress Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 23
August 04, 2004
TABLE OF CONTENTS:
  1. · Web Standards in Dreamweaver, Part 1
  2. · The Rules of Writing XHTML
  3. · Empty Elements
  4. · Lists
  5. · XHTML in Dreamweaver MX 2004
  6. · Authoring Valid CSS
  7. · The Basics of CSS

print this article
SEARCH DEVARTICLES

Web Standards in Dreamweaver, Part 1 - The Basics of CSS
(Page 7 of 7 )

Before you dive into working with CSS within Dreamweaver MX, you should understand some of the basic concepts of CSS design. If you used CSS in the past, this section will serve as a refresher.

Ways to Implement CSS

There are three ways to implement CSS in your web site or document: inline, embedded, or external.

Inline Stylesheets

An inline style definition is a one-time style definition placed in your code to style only the element to which it is attached. By using this method, you will lose many of the benefits of CSS because you must style each element individually, which is the same way that you use font tags or other presentational HTML.

<h1 style=" font-family: Verdana, Arial, Helvetica, sans-serif; color: #663366;">

This markup only affects the particular <h1> tag on that page. If this were the only time that you ever used this style in your site, you might consider using an inline style. If you were going to use this style more than once, however, it would be better to make this into a class and apply it to the <h1> tag because you could reuse the class for other instances of this style. Using an inline style will override anything you defined for this tag in your stylesheet for this instance of the tag, so it can be useful if you want just one <h1> tag to look different from the others. See the “Cascading Style Sheets” section, later in this chapter, for more information.

Embedded Stylesheets

An embedded stylesheet controls only the elements on that page, and the CSS code is placed in the head of the document. In the following code example, any <h1> tags in the document will be colored purple. However, this CSS will not be applied to any other pages on the site.

<head>
<title>CSS Example</title>
<style type="text/css">
<!--
h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #663366;
}
-->
</style>
</head>

If you wanted to use this style on every page of your site and you were using the embedded method, you would need to add this code to every page of the site.

External Stylesheets

An external stylesheet is the most useful and flexible way to use CSS. When you link to a single external stylesheet from all pages of your web site, each page uses the definitions from that stylesheet. Changing the purple <h1> tags to orange throughout the site would involve one simple change to the external stylesheet. A simple link to an external stylesheet looks like this:

<link href="global.css" rel="stylesheet" type="text/css" />

We will discuss the design and implementation of external CSS in more detail later in this chapter.

Cascading Style Sheets

The “cascading” in CSS refers to the fact that styles defined closer to the element will overwrite any other rules. For example, consider the following:

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif; color: #663366;
}

If you set this in an external stylesheet but decide that on one particular page you want all <h1> tags to be a different color, you could add a style rule in an embedded stylesheet in the head of that document that would override the external stylesheet rule. If you then decided you wanted a single, specific <h1> tag on this particular page to be yet another color, you could use an inline style on that specific tag, and it would take precedence over styles set in the embedded and external stylesheets.

Redefining How HTML Tags Look in the Browser

You have already seen how redefining HTML tags with CSS rules can change the way these structural tags are rendered and preserve the structure of your markup. This method provides a simple way of creating and maintaining a consistent look and feel for your site without bloating the HTML with presentational markup. If you are working with several authors who add content to the site, redefining tags will ensure that their content will fit with the rest of the site because their content will use the formatting defined in your stylesheet.

Creating CSS Classes

CSS classes allow you to create rules for page elements that have classes applied to them. For instance, if in the stylesheet you have the following:

.myborder {

  border-width: 1px;

  border-color: #000000;

  border-style: solid;

}

then any element, such as the following <img>, with a class of border applied will have a one-pixel-wide black border around it:

<img alt="me" height="80" width="40" src="me.jpg" class="myborder" />

TIP Netscape 4 renders this border in a strange way that causes the image to become nonclickable if it is a link. This is just one of the problems that you may encounter while using CSS with Netscape 4. Later in this chapter, we will provide ways to cope with old browsers.

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.

or <style> tags that enclose them) and paste them into your new stylesheet. Save the style-sheet as global.css. Return to your document and delete the <style></style> tags and everything inside them. Return to Design view.

  • Now attach your new stylesheet to the page by selecting Attach Stylesheet from the CSS Styles panel and selecting the global.css document.

  • The Layout

    You are going to create a layout with a banner at the top of the page and a navigation menu on the left side.

    1. To create the banner, select the top row of the table cells and click Merge Cells in the Property inspector.

    NOTE The bottom half of the Property inspector changes to reflect the current selection in Design view.

    2. Repeat this process for the next two rows so your table has three rows containing one cell each, and a fourth row containing three cells, as shown in Figure 2-22.

    Figure 2-22. Creating a table in the Property inspector

    3. Click the left cell of the bottom row. This will be the menu. In the Property inspector, set this cell’s width to 200 pixels, as shown in Figure 2-23.

    Figure 2-23. Setting table properties in the Property inspector

    1. Click the bottom-right cell. Set this cell to 40 pixels wide. The middle cell is where your page content will go.

    2. Click the top cell and set it to 20 pixels high. Do the same to the third cell down. Finally, set the middle cell to 80 pixels high.

    The Banner

    The middle cell will be the banner across the top of the page. You could simply set a background color for the table cell, but it is a better idea to do this using CSS. If you create additional pages from this template page, you can change the color of the banner on every page with one change in the stylesheet.

    1. To set the background color using CSS you need to create a class. Create a new class and name it .banner. In the Background category of the CSS Style Definition dialog box, select a color for the banner. Then go to the Border category and give the banner a top and bottom border, as shown in Figure 2-24.

    Figure 2-24. The Border category

    2. Click OK. Next, using the Property inspector’s Style drop-down list, apply the .banner class to the banner table cell.

    Adding Page Content

    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).

      2. The content you add will take on the font of the style you set for page’s preferences.
    1. 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. Seting 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.

    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.

    48

    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>➥

    ></table></td><td> <h1>Heading level one </h1>

    <p>Content here</p></td><td width="40"> </td>

    <tr> </table> </body> </html>

    Validating the Document

    After creating any layout, particularly if you are going to create multiple pages based on the same layout, it is a good idea to validate it before continuing. Dreamweaver has its own validator to make this easy. Before using the validator, make sure you checked XHTML 1.0 Transitional to validate against in Edit

    ➤ Preferences ➤ Validator. To run the validator, open the Results panel and click the small green arrow shown in Figure 2-29.

    Figure 2-29. Dreamweaver’s validator

    You can also validate your document by selecting File ➤ Check Page ➤ Validate Markup (for HTML) or File ➤ Check Page ➤ Validate as XML (for XHTML).

    You can choose to validate the current document, the entire site, or just selected files in the site. The validator preferences can also be set here. The document should validate as XHTML 1.0 Transitional without needing to be edited by hand.

    Using the W3C Validator

    Although the internal validator is a useful tool when working on your documents within Dreamweaver, validating at the W3C makes a good final check. The URL for the W3C HTML validator is http://validator.w3.org.

    The W3C tool allows you to validate by entering the URL of the page that requires validation or by uploading the document. The easiest way to validate your pages is to FTP them to your web site and then enter the URL into the appropriate box at the validator. If you are using the Dreamweaver validator as you work on your site, you will probably only need to check with the W3C validator as part of your final testing to ensure that all documents, including those that contain dynamic data, are valid.

    Moving to XHTML Strict

    The XHTML Transitional DTD allows the use of deprecated attributes that will be removed from future versions. The Strict DTD does not allow the use of these deprecated attributes.

    To convert your document from the Transitional DTD to the Strict DTD, you must work in Code view. Dreamweaver MX creates XHTML Transitional markup in recognition of the fact that most developers still need to create pages that are backward compatible with older (before version 5) browsers. However, the changes you will need to make are relatively simple.

    Change the Document Type Declaration

    In Code view, change the DOCTYPE at the top of the page to this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Revalidate Your Page in Dreamweaver

    In Edit ➤ Preferences ➤ Validator, select the check box to validate against XHTML Strict. Run Validate as XML again. This time you will get a list of errors shown with an exclamation mark inside a red circle, as shown in Figure 2-30.

    TIP You can also save this list (right-click on a PC or CMD-click on a Mac and select Save Results) or open the list in a browser (select Open Results in Browser), which is useful if you are validating a large document or entire site because you can use the list as a checklist to ensure that you caught all instances of invalid code.

    The validator at the W3C site gives a similar list of errors, as shown in Figure 2-31.

    Figure 2-31. W3C validator in a browser showing the errors

    These “errors” are simply the tags and attributes that have been removed from the Strict DTD. They are mainly elements that handle how the document looks and therefore should be replaced with CSS. This list is very helpful in making your page validate against the XHTML Strict DTD because it gives you a quick way to see the deprecated elements. (The document validates as XHTML Transitional, so it conforms to the rules of being well formed.)

    Table 2-1 shows the errors that the validator flagged and how these are solved.

    Table 2-1. Validator Errors and Solutions

    Error Solution
    Attribute language is not declared for element script This refers to <script language="JavaScript" type="text/JavaScript">. The language attribute is deprecated and should be removed.
    Attribute width is not declared This refers to <td width="80">. The width
    for element td attribute of the <td> tag has been deprecated because it can be replaced by CSS. All width attributes of table cells should be removed.
    Attribute border is not declared for element img This refers to <img border="0" [...] >. You might be accustomed to using border="0" to remove the unsightly border around images that are also links. It is possible to use CSS to do this, so border must be removed from all images.
    Attribute name is not declared Dreamweaver MX inserts both a name attribute
    for element img and an id attribute when you name an image. The name attribute is still used by older browsers and ensures backward compatibility, whereas the id attribute is the attribute in the specification. To use both is valid in XHTML Transitional, but in Strict the deprecated name attribute has to go.

    After removing these deprecated attributes you should find that your page validates as XHTML 1.0 Strict, but it looks a bit funny—the banner is shorter and there are big blue borders around the images. You can fix this by replacing the deprecated attributes with CSS.

    Remove Borders Around Images

    In the days of HTML, you would use border="0" to remove borders from images with links; now you can create the same effect with CSS.

    1. Open the New Style dialog box, click the Tag (redefines the look of a specific tag) radio button, and select img in the Tag drop-down list, as shown in Figure 2-32. Then click OK.

    Figure 2-32. Selecting img in the Tag drop-down list

    2. Select the Border category in the CSS Style Definition dialog box. In the Style list, select the value none in the Top drop-down list and make sure that Same for all is checked, as shown in Figure 2-33.

    Figure 2-33. CSS definitions for the image

    3. Click OK. Your image borders disappear in the Dreamweaver Design view.

    TIP Dreamweaver adds a border="0" attribute to any image that is a link. If you need to validate to XHTML Strict or simply do not want this attribute there, you will need to remove it.

    Set Properties of Table Cells

    You can use CSS to replace the width and height attributes of table cells. You already have a class for your banner, so you can simply add the height specification to that class.

    1. Select the .banner class in the CSS Styles panel and click the Edit Style icon.

    2. The dialog box that opens contains the rules that you already set for this class. Go to the Box category, type 80 pixels in the height box, and click OK. You can create classes for any table cells that you want to change.

    Move JavaScript to an External File

    Dreamweaver inserts all JavaScript required by its behaviors into the head of your document. This is not ideal. For instance, the JavaScript in the document that enables the rollover effect is 23 lines long. That block of script has to be inserted into every page of the web site and loaded each time.

    Moving this JavaScript to a central file that is linked to all pages will trim down the load times of your pages. It also means that search engine spiders will not have to crawl through lines and lines of script to find your content, and pages will be easier to maintain and keep consistent.

    1. To move the JavaScript to a central file, simply copy the JavaScript onto the clipboard and open a JavaScript document in Dreamweaver by clicking File ➤ New, selecting Other, and selecting JavaScript. Once you have aJavaScript document, save it as, for example, functions.js, and paste the contents of the clipboard into it. You can now return to the original XHTML document and delete everything between the <script> tags. If you are working in HTML or XHTML Transitional, you should be left with just the following:

    2. If you are working in XHTML Strict, you should be left with just this:

    <script language="JavaScript" type="text/javascript"></script>

    <script type="text/javascript"></script>

    Now add a link within the <script> tags to the source of the JavaScript.

    <script language="JavaScript" type="text/javascript" src="functions.js"></script>

    If you are using XHTML Strict, that will need to be

    <script type="text/javascript" src="functions.js"></script>

    If you add any other behaviors to other page elements, Dreamweaver will continue to add them to your document. However, you can add as many different functions to your external JavaScript file as you like. Just copy and paste them to your file and remember to delete any additional <script> tags that Dreamweaver inserts.

    Now when you want to create a new page that utilizes any or all of the functions in your functions.js file, all you need to do is paste the link to the functions file into the head of your document. This is an excellent way to work with templates because you can create your template file with all the JavaScript in the head of your document, move the JavaScript to a functions file, and just keep the link to that file in the head of the template document. When you create new pages from your template, they will automatically contain all the necessary JavaScript.

    CSS for Layout

    One of the reasons for building and validating an XHTML Transitional and Strict document is to show that you can still work to standards even if you are not ready to go with CSS for layout yet. However, CSS for layout is the way of the future and learning to use CSS in this way is going to be important for the future career of anyone working in this industry. Dreamweaver MX 2004 supports CSS for layout in a far more advanced way than previous versions, making it far easier to get started.

    TIP You may also hear people talking about layers in Dreamweaver. Layers are simply content structured with inline CSS positioning. They are less useful than an external stylesheet for reasons including reduced code portability and added document size.

    Creating the Banner

    Follow these steps to create a banner.

    1. To get started building a layout using CSS, create a new XHTML document in Dreamweaver and attach to it the stylesheet that you created for your tables-based layout.

    1. You can use the styles you created for your banner table cell. Open your stylesheet in Dreamweaver and change .banner to #banner.

    2. To create the banner, add a <div> tag. A <div> tag simply marks an area of the document, which you can then style. To insert a <div> for the banner, select the Layout pane of the Insert toolbar and click the Insert Div Tag icon to display the dialog box shown in Figure 2-34.

    Figure 2-34. The Insert Div Tag dialog box

    You will see that the banner shows up as an ID—this is becausea pound sign (#) denotes an ID in the stylesheet, whereas a period (.)denotes a class.

    4. Select the ID banner and click OK.

    TIP An ID needs to be unique in your document, so it is perfect for use in an area of the page that will occur only once in each document, such as a banner or navigation block. A class can be present multiple times in one document, so you use a class for elements that may appear more than once, such as styles for links, a boxout style to highlight terms, and so on.

    You should see the familiar banner appear in Design view. It contains the text Content for id “banner” Goes Here, as shown in Figure 2-35.

    Figure 2-35. A banner in Design view

    5. Switch to Code view to see the markup that Dreamweaver added.

    <div id ="banner">Content for id "banner" Goes here</div>

    6. Delete the placeholder text. In the tables-based layout, there was some white space above the banner. You can reproduce this with CSS by adding a margin to the top of the banner. Edit the #banner ID again and select the Box category. Uncheck the Same for all check box in the Margin section and then set the following properties, as shown in Figure 2-36:

    • Top: 20 pixels

    • Right: 0 pixels

    • Bottom: 20 pixels

    • Left: 0 pixels

    Figure 2-36. The Box category

    7. Click OK to see the change in Design view.

    Create the Navigation

    Follow these steps to create the navigation.

    1. Create a new CSS class; this time select the Advanced (IDs, contextual selectors, etc) radio button, and type #nav in the Selector text box, as shown in Figure 2-37.

    Figure 2-37. Creating an advanced CSS class

      1. Click OK. Then select the Positioning category and set the following properties:

        • Type: absolute

        • Width: 200 pixels

        • Top: 140 pixels

        • Left: 4 pixels

    1. Click OK. Click the Insert Div Tag icon once again, and in the ID drop-down list, click nav. In the Insert drop-down list, select After start of tag, and choose <div id="banner">, as shown in Figure 2-38, to ensure that this <div> tag is created outside the banner and is not nested inside it.

    Figure 2-38. The Insert Div Tag dialog box

    4. Click OK. The <div> tag will appear underneath the banner on the left, as shown in Figure 2-39.

    CSS Navigation Buttons

    One way to trim down file sizes and improve the accessibility of your document is to use CSS for navigation that would have previously required images. You will use CSS in this way to create your navigation. Your navigation is simply a list of places where the user can go, and as such, using a list to markup the content is a good choice.

    1. In the <div#nav> tag, create a list, and make each item a link, as shown in Figure 2-40.

    2. First you will style the list itself. Create a new CSS style, choose Advanced, and in the Selector box, type #nav ul, as shown in Figure 2-41.

    Using the selector #nav ul means that you are creating styles for all <ul> tags within the div #nav. Any <ul> tags within that division will be styled in this way, but those not inside this area of the page will retain their default formatting.

    Figure 2-41. Creating styles for all <ul> tags

    1. Go to the Box category of the CSS Style Definition dialog box and set Margin Left to 0 pixels and Padding Left to 0 pixels. Click OK and then create a new CSS Style that styles any list item that is inside the #nav.

    2. Go to the List category of the CSS Style Definition dialog box and under Type, select the none check box to remove the bullet from the start of each list item. Next, in the Box category, set padding to 3 pixels and select the Same for all check box. Set the bottom margin to 4 pixels and clear the Same for all check box. To add a border to each item, use the Border category, as shown in Figure 2-42.

    Figure 2-42. Setting border properties

    5. You now need to style the anchor tag—the navigation link itself. Create a new CSS class, select the Advanced radio button, and type #nav a:link. Using the Type category, style the text of the link and set the color. You can also set the navigation link to have no underline by selecting the none check box, as shown in Figure 2-43.

    Figure 2-43. Setting text properties

    6. After setting up #nav a:link, repeat this process for #nav a:visited, #nav a:hover, and #nav a:active. If you want your navigation to be highlighted when the user holds his or her mouse pointer over the link, set a different color for the #nav a:hover state.

    TIP When setting different properties for the hover state, take care not to change the size of the text. If you do, you will end up with a jiggling effect as the page elements are shifted around by the change in size of the link.

    The Content Area

    Finally, for this simple layout, you need to place the content on the page.

      1. Create a new CSS style, select the Advanced radio button, and type #content into the Selector box. You want your content to be liquid and stretch to fill the user’s screen width, so click the Box category, and in the Margin area, clear the Same for all check box and set the following properties:

        • Top: 50 pixels

        • Left: 260 pixels

        • Right: 40 pixels

    1. Now click OK, and insert the content after the tag <div id="nav">. You should see the <div> appear in the main area of the page, as shown in Figure 2-44. Add some dummy content.

    As you may have realized, you did not use absolute positioning or anything else to position this content. You simply used a margin to clear it from the navigation, which is absolutely positioned. This works because absolute positioning takes an element out of the flow of the document. The content without any margins applied to it would have simply lain over the top of the navigation as if the navigation was not there.

    To display the layout so it is resized with the user’s screen size, make sure that the content leaves space for the absolutely positioned navigation.

    This is a very simple layout, but hopefully it has given you an idea of the tools that are available in Dreamweaver to work with CSS layouts. If this is your first experience with CSS, you may find the concepts a little tricky, but the best way to become accustomed to any new way of working is simply to experiment and try things out. The “Resources” section at the end of this chapter lists several sites that provide CSS layouts that you can experiment with. There are also the CSS page designs within Dreamweaver that you can use as starting points for your own experiments.

    Browser and Device Issues

    Browser issues are cited as the main reason that people do not implement CSS on their web sites; however, this excuse is fast becoming outdated. Even so, we will look at how to address these issues in this section.

    Although browsers with no support for CSS should render your content in areadable fashion, there are problems with browsers that have partial or buggy support for CSS, and it is these browsers, particularly Netscape 4, that you need to consider.

    Versions of Netscape 4 may crash or render your page unusable or just plain ugly when encountering certain valid CSS declarations. Thankfully, there are ways around this problem.

    Netscape 4

    Earlier, we looked at two ways of attaching a stylesheet to a page: linking it and importing it. Netscape 4 does not recognize the @ Import directive, and you can use this fact to your advantage by attaching two stylesheets to the page: one basic, Netscape 4–friendly stylesheet that you link to your page, and another, more advanced stylesheet that you attach using @ Import, making it invisible to Netscape 4.

    1. To attach two stylesheets to your page in this way using Dreamweaver, attach the basic Netscape 4–friendly stylesheet first, using the link method, as shown in Figure 2-45.

    Figure 2-45. The link method

    1. Attach the second stylesheet with the declarations for newer browsers using @ Import, as shown in Figure 2-46.

    2. Specify the imported stylesheet after the linked stylesheet so that the Netscape 4–friendly CSS is overridden by the second stylesheet. In Code view, the generated code looks like this:

    <link href="oldbrowsers.css" rel="stylesheet" type="text/css" /><style type="text/css"><!--@import url("newbrowsers.css");--></style>

    Any CSS that you want to be different for newer browsers must be included in the imported stylesheet. The browser will use the values in the linked stylesheet if no values are found in the imported one for that element.

    68

    JavaScript Techniques

    It is possible to use JavaScript to detect what browser is being used, and then write an appropriate stylesheet for that browser. This method relies on the user having JavaScript turned on, but it can be very useful if you find that a bug in a particular browser causes a crash or other problem and you need to isolate that browser by attaching a stylesheet designed to be friendly to it.

    You can also use JavaScript to detect whether the user is visiting with a newer, more standards-compliant browser or a version of the browser earlier than 5, and display stylesheets accordingly. This method checks to see whether the browser supports the W3C DOM and then writes the appropriate stylesheet into the page:

    <script language="javascript" type="text/javascript">if (!document.getElementById) {document.write('<link rel="stylesheet" href="oldbrowsers.css" type="text/css" />');}else{document.write('<link rel="stylesheet" href="newbrowsers.css" type="text/css" />');}</script>

    The first stylesheet in the code just shown should be the stylesheet for those older browsers that do not support the W3C DOM; the second stylesheet is for all newer browsers.

    Media Descriptors

    Media descriptors allow you to specify how a document is presented on different media: monitor screens, paper, screen readers, Braille readers, or other devices. For example, you can specify that one stylesheet is used if a page is being printed and another is used when it is displayed in the browser window. Amedia descriptor allows a stylesheet designed with speech synthesis rules to be served to screen readers and stylesheets designed with Web TV or PDAs in mind to be served appropriately.

    Whether a browser or device understands the media descriptor varies between devices at present, but there is good support for print (the media descriptor you will currently find most useful). Learning to use this method of serving appropriate presentational rules should become more useful in the future as device support grows.

    The media descriptors as listed in the CSS2 specification are shown in Table 2-2.

    Table 2-2. CSS2 Media Descriptors

    Descriptor Media
    all All devices.
    aural Speech synthesizers (screen readers).
    braille Braille tactile feedback devices.
    embossed Paged Braille printers.
    handheld Handheld devices (small screen, monochrome, limited bandwidth).
    print Documents to be printed.
    projection Projection devices.
    screen Color computer screens—standard web browsers.
    tty Media using a fixed-pitch character grid or portable devices with
    limited display capabilities. These are typically older mobile devices;
    most current devices would fall into the handheld category.
    tv Television.

    You can use media descriptors either by specifying a separate stylesheet for each type that you want to use or by using @ Import.

    Specifying a Separate Stylesheet for Each Media Descriptor

    If you already have a stylesheet linked to your page for presenting your document in a browser and you want to add a stylesheet that will only come into play when the document is printed, you can add a second linked stylesheet for print. You will also need to add the media descriptor screen to your existing stylesheet so that the browser knows to use the screen stylesheet in the browser and the print stylesheet when the page is printed.

    <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" />

    Using a print stylesheet allows you to, for instance, hide navigation when a document is printed, change the font from a sans-serif typeface (which is more readable on screen) to a serif typeface (which is more readable in print), and remove a background color or images that would cause the printing to take longer.

    Media Descriptors with Imported Stylesheets

    The method just outlined means that you need to create a separate stylesheet for each browser. However, by using @ Import, you can specify certain elements within one stylesheet to apply to different types of media. To use the @ Import method, attach your stylesheet to the page.

    <style type="text/css" media="all">@import "all.css";</style>

    Within the all.css stylesheet, add attributes for each media descriptor by using @ media.

    @media print {

    body { font-size: 10pt; } }

    @media screen {

    body { font-size: 12px; } }

    @media screen, print {

    body { color: #000000; } }

    The declarations just shown give a font size of 10 points when the page is printed and 12 pixels when the page is viewed in a regular browser. Both screen and print will use #000000 (black) as the color of the body text.

    Working with Dynamic Data

    Later in this book, you will immerse yourself in developing dynamic ASP.NET sites in Dreamweaver MX 2004. Developing with valid XHTML or HTML should make your life easier when incorporating dynamic data into your page. When data is being pulled from a database, small errors such as unclosed tags and badly nested elements can wreak havoc across your site and become difficult to debug, so starting with a solid framework as you design your layout will save time later on.

    A combination of valid (X)HTML and CSS is ideal for a dynamic site, especially those sites that allow users to add information (such as content management systems or client-updateable news pages) because your style-sheets ensure that consistency is maintained across your site.

    What to Watch Out For

    There are some issues to watch out for when working with dynamic pages.

    • When selecting an area to use as a repeat region (a dynamic, repeating block of code pulled from a database), ensure that you select the entire block of code that you want to be repeated, and that the tags are properly closed and nested when the page is viewed in a web browser.

    • When creating areas of your page that will be displayed conditionally, ensure that all tags are closed correctly when the page is loaded under each possible condition.

    • If you are creating pages to which users or authors will add content via an administration section, take extra care in the design of the application so that the authors do not add anything invalid, or add HTML markup where you are working in XHTML.

    Validating Dynamic Pages

    Dynamic pages should be validated with the online validator at the W3C. If the pages include conditional regions, validate each possible way that the page can be displayed if at all possible. Your server-side code will not cause any validation problems with the validator because by the time it has been parsed by the server, the validator sees only the (X)HTML generated from the server-side code.

    If you are maintaining a dynamic site, pages that are frequently modified should be validated occasionally in order to check that you are effectively counteracting invalid items.

    Resources

    There are many resources available online for those who want to further explore the subjects discussed in this chapter.

    The Web Standards Project: http://www.webstandards.org. The WaSP web site provides news and information about web standards and many helpful resources to help you to work with standards in your own projects.

    • NYPL Style Guide: http://www.nypl.org/styleguide/. This style guide, created for the New York Public Library, is an easy-to-understand explanation of how to use web standards.

    • Macromedia DevNet: http://www.macromedia.com/devnet/. Keep an eye on this site for tutorials, specifically about using XHTML and CSS with Dreamweaver. There are whole sections devoted to CSS and accessibility.

    • W3Schools: http://www.w3schools.com. Check out the CSS and XHTML tutorials here. This site has lots of information on many web technologies presented in a clear and easy-to-understand manner.

    • CSS-Discuss: http://www.css-discuss.org. A mailing list for CSS discussion. Try searching the archives here if you are having a problem with CSS. If you cannot find an answer, posting to the list will get some of the best CSS brains in the world thinking over your problem for you. To get useful help on this mailing list and others like it, it is a good idea to ensure that you have validated your document and CSS file before posting because it makes it easier for people to see whether your problem is an error on your part or perhaps a browser bug for which there is a workaround.

    • CSS Zen Garden: http://www.csszengarden.com. Inspiration for CSS layouts.

    • Real World Style: http://realworldstyle.com. CSS layouts, tips, and techniques, many of which work in Netscape 4.

    • CSS Panic Guide: http://www.thenoodleincident.com/tutorials/css/. A good place to go when it all seems to be going wrong or when you want to find more resources on CSS.

    Summary

    With Macromedia Dreamweaver MX 2004, creating valid and accessible web sites with HTML and XHTML is within the reach of every designer and developer. In this chapter, we discussed

    • How to write valid XHTML in the Dreamweaver environment

    • How to create standards-compliant, tables-based layouts in Dreamweaver

    • How to use CSS to replace elements that are deprecated in the transitional DOCTYPE and not allowed if you validate to Strict

    • How to use CSS for layout

    This chapter provided some essential building blocks for good practices in web development that will assist you as you move onward to styling your pages with CSS and adding dynamic data to your web sites. By following best practices, not only will your web sites be more accessible to all web users, but also you will find your working and debugging methods are streamlined and simplified.


    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

    blog comments powered by Disqus
    WEB STANDARDS ARTICLES

    - 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 
    Support 

    Developer Shed Affiliates

     




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