Sonoma County Youth (WIB)-SoCoYOUth

Here are the instructions in regards to building the "SoCoYOUth" pages...

Splash Page (index.html)

Will be create by Programmer (Ken Alexander) using Flash Programming.

Home Page (home.html)

Will be create by Designer (Nuryani)

You will be building second level pages named below:

whats.htm (What's Happening)
calendar.htm (Calendar)
schools.htm (Schools)
homework.htm (Homework Help)
training.htm (Training)
jobs.htm (Jobs)
getinvolved.htm (Get Involved)
helpme.htm (Help Me!)
bulletin.htm (Bulletin Board)
espanol.htm (Sitios web en Espanol)
addlink.htm (Add your Link)

You will be building third level pages named below:

news.htm (News)
events.htm (Events)
entertaintment.htm (Entertaintment)

To build these pages use the file called "2ndpage.htm"

PHOTOS

As far as images that change from page to page...in the image folder you will be looking at photos as follows. Some pages have more than 1 photos and using either jpg/gif. You also can swap the images between pages if you find it is not matching with the title but make sure to rename it accordingly following the image naming that I provided below

What's Happening Page: 3 photos
( teens1_news_whats.jpg / teens1_events_whats.jpg / teens1_entertaintment_whats/jpg)

Calendar Page:1 photos (teens1_calendar.gif)

Schools Page: 3 photos (teens1_schools.jpg / teens2_schools.jpg / teens3_schools.jpg)

Homework Help Page: 3 photos (teens1_homework.jpg / teens2_homework.jpg / teens3_homework.jpg)

Training Page: 3 photos (teens1_training.jpg / teens2_training.jpg / teens3_training.jpg)

Jobs Page: 3 photos (teens1_jobs.jpg / teens2_jobs.jpg / teens3_jobs.jpg)

Get Involved Page: 3 photos (teens1_getinvolved.jpg / teens2_getinvolved.jpg / teens3_getinvolved.jpg)

Help Me Page: 3 photos (teens1_helpme.jpg / teens2_helpme.jpg / teens3_helpme.jpg)

Bulletin Board Page: 3 photos (teens1_bulletin.jpg / teens2_bulletin.jpg /)

Sitios web en Espanol Page: 1 photos (teens1_espanol.jpg)

Add your link Page: 1 photos (teens1_addlink.jpg)

News Page: 3 photos (teens1_news_whats.jpg / teens2_news.jpg / teens3_news.jpg)

Events Page: 3 photos (teens1_events_whats.jpg / teens2_events.jpg / teens3_events.jpg)

Entertaintment: 3 photos (teens1_entertain_whats.jpg / teens2_entertaint.gif / teens3_entertain.jpg)

TITLE

As far as Title graphics that will be change from page to page in the image folder you will be looking at xxxx_title.gif as follows:

2nd Level page
whats_title.gif
calendar_title.gif
schools_title.gif
homework_title.gif
training_title.gif
jobs_title.gif
getsinvolved_title.gif
helpme_title.gif
bulletin_title.gif
espanol_title.gif
addlink_title.gif

3rd Level page
news_title.gif
events_title.gif
entertaintment_title.gif

LEFT NAVIGATION (2nd/3rd Level Page)

As for the left navigation link, I already created the rollover image and link it to each pages. The only thing will change is the left navigation link for each page. Example you want to create calendar.htm page. What you need to do is remove the rollover image for calendar and replace it with image calendar_standalone.gif.

This is how you use the template
(Template snapshot)

Use this instructions for all 2nd level and 3rd level pages:

For example, when you build" calendar.htm; you will open the "2ndpage.htm" page and save it as" calendar.htm".

Then remove the "xxxx_title.gif" image and replace it with the "calendar_title.gif" image. You will also remove "teens1_xxxx.jpg" image and replace it with "teens1_calendar.gif".

If there is only one image insert the two empty cell with image call onepixel.gif. Modify the size of the image to width=150, height 125.

If you want to create "What's Happening" page remove onepixel.gif (width 450x30) right at the bottom of the title. Split the td tag to 3 columns. Each of the column type in News, Events, Entertaintment. Use format heading 4 and link it to 3rd level page

When you create a 3rd level page the 3 links need to stays. Create a link to the title page example news_title.gif back to "What's Happening"page.

The image placement instructions are the same like other pages.

As for the contents there is two colums where I typed Link Information.
You can delete the text. You can either merge both cell, depending on how long is the sentence or how many are the links.

All images are in lower case and all pages are saved in lower case, using the .htm extension. If you are using Dreamweaver, make sure you have your preferences set on .htm rather than .html

Things not to forget, make sure you have the same alt tags from page to page. Every single image within this Web site must have an alt tag. (Please refer to the alt tags I have done for the 2ndpage.htm page, this is how it should look).

Please don't forget to fill up the Title of the page at the beginning of the html code. This is really important for the search engine to be able to search this site. Besides that the meta tags and keywords is also playing a strong role for search engine. Examples of the keywords are, soco, youth, socoyouth, WIB, sonoma county youth and etc...
Example: <html><head><title>What's Happening</title>
</head><body></body></html>

CSS external already created and linked to the template. The name of the CSS file is

• folder css / file name: external.css

The library item already created and inserted to the template. The library items consist.

• bottom navigation link
  (folder library / file name: bottom_navigation.lbi
• webmaster email link
  (folder library / file name: webmaster_contact.lbi
• credit link
  (folder library / file name: credit_contact.lbi

If changes need to be made to library item, open the file, edit and save.
Go to Modify, Library and select update current page or update pages. Dreamweaver will update the page(s) that link to the library item.

Back to Top

Nuryani, Abdul Hamid

yani_malik@hotmail.com