Exercise 8B: Fixed to Flexible Page Layout. Navigation using Unordered Lists
This exercise is a continuation of Exercise 8A. In this Exercise we will use newer HTML Elements introduced in Exercise 8A including the aside and main tags for a 2 column format, then use CSS styles to make the page adjust from fixed to flexible. We will also experiment with navigation using lists.
Read in Text Book: Chapter 16 and follow along in the Demos for Exercise 8B. Be sure to experiment.
By Due Date:
Create a minimum of 5 pages. All pages have the same content and tags used. Use the new tags covered in 8A. Some of the activity is similar. Start with your Natural Flow page which has NO CSS added. Use the aside and main tags to create a two column layout. You will be working on the CSS for pages 2-6.
Save into your folder - Ex8B.
- Page One: (index.html) Create a page of content for each area using all the new tags listed in exercise 8A. Write your content in "Natural Flow" or the order it should be read. Do Not add CSS styles to this page. Be sure to add at least one image. Use the new tags we covered in Exercise 8A.
- 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. Use the aside and main tags to create a two column layout. Use an overall div with an ID of "wrapper". Add CSS styles to give the wrapper a set width. Somewhere between 800px and 960px is a good amount.
- Page Three: Use the same content (and styles) from your 2nd page. Change padding & margin to percentages. Set your "wrapper" to a width of between 98% - 100% . Use percentages for the widths on your Aside and Main areas.
- Page Four: Use the same content (and styles) from your 3rd page. Keep the percentages that you created for your wrapper, aside and main areas. Add a max-width: 960px; to the wrapper.
- Page Five: Use the same content (and styles) from your 4th page. Work on navigation using an unordered list.
- Page Six (Optional): Use the same content (and styles) from your 5th page. Use the same content from your 5th page. Adjust as needed. Try adding navigation in the aside area.
Folder Name: Ex8B
Opening Page Name: index.html
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 together inside the wrapper. Use a calculator if needed.
- Example for Flexible pages (for the wrapper): width: 98%; padding: 2%;
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.
- Example for a page that is flexible to a certain width and then becomes fixed so the page does not expand beyond a comfortable viewing area. (for the wrapper): width: 98%; padding: 2%; max-width: 960px;
CSS: Navigation Styles Using an Unordered List
Using your existing navigation content from your Exercise 8B pages, add an unordered list, with each link being a list item.
EXAMPLE:
<nav>
<ul>
<li> <a href="index.html"> HOME </a> </li>
<li> <a href="page2.html"> Fixed Page </a> </li>
<li> <a href="page3.html"> Flexible </a> </li>
<li> <a href="page4.html"> Max-Width </a> </li>
<li> <a href="page5.html"> Navigation </a> </li>
</ul>
</nav>
Review the Demo pages for CSS style use.