Style Guide - Duxbury Free Library

General

This is not intended as a complete guide to the site, but offers tips that can help keep a consistent look and feel.

Stylesheets

The style for the quote on the default(home) page should be set to "quote" unless it is announcing an event, in which case, the style should be set to "event." Also set the words "Events and Activities" to the style "event" if an event is being announced on the home page; otherwise, set it to "topnav".

The style for most body copy on the site is "gcontent" (general content). A paragraph set with "gcontent" will have a margin of 10 pixels.

Site Dimensions

Here are the sizes for the site (all dimensions are given in pixels):

Overall table width - 720w
Banner area - 520w x 132h
Vertical navigation - 200 x 22h (each button)

Horizontal navigation:

  1. Library catalog - 160w x 28h
  2. Research Databases - 200w x 28h
  3. Ask a Librarian - 160w x 28h
  4. My Account - 200w x 28h

Right-hand subnavigation width - 200 pixels

Content area (the area to the left of the subnavigation) - 520w

The Content area can be used as a single area:

Content area - 520w

 

The Content area can be divided equally by inserting a nested table, as follows:

column A - 50% (260w)

 

column B - 50% (260)

 

 

column A - 34%

 

column B -33%

 

column C - 33%

 

Footer - 720w x 45h

Be a bit careful with the borders. The cells have single-pixel borders - they should never be doubled! Use the styles "borderright" "leftborder" "bottomandrightborder" "bottomandleftborder" and "bottom" where necessary - just inspect to see that the border has not become thicker. There is already a border around the entire outside, so you'll never need a left border in the leftmost cell, or a right border in the rightmost cell, etc. Apply the border to the cell (<td>).

Dreamweaver Library Items
If you need to add, delete, or change an item in the local navigation, change it in the library item, not on the individual page. When you save it, Dreamweaver will ask you if you want to write the library item to all pages on which it has been included. Generally, you should "just say yes," (update) unless you want to continue editing the item, in which case you should say "don't update." It is possible to make edits to library items on individual pages in code view, but only for temporary testing purposes. The next time that library item is changed and saved, it will overwrite your individual page changes.

Library Items for this area are:

banner_generalinfo
banner_reference
banner_event
banner_teen
banner_teen_black
ch_banner

This area is 520w x 132h

Library Items for this area are:

vertical_nav
vertical_navteen
teen_vertical_nav_black

No library item for Children's vertical nav
horiz_nav     horiz_nav_teen_black     This area is 520w x 28h

renew_and_hold (lib item)

Content Area Headers (h2)

A little bit about styles:
Text in the content area is usually set to "gcontent."

This is an h3 header

This is gcontent text bolded.

Children's Styles: (children's bulleted lists have stars)

This area is 520w, valign=top, align=left.

 

Library Items for this area are:

  • about_library
  • at_library
  • using_library
  • policiesnav
  • ref_localnav
  • booklists_adult
  • event_nav
  • teen_localnav
  • ch_localnav

This column is 200w, valign=top, align=left.

The footer library item is named "footer."           Footer area is 720w x 45h, valign=bottom, align=left.

 

Children's Pages

The Children's Pages have an additional stylesheet called dfl_children_style.css, which includes the colors on the vertical navigation, the teal with pink rollover on the subnavigation, and a few extras.

The style "ccontent" should be applied to paragraphs and links in the content areas. It will set the typeface size (x-small) and color (teal) and provide a 6-pixel margin on the left, so the paragraphs don't bump up against the left side of the content area. Normally this would be controlled with cellpadding, but if cellpadding is added, the layout will break. The 6-pixel left margin is not applied to "ccontent links", so you don't have to worry about that, but you will have to apply the style separately to the links.

Link of the Month

In order to have a fresh page on the Reference Desk page AND an archivable Link of the Month, it is recommended that you follow this procedure:

  1. Create the Link of the Month page in the LinkoftheMonth folder and name it "LOMMmmyyyy.htm," for example, LOMSep2004.htm.
  2. Then update the jump menu at the bottom. Go into the HTML code, copy and paste a section that looks something like this:

    <option value="LOMDec2003.htm">December 2003: Duxbury in December</option>

    Change the contents of the 'value' parameter to the page name of the month you're adding, and put the title of the page in between the two sets of <option></option> tags, as in the example. Place the most recent month at the top of the list.On or about the first of the month, using "Save As" in Dreamweaver, save the appropriate LOM page as "reference.htm" (in the reference folder, which is one level up).

  3. Dreamweaver will ask if you want to update all the links. Say "Yes" because the links' paths will be different when the page is in a different folder. This process has not been known to fail except for "operator error" (or if the power goes out in the middle of the update or something), but be sure just in case to check the updated reference.htm page for any broken links or broken images.

Banners

From time to time, you may wish to change or add a background image to the banner sections.

The image should be 520 pixels wide and 132 pixels high. Use the current Children's Pages as a model for putting the banner image in the background of the banner cell (<td>).

If the title for the section ("Teen" "General Information" "Reference" etc.) is in the background image, the text should start 10 pixels from the left edge.

The current font for the banner section of all of the pages except the Children's Room is Delphin (http://www.fonts.com/findfonts/detail.asp?pid=202777#bio). The large letters are 84 pixels high and the small ones are 52 pixels high. The initial caps are lowered so that the top of the cap is level with the dot on a lower-case "i" and the bottom is level with the descender on the letters "f" and "y." The tracking was altered to allow the letters better spacing.

The current font for the Children's Room pages is Calligraphic 421 (Bitstream, http://www.bitstream.com), also at 84 pixels for the capital letters and 52 pixels for the lowercase ones. The drop shadow was kept subtle, at about 50% opacity, and a spread and distance of 4 or 5, with the light coming from the upper left (120 degrees).