The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP phần 7 pps

Figure 13-11. Before updating child pages, you need to decide what to do with content from regions that no longer exist. 11. You want the new content in the <h3> heading to replace the original text. So, high- light sidebarHead in the Inconsistent Region Names dialog box, and open the Move content to new region drop-down menu. This contains a list of all editable regions in the page, plus three other entries: Nowhere: This discards the content. doctitle: This is the page’s <title> tag. Although it’s an editable region, you should not move the content here. head: This is an editable area just before the closing </head> tag, which is intended to let you add links to style sheets and external JavaScript files in child pages. Dreamweaver also uses it to insert JavaScript functions for behaviors. Again, you should not move content here. Select Nowhere to discard the old <h3> heading that was in sidebarHead. 12. The child pages that you have created contain only dummy text in what used to be the sidebarTop editable region, so you could tell Dreamweaver to discard it, too. However, let’s imagine that it contains vital content. To avoid losing it, you must move it elsewhere. Since it’s already in the sidebar, I suggest moving it to the sidebarFollow editable region. Highlight sidebarTop in the Inconsistent Region Names dialog box, and select sidebarFollow in the Move content to new region drop-down menu. The Use for all button moves all unresolved content to the same location as selected for the currently highlighted region. PRESERVING DESIGN INTEGRITY WITH TEMPLATES AND INCONTEXT EDITING 555 13 13. The settings in the Inconsistent Region Names dialog box should now look like this: Click OK to save the changes and update the child pages. Click Close to dismiss the update report. 14. The top of both child pages now contains a fixed <h3> heading and a repeating region containing a dummy item for an unordered list, as shown in Figure 13-12. Editing the repeating region follows a familiar pattern common to many Dreamweaver dialog boxes. Click the plus and minus buttons at the top right of the repeating region, and use the up and down arrows to change their order (see Figure 13-12). 15. Replace the dummy text in the list item, click the plus button, and add another. The result should look like this: You can add as many list items as you like, but you cannot add any other element. Comparing templates with PHP includes The main drawback with using templates is that any change to the master template involves updating all child pages. Although Dreamweaver handles the updating automati- cally on your local computer, you still need to upload all the revised pages to the live server on the Internet. As the site grows in size, this becomes a heavier burden. This means that if your navigation menu is part of the template, every page on the site needs to be updated whenever you add a new item to the menu. Any advantages offered by templates rapidly fade in comparison with includes. However, the template you have been working on throughout this chapter doesn’t actually contain the code for the navigation menu. The code for the menu is in a PHP include file, menu.inc.php. All that’s in the template is an include command. Consequently, any changes to the menu can be made in menu.inc.php, and that’s the only file you need to upload to the server. This exercise demonstrates how changes to an include file are propagated automatically to template child pages without the need to update each page individually. It assumes you have created stroll_index.php and parliament.php in the exercises earlier in this chapter. Updating the menu Figure 13-12. The repeating region uses familiar icons to show how to edit it. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 556 1. When you created the template at the beginning of the chapter, it was based on a file in the examples folder, so the include command points to the version of menu.inc.php in examples/includes. For testing purposes, you need to point to the version in workfiles/includes (if you didn’t create menu.inc.php in the previ- ous chapter, copy it from examples/includes to workfiles/includes). Open stroll_horiz_footer.dwt.php if it’s not already open, and click the turquoise Spry Menu Bar tab at the top left of the navigation menu. This displays the details of the include file in the Property inspector, as shown here (SSI stands for server-side include): PRESERVING DESIGN INTEGRITY WITH TEMPLATES AND INCONTEXT EDITING 557 13 2. Click the icon that looks like a folder to the right of the Filename field, and navigate to menu.inc.php in the workfiles/includes folder. Click OK (Choose on a Mac) to close the Select File dialog box. The value in the Filename field should now be /workfiles/includes/menu.inc.php. 3. Save stroll_horiz_footer.dwt.php, and click Update when Dreamweaver asks whether you want to update all files based on the template. When linking a template to other files within the site, always use the Dreamweaver interface to navigate to the correct location. Dreamweaver adjusts document-relative links automatically when creating child pages, so it needs to know where the file is in relation to the master template. Unless you are using links relative to the site root, typing the link directly into the Property inspector is likely to result in broken links. 4. Before clicking Close to dismiss the next dialog box, select the Show log checkbox. As you can see in the screenshot alongside, Dreamweaver presents a report of the number of files examined and updated. On this occasion, it has updated two files. 5. Launch stroll_index.php in a browser. Use the nav- igation menu to try to go to History ➤ Houses of Parliament . It should come as no surprise that nothing happens, because you haven’t created that link yet. If you did the exercises with menu.inc.php in the previous chapter, click the Home link. You’ll be taken to the old version of the Stroll Along the Thames page because the menu links to stroll_horiz.php in workfiles/ch12. 6. In Dreamweaver, open menu.inc.php in workfiles/includes. Update the Home link to point to stroll_index.php in workfiles/ch13. Because this is in an include file, the link must be relative to the site root. If necessary, adjust the Relative to menu in the Select File dialog box to Site Root, as shown in Figure 13-13. Figure 13-13. Links inside an include file should always be relative to the site root. 7. Update the Houses of Parliament link to point to parliament.php in the workfiles/ch13/history folder. Also make sure the link is relative to the site root. 8. Save menu.inc.php. Note that the file saves just like an ordinary file. You are not prompted to update child files. 9. Reload stroll_index.php in a browser. The History ➤ Houses of Parliament link should now take you to parliament.php, and the Home link should take you back to stroll_index.php. If you did the exercises in the previous chapter, the Attractions ➤ London Eye link should also load eye.php. As noted in the previous chapter, the menu works only if you are using a virtual host in Apache or a stand-alone web site in IIS7. If you are using a subfolder of the server root to test your site, you need to prefix the links in the menu with the name(s) of the subfolder(s), as described in Chapter 12. This final exercise with Dreamweaver templates should help convince you of the value of includes. In this exercise, only two child pages were involved, but imagine if you had a site of 50 pages or more. Instead of updating every page, you need to update only the include file for the changes to be available in each page that uses the include. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 558 Locking code outside the <html> tags To round out this discussion of Dreamweaver templates, I’d like to deal with a question that often appears in online forums from people puzzled by the fact that the code isn’t propagated to child pages when a server behavior is applied to a template. Although cov- erage of server behaviors begins in the next chapter, it makes sense to discuss this issue here, while still on the subject of templates. Dreamweaver uses the space above the DOCTYPE declaration and below the closing </html> tag to create the PHP scripts used for server behaviors, such as inserting or updat- ing records in a database. This is the same technique as you used in Chapter 11 to build the mail processing script. The reason for doing this is quite simple: the PHP engine reads the page from top to bottom and processes the dynamic code in the order that it encoun- ters it. So if you have a page that displays the results of a database search, it stands to rea- son that you need to conduct the search before displaying the results as HTML. Dreamweaver uses the area after the closing </html> tag to clean up any resources used by the script. Templates are intended to lock common elements, but dynamic code is almost always unique to a page. As a result, Dreamweaver doesn’t lock the code outside the <html> tags. So even if you apply a server behavior to a master template (or write your own custom script above the DOCTYPE declaration), the code outside the <html> tags will not be prop- agated to any child pages. If, for any reason, you want to create a template that propagates code outside the <html> tags, add the following code anywhere inside the <head> of the master template: <! TemplateInfo codeOutsideHTMLIsLocked="true" > This is an all or nothing option. The PHP code will be propagated to child pages, but you cannot apply any other server behaviors to such child pages. The circumstances in which this option is useful are extremely rare, so use with care—if at all. Breaking the link between a page and a template Sometimes, it’s useful to create a page from a template, but then break the link between the two. This lets you edit locked regions and no longer updates the page when the tem- plate is changed. Breaking the link is simple. Just select Modify ➤ Templates ➤ Detach from Template . All template markup is removed, and the page acts just like an ordinary one. Updating Content with Adobe InContext Editing A common dilemma for web developers is a request from a client or department manager who wants to be able to update content directly. The thought of letting unskilled people loose on a painstakingly crafted website gives many a developer nightmares. “Don’t worry; PRESERVING DESIGN INTEGRITY WITH TEMPLATES AND INCONTEXT EDITING 559 13 I only want to change a little bit of text.” Rather than soothing nerves, these words set them jangling. That little bit of text almost certainly contains HTML tags marked up with classes or IDs. Once they’re deleted, the site begins to fall apart. Even worse, the semi- skilled dabbler might decide to add extra flourishes such as <font> tags or features that destroy the unity of the design. One solution is to create a content management system (CMS) allowing users to enter only plain text or use a limited set of HTML tags. But creating a CMS is time-consuming and expensive because each one normally needs to be tailored to the needs of the par- ticular website. Another solution is to use a program like Adobe Contribute (http:// www.adobe.com/products/contribute/), which uses Dreamweaver templates but gives the developer a much finer level of control over how pages can be updated. The draw- back of Contribute is that it requires each person responsible for updating pages to have a copy of the program. It’s cheaper than Dreamweaver but still represents a barrier to some users. Adobe’s latest attempt to solve this problem is InContext Editing, a hosted service that requires no software other than a modern browser. It doesn’t give the same level of con- trol as Contribute, and Adobe says it’s not intended as a replacement for Contribute. Because the service is hosted on Adobe servers, it’s not free, but Adobe says it’s aware that pricing will be a sensitive factor in the adoption and success of the service. From the devel- oper’s point of view, everything needed to make a website ready for use with InContext Editing is included in Dreamweaver CS4. There’s nothing to pay unless you want to use the online service. InContext Editing is designed to make it easy for developers to give clients the opportunity to update their own web pages either because the developer doesn’t have time to devote to minor updates or the client doesn’t want the expense of a maintenance contract. The editing interface is easy to use, so this is likely to suit a lot of clients. However, problems are likely to arise with clients who make changes but forget to publish them or who real- ize they have made a mess and need the developer to put things right. Because InContext Editing uses inline styles in <span> tags and some presentational markup, cleaning up a page that has been heavily edited through this service will involve a lot of work. On the other hand, a well-designed page with InContext Editing markup that carefully controls the available options should work well. It’s ideal for a restaurant page with a special dish that changes every day or an organization site listing this week’s guest speaker. In most cases, it’s probably better suited to one or two pages in a site, rather than applied to every page. InContext Editing is a new service, so it’s impossible to give a considered opinion based on experience. My initial assessment is that the underlying technology is impressive, but the level of control that it offers the designer still has some way to go. For example, author- ized users can upload files to the web server, but there is no limit on the size or type of file that is accepted. Also, the range of tags that can be used for editable and repeating regions is severely limited, making InContext Editing much less flexible than either tem- plates or Contribute. Because the service is likely to evolve in response to user feedback, the following sections give just a brief overview of how to prepare a page for InContext Editing and updating it online. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 560 How InContext Editing works To use InContext Editing, the developer adds special markup to pages that authorized users will be permitted to edit through the service. The pages are then uploaded to the site’s normal web server. The Adobe server comes into the picture only when the user browses to a page that contains the special markup and presses a preset key combination (the default is Ctrl+E/Cmd+E). This prompts the user to log into the Adobe server. Once logged in, InContext Editing uses JavaScript and the Adobe Flash Player to display editing tools in the user’s browser. All changes are made to a local copy of the page directly within the user’s browser. The user can save the changes to the Adobe server, where they remain until a decision is taken whether to discard or publish them. Up to this point, the live web- site remains unaffected. When the authorized user is ready to publish the revised page, the Adobe server transfers it via FTP (File Transfer Protocol) or SFTP (Secure File Transfer Protocol) to the live website on the server where the page is normally hosted, overwriting the original file. On logging out, the user is returned to the updated page on the live website. Once changes have been published, they cannot be rolled back, except by connecting to the Adobe server and editing the page again. From the user’s point of view, the whole operation is seamless. Although all the updat- ing process is done through the Adobe server, the web page remains in the browser the whole time, but with an editing toolbar at the top of the viewport, as shown in Figure 13-14. PRESERVING DESIGN INTEGRITY WITH TEMPLATES AND INCONTEXT EDITING 561 13 Figure 13-14. InContext Editing lets you edit the page in a browser, so the results are immediately visible. Minimum requirements for InContext Editing The requirements for using InContext Editing are relatively simple. The web server must be publicly accessible. InContext Editing cannot be used with an intranet. It must be possible to connect to the server via FTP or SFTP. To edit files, the user must access the site using one of the following browsers: Internet Explorer 6 Internet Explorer 7 Safari 3 Firefox 3 JavaScript must be enabled in the browser The browser must have Flash Player (minimum version 9.0.124) installed. It’s important to note that Safari 2 and Firefox 2 are not supported. Support will probably be added for Internet Explorer 8 when the final version is released. Adding InContext Editing markup to a page To add the necessary markup for InContext Editing, you can use the InContext Editing tab of the Insert bar (see Figure 13-15) or the menu option Insert ➤ InContext Editing. You can also add the markup directly in Code view with the help of code hints. As Figure 13-15 shows, there are just three options: editable and repeating regions, and CSS. The concepts of editable and repeating regions are very similar to the way they are used in templates, but they can be applied only to a limited range of tags. The CSS option lets you designate external style sheets that contain classes that authorized users can apply to elements in an editable region. Creating an editable region An editable region can be applied to only three tags: <div>, <th>, and <td>. In effect, this means that, with the exception of table headers and cells, only block-level elements—such as headings, paragraphs, and lists—can be designated as editable regions, because any- thing else you want to make editable must be wrapped in a <div>. Figure 13-15. InContext Editing has a more limited range of options than templates. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 562 To create an editable region, select the element(s) you want to make editable, and click the Create Editable Region button on the InContext Editing tab of the Insert bar or use the menu option Insert ➤ InContext Editing ➤ Create Editable Region. If you choose a single <div>, <th>, or <td> element, Dreamweaver automatically converts it into an editable region. If you choose anything else, Dreamweaver presents you with the following dialog box: Normally, it offers to wrap the selection in a <div> tag. However, if the immediate parent tag of the current selection is a <div>, <th>, or <td>, you can choose to apply the editable region to the parent tag instead. If, for example, you select a single paragraph, Dreamweaver adds the following code: <div ice:editable="*"> <p>This content is editable in InContext Editing.</p> </div> However, if you select all the content inside a <div> and choose to convert the parent tag into and editable region, Dreamweaver simply adds the ice:editable attribute to the par- ent <div> like this: <div id="mainContent" ice:editable="*"> <h2>Living Statues</h2> <p>Lorem ipsum . . .</p> <h2>Artists at work</h2> <p> Lorem ipsum . . .</p> </div> You need to be very careful when selecting content in Design view. If you just drag your mouse across a paragraph or several elements, Dreamweaver doesn’t normally select the opening and closing tags. Attempting to apply an editable region to an incomplete selec- tion like this brings up this warning: PRESERVING DESIGN INTEGRITY WITH TEMPLATES AND INCONTEXT EDITING 563 13 When selecting a single element to convert into an editable region, always use the Tag selector at the bottom of the Document window to ensure that you select the whole ele- ment. When selecting several elements, it’s best to do so in Code view. An editable region is identified in Design view by a turquoise tab at the top-left corner, as shown in Figure 13-16. Unlike an editable region in a template, the tab is not always visi- ble. The tabs for InContext Editing act in the same way as JavaScript widgets in that they are displayed only when you mouse over the element or select it. Controlling what can be edited in an editable region In its initial state, an editable region gives the user complete freedom to change just about everything. However, you can control the range of tools available to users through the Property inspector. To display the editable region options in the Property inspector (see Figure 13-17), select the turquoise tab at the top left of the region. Figure 13-17. The options for an editable region give the developer considerable control over what can be changed. As you can see in Figure 13-17, there are a lot of options, all of which are enabled by default. To enable just a few, click the Uncheck all button, and select the checkboxes you want. Some of the icons are intuitive, but others are less so. Table 13-1 describes the editing options made available to the user by selecting each icon. Table 13-1. Options for InContext Editing editable regions Icon Permits Comments Bold text Uses font-weight: bold. Italic text Uses font-style: italic. Figure 13-16. Editable regions are identified by a turquoise tab. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 564 [...]... selector 2 Click the Create Editable Region button in the InContext Editing tab of the Insert bar, and accept the option to wrap the selection in a 3 With the editable region still selected, click Uncheck all in the Property inspector, and select the Numbered List and Bulleted List checkbox 4 Open Split view, and edit the ice:editable attribute in the opening tag to remove ordered_list The. .. a dialog box for the user to choose a file It gives access to all files in the site Email Address: This inserts a mailto link Enter the email address in the field alongside Select the text or image that is to be used for the link, choose the appropriate option, and click the Insert Link button to create the link Once the link has been created, this button serves to remove the link The Open in new window... users skip to step 7 Mac users continue with step 6 6 On Mac OS X, use Finder to locate the config folder you have just created Ctrlclick and select Get Info In Ownership & Permissions, expand Details, and click the lock icon so that you can make changes to the settings Change the setting for Others to Read & Write Close the config Info panel 7 Open a browser, and type the following into the address... first and then convert it to a repeating region To convert the whole of an editable region into a repeating region, select the turquoise tab at the top left of the region and click the Create Repeating Region button on the InContext Editing tab (see Figure 13-15) of the Insert bar, or use the menu option Insert ➤ InContext Editing ➤ Create Repeating Region This adds the ice:repeating attribute to the. .. does not publish the changes to the live website They’re saved only to the Adobe server User accounts for InContext Editing can be set up with different access levels, so a junior person can be given permission to make changes but not publish them This provides an opportunity to show the proposed changes to another person for approval, to make further changes, or to discard them altogether When you have... foundationphp.com/dwcs4/updates .php Downloading and installing phpMyAdmin Since phpMyAdmin is PHP- based, all that’s needed to install it is to download the files, unzip them to a website in your local testing environment, and create a simple configuration file phpMyAdmin 3 requires a minimum of PHP 5.2 and MySQL 5.0 If you are running earlier versions, you must install phpMyAdmin 2 1 Go to http://www.phpmyadmin.net,... images, and links The selections in the Property inspector look like this: 7 With the editable region still selected, click the Create Repeating Region button in the InContext Editing tab of the Insert bar to convert it into an editable repeating region Since this is the first repeating region that has been created, Dreamweaver converts the mainContent into a repeating regions group and selects the. .. here, there are two Add buttons close to each other; click the one circled in the screenshot: 12 The next screen will probably warn you that you didn’t set up a phpMyAdmin database, so you won’t be able to use all the phpMyAdmin features This is not important You can set up one later if you decide to use the advanced features of phpMyAdmin 13 Scroll down to the Configuration section near the bottom of the. .. MySQL and MySQLi in the list of extensions to be enabled If you get messages about failing to write session data or not being able to start a session without errors, it means that the folder PHP uses to save session information doesn’t exist or is read-only Use phpinfo() to display your PHP configuration details, and find the value of session.save_path (it’s close to the bottom of the page in the session... an editable region with the same options as in step 6 Then convert it into a repeating region 9 Click the Manage Available CSS Classes button in the InContext Editing tab of the Insert bar, and select stroll .css, as shown in Figure 13-21 in the preceding section 10 Save stroll_ice .php If this is the first InContext Editing page in the site, click OK to save the external files to the inserts/ice folder . icons to show how to edit it. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 556 1. When you created the template at the beginning of the chapter, it was based on a file in the. need to update only the include file for the changes to be available in each page that uses the include. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 558 Locking code outside the. templates. THE ESSENTIAL GUIDE TO DREAMWEAVER CS4 WITH CSS, AJAX, AND PHP 562 To create an editable region, select the element(s) you want to make editable, and click the Create Editable Region button