Homework #5 --
Responsive Web Design Menus (with w3.css)
-
Remember to follow all the standard requirements.
-
This assignment will demonstrate:
- More Responsive Web design
- Menus using the w3.css stylesheet
-
You will modify your existing index.html page. Please note carefully
that you will not make a new page. You will use the page that you made in your previous
assignments.
-
Please note that when I refer to "my sample pages" or "my tag" in these assignment
instructions, I mean the pages at my demo site,
http://aardvarks.xyz. You should be able to right-click in my pages and view the html
source to see what I'm talking about.
-
You will also make some new pages for your student site. When you are done with the current
assignment, your student site will have all of these pages:
- Home (which is your index page)
- About Us
- Portfolio
- Media Kit
- Resources
- Contact Us
- Site Map
-
But don't make the new pages just yet! I recommend that you make all of the following
changes to your Index/Home page first. When you have your Index/Home page working
well based on the following requirements, then copy or save-as your index page to make all of the
new pages.
-
Make these changes in the <body> section of your index.html page:
-
After the <header> section, add some <div> tags with w3-bar and
w3-bar-block class attributes, similar to the sample code in the eHandout.
-
Also put in the appropriate w3-hide and w3-show class attributes to
make menus that respond to the width of the browser's display area.
-
At the top of the main container <div> tag, add your logo and/or banner if
you have them.
-
Under the logo and/or banner, add your main navigation area. In my sample pages,
the main navigation is contained in this <div> tag:
<div class="w3-container" id="mainMenuDiv">
-
Under the main navigation area, add a breadcrumb. My breadcrumb is in a <div>
tag that also has an <h2> heading in it.
-
Under the <div> tag that contains the breadcrumb and the <h2> heading,
add a <div> tag with class="w3-container w3-row" in it.
The content of this new <div> tag will be two additional, nested <div> tags, which you
should add:
-
A <div> tag with class="w3-container w3-half" in it, plus whatever content you want to
display in the left half of the page.
- Another <div> tag with class="w3-container w3-half" in it, plus whatever content you want to display in the right half of the page.
-
A <div> tag with class="w3-container w3-half" in it, plus whatever content you want to
display in the left half of the page.
-
After the <header> section, add some <div> tags with w3-bar and
w3-bar-block class attributes, similar to the sample code in the eHandout.
-
You can also put in more tags if you wish. Experiment with the w3.css classes
and see what you can do!
-
Validate your index.html page with the W3C's
Validator
page. I will also be validating your page, so this
validation will be part of your grade. Your page should
validate as an HTML5 page.
-
When your index/Home page is completely done and validated, then it is time
for you to make all of the other pages for your student site. As a reminder, you need to
make these pages:
- About Us
- Portfolio
- Media Kit
- Resources (Go ahead and replace your existing Resources page. But put the external links from the previous assignment, back into it!)
- Contact Us
- Site Map
Don't worry about putting meaningful content into your new pages just yet (except for the Resources page, which should have some absolute-link URLs in it from last week's assignment). But you should make these changes in each new page:-
Put a heading or a paragraph into each page, which self-identifies
the page.
- You will also need to update each page's breadcrumbs.
-
Upload your pages to your Freehostia site.
-
You can test your pages on the server by selecting the
"Student Sites" link on the class site and then
clicking your student number in the bulleted list.
You should change the width of your browser window by dragging one of the vertical borders back and forth, so you can make sure the "w3-half" sections (<div> tags) resize properly.