COM271—Task 3

Menu Styles and Server-side Includes
Given 9/25 | Due 9/27

Syllabus | Table of Pages | Assignments | References and Useful Links

This assignment has two parts:

I. Menu feedback styles

Purpose: Provide user feedback to page navigation.

Eric Meyer's "Skinning a Menu," project 5 in Eric Meyer on CSS, suggests several ways to use changes in foreground color, background color, and border effects to create an attractive and functional menu design that is responsive when the user hovers or clicks the mouse on the menu. Having learned the appropriate techniques by studying and doing Eric's project, we now apply the same approaches—adopting our own unique tastes in colors, fonts, etc.—to create a site-wide menu style.

  1. Structure: Begin with the html on your site home page (index.html). Identify the table cell containing your navigation (<td id="nav">). Leave all links as simple links; if you have them contained in paragraph or other (<li>?) tags, strip these away.
  2. CSS for navigation menu: Add a style sheet (media="screen") to the page. Begin with a rule for a descendent selector, td#nav a, read as "all link elements contained in the table data cell identified as "nav." Begin by setting display:block.
    Links are normally in-line elements; this will treat them (but only links contained in the cell identified as "nav") as block elements. That means we can now apply padding, border, and margin effects.
    Establish a readable-size sans-serif type, deciding on justification (text-align: left | right | center) to suit your tastes.
    Add padding: provide space above and below the menu text (enough to allow the user to move the mouse into the link without trouble), but not too much padding such as to inflate the total area of the navigation menu; add a little side-padding to space text away from borders. Following the methods of Meyer 5, style the links with appropriate values for the needed attributes, including a thin (1px) right border.
    Be sure to remove the underline from the link (text-decoration:none;); you will use background color, foreground color, and border effects for feedback, and the position of the links on the page and their appearance and behavior will make it clear to users that these are links.
  3. CSS for hover effects: Add a style for hover, td#nav a:hover. Incorporate Meyer's border feedback methods (project 5), adjusting border thickness and compensating with reduced padding to recreate Meyer's centered, thick, highlighted border. Assign a new color, background color, and bottom border to provide subtle but visible feedback when the user hovers a link.
    (Because you have already assigned font (size, family) and padding and border thicknesses above and below the link, you do not reassign these in the hover selector rule.)
    (Addition of a:active and a:visited states is optional. I suggest that visited should be identical to the normal (i.e., a or a:link) state.)
  4. Moving menu styles to the external style sheet: When you are satisfied with your menu style, copy all rules into your external screen style sheet (see Meyer, page 47-48, for how to do this). Remove the on-page style element (styles now come to the page through the link to the external sheet); this leaves the amount of code on the page looking much simpler, so it is easier to focus on page content and structure.

II. Moving menus to server-side include files

Purpose: To create a single file to contain a site-wide navigation menu and to use server-side includes to bring that file into each page on the site.

In our practice exercise during week 3, Meyer project 2 (Styling a Press release, page 47-48), we created a single external style sheet, moving styles off of all pages to reduce page size, except for a single line to link to the style sheet. Because most (possibly all) pages on our site will contain a shared, common navigation menu, we are now going to also remove this to a separate file, using a server-side include to link.

  1. Copy the contents of the cell containing your navigation links (<td id="nav">) (contents only: leave the cell empty for now.
  2. Create a new page (dreamweaver page type = library item) and paste the contents of the navigation file. Save in a new folder, directly under the root folder), called ssi (=server-side includes) (or call it includes, if you prefer); save the file as "nav.ssi".
  3. Add a server-side include link to this file on your index.html page, in the <td id="nav"> cell:
    <!--#include virtual="ssi/nav.ssi"-->
    Note that this resembles an html comment (<!--) but adds the #include (no spaces). The attribute virtual refers to a directory in the site root, which is why we created the folder ssi directly under the root folder (previous step).
  4. Save index.html as index.shtml.
    Note the new file extension. .shtml is necessary to tell the server that the page contains one or more server-side include links. When servers encounter this file extension, the server first parses the document, going through it a line at a time. When the server finds an <!--#include, it copys the referenced file (nav.ssi in the ssi folder) into the html page in place of the include directive. Server side includes will not work without the .shtml file extension.
  5. Test the new index.shtml page in a browser (load the page from the server). (Your local computer is not a server, so opening a browser in dreamweaver to look at the local copy of the page will not handle any server-side includes!). If you do not see your original navigation, review all the instructions and get your instructor to help as needed.
  6. Tidy up your site. Once your index.shtml page works correctly, remove index.html from both your local directory and the server. (Servers will also treat index.shtml as the default home page for any directory, if there is no index.htm or index.html page.)
  7. Repeat this process (replacing navigation with the server-side include, saving as .shtml, and tidying up by removing .html pages) for all other pages (currently your html and css resume pages only) on the site. Test pages as you go.

Congratulations! You now have a common navigation on all pages. As you add pages to your site in future assignments, simply copy the include on to each new page. Then add a link to that page to your external nav.ssi file, and all future pages will also have links from the common navigation menu. Any changes to navigation made to your single external navigation file mean that you don't have to go through each page to update the entire site. The single link to the navigation file also means that your pages become smaller, easier for you to work with and faster to download.