CIS525 - Lecture#4 - September 18, 2000
<![CDATA[
Style Sheets - Chap 5
--------------------------------
supported in Netscape 4.0
supported in Internet Explorer 4.0, but apparently not in 5.0
The placement of style sheets determines how much of the html is affected, (block level vs. text level)
<STYLE>
<!--
BODY { BACKGROUND:URL(images/_____.jpg }
H1 { TEXT ALIGN: CENTER; FONT-FAMILY: BLACKOUT } <= this would affect all H1 elements in document
H2 { FONT-FAMILY: MEPP DISPLAY, SHADOW }
STRONG { TEXT-DECORATION: UNDERLINE }
-->
How to associate style sheet with html document
-----------------------------------------------
1) <STYLE> -------- </STYLE>
2) place in head, used for a large number of docs to be effected:
<LINK REL=STYLESHEET
HREF="_____.css"
TYPE="text/css">
3) import them in, like header files:
<STYLE>
<!--
@import URL(_________.css);
@import URL(_________.css);
4) inline specification:
<P STYLE="margin-left: 0.5in;
margin-right: 0.5in;
font-style: itallic">
|
|
|
</P>
What are legal selector values?
-------------------------------
1) html
2) defined html in context
Example:
H1 EM {COLOR: GREEN}
3) User-defined style sheets
<STYLE>
<!--
P.ABSTRACT{___________}
.BLUE{COLOR:BLUE; FONT-WEIGHT:BOLD}
-->
Then this would be found later in the code:
<P CLASS="ABSTRACT">
</P>
<H2 CLASS = "BLUE"> <= header would be bold and in blue
</H2>
4) User-defined ID's
<STYLE>
<!--
#FOO {COLOR:RED}
-->
</STYLE>
Later in the code:
<P ID="FOO">
</P>
Precedence rules for styles
----------------------------
1) rules marked "important"
example:
H1 {COLOR:BLACK !IMPORTANT
FONT-FAMILY: SANSERIF}
2) author rules precedence over reader rules
3) more specific over least specific
example:
#FOO ID's
P.BIG.H1 class
P STRONG { } contextual
STRONG { } global
4) last rule found takes precedence in any conflict
Layers-using varying degrees of graphics transparencies, very temperamental, doesn't often work
----------------------------------------------------------------------------------------------
General process of web design:
hypertext or hypermedia, large body of information build in graphic manner in order to link information
authoring tools
---------------
1) import (article)
2) edit (link)
3) export (collection of articles)
4) print
5) search
web editing
-----------
1) cut & paste
2) abailability of lists of links
3) link verification
4) display formatting
5) search/replace
6) control of color
7) switch betwen author & reader
8) ability to embed, (and edit), graphics, video and audio
9) collaboration
10) data compression
11) security control
12) encryption
13) reliability - no data loss
14) import/export standard exchange formats, (xml, sgml)
design consideration for hypertext
----------------------------------
1) know users and tasks
2) meaningful structure first
3) multi-talented design team
4) respect "chunking", (mental "grouping" of items to 7 (+ or - 2))
5) show relationships within and between documents
6) be consistant with document naming
7) work from master reference list
8) insure simplicity of traversal
9) design each screen carefully
10) low cognitive load, (again 7 (+ or - 2))
breadth, not depth, is more desirable in site design
]]>