$29
Project Five Solution
Project Five
• This assignment has one primary objective:
(1) To adapt a responsive design to your webpages to automatically adjust the webpage to the type of device the user is employing.
CIS 4004: Project Five Page 2 © Dr. Mark Llewellyn
Project Five
• Begin this assignment with the two webpages that you created for Project Four along with the external style sheet that you created for that project.
• Project Four culminated with two webpages and one external style sheet with each page constructed according to the wireframes shown on the next two pages.
CIS 4004: Project Five Page 3 © Dr. Mark Llewellyn
Project Five
wrapper (<div>)
header
navigation main
address
id
(<div>)
footer
image
Main (index) page
CIS 4004: Project Five Page 4 © Dr. Mark Llewellyn
Project Five
wrapper (<div>)
header
main
navigation <table>
<table>
address
id
(<div>) <table>
footer
Menu page
CIS 4004: Project Five Page 5 © Dr. Mark Llewellyn
Project Five: Task 1
• Copy the images folder inside your Project 4 folder into your Project 5 folder. Include all of the images listed below in this folder.
• There are fifteen images to download with the following names:
clamstrips.png
coffee1.jpg ocean.jpg
coffee2.jpg oldmackinaclight.jpg
coffee3.jpg salad1.jpg
espresso1.png tea1.jpg
lighthouselogo.jpg tea2.jpg
lighthouselogo1.jpg tea3.jpg
marker.gif
muffin1.jpg
CIS 4004: Project Five Page 6 © Dr. Mark Llewellyn
Project Five: Task 1
• Your primary task for Project Five is to include media queries in the CSS that will modify the display of the all of the pages on your site for display with desktop, tablet, and smartphone devices.
• We’ll apply the same responsive design criteria to each of the pages in the web site. See (Aside-6) lecture notes for the general discussion on what modifications are necessary on a page to enhance a responsive design.
• We’ll configure three separate “views” for our web site. The basic styles that you’ve already been developing are for the desktop version of the site. In addition, you’ll develop media queries for users utilizing tablets and mobile phones.
CIS 4004: Project Five Page 7 © Dr. Mark Llewellyn
Project Five: Task 1
• We’ll assume that any device with a viewport size greater than 64em will be a desktop.
• We’ll assume that any device with a viewport size between 37.5em and 64em will be a tablet device.
• We’ll assume that any device with a viewport size of 37.5em or less will be a mobile phone.
• You’ll need to create media queries in your CSS for both of these cases (the desktop version is the default and does not require a media query, it is using straight CSS).
CIS 4004: Project Five Page 8 © Dr. Mark Llewellyn
Project Five: Task 1
• For the tablet version of the web pages (max-width: 64em) assume the following CSS properties:
– For <body> set margin to 0.
– For the wrapper <div> set minimum width to 0, width to auto, and box-shadow to none. (Eliminate the two column effect.)
– For the <main> selector, set left margin to 0 and display as a block element (not a table-cell).
– For <nav> selector, set display:inline, set width to auto, center text, and use 0.5em padding.
– For navigation list items, use a descendant selector to configure <li> elements within the <nav> to set inline display, 0.25em top and bottom padding, and 0.75em left and right padding.
– For the main image element set the bottom margin to 5px.
CIS 4004: Project Five Page 9 © Dr. Mark Llewellyn
Project Five: Task 1
• For the mobile phone version of the web pages (max-width:
37.5em) assume the following CSS properties:
–For <header> selector set top padding to 1em.
–For the <main> selector, set top and bottom padding to 0.1em, left and right padding to 1em, and font size to 90%.
–For <h1> selector, set the font size to 1.5em.
–For navigation list items, use a descendant selector to configure <li> elements within the <nav> to set block display, 0 margin, and a 1 pixel solid (#FFE4C4) bottom border. Also use a pseudo-element selector to set a similar top border on the first <li> within the <nav>.
–For navigation hyperlinks, use a descendant selector to configure the elements within the <nav> to set block display. (This will give the user a larger area to tap when selecting a hyperlink.)
–For the main image, do not display the image. Set background-image property to none and height to 0.
CIS 4004: Project Five Page 10 © Dr. Mark Llewellyn
Project Five: Task 1
–For <table> selector, do not display any tables. Replace the tables with the alternate text as shown in the screen shot on page 17 (as well as below):
Our Coffees
Our coffees are well-known throughout the region as bold and flavorful. We offer many different types of coffees, one of which is sure to satisfy your taste. Prices start at $2.00 per cup.
Our Teas
Our teas are hand-selected from around the world to bring you a wide variety of possibilities. We specialize in flavorful afternoon teas as well as a wide assortment of exotic teas. Stop in and try a cup! Prices start $2.00 per cup.
Our Snacks
We offer a wide variety of foods ranging from simple snacks to complete inners. Our specialties are organic salads and fresh seafood. Try our fried clam strips and fish strips. The locals swear these are the best you'll find anywhere. Prices are seasonal, but always a real deal.
CIS 4004: Project Five Page 11 © Dr. Mark Llewellyn
Desktop Version
main page
CIS 4004: Project Five Page 12 © Dr. Mark Llewellyn
Tablet Version
main page
CIS 4004: Project Five Page 13 © Dr. Mark Llewellyn
Phone Version
main page
CIS 4004: Project Five Page 14 © Dr. Mark Llewellyn
Desktop Version
menu page
CIS 4004: Project Five Page 15 © Dr. Mark Llewellyn
Tablet Version
menu page
CIS 4004: Project Five Page 16 © Dr. Mark Llewellyn
Phone Version
menu page
CIS 4004: Project Five Page 17 © Dr. Mark Llewellyn
Project Five: Task 2
• The second task for this project is to rework the phone number for the Lighthouse Bistro so that on mobile devices the user can tap the phone number and place a call to the restaurant’s office. The phone number should display without the link when viewed in the desktop and tablet versions of the site.
• The next two pages illustrates this change.
CIS 4004: Project Five Page 18 © Dr. Mark Llewellyn
Notice normal text for
phone number
CIS 4004: Project Five Page 19 © Dr. Mark Llewellyn
ProjectAtelephoneFivehyperlink is configured using a telephone scheme: Begin the href value with tel: followed by the phone number.
For example:
<a href=“tel:888-111-2222”>Voice 888-111-2222</a>
An SMS (short message service) scheme hyperlink is intended to send a text message can be configured similarly: Begin the href value with sms: followed by the phone number.
For example:
<a href=“sms:888-111-2222”> Text 888-111-2222</a>
CIS 4004: Project Five Page 20 © Dr. Mark Llewellyn
What To Turn In
Place all of the deliverables for this assignment into a folder named Project5.
1. The two valid HTML5 documents containing the semantically correct markup for the index.html and menu.html pages (40 pts – 20pts for each page).
2. A folder named images containing the fifteen images for this project. (5 pts)
3. A document containing screen captures for HTML5 validations (both passing!) (10 pts – 5pts 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 Five Page 21 © Dr. Mark Llewellyn
CIS 4004: Project Five Page 22 © Dr. Mark Llewellyn
CIS 4004: Project Five Page 23 © Dr. Mark Llewellyn
