| hr |
Used to separate title from body and body from navigational
links. Uses normal <hr> tag but modifies height to 3px and background
color to dark gray (#999999). |
| .heading |
Used to label each main heading with a topic note
(i.e., 1.0 Overview). Uses large, bold, Verdana font. |
| .subheading |
Used to label each subheading of a topic note (i.e.,
2.1 Attributes). Uses medium, bold, Verdana font. |
| .page_title |
Used to label the title at the top of each topic note
(i.e., Font Properties Topic Note). Uses x-large, bold, Verdana font. |
| .page_bg |
Used to format the page with a white background (#FFFFFF). |
| .caption |
Used to as a key to define what special symbols mean
and is also used to format the text for links to topic note critiques. For
example, .caption is used when specifying which attributes of a CSS property
or HTML tag are optional or required. |
- Create a table of contents at the top of the page
- This gives the reader a visual layout of all
the main subject areas of the page.
- Number the table of contents using decimal
notation or roman numerals to give the page a professional look
and feel. It also helps the designer remember to outline the contents
in a logical or sequential manner.
- Make sure each heading or subcategory has
an anchor link which allows the user to jump directly to his/her
desired point of interest. Users are lazy and hate to scroll.
- If using a numerical style, indent the subcategories
in the table of contents and also use the same format in the body
of the page.
|
- Use images with a purpose in mind
- Don't just use an image for the sake of filling
white space on a page. Make sure the image serves a purpose. For
example, it could be used to illustrate the effect of a certain
tag
|
- Don't use large images
- For those with dial-up connections, downloading
a 500K image may take longer than reading the entire contents of
the page. Also try to use common image file types (i.e., jpg, gif,
or png).
|
- Provide a reference section
- It's always a good idea to site your sources.
Intellectual property laws are becoming a bigger issue these days
and I'd hate for anyone to get caught for not citing sources.
- Don't forget to make a hyper-link to the source
if it is another web page.
|
- Provide useful site navigational links
- Allow the user to go back to other parts of
your site (i.e., ICS 415 homepage) from any page within the site.
Don't make the user have to click on the 'Back' button to find out
where he/she is. Don't assume the user knows his/her way around
your web site. Always provide a way out.
- Provide a link to the critiques for the topic
note being explained.
|
- Always show examples
- Since it is easier to learn visually, show
HTML code samples and the browser output that results from the specific
HTML code.
- Sometimes creating a graphical image to explain
concepts is a useful tool.
- At least give the syntax of a tag or property
if you don't show an actual HTML example.
|
- List browser compatibility
- With the vast number of browsers and various
versions of the same browser, it is often useful to let the reader
which browser(s) support what tags or properties. Listing the most
current versions of Internet Explorer and Netscape should be sufficient,
but feel free to list as many as possible. It wouldn't hurt to know
the details of each browser-tag compatibility.
|
- Specify optional and required attributes
- Let the user know what attributes are required
and which ones are not. I personally hate to guess.
- I denote this by using a combination of '*'
characters next to the attributes and provide a key at the end.
|
- Be brief and straightforward
- Don't waste three sentences explaining what
can be said with one.
- Stay away from using a passive voice (i.e.,
-ing words).
|