Download presentation
Presentation is loading. Please wait.
1
Dynamic HTML
2
Dynamic HTML Netscape’s (DevEdge) guide to DHTML:
“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: Microsoft’s Dynamic HTML Object Model:
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
4
Dynamic HTML Cross-Browser techniques are the holy grail
WebMonkey’s tutorial, Nadav Savio, reconciles the two at: See C-Net builder’s tutorial at: See (book and website) And especially the 10K demos!
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.
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.
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.
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
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
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.
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} - -> </STYLE> Electronic Commerce; Prof. Sheizaf Rafaeli
15
Full CSS example <html> <style type="text/css"> <!-- h4 {font: 17pt Arial,Helvetica"; font-weight: bold; color: maroon} h2 {font: 15pt "Courier"; font-weight: bold; color: blue} p {font: 12pt "Arial,Helvetica"; color: black} --> </style> <body> ... </body> </html> This is an example of the middle level (“global” or “embedded” form of CSS. Note how style code is hidden (as in Javascript) Note that fonts can be defined in points, pixels, inches or centimeters.
Similar presentations
