Fixed Header

Fixed headers are nice because they keep your banner, site name, and maybe a menu in sight at all times. That will prevent the user from forgetting where they are, why they are there, and make it easy for them to navigate your site. This could be done using HTML frames, but lacks the sophistication that CSS can provide. However, this is a difficult proposition for some browsers. Especially the world dominating Internet Explorer. For Internet Explorer to properly read and display the CSS to create the fixed header, the browser needed that work-around we discussed on the last assignment. First, we loaded the CSS for the entire page. Then we loaded a "fixed" CSS page specifically for Internet Explorer. This is enough to make page display properly across IE and Mozilla browsers. Since this is a CSS experiment, let's look at the CSS for this project.

CSS file:

body {
   margin: 0px;
   padding: 150px 0 60px 0;
   width: 601px;
}

IE fixed CSS file

body {
   height: 100%;
   overflow: hidden;
}
div#content {
   height: 100%;
   overflow: auto;
}

In the top CSS file, the important parts in the body section were the margin and padding lines. The margin tells the browser that the page should be flush against the top and left sides. The padding line shows where the text should start or in this case, 150 pixels below the top. This allows the banner to be displayed and not rolled over when the page is scrolled down. This code would work for any browser save older versions of Internet Explorer. The fixed CSS file loads up a couple of new tags for Internet Explorer to use which allows the banner to stay put. Thanks to www.tagsoup.com for the help on this one.

Iframe and Isew and I... Wait, No, I don't!!

Inline frames are pretty easy stuff and can add a small flair to your page. The code below represents an easy inline frame that displays the contents of myframedpage.htm. The rest of the attributes let you allow for scrolling, margins, borders, and alignment. iframe, src=, height and width are pretty important parts of the tag and shouldn't be forgotten when adding this to your code.

<iframe
   name="iffy"
   align="middle" 
   src="myframedpage.htm" 
   frameborder="1" 
   marginheight="3" 
   marginwidth="3"
   scrolling="auto" 
   height="150px" 
   width="300px">
</iframe>

Be sure to look at the inline frame example on the fourth assignment for a good example. While they are useful in some instances, a lengthy page within an inline frame can be painful to your users.

Forms and email

Forms are a way for you to have your users interact with you. You can post a form to conduct a survey or to get feedback on your sites design or content. The form below is straight from the assignment and contains a few items that I'll point out within the code.

Now here is the code that gives you that form. You'll notice that the form is started by using the form tag and will close using a /form tag later on. In the form tag you can see that we've set the action to send the email to youremail@cityu.edu. This can be changed to any email address and when the user hits the Send Responses button below, their input will flow to your email box. The ?subject= lets you specify the response in case you have many of these forms running and you need an easy way to sort the mail.

<h4>Form with Email Submission</h4>
<form name="myform" method="post" 
      action="mailto:youremail@cityu.edu?subject=
      Response from CS544 Website-Assignment 4">
   <center>

We've created a table to make the layout of the form easy to read. The first input is a text box and takes any text.

<table>
      <td width="40%" align="center">			
         Your First Name<br />
         <input type="text" name="usrnam"><br />
      </td>
      <td width="50px">
      </td>

Here we use a list box to find the course of study

      <td width="40%" align="center">
         Your Course of Study<br />	
         <select name="usremph" size="2">
            <option value="TechMgmt">Technology Management</option>
            <option value="WebDev">Web Development</option>
            <option value="WebProg">Web Programming</option>
            <option value="IndStud">Individual Study</option>
         </select>
      </td>
   </table>

For this example, a radio button option was used to get a single answer

<br />Are you having fun in this course?<br />
   <label>
      <input type="radio" name="usrfun" value="yes">Yes
   </label>
   <label>
      <input type="radio" name="usrfun" value="no">No
   </label>
   <label>
      <input type="radio" name="usrfun" value="maybe">Maybe
   </label>
   <label>
      <input type="radio" name="usrfun" value="clueless">Undecided
   </label>
   <br /><br />

And finally, a textarea is used to collect comments from the user

Any Comments?<br />
   <textarea name="usrcomm" cols="50" rows=""></textarea>
   <br /><br />
   <input name="usrdun" type="submit" value="Send Responses">
   </center>
</form>

The Submit Responses button brings up the rear just before the closing /form tag. That was short and easy.

Javascript Navigation

Looks like an awful lot of HTML for a Javascript menu, but the HTML contains all of the links for your menu. By using different names of the id tags, you can create the submenu for the top menu item. Very simple menu system that looks good too. If I haven't mentioned it yet, don't use the code as displayed. In most cases throughout this site, the code as displayed has minor modifications for ease of viewing. The files listed on the right side contain the actual code and are better suited for use.

<table>
   <td>
      <h3><a href="page1.html" 
                          onClick="return toggleMenu('menu1')">
                          Assignment One</a></h3>
      <span class="menu" id="menu1">
         <a href="index.htm">Assignment One</a><br />
         <a href="index.htm#acura">Acura</a><br />
         <a href="index.htm#miniusa">Mini Cars</a><br />
         <a href="index.htm#msnbc">MSNBC</a><br />
         <a href="index.htm#csszengarden">CSS Zen Garden</a><br />
         <a href="index.htm#amazon">Amazon</a><br />
         <a href="index.htm#cs538">CS 538 Website Usability</a>
      </span>
	  
      <h3><a href="page2.html" 
                          onClick="return toggleMenu('menu2')">
                          Assignment Two</a></h3>
      <span class="menu" id="menu2">
         <a href="index.htm">Assignment Two</a><br />
         <a href="www.acura.com">Acura</a><br />
         <a href="www.miniusa.com">Mini Cars</a><br />
         <a href="www.msnbc.com">MSNBC</a><br />
         <a href="www.csszengarden.com">CSS Zen Garden</a><br />
         <a href="www.amazon.com">Amazon</a><br />
         <a href="cs538.twistedpuppy.net">CS 538 Website Usability</a>
      </span>
   </td>
   
   <td>
      <h3><a href="page3.html" 
                          onClick="return toggleMenu('menu3')">
                          Assignment Three</a></h3>
         <span class="menu" id="menu3">
            <a href="index.htm">Assignment Three</a>
         </span>
			
      <h3><a href="page4.html" 
                          onClick="return toggleMenu('menu4')">
                          Assignment Four</a></h3>
           <span class="menu" id="menu4">
              <a href="index.htm">Assignment Four Menu</a><br />
              <a href="page1.htm">Fixed Header Demo</a><br />
              <a href="page2.htm">iFframe Demo</a><br />
              <a href="page3.htm">Form and Email Demo</a><br />
              <a href="page4.htm">Javascript Navigation Demo</a>
         </span>	
      </td>
   </table>

And then here is the Javascript that runs the show. You may notice that it uses block and none to toggle the display property for the menus. Snazzy, huh?

<script type="text/javascript" language="Javascript">
<!-- Hide script from older browsers

   function toggleMenu(currMenu) {
      if (document.getElementById) {
         thisMenu = document.getElementById(currMenu).style
         if (thisMenu.display == "block") {
            thisMenu.display = "none"
            }
           else {
               thisMenu.display = "block"
            }
            return false
         }
         else {
            return true
         }
   }
   
// End hiding script -->
</script>

CSS for links, part II

This is a familiar topic. This time we want to look at how we can differentiate links by colors. This is predominately done using classes through CSS. It can be done in HTML, but using CSS will allow you to have simplier and neater code. We start out with a very simple horizontal menu that we want to color the menu items individually, and give them differnt colors when hovered over and chosen.

<div id="hdrmenu">
   <a class="aone" href="../four/page1.htm"> Fixed Header</a>
   |
   <a class="atwo" href="../four/page2.htm"> iFrame </a>
   |
   <a class="athree" href="../four/page3.htm"> Form and Email</a>
   |
   <a class="afour" href="../four/page4.htm"> Javascript Navigation</a>
</div>

Not too hard. Then we throw in some CSS to liven things up. Notice the menu selections are inside of div tags with the id of hdrmenu. This is the grouping that I used to manage the CSS for the links. By keeping the link modifications within the hdrmenu, they won't affect the rest of the page. You can see that the main hdrmenu CSS sets the height, location, and alignment. The subsequent modifications are listed as #hdrmenu a.aone, #hdrmenu a.atwo, #hdrmenu a.athree, and #hdrmenu a.afour. These create the classes so that we can individually identify and modify a link within the hdrmenu section of the page. If you look at the code above, you'll notice that each link is labeled with a class (a class="aone", a class="atwo", a class="athree", a class="afour"). Thus each link will have a different color for active and also for hover.

#hdrmenu {
   position: fixed;
   width: 600px;
   top: 150px;
   height: 25px;
   background-color: #CC0000;
   text-align: center;
   font-weight: bold;
}
#hdrmenu a.aone {
   color: #0000FF;
   text-decoration: none;
}
#hdrmenu a.aone:hover {
   color: #00FF00;
}
#hdrmenu a.atwo {
   color: #000000;
   text-decoration: none;
}
#hdrmenu a.atwo:hover {
   color: #00FFFF;
}
#hdrmenu a.athree {
   color: #FFFFFF;
   text-decoration: none;
}
#hdrmenu a.athree:hover {
   color: #33FF00;
}
#hdrmenu a.afour {
   color: #FFFF00;
   text-decoration: none;
}
#hdrmenu a.afour:hover {
   color:#0000FF;
}

That makes for some fun colors, huh? The beauty of this is you may want different color links to specify different types of links, such as liks on your site, links at favorite sites, or links at other websites. Take a look at the right side menu on these pages for an example.

The Assignment

Five items for this assignment

• Use CSS to create a fixed header on the page (make sure there is enough content that one needs to scroll up and down so we can be sure your header does indeed stay on the screen)
• Incorporate an Iframe into your page
• Include an online form that leverages JavaScript in some way. Have the form action use a mailto: to submit the form to your CityU email address.
• Include a Javascript navigation element of your choosing
• Create two or more link styles on your page -- ie the links look different in color or style for the same status such as "active"