Project Five Solution

$35.00 $30.80

Description

Project Five

 

  • This assignment has one primary objective:

 

 

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

 

 

 

 

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.

 

 

 

 

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>

 

 

 

 

 

 

 

 

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 htmland menu.html pages (40 pts – 20pts for each page).

 

  1. A folder named imagescontaining the fifteen images for this project. (5 pts)
  2. A document containing screen captures for HTML5 validations (both passing!) (10 pts – 5pts 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 Five Page 21 © Dr. Mark Llewellyn

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CIS 4004: Project Five Page 23 © Dr. Mark Llewellyn