1 / 22

CSS and DHTML For the Web

CSS and DHTML For the Web. N. Muralidhara National Centre for Science Information (NCSI) Indian Institute of Science Bangalore ­ 560012. (E-Mail: murali@ncsi.iisc.ernet.in). Cascading Style Sheet. Layout and Design. Cascading Style Sheet (CSS). Introduction

violet
Download Presentation

CSS and DHTML For the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS and DHTML For the Web N. Muralidhara National Centre for Science Information (NCSI) Indian Institute of Science Bangalore ­ 560012. (E-Mail: murali@ncsi.iisc.ernet.in)

  2. Cascading Style Sheet Layout and Design

  3. Cascading Style Sheet (CSS) • Introduction • Advantages and disadvantages • CSS basics • Selectors • 4 Ways To Put CSS And HTML Together • Conclusion • Learning CSS: Resources

  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.

  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.

  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>

  7. Selectors • 4 types of selectors • 1. Type Selectors • 2. Grouping Selectors • 3. ID Selectors • 4. Class Selectors • Examples

  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

  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.

  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

  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

  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

  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

  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.

  15. Advantages and Disadvantages… • Disadvantages: • Not implemented uniformly in all browsers! • Time-consuming, cross-platform de-bugging necessary • won't run on older browsers

  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.

  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

  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

  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.

  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>

  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

  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/

More Related