CHSE1968





Site Manual For Administrators and Volunteers

V 1.0 September 3, 2012

Introduction

Since it’s introduction in December 2010, the Cranston High School East Class of 1968 web site has evolved from a simple single layered conventional HTML site to a feature rich CSS (cascading Style sheet) HTML site. Later in 2011, another change occurred when the site was removed from the current domain () to the newly registered domain of . This particular change occurred to give the site a home within a domain name that was better suited concidering the subject matter of the site. Much has changed and this site has not only grown in size and visitor count, but also in the intimacy that is present when you first visit. I do believe this is the most unique web site around and I would defy anyone to find another quite like this.

While the concept was mine from a simple dedication of an old web site to my classmates bordered with the school colors of green and white, it grew to be more than mine. Over the short time this site has existed, many classmates have located this place and many have helped to contribute to it’s growth and design. Let me tell you about some magnificent things that have happened.

I received a call one night from a U.S. Army veteran who was looking for an Army buddy he had dot seen since the early 70’s. He had indicated he looked for years to find him. They he told me he did a web search using this lost friends name and he was directed here. That lost friend was our classmate John McDonough. Because of that, he found his long lost buddy.

I can not explain the gratitude in his voice for us helping find an old buddy he missed for over 39 years!

There is the example of the new memorial created for our classmate Kevin C Hanley and how, during the research I was able to locate his brother and in turn the remainder of his family. It was because of that chance taken, his family kindly donated his Marine Corps Graduation photograph and through noting short of a miracle, the spirit of a young man lost 44 years ago brought together his friends and family to nurture a memorial that is a beautiful reminder of the life and legacy of a friends lost so many years ago.

These two examples as well as the rememberences of all our classmates now departed as well as the bonds we made at a important time in our lives are the reason why this site is here. It is a small historic document I suppose. It is also a pace we can stay connected, share our thoughts on growing up and as we head toward retirement, reminisce about those good days as well as be reminded of the fears we all shared prior to graduating. Therefore, this site is too important to be left to oe person. In 2012, I asked and he agreed. Bruce Daniel would become immediate co-owner of this site. In time, it will be all his. And with that I hope others will step forward to help insure this web site continues it’s mission of celebrating our class history and our classmates long after I leave. This manual has been written to assist others in gaining knowledge of the site and to assist in the editing and maintenance so it can be enjoyed by all who visit

Lawremce Michael Celani

Required Software

All of the editing of this site was performed using Coffeecup HTML Editor. Uploads to the server are done using Firezilla, an FTP client. Editing can be done using a small text editor such as Notepad, as long as you save the file with the extention html. The Coffeecup editor is inexpensive and does this automatically. It also has automated features for table creation, headlines and other time consuming tasks. The FTP client, Firezilla is a free download. Under “site specifications” there will be screenshots of this software. Other software for FTP use is WSFTP. Now while we are talking about FTP clients, what is FTP. Well it stands for File Transfer Protocol and is used to upload files to the web site as well as to back up the site. Simple, isn’t it? It actually is particularly considering I got lost walking from one classroom to the next on the same floor at opposite ends of 1 hallway. Yes, it is THAT simple. The secret here is familiarity.

Site Specifications

(As Of 9/2/2012)

FILES: 2222

DIRECTORIES: 27

TOTAL SIZE: 1,080,800,000 Bytes (1.08 GB)

APPROXIMATE NUMBER OF PAGES IN SITE: 142

SITE HOST: Web Hosting Hub

LOCATION: /chse1968/public_html

CONTRACT EXPIRATION: 10/1/2013

RUNNING APPLICATIONS: Apache Server for PHP Applications

APPLICATIONS: Guestbook Scripts (3)

PHP Form Generator (Hanley Remembrence)

WEB MAIL ADDRESS: webmail

(Required pre-registration)

CONTROL PANEL: cpanel

(Administrators Only)

The Meat Of The Matter

(The Technical Aspect)

This technical description will cover the file index.html and is somewhat the same for the other pages using Dieter Scheider’s “Autumn” template. It will be dissected in segemtns and each item will be discussed. Separate discussions will be made for the templates used to create other pages such as the memorials and Departed Classmates. This is necessary since they are totally unique templates.

It is important to note that in the first segment, there is a reference to which refers to an associated cascading style sheet. With that in mind, all commands used in this page will be compaired to the associated style sheet for instructions. If none are found, the browser will use native command interperatation in the reconstruction of the web page.

Each web page on the site contains a tag. It is within these tags that the particular details of a particular page reside. This is of importance to your web browser and search engines. So let us first look at the tag for the main page on our site.

Cranston High School East Class of 1968

What you can take comfort in is this part of the web page is not modified all that much. This appears on every page with a few changes. In bold at the top is the tag:

As you see, within those tags, is the name of the site. Look right below and you see:

“meta name description”

These particular parameters have to be edited for each page. Why is this important? Well when someone googles the site, it is helpful for them to know they reached this site in particular. Here is how it affects the search query return:

1. Cranston High School East Class of 1968

Cached

You +1'd this publicly. Undo

This site was developed as a means for our classmates and friends to remain connected regardless of distance and time. All Cranston East Alumni are welcome ...

You've visited this page many times. Last visit: 5/12/12

This is the actual Google return for a search for . The blue banner at the top is exactly what was placed in the tage and the description is exactly what was added to the following meta tag.

The next line meta name=”keywords” will contain specific names you want indexed into the search engines. For example, if you do a google search for a particular student contained in that list, it will assist the search engines in directing you to this particular page. But do not fear, search engines will create their own database based on the number of queries for a particular name or item.

Another tag that you may or may not need to change is:

Because this particular page is a CSS type, this line tells the browser which style sheer it is to use in reconstructing the page. In this case it is style5.css which was created from the original style.css. The difference is school colors were added. Now a word on stylesheets. There are 5 style sheets used on this site so far. If they were all named style.css, none of the pages would display correctly. So there are the following style sheets and their associated pages:

MAIN PAGE: style5.css

GALLERIES: style.css

DEPARTED CLASSMATES: ew_style.css

KEVIN HANLEY MEMORIAL: kch_style.css

DONALD ELLIOTT MEMORIAL: dle_style.css

The link rel tag would be changed to reflect the stylesheet used with a particular page. In departed classmates, the main page and the individual memorials use the same template and therefore, the style sheet remains the same.

Speaking of duplicate fie names; It was determined this was going to be an issue so for every memorium or memorial, the main page was going to be index.html. However, that would present a problem so starting with the new memorials for Don Elliott and Kevin Hanley, it eas decided to follow the same rule as with the style sheets. So in the event with the Hanley Memorial, these are the html files associated with the jmemorial:

Kch_style.css

Kch_index.html

Kch_remembrances.html

Kch_newspaper.html

Kch_photos.html

Kch_post.html

Kch_videos.html

By using his initials as a prefix, it is easy to locate files on the server that pertain to this particular memorial. For Don Elliott, it would be dle_ as a prefix. Am I making sense? But even that presents a problem. There are 46 or so indexes on the departed classmates page and therefore there would be two for Don Elliott and Kevin Hanley. So to avoid a conflict the index files used on this particular group of pages are the first leter of their first and last name. (ew_index.html or sw_index,html) It is confusing I am sure. Now suppose there are two ew’s. Well then it is time to use their middle initial if it is known and if not, the number 1. So there would be then ew_index.html and e1w_index.html. In the case of Don Elliott and Kevin hanley, it is then dl_indes and kh_index.

Now suppose you are writing a script and rename a style sheet. What if you overwrite another. Well it has to be pretty deliberate since you will get a warning box advising you that a similar file exists, are you sure you want to proceed. Select NO or CANCEL, rename your file and save again. What if you do over write a necessary file. Don’t panic. Simple using Firezilla, log onto the server under /public_html and locate the file. Unless you upload the file you mistakenly replaced the original with, then here is the fix.

Go into your work directory on your computer. Find your new file and give it a new name. Then log onto the server, locate the original file and download it to your work directory. Problem solved! Just be mindful if you are editing the main ppage and TOTALLY screw it up, unless you save it, just close the file and do not save. If you did save the file, go to the server and download it again. AS LONG AS YOU DO NOT UPLOAD YOUR WORK, THE ORININAL REMAINS IN TACT.

----------------------------------------------------------------

Isn’t this lots of fun! It Seems like you need a break. I do too. So after a few hours of resting my eyes, I will be back

Ok. As far as editing the style sheet files, it will not be necessary to do so. If you select a new template to use, think of a prefix to add to style.css and use that throughout your project. If you are creating a newer Vietnam Gallery, you could name the stylesheet vg_style.css. But here is the catch. Most templates come with a sub folder named /images. These are the images that create the actual page. To avoid overwriting an existing image folder (Kevin Hanley), it is best to long onto the server and in the upper right window (in Firezilla) right click on public_html

and select CREATE NEW DIRECTORY. You will give in a name and strike your [ENTER] key. In this new directory, you can place all your new template files and image folder. In this way, you do not have to rename ANY files. So figuring on a VIENTAM GALLERY, you would:

[pic]

In this illustration, you are looking at the screen of Firezilla AFTER logging on to the CHSE1968 server. The largest window at the top is the server message window. Below it on the left is the directory list of your computer and below that are the files in your work directory. Below the server message window on the right is the directory tree of the remote server. Below that is the contents of /public_html, which is the web site. ALL files for the web site belong here. Now, if you click once on /public_html to highlight it, you can then RIGHT click and select CREATE DIRECTORY to make your Vietnam Gallery directory..

NOTE!

Most servers operate UNIX as an operating system. So be mindful that this system is case sensitive. If you name your new directory VietnamGallery, you have to be absolutely certain you use the proper case in any links to the site. If you link it on the web page as it will not work. In practice, it is best to type EVERYTHING in lower case. It makes your life much easier. Oh by the way, don’t click the link, it goes nowhere!

Be mindful that all CSS templates are used free of charge from Css Template Heaven and are designed by Diether Scheider, West German. As a result, the copyright notice MUST remain at the bottom of each page to be compliant.

The Header

This begins the actual construction of the main web page. This tag is located in the associated style sheet as:

#content {

margin-right: 202px;

background-color: #00000;

padding: 10px;

}

$content refers to the text in the web page document. It is followed by { and any applicable commands and the statement is closed with }. This comment tells the web browser to position the page 202 pixels from the right and to pad 10 pixels around the assigned color background. The 202 pixel margin command on the right gives room for the side bar menu to be created later in the reconstruction. The background color #00000 is white, which the container ( a style sheet command) is built

later. This helps create the white boundary on the entire page.

The first item constructed is:

[pic]

The HTML Code to create this is:

We Welcome You

Contact Us

Thunderbolts Foot Ball

Web Mail

Forums

As you can see, there are two sylesheet statements, NAVCONTAINER and Navlist. The associated CSS statements are:

#navcontainer ul

{

font-size: small;

background-image: url(linkbar_bg.jpg);

height: 37px;

}

#navcontainer ul li { display: inline; }

#navcontainer ul li a

{

color: #FFFFFF;

text-decoration: none;

float: left;

margin-left: 20px;

padding-top: 8px;

}

#navcontainer ul li a:hover

{

color: #2a4d73;

background-image: url(hover.jpg);

background-repeat: repeat-x;

background-position: bottom;

padding-bottom: 10px;

}

/******************************************** linkbar end ***********************************/

/******************************************** linkpanel start************************************/

.navcontainer {

text-decoration: none;

}

.navcontainer ul

{

margin-left: 0px;

padding-left: 0px;

list-style-type: none;

background-color: #d3d582;

}

.navcontainer a

{

display: block;

padding: 4px 0 4px 10px;

width: 158px;

border-bottom: 1px solid #7C7C3C;

background-image: url(images/linkpanel.jpg);

background-repeat: no-repeat;

color: #000000;

text-decoration: none;

}

.navcontainer a:link,

{

color: #000000;

text-decoration: none;

}

.navcontainer a:hover

{

color: #fff;

background-image: url(linkpanel_hover.jpg);

background-repeat: no-repeat;

background-color: #;

}

There is a lot of stuff going on here, but fortunately, you may never have to edit any of this. What occurs here, well these lins of script tell the brower what to edo when you position your cursor over a particular button. It also includes the link for that particular button as well as it’s position within the “container”. It spells out what the li and ui tages should do. The li relates to the horizontal menu items and the ui refers to the vertical menu items. Each of them behave differently on mouse oivers (hover). The li changes shade and font color, and the ui changes the button images. Here, the We Welcome You appears on an assigned image that spans the width of the page. Actually, the only items you will change here is “We Welcome You” to suit the particular page.

Since it is hardly changed, there will be no discussion of the subheader (side menus). If you desire to add a link to any side menu, find a location, then add

Name of Web Site

If it is a URL on the server, you can ignore the and just type the page name

(departedclassmates.html as an example)

A note about links and clickable images, when you insert an image and want a visitor to click on the image to go to a web site, you open up the INSERT/IMAGE on your editor

[pic]

At the bottom of the image propertys, click the down arrow to select the URL associated with the image. You can type it in or select from the available URLs. It is important to remember that images you delect for your web work MUST reside in your directory specified in your programs setup preferences. The same is true for URLS. The reason is, your link may look like this:

C:\mypictures\image.jpg

It will work when you test it but not after you upload it. You will have to remove EVERYTHING escept the file name.

The right side menu structure will be discussed here. You are familiar with this:

[pic]

In this illustration, as you see in the upper right is the site counter preceeded by facebook and twitter banners preceesed by the RThunderbolt symbol,

Not pictured in this screen shot is the U.S. Flag, R.I. flag and City of Cranston seal. To the left are the notification tables which will be discussed under TABLES.

Here is the code:

Go Thunderbolts!

Visit Us On Facebook

Follow Us On Twitter@chseclassof1968

You are visitor

As complex as this script appears, let me explain what is occurring here.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download