Description
• 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 pageCIS 4004: Project Five Page 6 © Dr. Mark Llewellyn• Copy the images folder inside your Project 4 folder into yourProject 5 folder. Include all of the images listed below in thisfolder.• There are fifteen images to download with the followingnames:Project Five: Task 1clamstrips.pngcoffee1.jpgcoffee2.jpgcoffee3.jpgespresso1.pnglighthouselogo.jpglighthouselogo1.jpgmarker.gifmuffin1.jpgocean.jpgoldmackinaclight.jpgsalad1.jpgtea1.jpgtea2.jpgtea3.jpgCIS 4004: Project Five Page 7 © Dr. Mark Llewellyn• Your primary task for Project Five is to include media queriesin the CSS that will modify the display of the all of the pageson your site for display with desktop, tablet, and smartphonedevices.• We’ll apply the same responsive design criteria to each of thepages in the web site. See (Aside-6) lecture notes for thegeneral discussion on what modifications are necessary on apage to enhance a responsive design.• We’ll configure three separate “views” for our web site. Thebasic styles that you’ve already been developing are for thedesktop version of the site. In addition, you’ll develop mediaqueries for users utilizing tablets and mobile phones.Project Five: Task 1CIS 4004: Project Five Page 8 © Dr. Mark Llewellyn• We’ll assume that any device with a viewport size greater than64em will be a desktop.• We’ll assume that any device with a viewport size between37.5em and 64em will be a tablet device.• We’ll assume that any device with a viewport size of 37.5emor less will be a mobile phone.• You’ll need to create media queries in your CSS for both ofthese cases (the desktop version is the default and does notrequire a media query, it is using straight CSS).Project Five: Task 1CIS 4004: Project Five Page 9 © Dr. Mark Llewellyn• For the tablet version of the web pages (max-width:64em) assume the following CSS properties:– Forset 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 thealternate text as shown in the screen shot on page 17 (as well as below):Project Five: Task 1Our CoffeesOur coffees are well-known throughout the region as bold and flavorful. We offermany different types of coffees, one of which is sure to satisfy your taste. Pricesstart at $2.00 per cup.Our TeasOur teas are hand-selected from around the world to bring you a wide variety ofpossibilities. We specialize in flavorful afternoon teas as well as a wideassortment of exotic teas. Stop in and try a cup! Prices start $2.00 per cup.Our SnacksWe 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 stripsand fish strips. The locals swear these are the best you’ll find anywhere. Pricesare seasonal, but always a real deal.CIS 4004: Project Five Page 12 © Dr. Mark LlewellynDesktop Versionmain pageCIS 4004: Project Five Page 13 © Dr. Mark LlewellynTablet Versionmain pageCIS 4004: Project Five Page 14 © Dr. Mark LlewellynPhone Versionmain pageCIS 4004: Project Five Page 15 © Dr. Mark LlewellynDesktop Versionmenu pageCIS 4004: Project Five Page 16 © Dr. Mark LlewellynTablet Versionmenu pageCIS 4004: Project Five Page 17 © Dr. Mark LlewellynPhone Versionmenu pageCIS 4004: Project Five Page 18 © Dr. Mark Llewellyn• The second task for this project is to rework the phone numberfor the Lighthouse Bistro so that on mobile devices the user cantap the phone number and place a call to the restaurant’s office.The phone number should display without the link when viewedin the desktop and tablet versions of the site.• The next two pages illustrates this change.Project Five: Task 2CIS 4004: Project Five Page 19 © Dr. Mark LlewellynNotice normal text forphone numberCIS 4004: Project Five Page 20 © Dr. Mark LlewellynProject Five A telephone hyperlink is configured using a telephonescheme: Begin the href value with tel: followed bythe phone number.For example:Voice 888-111-2222An SMS (short message service) scheme hyperlink isintended to send a text message can be configuredsimilarly: Begin the href value with sms: followed bythe phone number.For example: Text 888-111-2222CIS 4004: Project Five Page 21 © Dr. Mark LlewellynPlace all of the deliverables for this assignment into a folder namedProject5. The deliverables for this assignment are to be submittedvia WebCourses no later than 11:59pm Sunday November 4, 2018are:1. The two valid HTML5 documents containing the semanticallycorrect 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 thisproject. (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 stylesdefined as outlined in this document. (35 pts).5. A document containing a screen capture of the validation of thestylesheet (10 pts).What To Turn InCIS 4004: Project Five Page 22 © Dr. Mark LlewellynCIS 4004: Project Five Page 23 © Dr. Mark Llewellyn
