Transcript Positioning Elements - McGraw

Chapter 9
Understanding
Dynamic HTML
Barry Sosinsky
Valda Hilley
Programming the Web
McGraw-Hill/Irwin
© 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
9-2
Learning Objectives
• Working with CSS
• Using the DOM
• Writing JavaScript to handle events
• Basic DHTML techniques
9-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.
9-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.
9-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>
9-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.
9-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 topleft 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.
9-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-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>
9-10
Offsetting an Image From Its Natural
Position
9-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.
9-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>
9-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.
9-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>
9-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>
9-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.
9-17
The DOM’s General Hierarchy of Browser
Components
9-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
9-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
9-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.
9-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.
9-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.
9-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>
9-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>
9-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
9-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".
9-27
The End
McGraw-Hill/Irwin
© 2004 by The McGraw-Hill Companies, Inc. All rights reserved.