Navigation
Main navigation links (pre-2006 design) are placed on the left
side of the page, as shown in the image below. Your navigation titles
should be determined prior to developing your site. For more on
navigation titles, see the Web Site
Architecture section of this guide.
A visitor may enter your site from any of your pages, therefore,
we suggest that you include your main navigation links at the bottom
of all pages. It is optional as to whether you include the MHC main
navigation at the bottom of your Web pages. More information on
this topic is included in the Footer
section of this style guide.
Style and Placement of Navigation
The Document Interface (DI) wizard designates an area in a padded
cell in column one for navigation links. The reason for this padded
cell is to provide white space around the edges of the text. Without
the padding, the text would run against the red lines, which visually
does not look nice. Images inserted into the padded cell must not
exceed 130 pixels in width.
Text Links vs Image Links
for Navigation
We have found that using Cascading Style Sheets is
an easier format for creating navigation links than creating an
image for navigation links. CSS allows you to update the navigation
on your site quickly and without having to use an image editing
program each time you want to add or change the navigation links.
Editing Text Links
When you add or edit text links to your templates,
you must be sure to maintain or apply the appropriate CSS style.
It is also essential that the styles be included in your HMTL code,
or the font styles will be inconsistent with the other navigation
links.
Dreamweaver
Tips for Using CSS
To determine which CSS style has been applied to your
links, open a template file, place your cursor in the text of your
local navigation links, and in the tag selector, which appears in
the lower edge of your Dreamweaver window (see image below), you
will see the specific class assigned for your local navigation.
To apply a CSS style to a link, highlight text, hyperlink
the text, then select Window > CSS Styles. The following dialogue
box will appear:
While the text is still highlighted, and after it
has been linked, select the style you want to apply by clicking
once on the appropriate style from the dialogue box. The tag selector
will reflect that the CSS style has been applied.
|
