Tips and Resources

Submitted on Monday, October 2, 2006 - 18:19.

Best Practices

Here is some helpful information to keep in mind when you begin to build your own or a department web site.

Proper Titles <title>
 Proper Titles are required for all pages on your sites. Titles should let users know where they are in your site. An example is "Tips and Resources | bsscomputing".

Proper File Naming
more info
  • no special characters: did you not use special characters in your names?
  • consistency: whatever you did right or wrong, did it follow a consistency.
  • Name files in ALL lowercase letters, with NO spaces. Spaces can interfere with some older web browsers, and uppercase letters confuse users. All e-mail and Web addresses are case-insensitive.
  • Include dates in file names: 2004-05_colloquium.gif, 2004spring_econ300syll.doc. In seven months, you'll be glad you did.
  • Keep only essential files in your web folder. Move “orphaned” files (files which no pages link to) onto your network (I:) drive. This helps save space on the web server, and keeps you organized.cro
  • Include a last updated date/time script on your site template so that all pages are marked for currency. This is helpful for you and users, and is automatic.
    o In Dreamweaver, click Insert : Date
    o In Microsoft Office FrontPage, click Insert : Date and Time
Alt Tags for Images
< img src ="x.gif" alt="pic">
 		Required for all <img> tags in your site. Alternative Text (<alt>) shows up either before an image loads or (depending upon browser) when your mouse cursor sits over an image. More importantly, it is an important function for accessibility for text-only and speech-based browsers, largely used by disabled persons.
More Info
Consistent Sitewide Navigation

All websites should contain some kind of common navigation that is consistent and recurs on each page. While there are exceptions to this based on variations of structure, the idea is that a user should be able to traverse the major levels of your website from each page and the mechanism for allowing this should be the same so users only have to learn it once.

When creating navigation, include the home page and then other top-level pages on your site. You should never NOT link to the currently selected page (however one exception to this rule is when you embed your common navigation in a template and don't wish to recreate it on every page).
Examples: http://bss.sfsu.edu/ir/| http://bss.sfsu.edu/%7Empa/ | http://bss.sfsu.edu/urbs/

 

Image and Graphic Concepts

http://bss.sfsu.edu/andrew/itec745/lectures/graphic_concepts.htm

Managing Files

One challenging aspect of beginning to build web sites is managing the files that make up your web pages. One of the reasons for this is that when using Dreamweaver, you actually work from two different versions of the same set of files. A local version of the files is where you actively work on the files from, residing on the computer you are working on, be it at home or in a computer lab. The remote version of the files is the live website version that resides on the web server (a web server is merely a computer with software allowing it to make files available over the Internet).

Page Structure

Web pages are made up of a structure that helps to guide placement of the elements that make up functions like navigation, footer, header, etc. Because HTML can be a clunky authoring language, either Tables or CSS is used to create the layout necessary to enforce the structure. Before you start building, you need to first consider your options for page structure and plan which you think will work best for your website.

Page Structure Example 1Simple Structure : A very simple option includes a "Header", "Navigation", "Footer", "Content" element in a simplified structure. This is often best handled by a Table layout

Example 2 Page Structure
Simple Structure 2: This variation on the simple theme downsizes the "Header" into more of a logo square and allows "Content" to take the Primary Real Estate.

Example 3 Page Structure

Simple Structure 3 : In this example, the navigation has been switched from a "left-hand" to an "overhead".

 

 


AttachmentSize
fit.gif5.83 KB
fit2.gif5.8 KB
fit3.gif4.99 KB