NEA Higher Education Template Instructions

These instructions will help you modify the HTML pages provided in the localweb.zip file.  These instructions are not intended to teach HTML, there are many tutorials on the Internet to do that.  You will be able to modify each page using any HTML editor, though these instructions are based on using Netscape Composer as the HTML editor. 

Software Needed from the Start

If you do not have Netscape Communicator version 4.7x, it can be downloaded from http://wp.netscape.com/download/archive/client_archive47x.html. This is the Netscape browser version that provides Netscape Composer.   You will also need the latest version of Macromedia Flash player.  It can be downloaded from http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&P5_Language=English

The localweb zip file contains two versions of the Local Association web site templates. The file path localweb/index.html uses the left side of the page for navigation.  The file path localweb/top-page-nav/index.html uses a customizable XML file and a tabular navigation in the header area of the page.

Understanding the NEA Higher Ed Templates

Local Association – Top Navigation
These pages use a Macromedia Flash object and an XML file to define the navigation.  The navigation is located consistently in the top area of the page.  Once you decide the navigation labels you want, modified the XML file. The Flash object should not be modified. Do not change the name of the XML file either.  The XML file - Menu_tabs.xml – should be modified to specify the tab text labels and URLs. 

Customize the <NAV> tag parameters for your tabs
<NAV main_onColor="#000000" main_offColor="#666666" sub_onColor="#000000" sub_offColor="#ffffff" navWidth="610" x_padding="20" y_padding="10">

Changing font colors:
Change the Main and sub tab text colors using the following four parameters: main_onColor declares the color of main tab items on rollOver; main_offColor declares the color of main tab items on rollOut; sub_onColor and sub_offColor do the same for the sub tab items. To change these colors, replace the hexdecimal values with your own.

Setting the interface width:
Adjust the overall interface width using the navWidth parameter. Simply replace the pixel value.

Setting the tab padding:
The tabs will expand to fit the text you enter for each item. Adjust both horizontal and vertical padding by using the x_padding and y_padding attributes. Simply replace the pixel values given with your own.

Enter and customize your main tab data.
Alter the parameters within the <MAIN></MAIN> tags to customize these items. You can add and remove these tags to create as many main options as you need.

To customize a main tab item:
Locate the first <MAIN> tag. It should look like  <MAIN text="Home" URL="../top-page-nav/index.html">  </MAIN>
Put the text you’d like displayed in the text parameter.

Main menu items can link to a URL instead of having sub tab options. To link main menu items to a URL, remove any sub tab options contained inside the main tag. Then, add URL and target parameters. It should look similar to the example below.
<MAIN text=“Modern Homes for sale” URL=“http://www.emodernhomes.com” target=“_blank”>

Enter and customize your sub tab data
Sub tab items are similar to the main tab items. They consist of <SUB></SUB> tags, and have the following parameters: text, URL, target. You can add and remove these tags to create as many sub tab options as you need.

To customize sub tab items:
You can add multiple sub tab items under each  main tab item. Simply copy a set of <SUB></SUB> tags and paste this new sub tab item in the existing sub tab item list. Make sure that all of your sub option tags are contained within their parent <MAIN></MAIN> tags.

Following the same procedure you used to customize the main tab items, change the text of each sub tab option as well as its corresponding URL address and target location. If you’re not sure of the target, leave it “_blank”. It should look similar to this example: <SUB text="President's Message" URL="news-pres.html"></SUB>

Make sure to change the affiliations and campus link tabs below in your XML file.
<MAIN text="Affiliations">
<SUB text="Local Associations" URL="http://www.yoururl.org"target="_blank"></SUB>
<SUB text="State Affiliate" URL=http://www.nea.org/affiliates.html target="_blank"></SUB>
<SUB text="NEA Higher Ed Web Site" URL="http://www.nea.org/he" target="_blank"></SUB>
</MAIN>

<MAIN text="Campus Link" URL="http://www.yourcollegeurl.edu" target="_blank">

Content Changes
Your content can easily be placed in the existing html pages.   Open the page you want to change in the Netscape Composer.  Identify the text you want to change.  Cut and paste or retype the content.  Save the file using the same name as the URL element in the XML file.

You must change the E-mail link on info graphic.  Look for this tag and replace the text “youremailaddress” (without quotes) to your E-mail address, <a href="mailto:youremailaddress"><img src="images/info.gif" alt="Info" border="0" height="18" width="59" align="RIGHT"></a>.

Only one graphic needs to be changed – name.gif.  It’s the name of your local association.  If you modify that graphic on your own, keep it the same size and color.  The Adobe psd file is provided.  Or you can contact the NEA Higher Ed webmaster to create the name graphic for you.

In the Netscape Communicator browser, click on File, then click on Open Page. In the dialog window, click on Choose File.  Browse to the localweb folder and select the index.html file for the left-navigation home page or browse to the top-page-nav folder and select that index.html file. 

Now that the home page is displayed in the Netscape browser, click on File, and then click on Edit Page.  The page should look like these screen shots:

Changing Content
You are now ready to edit the pages.   Highlight the text you want to change, cut and paste or retype the content.  Go slow at first and make sure you only highlight the text.  Netscape Composer is quirky here.  Try not to delete yellow arrow-like icons, unless you really want to.  Use the right mouse click often.  It is context sensitive and will be extremely helpful.  

Changing Links
Using the localweb/index.html page in this example, highlight the news graphic, right mouse click and select image/link properties to see the follow dialog window:

Click on the Link tab, then click on Choose file or Remove link to modify the link.

Working with the Cascading Style Sheet
Within the <head></head> tag is a link to the external style sheet.  Look for this tag:
<link rel="stylesheet" href="sytelsheet1.css" type="text/css">.  In Netscape Composer, highlight the first yellow arrow-like icon preceding the text “Higher Ed Local Web Page” and right mouse click.  Select HTML Tag properties to see what looks like this:  

It shows the beginning html tag for setting the text style to heading.  View the html source and you’ll see this code: <span class="heading">Higher Ed Local Web Page</span>.  Note there are several other styles used on this page.  Most of the text is surrounded by the <span class="font12pix"></span> tag. 

Saving the file
Double check the preference settings in Netscape before you save your files.  Click on Edit, and then click on Preferences to open a dialog window that looks like this:

Select Composer, then Publishing and make sure the check boxes for maintain links and keep images with page are not checked.  You already have an image folder were all of the images are stored.  That way, there will not be duplicate images, and Netscape Composer will not change your pages links to the images folder.

Now it’s safe to save the file.  Just keep the same file names used by the links. For example, if your link tag looks like this <A HREF="officers.html"> Officers and Leaders</A> , then the name of the file to be saves should be officers.html.