Description
CIS 4004: Project Three Page 1 © Dr. Mark Llewellyn
CIS 4004: Web-Based Information Technology
Project Three
header
navigation
content (main)
footer
contact id (div)
CIS 4004: Project Three Page 4 © Dr. Mark Llewellyn
• For the main page, we’ll modify the wireframe to look like the
one shown below. The wrapper is a <div> element which
contains the entire body of the document.
Project Three
<div id=“wrapper”>
header
navigation
main
footer
<div id=“contact”>
image
image
CIS 4004: Project Three Page 5 © Dr. Mark Llewellyn
• For the menu page, we’ll modify the wireframe to look like the
one shown below. Again, the wrapper is a <div> element
which contains the entire body of the document.
Project Three
<div id=“wrapper”>
header
navigation
main
footer
image
image
image
CIS 4004: Project Three Page 6 © Dr. Mark Llewellyn
• In this project you will modify the external stylesheet created
in Project Two to add additional style elements to your
markup.
• You will also add images to the webpages and begin to
enhance the overall look of the website.
• Create a new folder named Project Three and copy the
structure and the files from Project Two into this new folder.
Project Three
CIS 4004: Project Three Page 7 © Dr. Mark Llewellyn
• Your first task for Project Three is to modify the
bistro.css stylesheet.
• Code the CSS to the following specifications:
– Select <body> elements to have Verdana, Arial, or sans-serif font typeface.
Place the image ocean.jpg into the background of this element with a
horizontal repetition.
– Select <h1> elements appearing in <header> elements to display the
image named lighthouselogo.jpg on the left side of the header with no
repetition. Also set the height at 110px with 130px left padding and 30px of
top padding. Place a 1px solid border using color #FFE4C4 around the
elements, with a border-radius of 15px. Text color in this element should be
#00008B.
– Select <nav> elements to have bold text.
– Use a descendant selector to style <a> elements inside <nav> elements to
eliminate the display of the underline for hyperlinks.
(continued on next slide)
Project Three: Task 1
CIS 4004: Project Three Page 8 © Dr. Mark Llewellyn
• Continued from previous slide:
– Select <ul> elements to display the image marker.gif as the list bullet.
– Select <footer> elements in <main> to use the image
lighthouselogo1.jpg with horizontal repetition. Set the height to 35px
with a -2em top margin and a solid 1px border using color #FFE4C4 and a 6px
radius.
– For the id named address, add a rule to display text with 92% font size.
– Define an id named wrapper with auto-sized left and right margins with a
maximum width of 900px and a minimum width of 750px. Set the width of this
element to be 80%. This will provide us with a variable-width centered layout
design.
• Save and validate the bistro.css stylesheet.
Project Three: Task 1
CIS 4004: Project Three Page 9 © Dr. Mark Llewellyn
• Create a folder named images inside your Project Three
folder.
• Download the images from the WebCourses assignment page
into this folder. There are nine images to download with the
following names:
– clamstrips.png
– coffee.jpg
– favicon.ico
– lighthouselogo.jpg
– lighthouselogo1.jpg
– marker.gif
– ocean.jpg
– oldmackinaclight.jpg
– tea.jpg
Project Three: Task 2
CIS 4004: Project Three Page 10 © Dr. Mark Llewellyn
• Modify the index.html (home) page as follows:
– Remove any <b>, <small>, or <i> elements from the page (if
you have any).
– Place an <img> element as the first element inside <main> to
display the image named oldmackinaclight.jpg, aligned to the
right side of the element with an explicit width of 250px and an explicit
height of 350px. Don’t forget to include an alt attribute description
of the image.
– Include a link to the favicon.ico file so that the icon image
displays on the browser tab for your webpage.
– Place a <div> element inside the <body> element that contains all
of the content of your page. Assign the id=“wrapper” to this
<div>.
• After making these changes, your index.html page should
look very similar to the one shown on the next page.
Project Three: Task 2
CIS 4004: Project Three Page 11 © Dr. Mark Llewellyn
CIS 4004: Project Three Page 12 © Dr. Mark Llewellyn
This is the favicon
image displayed in the
browser’s tab.
These are the
marker.gif images for
the list items.
CIS 4004: Project Three Page 13 © Dr. Mark Llewellyn
• The second task for this project is to modify the menu.html
markup as follows:
– Remove any <b>, <small>, or <i> elements from the page (if you have
any).
– Add an <img> element just above the Coffees header which displays the
coffee.jpg image. Just above the Teas header add an <img> element to
display the tea.jpg image, and just above the Snacks header add an <img>
element to display the clamstrips.png image. All three of these images
should be right aligned with explicit width and height of 250px each. Be sure to
specify the alt attribute for each image.
– Modify the main content of this page from whatever markup you used
previously, whether it was <h3> elements, or a <ul> elements to use a
definition list <dl>.
– Include a link to the favicon.ico file so that the icon image displays on the
browser tab for your webpage.
Project Three: Task 2
CIS 4004: Project Three Page 14 © Dr. Mark Llewellyn
(continued)
– Place a <div> element inside the <body> element that contains all of
the content of your page. Assign the id=“wrapper” to this <div>.
• After making these changes your menu page should look like
the one shown on the next two slides.
Project Three: Task 2
CIS 4004: Project Three Page 15 © Dr. Mark Llewellyn
Project Three
CIS 4004: Project Three Page 16 © Dr. Mark Llewellyn
Project Three
CIS 4004: Project Three Page 17 © Dr. Mark Llewellyn
Place all of the deliverables for this assignment into a folder named
Project3. The deliverables for this assignment are to be submitted
via WebCourses no later than 11:59pm Sunday October 7, 2018
are:
1. The two valid HTML5 documents containing the semantically
correct markup for the index/home and menu pages (40 pts – 20
pts for each page).
2. A folder named images containing the eight images for this
project. (5 pts)
3. A document containing screen captures for HTML5 validations
(both passing!) (10 pts – 5 pts 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 Three Page 18 © Dr. Mark Llewellyn
CIS 4004: Project Three Page 19 © Dr. Mark Llewellyn
