Back |
Chicago-Kent Home |
Web Support Page
WEB SUPPORT- Web Site Style Guide
What is HTML?
HTML (HyperText Markup Language) is the computer code used to create Web pages. Using Dreamweaver, you can easily
create attractive Web pages without learning all the intricasies of HTML...the software codes for you.
What are styles?
Styles are standard formats that allow you to make your Web pages look a certain way.
What is a stylesheet?
A stylesheet is simply a file that contains all of the style information
for your Web pages. Stylesheets simplify the formatting process and
make formatting consistent across your Web pages. Rather than change
the font color from red to black in each Web page, for example, stylesheets
allow the change to be made only once (in the stylesheet file). As a
result, all Web pages that use the same stylesheet are updated automatically
with the new style.
What is the default font used by most Chicago-Kent styles?
The default font is defined as a series of display fonts. Your browser
will display text on pages that reference the Chicago-Kent stylesheet
using the first available (reading the series from left to right) font
that is installed on your computer. Verdana is Chicago-Kent's primary
font face.
Styles Based on Standard HTML Definitions: Paragraph and Heading Styles
The table below lists general Web page styles defined by the main Chicago-Kent
stylesheet. When you want text to appear a certain way, for example
a "Heading 3" look, you assign the H3 style in the Format field of Dreamweaver's
Property Inspector to that selected text. (To view the Property Inspector
if it's not visible, click on Dreamweaver's Window menu and select
Properties.) Your browser will do the work for you, rendering the
text in the appropriate font type, size, color, and spacing.
Style Name |
Display
| Description |
HTML Syntax |
Paragraph |
Your Text |
Paragraph text in black |
<P>Your Text</P> |
Heading 1 |
Your Text |
Largest heading in red |
<h1>Your Text</h1> |
Heading 2 |
Your Text |
Largest heading in black |
<h2>Your Text</h2> |
Heading 3 |
Your Text |
Medium heading in red |
<h3>Your Text</h3> |
Heading 4 |
Your Text |
Medium heading in black |
<h4>Your Text</h4> |
Heading 5 |
Your Text |
Smallest heading in red |
<h5>Your Text</h5> |
Heading 6 |
Your Text |
Smallest heading in black |
<h6>Your Text</h6> |
Styles Based on Non-standard HTML Definitions: Classes
What are classes?
They're merely special styles which allow you to take formatting even further.
The table below lists non-standard html styles defined by the Chicago-Kent stylesheet. They produce
similar results to the standard styles -- altered font, color, size, and spacing -- but are accomplished
in a different way and used for specialized purposes. To apply these styles in Dreamweaver, select the text
you want to format and double-click the appropriate style name from the Library Palette (if it's not visible,
click Window > Library > Assets). Please note: if you instead write the HTML code yourself (in the
"code" window -- click View > Code), the syntax (column 4) required to achieve these styles is slightly
different than the standard HTML style syntax above.
Style Name |
Display |
Description |
HTML Syntax |
small |
Your
Text |
Small text |
<span class="small">Your
Text</span> |
small2 |
Your
Text |
Small, alternate font |
<span class="small2">Your
Text</span> |
topic |
Your
Text |
Bold red text with no
spacing above/below |
<span class="topic">Your
Text</span> |
facname |
Your Text |
Bold red large text; used in faculty biography pages |
<span class="facname">Your Text</span> |
factitle |
Your
Text |
Bold text; used in faculty biography pages |
<span class="factitle">Your
Text</span> |
pgtitle |
Your
Text |
Bold text |
<span class="pgtitle">Your
Text</span> |
pubtitle |
Your Text |
small caps; used for publication titles |
<span class="pubtitle">Your Text</span> |
rtnavtitle |
Your
Text |
Small bold white text |
<span class="rtnavtitle">Your
Text</span> |
menutitle |
|
Small bold text |
<span class="menutitle">Your
Text</span> |
white |
Your
Text |
White text |
<span class="white">Your
Text</span> |
smallwhite |
Your
Text |
Small white text |
<span class="smallwhite">Your
Text</span> |
smallwhitebold |
Your
Text |
Small bold white
text |
<span class="smallwhitebold">Your
Text</span> |
red |
Your
Text |
Red text |
<span class="red">Your
Text</span> |
smallred |
Your
Text |
Bold red text |
<span class="smallred">Your
Text</span> |
Back | Chicago-Kent
Home | Web Support Page
|