Generating Contribute-Friendly Templates


The typical workflow surrounding the creation of a template goes something like this:

  1. Users find themselves making the same basic page over and over again, changing the content while keeping the underlying format.

  2. An existing page that exemplifies the usual format and content is saved as a template by a designer in Dreamweaver.

  3. Specific content is replaced with generic instructive placeholder content, and editable regions are designated.

  4. The template is saved and published to the remote site, where it can be used as the basis for new pages by Contribute users.

Although it's entirely possible to build a template page from scratch, inserting editable regions as you go, it's far more typical (and straightforward) to convert an existing page into a template. In these steps, you'll take a previously published newsletter page and convert it into a working template.

1.

From Dreamweaver's Files panel, expand first the hr folder and then the newsletter folder. Double-click the august04.htm 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 static HTML, 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.

If you saved the page at this point, Dreamweaver would alert you that the document doesn't contain any editable regions yet. Let's start by making the major text areas into separate editable regions.

3.

Select all the text in the left column except the heading. From the Insert bar's Common category, click Templates: Editable Region. When the New Editable Region dialog boxopens, enter leftColumnText in the Name field. Select the similar text area in the right column,including the picture, again omitting the heading. Click Templates: Editable Region and enter rightColumnText in the Name field of the New Editable Region dialog box.

By separating the body text from the headings, you're ensuring that each column will start with a heading, followed by a series of paragraphs. In this case, the design calls for a little flexibility (because you're never sure exactly what the articles of a newsletter will be about), so the editable regions incorporate both images and pull quotes. This setup leaves the door open for the content contributor to add these elements as needed. A bit later you'll embed some instructions for the Contribute user on how to use these elements.

Whenever you have content that might include one or more paragraphs, it's important to enclose at least one paragraph tag in the editable region. Conversely (as you'll see in the next step), there are times when you want only the text of a headingnot the heading markup itselfto be in an editable region.

4.

In Split view, select the month and year near the top of the newsletter; make sure that neither the opening <h5 > nor closing </h5> tag is included in the selection. Click Templates: Editable Region and enter dateMonthYear as the new region's name. Next, select the heading above the left column without choosing the <h1> tags; click Templates: Editable Region, and name the region leftColumnHeading. Follow the same procedure to select the heading text above the right column; click Templates: Editable Region and name it rightColumnHeading.

Although it's possible to make your heading text selections entirely in Design view, I find it to be far more accurate and ultimately more efficient to use Split or Code view.

Note

You cannot select just the text within paragraph tags, as you can with heading tags; Dreamweaver always expands the selection to include the <p>…</p> tag pair. You'll learn how to handle this situation later in this chapter.

With the editable regions in place, it's time to add the instructive placeholder text. Let's tackle the date and heading first.

5.

In Split view, select the text within the dateMonthYear editable region and replace it with this phrase: Month, Year. Delete the text in the leftColumnHeading editable region and enter this text: Headline, Initial Letters Capitalized. Copy that phrase and paste it into the rightColumnHeading, replacing the current copy.

Although it's tempting from a design perspective to just enter so-called greek textthe pseudo-language used to indicate body copyit's better to use the available text area to pass instructions to your Contribute users. Typically, you want to convey the options available to the user as well as the expected minimum and maximum length, if any.

6.

Select and delete all the content in the leftColumnText editable region and replace it with these two paragraphs:

Body of article goes here. Article should be a minimum of two paragraphs in length. To create a pull quote, repeat any text in article and style with pullQuote. To create a pull quote, repeat any text in article and style with pullQuote. Use links, images and pull quotes as needed.

Wrap text around images by selecting the image and choosing Format > Style > leftImage or Format > Style > rightImage. Images should be no bigger than 140 x 140 or smaller than 75 x 75.

7.

Select the first iteration of the sentence that begins, "To create a pull quote…" and choose pullQuote from the Style list in the Property inspector. Now repeat this process in the right column, using the same instructive text. Copy the paragraphs you just inserted in step 6. Select all the content, including the image, in the rightColumnText editable region. Delete the existing content and paste in the copied text.

The technique used to create the pull quote is a little advanced: When text is selected within a paragraph and a style is applied, Dreamweaver inserts a <span> tag that floats the text within the paragraph when combined with the defined CSS style. Describing how to create the effect and also providing an example is an effective way to help users to master the technique.

It's often helpful to provide Contribute users with a visual reference of other possibilities, such as inserting an image. Rather than use a sample photo, you can insert a placeholder image and remove the pull quote to illustrate one example of how the page could look.

8.

In the right column, place your cursor anywhere in the pull quote. From the Tag Selector, choose span.pullQuote and press Delete. Leave the cursor where it is and, from the Insert bar's Common category, click Images: Image Placeholder. In the Image Placeholder dialog box, enter Picture in the Name field and set both the Width and Height to 140. Click OK when you're done. With the newly inserted image placeholder on the page, from the Property inspector, select leftImage from the Style list.

The <body> section of your template is now complete, but there is still work to be done. Meta tags need to be added to the template so that they're embedded in all child pages. Meta tags are used to provide information about the entire page to search engines and other programs; they are also helpful in identifying the originator of Web pages for future developers.

9.

Choose Insert > HTML > Head Tags > Meta. When the Meta dialog box opens, leave the Attribute list set to Name and enter Creator in the Value field. In the Content field, enter this phrase: Human Resources Department. When you're done, click OK.

When editing a page in Contribute, users have access to two standard meta tags: Keywords and Description. It's a good idea to keep these tags editable so that they can be amended on a case-by-case basis. Another good idea is to provide some basic content for both meta tags so that some basic information is always available. You can satisfy both of these guidelines by placing the meta tags within an editable region in the <head>. Dreamweaver supplies the code for just such an editable region, aptly named head.

10.

In Code view, locate the following HTML comment:

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

It's just above the closing </head> tag. Place your cursor after that tag and before this HTML 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.

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.



Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3(c) Training from the Source
Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3: Training from the Source
ISBN: 032128884X
EAN: 2147483647
Year: 2006
Pages: 130
Authors: Joseph Lowery

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net