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.
• 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. Project Four wrapper (
) header navigation main footer contact id (div) image image • We’ll modify the wireframe for the index page to look like the one shown below. The wrapper is a
element which contains the entire body of the document. Project Four wrapper (
) header navigation main footer contact (
) image • We’ll modify the wireframe for the menu page to look like the one shown below. The wrapper is a
element which contains the entire body of the document. Project Four wrapper (
) header navigation main footer contact (
)
• 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: Project Four: Task 2 clamstrips.png coffee1.jpg coffee2.jpg coffee3.jpg espresso1.png lighthouselogo.jpg lighthouselogo1.jpg marker.gif muffin1.jpg ocean.jpg oldmackinaclight.jpg salad1.jpg tea1.jpg tea2.jpg tea3.jpg
• 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
• 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
elements to create the columns. Use the existing structural elements
