Also, 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://spacestuff.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(But not yet! Wait till later in this assignment.)
for your student site. When you are done with the current
assignment, your student site will have these suggested 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, and VALIDATED, 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:
In your <header> tag, add a logo and/or banner. If you don't have a logo or banner image yet, and you probably don't, this is a good time to find
or create a logo and/or banner image.
Wrap your logo and/or banner image(s) in an <a> tag which links to your index page.
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-bar w3-grey" id="navContent">
Please NOTE that your main navigation area will probably be a <div> tag with a w3-bar or
w3-bar-block class attribute, similar to the sample code in the eHandout.
Add the navigation items to your main navigation area. Each navigation item will probably be an <a> tag
which has a class attribute with the value(s) "w3-bar-item w3-button w3-mobile" or something very similar.
When you are done with this part of the assignment, your Index Page will
have menu items for at least these pages: (You may add other pages, as they fit
with your site's topic.)
Home
About Us
Resources
Contact Us
Site Map
You can override the default light-grey "hover" color of the w3-button class, with
one of the "w3-hover-" color classes, such as w3-hover-indigo, etc.
Under the main navigation area, add a breadcrumb container. (My breadcrumb is in a <div>
tag that also has an <h2> heading in it. Yours might not have a heading tag.)
Then add the appropriate breadcrumbs to this container.
Feel free to experiment with the w3.css classes
and see what you can do!
You are not finished with this assignment yet, but now it is important for you to
validate your index.html page with the W3C's
Validator
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.
CAUTION: When you save your new pages, DO NOT USE SPACES IN THE
FILE NAMES.
As a reminder, here is a list of the suggested pages that you will make:
About Us (suggested file name: aboutus.html)
Portfolio
Media Kit (suggested file name: mediakit.html)
Resources (If you want to, go ahead and replace your existing Resources page. Or add the navigation bar
to your current Resources page. It is up to you. Just make sure that whatever Resources page you end up
with, has the
external links from the previous assignment in it!)
Contact Us (suggested file name: contactus.html)
Site Map (suggested file name: sitemap.html)
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:
Update each page's <title> tag.
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 and the navigation bar resize and stack properly.