Creating and controlling an optional region

Một phần của tài liệu The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP phần 6 pdf (Trang 88 - 92)

Creating an optional region in a template is very similar to creating an editable region. You just select the element(s) you want to make optional and choose Optional Regionfrom the Templatesubmenu on the Commontab of the Insertbar or from the Template Objectssub- menu of the Insertmenu. You can also right-click and choose Templates➤ New Optional Region from the context menu. Like editable regions, you can have more than one optional region in a template, but you must give each one a unique name. Optional regions can contain editable regions, but not the other way round.

You can control the display of an optional region in a child page in several ways, but the simplest is to open the Template Propertiesdialog box from the Modifymenu and select whether to display the optional region.

This exercise shows you how to convert the <blockquote> element in stroll_horiz_footer.dwt.phpinto an optional region and control its display in a child page. Continue working with the same template as in the previous exercises.

1.Open stroll_horizon_footer.dwt.php, and insert your cursor anywhere inside the pull quote in the sidebar. Then select <blockquote>in the Tag selector at the bottom of the Document window to select the whole element.

2.Select Optional Region from the Templatessubmenu on the Common tab of the Insertbar as shown in Figure 13-5 (or use one of the menu options). Do notchoose Editable Optional Region, because this works a different way and will be explained later.

Converting the pull quote into an optional region

Figure 13-5.The Template submenu on the Insert bar

3.This opens the New Optional Regiondialog box shown in Figure 13-6.

Figure 13-6.The Basic tab just sets a name for the optional region and whether to show it by default.

Just enter pullQuote in the Namefield of the Basictab, and check that Show by defaultis selected. If you want to use an optional region only occasionally, simply deselect the Show by defaultcheckbox.

You don’t need to touch the Advancedtab now, because I’ll explain it later.

4.Click OK to create the optional region. The entire pull quote should now be surrounded by a pale blue border with an Iftab at the top left, as shown here:

5.Save stroll_horiz_footer.dwt.php. Dreamweaver displays a dialog box asking whether you want to update all files based on this template (there’s only one: stroll_index.php). Click Update. Dreamweaver displays another dialog box reporting that the updates have been completed. Click Closeto dismiss it.

13

6.Check stroll_index.php. It should look exactly the same as before. If the pull quote in the sidebar has disappeared, you must have deselected Show by defaultin the New Optional Region dialog box (see Figure 13-6). It doesn’t matter, because you’ll soon see how to enable or disable an optional region in a child page.

7.Open the New Document dialog box, and create another child page from the stroll_horiz_footertemplate. Save the new page as parliament.phpin a new subfolder called historyin workfiles/ch13.

8.Just so you can distinguish the pages from each other, change the main heading in parliament.php to Mother of Parliaments, and replace living_statues.jpgwith bigben.jpg.

9.To remove the pull quote in the sidebar, select Modify➤ Template Properties to open the dialog box shown in Figure 13-7.

Figure 13-7.The Template Properties dialog box controls the display of optional regions.

Deselect the Show pullQuotecheckbox (if you have more than one optional region in the template, you need to select it in the upper pane first). The Valuefield should turn from trueto false. Click OK.

10.The pull quote has gone away, as shown in Figure 13-8.

11.Check in the sidebar in Code view. The <blockquote>and its content are not there.

Dreamweaver doesn’t use CSS or HTML comments to hide an optional region. The code is physically removed from the child page.

Figure 13-8.The optional region has been removed from the sidebar.

13

12.To see how Dreamweaver knows whether to include the code from an optional region, scroll up in Code view until you reach the <head>section. Just before the closing </head>tag, you’ll see the code shown on line 27 of Figure 13-9.

Figure 13-9.

Dreamweaver controls the optional region with a template parameter in the <head> of the page.

This code creates a template parameter, which is basically an instruction to the template engine telling it whether to display the optional region. Although you can edit this code, changing falseto truein Code view won’t restore the pull quote.

You need to do that through the Template Propertiesdialog box (see Figure 13-7).

13.Save parliament.php. You can close it, because it won’t be needed in the next exercise.

Một phần của tài liệu The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP phần 6 pdf (Trang 88 - 92)

Tải bản đầy đủ (PDF)

(94 trang)