Pocket Guide to Web Site Maintenance
A Quick Reference for KSC Page Editors
Table of Contents
Welcome
Using HomeSite/ColdFusion Studio
FTP Setup
Settings & Customizations
My Keyboard Shortcuts
Using Toolbars & Buttons
Find/Replace
HTML & CSS Coding Practices
KSC Headers & Footers
Commonly Used Tags
Headings
Text
Links
Lists
Tables
Images
Using CSS Styles
KSC Style Elements
Using the Class Attribute
Using <span> and <div>
Web Policy & Web Style Guide
Guiding Principles
Types of Sites
Online Versions
Resources
Book Recommendations
Online Resources
Company Web Sites
Welcome
The Page Editors and Web Developers who update and maintain our web pages are critical to the success of the KSC web site. To assist you, we have developed this pocket-sized guide that shows how to use an HTML editor, illustrates proper coding practices, offers timesaving tips, and lists professional resources for additional study.
In addition to the current version of this guide, the KSC Web Policy, and the Web Style Guide, you can learn more about HomeSite, HTML, CFML, and Cascading Style Sheets online at http://www.keene.edu/web.
If you have any questions about this guide or need another copy, please e-mail webmaster@keene.edu or call 8-2101.
Code snippets are indicated in red throught this guide. To try them out, copy and paste the red text into a new document in HomeSite then save the document as a .htm file on your desktop or in your test folder and open it with a web browser.
Using HomeSite/ColdFusion Studio
To provide page editors with quality support, the Web Strategy Team adopted a standard web-editing tool. Macromedia HomeSite offers numerous editing options, a customizable interface, and a simple file transfer method. Additionally, HomeSite integrates seamlessly with ColdFusion, our web development software, and is relatively inexpensive. Advanced page editors may use Macromedia ColdFusion Studio versions 5.0 and above. Those using HomeSite should use version 4.5.2 and above. (Throughout this document the term HTML editor will refer to HomeSite and ColdFusion Studio.)
Macromedia offers several free support options including installation support, a searchable knowledge base, an online forum, and developer resources. To use Macromedia's online support tools, visit www.macromedia.com/support/.
FTP Setup
The most useful feature of your HTML editor is its behind-the-scenes File Transfer Protocol (FTP) that retrieves files for editing and uploads edited files without user prompting. Simply double-click the file to open it, edit the file, and then save it. The editor does all the user validation and file transfers in the background.
To set up HomeSite/ColdFusion Studio for editing pages on the KSC web site:
- Open HomeSite/ColdFusion Studio.
- In the upper-left drop-down menu Choose Macromedia FTP & RDS. Once you
have selected this option, Macromedia FTP & RDS should also appear in the middle-left window.
- Right-click Macromedia FTP & RDS in the middle-left window and select Add FTP Server.
- Complete the empty fields as follows:
Description: www.keene.edu
Host Name: www.keene.edu
Initial Directory: webcontent/foldername
Username: your username, (e.g., jsmith)
Password: your password, (e.g., pe2krx*9)
Root URL: http://www.keene.edu/foldername
(If you edit multiple sites, you may either create an FTP server for each site, or simply
leave off the folder name in the Initial Directory and Root URL fields.)
- Click OK. An FTP server icon and name will appear under Macromedia FTP & RDS.
- Click the ftp:// folder to see the files in your root directory. Click
the + sign to see your subfolders.
Settings & Customizations
There are several places in HomeSite and ColdFusion Studio where you can define settings and customize your editing tools. We strongly recommend that you perform the customizations marked with an * in the following sections.
Most software applications have a section where you can define the settings you want to use. HomeSite and ColdFusion Studio settings are located in the Options menu under Settings. To choose your basic settings, follow the steps below.
- Open HomeSite/ColdFusion Studio.
- Click the Options menu and select Settings.
- Almost everything is set correctly by default but there are a few things
you should change. You can navigate through each screen by clicking the corresponding word in
the left bar. Check the following items to be sure they are set correctly:
- General Tab - needs no changes from the default settings.
- *Markup Languages Tab - Check "Use <em> in place of <i>" and
"Use <strong> in place of <b>".
- *Browse Tab - Check "Use Microsoft Internet Explorer".
- You may enable or disable the following features in the Editor Tab by
checking or unchecking them. These functions are meant to assist you by completing the tags as
you type them, offering assistance with the attributes of certain tags, and automatically
including the ending tag when you write the beginning tag.
- Auto Completion
- Tag Insight
- Function Insight
- Tag Completion
Customize Your Keyboard Shortcuts
- Click Customize from the Options menu.
- Click the Keyboard Shortcuts tab.
- Choose the action to be assigned or reassigned a keyboard shortcut by
Clicking on it in the right column.
- Click your cursor in the textbox to the left of the Apply button, type
the keyboard shortcut you would like to use, and click the Apply button.
- If that shortcut is already in use, a dialog box will appear asking if
you would like to reassign that shortcut. Select Yes to overwrite the old action or No to cancel.
Keep in mind that keyboard short cuts can use any combination of the Ctrl, Alt, Shift, and
function keys in addition to the alphanumeric keys.
HomeSite and ColdFusion Studio offer a number of tools to make using the product easier. HomeSite's toolbars are completely customizable and can be set to any number of configurations based on your personal preferences. HomeSite also has a QuickBar that can hold a number of toolbars in a series of tabs so that more tools can be accessed from the docking area.
Using Toolbars & Buttons
- To add or remove a toolbar, right-click on any tool, and check or uncheck
the appropriate toolbar. If you add a new toolbar to the screen, it will appear as a floating
palette that can be dragged to any area of the screen, onto the docking area or the QuickBar.
- To move a visible toolbar, Click the two vertical lines at the left of the
toolbar and drag it to any location HomeSite also offers several tools that are used exclusively
in the editing window. They are located below the Edit tab in the editing window.
- The X closes the current document.
- The return arrow toggles word wrap on and off.
- The left- and right-facing arrows indent and unindent blocks of code.
- To find out what the other tools do, place your cursor over the button
and a tool tip will appear indicating what that button does.
Find/Replace
HomeSite also has excellent Find and Replace tools. The basic Find and Replace tools are simple to use. Just go to the Search menu and Select Find. Type what you are looking for into the first textbox and click the Find Button.
The Replace tool works the same way. Enter what you are searching for and what you want to replace it with, and then Select Replace or Replace All.
Both tools allow you to define your search area by Selecting the Down, Up, or Selection radio buttons.
You can only Find and Replace in the current document. Finding and replacing special characters, like returns and tabs, is difficult. For more advanced features, use Extended Find and Extended Replace.
Extended Find & Replace
The Extended Find and Extended Replace tools allow you to perform operations on individual or multiple pages and enhance the replacement of white-space characters like returns, spaces, and tabs.
To use one of these features, Choose Extended Find or Extended Replace from the Search menu. When the dialog box appears, enter what you are searching for. If using Extended Replace, also enter what to replace it with. Then choose Current Document, All Open Documents, or In Folder in the Where section of the dialog box. Take care to specify the proper folder if you select the In Folder option and always remember to indicate file types.
HTML & CSS Coding Practices
Like most organizations, KSC uses more than one language to develop its web site. We primarily use Hypertext Markup Language (HTML) and ColdFusion Markup Language (CFML), but we also use Javascript and Cascading Style Sheets (CSS).
Page Editors generally work with HTML, but with the new site-wide style sheet, you may also need to know some simple CSS. The following sections describe how to implement the most frequently used code on the KSC web site.
KSC Headers & Footers
KSC uses a global header and footer to manage the design and navigation of the site. This method offers flexibility, scalability, and consistency. In addition, it is extremely efficient and less prone to errors. In order to implement the global header and footer, each web directory on the server must contain two files, application.cfm and onrequestend.cfm. The application.cfm file contains a <cfmodule> tag and the onrequestend.cfm file contains a <cfinclude> tag. These tags identify the site name, color, and menu. It is important that these two files are not modified or deleted.
Headings
In the past we have used the <H3> tag to identify a page heading but because the <H3> incorporates a leading space, it does not work with the new design. Use the <span> tag with the TITLEB class:
<span class="titleb">Tuition & Fees</span>
If a <p> tag does not immediately follow your heading, you will need to include two <br> tags:
<span class="titleb">Tuition & Fees</span><br><br>
Text
The most common tag pair on our site is: <p></p>. The paragraph tags put space between two paragraphs or sections of text. Paragraph tags surround almost all of our text. A common mistake is to put <br><br> between paragraphs rather than surrounding each paragraph with the <p> and </p> tags. Correct:
<p>For coding purposes a paragraph is any bit of text with a blank line above
and below it.</p>
In many cases a paragraph needs a bold description above it. The description acts as a separator between sections of text. Paragraph headers should be coded as:
<p><strong>Admission Requirements</strong><br>
We are frequently asked what is the most important credential in considering applicants for
admission to Keene State.</p>
For the most part you will want the browser to wrap paragraphs of text automatically. However, if you need manual line breaks, for example if you are posting a poem, use the <br> tag.
<p>One, two, buckle my shoe.<br>
Three, four, shut the door.<br>
Five, six, pick up sticks.<br>
Seven, eight, close the gate.<br>
Nine, ten, big fat hen.</p>
Horizontal Rule
On occassion you may want to separate sections or chapters with more than just white space. In such cases, use the <hr>
to create a simple horizontal rule across the page.
<hr>
Links
Key to building effective web sites is taking full advantage of hyperlinks because they are direct paths from one page to another. Links may be embedded in a paragraph, organized in a list or in a table, or simply placed on the page:
<p>Visit <a href="default.cfm">our home page</a> or
<a href="http://www.fafsa.gov" target="new">FAFSA</a> for more information.</p>
Notice that the href attribute only identifies the page. This only works when the current page is in the same directory or folder as the one you are pointing to. Whenever you refer to a page in another directory on our site you must use: /foldername/pagename.cfm.
For links outside our site, you must include: http:// and the full path. When linking to an outside organization, use the target="new" attribute to open the site in a new window.
E-mail Links
E-mail links are very similar to href links. The only difference is that the value of the href attribute begins with: "mailto:" and ends with the e-mail address:
<a href="mailto:webmaster@keene.edu">E-mail the webmaster</a>
Lists
Lists provide us with an easy way to indent, bullet, number, and/or letter lists of items. Using the ordered list <ol>, unordered list <ul>, and list item <li> tags you can create a list of items without ever having to code which letter or number belongs with each list item.
<ul>
<li>Mango</li>
<li>Pineapple</li>
<li>Star fruit</li>
</ul>
With an ordered list, you can use the type attribute to specify what type of numbering or lettering system is used. Use:
type="1" for numbers
type="A" for capital letters
type="a" for lowercase letters
type="I" for capital Roman numerals
type="i" for lowercase Roman numerals
<ol type="1">
<li>Gather laundry</li>
<li>Sort laundry</li>
<li>Wash & dry laundry</li>
<li>Fold or hang laundry/li>
<li>Put away clean laundry</li>
</ol>
If you need additional spacing between list items you can use Cascading Style Sheets and the class attribute like this
<ol type="1">
<li class="margintb10">Gather laundry</li>
<li class="margintb10">Sort laundry</li>
<li class="margintb10">Wash & dry laundry</li>
<li class="margintb10">Fold or hang laundry/li>
<li class="margintb10">Put away clean laundry</li>
</ol>
Tables
HTML tables allow you to arrange rows and columns of data. Since HTML has no other way of aligning text and images, tables have also been used to create complex page layouts with graphics, text, and other elements.
Our site design depends on the use of tables that dictate where graphics are placed, where our menu is located and how wide it is. In the page area, however, tables are primarily used to display data or columns of text.
When using tables, take care to begin and end all tags properly. Internet Explorer is very forgiving if you make a mistake in your table code but Netscape is not. In fact, if you forget to end a table tag, Netscape will not display any part of that table.
The <table> tag should include the following attributes and values:
Width="575" (or less)
Cellpadding="0" (up to 10)
Cellspacing="0" (up to 10)
Border="0"
<table border="0" width="500" cellpadding="5" cellspacing="0">
<tr valign="top">
<td><strong>Name</strong></td>
<td><strong>Height</strong></td>
<td><strong>Sport</strong></td>
</tr>
<tr>
<td>Jill</td>
<td>5' 6"</td>
<td>Soccer</td>
</tr>
</table>
The <table> and </table> tags open and close the table.
The <tr> and </tr> tag enclose each row and the <td> and </td> tags open and close each cell within the row.
The example above showed a simple table where each column expands to the width of its contents. However, in most cases you need more control over the width of the columns. Use the width attribute for more control. Be sure to test your code in both browsers and in small and large windows because the table will not look the same under all conditions.
<table border="0" width="500" cellpadding="5" cellspacing="0">
<tr>
<td width="150">Jill</td>
<td width="150">5' 6"</td>
<td width="200">Soccer</td>
</tr>
</table>
When you have long table filled with data, it is advantageous to change the background color of every other row by using the bgcolor attribute in the <tr> tag. (e.g., <tr bgcolor="ffffff"> or <tr bgcolor="aaaaaa">). You can alternate the following colors with white to compliment your site color.
|
Gray | |
Green | |
Blue | |
Tan | | Purple | |
| Medium |
c9ced4 | |
b3ccb9 | |
a7b1d1 | |
d8d3bd | |
aeaed2 | |
| Light |
e1e6ec | |
e2eeda | |
dbe5f1 | |
e9e9d5 | |
d4d5e9 | |
| Very Light |
f2f6f9 | |
f1f7ed | |
edf4fa | |
eff0e2 | |
ebebf3 | |
| White |
ffffff | |
ffffff | |
ffffff | |
ffffff | |
ffffff | |
|
|
|
|
|
|
|
|
|
|
|
Additionally, you can build tables that have a different number of cells in each column, for example, one tall cell on the left and any number of smaller cells on the right. These customizations are out of the scope of this guide but you can find more information online or contact the Webmaster for a one-on-one tutorial.
Images
Our site is populated with images, most of which are in the header and footer. However, many of our pages also have images in the page area. The code for an image is relatively straightforward. Be sure to include the path to the image from the file and always include the alt attribute for users with visual impairment. The alt attribute should contain a brief explanation of what that image shows:
<img src="images/lamp.gif" width="100" height="120" alt="KSC Lamp Photo" border="0">
The width and height attributes are optional but they provide extra functionality for users who have their images turned off, so we prefer that you use them. To use an image as a button, you must link it to the URL by wrapping an <a href> tag around the <img> tag:
<a href="http://www.keene.edu/aboutlamp.cfm">
<img src="images/lamp.gif" width="100" height="120"
alt="KSC Lamp Photo" border="0"></a>
Using CSS Styles
Cascading Style Sheets (CSS) is a programming language that offers greater flexibility in font styles and layout than HTML. Since it is not uniformly supported in all web browsers, we use only the elements and properties that are widely supported across browsers and platforms.
The basic concept behind style sheets is to define certain styles in a CSS document and use them throughout the web site to ensure consistency. We have designed a site-wide style sheet that defines a number of font sizes and colors, and a number of options for spacing lists and paragraphs. To use the style sheet with your web pages you need to know what styles have been defined, how to apply them, and when it is appropriate to use them.
KSC Style Elements
Our style sheet defines several elements that can be used on our site. The key to using them is knowing their exact name and what they look like when rendered in the web browser.
| Font Styles |
|
Effect |
|
Relative Size |
| Titleb |
|
Heading-sized, bold text |
|
(+2) |
| Title |
|
Heading-sized text |
|
(+2) |
| Big |
|
Big text |
|
(+1) |
| Bigb |
|
Big, bold text |
|
(+1) |
| Med |
|
Regular-sized text |
|
(0) |
| Medb |
|
Regular-sized, bold text |
|
(0) |
| Medr |
|
Regular-sized red text |
|
(0) |
| Small |
|
Small text |
|
(-1) |
| Smallb |
|
Small, bold text |
|
(-1) |
| Smallr |
|
Small, red text |
|
(-1) |
| *See examples below |
| List Styles |
|
Result |
| MarginTB05 |
|
5 pixels above and below each list item |
| MarginTB10 |
|
10 pixels above and below each list item |
| MarginTB15 |
|
15 pixels above and below each list item |
| MarginTB20 |
|
20 pixels above and below each list item |
| *See examples below |
| Leading |
|
Result |
| lead120 |
|
lines are closer together than normal |
| lead130 |
|
default |
| lead140 |
|
lines of text are farther apart than normal |
| lead160 |
|
lines of text are much farther apart than normal |
| *See examples below |
Using the Class Attribute
To implement any of these styles you must use the class attribute. Class is an attribute that can be used in many tags including <p>, <li>, <div>, and <span>. The value of the class attribute must match one of the styles in the list above. Here are some simple examples:
<span class="titleb">Page Heading</span>
<p class="smallr">This text would be rendered in small red type.</p>
<a href="links.cfm" class="small">My Links</a>
When displaying list items that have more than one line, it is advantageous to space them out a little. Here's how:
<ul>
<li class="MarginTB10">Macintosh apples make the best pies.</li>
<li class="MarginTB10">Plum tomatoes make the best tomato sauce.</li>
<li class="MarginTB10">Fresh limes make better margaritas.</li>
</ul>
This example shows how you can put words with different-sized type on a single line:
<p><span class="bigb">Little Women</span>
<span class="medb">by Louisa May Alcott</span></p>
This example demonstrates how to increase the amount of space between lines of text in a paragraph:
<p class="lead140">You can try all of these examples on a test page in your web directory
to see what they look like in a web browser.</p>
Using <span> and <div>
The <span> and </span> tags identify the beginning and end of a section of code, but without a class attribute, the span tag produces no visual result. On the KSC site, we generally use the the <span> tag to apply a style to a section of text using the class attribute as described above. We suggest you avoid using the <div> tag in place of the <span> tag as it adds extra white space in the form of a line break at the beginning and end of a <div> block.
Web Policy & Web Style Guide
Guiding Principles
- Because it represents the College, the KSC web site (www.keene.edu)
should be carefully developed and maintained to high standards of professionalism. It should be
progressive and dynamic - with accurate, useful, and comprehensive information, efficient
navigation, excellent graphic design, and the opportunity for conducting many kinds of
transactions with and within the institution.
- Users should be able to find the information they seek or at least a
source for that information. Outdated, incorrect, or poorly presented pages tarnish the
College's image.
- All KSC web sites should support the mission of the College at the
broadest level.
- The comprehensive, dynamic, and timely nature of the KSC web site
(www.keene.edu) depends on a distributed model of responsibility, with shared accountability and
opportunity.
Administrative web pages
Administrative web pages are used to conduct College business, present official information, and provide services to students and other constituencies. All College pages are considered administrative except academic department pages, instructional pages, and student pages.
Where they reside: www.keene.edu
What they look like: official KSC design
Who edits them: page editor or College Relations
For help contact: webmaster@keene.edu
Program pages
Each academic program is represented on the College web site by a uniformly designed program page that presents material from the catalog. Academic departments can enhance these pages with additional information by contacting the Webmaster or they may develop their own academic department pages.
Where they reside: www.keene.edu
What they look like: official KSC design
Who edits them: College Relations in conjunction with department chair
For help contact: webmaster@keene.edu
Academic and Instructional pages
Academic and Instructional page are pages developed and used by faculty for teaching or professional purposes.
Student organization web pages
Student organization web pages are developed by students and hosted on MyKSC. For more information, contact the helpdesk at helpdesk@keene.edu. Student organizations may contact the Webmaster at webmaster@keene.edu to request that their site be linked to www.keene.edu.
Online Versions of the Policy and Style Guide
Web technology changes constantly and the KSC Web Policy and Web Style Guide strive to keep current. Please refer to these documents online at www.keene.edu/web for the most up-to-date information about the management of the KSC web site. If you have questions, please e-mail the Webmaster at webmaster@keene.edu or the chair of the Web Strategy Team at mmatros@keene.edu.
Resources
Book Recommendations
HTML References
SAMS Teach Yourself HTML in 24 Hours
Hip Pocket Guide to HTML 4.01
Visual Quickstart Guide to HTML
CFML References
Macromedia CFML Reference - ColdFusion MX
The Macromedia CF MX Web Application Construction Kit
Advanced Macromedia CF MX Application Development
Sams Teach Yourself ColdFusion MX in 21 Days
Other
Web Site Usability
Non-Designer's Web Book
Online Resources
1001 Tutorials (http://www.1001tutorials.com/) -
a gateway site to online tutorials in all categories of web development.
AlertBox (http://www.useit.com/alertbox) - Jakob
Nielsen's column on web site usability and other technology issues.
Bobby (http://bobby.watchfire.com/bobby/html/en/index.jsp) - an online service that checks your
website for ADA compatibility.
CF Hub (http://www.cfhub.com/) - a useful site for
ColdFusion developers and newbies alike.
House of Fusion (http://www.houseoffusion.com/) -
a great site for ColdFusion listservs, tutorials, articles, and information.
HTML Goodies (http://www.htmlgoodies.com/) - an
HTML developer's reference tool including tutorials, primers, and other resources.
Internet.com (http://www.internet.com/) - a channel-
based site that offers 16 computer-related channels of information.
Macromedia University (http://macromedia.elementk.com/)
- a fee-based training program for Macromedia products.
Page Resource (http://www.pageresource.com/) - a
web development tutorial and information site.
Lynda Weinman (http://www.lynda.com/) - Lynda Weinman's
site for web designers offers tips, tricks, books, and tutorials.
WebDeveloper.com (http://www.webdeveloper.com/) -
the web developer channel of internet.com is an excellent gateway site that offers tutorials and
articles about web tools, languages, and design.
WebMonkey (http://hotwired.lycos.com/webmonkey)
- a site that offers hundreds of tutorials and articles written by expert programmers and
designers. It may be the best tutorial site for both web developers and web designers.
WebReview (http://www.webreview.com/) - an article-
based site that offers tutorials and information organized in tracks for designers, developers,
authors, and strategists.
World Wide Web Consortium (http://www.w3.org/) - a forum for
information, commerce, communication about HTML, CSS, XML and other web technologies.
Company Web Sites
Adobe (http://www.adobe.com/) - design software
Amazon (http://www.amazon.com/) - books
Art Today (http://www.arttoday.com/) - clip art
Eyewire (http://www.eyewire.com/) - images & fonts
IconBazaar (http://www.iconbazaar.com/) - clip art
Macromedia (http://www.macromedia.com/) - web development software
Microsoft (http://www.microsoft.com/) - web browsers
Netscape (http://www.netscape.com/) - web browsers
For Assistance:
Bonnie Powers
Webmaster
webmaster@keene.edu
603-358-2101
Michael Matros
Director of College Relations
mmatros@keene.edu
603-358-2102
Michael Justice
Web Assistant
mjustice@keene.edu
603-358-2103
Pat Piper
Server Administrator
ppiper@keene.edu
603-358-2172
Jennifer Darrow
Academic Web Specialist
jdarrow@keene.edu
603-358-2340
|
Web Policy