| Not all external documents are intended to be converted to HTML. Some documents are better viewed in the program that created them or through the proper plug-in in a browser. Online access to these types of files is supplied from Contribute with a link. Linked documents present their own special challenge because what happens when the link is clicked depends on the configuration of a visitor's particular system. For example, with the appropriate plug-in installed, someone selecting a link for a Visio project file might see the page open in the browser window. Another person without the right software would be prompted to download the file when the same link is selected. In this procedure, you'll complete a Web page that allows users to easily add links whichthanks to Cascading Style Sheets (CSS)resemble navigation buttons. The links themselves are targeted to open the external document in a page of a frameset. Although framesets have fallen out of favor with some designers, they are perfectly suited to application such as this. As you'll see, one advantage of using framesets with Contribute is that it allows helpful design information to be revealed when it's needed the most. The first part of the procedure describes how to create CSS styles that display bulleted list items as navigational buttons. Let's start by seeing how the frameset works with just standard links. Note The following example presumes that you can view PDFs on your system with either the Adobe Reader or Adobe Acrobat. You can download the free Adobe Reader from http://www.adobe.com/products/acrobat/readermain.html.
1. | In Dreamweaver's Files panel, expand the hr folder in the site root and then open its policy subfolder. Select the index.htm filethe framesetand press F12 to preview the page in your default browser. When the page opens, select either of the links under Policy Documents. After a moment, the PDF file opens in the frameset.
Depending on your design, the plain bulleted links might be sufficient and accomplish the primary goal: opening external documents in a frameset. For this design, however, five additional CSS rules are required to turn the list items into navigational buttons.
| 2. | Return to Dreamweaver and double-click the file nav_frame.htm in the policy folder to open it. This file is the navigation pane on the left side of the frameset. In the CSS Styles panel, click the New CSS Style button; in the New CSS Style dialog box, choose the Advanced selector type and then enter #navcontainer in the Selector field. Click OK when you're done to open the CSS Style Definition dialog box. In the Box category, enter 200 pixels for the Width and choose Left from the Float list. Click OK to confirm your choices.
 As is often the case with CSS, you need to initially create a container to hold the various other tags, which will be styled appropriately. The next step is to apply the style to an existing <div> tag.
| 3. | Place your cursor anywhere in the heading (Human Resources), and from the Tag Selector, choose the enclosing <div> tag. In the lower portion of the Property inspector, select navcontainer from the ID list.
You won't notice any major differences yet, but all the remaining styles depend on the navcontainer-designated <div>. All the styles to be created use descendent selectors; the New CSS Style dialog box remembers that the Advanced option was set, so you won't have to change it.
| 4. | In the CSS Styles panel, click the New CSS Style button and enter #navcontainer ul in the Selector field; click OK. In the CSS Style definition dialog box, select the Box category;then deselect the Same for All options for both Padding and Margin. In the Left Padding field, enter 0 pixels; do the same in the Left Margin field. Switch to the List category and from the Type list, choose None. Click OK when you're ready.
This style definition removes the bullet from the bulleted list as well as any space on the left side of each item. The next style affects the <a> tag to create the button-like appearance.
| 5. | Click the New CSS Style button. In the Selector field, enter #navcontainer a and click OK. In the CSS Style definition dialog box, move to the Background category. In the Background Color field, enter the value for a dark blue-gray ( #003366). From the Block category, choose Block from the Display list. Click the Box category and enter a width of 200 pixels; in the same category, enter an all-around padding of 3 pixels. Finally, from the Border category, deselect all the Same for All options and enter these values for the Bottom border: Solid, 1 pixel, #EEEEEE. Click OK when finished.
Although the button rectangle is taking shape, the text label is temporarily obscured; it will be corrected in the next style.
| 6. | Once again, start by clicking the New CSS Style button. Enter #navcontainer a:link, #navlist a:visited in the Selector field and click OK. In the Type category, enter an off-white value ( #EEEEEE ) in the Color field and set the Text Decoration to None. Click OK to complete this style.
At this point, you can see how the buttons will look when the page is first opened. The final CSS style adds a different look for the rollover state.
| 7. | Click the New CSS Style button. In the Selector field, enter #navcontainer a:hover and click OK. In the Type category, enter white (#FFFFFF) in the Color field. Switch to the Background category and set the Background Color to a lighter shade of blue than used before (#336698). Click OK to close the dialog box. When you return to Dreamweaver, press F12 to test the new links in the default browser.
 One last task remains: to make this page Contribute-friendly. Although Web designers might not look upon adding a new link to a list as a difficult chore, Contribute users are likely to need some help. In the final step for this page, you'll include some helpful instructionsprewritten for you and stored as a library itemin a location that remains hidden until needed in Contribute.
| 8. | Select the placeholder text in the helpContent <div> tag and delete it. In the Assets panel, click the Library button in the toolbar to switch to the Library category. Select the Help_HR_Policy library item and click the Insert button. Save the page by choosing File > Save. In the Files panel, select the policy folder and check it in, opting to include dependent files.
The frameset is designed to show only the navigation portion of the page when viewed normally with the left frame's width set to 210. Because the helpContent <div> tag has a left margin of 250, it remains out of sightexcept when edited in Contribute, as you'll see next.
| 9. | In Contribute, click Choose on the toolbar. Within the hr folder, navigate to the policy subfolder. Double-click the index.htm file to open the frameset page.
The frame-editing experience in Contribute is different from that in Dreamweaver. With Contribute, frames are edited one at a time instead of all at once, as in Dreamweaver. This feature allows you to embed help instructions right on the page.
| 10. | Click the Edit Page button. When the Select Frame to Edit dialog box appears, select the Navigation Frame from the list and click Edit.
To help users choose the right frame, Contribute displays a red rectangle around each frame as its entry is selected. When the page opens, the frameset disappears and the full page is displayed.
| 11. | Follow the instructions and add a new button after the last one. Enter Paid Time Off as the text for the link. When browsing for a file from your computer to link to, open the media/pdfs folder and choose hr_pto.pdf. Make sure that you set the Target frame to mainFrame in the Advanced area. Click OK to insert the link and make the button. When the page is displayed, choose Publish.
You can test the page immediately after publishing.
|
 |
