$35
Project Two Solution
Project Two
• This assignment has three main objectives:
(1) To give you some practice altering an existing webpage.
(2) To apply CSS to alter the presentation of a webpage.
(4) To begin to work with color schemes for webpages.
CIS 4004: Project Two Page 2 © Dr. Mark Llewellyn
Project Two
• Begin this assignment with the two webpages that you created for Project One. Project One created the main (index) page and a menu page for the Lighthouse Bistro web site.
• The wireframe for each of the two pages you developed in Project One is shown below (note the slight modification for the contact id):
header
navigation
content (main)
contact id (div)
footer
CIS 4004: Project Two Page 3 © Dr. Mark Llewellyn
Project Two: Task 1
• Copy the index.html and menu.html files from your Project One folder into a new folder named Project Two.
• As your project becomes more sophisticated, it will be a good idea to begin organizing the files of the project now. So put your markup and CSS is separate folders as shown below.
Project Two folder
HTML folder CSS folder Images folder JavaScript folder
index.html menu.html bistro.css
CIS 4004: Project Two Page 4 © Dr. Mark Llewellyn
Project Two: Task 1
• Your first task for Project Two is to create a valid external style sheet, named bistro.css.
• Code the CSS to the following specifications:
– Select <body> elements to have background color #00BFFF, text color #221811, and font-family Verdana.
– Select <h1> elements to have text color #FFE4C4 and a line height of 200%.
– Select <h3> elements to have text color #FFE4C4.
– Select <dt> elements to have text color #FFE4C4 and <dd> elements to have color #221811.
CIS 4004: Project Two Page 5 © Dr. Mark Llewellyn
Project Two: Task 1
• CSS specifications (continued):
– Define <footer> elements to have background color #191970, text color #FFE4C4, font-size = small, font-style = italic, and text-align = center.
– Define an identifier named address that specifies text color #191970 with font-size 13pt, and font-family calibri.
– Select <header> elements to have background color #191970 and align the text in the center.
– Select <li> elements to have color #FFE4C4.
– Target <strong> elements inside <u> elements inside <p> elements to have color #A52A2A, font-family Calibri, and a font size of 1.4em.
– Target <u> elements inside <p> elements to have color #A52A2A.
• Adopt a good organized strategy for your CSS files (we’ll discuss this in class).
CIS 4004: Project Two Page 6 © Dr. Mark Llewellyn
Project Two: Task 2
• The second task for this project is to modify the index.html markup utilize the CSS found in the bistro.css stylesheet.
• Within the markup in index.html do the following:
– If you do not already have a <div> and phone number, add one now address.
element that contains the address and assign to it the id named
• After making these changes your main page should look like the one shown on the next slide.
Our color palette for this website is:
#00BFFF - medium blue - used for main page background
#191970 - dark blue - used for banner and footer backgrounds and some text on main background #221811 - very dark gray/black - used primarily for text
#A52A2A - reddish orange - used for headers for <dl> on menu page #FFE4C4 - sand - used for text in headers and lists
Add the lines with the color designations above to a comment near the top of your CSS file.
CIS 4004: Project Two Page 7 © Dr. Mark Llewellyn
Project Two
CIS 4004: Project Two Page 8 © Dr. Mark LlewellynProject Two: Task 3
• The third task in Project Two is to apply the bistro.css file to the menu.html page.
• Do this in the same manner as which you modified the index.html page.
• Note: if you did not use description lists for the menu items in the first project, please update your markup to use description lists in this project.
• After applying the stylesheet to this page, your page should look like the one shown on the next slide.
• Please note that I’ve placed a new menu.txt file on WebCourses which contains the updated text for the menu page.
CIS 4004: Project Two Page 9 © Dr. Mark Llewellyn
Project Two: Task 3
CIS 4004: Project Two Page 10 © Dr. Mark Llewellyn
Project Two: Task 3
Close-up view
of menu page
CIS 4004: Project Two Page 11 © Dr. Mark Llewellyn
What To Turn In
The deliverables for this assignment are to be submitted via WebCourses
1. 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 document containing screen captures for both HTML5 validations (both passing!) (10 pts – 5 pts for each valid page).
3. A valid CSS stylesheet named bistro.css, with styles defined as outlined in this document. (35 pts).
4. A document containing a screen capture of the validation of the stylesheet (5 pts).
5. A screen shot of a browser rendering of the home page and the menu page. (10 pts – 5 pts for each screen shot).
CIS 4004: Project Two Page 12 © Dr. Mark Llewellyn
CIS 4004: Project Two Page 13 © Dr. Mark Llewellyn
CIS 4004: Project Two Page 14 © Dr. Mark Llewellyn
