 |
| Image credit: Bentley Smith, uploaded via Flickr, Creative Commons License |
14.1 Template & Library Overview
Dreamweaver provides a number of template webpages to help get one started in designing a site. These templates are complete webpages with editable content.
One should be aware that the template comes with folders to store all the required files that generate the page, and that you must keep these folders at the root-level of your site file structure. Furthermore, one should not add or remove any files to/from these folders, or things may go haywire.
Note also that these templates come with CSS files, so after making any changes to the layout, one must be sure to use the Save All option to ensure that the CSS files are saved as well as the HTML.
While the template is an entire webpage, library items are elements of a web page, such as headers and footers. These are reusable pieces that you can draw from to place in your pages. These items are stored in the Library folder, and given .lbi extensions.
Note that template and library are easy to locate by navigating to the Assets panel, and selecting either the Template or Library icons as appropriate.
14.2 Creating A Library Item:
A good example of an item suitable for the library is a navigation bar, or series of navigation links, which one would likely want to add to every page within a site. Our tutor demonstrates this process for us.
First one should view the Assets panel, and select the Library item view. Next, one must select the elements that are destined to be added to the library (navigation links in this example). We are advised here to refer to the code view window to be sure that we are getting all of the code that we wish to bring along with our item. It may be necessary to highlight additional code in the code window to get all of our associated tags. With the desired code selected, we proceed to click the New Library Item icon at the bottom of the Assets panel. Our item appears in the panel, but is given the default name untitled. The item name is selected for editing, prompting us to go ahead and type a unique name for the new library element, for example, “nav_links” would be appropriate.
With our page element now stored in our library, we can open any page within our site, and simply drag the navigation links out of the library and onto our page. One will note that only the HTML code associated with that item is stored in the library. CSS formatting rules do not travel with library item, so one may have to apply formatting as needed.
14.3 Modifying a Library Item:
Suppose now that in our above example, the navigation links library item, we have the need to modify the text links to include links to more pages. To do this, we can simply select the item from our library (in either the files list or library view of the assets panel), and double click it to open it for editing in the design window.
From here, we can edit the item as needed. But what about the instances of the nav links that we have already copied to other pages? Do we need to replace those with the updated nav links? As it turns out, no. Dreamweaver is happy to cascade these updates for us. It will however ask us to confirm that we want it to do so before acting.
Neat-o, eh?
14.4 Converting a Page into a Template:
Suppose that we slaved over a hot laptop all day to build one of our pages just the way we like it. Must we repeat this arduous task each time we want to create a similar page? Fortunately, no. We can easily save a copy of our page to a templates folder, and use a copy of same to build off of in the future.
The process is as simple as selecting the File=>Save as Template command, and giving our template a unique name. Dreamweaver automatically creates a Templates folder to store our page file in, and gives it a .dwt extension. As mentioned earlier, we should regard this folder as a restricted area, and place no other files within, lest things get screwy. Also, when saving our template, Dreamweaver will ask us if we want to Update Links. Without going into the nuts-and-bolts of what this really means, our instructor advises us to affirm that we do want our links updated.
14.5 Creating a Template Page:
So, now that we’ve seen how to store a template page, we need to learn how to make use of it. When we want to create a new page, we do by means of the File=>New… menu command, which launches the New Document dialogue box. Note that among the options on the left-most side of the dialogue box is Page from Template. Selecting this option shows us a list of the variors templates that we have created. We may select any template, and a copy of that page will open in our design window. Note that when we create a new page from a template, the New Document dialogue has the option Update page when template changes checked by default, and it’s probably in one’s best interest to leave it checked.
Note that when our new template-based page opens, the page is locked for editing. This is the default behavior of Dreamweaver when we create pages from templates. Going forward, we will unlock the areas of the page that we need to edit as we go.
14.6 Working with Editable Regions:
OK, gotta back up a little bit here. It turns out that we cannot unlock any part of a page created from a template. If fact, we must go back to the template and select areas of the template that we wish to make editable for pages created from that template.
This seems to needlessly tie one’s hands, and could be giant PITA down-the-road. At this point, one might speculate that working with templates is not really very beneficial. If one wants to work from a pre-defined page, perhaps it is better to save a copy of that page as regular HTML file, and then make copies of that page to build off of.
14.7 Applying a Template:
In this section, our tutor demonstrates the process of using a template not as a starting point to build a page, but as a more of a mask to lay upon a page that has already been created with content on it.
To do so, we begin by opening the page that we wish to modify. From there, we select the Modify=>Template=>Apply Template to Page command. This will open the Select Template dialogue, prompting us to choose a template. Note again that the option Update page when template changes is checked by default. From there, we see a dialogue entitled Inconsistent Region Names. This dialogue box will ask us how we want to translate the existing page content into the editable areas defined on the template. In our instructor’s example, this process is not too messy, but can easily see how ugly the process could become, depending on how different the existing page is from the template, and the existing editable areas of the latter. This could result in the need to go back add editable areas to the template, but since we were advised to keep the Update page when template changes option checked, this could have untended consequences for pages that we have already applied the template to.
Given that a template can be applied over exiting pages to experiment with different looks, one can see how templates can be useful. However, this writer is suspicious of relying too heavily on template use, as there seems to be myriad problems lurking in the shadows for one who goes down the template path.
14.8 Detaching a Template from a Page:
Suppose one applies a template to one’s page, as described in the previous section, and decides then that this was a bad move. One can return to the menu bar, and select the Modify=>Template=>Detach from Template command. Just like that, you’ve undone the layout change, and you’ve got your original page back, right?
Wrong!
Detaching your page from the applied template will release your page from the iron fist of the template file, meaning that everything will now be unlocked for editing, and changes to the template will no longer cascade down to the page in question. This can be a good thing, if you want to capture some design elements from a particular template, but want the freedom to go on and modify the page as you see fit, while being free from having your page unintentionally modified later when the template is changed. However, be aware that detaching the template does not undo the changes made when you applied the template, therefore you do not get your original page back. One should be cautioned to save one’s page before applying a template, examine the effects of an applied template carefully, and close the page without saving if one wants to back out of the changes made.
No comments:
Post a Comment