MAT 125: Web Design 1: Fundamentals : EXERCISES

Exercise 10: Flexible to Responsive Page Layout.


In this Exercise continue using the newer HTML Elements introduced in Exercise 8, use CSS styles to make the page adjust from fixed to flexible to responsive.


Read in Text Book: Chapter 17 and follow along in the Demos for Exercise 10. Be sure to experiment.

By Due Date:

Create a minimum of 4 pages. All pages will use the same content. Link all pages together.
Save into your folder - Ex10.

Folder Name: Ex10

Opening Page Name: index.html

Number of Pages: 4 or more

All Pages Must Link Together.

Post your questions online or email them to me


CSS Styles for Page Layout

  • EXAMPLE style for the wrapper: width: 960px; padding: 10px;

Use to set a specific width to the wrapper, aside & main areas. Experiment to make sure the aside and main areas will fit inside the wrapper. Use a calculator if needed.


CSS: Flexible & Max-Width Page

  • Example for Flexible & Max Width page (for the wrapper): width: 98%; padding: 2%;max-width: 960px;
  • Also use percentages for the aside & main areas for width, padding and margin

Use percentages to set the widths to make your page adjust or be flexible to fill the browser window. Try on the wrapper, aside and main areas. Be sure to check to see that the aside and main fit inside the wrapper. Add the fixed-width so the page does not expand beyond a comfortable viewing area.


















CSS: Responsive Page Using Media Styles

Using your existing CSS, add Media Styles at the bottom of your CSS Document styles

EXAMPLE (add in CSS and use your own content):

/* media styles */
@media screen and (max-width: 768px) {

header h1 {padding: 1.5%; }

aside {text-align: left; width: 96%; float: left; padding:1% 2% 0 2%;}

main {text-align: left; width: 96%;
float: left; padding: 0 2%;}

main img { margin: 0 1% 1% 1%;}

footer {text-align: left; padding: 1% 2%; font-size: .9em;}

nav {background-color: #c1a769; border-bottom: none; }

nav ul { width:100%; padding: 0 1%; display: inline-block;}

nav li { width:48%; border: 1px solid #5e2806; padding: 0.5% 0; float: left;}

nav a {text-decoration: underline; border: none; line-height: 135%; }

nav li a:hover {text-decoration: underline; border: none;background-color: #c1a769; }

}

Review the Demo pages for CSS style use.


Exercise Ten Grading Rubric
Item/Points 1-2 3-4 5-6
Coding Some Most All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Basic Requirements Above & Beyond
Creativity Minimal Some Above & Beyond

Evaluation

This exercise is worth 30 points.

Coding (6)
Functionality (6)
Meeting project requirements (6)
Your effort (6)
Creativity (6)