1 / 27

Understanding Dynamic HTML

Chapter 9. Understanding Dynamic HTML. Barry Sosinsky Valda Hilley Programming the Web. Learning Objectives. Working with CSS Using the DOM Writing JavaScript to handle events Basic DHTML techniques. Introducing DHTML.

grady-fox
Télécharger la présentation

Understanding Dynamic HTML

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. Chapter 9 UnderstandingDynamic HTML Barry SosinskyValda Hilley Programming the Web

  2. Learning Objectives • Working with CSS • Using the DOM • Writing JavaScript to handle events • Basic DHTML techniques

  3. Introducing DHTML • Dynamic HTML (DHTML) is not a single entity but rather the interaction of several technologies used to enable Web pages to react to events and thereby become dynamic web pages. • These events, generally initiated by the end user through a mouse click and/or a keyboard action, can also be triggered by scripts embedded in the page.

  4. Introducing DHTML (2) • Creating dynamic HTML pages requires you to be familiar with four technologies: • HTML • Cascading Style Sheets (CSS) to alter style specifications • Document Object Model (DOM). The DOM provides the interface to page objects, property settings, and methods belonging to the associated page elements. • A scripting language (such as JavaScript) to speak to and program the page elements you want to change.

  5. Introducing DHTML (2) • HTML tags hold the information contents of a web page. In this respect, we think of HTML tags as containers and to use DHTML you need to be familiar with the common container tags and their various properties and methods. • <P> • <DIV> • <SPAN>

  6. Positioning with Style Sheets • When you code HTML, elements appear on the web page according to the order in which you code their tags. • To override this behavior you apply stylesheets to the tags which allows you to position the elements exactly where you want them. • These positioning style properties as set by the stylesheets are the keys to controlling a Web page’s structure. • These position styles also provide the ability to change an element’s position dynamically.

  7. Positioning Elements • How do you know the exact position of an element within a web page? The primary container element is the web page itself, and any element position within the page is measured relative to the top-left corner (represented by the coordinates 0,0) of the page. • Within the web page, HTML tags serve as containers so that the position of an element located within these tags is measured relative to this container. Just as with the page container, the top-left corner of the tag container is represented by the coordinates 0,0, and top-left settings for the enclosed element are measured relative to the tag container's location.

  8. Positioning Elements (2) • Every element has a natural location within the flow of a web page. Controlling an element’s flow and the effect of other positional settings on the element is done using two positioning methods called relative and absolute positioning. • Relative positioning refers to moving an element with respect to its original location. • Absolute positioning means to specify an element’s precise position with respect to its container.

  9. Relative Positioning <!-- RelativePositioning2.htm --> <span style="position:relative">These</span> <span style="position:relative">words</span> <span style="position:relative">are</span> <span style="position:relative">relative.</span> <!-- RelativePositioning3.htm --> <span style="position:relative">These</span> <span style="position:relative; left:+20px; top:+10px">words</span> <span style="position:relative; left:+50px; top:+20px">are</span> <span style="position:relative; top:-10px; left:+100px">adjusted.</span>

  10. Offsetting an Image From Its Natural Position

  11. Absolute Positioning • The absolute property setting places the element at an exact location in the document. This absolute position can be its natural location in the flow of page elements, or it can be relative to its container element. • Unlike relative positioning, the absolute positioning style not only affects the location of the positioned element; it also affects the location of surrounding elements.

  12. Absolute Positioning (2) • When an element is positioned absolute, subsequent elements are positioned relative to other, nonpositioned, elements. The positioned element is taken out of the flow of nonpositioned elements. <!--AbsolutePositioning1.htm --> ...................................................Here is a nonpositioned text paragraph. <img src="McGrawHillCommunity2.jpg" style="position:absolute"> <p>...................................................Here is a nonpositioned text paragraph.</p>

  13. Positioning Elements in 3D • Elements on a web page can be positioned above or below other elements and after moving elements around on the page you may find that one overlaps another. • The value of z-index is a positive or negative integer to indicate a layer above or below other positioned elements. • Elements with higher z-index values appear on top of elements with lower values. • The text layer has a z-index value of 0. • Positioned elements coded subsequently on the page appear on top of positioned elements coded previously; z-index settings change these original layers.

  14. Hiding and Showing Elements: Implementing A Dropdown Menu <!-- DropdownMenu.htm --> <html><head></head><body> <div id="MENU" style="position:relative; width:80px; text-align:center; background-color:#DC6000; color:#0000FF" onMouseOver="document.all.ITEMS.style.visibility='visible'; this.style.cursor='hand';" onMouseOut="document.all.ITEMS.style.visibility='hidden'"> <b>Menu</b> </div> <div id="ITEMS" style="position:relative; width:100px; text-align:center; background-color:#DEB887; color:#0000FF; visibility:hidden" onMouseOver="this.style.visibility='visible'; this.style.cursor='hand';" onMouseOut="this.style.visibility='hidden'"> <div style="background-color:#DEB887" onMouseOver="this.style.backgroundColor='#9D4602'" onMouseOut="this.style.backgroundColor='#DEB887'" onClick="location='http://www.mcgraw-hill.com'"> <b>McGraw-Hill</b> </div> <div style="background-color:#DEB887" onMouseOver="this.style.backgroundColor='#9D4602'" onMouseOut="this.style.backgroundColor='#DEB887'" onClick="location='http://www.google.com/'"> <b>Google Search</b> </div> <div style="background-color:#DEB887" onMouseOver="this.style.backgroundColor='#9D4602'" onMouseOut="this.style.backgroundColor='#DEB887'" onClick="location='http://www.dell.com/'"> <b>Dell</b> </div> </div></body><html>

  15. Hiding and Showing Elements: Absolute Positioning of the ITEMS Menu <!-- DropdownMenu2.htm --> … <div id="MENU" style="position:relative; width:80px; text-align:center; background-color:#DC6000; color:#FFFFFF" ... </div> <div id="ITEMS" style="position:absolute; width:80px; text-align:center; background-color:#DEB887; color:#FFFFFF; visibility:hidden" ... </div>

  16. The DOM: A Roadmap to a Web Page • The Document Object Model (DOM) is the scripting interface to the HTML objects appearing on a web page. • The DOM describes and relates the structure of components that comprise a web page. It also provides the means for identifying objects and manipulating their properties and methods. • Simply put, the DOM represents a hierarchy of browser components.

  17. The DOM’s General Hierarchy of Browser Components

  18. What Can You Do With the DOM? • The properties you can alter and control via the Document Object Model (DOM) include: • Changing the CSS properties of an element on screen • Hiding or show elements on the screen • Controlling the position of elements • Moving elements on the screen

  19. Specifying Elements HTML forms support the NAME attribute, which allows you to use an assigned name to reference an object: <form name="MyFirstForm"> Text Field: <input name="MyFirstField" type="text"> </form> so, the DOM reference to the text field object is document.MyFirstForm.MyFirstField. Only HTML forms support NAME attribute so you must use ID values to identify all other HTML tags. For example: <p id="MyFirstParagraph"> This paragraph has an ID value. </p> The DOM reference to this paragraph object is: document.all.MyFirstParagraph

  20. Referencing Properties and Methods • With proper reference to a page object you can change an element’s attributes on the fly. This is how you put the “D” in HTML; change property settings and call processing methods and HTML becomes dynamic. • You reference the properties and methods associated with particular objects by appending the property name or the method name to the end of the object reference.

  21. User’s Initiated Event and Its Subsequent Actions • There are two kinds of scripts, those that execute when a page loads and those that execute in reaction to something a visitor has done. The latter lends an air of interactivity. This is what engages a visitor and holds them to the page.

  22. Understanding User Events • Changes to a web page can be initiated by user actions or other events that take place after the page is loaded. For example: • The user points the mouse cursor to a block of text or to a graphic image appearing on the page • The user clicks the mouse button on the element • Moves the mouse across the element • Releases the mouse button while hovering over the element. • A keystroke is detected.

  23. Coding Event Handlers All HTML tags are sensitive to particular events and provide event handlers to react to those events. The event handler connects an action in the browser window to a Java Script which in turn issues commands. In the following code example, the script employs four event handlers – onMouseOver, onMouseDown, onMouseUp, and onMouseOut: <!-- MouseEvents.htm --> <html><body><form> <input type="button" value="A Button" onMouseOver="this.value='Mouse is over'" onMouseDown="this.value='Mouse is down'" onMouseUp="this.value='Mouse is up'" onMouseOut="this.value='Mouse is out' "> </form></body></html>

  24. Coding Event Handler Scripts This button demonstrates the call to a function containing multiple statements in response to a mouse click: <!-MultipleStatements1.htm --> <html><head> <script language="Javascript"> function ChangeButton(ThisButton) { ThisButton.value = "Changed Button" ThisButton.style.backgroundColor = "red" ThisButton.style.color = "white" ThisButton.style.fontFamily = "impact" ThisButton.style.fontSize = "14pt" } </script> <head><body><form> <input type="button" value="Original Button" onClick="ChangeButton(this)"> </form></body></html>

  25. Making it Dynamic • HTML elements that have been positioned as relative or absolute can be repositioned through scripting. Repositioning involves changing the element’s left and top style settings. • There are four properties that can be scripted to effect this change. • left • top • pixelLeft • pixelTop

  26. Making it Dynamic (2) • The left and top properties are treated as string values. The stored value is in the form "50px". Thus, this pair of property settings can only be used when replacing a current positional value with a different string value. You cannot use left or top if you need to perform calculations to derive these settings. • Where you need to calculate a positional setting the pixelLeft and pixelTop properties are provided. These two properties treat positions as numbers rather than as strings – as the numeric value 50 rather than the string value "50px".

  27. The End

More Related