Transcript Web Site Design

Web Site Design
with C
a
Lee Honeycutt
English 313
March 8, 2001
scading Style Sheets
Design Principles
http://info.med.yale.edu/caim/manual/contents.html




Process
Interface Design
Site Design
Page Design




Typography
Editorial Style
Graphics
Multimedia
Typography
In present HTML:
 Alignment (limited)
 Line Length (invisible tables)
 Upper vs. Lower Case (by hand)
 White Space (blank GIFs)
Cascading Style Sheets

Advantages:
 Separation
of content from design
 Efficient control over large document
sets
 Pixel-level control over typography


Netscape & Internet Explorer
incompatibilites
Standard in next few years
How CSS Works
HTML Files
CSSheet
Web Pages
How CSS Works




Similar to “Master Document” in
print programs
Various type attributes included in
single CSS file
CSS file controls type choices for
all documents in a site
Changes in type cascade to all
HTML documents
CSS Link
Link inserted in header of all HTML files:
<link href= "master.css" rel="styleSheet” type="text/css">
CSS Content
Contents of master.css file:
Selector {Property: Value}
declaration
tag-selector {property1:value1; property2:value1 value2;…}
h1 {color: green; font: Arial, Helvetica, sans-serif}
CSS Content
Content of master.css file:
h1 { color: maroon; font-weight: bold; font-size: large; fontfamily: FontName, Arial, Helvetica, Geneva, Swiss, SunSansRegular; text-decoration: none; text-align: left; word-spacing:
12px; letter-spacing: 8px; list-style-type: square }
h2 { color: black; font: italic small-caps medium FontName,
Arial, Helvetica, Geneva, Swiss, SunSans-Regular; textdecoration: none; text-indent: 20px; list-style-type: square }
Four Selectors




Tag selectors - correspond to
HTML tags, such as <H1> and <p>
Classes - independent of HTML
code; applied locally to unlimited
select blocks of text
IDs - used on a limited basis to
modify existing HTML elements.
Carry higher weight in “cascade.”
Pseudo classes and pseudo
elements
CSS Properties






Fonts
Text
Color and Background
Boxes
Lists
Classifications
Implementation Advice




Start small, making only simple style
sheets
View style in different browsers to see
results
Let audience’s technical abilities
determine complexity of styles
Find a good CSS editor, but learn to
tweak code yourself.