Project Three Solution

$35.00 $30.80

Description

Project Three

 

  • 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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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 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 cssstylesheet.

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Three Page 8 © Dr. Mark Llewellyn

 

Project Three: Task 2

 

  • Create a folder named imagesinside 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 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 htmlpage 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 htmlmarkup 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).

 

  1. A folder named imagescontaining the eight images for this project. (5 pts)
  2. A document containing screen captures for HTML5 validations (both passing!) (10 pts – 5 pts for each valid page).

 

  1. A valid CSS stylesheet named css, with styles defined as outlined in this document. (35 pts).
  2. 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