Design Specification Sheet
by Steve M. Nelson

Project instructions for developing the "Sonoma County Job Link" web site.

Look-n-feel:
Since this is one of the most important parts of the site, it is necessary to keep all pages with the same visual structure. This includes all of the categories listed below to keep the site as professional as possible.

1) Pages - Below is a list of pages you will need to create to complete the site.
The main and sub-level pages are listed here as follows.
Note: (Use the about_us.shtml as a template file for creating the pages listed below).

Business Services - business_services.shtml

customers.shtml
customized_training.shtml
economic_development.shtml
recruitment.shtml
resources.shtml
small_business_services.shtml
workforce_reduction.shtml

Disability Services – disability_services.shtml

Job Seekers – job_seekers.shtml

career_planning_tools.shtml
computer_lab.shtml
employment_opportunities.shtml
resource_room.shtml
training_opportunities.shtml
workshops.shtml

Labor Market Information – labor_market_information.shtml

Youth at Work – youth_at_work.shtml

career_development.shtml
career_fair_calendar.shtml
get_experience.shtml
job_opportunities.shtml
other_help.shtml
education_scholarships.shtml

Additional Note: All files should be named in lowercase and will include the .shtml extension.
The file names should be descriptive of the section they represent. Words needing separation should have an underscore (_) between them. All html pages will be stored in the "joblink" folder. Comments need to be included in the code to help developers who update the web site.

2) Title Images – All the necessary page title images have been created and are located in a sub-folder called “page_titles” within the images folder.

Additional Note: All jpg and gif files should be place in the "images" folder.

3) Style Sheets -
A style sheet named scjl.css is located in the styles folder. This has all of the necessary styles to maintain the current font formatting of the site. Below is a list of the main styles used in the site.

Body - This is applied to the entire html document and is the default style for all page text.
PageTitle – This style is used for all titles on the page that have not been created as an image.
PullQuote - This style is used for the main quote on the left side of the page.
SmallQuote - This style is used with the main quote to appropriately size the name of the person being quoted above.
Copyright - This style is used for copyright information on the bottom of each page.

Additional Note: If it is necessary to create additional font styles, please contact me prior to creating them.

4) Navigation - Below is a list of navigation pages used to complete the site.

top_navigation.shtml - This file is included on the top of each page and contains the JavaScript code for the drop-down menus that link to the

sub-level navigation pages. This code is located at the top of the include file. Links can be added or deleted in this code but please be careful, JavaScript is not as loose with the syntax as html code is. If you have any question please contact me.

bottom_navigation.shtml - This file is included on the bottom of each page and contains only top-level navigational links.

side_navigation.shtml - This file includes the company logo and the main pull quote.

5) Include Files - Since the client’s web server supports SSI, we are using a single file included in the top and bottom navigational menus. The code for the top include looks like this on each page

<!--#include file="top_navigation.shtml"-->.

This code allows for one file (the top_navigation.shtml) in this instance, to be updated when a change is made to a menu item, rather than having to update each individual page. This also requires that all your page names have the “.shtml” extension so that the server will recognize this file type and add it to the coded section in the page.

6) Main Content - Below is a list formatting requirements you will use to create the pages.
The majority of the page content is located in the nested table below the image heading and can be easily located by the placeholder text which says “Main Text Goes Here!” Please refrain from using any heading that uses all caps. This is visually distracting and can be difficult to read. The link colors are incorporated into the style sheet so it is not necessary to change these or add them to the <body> tag on each page.

Additional Notes: Be sure to include “alt” tag text for all images within the site. Search engines use the information provided in the alt tags, meta tags and the actual page content, and rate each page for relevance accordingly.

If you have any additional questions or need clarification on the above outline please let me know.