Start learning with our library of video tutorials taught by experts. Get started

Dreamweaver CS3 Beyond the Basics
Illustration by

Creating a base template


From:

Dreamweaver CS3 Beyond the Basics

with James Williamson

Video: Creating a base template

In this chapter we will explore Dreamweaver's template features. Taking advantage of Dreamweaver's templating abilities can speed up your development time and more importantly can take the pain out of making site-wide or region-wide changes to your site. Creating your Dreamweaver templates requires just two basic steps. First, we design the page that we want to serve as the basis for the template, and it can be as simple or as complex as you need it to be. Now second, you have to define editable regions inside your template. When working on template based pages all non-editable page elements will be locked down and you won't be able to change them. Changes to those regions must be made in the source template.
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 17s
    2. Using the exercise files
      46s
  2. 1h 23m
    1. Reviewing the Coding toolbar
      8m 42s
    2. Customizing the Coding toolbar
      9m 52s
    3. Taking advantage of Code Hinting
      7m 20s
    4. Using snippets and shortcuts
      11m 10s
    5. Using the Quick Tag Editor
      5m 18s
    6. Using Find and Replace
      9m 50s
    7. Regular expressions
      5m 39s
    8. Using Bridge with Dreamweaver CS3
      8m 28s
    9. Round-trip editing with Photoshop CS3
      3m 40s
    10. Leveraging image variables in Photoshop CS3
      7m 32s
    11. Integrating external variables into your workflow
      6m 16s
  3. 37m 26s
    1. Understanding the CSS Styles panel
      7m 59s
    2. Understanding the Cascade
      5m 50s
    3. Understanding Inheritance
      5m 8s
    4. Understanding Specificity
      7m 5s
    5. Managing CSS styles
      5m 4s
    6. Using Design-Time style sheets
      6m 20s
  4. 2h 19m
    1. Using the new CSS template pages
      5m 59s
    2. Understanding DIV tag structure and layout
      12m 0s
    3. Understanding the CSS box model
      10m 0s
    4. Using absolute and relative positioning
      8m 35s
    5. Understanding floating elements
      7m 9s
    6. Clearing floats
      7m 19s
    7. Using floats to control page layout
      3m 45s
    8. Building structure and assigning IDs
      10m 19s
    9. Applying basic styling to structured content
      11m 14s
    10. Positioning container elements
      11m 4s
    11. Enhancing layouts with background graphics
      11m 48s
    12. Creating faux columns with background graphics
      8m 55s
    13. Creating rounded corners with background graphics
      9m 17s
    14. Building navigation with CSS
      16m 57s
    15. Using Dreamweaver's Browser Check feature
      5m 31s
  5. 53m 22s
    1. Creating properly structured forms
      6m 30s
    2. Creating accessible forms
      6m 41s
    3. Using CSS to lay out form structure
      7m 40s
    4. Creating vertical columns for form elements
      7m 48s
    5. Adding user feedback
      5m 52s
    6. Applying advanced styling to forms
      8m 11s
    7. Client-side form validation
      4m 17s
    8. Validating forms with the Spry Validation tools
      6m 23s
  6. 1h 20m
    1. Understanding the Spry framework
      3m 43s
    2. Defining a data source for use in Spry
      3m 56s
    3. Creating a Spry table
      8m 8s
    4. Using the Spry widgets
      8m 11s
    5. Connecting various data sets
      4m 50s
    6. Understanding Spry widget structures
      7m 1s
    7. Applying custom styles to Spry widgets
      6m 24s
    8. Applying additional custom styles to Spry widgets
      8m 46s
    9. Controlling Spry widget behaviors with JavaScript
      6m 0s
    10. Controlling Spry widget animations with JavaScript
      9m 31s
    11. Creating effects with Spry behaviors
      4m 42s
    12. Hand-coding Spry
      9m 11s
  7. 1h 11m
    1. Creating a base template
      8m 6s
    2. Creating editable attributes
      6m 26s
    3. Creating a new page from a template
      7m 42s
    4. Applying a template to an existing page
      4m 36s
    5. Creating nested templates
      5m 24s
    6. Using repeating regions
      6m 34s
    7. Creating editable and non-editable optional regions
      6m 0s
    8. Using template parameters
      7m 26s
    9. Using template expressions
      9m 59s
    10. Using conditional template expressions
      8m 54s
  8. 54m 40s
    1. Examining XML structure
      2m 44s
    2. Creating an XML document
      9m 9s
    3. Using the CDATA structure
      5m 7s
    4. Creating an XSLT file
      4m 33s
    5. Binding data from an XML to an XSLT document
      5m 6s
    6. Inserting repeating regions into an XSL document
      5m 16s
    7. Creating a client-side XSL transformation
      2m 52s
    8. Styling a remote RSS feed
      7m 29s
    9. Creating a server-side XSL transformation
      5m 31s
    10. Writing XSL expressions
      6m 53s
  9. 1h 2m
    1. Overview of building dynamic websites
      1m 35s
    2. Installing PHP, MySQL, and Apache on Mac
      3m 22s
    3. Installing PHP, MySQL, and Apache on Windows
      3m 54s
    4. Creating a MySQL database
      3m 16s
    5. Defining a testing server and database bindings
      6m 14s
    6. Creating a database recordset
      4m 35s
    7. Adding dynamic content to the page
      5m 14s
    8. Creating repeating regions of dynamic content
      7m 6s
    9. Filtering database records
      7m 39s
    10. Using the Live Preview
      10m 22s
    11. Passing URL parameters
      4m 23s
    12. Dynamically generating links
      5m 18s
  10. 57m 9s
    1. Understanding behaviors
      5m 16s
    2. Installing additional behaviors
      3m 39s
    3. Planning to create a custom behavior
      3m 42s
    4. Examining existing behaviors
      5m 32s
    5. Building a behavior function
      7m 23s
    6. Creating an Action file
      6m 48s
    7. Enabling behavior functions
      9m 1s
    8. Initializing the user interface for a behavior
      3m 9s
    9. Loading behaviors in Dreamweaver
      6m 47s
    10. Testing and debugging behaviors
      5m 52s
  11. 27m 12s
    1. Running reports
      7m 41s
    2. Checking and validating links
      3m 40s
    3. Using cloaking
      5m 42s
    4. Using Check In/Check Out
      4m 3s
    5. Using Design Notes
      6m 6s
  12. 20s
    1. Goodbye
      20s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Dreamweaver CS3 Beyond the Basics
11h 10m Intermediate Sep 21, 2007

Viewers: in countries Watching now:

Covering diverse topics such as improving workflow and managing CSS styles, Dreamweaver CS3 Beyond the Basics is a hands-on course that teaches users how to move beyond standard, static websites. Instructor James Williamson explores how to increase productivity, interactivity, and accessibility with Dreamweaver. He also discusses how to extend the application's capabilities with XML and XSL. Exercise files accompany the tutorials.

Topics include:
  • Reviewing and customizing the coding toolbar
  • Understanding the CSS Styles panel
  • Using absolute and relative positioning
  • Creating accessible forms
  • Building AJAX pages with the Spry framework
  • Extending templates
  • Working with XML and XSL
  • Building dynamic content
  • Creating custom behaviors in Dreamweaver
  • Running reports
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Creating a base template

In this chapter we will explore Dreamweaver's template features. Taking advantage of Dreamweaver's templating abilities can speed up your development time and more importantly can take the pain out of making site-wide or region-wide changes to your site. Creating your Dreamweaver templates requires just two basic steps. First, we design the page that we want to serve as the basis for the template, and it can be as simple or as complex as you need it to be. Now second, you have to define editable regions inside your template. When working on template based pages all non-editable page elements will be locked down and you won't be able to change them. Changes to those regions must be made in the source template.

So we want to make the process of editing our Cheek Chastain site and creating new pages a little bit easier. So I am going to go ahead and open up the index page. So as you are working along with us, we are in the Chapter 6 Exercise Files and we are opening up the index exercise file. I am just going to preview this in our browser. Usually you do this at the stage when you are laying the page out and designing it and you start looking for common elements and what might make good, base template region. So as I click around, I notice there are some areas of commonality. The navigation really doesn't change.

Now in the interior content, when we get into the subsection pages, not on the index page, we have a banner graphic right up here at the top, and then for the most part the sidebar changes as well. It's similar on some pages but on other pages the content changes, sometimes it's sub navigation, sometimes it's just different sections. So we see that we have that banner graphic that changes on each page, we have content area that changes, we have sidebar areas that change. So these are all things that probably need to be contained within an editable region. Our navigation, on the other hand, isn't changing.

Although, if we pay attention, something about our navigation is changing. Notice that every time we click on a page, the link for that page actually indicates the current page that we are on. So we may not need to change the navigation on each page but we certainly need something in a template that's going to be able to indicate the current page. So we will use an existing page that we already have to create our template structure. Looking at the News page, this one offers us a lot of possibilities. There's really not a lot of complex structuring in the news area and it's kind of empty, and we have the Upcoming Events, which repeats more often than not in most of the sidebars. So this one actually gives us a really good base for our templates, so we will use the News page.

So I will close out of Firefox and I will go back in the Dreamweaver. Now I will close the index page because it doesn't really make a good candidate for a template. The index page has some very unique content on it and it's probably something that we are going to have to create individually. So I will go ahead and close that, and I am going to open up the news.htm. This is the page that we are going to base our template off of. Okay, so creating a template is very simple. We just go up to File and choose Save As Template. Now when we do that, Dreamweaver prompts us and says Okay, we need to put a template into your site. You will notice that it would list any existing templates that we would have, which we don't have any right now.

I am just going to go ahead and name this template cheek_main to give it some identity. This is our main template. Dreamweaver will assign a .dwt extension file to this file. So it is a specific type of file. You can also go ahead and give it a description. So I will just say Gallery page main template. You can be as descriptive as you would like there. I am going to go ahead and save, and it's going to ask me if I want to update links. I am going to go ahead and say Yes, and that's very important and we can find the reason why when we look over at our site panels. Notice that there is a Templates folder over there now, it wasn't there before, and Dreamweaver placed that right on the root. As I expand this folder out, you can see that there is our new cheek_main.dwt.

Now if we look at our file itself, up at the top it says <