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.
- Page One: (index.html) Create a page of content for each area using all the new tags listed in Exercise 8. Make sure you are using a 2 column format (aside & main tags). Write your content in "Natural Flow" or the order it should be read. Do Not add CSS styles to this page. Be sure to use at least one placed image. A background image would be good as well
- Page Two: Using the same content as your index page - add your own styling to the CSS Document Styles (in the head of the document). Experiment adjusting the padding, margin and borders using fixed amounts. Use the aside and main tags to create two side by side columns.
- Page Three: Use the same content (and styles) from your 2nd page. Change the widths to using percentages instead of fixed pixel amounts. Add a max-width style to the wrapper.
- Page Four: Use the same content (and styles) from your 3rd page. Add Media Styles in your CSS to make the page Responsive
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.