Working with Dynamic Page Layout

1. Working with Dynamic Page Layout Maureen Smith Professor, Saddleback College CIM 271B - Tutorial 1

2. Objectives • In this tutorial you will: • Arrange objects using CSS positioning attributes • Learn about the history and theory of DHTML • Learn how DHTML is implemented on different browsers • Work with cross-browser DHTML pages • Create and link to an API of customized JavaScript functions

3. Arrange objects using JavaScript • Create an animation using JavaScript

4. Session 1.1 • In this session you’ll be introduced to the theory and history of DHTML • Will learn how to control the placement of objects on your Web page with CSS • Will learn about style sheet attributes that control the appearance of your objects • Finally, will apply your knowledge to design layout of an opening page for Avalon books

5. Introduction to DHTML • Early in HTML development, were limited to static Web pages • Authors/browser developers began to look for ways to create more dynamic presentations whose content and design could be changed after page had been loaded • Early attempts involved applets (small programs browser would retrieve and install along with Web page)

6. Starting with 4.0 versions of Netscape and IE, a new approach was offered • HTML code itself supported dynamic elements • Unlike applets, no additional software was needed to create and display dynamic pages • These enhancements are known as dynamic HTML or DHTML • DHTML involves interaction of 3 elements:

7. The HTML code of the page • Cascading style sheets to define appearance • A scripting language, usually JavaScript or VBScript, to control behavior of elements • By working with these elements, author can create documents that dynamically interact with the user • Some uses for DHTML include:

8. Animated text that moves and changes in response to user action • Pop-up menus that provide users with quick access to other pages in site without devoting valuable screen space to a long, complicated list of links • Web pages that retrieve their content from external data sources, giving authors more freedom in type of material they can display

9. Terry wants you to create an opening page for Avalon Books that contains animated text and graphics • Figure 1-1 shows general appearance and content she wants • Image of Avalon Books’ best-selling fiction book • Image of Avalon Books’ best-selling nonfiction book

10. Image of a person reading a book, which contains a link to rest of the site • Text string “Avalon” • Text string “Books” • Terry wants single word “Avalon” to appear near top of page and drop vertically down • At a certain point, it should stop dropping and the word “Books” should appear, moving to right from behind “Avalon”

11. After that, three other images should appear on screen in sequence (see Figure 1-2) • To create this page, need to know how to place objects at specific coordinates • Then need to know how to move those objects • Placing objects on page can be done by using style attributes of the CSS language

12. Positioning Objects with CSS • Cascading style sheets were originally used to control appearance of content • An extension called CSS-Positioning, or CSS-P, added ability to control layout of the page • Eventually became part of CSS2 specs, though will still occasionally see term “CSS-P” used to refer specifically to those style attributes • With CSS, can define position of any element enclosed in a two-sided HTML tag

13. Style attributes for positioning an object are: position:position_type; left:value; top:value; • where position_type indicates type of positioning used with the object, left indicates location of left edge of the object, and top indicates location of object’s top edge • Left and top values can be defined in absolute coordinates or as a percentage of width of parent object

14. Default unit is pixels • There are four possible values for position attribute: absolute, relative, fixed, static • An absolute position places object at a defined coordinate in the document, regardless of the object’s initial location or the location of other objects on the page

15. Figure 1-3 shows object that has been placed at the (30, 100) coordinate on the page, that is, 30 pixels to the right and 100 pixels down from upper-left corner of display window • Absolute position is always determined relative to upper-left corner of parent object • A positive top value places object down from top edge; a negative value places object above top edge

16. Similarly, a positive left value places object to right of left edge and a negative value places object to left of the left edge • In most cases, the parent object will be browser’s display window, but as shown in Figure 1-4, object can also be positioned within another element on the page • 30 pixels to right and 100 down from upper-left corner of its parent element

17. A relative position places object a a point relative to its location in the natural flow of the document • Object shown in Figure 1-5 is moved 30 pixels to left and 100 down from where browser would have originally placed the object • Placing an object by using relative positioning can be an exercise in frustration

18. How will you know default location of object unless you first render page in your browser? • Even then, default location may change from one browser to another as well as under different monitor resolutions • General rule is to use absolute positioning whenever you have objects that are seemingly independent of each other and use relative positioning for objects that appear related

19. Figure 1-6 shows how relative positioning can be used to achieve interesting visual effect with words within a sentence • Fixed position value places object at a fixed location in window • Object will remain at that fixed position and will not scroll with other elements • Currently major browsers do not support fixed attribute value

20. The static position value places object in its natural position in the flow of the document as determined by the browser • You are letting the browser handle layout of the object for you • If you use static positioning, you cannot define values for the top and left attributes

21. Layering Objects • Frequently, positioned objects overlap • When this happens you need to specify which object is placed on top • By default, objects that appear later in HTML file are placed on top of earlier elements • To specify your own stacking order, use the z-index style attribute: z-index: value;

22. where value is a positive or negative integer, or the value “auto” • Objects with a higher z-index value are placed on top of objects with lower z-indexes • Figure 1-7 shows effect of z-index • If two objects have same z-index value, object defined later will be shown on top

23. A z-index value of 0, or “auto” causes object to be placed in its default layer, just as if no z-index value was defined in the first place • Note that the z-index attribute has no effect for objects from within different parent elements • Z-index value can only be used to layer objects within same parent element

24. Controlling Object Visibility • Usually the only reason for hiding an object is that you’re going to “unhide it” later using a script • Can do this by using visibility attribute: visibility: visibility_type; • where visibility_type is visible, inherit, or hidden • The visible makes the object visible on page

25. Setting visibility attribute to inherit (default) causes object to inherit the visibility property of its parent element • Setting it to hidden causes browser to hide object, but the object still takes up space on page and browser will have to flow other document objects around it • If you want to hide object and have it take up no space, use display attribute with value “none”

26. display: none; • Figure 1-8 shows difference between visibility: hidden and display:none attribute • Only IE allows you to change display attribute after the browser has loaded page

27. Working with Overflow and Clipping • Other attributes to consider when using CSS for layout are the dimensions of your object • Can define width and height of each object by using width/height attributes width: value; height: value; • where value is the width and height values as measured in absolute or relative units, or as a percentage of width or height of parent element

28. If you do not define height/width values, browser will choose one based on content of the object • If content of object is greater than dimensions you’ve allowed, can control how browser handles extra content overflow: overflow_type; • where overflow_type is visible, hidden, scroll, or auto

29. Setting it to visible causes browser to increase size to fit the extra content (default) • In case of text, browser will usually only increase object’s height, leaving width at the specified value • Using an overflow value of hidden keeps object at the specified size and hides extra content • If set to scroll, browser keeps object at specified size and adds scroll bars to view extra content

30. Setting it to auto will display scroll bars only as needed • See Figure 1-9 • Netscape through 4.7 supports only hidden and visible values; IE supports all four • Closely related to overflow attribute is the clip attribute • Allows you to define a rectangular region through which object’s content can be viewed

31. Anything that lies outside boundary of the rectangle is hidden • Clipping can be used to hide certain portions of the page’s content until needed clip: rect(top, right, bottom, left); • where top, right, bottom, left define coordinates of the rectangle • The coordinates are all relative to top and left edges of the object

32. A clip value of rect(10, 175, 125, 75) defines a rectangle whose top and bottom edges lie 10 and 125 pixels from top edge of object and whose right and left edges lie 175 and 75 pixels from object’s left edge • See Figure 1-10 • The top, right, bottom, left values can also be set to “auto,” which moves clipping region to top, right, bottom, left edges of the object

33. A clip value of rect(10, auto, 125, 75) creates a clipping rectangle whose right edge matches the right edge of the object, while the rest of the edges are clipped • Clip attribute can be used only with absolute positioning

34. Creating an Opening Screen for Avalon Books • Ready to create an opening screen for Avalon Books • First task will be to position items on page using various CSS positioning attributes • See Avalon.html • Each object (including words “Avalon” and “Books”) has been placed in a separate <DIV> container tag

35. Not necessary at this point to put the two words in separate containers, will prove useful later on when you apply animation to page • Also note that each object has a different ID value • The script you’ll write will use these ID values as a reference for each object • To position these objects, will use absolute positioning

36. By trial and error, you arrive at following coordinates for each object: • Place word “Avalon” at (175,260)--175 pixels from left edge of window and 260 down from top edge • Place word “Books” at (320,260) • Place AB.jpg at (230,40) • Place Fiction.jpg at (5,5) • Place NFiction.jpg at (475,5)

37. When you use absolute positioning, important to make sure that coordinates work for different monitor resolutions • If you place object at (750,500), will be off the screen for users with 640 x 480 monitors! • Now can modify each object’s style to include this info • See Avalon_13.html

38. Terry gives you go ahead to add animation to page • Will start by learning how to use style attributes in JavaScript program

39. Session 1.2 • In this session you will learn how DHTML is implemented in Netscape and IE • Will see how to detect the type of browser your user is running and how to create code that works for both • Will learn how to create an API, an external file of customized commands and functions • Will see how to write JavaScript to modify style attributes of your objects

40. The Document Object Model • Writing DHTML code requires an understanding of the document object model, or DOM, which (in theory) makes every element available to the scripting language • In actual practice most browsers do not offer a complete DOM, though versions 4.0/5.0 of IE come close

41. By accessing the document object model through DHTML, author can write scripts that control almost every element • Document is not longer static, but becomes an app that can be manipulated in response to actions by user or programs written by page developer • Document model can be thought of as a hierarchy of elements, with window object at top of the tree

42. See Figure 1-13

43. Element Collections • In JavaScript you translate this hierarchy into reference names, which indicate location of element in DOM hierarchy • Elements can be grouped into element collections, which are arrays of all the elements of a particular type document.collection[i].property; • where collection is name of the collection,

44. i is either an index number or ID name of the collection object • property is a JavaScript property of the object • First object in collection has an index number of 0 • Can also use ID names of individual elements in place of index number • Syntax of this type of reference name is either:

45. document.collection[“id”] or document.collection.id • where id is the ID name of the element • Figure 1-14 describes different element collections and browser support • Not all element collections are supported by both Netscape and IE

46. For example, the object reference to first linked item named Home can be expressed using any of the following reference names: document.links[0] document.links[“Home”] document.links.Home

47. Referencing <DIV> Containers • For Avalon Books, will need to create reference names for various <DIV> elements located on opening page • Netscape and IE use different references for <DIV> tags • Netscape refers to objects formatted with <DIV> tag as layers and places them in the layers collection

48. document.layers[‘id”] document.layers.id document.id • where id is ID name given to <DIV> tag • Reason that Netscape uses layers collection is that there is a Netscape-supported tag called <LAYER> tag which is similar to <DIV> tag • In IE, reference syntax for same object can be any of the following:

49. document.all[“id”] • document.all.id • id • For example, if in your document you have created following tag: <DIV ID=“Greetings”>Welcome to Avalon Books</DIV>

50. Can refer to this object in Netscape by using any of the following reference names: document.layers.Greetings document.layers[“Greetings”] document.Greetings • while in IE, would probably use: document.all.Greetings document.all[“Greetings”] Greetings