css and dhtml for the web
DESCRIPTION
CSS and DHTML For the Web. Cascading Style Sheet. Layout and Design. Cascading Style Sheet (CSS). Introduction Advantages and disadvantages CSS basics Selectors 4 Ways To Put CSS And HTML Together Conclusion Learning CSS: Resources. Introduction. - PowerPoint PPT PresentationTRANSCRIPT
CSS and DHTML For the Web
IISc 22-26 Nov’99
IIRML P6 2
Cascading Style Sheet
Layout and Design
IISc 22-26 Nov’99
IIRML P6 3
Cascading Style Sheet (CSS)
• Introduction• Advantages and disadvantages• CSS basics• Selectors• 4 Ways To Put CSS And HTML Together• Conclusion• Learning CSS: Resources
IISc 22-26 Nov’99
IIRML P6 4
Introduction• CSS stands for Cascading Style Sheets and is a simple
styling language which allows attaching style to HTML elements.
• Style Sheets are templates, very similar to templates in desktop publishing applications, containing a collection of rules declared to various selectors (elements).
• Cascade is a method of defining the weight (importance) of individual styling rules thus allowing conflicting rules to be sorted out should such rules apply to the same selector.
IISc 22-26 Nov’99
IIRML P6 5
Advantages and Disadvantages
• Advantages:– Greater typography and page layout controls
– Easier site maintenance
– The style sheet information can be stored separate from your HTML document, and shared among many HTML files. Change one style sheet file, and the appearance of the entire site is updated.
• Disadvantages• Browser compatibility must be the most common
difficulty.
IISc 22-26 Nov’99
IIRML P6 6
CSS Basics• A style definition is made up of a selector followed
by a declaration block, as shown in this example: <html>
<head>
<title>CSS Basics</title>
<style type="text/css">
P { color:#000000 }
h1{font-weight: bold; font-style: italic; color: red}
</style>
</head>
<body>
IISc 22-26 Nov’99
IIRML P6 7
Selectors
• 4 types of selectors
– 1. Type Selectors
– 2. Grouping Selectors
– 3. ID Selectors
– 4. Class Selectors
– Examples
IISc 22-26 Nov’99
IIRML P6 8
4 Ways To Put CSS And HTML Together
1. Defining a style sheet inside of the HTML document, inside the <HEAD> tag. Example 2. Referring to an external file which contains a style sheet, by using the 'LINK' element. Example 3. Referring to an external file which contains a style sheet, by using the '@import' notation. Example 4. Using a style element inside the document body, attached to a tag. Example
IISc 22-26 Nov’99
IIRML P6 9
Conclusion
• Review– What a style sheet is.
– The procedure for using style sheets (identify text requiring specific styles, build a style sheet, and build your web pages to use that style sheet)
– The different ways to apply styles (inline, document level, and external style sheets.
IISc 22-26 Nov’99
IIRML P6 10
Learning CSS: Resources
• Books:– Essential CSS and DHTML for Web Professionals
(Dan Livingston, Micah Brown Published 1999)
– The HTML/CSS Developer's Resource Guide
(Bryan Pfaffenberger / CD-ROM / Published 1999)
• CSS online resources:– Norwegian: An Introduction to CSS
http://www.stud.ifi.uio.no/~lmariusg/download/artikler/CSSintro.html
– Dutch: A Tutorial on HTML and CSS http://www.useit.com/alertbox/9707a.html
IISc 22-26 Nov’99
IIRML P6 11
Dynamic Hypertext Markup Language (DHTML)
• Introduction to DHTML• How DHTML works?• Advantages and Disadvantages• Browser differences• JavaScript for both browsers• Event Handlers• Examples• Related sources
IISc 22-26 Nov’99
IIRML P6 12
Introduction to DHTML• Dynamic Hypertext Markup Language (DHTML)
refers to web pages that move, animate or respond to the user after downloading to the browser.
• Describes HTML pages with dynamic content.• Any element on a web page -- images, text, tables,
styles, etc. -- can manipulated, responding to user mouse action, without reloading anything from the server.
• Result: – Flexible layout – Faster interactivity – Motion without plug-ins
IISc 22-26 Nov’99
IIRML P6 13
How DHTML Works?
• DHTML works through a combination of:
– HTML 3.2 or 4.0
– JavaScript - the web's standard scripting language
– Cascading style sheets (CSS)
– Document Object Model (DOM) - a means of
accessing a document's individual parts
IISc 22-26 Nov’99
IIRML P6 14
Advantages and Disadvantages
• Advantages:– Small file sizes - DHTML files are small compared to other
interactive media such as Flash or Shockwave
– Flexibility with layout (can position elements where you want them)
– Supported by both major browsers
– No plug-ins necessary - Plug-ins are not needed to view DHTML files
– Client-side processing - scripts run on the client side. Once a page has been downloaded, all its scripts run on the user's browser rather than on a server.
IISc 22-26 Nov’99
IIRML P6 15
Advantages and Disadvantages…
• Disadvantages:– Not implemented uniformly in all browsers!
– Time-consuming, cross-platform de-bugging necessary
– won't run on older browsers
IISc 22-26 Nov’99
IIRML P6 16
Browser Differences
• In order to create DHTML content, we will need to understand the differences between Microsoft's and Netscape's DHTML.
• For example: Dynamic objects (Objects are generally words or text) in a Netscape Communicator are called layers. In Internet Explorer they are referred to as styles.
IISc 22-26 Nov’99
IIRML P6 17
Browser Differences…
• In Netscape, JavaScript would reference to document. "layer_name".document.images ["image_name"]. In Internet Explorer, JavaScript reference to document.all."style_name".style.
• In Netscape, a positional object's X coordinate is called left and its Y coordinate is called top. document."layer_name".left document."layer_name".top
IISc 22-26 Nov’99
IIRML P6 18
Browser Differences…
• In Internet Explorer, a positional object’s X coordinate is called pixelleft and its Y coordinate is called pixeltop. document.all."style_name".style.pixelleft document.all."style_name". style. pixeltop
IISc 22-26 Nov’99
IIRML P6 19
JavaScript for both Browsers
• To write DHTML for both Netscape and Internet Explorer, one must create two sets of JavaScript functions.
• The document.layers object is specific to Netscape 4.0, while the document.all object is specific to Internet Explorer 4.0.
IISc 22-26 Nov’99
IIRML P6 20
JavaScript for both Browsers…
<SCRIPT Language="JavaScript">
function check() {
if (ns4) {
// do something in Netscape Navigator 4.0
}
if (ie4) {
// do something in Internet Explorer 4.0
}
}
</SCRIPT>
IISc 22-26 Nov’99
IIRML P6 21
Event Handlers
• JavaScript is used to make different things happen when a specified event occurs. You do this with a category of JavaScript elements called event handlers. Some common event handlers include: – onMouseOver: when the user puts the cursor over a
link
– onMouseOut: when the user removes the cursor from a link
– onClick: when the user clicks on an option
IISc 22-26 Nov’99
IIRML P6 22
Related Sources• Books:
– Designing With JavaScript : Creating Dynamic Web Pages (Nick Heinle, Published 1997)
– DHTML and JavaScript (Gilorien Published 1999)– Essential Java Script for Web Professionals (Dan Barrett, et al
Published 1999)
• Websites: – http://www.htmlguru.com/– http://www.dhtmlzone.com/– http://www.javascripts.com/