 |
WEB DESIGN SKILLSModule Study Guide
|
Session 7
Fonts, Colours and Lists
On this page:
Fonts and Colours
Fonts
There is an inherent difficulty with fonts on web pages. The problem is that users' computers all over the world have different sets of fonts installed on them. For the text on a web page to display in a particular font, that font must be installed on the computer. If not, the page will simply display in another font, which is not a disaster, but might spoil your carefully planned 'look'.
Most computers have a fairly ordinary 'serif' font such as Times New Roman, a 'sans-serif' font like Arial, and a 'monospace' font like Courier as a minimum. These look something like this:
Times (serif)
Arial (sans-serif)
Courier (Monospace)
To have your web pages reliably displayed on all computers, use a combination of these fonts only.
If you really want a special font to be used for your headings, the simplest way to do it is to create your text in Photoshop or some similar program and then export it as a GIF or JPEG file. It then becomes an image on the web page and the font is preserved.
Tips on typographic design
- Use only one font for body text. Others can be used for headings, sub-headings or sidebars if you wish.
- Serif fonts have a more formal, serious look to them, whereas sans-serif are more informal and chatty. Use them accordingly.
- Always specify font sizes in relative rather than absolute terms, to allow users to change the text size to suit themselves (use '%' or 'em' sizes rather than 'px', 'pt' or 'mm').
Colours
Text colour and background colour can be altered to good effect in CSS or HTML, and different areas of the page may be given different backgrounds. Once again, there are no hard and fast rules here, it is very much a matter of taste, but some basic principles might help you to avoid the worst excesses.
- Don't use bright, strong colours as a background. Red, yellow, bright green or bright blue should be avoided. Use either black, white or a shade close to these.
- Text can be in a bright colour, but must contrast sufficiently with the
background to make the text clear to read:
yellow on black is acceptable
yellow on white is not - As with fonts, stick to a limited number of colours for text, and use them consistently - perhaps one colour for body text and another for headings.
- Accessibility guidelines suggest that you should not use colour alone to convey information, as this makes it difficult for the significant number of people who are colour-blind. So do not say, for instance: "In the passage below, misspelled words are shown in red."
Lists
Another feature of HTML is the ability to create a list of items on the page. Lists can either be 'ordered', like this:
- peas
- eggs
- carrots
- meat
- potatoes
or 'unordered', like this:
- yellow
- green
- pink
- cyan
- blue
The tag for an 'ordered list' is <ol> (closing tag </ol>)
and the tag for an individual item is <li> (</li>),
so the complete list would have the code:
<ol>
<li>peas</li>
<li>eggs</li>
<li>carrots</li>
<li>meat</li>
<li>potatoes</li>
</ol>
An 'unordered list' is very similar, but with <ul> instead
of <ol>, thus:
<ul>
<li>yellow</li>
<li>green</li>
<li>pink</li>
<li>cyan</li>
<li>blue</li>
</ul>
If you're coding in HTML, make sure you match up the start and end tags
correctly: each item should begin with <li> and end in </li>, and the whole
list must start with <ul> and end with </ul> (or <ol> as appropriate).
With a little thought you can create multi-level lists:
- meat
- chicken
- lamb
- beef
- vegetables
- spinach
- green beans
- turnip
Lists in Dreamweaver
When in text mode, the Dreamweaver 'Properties' panel has controls for ordered and unordered lists, which look similar to the controls you would find on a word processor.
Either click on one of these before starting a list or select a range of paragraphs and then click on the required icon.
Sometimes you want to have a list in which only the headings are bulleted or numbered, with paragraphs in between blank, such as this:
-
Introduction
Stuff about the introduction
-
Part I
Part I blurb
-
Part II
Part II blurb
-
Part III
Part III blurb
-
Conclusion
Wind it all up
To do this you need to insert paragraphs into the list items, thus:
<ol>
<li><p>Introduction</p>
<p>Stuff about the introduction</p></li>
<li> ....etc.
</ol>
This is difficult to do in Dreamweaver's design view because every time you try to start a new paragraph, Dreamweaver makes a new entry in the list, so you'll probably have to do it using code view or raw HTML.
Exercises
- Make a numbered list of items.
- Make a separate bulleted list.
- Insert paragraphs between the list items.
- Try a two-level list as above.
