Creating the Dreamweaver Template

Creating the Dreamweaver Template

The next step is to create a site template that defines the layout and graphical aspect of your blog.

Note: A template is a fixed page layout. You can define regions in the template that are editable in documents based on that template. You use templates to control which page elements template users can edit. One of the most powerful uses of templates is the ability to update multiple pages at once.

To create the blog template:

1. Open Dreamweaver.
2. Open the blog site you have defined by clicking its name from the pop-up menu in the Files tab of the Files panel.
3. Make sure you work in the Local View by selecting this option in the Files tab.

Select File > New and select Template page > PHP template from the General tab as shown in Figure 2 below.

Figure 2. Creating a new PHP template page using the New Document dialog box

(+) View larger

Tip: The template of a dynamic site must be dynamic, as well. The template has a PHP extension after you save it. 252c210c

5. Click Create. A blank page opens.

Think of the page layout for a moment. The blog pages should have the following general organization:

• Header, containing the site logo
• Footer, where links and copyright information are inserted
• Navigation menu, where the topic list displays
• Main area, for listing articles

Figure 3 shows the general page layout.

Figure 3. The basic layout of the template

Next, you will learn how to create this basic layout and add graphical formatting to it using Dreamweaver. You use this layout for all site pages. Dreamweaver templates can really bootstrap your editing efforts by automatically updating the layout of the entire site from just one file. In a Dreamweaver template, you can define which page regions users can edit subsequently and which page regions should remain unchanged throughout the site.

In your case, the header and footer sections and the left menu should be the same throughout the site. The only section that changes is the center of the page, which displays information that the visitor requested.

To define the layout of the site, you'll use an HTML table. You don't need to worry about the HTML code behind it. First, create a table with two columns and three rows:

Select Insert > Table.

Fill in the Table dialog box that appears, as shown in Figure 4.

Figure 4. The Table dialog box

• The table should occupy the whole page, so Table width is set to 100%.
• For aesthetic reasons, make the table borders invisible, by setting the Border thickness to 0.
• The Cell padding and Cell spacing define the amount of spacing inside and between cells.

Click inside a cell and you notice how the tag selector and the Property inspector change accordingly. You will use these two tools to select and format various elements of the template. The tag selector shows the hierarchy of tags surrounding the current selection.

Note: If you are unable to see the Property inspector, select Window > Properties.

As you can see from the layout draft in Figure 3, the menu section is thinner than the main section and the header and footer sections span on a single row each. You need to format the table as follows:

1. Click inside one of the cells in the left.
2. Set its width (W) to 15% within the Property inspector. The other column will readjust accordingly.

Select the first row by clicking inside it and then select the <tr> tag in the tag selector as shown circled in red in Figure 5.

Figure 5. Selecting the first row using the tag selector

4. Click the Merge button from the Property inspector as shown circled in red in Figure 5.
5. Perform the same operations for the last row.
6. Select each table cell and set its vertical alignment to Top in the Property inspector.

The table should now look like Figure 6.

Figure 6. How the template should look so far.

Save the template file by selecting File > Save. A pop-up message warns you that you haven't defined any editable regions. Click OK to proceed.

Note: Pages based on a template that have no editable regions defined cannot be modified. You will define such regions later in this tutorial.

2. In the Save As Template dialog box, select the site (blg) where you will use this template.
3. Name the file blgtemplate.
4. Click Save.

Dreamweaver creates a special folder called Templates inside the site root folder. All the template files are stored in this folder.

Tip: Dreamweaver gives all template filenames a special DWT extension. If the template name is blgtemplate, as in your case, the corresponding filename is blgtemplate.dwt.php.

Next, you edit the layout sections of your template: the header, the footer, and the menu.

First, decide on an image that you will use for the logo and store it in the img folder of your site. If you wish, you can use the logo.jpg image that is included in the sample files linked at the beginning of the article. To insert the logo in the header section of the template:

1. Place your pointer in the header of the template.
2. Click the Image button from the Common tab in the Insert bar.
3. Navigate to the image, and select it. Because you set up a default images folder when you defined the site, Dreamweaver automatically makes a copy of the logo.jpg image in your default images folder.

Pay attention to the URL: Remove the opening /, because the template in a different folder than the rest of the application files. The relative path "img/logo.jpg" ensures the image is correctly displayed in the pages based on this template.

5. Select the logo.jpg image in Design view and enter index.php in the link field in the Property inspector so that site visitors can get back to the blog home page from any other page by clicking the image.

Figure 7. Inserting the logo image and adjusting its path

(+) View larger

Next, you edit the footer section of the blog. Enter the desired text and links in the table cell. Because the blog was created with Macromedia Dreamweaver MX 2004, I have decided to create a link to the Dreamweaver product page. Just select the text that you want to link and then enter the desired URL in the Link field in the Property inspector.

In the next section of this tutorial, you learn how to create a dynamic navigation menu that uses data from a recordset.