Webteam Home

Webteam Charge

Team Membership

Website Mission Statement

Redesign Project
(goals | timeline)

Meeting Minutes

Comments/Suggestions

Pagemaster's corner TOC:

Style Sheet

Server Side Includes

Templates

Standards

Prodecures

Quality Assurance

Pagemaster's Corner

This is a living corner of our Webteam site. I'll be adding information regularly, so keep checking back! Please use the suggestions form if you'd like to suggest changes or additional content for this area of the site.

New, view the directory structure of Infodome here!

This guide has information about:

How to use style sheets effectively

Cascading Style Sheets are both really cool and a real pain in the butt.

They are cool because:

  • They can be a separate file that you point at.

  • This file controls how things look on the pages that you point at, which means that you can make changes to a bunch of pages (or all your pages) at the same time.

  • They make it easy to create a website with a shared look and feel (so that people know where they are!).

  • Examples:

    • Example 1
      This is a basic html page with a very ugly style sheet. The html code is exactly the same as example 2, except for the header that points to a style sheet

    • Example 2
      This is the same page without any style sheet at all. Again, it's the same html.

    • Example 3
      This is the same page with yet another style sheet, but not quite so ugly this time.


They are a pain in the butt because:

  • Style sheets are unforgiving of bad html code. If you do anything wrong, even things that wouldn't usually make a difference, your style sheet will break.

    To quote a friend and fellow web weaver: "Learning stylesheets to me is like learning to drive a stickshift car with about seventy-three gears, only some of which work on your particular model, and some of which work differently depending on whether your car is in the driveway or on the highway." http://www.jessamyn.com/journal/02/feb02.shtml

  • Different browsers support style sheets differently. Go back and look at examples 2 and 3 in both Netscape and Internet Explorer if you want. They will look different. Different versions of the same browser will look different, too.

  • You can read some CSS browser compatability charts and more information about this issue at the webreview.com Website.


What these things mean for the Library Website:

  • It's important to keep our HTML code nice and clean or else the style sheets will break.

  • It's important to use an editor from the approved HTML editors list because some WYSIWYG editors like Word or Netscape Composer add extra code that will mess up the pages.

  • Remember that keeping your HTML code simple is always a good idea. Use tables when they add something to the layout (e.g. the phone/email directory, not just because you know how. Add images if they are important, not just for fun. Why? Three good reasons:

    1. I find that fancy coding increases the chances that I will make a mistake and I will end up spending time looking for a stray tag.
    2. If anybody else has to take over your pages, simple code will save them a heckofalotta time.
    3. Extra code increases download times slightly, but enough to matter.

  • When you use a style sheet, you shouldn't include any of the following style tags on your page:
    • font size, style, or color tags
    • background color
    • centered headers
    • any other style elements


More on Style Sheets for the overachievers in the group:



back to the top

Server Side Includes

What Stylesheets do for the style of our pages, Server Side Includes do for shared content. In the case of the library Website, that includes headers, navigation elements, and footers.

Basically, an SSI command tells the web server to go and grab some content. That means that the content can be stored in a separate file, meaning we can change a whole Website by changing a single file.

What these things mean for the Library Website:

  • We are now using a template based on SSI for all of the pages on our site. You can learn about the template in the templates section of this guide.
  • You no longer need to include many elements on your page because they will be included automatically. These include:
    • a header image
    • a header title
    • a footer
    • a "top" anchor
    • any navigation elements

    In fact, everything between the <body> tags (including the <body> tags) will be taken care of for you!


More on Server Side Includes for the overachievers in the group:



back to the top
Next you'll want to read about templates.


Revised 05/12/02 by Laura Hudson
Contact: Laura Hudson: lhudson@mail.sdsu.edu