Complete Case 2, Mountain Wheels, found on pages 190-193 in your book. To make it easier for you, I have included just the files that you need for this assignment in a zip file.
1. In your text editor, open bmtourtxt.htm and wheelstxt.css from the tutorial.03case2 folder included with your Data Files. Enter your name (Michael Ferig) and the date (today's date) in the comment section of each file. Save the files as bmtour.htm and wheels.css in the same folder.
2. Review the contents and current layout of the bmtour.htm file in your text editor and browser. Create three div containers for the three columns that Adriana wants to use in her proposed page layout. To create the three div containers:
- Locate the div container for the list of links at the top of the file. Give this div element the id, column1.
- Enclose the page content starting with the h2 Introduction heading through the paragraph describing the Day 2 activities of the tour in another div container. Give this div element the id, column2.
- Enclose the page content starting with the Day 3 heading through the last paragraph describing the Day 6 activities in a div element with the id, column3.
3. Within the head section, create a link to the external style sheet, wheels.css. Save your changes to the bmtour.htm file.
4. Go to the wheels.css style sheet in your text editor. Create a style for the page body containing the following style rules:
- Set the font family to Verdana, Helvetica, or sans-serif.
- Set the margin size to 0 pixels.
- Set the background color to white and add a background image using the body.jpg file tiled in the vertical direction.
5. Create the following style for the first column in the layout of the bmtour.htm file:
- Set the width to 140 pixels. Set the left padding to 10 pixels and the top padding to 20 pixels.
- Float the column on the left page margin.
6. Create the following style for the second column of the bmtour.htm file:
- Set the width to 40% of the width of the page body.
- Float the column on the left margin.
- Add a 1-pixel-wide solid black border to the left and right of the column.
7. Set the width of the third column to 40% of the width of the page body and also float this column on the left.
8. Create the following style for the h1 heading:
- Center the contents of the heading, setting the height to 100 pixels and the margin to 0 pixels.
- Set the background color to white with the file h1back.jpg as the background image, tiled in the horizontal direction.
- Add a 1-pixel-wide solid black bottom border.
9. Create the following style for the h2 headings:
- Indent the text 30 pixels.
- Set the font color to white and the background to the color value (108, 87, 12).
- Set the kerning to 8 points and the margin to 0 pixels.
- Display the text in small caps.
10. Set the left margin of h3 headings to 10 pixels.
11. Set the margins of all paragraphs to 10 pixels on the top and left and 20 pixels on the right and bottom.
12. Apply the following styles to blockquote elements on the page:
- Set the width of every blockquote element to 200 pixels with 10 pixels of padding.
- Display the text in a 16-point white font.
- Add a 3-pixel-wide solid black border.
- Change the background color to the value (255, 204, 0) with the image file block.jpg as the background, tiled in the horizontal direction.
- Set the margins around the blockquote to 5 pixels, except for the right margin, which should be set to 10 pixels.
- Float the blockquote on the right margin.
13. Apply the following styles to hypertext elements:
- Display hypertext elements as block-level elements with 2 pixels of padding.
- Set the top, right, and bottom margins to 5 pixels. Set the left margin to 0 pixels.
- Set the font size to 10 points.
- Remove underlining from the hypertext links by setting the text decoration to none.
- Add a 1-pixel-wide solid black border.
- Change the background color to the value (255, 255, 192).
14. Apply the following styles to the address element:
- Center the address text.
- Display the text in a 10-point normal font (no italics).
- Set the background color to white.
- Set the padding size to 10 pixels and add a 1-pixel-wide solid black top border.
- Display the address only when both margins are clear of floating elements.
15. Save your changes to the file.
16. Open the bmtour.htm file in your Web browser. Verify that the layout resembles that shown in Figure 3-66.
17. Try to locate a wide screen monitor and view the Web page under that monitor's resolution. What aspect of your style sheet allowed the columns to be resized to fit the increased width of the monitor? This type of page layout is called a fluid or liquid layout. Explain why.
Attachment:- Mountain Wheels.rar