Description
• 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.
Project Three
CIS 4004: Project Three Page 3 © Dr. Mark Llewellyn
• Begin this assignment with the two webpages that you created
for Project Two along with the external style sheet that you
created for that project. Project Two culminated with two
webpages and one external style sheet with each page
constructed according to the wireframe shown below.
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
contains the entire body of the document.
Project Three
navigation
main
footer
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
which contains the entire body of the document.
Project Three
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 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
elements appearing in
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
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