Creating a Reusable Template
For the most part, the presentation aspect of the Newland Tours site is complete. As I mentioned, minor tweaks and additions will be necessary along the way, but by and large the site design is stable.
Once you reach this point in development, you should usually pause to create a generic site design template for all new files. For example, all of the pages within this site will share the same banner, basic layout, style sheet, and so on. Rather than re-creating all of that every time, if you create a generic page template, you can get straight to work.
In this task, you'll create such a template, which you will use throughout the rest of the book, as the basis for all new pages in the site.
Before continuing, it's important to clarify that the template you are about to build is not a Dreamweaver Template file. Dreamweaver Templates is a special feature that enables designers to build page templates and then lock specified regions to prevent users from modifying their content. Other regions remain editable, so users can go in and change the content as needed without undermining the site look or navigation across pages. Dreamweaver Templates is a powerful feature, especially when combined with Macromedia Contribute, enabling non-technical content experts to take control over page content and maintenance, while minimizing both their need for Web development skills and the chance that they will mess up the code.
Dreamweaver Templates do not generally work as well for Web designers and developers as for end users, because designers and developers often need access to those locked regions. For example, most of the <head> section is typically locked in templates. Unfortunately for designers and developers, scripts (including client-side JavaScript and server-side ASP or ColdFusion scripts) usually go in the <head> section. This limitation alone makes it extremely difficult to develop dynamic Web sites and applications in Dreamweaver Templates. So, while it is a useful feature, it is not a good match for our goals with this particular site.
To conclude, the word template used in this lesson and throughout the book is used in the common sense, not in the specialized sense of the Dreamweaver Template feature.
Open about.htm.
To create the template, you'll strip out all of the unique content from one of the pages of your site. Obviously, the fastest way to do that is to begin with the page that has the least unique content. The file about.htm is the simplest page in the site, so it's a good place to start.
Choose File > Save As and save the file as generic_template.htm.
Before you start destroying the content of your file, you should save it under a new name. Sooner or later, if you wait until the end, you'll save over the source file and have to rebuild it from scratch.
Click to select the large photo of the French Alps and press Delete. Select the final two paragraphs of body text and the image caption, and press Delete.
All of this content is unique, so it needs to go. We'll deal with the title and the first paragraph of body text in a moment.
You may find that after Dreamweaver removed the content, it did not resize the table, resulting in an absurd amount of white space. However, this is not a code problem, but rather a screen refresh problem; it will display as you would expect it to in a browser.
NOTE
A lot of users attempt to fix the white space problem by dragging the bottom border of the table up. However, this often causes Dreamweaver to specify the table's (or possibly a table cell's) height attribute. In other words, you are in effect attempting to solve a display problem by changing the code. In reality, this method causes new problems and still doesn't solve the original problem. Leave the bottom border of the table alone!
Click the <table> tag in the tag selector.
The white space problem instantly disappears as Dreamweaver redraws the table.
Select the text About Newland Tours and replace it with Page Title Goes Here.
Placeholder text in your templates will make it faster to enter standard content and to ensure consistency across pages: For example, every page should have a title, and this title should be in the redefined <h1> style. By capitalizing each initial word, you remind yourself, or others working on the template, that page titles use initial capitalization.
Replace the first paragraph of body text with Body text goes here. Press Delete several times, until all of the empty lines beneath the body text are removed.
Click <table> in the tag selector, if necessary, to force Dreamweaver to redraw the table.
The page template should appear as in the screenshot.
Save generic_template.htm.
