1 / 21

Dynamic HTML and Cascading Style Sheets (CSS)

Learn the power of Cascading Style Sheets to control web design, separate structure and style effortlessly, ensure compatibility, and streamline site maintenance. Dive into DOM, scripting languages, and browser tricks.

codym
Download Presentation

Dynamic HTML and Cascading Style Sheets (CSS)

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. Dynamic HTML and Cascading Style Sheets (CSS) Electronic Commerce Prof. Sheizaf Rafaeli

  2. The BIG issues • Separating structure from content and behavior • Download time • Upgrade time • Compatibility (across, forward and backward) • Keeping it simple, learning and debugging Electronic Commerce; Prof. Sheizaf Rafaeli

  3. DHTML and CSS • Benefits of separating the structure and style of a document: • You can have a single stylesheet that can be used to set the style of multiple content documents • Stylesheets minimize site maintenance • By changing the stylesheet, you can change the presentation of every page to which the style sheet is linked Electronic Commerce; Prof. Sheizaf Rafaeli

  4. DHTML and CSS • Stylesheets cascade hierarchically • This means that you can have a number of different stylesheets for different pages • You can use markup in one stylesheet to set <FONT> characteristics for every page and then use additional stylesheets to change the <FONT> characteristics on individual content pages • Style sheets can easily support centralized design • This provides consistency across a large and distributed digital collection Electronic Commerce; Prof. Sheizaf Rafaeli

  5. 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 Electronic Commerce; Prof. Sheizaf Rafaeli

  6. Dynamic HTML • Cross-Browser techniques are the holy grail • WebMonkey’s tutorial, Nadav Savio, reconciles the two at: • http://www.hotwired.com/webmonkey/html/97/31/index2a.html • See C-Net builder’s tutorial at: • http://www.cnet.com/Content/Builder/Authoring/Dhtml/?st.cn.fd.acol.bl • See http://www.insidedhtml.com (book and website) • And especially the 10K demos! Electronic Commerce; Prof. Sheizaf Rafaeli

  7. 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. Electronic Commerce; Prof. Sheizaf Rafaeli

  8. 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. Electronic Commerce; Prof. Sheizaf Rafaeli

  9. 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. Electronic Commerce; Prof. Sheizaf Rafaeli

  10. 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 Electronic Commerce; Prof. Sheizaf Rafaeli

  11. 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 affectedProperty - What part of the selector will be affectedValue - How it will be affected Electronic Commerce; Prof. Sheizaf Rafaeli

  12. 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

  13. CSS (3) • Linked Global Localstyle 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

  14. 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

  15. 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. Electronic Commerce; Prof. Sheizaf Rafaeli

  16. 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

  17. Full CSS example <HTML><HEAD> <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></HEAD> <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. Electronic Commerce; Prof. Sheizaf Rafaeli

  18. CSS (4) • Cascading or Inheritance: When conflicting, the more specific stylesheet overrides. • Units of Measure: see: • http://www.hotwired.com/webmonkey/stylesheets/reference/units.html • Attributes: layers of Class, ID, Span and DIV. • Properties: see: • http://www.hotwired.com/webmonkey/stylesheets/reference/css_properties.html Electronic Commerce; Prof. Sheizaf Rafaeli

  19. Resources See: http://www.slis.indiana.edu/hrosenba/www/Workshops/CSS/Demo/ Electronic Commerce; Prof. Sheizaf Rafaeli

  20. CSS (5) • W3C Cascading Style Sheets specs, at: • http://www.w3.org/TR/WD-CSS2/ • Microsoft’s User’s Guide, at:http://msdn.microsoft.com/workshop/author/css/css.asphttp://msdn.microsoft.com/workshop/design/layout/css-des.asp • Examples, at: • http://www.hotwired.com/webmonkey/stylesheets/reference/examples.html • Microsoft’s CSS gallery, at: http://www.microsoft.com/truetype/ Electronic Commerce; Prof. Sheizaf Rafaeli

  21. CSS (6) • http://www.htmlgoodies.com/beyond/classid.html • http://www.w3.org/Style/css/ • http://www.htmlhelp.com/reference/css/ • http://www.canit.se/%7Egriffon/web/writing_stylesheets.html • http://builder.cnet.com/Authoring/CSS/ss02.html Electronic Commerce; Prof. Sheizaf Rafaeli

More Related