IMED 2315 - Web Page Design 2

Updated 6/9/2018 at 5:10pm

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.
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.