$29
Project Three Solution
Project Three
• 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.
CIS 4004: Project Three Page 2 © Dr. Mark Llewellyn
Project Three
• 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.
header
navigation
content (main)
contact id (div)
footer
CIS 4004: Project Three Page 3 © Dr. Mark Llewellyn
Project Three
• 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.
<div id=“wrapper”>
header
navigation
image
main
image
<div id=“contact”>
footer
CIS 4004: Project Three Page 4 © Dr. Mark Llewellyn
Project Three
• 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.
<div id=“wrapper”>
header
navigation
image
main image
image
footer
CIS 4004: Project Three Page 5 © Dr. Mark Llewellyn
Project Three
• 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.
CIS 4004: Project Three Page 6 © Dr. Mark Llewellyn
Project Three: Task 1
• 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)
CIS 4004: Project Three Page 7 © Dr. Mark Llewellyn
Project Three: Task 1
• 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.
CIS 4004: Project Three Page 8 © Dr. Mark Llewellyn
Project Three: Task 2
• 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
CIS 4004: Project Three Page 9 © Dr. Mark Llewellyn
Project Three: Task 2
• 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.
CIS 4004: Project Three Page 10 © Dr. Mark Llewellyn
CIS 4004: Project Three Page 11 © 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 12 © Dr. Mark Llewellyn
Project Three: Task 2
• 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.
CIS 4004: Project Three Page 13 © Dr. Mark Llewellyn
Project Three: Task 2
(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.
CIS 4004: Project Three Page 14 © Dr. Mark Llewellyn
Project Three
CIS 4004: Project Three Page 15 © Dr. Mark Llewellyn
Project Three
CIS 4004: Project Three Page 16 © Dr. Mark Llewellyn
What To Turn In
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
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).
CIS 4004: Project Three Page 17 © Dr. Mark Llewellyn
CIS 4004: Project Three Page 18 © Dr. Mark Llewellyn
CIS 4004: Project Three Page 19 © Dr. Mark Llewellyn
