Due Date: Wednesday January 24, 2007 by 10:00 PM (week 3)

This is the second stage of your Home Page project. This week you will update the Home page you built last week by adding some basic styling and then upload it to your CTIS web space.

Submission instructions are at the end of this document.

This homework assignment assumes that you followed the initial instructions for Homework 1 and now have a home.html document. This document should be valid XHTML code and look similar to the illustration in the original instructions.

This week you will modify the Home page slightly. Basically you will be eliminating any in-line styles and replacing them with embedded styles. You will also add some properties to the major DIV elements you created last week to make the page look a little better.

We will continue to add, edit and change the Home page styling throughout the term.

Update Specifics

• Create a backup of your existing home.html file so you have something to revert to if necessary.
• Remove all inline styles and replace them with embedded styles.
  
  You might want to create the embedded styles first so that you can copy and paste the properties from your existing inline styles into your new embedded style rules. When the embedded styles are created you can then delete completely any/all inline styles - and then test to ensure that your page displays properly with these new embedded style rules.
• Make the links in the header and footer DIVS display without their normal underlines.
  
  Don't use pseudo properties which will be covered next week. Instead use normal text properties (decoration) which can be found in the Appendix at the end of the textbook.
  
  The links in the content area should still be underlined. This means that you should set rules for the A tag within the header and footer DIV tags. In other words, the links in the header and footer are not underlined, but the links for the labs and assignments within the content DIV are underlined... more below.
• Center the "content" DIV... see below.
• Upload the home.html file to your CTIS server space - see the submission instructions below.
• You are free to use any TEXT styling or coloring you wish, though this is not required.
• Create a link for Lab #1 so that when clicked your lab_1.html file will be displayed.

Contextual Selectors

In chapter 2, the author is focused on very specific contextual selectors - unique and specific rules for special situations. This material will be covered in more depth in week 3.

Our advice is to always keep your styles (or stylesheets) as simple as you can. Sure, at some point you may find the need to make only the first paragraph in a DIV red, but the goal in this document is to make the CSS readable, simple, and appropriate for the task at hand.

Remember this simple syntax:

     #DivID {  }

Meaning that you can specify a single DIV element and then set the rules for all elements within that specific DIV.

If you need to make a specific element within a DIV unique, you can use this:

     #DivID elementName {   }

Thus, you could use the following to specify that the A links within the "header" DIV are styled a certain way. Note that links in other DIVs are not affected. The logic is: within the DIV which has an ID of "header", the A links will be styled as we specify here:

     #header a {   }

This same logic/syntax can then be applied to any other element(s) contained with a specific DIV... the HRs, the Ps, etc.

Centering the Content DIV

Last week I showed you how to center the content of a DIV using text-align for the header and footer DIVs.

As your document is now, the content (the Homework and Lab lists) is probably left aligned, but way over to the left.

The document might look better if the "content" DIV itself was centered. This does not mean the content within the DIV is centered. I am instead referring to centering the entire content DIV element. In this way the text within the DIV is still left-aligned, but the entire DIV is centered within the document. In this way, when the window is re-sized, the content DIV is centered on the page as is the header and footer. Take a look at the sample image below.

You can do this by setting up these style properties for the "content" DIV:

• Set the width of the content DIV to a fixed pixel measurement. I will leave it up to you to find out what is appropriate for your page.
• Set the margin-left and margin-right properties of the DIV to auto

In this way the DIV element is sized in width. The browser will then automatically adjust the left and right margins accordingly... the DIV itself is centered.

Submitting this Assignment

• Upload (and test) your home.html file, and any required images, to your web space on the CTIS web server. All images for this assignment should be located in a folder named images which is located inside your public_html folder.
  
  See the Web Server Account Set Up page for details.

An Example of Your Completed Home Page