Project Four Solution

Description

Project Four

• This assignment has three main objectives:

• 1. To give you some practice adding images to an existing webpage.

• 2. To apply additional CSS to alter the presentation of a webpage.

• 3. To include table elements in your markup.

Project Four

• Begin this assignment with the two webpages that you created for Project Three along with the external style sheet that you created for that project. Project Three culminated with two webpages and one external style sheet with each page constructed according to the wireframe shown below.

wrapper (<div>)

header

navigation

image

main

image

contact id (div)

footer

Project Four

• We’ll modify the wireframe for the index page to look like the one shown below. The wrapper is a <div> element which contains the entire body of the document.

wrapper (<div>)

header

navigation _main

image

contact

(<div>)

footer

Project Four

• We’ll modify the wireframe for the menu page to look like the one shown below. The wrapper is a <div> element which contains the entire body of the document.

wrapper (<div>)

header

navigation _main

contact

(<div>)

footer

Project Four: Task 2

• Create an images folder inside your Project 4 folder. Include all of the images listed below in this folder. Download the images from the WebCourses assignment page into this folder.

• There are fifteen images to download with the following names:

clamstrips.png

coffee1.jpg ocean.jpg

coffee2.jpg oldmackinaclight.jpg

coffee3.jpg salad1.jpg

espresso1.png tea1.jpg

lighthouselogo.jpg tea2.jpg

lighthouselogo1.jpg tea3.jpg

marker.gif

muffin1.jpg

Project Four

• In this project you will modify both the markup for the index and menu pages as well as the external stylesheet created in Project Three to add additional style elements to your markup.

• You will also add additional images to the menu page to further enhance the overall look of the website.

• Copy the index.html, menu.html, and the bistro.css files from your Project Three folders into a new folder named Project Four and place in the appropriate folders within the new Project Four folder.

• Remove any style rules from your CSS that are rendered useless by the changes noted in the next few pages

Project Four: Task 1

• Your first task for Project Four is to modify the bistro.css stylesheet and index.html to accomplish the following:

–Create a two column effect with the navigation and contact areas contained in the left column and the main content and image located in the right column. Maintain the wrapper to control the fluid layout properties.

–Do not use additional <div> elements to create the columns. Use the existing

structural elements <nav> and <main> as the containers for the columns.

–Set the width of the <nav> element to be about 200px.

–Have these structural elements display as table-cells to maintain the columnar effect when the user adjusts the width of the browser display. Do not float the columns. Do not use a nested <div> approach.

–Modify the contact/address <div> to display with the background image ocean.jpg in a bordered box using the #FFE4C4 color for the border. Put a small radius on each corner of this box of about 2px. Have this box set about 100px from the bottom of the last navigational element in the list above it.

• Your completed page should look like the one shown on the next page.

CIS 4004: Project Four Page 9 © Dr. Mark Llewellyn

Project Four: Task 2

• The second task for this project is to modify the menu.html markup as follows:

– Remove any <dl>, <dt>, and <dd> elements from the page. The menu items will no longer be displayed in a list element, but rather in a table.

– As with the index.html page, the menu.html page should now have a two column design with the wireframe similar to the index.html page except for the image which does not appear in the menu.html page.

– The entire main content of the menu.html page will consist of three separate tables.

– All tables should use correct table semantics and elements should be designed with accessibility in mind. See the lecture notes on HTML5 Tables for details (use the technique shown on page 21 of those notes).

– All table styling must be done using CSS… do not attempt to use any of the deprecated HTML attributes to style your tables.

Project Four: Task 2

– Notice in the images on the following three pages, the consistent use of the color palette for our website. The sand color is #FFE4C4, the dark blue text color is #00008B, the main background color is #00BFFF.

– The background color in the odd table rows is #A9A9A9 and the text color is #00008B. The background color of the table header rows is #000066 and the text color is #EAEAEA.

– All of the images in the tables have an explicit width of 100 and height of 75.

– Notice that the text in the second column of every table is left-justified. All other columns are centered.

– Header rows in the table are styled differently than all other rows.

– Table captions are styled to left-justify and use a 1.2em font-size.

• When you are finished, your menu.html page should look like the images shown on the next three pages.

Project Four

Project Four

Project Four

What To Turn In

Place all of the deliverables for this assignment into a folder named Project4.

1. The two valid HTML5 documents containing the semantically correct markup for the index.html and menu.html pages (40 pts – 20pts for each page).

2. A folder named images containing the fifteen images for this project. (5 pts)

3. A document containing screen captures for HTML5 validations (both passing!) (10 pts – 5pts for each valid page).

4. A valid CSS stylesheet named bistro.css, with styles defined as outlined in this document. (35 pts).

5. A document containing a screen capture of the validation of the stylesheet (10 pts).