Part One
(10 pts)

1. Which of the following recommended design practices apply to a Web site that uses images for its main site navigation?

c. both a and b

2. Which of the following is the design technique used to create pages that stretch to fill the browser window?

b. liquid

3. If an element is configured with float:right, the other content on the page will appear to its __left_______________.

4. Which of the following is an example of using a contextual selector to configure the anchor tags within the .nav class?

c. .nav a

5. Which property and value is used to configure an unordered list item so that the bullet does not display?

b. list-style-type: none;

6. Which attribute below can be applied to an anchor tag to open a link in a new browser window?

b. target

7. Which HTML tag pair is used to specify table headings?

b.

8. Which attribute of the tag is used to specify the name and location of the script that will process the form field values?

a. action

9. You would like to conduct a survey and ask your web page visitors to vote for their favorite search engine. Which of the following form controls is best to use for this purpose?

b. radio button

10. Which of the following should testing a site include?

d. all of the above

Part Two
(30 pts)

You are to create the following Web site for a store named Fran’s Flowers. The images needed are provided as attachments. 1. Create an external style sheet called “florist.css” and link it to each web page. For each of the three web pages (index.html, arrangements.html, and contact.html) add working navigation links (in an unordered, unbulleted, list at the left side) and add a footer (with a smaller font size) at the bottom of the page. All images should have an alt value. 2. Write CSS rules to achieve the following: • The body of each web page has a font style of “Verdana”, font color of #701a06, a font size of 20 pixels and a margin of 0. Use a background image of orangegradient.jpg to achieve the gradient effect (See p 163 of the text). • Have an id called wrapper that contains everything in the body. It has a width of 80%, a minimum width of 700 pixels, left margin and right margin of auto, and a background color of #ffffff. • An id called logo formats the area at the top. It has a height of 134 pixels, a background color of #701a06 and a font color of #ffffff. • Have a leftcolumn id that floats left, has a width of 150 pixels, and a left margin of 20 pixels. • Have the leftcolumn have an unordered list with no bullets and 0 left padding. • The left column links should have no underlining. • Use #leftcolumn a:link and #leftcolumn a:hover to have the color of the text in a link change color when the mouse hovers over it (as shown in the screen shot below, where the mouse was hovering over the “Arrangements” link on the home page.) • Have a rightcolumn id that has a left margin of 200 pixels and a right padding of 10 pixels and bottom padding of 20 pixels. • Have a heading class with font weight bold. • Have h1 have text centered and the font style of italics. • Have an id called rightpix that floats right and has a right margin of 150 pixels. • The footer on the bottom of the page should be an id with font size xx-small, the text should be centered, the bottom padding should be 20 pixels and the clear property should be right. • Use a class called nav to have font weight bold. • The table in the arrangements.html page was formatted with a border of 2 pixels and a border-collapse property of collapse. Use th as well as td for greater accessibility. • The th and td should have css style rule of padding of 10 pixels and border of 1 pixel, solid and color of #5d1403. • The form in the contact.html page is styled with CSS as shown at the end of Chapter 9 (p 380) of the text. Use ids as shown in the text example. The form should be the same as in the text on p 380. The label should be the same as in the text except that the width should be 110 pixels. The input, textarea, and #mySubmit rules should be the same as on p 380 3. The navigation links will be in the division for the leftcolumn id, the content and footer will be in the division for the rightcolumn id. 4. For the fallbouquet.jpg image on the home page, use a width of 125 a height of 259. Use the class heading for the bold face words, “Location”, “Store Hours”, and “Phone.” 5. For all the flower arrangement images on the arrangements page, use for birthdayflowers.jpg a width of 125 and height of 137, for getwell.jpg a width of 125 and a height of 125, and for fallflowers.jpg a width of 125 and a height of 101. 6. On the form for the contact page, use so that the submit button will send the information to another web page 7. Add a comment giving your name and the date to all four files. 8. Validate all HMTL with the HTML validator and validate the .css file with the CSS validator. 9. Submit a zipped folder containing all four files and all images needed.

The pages should look like the screen shots shown on the next pages. Use your name for the email address.

[pic]

[pic]
[pic]

[pic]