- This assignment has three main objectives:
- To give you some practice adding images to an existing webpage.
- To apply additional CSS to alter the presentation of a webpage.
- To include table elements in your markup.
CIS 4004: Project Four Page 2 © Dr. Mark Llewellyn
- 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.
contact id (div)
CIS 4004: Project Four Page 3 © Dr. Mark Llewellyn
- 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.
CIS 4004: Project Four Page 4 © Dr. Mark Llewellyn
- 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.
CIS 4004: Project Four Page 5 © Dr. Mark Llewellyn
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:
CIS 4004: Project Four Page 6 © 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 html, menu.html, and the bistro.css files from your Project Three folders into a newfolder 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
CIS 4004: Project Four Page 7 © Dr. Mark Llewellyn
Project Four: Task 1
- Your first task for Project Four is to modify the cssstylesheet 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 8 © Dr. Mark Llewellyn
CIS 4004: Project Four Page 9 © Dr. Mark Llewellyn
Project Four: Task 2
- The second task for this project is to modify the htmlmarkup 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.
CIS 4004: Project Four Page 10 © Dr. Mark Llewellyn
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 htmlpage should look like the images shown on the next three pages.
CIS 4004: Project Four Page 11 © Dr. Mark Llewellyn
CIS 4004: Project Four Page 12 © Dr. Mark Llewellyn
CIS 4004: Project Four Page 13 © Dr. Mark Llewellyn
CIS 4004: Project Four Page 14 © Dr. Mark Llewellyn
What To Turn In
Place all of the deliverables for this assignment into a folder named Project4.
- The two valid HTML5 documents containing the semantically correct markup for the htmland menu.html pages (40 pts – 20pts for each page).
- A folder named imagescontaining the fifteen images for this project. (5 pts)
- A document containing screen captures for HTML5 validations (both passing!) (10 pts – 5pts for each valid page).
- A valid CSS stylesheet named css, with styles defined as outlined in this document. (35 pts).
- A document containing a screen capture of the validation of the stylesheet (10 pts).
CIS 4004: Project Four Page 15 © Dr. Mark Llewellyn