Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Getting Started with Templates

Here it isone of the coolest, if not the coolest, functions in Dreamweaver: templates! You may be familiar with templates in other software programs, such as Microsoft Word. Templates in Dreamweaver are similar, but much, much more powerful.

A Dreamweaver template is a file that's used to drive the content and layout of any number of web pages. But this is where the similarity between Dreamweaver templates and traditional templates ends. In Dreamweaver, templates contain special areas called editable regions. On pages that are based on a template, these regions are the only editable areas on the pageall other areas of the page are locked.

Chapter 5) and control page layout and formatting with CSS (discussed in Chapter 8). In fact, using templates, the Library panel, and CSS together is a sure way to easily wield complete control over your entire site, without even breaking a sweat.

Templates allow you to drive the formatting and content of any number of web pages. Further, specific areas in the template can be designated as editable regions. As you can see in this example, the breadcrumb links, page name, and feature article (which contains a photo and text) are contained within editable regions, meaning they're fully editable in any page that's based on the template. All other areas on the page are locked.

[View full size image]

Co-workers with no web experience can also update a web site with Macromedia Contribute. Check out [macromedia.com/software/] contribute to find out more.

Templates make managing and maintaining sites a breeze.

If you're a designer working on your own, templates make managing and maintaining sites a breeze. But if you're working with a group of people who are all contributing to a site, templates really shine. Consider this: Maybe a few co-workers will be regularly adding and updating content on the company's web sitesmall changes like making monthly updates and listing new productsbut none of them really know much about web design. To prevent anyone from inadvertently causing damage or altering areas of the page that they shouldn't change, you can build a template to control all the pages in the site. You can then set up the pages so that the group can edit only certain areas of each page, and you can lock other areas so that the group can't change them. Even someone with no Dreamweaver or web experience will be able to update the site. You, on the other hand, will have master control over the entire web site, so that when larger changes need to be made (new pages, an updated navigation bar, and so on), you can make the changes in the template and update the entire site faster than you can say "Can I have a raise?" All your co-workers will think you're a web genius, and all you have to do is dog-ear this chapter in Ten Ton Dreamweaver in case you run into problems!

Sound powerful? It isand it's my favorite Dreamweaver topic! So let's stop talkin' and see what templates can do for your sites.

Creating a Template and Inserting Editable Regions

So you're ready to roll with templates. The best approach to creating templates is to begin with a finished page that you want to use as the basis for the other pages in your site. This finished page will then be converted to a template and used to drive the look and layout of the other pages.

The best approach to creating templates is to begin with a finished page that you want to use as the basis for the other pages in your site.

The completed page should contain all the design and layout elements that you want to use throughout the site. For example, it should contain primary and secondary navigation controls, your site's name and logo, and any other elements that you want to appear on each page throughout your site.

In addition, it should contain dummy content (dummy text and images) that will then be marked as editable once the page has been converted to a template. In the pages that are derived from the template, this dummy content can then be replaced with the actual content that you want to appear on each page.

Noteworthy

You don't have to start with a completed page when working with templatesdoing so just makes creating your template easier. But if you like, you can start with a new, blank template and begin building a page layout within it. Just choose File > New; then in the New Document dialog box that appears, choose Template Page from the Category list an88 Template from the Template Page list. Click Create, and you're away.

Although any page can be saved as a template, usually it's best to start with a page that contains all the elements (logos, nav bars, buttons, and so on) that you want on all of your pages. Once a page has been converted to a template, it appears in the Templates category of the Assets panel.

[View full size image]

When you have a finished page containing dummy content, you're ready to convert it to a template and begin inserting editable regions.

Here's how to create a template and insert editable regions:

Open the finished page that you want to use as a template.

Customizing Templates with Other Region Types."

In the New Editable Region dialog box that appears, give your editable region a name; then click OK.

[View full size image]

A turquoise frame appears around the object you selected, with a tab that displays the editable region's name.

Continue selecting page elements and marking them as editable regions in your template until you've set all the editable regions you'll need.

You can add as many editable regions as you like. If you realize that you need more editable regions later, you can always add more.

If you want to remove an editable region in your template, select it by clicking the tab at the top left; then choose Modify > Templates > Remove Template Markup.

Once you've added the editable regions that you need, save your template by choosing File > Save.

Now that you have a template created, complete with editable regions, you can begin building pages in your site that are driven by the template.

Building a Template-Driven Page

The whole point to using templates in Dreamweaver is to control multiple pages in your siteso that's exactly what you'll do here. You'll create a new, untitled document with your template applied to it.

Once the template has been applied, your new page will take on all the content and formatting of the template. Further, you'll be able to manipulate any areas on your page that have been specified as editable regionsyou'll be able to change the dummy content to the actual content that you want on the page.

Here's how to apply your template to a new page:

Choose File > New.

In the New Document dialog box that appears, click the Template tab at the top.

On the Templates tab, in the Templates For column, you'll see a list of all the current sites that you've defined in Dreamweaver. When you click a defined site, any templates that you've created for that site appear in the center column, along with a preview of the template, on the right.

[View full size image]

In the center column, select the template that you want to base your new page on; then click Create at the bottom of the dialog box.

An even faster way to create a template-driven page is to open the Assets panel (Window > Assets), click the Templates category on the left, and then choose New from Template from the Assets panel menu.

A new, unnamed web page is created. It looks identical to your template, but you can tell that it's a new web page by the title bar, which displays Untitled-1 (as opposed to <<template>>, which you saw earlier).

You'll also notice a yellow frame around your page, with a tab at the top right displaying the name of the template that's controlling the page. This tab is especially helpful when you're using several templates in your site. Any editable regions that you inserted into your template also appear on the new page. You'll be able to manipulate content inside these editable regions, but you won't be able to select anything that appears outside them.

With your template applied to a new page, you're ready to work within the editable regions.

Click inside the first editable region on your page and begin manipulating the content.

[View full size image]

What you marked as an editable region in the template determines what sorts of changes you can make on the template-driven page. For example, if you marked a table cell or a layer as an editable region, you'll be able not only to adjust the contents of that container, but also to set any options you like in the Property Inspector. Working within editable regions is just like working in a regular Dreamweaver page.

Once you've made changes to your editable region, you're ready to save your file and preview it in your browser to see how it's looking. Saving and previewing a template-driven page is no different than saving and previewing a regular Dreamweaver page.

Choose File > Save, give your page a name, and then click Save.

To preview your page, choose File > Preview in Browser; then choose your target browser.

[View full size image]

Working with Nested Templates."

With several pages controlled by your templateor even just the one that you've created hereyou're ready for the best part about templates. In the next section, you'll go back to your template, make some changes to its content and formatting, and then automatically update all the pages in your site that are under the template's control.

Applying Templates to Existing Pages

You don't have to start with a new, untitled document when you're creating new pages based on your templates. In fact, you may have pages in your site that you've already created, and now you want your new template applied to them.

However, when you apply a template to an existing page, Dreamweaver attempts to match the page's content to the template's editable regions. If your existing page doesn't contain editable regions with names identical to those in your templatewhich is often the caseDreamweaver opens the Inconsistent Region Names dialog box and asks you how you want to handle the mismatched content. You can move the content into one of the template's regions, or you can delete it, but either way, you have to do something with the contentyou can't leave it mismatched. Thankfully, the Region Names dialog box makes it easy to handle content in these types of situations.

Here's how to apply a template to an existing page:

Open the existing page that you want to apply the template to.

If the Assets panel is not already open, choose Window > Assets to open it; then click the Templates category in the column of buttons on the left.

When the Templates category opens, any templates that you've created for your current site will be listed in the lower half of the panel. The top portion of the panel displays a preview of the currently selected template. If you don't see any templates listed in the Assets panel, click the Refresh Site List button at the bottom of the panel.

From the list in the Assets panel, select the template that you want to apply; then click the Apply button.

If your existing page already contains content, Dreamweaver will display the Inconsistent Region Names dialog box.

In the Inconsistent Region Names dialog box, select the first piece of mismatched content from the list in the dialog box.

[View full size image]

From the Move Content to New Region pull-down menu, select a region to move the mismatched content to.

Regions that appear in the pull-down menu are determined by the regions that are available in the template that's being applied. If you don't want to map your page's content and instead want to delete it, choose Nowhere.

If your page contains other mismatched elements, select the next item in the list at the top of the dialog box and use the Move Content to New Region pull-down menu to indicate where it should be placed. If you want all mismatched content handled the same way, click the Use for All button. When you're done, click OK.

The template is applied to your page, and the previously mismatched content is moved to the regions you specified, or it's removed entirely if you chose to delete it.

With the template applied, your page is now under its control.

Deleting Templates: Takin' Out the Trash

Although you can delete a template that you've created and applied to pages, doing so may yield some unexpected results. First, of course, any pages that are being controlled by the template can no longer be updated by the template. What's more, even with the template removed, only areas that appear within editable regions on the formerly template-based pages will be editable. All other areas of the page will remain locked.

If you want to be able to make changes to these locked areas, you first have to unlock them by detaching the page from its template (even though the template has been deleted). Wacky?

Here's how to delete a template:

Open the Assets panel (choose Window > Assets); then click the Templates category in the column of buttons on the left.

In the lower half of the Assets panel, select the template that you want to delete; then click the Delete button at the bottom of the panel.

In the message window that Dreamweaver displays, click Yes to confirm that you want to delete your template.

Other times, you may no longer want a page to be under the control of your template. You can easily disconnect a page from its template at any time. Once a page is disconnected from the template, all the previously locked areas become fully editable.

To disconnect a page from its template, choose Modify > Templates > Detach from Template.

Ten Ton Dreamweaver [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی