• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Part: 2 Dreamweaver PROJECT 1 > Developing a Page Template

Lesson 5. Developing a Page Template

In this lesson, you will work with two powerful Macromedia Dreamweaver tools for site development: Cascading style sheets (CSS) and Dreamweaver templates. Both are powerful production streamlining tools that automate the development and maintenance of Web pages. In addition, they ensure design consistency across pages.

Cascading style sheets (CSS) are a collection of text and layout formatting rules that control the appearance of content on one or more Web pages. CSS have considerably more formatting options—from numerous font settings to layout, spacing, and border controls—available than traditional (and now discouraged) HTML-only alternatives, such as the <font> tag or the align attribute of many tags. With CSS, you can achieve a better design than you could in the past. Because multiple pages can point to a single cascading style sheet, you can have consistency across your site and make extensive design changes with minimal effort.

In the course of this lesson, you will create a Cascading style sheet for the Jade Valley Web site to ensure consistent content formatting.

Dreamweaver templates are a Dreamweaver-only feature that apply the same concept of style sheets to the document's overall layout and repeating elements (such as navigation bars). To use templates, you design a generic page layout, complete with graphics, navigation bars, footers, and placeholder text and save the generic version as a template. You can later generate new pages based on the template. In addition, templates ensure that you don't accidentally make a page look different than other pages in your site. Finally, all of the pages based on the template remain connected in Dreamweaver's memory; thus, if you change the template (change a color, add a new button to the navigation bar, or change the date in the footer), Dreamweaver can automatically update all of the pages based on that template.

The workflow, then, is to create a nearly perfect generic page, which you can use as the basis for any number of new pages (and templates, if you so desire). You've already created the basic HTML layout. Now you'll format it with CSS, ultimately reproducing the original design created in Fireworks. Finally, satisfied with this page, you'll save it as a template and use it to create the actual pages of the site—which you'll do in Lesson 6, “Developing Site Content.”


In this lesson, you will:

  • Understand how cascading style sheet works

  • Design a cascading style sheet

  • Redefine HTML tags and add custom classes

  • Apply CSS styles

  • Enhance page accessibility

  • Convert a page to a Dreamweaver template

  • Designate editable regions


This lesson takes approximately 90 minutes to complete.


Starting Files:


Completed Files:




Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint