Dynamic HTML and Cascading

Style Sheets (CSS)

Electronic Commerce

Prof. Sheizaf Rafaeli

1
 The BIG issues

 Separating structure from content and

behavior
 Download time
 Upgrade time
 Compatibility (across, forward and
backward)
 Keeping it simple, learning and debugging

Electronic Commerce;
Prof. Sheizaf Rafaeli 2
 Dynamic HTML

 “Call us crazy, but we thought that the next big thing

in HTML wasn't going to be a new tag. “
 Netscape’s (DevEdge) guide to DHTML:
– http://developer.netscape.com/library/documentation/co
mmunicator/dynhtml/index.htm
 Microsoft’s Dynamic HTML Object Model:
– http://msdn.microsoft.com/msdn-
online/workshop/author/dom/domoverview.asp
– http://msdn.microsoft.com/workshop/author/om/doc_ob
ject.asp
Electronic Commerce;
Prof. Sheizaf Rafaeli 3
 DHTML: Dynamic HTML

 DHTML - still more a promise than a reality

 But certainly the shape of things to come
 a group of technologies that make Web
pages more like miniature software
applications.
 If ever there was a Bleeding Edge

Electronic Commerce;
Prof. Sheizaf Rafaeli 4
 Dynamic HTML
 Cross-Browser techniques are the holy grail
 WebMonkey’s tutorial, Nadav Savio,
reconciles the two at:
– http://www.hotwired.com/webmonkey/html/97/31/index2a.html

 See C-Net builder’s tutorial at:

– http://www.cnet.com/Content/Builder/Authoring/Dhtml/?st.cn.fd.acol.bl

 See http://www.insidedhtml.com (book and

website)
– And especially the 10K demos!

Electronic Commerce;
Prof. Sheizaf Rafaeli 5
 DHTML components
 DOM:
the (DYNAMIC) Document Object Model
 CSS: Cascading Style Sheets
 Scripting languages: (like Javascript,
Active-X, asp).
 And, depending on the browser, positioning,
downloading fonts, streaming content,
“behaviors”, image transition, animated
backgrounds, etc.
Electronic Commerce;
Prof. Sheizaf Rafaeli 6
 DOM: The Document object
Model
 defines all items on a Web page as objects
that can be manipulated.
 Otherwise, those elements are set, defined
solely by the browser.
For example, the DOM makes it possible to identify
individual letters on a page as separate objects, and
then to assign specific qualities, such as color or size,
to each letter. In a sense, every letter becomes a tiny
Web page.

Electronic Commerce;
Prof. Sheizaf Rafaeli 7
 Cascading Style Sheets
(CSS)
 Cascading Style Sheets are a simple way to
control style without compromising
structure. They separate the style (visual
design elements) from the structure of
documents.
 CSS is a form of HTML mark-up that
provides web designers with greater control
over typography and spacing between
elements on a page.
Electronic Commerce;
Prof. Sheizaf Rafaeli 8
 Cascading Style Sheets
(CSS)
 Changing the style can affect an entire document.
 Style sheets can be shared by multiple documents.
 So changing a style can affect an entire website
 WHAT ABOUT BROWSER
COMPATIBILITY? CSS support is
provided in Internet Explorer 4+ and
Netscape Navigator 4+. However, some
annoying browser inconsistencies continue
Electronic Commerce;
Prof. Sheizaf Rafaeli 9
 Cascading Style Sheets
(CSS)
 CSS overrides the browser's default settings
 WHAT DOES CSS LOOK LIKE?
– The basic template for CSS code looks like this:
– Tag: {Property: value; Property2: value2}
– Tag - The element that will be affected
Property - What part of the selector will be affected
Value - How it will be affected

Electronic Commerce;
Prof. Sheizaf Rafaeli 10
 Cascading Style Sheets
(CSS)
 CSS overrides the browser's default settings
 A CSS declaration has two parts:
– a property (”font-size” or “color”)
and a value ( “10pt” or "red").
 The basic syntax of a rule
– selector {property 1: value 1; property 2: value: 2}
 Examples:
– P {font-size: 10pt; color: red}
– H1 {FONT-SIZE: 9pt; FONT-WEIGHT: bold}
Electronic Commerce;
Prof. Sheizaf Rafaeli 11
 CSS (3)
 Linked Global Local style sheet definitions.
– Local (inline) definitions replace the <FONT>
definitions for typeface, font size, color and
margins, etc.
– Global (embedded) declarations are defined
within <STYLE></STYLE> pairs, usually in
header.
– Linked (external) stylesheets use separate .css
files, and link to them using :
» <link rel="stylesheet" href="style.css" type="text/css">

Electronic Commerce;
Prof. Sheizaf Rafaeli 12
 Types of CSS

 Inline:
<h3 style="font-weight: bold">this will be bold</h3>
 Embedded :
<HEAD>
<STYLE TYPE="text/css">
<!- -
Tag: {Property: value; Property2: value2}
- ->
</STYLE>
</HEAD>

Electronic Commerce;
Prof. Sheizaf Rafaeli 13
 Types of CSS

 External:
<HEAD>
<LINK REL="STYLESHEET"
HREF="/PATH/SHEET.CSS TYPE="TEXT/CSS">
</HEAD>
 The SHEET.CSS file would then contain all
the style-sheet code which would be applied
to any page that calls it using the code
above.
Electronic Commerce;
Prof. Sheizaf Rafaeli 14
 Short, sweet example

 REMOVE UNDERLINES
- A Complete Style Sheet
 Do you want to remove underlines from links on
your site? Below is a short and sweet style-sheet
that will do just that, just copy and paste it
between the <head></head> tags on your site:
– <STYLE TYPE="text/css">
<!- -
a { text-decoration: none}
- ->
Electronic Commerce;
15
</STYLE> Prof. Sheizaf Rafaeli
 Full CSS example
<html>
<style type="text/css">
This is an example of the
<!--
h4 {font: 17pt Arial,Helvetica"; middle level (“global” or
font-weight: bold; “embedded” form of CSS.
color: maroon}

h2 {font: 15pt "Courier";

font-weight: bold; color: blue}
Note how style code is
p {font: 12pt "Arial,Helvetica";
hidden (as in Javascript)
color: black}
-->
</style>
Note that fonts can be
<body>
... defined in points, pixels,
</body> inches or centimeters.
</html>
Electronic Commerce;
Prof. Sheizaf Rafaeli 16
 CSS (4)

 Cascading or Inheritance: When conflicting,

the more specific stylesheet overrides.
 Units of Measure: see:
– http://www.hotwired.com/webmonkey/stylesheets/reference/units.html

 Attributes: layers of Class, ID, Span and DIV.

 Properties: see:
– http://www.hotwired.com/webmonkey/stylesheets/reference/css_propert
ies.html

Electronic Commerce;
Prof. Sheizaf Rafaeli 17
 CSS (5)

 W3C Cascading Style Sheets specs, at:

– http://www.w3.org/TR/WD-CSS2/
 Microsoft’s User’s Guide, at:
http://msdn.microsoft.com/workshop/author/css/css.asp
http://msdn.microsoft.com/workshop/design/layout/css-des.asp

 Examples, at:
– http://www.hotwired.com/webmonkey/stylesheets/reference/examples.html
– Microsoft’s CSS gallery, at: http://www.microsoft.com/truetype/

Electronic Commerce;
Prof. Sheizaf Rafaeli 18
 CSS (6)

 http://www.htmlgoodies.com/beyond/classid.h
tml
 http://www.w3.org/Style/css/
 http://www.htmlhelp.com/reference/css/
 http://www.canit.se/%7Egriffon/web/writing_st
ylesheets.html
 http://builder.cnet.com/Authoring/CSS/ss02.ht
ml

Electronic Commerce;
Prof. Sheizaf Rafaeli 19