Webmaster Reference
This section serves as a sort of webmasters journal. Describe and lists resources, techniques, tips and tricks that you come across and use while working on this site. This should become a resource to answer questions about how the PTESC site was assembled, and how it should be maintained and added to in the future.
Website statistics checker
Get highly detailed information about visitors to our site. Particularly useful is information regarding which browsers are used to view the site, so we know what browsers to test the site with, and what content is viewed most often/infrequently, so we have an idea of how the site is being used and where to focus updates.http://www.ptesc.ssc.upenn.edu/awstats/awstats.pl?config=ptesc
Harvard Inequality website
A site to compare ours to. This page was referred to for inspiration in the creation of the PTESC siteTutorials and Tools
HTML, Javascript, CSS, Flash, and Java Applet references, tutorial, examples and free tools/applets. Maybe not the best out there, but pretty good and useful.
http://www.echoecho.com/school.htm4
See how things were done on the PTESC site. As always, the best way to learn is to look at the code yourself, but this is a catalogue to help you understand what already exists on the site and how you can improve upon it.
To protect our e-mail addresses from spambots, most addresses on the PTESC site are hidden by javascript so robots can't pick them up. The code is fairly straight forward, though be aware that you cannot see the address displayed in the Design panel of Dreamweaver. What it produces is a link, which launches the default e-mail program. You can control (a) what the link says (b) the e-mail address that is sent to (c) the subject of the e-mail
In the code below, addrto represents your name and addrdom represents your domain.
So, if the e-mail address were "name@domain.com" you would write
var addrto = "name";
var addrdom = "domain.com";
<script language="javascript">
<!--
var addrto = "YOUR NAME(ie. pennkey)";
var addrdom = "YOUR DOMAIN(ie sas.upenn.edu)";
var msgprint = "TEXT OF THE LINK ";
var subject = "SUBJECT OF THE E-MAIL";
var addrfinal = addrto + "@" + addrdom;
var subj = "?subject=" + subject;
document.write("<a href=\"mailto:"+addrfinal+subj+"\">"+msgprint+"</a>");
//-->
</SCRIPT>That code would produce the following link:
b) Fonts, Backgrounds, Borders, etc...
The Use of CSS Style Sheets
Fonts, colors, backgrounds, borders, margins, just about anything visual on the PTESC site other than images are controlled by CSS style sheets. More specifically styles defined in the file PTESCstyles.css found in the root directory. CSS allows you to define a style once (ie RightboxMiddle) and describe what that style looks like (ie. Font is Century Gothic, font-size is small, background is tan) and then everything we want to look like that, instead of constantly re-defining the way it should look, we just point it to the style sheet. Dreamweaver is very useful here because it makes it easy to use styles from the external style sheet. The way CSS works will be better understood by looking at the web pages to see how styles (also referenced as classes) are used.
What You Need To Know About This
You really only need to know about style sheets if you are making big changes in the layout or the look of the PTESC website. Without knowing anything about styles you can safely re-write text, make things bold or italic, and link to other pages or files. You'll need to know about styles if you want to change the way font looks (font, size, color, etc) the color of a background, any borders anywhere. One important reason to use the style sheets for such changes is that it will uniformly change that style accross the site, so we can maintain consistency.
END OF REFERENCE MATERIAL