A GUIDE FOR WEBMASTERS IN
STANDARDIZING NSS WEB PAGES
The present caves.org website is a hodge-podge of designs and styles, created by hundreds of volunteers with widely varying degrees of ability, and accumulated since its inception in 1995. It looks like what it is -- a camel (a horse designed by a committee) -- and does not present the coherent image that a preeminent scientific and educational corporation should have. The IT Committee is attempting to remedy the 'look and feel' of the NSS web site by offering a few common elements, styles, and ways of doing things that we hope and expect our webmasters will take advantage of to improve their pages and make them look like they 'belong.'
Using a common template is an easy way to promote uniformity and cohesiveness to the site. In addition, by bundling with it a standardized table of contents (TOC) and navigation system, changed links can be updated throughout the site by updating one TOC file, saving many webmasters a lot of work, and eliminating dead links.
The standard template (often referred to as a 'skin') now in use can be applied to an existing page, usually without creating any problems, and can also be used to create the framework for a new page. It's easy to apply. Just add this code snippet to the top of your page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NSS Events</title>
<!--#include virtual="/includes/top.html"-->
<!--#include virtual="/includes/header.html"-->
</head>
<body>
<h1>Caving Events</h1>
If this is an existing page, note that it should replace everything down to and including the text of the page title. The page content must begin with an <h1></h1> title. A workaround if this is not this case is to add <br /> as the first page element. Note also that the filename extension must be .shtml for the virtual includes to work, and that they will only be visible online, and not in a local preview window. Don't forget to edit the <title> tag with what you want to appear in the page's tab.
Then, to close out the page, you must end it with this code snippet:
<!--#include virtual="/includes/footer.html"-->
</body>
</html>
This will end the page with the standard footer, including the NSS address, copyright, and rotating sponsor ads. Be sure there are no extra lines (<p> </p>) following your content or below the footer, or they will cause blank spaces in your page.
Some page content, particularly fixed-width tables, may not fit within the template width of 960. If your page flows outside the right margin, you'll need to adjust the table/column size(s) to fit. Pages that are necessarily very wide cannot be skinned.
The font for all page content is Droid Sans or Droid Serif and is automatically applied by the CSS. Therefore all font tags in existing pages must be removed, unless they are specifically intended and required to override the CSS settings (not recommended).
The background image nssback.jpg is applied outside the page area by the template CSS and will only be visible on monitors wider than 1024 pixels. This cannot be altered.
Only this new, official version of the logo should be used on web pages; any and all previous versions should be updated.
Presented here are four sizes, in .jpg and .gif format, as well as with outer glow and in black and white. (The .gif versions have transparent backgrounds.) They may, of course, be resized on your page to meet your need. (Always shrink a larger version; never expand a smaller one.) If other versions are desired, contact webmaster@caves.org.
These logos may be simply copied/pasted onto your page, but this will result in redundant images on the site, which can lead to version creep. The preferred method of placing these images is to link to the graphics already in the /images folder. Simply copy/paste the complete URL below the image into the 'Src:' window in your html software, or directly into the page code, as for example: <img src="/images/NSS Logo Dale 080505 Tiny.jpg" width="67" height="34" align="top" />. If width and height are not specified, the graphic's actual size will be used, and you can shrink it manually, if needed. Relative URLs may also be used; all IO's are one level below /images, so ../images/NSS Logo Dale 080505 Tiny.gif will work.
NOTE: All of these images are at 96 dpi and are only for web use. For print applications, please see www.caves.org/pub/nssnews/nss_graphics.htm
|
 lwww.caves.org/images/ NSS Logo Dale 080505 Tiny.gif |
 www.caves.org/images/ NSS Logo Dale 080505 Small.jpg |
 www.caves.org/images/ NSS Logo Dale 080505 Small.gif |
 www.caves.org/images/ NSS Logo Dale 080505 Medium.jpg |
 www.caves.org/images/NSS Logo Dale 080505 Medium.gif |
 www.caves.org/images/NSS Logo Dale 080505 Large.jpg |
|
 www.caves.org/images/NSS Logo Dale 080505 Large.gif |
|
|
 www.caves.org/images/ NSS Logo Dale 080505 Small BW.gif |
 www.caves.org/images/CaveChat.jpg |
|
|
 www.caves.org/images/CaveChat.gif |
 www.caves.org/images/ CaveChat_medium.gif |
 www.caves.org/ images/ CaveChat_ medium.jpg |
 caves.org/images/ OnlineCavers2.png |
|
 caves.org/images/ google+.PNG |
 caves.org/images/ LinkedIn.png |
 caves.org/images/ Instagram.gif |
An effective and simple way to organize content on your pages is to use Tables. Any html editor will offer that feature, which is beyond the scope of this brief tutorial. But a table allows you to compartmentalize your content. A table was used for the logos above. If it had borders added, it would look like this:
Table cells will conform to the size of their contents, or the size can be specified by dragging or coding. Many decorations options are available, or you can make the table invisible.
Ultimately, we hope to give all webmasters access to the /httpdocs/images directory so that everyone can utilize the same graphics easily, and the same images won't proliferate all over the site in individual folders.
Until then, you can still 'borrow' any graphic that you see anywhere on the site without creating a duplicate:
1. Right-click the graphic and select Properties; that will show you the full URL of the image.
2. On your page, insert an image placeholder (don't worry about the size, it will conform to the image you place in it.) If working in code, enter
<img name="filename" src="filename" width="" height="" alt="" />
3. Paste the image url into the placeholder, or in the code src between the quotes.
This image was copied here in this way...
Want to limit viewing of some of your content (e.g., member roster, newsletters, cave projects) to just your own grotto/group? You can protect this content by requiring a username and password to access it. Just follow the simple instructions here for setting it up.
(Thanx to Keith Wheeland for creating the simple instructions!)
If you have problems or questions with your page editing, we'll do our best to assist you. Just contact webmaster@caves.org.
Be sure to preview your work in both Internet Explorer, Firefox, Chrome, and Safari, as many elements behave differently in different browsers, and may also be affected by the version.
Thanks for being part of the NSS Web Team!
