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
![Page 1: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/1.jpg)
CSS and DHTML For the Web
![Page 2: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/2.jpg)
IISc 22-26 Nov’99
IIRML P6 2
Cascading Style Sheet
Layout and Design
![Page 3: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/3.jpg)
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
![Page 4: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/4.jpg)
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.
![Page 5: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/5.jpg)
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.
![Page 6: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/6.jpg)
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>
![Page 7: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/7.jpg)
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
![Page 8: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/8.jpg)
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
![Page 9: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/9.jpg)
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.
![Page 10: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/10.jpg)
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
![Page 11: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/11.jpg)
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
![Page 12: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/12.jpg)
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
![Page 13: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/13.jpg)
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
![Page 14: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/14.jpg)
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.
![Page 15: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/15.jpg)
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
![Page 16: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/16.jpg)
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.
![Page 17: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/17.jpg)
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
![Page 18: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/18.jpg)
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
![Page 19: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/19.jpg)
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.
![Page 20: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/20.jpg)
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>
![Page 21: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/21.jpg)
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
![Page 22: CSS and DHTML For the Web](https://reader035.vdocument.in/reader035/viewer/2022062314/56812b3f550346895d8f551d/html5/thumbnails/22.jpg)
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/