Optional Staff Mock up - Second Level Lesson

I relied on the Photoshop file I created for the "services" page to serve as a guide in creating another second level page, in this case the "staff" page.

I need to decide which graphics remain the same, and which elements would change. There are 4 areas of change displayed in red below:

1. The color block changes at each section. It was rust on the "services" page and will be green on this page.

2. The word "staff" is displayed to indicate we are in the staff section.

3. The photos in the vertical strip are different than those in the services section. I have also duotoned them in a green which matches the overall color of this section.

4. New sub-navigation has been placed below the word staff

2. To create this new mock up I needed to bring in 3 new photos of retired folks, which I sized and cropped. Then I added an adjustment layer which duotoned them to green.

3. Next I added a new layer, and used the shape tool to create a color block of solid green for the top of the screen.

4. Then it was time to add a layer of text in green which identified this area as the "staff" section.

5. Finally I added a new layer with the "staff" sub-navigation... and then the trouble began. There was no room for the "staff" sub-navigation. Here are the steps I had to go through to make this new layer of navigation fit in.

6. First the original navigation with the new images added.

7. Next I turned off the sub-navigation for "services" and found there was a big hole.

8. Now I moved up the "facilities" and "staff" buttons and moved all the other buttons down a smidge to create room for the new sub-navigation.

9. Finally there was room for the sub-navigation to display.

10. At this point I had a sinking feeling in my stomach regarding the slicing of these pages. Each second level page would have a different slicing pattern. EEKS I want out of Web Design now :->

Well fortunately I understand HTML and realized I would simply create nested tables. This would allow create a separate navigation table for each section which would contain these 2 items.
1. Specific sub-navigation for each section
2. Main navigation buttons which are used on every second level page.

Since I would be using nested tables, the navigation table would float independently of the content for each page. To see how this trick is done visit the CSS and Tables section.