Name: CIS 4004: Web-Based Information Technology Project Four solution
SKU: 23939
Availability: InStock

Description

5/5 - (5 votes)

• 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
CIS 4004: Project Four Page 3 © 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.
Project Four
wrapper (

)
header
navigation
main
footer
contact id (div)
image
image
CIS 4004: Project Four Page 4 © Dr. Mark Llewellyn
• 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
CIS 4004: Project Four Page 5 © Dr. Mark Llewellyn
• 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
(

)
CIS 4004: 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