Overview - Second Level Lesson
Now that you have created a second level page which contains: name of the web site, page name, logo, navigation, photos, and body text, you are probably exhausted and relieved. Well, there is one more detail. Most sites have several pages which can be classified as "second level" pages and will have a similar look. As a designer, you will need to make a template of the second level page and then explain how each page is the same, and how each page is different.
All Second Levels are Created Equally :->
There are a number of ways the second level pages can be handled. One option is the site where all the second level pages look exactly the same. The only change is the content within each page and HTML code which displays the page name. The type of site is easy to create from the designers point of view. Once the images are made for ONE second level page, they are ALL done.The Web Graphics class is an example of a Web site where all the second level pages look the same. When I visited the GIF and JPEG lesson and the Campus Mock-up lesson, the graphics at the top of the page, and the color scheme remained the same. There were 3 areas where content changed.
1. The upper left corner of the blue strip contains text displayed in white which indicates the lesson name and number. This is created using HTML and does not require a graphic.
2. There are images for each lesson which run along the left edge of the page. Each lesson objective is displayed in a separate table cell and the image is displayed near the top of each cell. The images change from lesson to lesson. As the designer, I would be responsible for creating all these images, and letting the content developer know what images to place on each page.
3. As a designer I am not responsible for providing the page content, however, I do determine how the text will be displayed. What font will be used? What is the font size, color, line-height, and margin? When are headings used and what do they look like? What is the link color? How will the objectives be displayed.
As the designer you will need to answer these questions so the content developer can follow your guidelines.
If I were handing this site off to my content developer I would include the following guidelines for creating each lesson page.
JPEG-GIF lesson - images
website1.gif - place with "Navigate the Web site" text
camera.gif - place with "Digitize Images" text
dad.jpg - place with "Photos as JPEGs and GIFs" text
gif.gif - place with "Clip Art as JPEGs and GIFs" text
trans.gif - place with "Interlaced & Transparent GIF" text
ftp.gif - place with "JPEG and GIF Homework pages" text
Next I would define the text and link color:
1. body text - font-family:"Gill Sans", Arial, sans-serif; font-size:11px;
2. Now the link colors -
A:link {color:#996633;}
A:visited {color:#cc9966;}
A:active {color:#999966;}
A:hover {color:#cc6633;}
Note that I have listed these values as Cascading Style Sheet code. Every Web shop is different, and not all firms use CSS. The designer can simply specify what the font and links should look like, and leave it to the content developer to decide how to implement your requirements.
Daring to be Different ;-}
Another type of site is one in which the site second level pages are similar, however each section has unique navigational graphics and unique content. Take a look at the Online HTML class, I have compared the "lessons" page, "read/watch" page and the "homework" page.1. The navigation bar at the left, changes for each section of the Web site. Whatever page we are on displays a medium gray button instead of charcoal gray.
On the "lessons" and "read/watch" page there is sub navigation which appears. Visitors can access one of 8 lesson pages by selecting a number. As they roll over each number, text appears which describes the lesson.
At the homework page the homework button is medium gray, however no sub-navigation appears. The homework section is organized by teacher names, so there is no need for the numbers 1-8.
2. The section name changes, graphics which display the words "lessons", "read/watch", and "homework" display at the upper right hand corner of each screen.
3. The content for each page is unique, however the formatting of the text is consistent.
One final note, I re-used images within the site navigation. The numbers 1-8 and text labels were simply moved down to display below "lessons", "read/watch", "examples", "resources", and "faq". This makes the pages load faster, and makes it less confusing to keep track of the images for this site.
No Two Alike :-]
The most difficult, time consuming and graphically intense sites are those in which every page has many new images. When color is used to organize a site some designers create an entirely new navigation bar to match the color of each section. If you have 10 navigational items, and 6 sections of the site, you will be creating 60 buttons, and possibly 60 rollover images. That's a lot of images!!The Web site below was created by a student in the Business of Web Design course. She used color to organize the site and created several unique images for each section.
1. The logo in the upper left corner is duotoned to match the page color scheme. This means she created 6 logos instead of one.
2. The navigation bar at the main "Home" page is multi-colored with a unique color stroking each photo, and corresponding text displaying below. When you access the "Welcome" page the top navigation buttons are all duotoned in orange, at the "Services" page another set of images display in green. The "Ministers" page uses navigation which is colorized in blue. This pattern is repeated for all 5 sections. The home page has a set of navigation which is full colored, and then there are 5 sets of duotoned images. for a total of 30 images. If the same navigation had been used on every page there would be 5 images and 5 rollover images for a total of 10.
3. The background image changes for each section. This is an easy image to create, it just makes the content developer's job harder, since they have to change the background tag on each page.
4. The heading text and link colors also change on each page.
After reviewing these 3 examples I hope you now have a better understanding of what your choices are in creating the second level pages. Let's move on and explore how the campus second level pages were designed in Photoshop, sliced in ImageReady, and then converted into a Web page with HTML code that works. Finally the specs for the campus site will be determined.