Assignment in Brief
1. Create another second level page for each of the sites
2. Slice it up
3. Submit Classmate Critique Form

Reading
Read the Second Level section of the CD
Read this Lesson 6 page all the way through

Creating Another Second Level Page
Throughout the semester you have been working on the home page and the second level pages for each client. This week you will determine the look of another second level page. At this point you have 2 options: the additional second level page can look exactly like the original second level, or you can decide to change the look of each second level page. The diversity between second level pages is usually created by using unique colors or images.

In the class examples displayed in the homework section, Linda created a unique look at the Greenspace Retirement home, and kept a consistent look for the second level pages in the campus site. Using a unique look for each second level can help visitors recognize where they are in the site, and also allows you to vary the design and include more images. Unique second levels is more work for the designer, since many more images are created.

Here is a review of what each second level page must contain.

Campus second level pages
• sub navigation for student services:
  admissions & records , career center, counseling, financial aid, health services, scholarship, student activities, student employment, transfer center

  Retirement Community

• sub navigation at staff page:
  doctors, nurses, physical therapists, speech therapist, recreation counselors, attendants, live-in aides.

  Cruise Vacations

• sub navigation at reservation page:
  reserve online, locate a travel agent, change reservation, group reservations, early bird specials, cancellation policy.

  Pet Supply Warehouse

• sub navigation at shopping cart page:
  order (members only), become a member, track order, cancel order, download coupons, great deals.

  Sometimes a design for a second level page can go thru several iterations. Paula Schwindeman designed several mock ups of the City of Santa Rosa second level template.

Review the Examples pages to get ideas about second level pages.

top

Cleaning up Your Code
This week all you are required to do is create additional second level pages for both sites and turn in flattened versions of them. The following two sections on Cleaning up the code and using CSS are meant to get you thinking about the issues that come up with adding HTML text to your pages.

REPEAT: The following is not due this week, just meant to get you thinking about what comes up next week. This material is also on the Lesson 7 page.

If you used ImageReady to create the rollover effects in lessons 4 and 5, this is the time to take a look at your code and see if there are problems you can correct. I recommend you take the following steps:

1. Look at the images created for the rollovers, and see if you can find any images which seem to be extra. For example if you have images called "about.gif" and then "about-over.gif", they seem to belong and will be kept.
2. If you have images called "about_welcome.gif" or "about_welcome-over.gif" then those images seem suspicious.
3. Remove those files into a folder called "extra images".
4. Open the HTML file created by ImageReady. Use an HTML editor like BBEdit or HomeSite to to modify the code. Take out the code which refers to the rollover for these extra images. This is a more technically challenging way to create your site getting down and dirty with the code, however some folks prefer it.
   OR
5. Another option is to use Dreamweaver (or Go Live). Use the images that ImageReady created from your slices and rebuild the site.
6. After you have tested your code on both Netscape and I.E. browsers, you can toss the "extra images" folder.

Dreamweaver is my chosen method for creating code. It is much cleaner and more professional. Up until 2002, Linda Hemenway who is very adept at working with HTML code, did her nested tables in an HTML editor (BBEdit). Now she has switched to using Dreamweaver as well. This is the part of my lecture (when I teach this class in the classroom) that I compare the code for a page created in ImageReady to the code for the same page created in Dreamweaver. The number of lines of code is one third to one half less in Dreamweaver.

Working with the ImageReady code can be problematic. I don't recommend jumping into Dreamweaver (or Go Live) without a prior introduction to the programs, as this can be like jumping into a big lake without learning to swim first. Stay with the ImageReady code if you are not ready to jump to Dreamweaver. If you encounter problems working with ImageReady code, email me. This week's lesson is meant to make you aware of the issues of working with ImageReady code and look towards learning the tools to create more professionally coded pages.

Nested tables are an important part of most Web sites. This may be a good time to brush up on your table code.

top

Using HTML and Cascading Style Sheet Code
Once again this learning objective is optional. It is NOT a required part of the class homework, but sure comes in handy when working on "real" sites.

When the pages were created by ImageReady, a cell with white or green may have been created using an image of solid white or green. A more efficient technique is to use HTML code to achieve this effect.

To create a white area turn the entire page white. <BODY BGCOLOR="FFFFFF">. Then in the table cell which you want to display as white simply place a <BR> tag to create an empty cell.

To create a colored cell you can simply insert this code into the table cell code. <TD BGCOLOR="FFCCFF">. Once again insert the <BR> tag to create an empty cell.

In the example of the retirement home I used a dithered image to create the non-web-safe color of green. In that case the code is <TD BACKGROUND="images/green.gif">

When we created the body text in Photoshop we were able to indent the first line of text, or use leading to create more space between lines of text. Cascading Style Sheets allow you to create this look. In the head of the document add this code to produce a leading of approximately 1.5 spacing

<HTML> <HEAD>

<style>
<!-- P {line-height:18px; font-size:12px,}-->
</style>

In the head of the document add this code to produce a first line indent

<HTML> <HEAD>

<style>
<!-- P {text-indent:30px; font-size:12px,}-->
</style>

Whenever the <P> tag is used, the CSS code will be invoked.

Turning in Homework
Flatten the campus and optional clients additional second level pages and save them in the appropriate directories (campus or optional). Add links on your homework page for the following items.

<A href="campus/services.gif"> additional campus second level example </A>

<A href="optional/campus-st-ser.jpg"> additional optional second level example </A>