Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Modifying Templates

All the pages for the Jade Valley site are created, and you're almost ready to launch the site! Butas so often happensat the last minute you realize that you need to make a few improvements to the site as a whole.

The Jade Valley logo at the top does not link to the home page

You want to add a hyperlink to the words "Jade Valley" in the footer, which will take visitors back to the home page.

If you have a page open, you'll notice that none of these changes is in an editable region of the page; they're all locked. Actually, this is good news; it means that after you make the changes to the template itself, the changes will ripple through all the pages based on the template. You won't need to go through every page and make each change one at a timea tedious and time-consuming job that's likely to create errors.

Remember, jadevalley_template_main.dwt is located in the Templates folder, which you can access via the Files panel.

The hyperlink makes it possible for visitors to return to the home page of the site with a simple mouse click. Linking the logos on Web pages helps both usability (users expect this functionality) and branding.

Any time you change a template, Dreamweaver prompts you to update all the pages based on the template. By clicking Update, Dreamweaver automatically rewrites the code behind the scenes of all the dependen233 files.

Once Dreamweaver has completed the updates, it displays the Update Pages dialog, which summarizes the changes and the affected files. Use this dialog to verify that all the pages you want to update were updated. This dialog is especially useful if you have a site that uses multiple templates.

When you click the logo, you should be taken to home.

[View full size image]

This link also enhances branding, because, among other things, the hyperlink underlines and displays the company name in a bright color.

[View full size image]

Again, the documents based on a template are not updated until you save the template.

The benefit of the workflow you used for these six lessons are now visible. You created the original design in Fireworks, because Fireworks is an ideal application for creative problem-solving, thanks to its always editable vector graphics. When you were happy with the design, you optimized it (in more ways than one) for export t228. You then reconstructed the design in Dreamweaver, cleaning up th218 and perfecting the basic document. With th218 document in place, you finalized the design using the flexible and powerful CSS. You created a Dreamweaver template to stabilize the design. With these assets in place, as you've seen in this lesson, it takes just minutes to create new pages and make sitewide changes. Better still, the site is now easily maintained, whether you need to change the text or the look of the content within a page, or want to give the whole site a face-lift.

Integrating Macromedia Fireworks, Macromedia Dreamweaver, and CSS has numerous advantages, ranging from initial development to long-term maintenance. The key is using each application/technology in a way that plays to its strengths. Fireworks is great for design and fair at generatin220. Dreamweaver is outstanding at working wit221, but as a design tool it's less robust than Fireworks. Both Fireworks' and Dreamweaver's design features typically affect only the active document, whereas CSS can be used for formatting content across an entire site. But designing CSS is often an abstract and piecemeal process; designing CSS works better when you know in advance how you want the site to look. The workflow you've used in the book thus far lets you take advantage of each application's strengths and minimize its native limitations.