SRJC Technology Academy
Client Manual

File written by Adobe Photoshop® 5.0

Prepared by:	Reno LaGrande, Project Manager Antonio A. Venegas, Designer Ellena Baney, Content Developer John Blyth, Programmer

Prepared for:	Scott Ahrens, Director of the SRJC Technology Academy

http://webdev.santarosa.edu:8080/projects/technology-academy/

1. Location of the Website

Currently, the website may accessed at:

http://webdev.santarosa.edu:8080/projects/technology-academy/

Contact Mark Linford for the final website URL, username, and password. Mark is the Internet Services Specialist at the SRJC and can be reached at: mlinford@santarosa.edu.

2. How Does a Visitor Navigate the Website?

Open the file index.shtml with a browser such as Internet Explorer.

3. Where are the Web Pages Stored?

On the SRJC webdev server in a folder named:
/home/CWIS/technology-academy

4. List of Pages Included in the Website

The following folders and files are included in the website:

	cgi-bin
	forms
	pdf Refer to the next section for images.

5. Where are the Images Stored?

In a folder named technology-academy/images and consist of the following:

6. List of Original Artwork

This artwork was created in Freehand and Photoshop 5.0:

1.    The Logo was created in Freehand 7.0

(T.A. logo 6.fh.eps)

2.    The homepage collage was created in Freehand 7.0

(T.A. collage.fh.eps)

3.    The 2nd level and 3rd level images were created in Photoshop 5.0

Graphical Interface

The Technology Academy website was created in Dreamweaver. The navigation for the site are rollover and pop-down navigation menus on the left side of the pages. There are text links for the second level pages along the bottom-center of the Technology Academy section of each page. The third level text links are located at the top-right of the Technology Academy section of each page. This is the area just below the SRJC search menu.

The original images are dark blue background (RGB 52,68,99) with light blue (RGB 171, 196, 206) text (Arial 12). The rollover images are the reverse light blue background (RGB 171, 196, 206), and dark blue (RGB 52,68,99) text (Arial 12). The images are 144 pixels wide and 23 pixels in height. All rollover navigation was created in Photoshop.

The pop-down menus are the opposite. The original buttons are light blue background (RGB 171, 196, 206) and dark blue (RGB 52,68,99) text (Arial 12). The rollover buttons are dark blue background (RGB 52,68,99) with light blue (RGB 171, 196, 206) text (Arial 12). The pop-down menus were created in Dreamweaver.

Text specifications

The body text is font family Verdana, Arial, Helvetica, sans-serif. The text size is 2, black and aligned left.

The text for the pop-down navigation is Arial 12 point for the rollover images and drop down menus.

The text for the page title is font family Verdana, Arial, Helvetica, sans-serif, color is #333366, size is strong, and aligned left.

The second level text links are font family Verdana, Arial, Helvetica, sans-serif, color is #333366, size is 1, and aligned left.

The third level text links are font family Verdana, Arial, Helvetica, sans-serif, color is #333366, size 1, and aligned right.

7. To Change Text On One of the Pages

We recommend that you use Dreamweaver to edit your website. In order to do so, you should open Dreamweaver and define a site within the program.

Defining a Site

When defining a site in Dreamweaver, you essentially tell Dreamweaver where to find this main folder (known as the "local root folder") that holds all the site's files.

Note: If the files are stored in one folder on a removable disc or on another computer in a network, copy or transfer the main folder to your computer system's hard drive and then define the site using that main folder as the local root folder.

In Dreamweaver, select New from the Site menu. This will bring up the site definition dialog box. Within the dialog box there are several categories of information to fill out.

Local Info

1	Choose Local Info from the Category list.
2	Enter a name for your site in the Site Name field. The site name should not include any special characters but it may contain capitals and spaces.
3	Place the cursor in the Local Root Folder field, click the folder icon on the right, and browse to the folder that contains the site files. Click Select (Choose).
4	Place the cursor in the Default Images Folder field, click the folder icon on the right, and browse to the image folder and select it.
5	Select both Refresh Local File List Automatically and Enable Cache to Speed Link Updates options.
6	The HTTP Address field is only likely to be useful if you are using absolute paths to refer to local files within your site. This is not the case so you needn’t fill in this field.

Remote Info
This information is necessary to upload the site files to the web server.

1	Choose Remote Info from the Category list.
2	Select the access method from the Access drop-down menu and choose FTP.
3	Click in the FTP Host field and type in the FTP address provided by Mark Linford.
4	The Host Directory specifies the exact folder on the server where the files will go. This will also be provided by Mark Linford.
5	Type your login or user name in the Login text field, and type in the password into the Password text field and choose the Save option (unless you share your computer).

Testing Server
When developing dynamic pages, you normally need a private place to act like a public server in order to test the applications and connections to the database—a testing server. This is not the case so you don’t need to fill out this section.

Cloaking
New to Dreamweaver MX, cloaking allows you to specify file types or specific files that you do not want uploaded to the server. This will keep the source files like PNGs & DWTs with the local development files. This category is optional.

The cloaking feature works with the Put (blue up arrow) or Get (green down arrow) commands. Cloaking will not protect files when using the Synchronize feature.

1	Choose Cloaking from the Category list.
2	Choose the Enable Cloaking option.
3	To cloak files by file type, choose the Cloak Files Ending With option, and type the file extensions—preceded by a period and separated by a space—of the file types that you want to cloak from the server.
4	An alert box will pop up warning that this function works with the Get & Put features only, not with batch procedures such as Synchronization. Click OK.

Design Notes
Design Notes is a collaboration tool that keeps notes regarding the development of the page or site. Dreamweaver creates Design Notes to keep track of integration with Fireworks and Flash. Design Notes can also be created by the developers to communicate on subjects ranging from the status of the page to marketing tactics. This category is optional.

Site Map Layout
The Site Map Layout feature can be useful for understanding how your site files connect to one another. This category is optional. To take full advantage of Dreamweaver's site map features, identify the home page in the site definition.

Choose Site Map Layout from the Category list.

Specify the location of the home page by clicking the folder icon next to the Home Page text field and browsing to the home page file in the local root folder. Select the file and click Open (Choose).

Note: The home page should not be located in a sub folder.

The rest of the options are arbitrary, and the defaults may be used.

File View Columns
This is another organizational tool. If you want to share the custom columns with others developers, Design Notes must be enabled. This category is optional.

Click OK at any point in the Site Definition and the site will be created with the settings you have already defined. Once the site has been defined, the Site panel will change to show the newly-defined site. On a Macintosh, the Site Window will open as with earlier versions of Dreamweaver. You are now ready to build your web site.

Editing a Page

1. Double-click on the shtml file that you wish to edit. (We do not recommend editing files not ending in .shtml within Dreamweaver at this time.)

2. The easiest way to edit the document is with the WYSIWYG window within the Dreamweaver software. Use the code window or split screen to do edits only if you are comfortable with HTML coding.

3. When you’re done editing the file, select SAVE from the FILE menu.

4. Preview your edits in a browser by selecting the globe icon from the INSERT menu.

5. When you’re satisfied with your edits. Upload to the server with the blue UPLOAD arrow on the INSERT menu.

8. To Add a Picture to the Website:

1.    Open Photoshop.

2.    Open the picture named 5-D.S. and open the picture you want to add or replace.

3.    The new picture must be cropped 2.5" x 2.0".

4.    Once the picture is cropped, use the move tool and drag the picture on to the picture named 5-D.S.

5.    The file will show a background layer (white) and layer 1 (your new picture).

6.    Use the move tool to place the new layer in the upper left corner of the picture (5-D.S.).

7.    Select the Layer menu-scroll down to Effects and select Drop Shadow.  A new window titled effects will show.

a.    Opacity reads 75%, you must change this to 90%.

b.    Angle should be 120.

c.     Distance should be 5 pixels.

d.    Blur should be 5 pixels.

e.    Intensity should be 0.

8.    Click on the black square under apply.  This will open a new window Color Picker.

f.     Enter 52 in the R box, 68 in the G box, 99 in the B box, and click OK.

9.    Click OK in the effects window.  Once you have completed this under the Layer menu-scroll down to Flatten Image.

10.          Go to the File menu scroll-down to Save As.  This opens the save window.

g.    Name the file (some_name)_page.jpg and choose jpg on the format menu.

11.          Now you are ready to upload the new picture to the web.

9. To Upload Revised Pages to the Web After Editing

If you don’t use Dreamweaver to upload/edit your files you must use SSH Client (Windows) or Mac SSH PC (Macintosh).

1. Download the SSH shell software:

Windows Users (FTP Software)
Download SSH Client ftp://ftp.ssh.com/pub/ssh/ which contains both Telnet and FTP software

There are several files listed. Select the file named "SSHSecureShellClient-3.2.3.exe", or the most recent version of the software. This is a 6MB file so the download will take a while.

Macintosh Users
Mac SSH PC http://pro.wanadoo.fr/chombier/ is a Telnet program used to create a "public_html" folder. You cannot move files with this program
alternate site for Mac SSHPC http://sourceforge.net/projects/macssh/

MacSFTP (Macintosh users) http://pro.wanadoo.fr/chombier/ use this program to FTP (transfer files to the Web)

2. Run the installation exe file and open the program.

3. Set up the properties in the SSH Client shell:

a. Select PROFILES and then ADD PROFILE

b. Type a name for your connection and press enter

c. Select PROFILES and then EDIT PROFILE

d. Fill in your properties:

· host name: student.santarosa.edu

· username: first initial and last name for a total of 8 letters

· password: ask Mark Linford for a password directory and final URL

e. Select OK

f. Chose PROFILES again and select the name you gave your connection

g. Type in your password

h. Navigate to the appropriate folder (see your URL)

i. Drag and Drop files as if you were using Windows explorer.

10. To Change the Navigation Bar for the Website

We do not recommend that you change the navigation bar unless you feel you have a good understanding of how to create rollover and pop-down menus in Dreamweaver.

11. List of Pages That Have a Component Requiring a Programming Script

All of the pages under Seminars require a programming script that is located in the cgi-bin folder. There are also three forms that require scripting.

cgi-bin

forms

12. Listing of Scripts and Programs Created for Website

The Programs are written in Perl and are contained in the cgi-bin subdirectory. Common Perl modules used are DBI, DBD and CGI. Programs/Files:

ReadMe - A list of possible future enhancements and shortcomings
admin.cgi - The administration pages to manage the data
create.sql - MySQL commands to initially create the database
formmail.cgi - Unchanged public domain program to send forms data to an email address
location.cgi - Displays a web page of a seminars location.
seminars.cgi - (The main program) Handles the web sites seminar pages.
seminars.pm - Perl Module - subroutines shared by the other perl programs.

A MySQL database called "techacad" consists of six tables. The database was originally modeled to be relational; however, due to time constrains, the relational part has yet to be fully implemented. The original idea was to have a one or two key field for each table, such as CategoryID for the Categories table. I later added another field to each table named RandomKey, which is a unique Random number, generated and populated by the program. The originally designed key (ex. CategoryID) has to be manually entered by the user for each table that has that field.

MySQL does handle various database errors, such as not allowing a duplicate key field; however, the error messages could be more descriptive. The Perl programs handle other errors, such as a bad SQL command. Still other errors, such as tying to enter an apostrophe, are not handled at all. There is plenty of room for additional error handling/data integrity. But even with these shortcomings, existing data can be modified and new data added. The data administrator has to know more than usual about the tables and key fields.

The database was also designed with the Community Education department in mind. The field SeminarSSection in the table SeminarsScheduled was to be used to separate the data. Right now, the programs do not filter out any SeminarSSection. The database is expected to be small, I imagine no more than a few dozen records per table.

The six tables and there fields are:

Tips for Database and Web Server Administrator:

1. Use another login to the database (in seminars.pm) besides mine.

2. Change the <base href=...> in seminars.cgi

3. In the Forms directory, the three forms recipient may need to be changed. Currently the forms' recipient is Scott.

Some Basic MySQL Commands Which May Be Useful:

1. mysql -uusername -p

2. use techacad;

3. source create.sql; (to create a new database, wiping out any existing tables and data)

4. alter table Presenters change PresenterID PresenterID varchar(3) not null;

Field	Type	Nullable	Key
RandomKey	varchar(16)		UNI
CategoryID	varchar(4)		PRI
CategoryName	varchar(30)

Field	Type	Nullable	Key
RandomKey	varchar(16)		UNI
LocationID	char(2)		PRI
LocationName	varchar(30)	YES
LocationAddress	varchar(30)	YES
LocationCity	varchar(25)	YES
LocationState	varchar(13)	YES
LocationZip	varchar(5)	YES
LocationPhone	varchar(23)	YES
LocationDetailedImageURL	varchar(255)	YES
LocationGeneralImageURL	varchar(255)	YES
LocationDirections	varchar(255)	YES
LocationDescription	varchar(255)	YES
LocationComments	varchar(255)	YES

Field	Type	Nullable	Key
RandomKey	varchar(16)		UNI
PresenterID	char(3)		PRI
PresenterFirstName	varchar(30)	YES
PresenterLastName	varchar(30)	YES
PresenterDescription	varchar(255)	YES

Field	Type	Nullable	Key
RandomKey	varchar(16)		PRI
SeminarID	varchar(4)
CategoryID	varchar(4)

Field	Type	Nullable	Key
RandomKey	varchar(16)		UNI
SeminarID	varchar(4)		PRI
SeminarTitle	varchar(30)
SeminarName	varchar(60)
SeminarDescription	blob	YES
SeminarFirstOfferingDate	date	YES
LocationID	varchar(4)
PresenterID	char(3)
DepartmentID	char(2)