Web Standards in Dreamweaver Part 3

Web Standards in Dreamweaver Part 3 - Set Properties of Table Cells
(Page 5 of 12 )

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 a JavaScript 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:
   <script language="JavaScript" type="text/javascript"></script>
   
   
2. If you are working in XHTML Strict, you should be left with just this:
   
   
   <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.

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: CSS for Layout >>

blog comments powered by Disqus