Dreamweaver cs3 website template

In this chapter, you will use learn how you can use Dreamweaver's template management tool to create multiple pages on your site. The template tool goes beyond allowing you to use a standard design for all the pages on your site: its beauty lies in the fact that when you decide to change the design of your site, you merely have to change the template and Dreamweaver will automatically update all the pages that depend on that template.

This simplifies the management of a website with many pages, allowing you to change common elements in a single place. By the end of this chapter, you will have completed nearly all of your website, and uploaded the "About Us" page and the "Site Map" in addition to the "Home" page which you uploaded in the previous chapter. For those of you who have arrived at this page without reading any of the previous chapters, you can find the first chapter in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 Part 1.

This chapter assumes that you have completed all the steps mentioned in the earlier chapters. To make it easier for me to refer to different elements on your web page for this tutorial, I shall use the sample page shown in the picture below as a point of reference. Your page will of course look different.

However, since both the sample and your page were created using the same procedure given in my Dreamweaver tutorial , the basic layout of the page should be fairly similar. Start up Dreamweaver, if you have not already done so. Open your index. Click "File Save as Template" from the menu. That is, click the "File" menu, and when the menu appears, select the "Save as Template" item. In the dialog box that appears, click the "Save" button. Another dialog box will appear asking you whether you want to update links.

Click "Yes". Dreamweaver will create a new folder in your computer's website folder called "Templates". If you look at the filename displayed at the top of the window, you will notice that Dreamweaver has replaced the current file with the template file. This is what we want, since we need to configure the template. By default, Dreamweaver creates a template that has no editable regions. That is, when you create a page based on the template you just saved, you will not be able to change anything on that page.

To fix that, we will need to specify areas of the template that can be modified. Select the large bold text "Welcome" in the main content section of your document by dragging your mouse over it. Your page may not have the word "Welcome" of course, but if you look at the picture above, you should be able to locate its equivalent on your site.

We will mark this text, "Welcome", as editable so that it can replaced with the title of whatever page you are creating. A dialog box will appear. Type "Page title" into the box and click OK. Dreamweaver marks that section with a visual cue to show you that it is editable. Select the paragraph under that page title and mark it editable as well. When prompted for a name to give that editable section, supply it "Page description". Since the "Products" subtitle and the section that follows may not be present in the other pages of the website, we will mark the entire of this section as an "Optional Region".

To do this, select the entire block comprising the "Products" subtitle, the picture underneath and the block of text beside the picture with your mouse. You can give this section whatever name you wish, since the content of your block will differ from my sample page.

If in doubt, just accept the default name given. Save the template by clicking "File Save" on the menu. You will be prompted with a message that putting an editable region in a block prevents users from creating new blocks in that region. After the shell is created, the next step is to create the page layout by adding regions and content.

From the File menu, select New The New Document dialog box appears. Template regions allow you to choose what content is on each page as well as whether the content is editable. For more information on template regions, see Templates: An Overview.

If you have not created an editable region in your template, Dreamweaver will prompt you to do so with a warning box before you save or close the newly created template. The New Editable Region dialog box appears. Optional If available, select other options as desired. All you need to do is change the content, maybe some of the pictures, perhaps rename some of the pages.

Then all you have to do is publish it up to the web. Included with each template is a access to a set of written and video tutorials to walk you through the process of updating the website. We also have a support system which allows you to initiate a support ticket in the the event that you cannot find the help material you need within our system.

The newer the editor, the better the editing experience you will have. Many of our newer templates can be edited in the older Dreamweaver versions, however the design experience may not be as accurate as the older versions of Dreamweaver will not have support for the newest web coding practices. Toggle navigation Seriously Unique and Creative Websites I've built websites on the side for many years now. Creating a New Template-Based Page Creating a new template-based page is very similar to creating a new page or template.

Click Create. The new page is created. Applying a Template to Existing Pages Templates can be applied to web pages that have already been created. Open the web page to which the template is to be applied. From the Site pull-down list, select the site where the template is located. In the Templates scroll box, select the template you wish to apply to the page. Under Name , select Document body.

Select Document head. Click OK. The template is applied. Detaching a Page from a Template If you no longer want a web page to be based on a template, you can detach the page from the template.