Description

5/5 - (1 vote)

Project Four Page 6 © Dr. Mark Llewellyn • 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 CIS 4004: Project Four Page 7 © Dr. Mark Llewellyn • 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 CIS 4004: Project Four Page 8 © Dr. Mark Llewellyn • 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

and

as the containers for the columns. – Set the width of the

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

approach. – Modify the contact/address

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. Project Four: Task 1 CIS 4004: Project Four Page 9 © Dr. Mark Llewellyn CIS 4004: Project Four Page 10 © Dr. Mark Llewellyn • The second task for this project is to modify the menu.html markup as follows: – Remove any

, and: 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 CIS 4004: Project Four Page 11 © Dr. Mark Llewellyn – 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: Task 2 CIS 4004: Project Four Page 12 © Dr. Mark Llewellyn Project Four CIS 4004: Project Four Page 13 © Dr. Mark Llewellyn Project Four CIS 4004: Project Four Page 14 © Dr. Mark Llewellyn Project Four CIS 4004: Project Four Page 15 © Dr. Mark Llewellyn Place all of the deliverables for this assignment into a folder named Project4. The deliverables for this assignment are to be submitted via WebCourses no later than 11:59pm Sunday October 21, 2018 are: 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). What To Turn In CIS 4004: Project Four Page 16 © Dr. Mark Llewellyn CIS 4004: Project Four Page 17 © Dr. Mark Llewellyn

CIS 4004: Project Four solved

Description

Related products

CIS 4004: Project One solved

CIS 4004: Project Five solved

CIS 4004: Project Three solved