Lab #2: CSS IT 130, Prof. Robin Burke Fall 2004 In-class: 9/27/2004 Points: 10 Objective: Create two web pages that use a single CSS stylesheet and also explore table-based layout. What to do: Download lab2.zip from the course web site and extract all the files to a folder on your Desktop. (Do not edit files from within the zip utility.) There are eight files h01txt.htm, h02txt.htm, template.htm, h01.jpg, h02.jpg, willet.jpg, next.jpg and previous.jpg. The files describe holes on a golf course, but contain only the content. First, we will lay out the page using tables, then we will create a CSS stylesheet to control the way the pages are displayed. 1. View h01txt.htm in the browser and see what content it contains and how it appears without layout. 2. Start with the first hole. Open template.htm and save as h01.htm. Open h01txt.htm using Notepad. (Right-click on each one to get two copies of Notepad open.) 3. Copy the content from h01txt.htm into the spaces indicated in the template. There are eight content elements: • the title • the banner image • the numbered links for each hole • the text describing the par for the hole • the hole number • the image for the hole map • the hole description • the image links for next and previous hole. (Hole 1 doesn't have a previous hole.) When you view the page, it should look like this: 4. Next create a stylesheet called willet.css. Define the following styles: • whole document: white background, font sans-serif.• table: background rgb (53,43,48), contents centered • table.description: background white, font serif. • Three different class for the td element • description: text left • holenum: text right, font 24 pt, bold • holestats: aligned to top / left, 150 pixels width, text white, size 0.7 em • anchor: text white, bold, size 1.25 em, not underlined • anchor, hover pseudo class: background yellow, text black • b: text color yellow 5. Link the stylesheet to h01.htm with a link element <link href="willet.css" type="text/css" rel="stylesheet" /> The page should look like this: 6. Now repeat the process with h02.htm and h02txt.htm. You will not need to repeat step 4 because the stylesheet has already been created. 7. Upload the following files to the server: h01.htm, h02.htm, willet.css, h01.jpg, h02.jpg, willet.jpg, next.jpg and previous.jpg in a folder called lab2 inside your it130 folder. Check that the pages can be viewed successfully. Put these same eight files in a zip archive called lab2.zip. What to turn in: • Submit the zip file to the Course On-Line system under Lab #2 and enter the URL to h01.htm in the comment box. Hints: • Your pages will contain invalid links to hole 3-18. Don't worry about this. • It is not necessary to include the template file or the original h01txt and h02txt files on your web site or in the zip file. • Some relevant CSS property names: background-color, font-family, font-weight, font-size, text-align, text-decoration (controls underlining), vertical-align, width. • Remember to set the "File Type" to "All files" when saving from Notepad. Otherwise, your files will have the wrong type. • We will go over the CSS properties and values as we go along. If you are impatient, this information can all be found at W3schools: