Session 10: Dynamic HTML, Cascading Style Sheets (CSS) Object Model and Collections
This session focuses on teaching students how to create web pages using Dynamic HTML concepts, CSS, Event Model, Filter, Transition, and Data
- Uploaded on | 4 Views
- aaliyah
About Session 10: Dynamic HTML, Cascading Style Sheets (CSS) Object Model and Collections
PowerPoint presentation about 'Session 10: Dynamic HTML, Cascading Style Sheets (CSS) Object Model and Collections'. This presentation describes the topic on This session focuses on teaching students how to create web pages using Dynamic HTML concepts, CSS, Event Model, Filter, Transition, and Data. The key topics included in this slideshow are . Download this presentation absolutely free.
Presentation Transcript
Slide1Session 10Dynamic HTML: Cascading Style Sheets ™ (CSS), Object Model and Collections Matakuliah : M0114/Web Based Programming Tahun : 2005 Versi : 5
Slide2Learning OutcomesPada akhir pertemuan ini, diharapkan mahasiswa akan mampu : menghasilkan web page dengan menerapkan konsep Dynamic HTML: CSS, Event Model, Filter, Transition, dan Data Binding (C3)
Slide310.1 Introduction10.2 Inline Styles 10.3 Creating Style Sheets with the STYLE Element 10.4 Conflicting Styles 10.5 Linking External Style Sheets 10.6 Positioning Elements 10.7 Backgrounds 10.8 Element Dimensions 10.9 Text Flow and the Box Model 10.10 User Style Sheets 10.11 Object Model 10.12 Collections all and children 10.13 Summary of the DHTML Object Model Outline Materi
Slide410.1 Introduction• Cascading Style Sheets (CSS) – Specify the style of your page elements – Spacing, margins, etc. • Separate from the structure of your document – Section headers, body text, links, etc. • Separation of structure from content – Greater manageability – Easier to change style of document
Slide510.2 Inline Styles• Inline styles – Individual element’s style declared using the STYLE attribute – Each CSS property followed by a colon and the value of that attribute – Multiple properties separated by semicolons <P STYLE = “font-size: 20 pt; color: #0000FF”> – Inline styles override any other styles Sample Program
Slide610.3 Creating Style Sheets withthe STYLE Element • Style sheet in header section – Begins with <STYLE TYPE = “text/css”> • Styles placed here apply to the whole document • TYPE attribute specifies the MIME type – MIME is a standard for specifying the format of content » Other MIME types include text/html , image/gif and text/javascript • Without style sheets – Browser completely controls the look and feel of Web pages • With style sheets – Designer can specify the look and feel of Web pages continue..
Slide710.3 Creating Style Sheets withthe STYLE Element • Declare CSS rules within STYLE element – Each rule body begins and ends with a curly brace ( { and } ) – Class declarations are preceded with a period and applied to elements only of that specific class – Each property is followed by a colon and the value of the property – Multiple properties are separated by semicolons continue..
Slide810.3 Creating Style Sheets withthe STYLE Element • Generic font families – Allow you to specify a type of font instead of a specific font • Font-size property – Relative sizes: xx-small , x-small , small , smaller , medium , large , larger , x- large and xx-large • Styles applied to an element (the parent element ) – Also apply to the elements inside that element ( child elements ) Sample Program
Slide910.4 Conflicting Styles• Inheritance and specificity • text-decoration property – Applies decorations to text within an element – none – overline – line-through – blink • Browsers are not required to support blink • Pseudo-classes – Give the author access to content not specifically declared in the document – Ex. hover pseudo-class continue..
Slide1010.4 Conflicting Styles• px : pixel is a relative-length measurement – Varies in size based on screen resolution • Other relative-lengths – em : the size of the font – ex : the “x-height” of the font, usually set to the height of a lowercase x – Percentages • E.g. margin-left: 10% • Absolute-length measurements – in : inches – cm : centimeters – mm : millimeters – pt : points (1 pt = 1/72 in ) – pc : picas (1 pc = 12 pt ) • Use relative length over absolute continue..
Slide1110.4 Conflicting Styles• Three possible sources for style sheets – Browser defaults – Preset user styles – Author styles • Author styles have a greater precedence than preset user styles Sample Program
Slide1210.5 Linking External Style Sheets• External linking – Separate pages can all use same style sheet – Only modify a single file to change styles across your site • LINK element – Specifies a relationship ( REL attribute) between current document and another document <LINK REL = “stylesheet” TYPE = “text/css” HREF = “styles.css”> – LINK element can only be placed in header – Other REL values • next , previous allow you to link a series of documents – Print all linked documents option • Style sheets are reusable Sample File(CSS) Sample Program
Slide1310.6 Positioning Elements• CSS position property – Absolute positioning • Specifying an element’s position as absolute removes it from the normal flow of elements on the page • Position the element according to distance from top , left , right or bottom margins of parent element – z-index attribute • Allows you to properly layer overlapping elements • Elements with higher z-index are displayed in front of elements with lower z-index Sample Program continue..
Slide1410.6 Positioning Elements• CSS position property (cont.) – Relative positioning • Browser lays out the element on the page • Then offsets the element by specified top , bottom , left or right values • Keeps elements in the general flow of elements on the page • Be careful to avoid unintentionally overlapping text Sample Program
Slide1510.7 Backgrounds• background-image property – Specifies the URL • background-position property – Positions the image on the page – Top , bottom , center , left or right – Ex. background-position: 50% 30px; • Position image centered vertically (50% of the distance across the screen) and 30 pixels from the top • background-repeat property controls tiling – no-repeat , repeat , x-repeat , y-repeat • background-attachment property – fixed : scrolling the browser window will not move the image – scroll : moves the image as the user scrolls the window (default) • text-indent property – Indents first line of text by specified amount continue..
Slide1610.7 Backgrounds• font-weight property – specifies the “boldness” of affected text – bold – normal – bolder – lighter – Multiples of 100 from 100 to 900 • font-style property – none – italic – oblique • Will default to italic if system does not have separate font file for oblique continue..
Slide1710.7 Backgrounds• SPAN element: generic grouping element – Does not apply any inherent formatting – Main use is to apply styles or ID attributes to block of text – Inline element • DIV element – Similar to SPAN , but block-level element • Displayed on own line with margins above and below Sample Program
Slide1810.8 Element Dimensions• width property – Ex. <DIV STYLE = “width: 20%”> • height property – Relative and absolute lengths for width and height properties • text-align property – center , left or right • overflow property – scroll adds scrollbars if the text overflows the boundaries Sample Program
Slide1910.9 Text Flow and the Box Model• Floating – Allows you to move an element to one side of the screen – Other content in the document flows around the floated element – Float to the left or right of a document • Each block-level element is “boxed” – Box model allows properties of box to be easily adjusted • Padding • Border • Margins Sample Program continue..
Slide2010.9 Text Flow and the Box Model• Box model border – border-width – border-style • E.g. border-top-style • none • hidden • dotted • dashed • solid • double • groove • ridge • inset • outset – border-color • E.g. border-left-color Sample Program1 Sample Program2
Slide2110.10 User Style Sheets• Important issue when adding style sheets: – What kind of users will be using your site? • Users can define their own user style sheets • CSS specification gives precedence to author styles over user styles • Use relative measurements • Add a user style sheet in IE5 – Tools menu Internet Options… • Accessibility… – Check Format documents using my style sheet Sample Program continue..
Slide2210.10 User Style SheetsAdding a user style sheet in Internet Explorer 5 © Copyright 2001 by Deitel & Associates. All Rights Reserved
Slide2310.11 Object ModelIntroduction • Dynamic HTML object model – Great control over presentation of pages • Access to all elements on the page – Whole web page (elements, forms, frames, tables, etc.) represented in an object hierarchy • HTML elements treated as objects – Attributes of these elements treated as properties of those objects • Objects identified with an ID attribute can be scripted with languages like JavaScript, JScript and VBScript continue..
Slide2410.11 Object ModelObject Referencing • Simplest way to reference an element is by its ID attribute • Changing the text displayed on screen – Example of a Dynamic HTML ability called dynamic content Sample Program
Slide2510.12 Collections all and children• Collections are basically arrays of related objects on a page • all – Collection of all the HTML elements in a document in the order in which they appear • length property – Specifies the number of elements in the collection • tagName property of an element – Determines the name of the element • Every element has its own all collection, consisting of all the elements contained within that element continue.. Sample Program
Slide2610.12 Collections all and children• The children collection – Contains only those elements that are direct child elements of that element – An HTML element has only two children: the HEAD element and the BODY element continue.. Sample Program
Slide2710.12.1 Dynamic Styles • Refer to the background color of a page as document.body.style.backgroundCol or • Dynamic HTML object model allows you to change the CLASS attribute of an element Sample Program1 Sample Program2
Slide2810.12.2 Dynamic positioning • Dynamic Positioning – An element can be positioned with scripting • setInterval function takes two parameters: – A function name – How often to run that function – clearInterval function stops the timer • setTimeout function similar, but only calls the function once – clearTimeout function stops the timer Sample Program
Slide2910.12.3 Using the frames Collection • frames collection – To reference a frame, use frames(“ name ”) where name is the ID or NAME of the desired frame • Ex. frames(“lower”) refers to the element in the frames collection with an ID or NAME of lower Sample Program1 Sample Program2
Slide3010.12.4 Navigator ObjectNavigator object – Supported by Netscape Navigator and Internet Explorer – navigator object contains info about the Web browser viewing the page – navigator.appName contains the name of the application • “ Microsoft Internet Explorer ” • “ Netscape ” – Value of navigator.appVersion not a simple integer • Contains other info, such as OS • When using a browser-specific technology – Make provisions for other browsers Sample Program
Slide3110.13 Summary of the DHTML Object Model • DHTML object model – Allows script programmer to access every element in an HTML document – Every element a separate object
Slide3210.13 Summary of the DHTML Object Model window document history navigator applets all anchors body embeds forms filters images links plugins styleSheets scripts location screen event document document plugins object collection Key frames continue.. © Copyright 2001 by Deitel & Associates. All Rights Reserved
Slide3310.13 Summary of the DHTML Object Model • Objects in the Internet Explorer 5 object model continue.. © Copyright 2001 by Deitel & Associates. All Rights Reserved
Slide3410.13 Summary of the DHTML Object Model • Objects in the Internet Explorer 5 object model – Continued from previous slide continue.. © Copyright 2001 by Deitel & Associates. All Rights Reserved
Slide3510.13 Summary of the DHTML Object Model • Collections in the Internet Explorer 5 object model continue.. © Copyright 2001 by Deitel & Associates. All Rights Reserved
Slide3610.13 Summary of the DHTML Object Model • Collections in the Internet Explorer 5 object Model – Continued from the previous slide © Copyright 2001 by Deitel & Associates. All Rights Reserved
Slide37End of Session 10