README

1. Introduction

This file has been created to assist web developers in creating pages using the templates provided. These templates are designed to be used on the CEE web server (depot) but nothing prevents them from running on any web server as they are simply html files with no special scripting.

2. Recommended Software

It is recommended that the developer use Macromedia Dreamweaver to edit the files but is not necessary. Two templates have been created for those using Dreamweaver. They are in the templates folder and should be recognized when you setup a site in Dreamweaver. (NOTE: site creation in Dreamweaver and template use is outside the scope of this Readme file and will not be addressed here).

3. Files

Several files and sub-folders have been created to makeup the web templates. Here is a breakdown of the files and what they do.

 

• html folder has the following:
  • index.html - main page should always be called index.html
  • landing.html - this is an example content page.
  • images folder
    • background-goldgrid.gif - background image for pages.
    • coop-students.jpg - right hand side placeholder image.
    • header-cee.gif - CEE header image
    • logo-gatech.gif - Main GT logo top-left of page
    • mason.gif - left hand side placeholder image
    • middle_image.jpg - Middle image in .gif format (for the web)
    • middle_image.png - .png file of middle image. this can be edited using Macromedia Fireworks to modify words or pictures and change the background color of the image.
  • styles folder
    • research.css - this has all the style information for the site.
  • docs folder
    • index.html (this file)
• templates folder has the following two dreamweaver templates.
• index.dwt - a dreamweaver template to create an index or starting page
• landing.dwt -a dreamweaver template to create content pages.
4. Horizontal Menu area

The top grey menu bar (above the three images) is an optional area. This can be used as primary navigation through the website, it can be changed per page or it can be removed all-together. It was placed in the template to give the website developer the flexibility to have a horizontal navigation area if desired.

5. Three images

The three images are placeholders. The developer can insert any number of images in this area. The height of all images should be the same. They are curently set at 153 pixels to match the CEE and campus website.

6. Breadcrumb

The grey bar below the images is where the breadrumbing goes (breadcrumbs are what take you back to where you started ala Hansel and Gretel). I highly recommend keeping this area. If you don't want to have it go all the way back to the Institute page at least leave a link back to the CEE website. This will allow your visitors to know where they are in the site and give them a way to get back to where they were.

7. Left Vertical Menu area

The left vertical menu area is driven completely by the style sheet. It utilizes a <div> tag with an id of nav-menu. To insert a menu area the code would look like this:

<div id="nav-menu">

To highlight the "Menu" area (as shown above in the left hand menu bar) you put a <h4> tag around the word Menu. An example would be:

<h4>Menu</h4>

To give you an idea of how this works here is the full code for the menu bar on the left:

<div id="nav-menu">
 <h4>Menu</h4>
 <p><a href="#">Home</a></p>
 <p><a href="#">Laboratory</a></p>
 <p><a href="#">Research</a></p>
 <p><a href="#">People</a></p>
 <p><a href="#">Publications</a></p>
 <p><a href="#">Workshops</a></p>
 <h4>Group News</h4>
 <p><a href="#">Item 1</a></p>
 <p><a href="#">Item 2</a></p>
 </div> 

This menu navigation area is completely optional. It is offered simply as another way to create navigation in the site.

8.  Right Vertical Menu area

The right vertical menu area is another <div> tag option. This option is called floatingmenu-right. It is used in the same way as the Left Vertical menu area described above.

9. Footer

A footer area allows for contact information. CEE footer information has been added but this can easily be modified to have content for the research area or faculty member. This area is formatted by the style sheet and uses the style footer-text