| 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 and HTML 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 structural HTML, but if you start with a standard Dreamweaver document, you can work in either Design or Code view. Dreamweaver displays files without the HTML 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.
 Tip The 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.
Tip You can find your computer's name in Windows XP by choosing Start > My Computer and then clicking View System Information. When the System Properties dialog box opens, click the Computer Name tab; you'll see the name listed next to the "Full computer name"entry. Because the test site was set up under the wwwroot of the local Web server, any browser, including the Contribute browser, assumes that wwwroot is the site root and looks for root-relative references there. This is an issue only when the site root is located within a folder of the actual Web root.
| 4. | Place your cursor after the inserted image and press Enter (Return) to create a new paragraph. Type the phrase Founding Member World Hospital Association followed by a space. From the Text category of the Insert bar, choose Characters: Registered Trademark to insert the ® symbol.
To keep the final pages, including the SSI, as valid XHTML, it's a good idea to enclose all text in a block-level element such as <p></p> tags. Another advantage of this technique is that it allows you to set a Cascading Style Sheet (CSS) style for the text without using <span> tags, as demonstrated in the next step.
| 5. | Select both image and text, and choose Insert Div Tag from the Insert bar's Layout category. In the Insert Div Tag dialog box that appears, enter footer in the Class field. Make sure that the Insert field is set to "Wrap around selection," and click OK to close the dialog box.
 You don't see any changes after assigning the CSS class because no CSS styles are defined for the current page. The applied styling is visible only when the SSI is inserted into a page where the appropriate style rule is present on the page or in an attached style sheet.
Tip If seeing the style applied is important to your design work at this stage, use the CSS panel to attach the proper style sheet. All the content to be used in the SSI has now been added and formatted. The remaining step is to copy the content to the Clipboard and then remove all extraneous code before saving the file.
| 6. | While in Design view, highlight all the visible content on the page by pressing Ctrl+A (Command+A), and cut it by pressing Ctrl+X (Command+X). Switch to Code view, select all remaining code by pressing Ctrl+A (Command+A), and press Delete to remove it. Paste the cut page elements back into the page by pressing Ctrl+V (Command+V).
Note Although you can still view the file in Design view at this stage, the file displays in Code view only after it is saved with the .inc extension. The key to making an SSI that displays properly in Contribute is to incorporate document content, but not document structure. Basically, it's safe for your SSI to consist of anything within either the <head>…</head> or <body>…</body> document sections, but not those structural tags them selves. Moreover, the outer <html> and </html> tags are also off-limits. Generally, browsers are more forgiving than either Contribute or Dreamweaver when it comes to parsing an HTML page. Many browsers have no problem displaying a page with multiple <html>, <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 complete HTML 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.
Other Server-Side Include Options An SSI is most commonly used to incorporate HTML from another file, but that's not the only possible use for SSIs. Any server command can be executed through an SSI; the available commands and their syntax vary according to the server itself. One frequently used command displays the date on which the current file was last modified. On UNIX and Windows servers, this is the code to enter: <!--#flastmod virtual="/currentFile.html" -->
where /currentFile.html is the path and filename of the displaying file. For Windows servers, the page extension must be .stm. Another popular use is to display the current date with server-side commands. To get the raw date and time of the server displaying the page, use this code: <!--#config timefmt="%A, %B %e, %Y" --> Today is <!--#echo var="DATE_LOCAL" -->
The timefmt attribute formats the date like this: Saturday, January 1, 2005. All these server commands must be entered directly in Code view in Dreamweaver. |
| 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's HTML 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.
 Note Again, 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.
Note If 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.
|
|
