IT350 - Web and
Web sites are meant to provide information, promote something, and/or attract users. Up till now, we have looked mostly at the structure of web pages. Now we will look at formatting – an important additional aspect of good web site design. The techniques used in XHTML 1.1 are cascading style sheets (CSS). For this lab, dress up your site using CSS.
Part of the role of web author is to be creative, using the available tools. Again, this lab will be building on the pages you created last week. Therefore, it is highly recommended that you use a copy of the pages you created last week as the basis for this lab. At a minimum your Unit Home Page, event schedule and form from the previous labs are required and shall be adapted to CSS. In addition, your pages should convey a set purpose, be organized in such a way that it promotes that purpose, and be visually appealing.
Since the focus in this lab is on appearance, a larger than usual portion of your grade will depend upon aesthetics.
You must create a folder on your Web drive called "Lab03" (without the quotes) and store your work in that directory. (You are highly encouraged to copy your lab from last week into this directory and make changes to it there!).
1. New style sheet: Create an external style sheet to contain a core set of styles used in all pages within this lab’s site. The name of the style sheet must be “styles.css” (without the quotes). At a minimum, define the following attributes in some element:
Ø margin-xxx (left, right, top, or bottom)
Ø border-style or border-color or border-width
2. Existing HTML pages: modify all of your existing XHTML pages (that you have copied into the Lab03 directory) to link to the style sheet you created above. Then make any additional changes to each page so that the overall appearance is noticeably different now that the stylesheet has been added (hint: you don’t necessarily have to modify the body of your page to achieve this, though it is fine to do so). Try to make use of CSS to make your pages more attractive and more functional.
3. New HTML page: Create a new page, detail.html, that provides details about a specific fictitious event in your schedule. Ensure the page links to your schedule and provide a link from the schedule to the new page.
Ø Define at least two classes and apply styling using those classes
Ø Use span and div tags in styling
Ø Use a floating technique to put an image on the right side of a page and have text to the left
Ø Use inline styling in at least 2 places.
Ø Use the meta element to describe your new page.
4. A user stylesheet. Users with disabilities, such as visual disabilities, may wish to modify the presentation of web pages to make them easier to read. One way to do this is with a user style sheet.
5. Make a simple style sheet called userContent.css. Make it change the colors and sizes of parts of your page.
6. Install the user style sheet in Firefox or Internet Explorer – we recommend Internet Explorer for this. See instructions below:
For Internet Explorer:
Go to Tools - Internet Options
Click the Accessibility button in the General tab
Click the User Style Sheet check box and then browse to your style file
Go to Help - Troubleshooting Information
In the Application Basics table click on "Open Containing Folder" button. That will open the folder where your profile is stored.
If there is no "chrome" folder, create one
Place your userContent.css in the chrome folder
7. Verify that the new style sheet changes your page (for Firefox, you need to restart the browser after each change and it might need “! important” after each rule – see question 10 below. Results may vary with IE).
8. Modify your stylesheets to enable you to answer the following questions:
9. What happens if your user style sheet changes the font size of a <h1> element to “x-large” but the CSS built into the page sets the font size to 5pt? Which takes effect?
10. Is the answer different if you add “ ! important ” (with no quotes) to the end of the font size rule in the user style sheet? (see http://www.w3.org/TR/CSS-access#UserControl ).
11. Write the answers to these questions on the back of your assignment coversheet.
12. Validation:Validate all of your XHTML files and your CSS file using the appropriate W3C validator.
Your web page must be constructed using Notepad or a similar text-only editor. The use of programs such as Microsoft Word, Microsoft Frontpage, DreamWeaver, ColdFusion, Mozilla Composer, etc. will be considered an honor offense.
For a nominal amount of extra credit do some/all of the following:
When finished, the structure of your web site should look like this: (items in blue shall undergo creation/modification during this lab)
default.htm (main page for the course; has links to each week’s lab)
index.html (modify to use CSS)
schedule.html (modify to use CSS)
form.html (modify to use CSS – if you had this page from Lab 02)
detail.html (new page with details on one of your events and additional CSS styling)
styles.css (new stylesheet)
userContent.css (new stylesheet to be used by the user)