Design and Deploy web sites with Macromedia Dreamweaver MX 1002004 and Contribute 3 training from the source [Electronic resources] نسخه متنی

1.

From Dreamweaver's Files panel, expand first the hr folder and then the newsletter folder. Double-click the august04 file to open it.

Notice that this file is already completely styled with Cascading Style Sheets (CSS) and is Web-ready. The CSS file attached to the current page will continue as part of the template. In this example, a supplementary CSS file is applied to provide a different look and feel for the newsletter.

Note

Although this page is stati107, you can also convert dynamic pages to templates. Contribute users can alter only the nondynamic portions of the page, however.

2.

From the File menu, choose Save As Template. When the Save As Template dialog box opens, enter hr_newsletter in the Save As field and click OK. If Dreamweaver asks whether you want to update links, click Yes.

Although there's no noticeable change to the page, you can tell that you're now working in a different kind of page by seeing the term <<TEMPLATE>> in the application title bar. Dreamweaver stores all templates in a folder called Templates, located in the site root. Only templates should be stored in this folder; keep all dependent files such as images, CSS style sheets, and Flash documents in their own directories outside the Templates folder.

Tip

It's best to allow Dreamweaver to update links whenever you're working with templates. Do not attempt to update them yourself. When first working with templates, designers often code the wrong paths to source files, resulting in broken image links and more when the child pages are created.

<!-- TemplateBeginEditable name="head" -->

It's just above the closing </head> tag. Place your cursor after that tag and before thi122 comment:

<!-- TemplateEndEditable -->

Choose Insert > HTML > Head Tags > Keywords. In the Keywords dialog box enter this phrase: Bounty General employees newsletter. Click OK when you're done. Next, select Insert > HTML > Head Tags > Description; in the Description dialog box, enter this phrase: Newsletter of the Bounty General Human Resources Department; click OK when you're done.

Your design work in Dreamweaver is now complete and you're ready to make the template available for your Contribute users.

11.

Choose File > Save. Dreamweaver will alert you that you have placed an editable region within a <p> or other block tag; click OK to acknowledge the note. When Dreamweaver asks you if want to update pages based on the template, click Yes to initiate the process; when completed, click Close in the Update Pages dialog box. From the Document bar, choose File Management > Check In. If you are asked whether dependent files should be put in as well, click Yes.

The alert that Dreamweaver puts up to warn you of the editable region within the block tag can safely be ignored. In this instance, you intentionally avoided including the heading tags. Unfortunately, there currently is no way to disable this warning, so you'll see it every time you save the template.

Several new CSS styles were added for this lesson. You'll need to update the filter file, previously established in Lesson 4.

12.

From the Files panel, expand the css folder and then double-click bg_filter.css to check it out and open it. At the bottom of the file, add this line of code:

.rightImage, .leftImage, .pullQuote {}

When you're done, choose File > Save. From the Document bar, choose File Management > Check In.

Now you're ready to take the new template for a test drive. As in any Web undertaking, it's always prudent to test your pages before making them available for use.

13.

In Contribute, click New Page. When the New Page dialog box opens, click Refresh Templates to make sure that you have the latest versions. Expand the Templates folder under the Design_Deploy site and select hr_newsletter. In the Page Title field, enter Test Page and click OK.

[View full size image]

The child page in Contribute looks just like a child page in Dreamweaver. The same tabs mark the editable regions, and you'll notice the familiar no-editing symbol that appears as you move your cursor over the locked areas.

14.

With your cursor in the dateMonthYear editable region, replace the placeholder text with the current month and year. Select the image placeholder and follow the embedded instructions to move the image to the right by choosing Format > Style > rightImage. When you're done testing, click Cancel. Confirm that you want to delete the new page by clicking Yes when prompted by Contribute.