css_and_dhtml

Document Sample
css_and_dhtml Powered By Docstoc
					CSS and DHTML For the Web
Layout and Design




                    •2
   Introduction
   Advantages and disadvantages
   CSS basics
   Selectors
   4 Ways To Put CSS And HTML Together
   Conclusion
   Learning CSS: Resources




                                          •3
   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.



                                                     •4
   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.
                                                       •5
   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>




                                                                    •6
   4 types of selectors

    ◦   1.   Type Selectors
    ◦   2.   Grouping Selectors
    ◦   3.   ID Selectors
    ◦   4.   Class Selectors

    ◦        Examples




                                  •7
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
                                                          •8
   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.




                                                       •9
   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/ar
      tikler/CSSintro.html
    ◦ Dutch: A Tutorial on HTML and CSS
      http://www.useit.com/alertbox/9707a.html

                                                         •10
   Introduction to DHTML
   How DHTML works?
   Advantages and Disadvantages
   Browser differences
   JavaScript for both browsers
   Event Handlers
   Examples
   Related sources



                                   •11
   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
                                                 •12
   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




                                                           •13
   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.



                                                             •14
   Disadvantages:
    ◦ Not implemented uniformly in all browsers!
    ◦ Time-consuming, cross-platform de-bugging
      necessary
    ◦ won't run on older browsers




                                                   •15
   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.




                                                  •16
   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



                                                         •17
   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




                                                    •18
   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.




                                                     •19
<SCRIPT Language="JavaScript">
function check() {
          if (ns4) {
                 // do something in Netscape
  Navigator 4.0
          }
          if (ie4) {
                 // do something in Internet Explorer
  4.0
          }
      }
</SCRIPT>

                                                        •20
   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



                                                          •21
   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/


                                                         •22

				
DOCUMENT INFO