Home arrow Web Standards arrow Page 5 - 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 - 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.

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