Week 03: Nav Bar, Image Map, Site Map

You guessed it...
Finally we get to create a site with all the work we have been doing for the past two weeks...
Each weekly exercise will become it's own web page, with a main menu connecting them together.

IT'S TIME TO GET ORGANIZED !!!

FILE ORGANIZATION:
We will organize our files in a hierarchical pattern.
Think root, parent, child.
1) HOME PAGE: Let's imagine the home page (index.html) as the intro screen for the site.
The navigation page or what we will call the main menu (menu.html) for our site will be linked to this page. An images folder will hold the images for the index.html and the menu.html.
2) SUB-PAGES: In our case, these will be the exercises we do each week. Organize these pages into FOLDERS (week01, week02, week03, etc...) Each of these folders will have their own images folder and index.html file.

Try this:
Create a Sites folder and in it place an images folder, and the index.html file ( this will be the site intro file).
Create folders for all the sub pages, for example: week01, week02, etc.... Each of these folders will have an images folder and an index.html file.



IN PHOTOSHOP:
We will slice up a main menu image in Photoshop and save for the web the image slices and html TABLE.

The following video will demonstrate how to slice an image:



IN DREAMWEAVER:
Using the images and html TABLE generated from PHOTOSHOP, we will create a navigation bar (NavBar) to hyperlink between pages.
We will also use an image map to create a hyperlink from all the sub-pages to link back to the main menu.

The following video will demonstrate how to set up the NavBar and image mapping: