Description

5/5 - (4 votes)

• 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.
Project Five
CIS 4004: Project Five Page 3 © Dr. Mark Llewellyn
• 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.
Project Five
CIS 4004: Project Five Page 4 © Dr. Mark Llewellyn
Project Five
wrapper (

)
header
navigation main
footer
address
id
(

)
image
Main (index) page
CIS 4004: Project Five Page 5 © Dr. Mark Llewellyn
Project Five
wrapper (

)
header
navigation
main
footer
address
id
(

)

Menu page
CIS 4004: Project Five Page 6 © Dr. Mark Llewellyn
• 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:
Project Five: Task 1
clamstrips.png
coffee1.jpg
coffee2.jpg
coffee3.jpg
espresso1.png
lighthouselogo.jpg
lighthouselogo1.jpg
marker.gif
muffin1.jpg
ocean.jpg
oldmackinaclight.jpg
salad1.jpg
tea1.jpg
tea2.jpg
tea3.jpg
CIS 4004: Project Five Page 7 © Dr. Mark Llewellyn
• 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.
Project Five: Task 1
CIS 4004: Project Five Page 8 © Dr. Mark Llewellyn
• 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).
Project Five: Task 1
CIS 4004: Project Five Page 9 © Dr. Mark Llewellyn
• For the tablet version of the web pages (max-width:
64em) assume the following CSS properties:
– For set margin to 0.
– For the wrapper

set minimum width to 0, width to auto, and
box-shadow to none. (Eliminate the two column effect.)
– For the

selector, set left margin to 0 and display as a block
element (not a table-cell).
– For

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

elements within the

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.
Project Five: Task 1
CIS 4004: Project Five Page 10 © Dr. Mark Llewellyn
• For the mobile phone version of the web pages (max-width:
37.5em) assume the following CSS properties:
– For

selector set top padding to 1em.
– For the

selector, set top and bottom padding to 0.1em, left and right
padding to 1em, and font size to 90%.
– For

selector, set the font size to 1.5em.
– For navigation list items, use a descendant selector to configure

elements within the

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

within the

.
– For navigation hyperlinks, use a descendant selector to configure the elements
within the

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.
Project Five: Task 1
CIS 4004: Project Five Page 11 © Dr. Mark Llewellyn
– For

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):
Project Five: Task 1
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 12 © Dr. Mark Llewellyn
Desktop Version
main page
CIS 4004: Project Five Page 13 © Dr. Mark Llewellyn
Tablet Version
main page
CIS 4004: Project Five Page 14 © Dr. Mark Llewellyn
Phone Version
main page
CIS 4004: Project Five Page 15 © Dr. Mark Llewellyn
Desktop Version
menu page
CIS 4004: Project Five Page 16 © Dr. Mark Llewellyn
Tablet Version
menu page
CIS 4004: Project Five Page 17 © Dr. Mark Llewellyn
Phone Version
menu page
CIS 4004: Project Five Page 18 © Dr. Mark Llewellyn
• 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.
Project Five: Task 2
CIS 4004: Project Five Page 19 © Dr. Mark Llewellyn
Notice normal text for
phone number
CIS 4004: Project Five Page 20 © Dr. Mark Llewellyn
Project Five A telephone hyperlink is configured using a telephone
scheme: Begin the href value with tel: followed by
the phone number.
For example:
Voice 888-111-2222
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:
Text 888-111-2222
CIS 4004: Project Five Page 21 © Dr. Mark Llewellyn
Place all of the deliverables for this assignment into a folder named
Project5. The deliverables for this assignment are to be submitted
via WebCourses no later than 11:59pm Sunday November 4, 2018
are:
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).
What To Turn In
CIS 4004: Project Five Page 22 © Dr. Mark Llewellyn
CIS 4004: Project Five Page 23 © Dr. Mark Llewellyn