لطفا منتظر باشید ...
Making a Contribute-Friendly SSI
Let's look at how to construct a valid SSI file and take advantage of Dreamweaver's visual design environment. The SSI you'll create is intended to be used as a footer containing both text and an image.
| 1. | In Dreamweaver, choose File > New to display the New Document dialog box. Under the General tab, select Basic Page in the list on the left an108 from the list on the right to create a new blank document. Select the "Make document XHTML compliant" option and then click Create.You'll eventually strip away all structura116, but if you start with a standard Dreamweaver document, you can work in either Design or Code view. Dreamweaver displays files without th109 syntax in Code view only. | |
| 2. | Choose Image from the Common category of the Insert bar to open the Select Image Source dialog box. At the bottom of the dialog box, set the Relative To option to Site Root. From the images folder in the site root, choose logo_wha.gif, and click OK to close the dialog box if necessary.Setting the Relative To option to Site Root is an important step when placing images in an SSI. If the SSI itself contains images or any other references to dependent files such as Flash movies, the links to these files must be site-root relative. The site-root relative src attribute will be accessible from anywhere in the site and makes the SSI much more flexible.[View full size image] TipThe Relative To option set in the Select Image Source dialog box is persistent and will remain set to Site Root until modified. If you prefer to use document-relative links for images in your standard pages, as many designers do, you have to remember to switch the Relative To option to Document the next time you insert an image in a file that is not an SSI.Normally, setting the image to be root relative would be enough. However, our testing environment requires an additional step. To reference the image correctlyregardless of where it is viewedyou'll need to change the src attribute to an absolute address. | |
| 3. | With the just-inserted image selected, change the Src field in the Property inspector to http://[machine_name]/design_deploy_web/images/logo_wha.gif, where [machine_name] is the name of the computer you're working on. and </html> tags are also off-limits. Generally, browsers are more forgiving than either Contribute or Dreamweaver when it comes to parsing a118 page. Many browsers have no problem displaying a page with multiple &l123>, <head>, or <body> tags, but both Macromedia programs would highlight such code as invalid.When selecting your content for an SSI, it's usually best to get a complet109 object, not just a completed tag. For example, as a general rule, incorporate an entire table rather than part of one in your SSI. Although you can insert an SSI consisting of just a table row or cell, you have to do so with special care. If such an include is inappropriately placed, you don't get the desired results and the page doesn't validate.
| |
| 7. | Select File > Save to open the Save As dialog box. At the site root, expand the folder called includes and save the file as footer.inc. Click OK when you're done to close the dialog box.Saving the file with an .inc extension keeps the page editable within Contribute. As a protective measure, the file is stored in a new folder off the site root so that only Contribute users with administrative permissions have the appropriate access.Now that the SSI is complete, you're ready to insert it into a page and try it out in Dreamweaver. | |
| 8. | In the Files panel, expand the Templates folder and double-click the press_release.dwt file to open it for editing.One of the advantages of SSIs is that they can be placed in Dreamweaver templates as well as in standard files, which gives you the best of both worlds. (The design and use of templates for Contribute is explored in greater depth starting in Lesson 7.) | |
| 9. | Place your cursor at the bottom of the file and, from the Insert bar'122 category, choose Script: Server Side Include. In the Select File dialog box, change the Relative To option to Document Root. From the includes folder, choose the SSI just created: footer.inc.[View full size image] NoteAgain, the choice to use a document-relative link to the footer is because of the given test environment. Both Contribute and Dreamweaver automatically rewrite the document-relative link as needed, depending on where the file containing the include is stored.Because the CSS file with the appropriate styles is already attached, the SSI will be centered and the text formatted. If you select the SSI, you'll notice that Dreamweaver treats all the included page elements as a single uneditable block. The Property inspector will display the current attributes, including the filename and file type.NoteIf you don't see the SSI elements in Dreamweaver, choose Edit > Preferences (Dreamweaver > Preferences) and go to the Invisible Elements category. Enable the "Show contents of included files" option at the bottom of the dialog box and click OK. | |
| 10. | Save your page. Click OK to acknowledge the alert that there is an editable region within a <p> tag on the page. When the Update Template Files dialog box opens, click Update. After the Update Pages dialog box indicates that all associated pages have been modified, click Close.Depending on your server requirements, the child pages derived from this template may require an .shtm, .shtml, .stm, or .asp filename extension to execute properly on the server. These extensions are added when the child page is first saved, whether in Dreamweaver or Contribute. Contribute users save (and name) the file after it is published, whereas Dreamweaver designers do it beforehand. |
![[View full size image]](/image/library/english/13879_03inf02_alt.gif;380137){kind=link}
![[View full size image]](/image/library/english/13879_03inf04_alt.jpg;380137){kind=link}