Bay Area Training Officers Web Site
User’s Manual
BATO Table of Contents
11. Pages that have a component that required a programming script................................ 8
1. List of all web pages
The following is a list of all web pages grouped in three categories based on the conceptual design of the site. These categories are defined as first, second and third level pages.
|
Page name |
Description |
|||||
|
1. |
First Level Pages (Home Page) |
|
||||
|
|
1.1 |
|
Bay Area Training Officers |
Home page: BATO description, mission statement, officers and conference |
||
|
|
|
|
|
|
|
|
|
2. |
Second Level Pages |
|
||||
|
|
2.1 |
|
About Us |
BATO organization overview |
||
|
|
2.2 |
|
Directory |
List of names, phone numbers and addresses of BATO staff |
||
|
|
2.3 |
|
What's New |
Template for BATO latest news |
||
|
|
2.4 |
|
Conference |
Information on next conference to be held on 2002 |
||
|
|
2.5 |
|
Calendar |
Calendar of main BATO activities, events and meetings |
||
|
|
2.6 |
|
Contact Us |
E-mail form |
||
|
|
2.7 |
|
Links |
|
|
Links to related organizations |
|
|
|
|
|
|
|
|
|
3. |
Third Level Pages (From Conference Page) |
|||||
|
|
3.1 |
|
Class Descriptions |
Template for description of class contents and schedules |
||
|
|
3.2 |
|
Register |
|
HTML form and server reference |
|
|
|
3.3 |
|
Training Assessment |
Training assessment form to fill out, print and mail |
||
|
|
|
|
|
|
||
The next page shows the Conceptual Design of the site which is a formal representation of the web pages as a whole and it also serves as a reference to how the visitors would navigate through the site. Each box represents a web page and again they are grouped in three categories, or rows, based on the functionality and user interface of the site.
This is an illustration of where all the web pages are stored in the form of electronic files being “publish” the name of the root folder. The “_notes” and “templates” folders are used by the authoring software program for internal processes while developing the web pages and can be omitted at any time, but are recommended to keep for web site maintenance and future development.

Next is the illustration of the files inside the images folder that holds all the images used throughout the web site.
Alphabetical list of images in GIF format:

· Alphabetical list of images in JPG format:

|
1- bridge.psd |
Used to create the logo and the home page background |
|
2- bridge_back.psd |
home page background image |
|
3- header-home.psd |
home page header with the list of organizations in BATO |
|
4- logo.psd |
logo in the upper left hand corner of all second and third level pages |
|
5-side_nav.psd |
side navigation used to create the roll overs that appear on each page |
|
6-titles.psd |
titles for each page are generated from this document |
6. Scripts, related databases, and the location they are stored in
· There is only one script, and it is called "register.php3". It is in the main directory.
7. Text changes on one of the web pages:
· The first thing you need to do is download the page you want to update by either using FTP client software or just saving the web page from your web browser. In Internet Explorer select “Save As” command from the “File” menu of options, and select a name for the copy of the file. It is recommended that you keep the same name to make it easier to upload the revised version of the web page. If working in Netscape Navigator, select “Save Page As” command from the “File” menu of options.
· Once you have saved the file to your hard disk, open it in any HTML editor or even in any text editor program like “Simple Text” on a Mac, or “Notepad” in the Windows platform. All you will do is change the content of the page. You don’t need to know any HTML code or any other special programming language.
· In the file, you need to locate the text you are going to change without modifying any of the special HTML elements that are surrounded by the symbols “<” and “>”. In other words, leave what ever is enclosed in these symbols untouched, as if you modify them, you will get unpredictable results in your web-page layout.
· After you have modified the text, save your file and test it by double clicking on it or opening in your favorite web browser.
8. Picture changes to the site
There are three things you need to know in order to accomplish this task:
o Height and width of the picture in pixels.
o Name of the file
o Where in the web page the new picture will display
· Open the web page file as specified in the previous instructions and put the insertion point just after the text where you want the new picture to display. Again, you can’t modify any of the HTML elements already present in your file.
· Type “<img src=’images/name_of_file’ height=99 width=99>” replacing “images/name_of_file” with the actual path and name of your image or picture file. It is strongly recommended you keep the same path for the images for this site to make it easier to maintain. In other words, store your picture files inside the “images” folder.
· Save the file and upload both your web page file and picture file to the web server. Instructions on how to upload files to the server are defined in the following paragraphs.
9. How to upload revised pages to the web
· Using your FTP client software enter the following values for these settings:
o Host name: creatimation.net
o User name:put real username here
o Password: *********
o Host directory or folder: www/bato
· Please notice that this is just an example, as we do not have an official web server where to host the site. The values for user name and password have changed already.
· Once you establish a connection with the FTP server, you need to transfer your revised pages and images to the corresponding subfolders in the ftp server.
10. How to change the navigation bar
· Open the “side_nav.psd” in Image Ready. Notice that each page name has a color overlay filter available.
· click on the layer with the item you want to change
· choose the type tool, high light the text, type the new name
To change the color of the filter color overlay –
· click on the filter symbol next to the item name in the layers’ palette to access the color overlay effect filter
· double click on the icon and the color overlay color chooser will appear
· double click on the color box
· choose the new color (pay attention to the eye icons)
If you need to add items to the navigation bar you will need to lengthen the document to get more room for these additional items.
Be sure to put each new item on a separate layer, align them properly and space them evenly
. *These instructions are written for those familiar with Image Ready and/or Photoshop.*
11. Pages that have a component that required a programming script.
· Only the “Conference -> Registration” page has a script, and only the web-page text can be changed.
12. List of all the scripts and programs which were created for your site.
Included is a brief description of what each script does.
· The script "register.php3" is written using PHP. Its purpose is to format the registration page for printing to be sent in to BATO registration people. You will need to edit this file to change it to the right address and the right price at the bottom of the image. Go ahead and open it up in NotePad (PC) or SimpleText (Mac) and edit that.