1. Using DHTML to Enhance Web Pages
Project 10
Using DHTML to Enhance Web Pages

2. Objectives Define DHTML and explain its uses in Web page development
Define the document object model (DOM)
Write code to differentiate between Internet Explorer and Netscape browsers
Create a cross browser scrolling marquee
Create dynamic layer areas using JavaScript
Use the eval() global function to create code usable in both browsers

3. Objectives Integrate cascading style sheets into JavaScript statements
Use onMouseover and onMouseout event handlers to execute pop-up ScreenTips
Use ID and CLASS properties in a style sheet
Integrate the <SPAN> tag in JavaScript statements
Embed style commands in the <SPAN> tag in JavaScript statements

4. Objectives Use the JavaScript setTimeout() and clearTimeout() methods
Use the JavaScript write() method to write text directly to the document
Call JavaScript functions directly with the JavaScript command
Use the JavaScript close() method to close a browser window

5. Introduction
Dynamic HTML pages are more animated and more responsive to user interaction than basic HTML pages
DHTML combines HTML, CSS, and a scripting language
Positioning specifies where you place elements
Document Object Model (DOM)
Hierarchical naming system that makes certain elements on a Web page accessible as objects to scripting languages

6. The Scrolling Marquee and a Scrollable Menu
This project component will involve a scrolling marquee and a scrollable menu, which will have links to four Web Pages
A ScreenTip is text that displays on the screen to provide additional information about a selected item

8. Starting Notepad, Opening an HTML File, and Saving an HTML File
Start Notepad and maximize the window
Insert the HTML Data Disk in drive A. Open the file, studentservices.htm, in the Project 10 folder on the HTML Data Disk.
Click File on the menu bar and then click Save As. Type studentservices-index.htm in the File name text box. Save this to the Project 10 folder on your HTML Data Disk in drive A.

10. Creating a Scrolling Marquee
Use the <MARQUEE> tag for IE browsers, or the layer object for Netscape browsers

12. Creating the SCRIPT Section for a Scrolling Marquee
Click line 22
Enter the JavaScript code on the following slide

15. Using an If...Else Statement to Determine Browser Type and Dynamically Write Code
The navigator object determines which browser type and version a Web page visitor is using
Click line 39
Enter the JavaScript code on the following slide

18. Saving and Testing the Web Page
If necessary, insert the HTML Data Disk in drive A
Click File on the menu bar and then click Save

19. Viewing and Testing a Web Page
Start your browser. If necessary, click the Maximize button
Click the Address bar. Type a:\Project 10\studentservices-index.htm and then press the ENTER key

20. Click the link, here, in the scrolling marquee

21. Viewing and Testing a Web Page
Click the Back button on the browser toolbar to return to the Student Services Web page

22. Creating the Scrollable Menu

23. Creating the SCRIPT Section for the Scrollable Menu
Contains three elements
An event handler that calls the user-defined function, loadMenu()
JavaScript code that writes HTML to place the left arrow image and the area for the scrollable menu text in a table
Event handlers to start and stop the scrolling when the mouse pointer points to an arrow

24. Creating the SCRIPT Section for the Scrollable Menu
With statement
Allows developers to work with an object’s properties and methods in multiple lines of code

25. Creating the SCRIPT Section for the Scrollable Menu
clearTimeout() method
Clears a time-delayed command passed to the method

26. Creating the SCRIPT Section for the Scrollable Menu
Click line 63
Enter the JavaScript code on the following slide

29. The <SPAN> Tag
Used to identify a specific section or element on a page
The CLIP attribute
Allows a Web developer to define an area through which an object’s content can be viewed

30. Entering Code to Write <SPAN> Tags Dynamically
Click line 75
Enter the JavaScript code on the following slide

33. The <ILAYER> and <LAYER> Tags
Used because Netscape does not recognize the <SPAN> tag

34. Entering the Code to Write <ILAYER> and <LAYER> Tags Dynamically
Click line 83
Enter the JavaScript code on the following slide

37. Entering Code to Complete the SCRIPT Section for a Scrollable Menu
Click line 87
Enter the JavaScript code on the following slide

40. Writing User-Defined Functions for a Scrollable Menu
Uses three user-defined functions
(1) loads and displays the menu when the Web page loads
(2) scrolls the text to the left and stops the scrolling based on the location of the mouse pointer
(3) scrolls the text to the right and stops the scrolling based on the location of the mouse pointer
This code goes in the HEAD section of the Web page

41. Entering Code to Initialize the Variables and Write the loadMenu Function
Click line 4
Enter the JavaScript code on the following slide

44. Adding a User-Defined Function to Scroll the Menu to the Left
The scrollItLeft() user-defined function moves the text 6 pixels to the left each time the onMouseover event triggers the function
Click line 23
Enter the JavaScript code on the following slide

47. Adding a User-Defined Function to Scroll the Menu to the Right
Click line 33
Enter the JavaScript code on the following slide. Do not press the ENTER key after entering the final line of code

50. Saving an HTML File and Testing a Web Page
With your HTML Data Disk in drive A, click File on the menu bar and then click Save
Click the browser button on the taskbar
Click the Refresh button on the browser toolbar
Position the mouse pointer over the left arrow to scroll the menu. After the Financial Aid item displays, move the mouse pointer off the left arrow

51. Saving an HTML File and Testing a Web Page
Position the mouse pointer over the right arrow to scroll the menu. After the Academic Assistance item displays, move the mouse pointer off the right arrow

53. Entering a User-Defined Function to Open a Pop-up Window
Pop-up windows display a new Web page in a new browser window
Click line 42 and then press the ENTER key
With the insertion point on line 43, enter the JavaScript code on the following slide

56. Entering the User-Defined Functions to Open the Remaining Pop-up Windows
Click line 47
Enter the JavaScript code shown on the following slide

59. Entering Code to Display the Date Last Modified
Click line 157
Type <SCRIPT LANGUAGE=“JAVASCRIPT”> and then press the ENTER key
Type <!-- Hide from old browsers and then press the ENTER key
Type document.write(“<H6><CENTER>This Web page written by Students of LMCC<BR>”) and then press the ENTER key

60. Entering Code to Display the Date Last Modified
Type document.write(“Copyright 2003<BR>”) and then press the ENTER key
Type document.write(“Last Update: “+document.lastModified+”</CENTER></H6>”) and then press the ENTER key
Type //--> and then press the ENTER key
Type </SCRIPT> and do not press the ENTER key
Save the modified file to the HTML Data Disk

62. Creating the Pop-up Window Web Page
popUp() uses a combination of JavaScript functions and style sheets to display the ScreenTip text
Requires five steps
Adding the JavaScript code for popUp()
Adding the style sheet code
Adding the anchor tag links
Adding the Close hyperlink
Adding the <SPAN> tags containing ScreenTip text

63. Creating the Academic Assistance Web Page
If necessary, start Notepad and maximize the window
Open the file, academic.htm, in the Project 10 folder on the HTML Data Disk in drive A
Click File on the menu bar and then click Save As. Type academicassistance.htm in the File name text box. Save to the Project 10 folder on the Data Disk. Click the Save button in the Save As dialog box

65. Defining the Objects for the ScreenTips
The SCRIPT section in the HEAD section of the page includes
The JavaScript code for the user-defined function, popUp()
The style sheet code that defines how the ScreenTips display
eval() function

66. Entering the JavaScript Code to Begin the popUp() User-Defined Function
Click line 4
Enter the code on the following slide

69. Entering an eval() Function that Defines the DOM Object
Click line 20
Enter the JavaScript code on the following slide

72. Entering Code to Set the Top and Left Positions of a DOM Object
Click line 26
Enter the JavaScript code on the following slide

75. The Academic Assistance Style Sheet

76. Using ID Selectors in a Style Sheet
Click line 47
Enter the CSS code on the following slide

79. Using CLASS Selectors in a Style Sheet
Click line 58
Enter the CSS code shown on the following slide

82. Entering a Hyperlink and Event Handlers to Call the popUp() Function
Click line 74 to the right of the text, Who is
Press the SPACEBAR once
Type <A HREF=“JAVASCRIPT:popUp(null,0)” onMouseover=“popUp(event,’Popup1’)” onMouseout=“popUp(event,’Popup1’)”> and do not press the ENTER key

83. Entering a Hyperlink and Event Handlers to Call the popUp() Function
Click to the right of the word, eligible
Type </A> and do not press the ENTER key

85. Entering a Hyperlink and Event Handlers to Call the popUp() Function
Click line 86 to the left of the words, self-help guides
Type <A HREF=“JAVASCRIPT:popUp(null,0)” onMouseover=“popUp(event,’Popup2’)” onMouseout=“popUP(event,’Popup2’)”> and do not press the ENTER key
Click to the right of all the words, self-help guides
Type </A> and do not press the ENTER key

87. Creating a Hyperlink with the Window
Creating a Hyperlink with the Window.close() Method to Close a Pop-up window
Click line 90
Type <A HREF=“JAVASCRIPT:window.close()”>Close</A> and do not press the ENTER key

89. Entering <SPAN> Tags for Pop-up ScreenTips
Click line 94
Enter the following code

91. Saving and Testing the Academic Assistance Web Page
With your HTML Data Disk in drive A, click File on the menu bar and then click Save
Click the browser button on the taskbar to display the Student Services Web page
Click the Refresh button on the browser toolbar
Click the Academic Assistance menu choice in the scrollable menu

92. Saving and Testing the Academic Assistance Web Page
When the Academic Assistance pop-up window displays, move the mouse pointer over the hyperlinked word, eligible, to view the ScreenTip
Move the mouse point over the hyperlinked words, self-help guides
Click the Close link at the bottom of the page to close the pop-up window

94. Opening and Saving the student.htm File With a New File Name
With the Notepad window still maximized, open the file, student.htm, in the Project 10 folder on the HTML Data Disk in drive A
Click File on the menu bar and then click Save As. Type studentlife.htm in the File name text box. Save to the Project 10 folder on the HTML Data Disk

96. Adding the popUp() Function to the Student Life Web Page
Click line 4
Enter the JavaScript code shown on the following slides

101. Entering the Style Sheet for the Student Life Web Page
Click line 47
Enter the style sheet code on the following slide

103. Entering Hyperlinks and Event Handlers to Call the popUp() Function
Click line 74 to the right of the text, What is
Press the SPACEBAR once
Type <A HREF=“JAVASCRIPT:popUp(null,0)” onMouseover=“popUp(event,’Popup1’)” onMouseout=“popUP(event,’Popup1’)”> and do not press the ENTER key
Click to the right of ? (the question mark)
Type </A> and do not press the ENTER key

105. Entering Hyperlinks and Event Handlers to Call the popUp() Function
Click line 78 to the left of the word, services
Type <A HREF=“JAVASCRIPT:popUp(null,0)” onMouseover=“popUp(event,’Popup2’)” onMouseout=“popUP(event,’Popup2’)”> and do not press the ENTER key
Click to the right of the word, services
Type </A> and do not press the ENTER key

107. Entering the close() Method to Close a Pop-up Window
Click line 84
Type <A HREF=“JAVASCRIPT:window.close()”>Close</A> and do not press the ENTER key

109. Entering <SPAN> Tags for Pop-up ScreenTips
Click line 88
Enter the HTML code on the following slide

112. Saving the Student Life Web Page
With your HTML Data Disk in drive A, click File on the menu bar and then click Save

113. Opening and Saving the Counseling Web Page and Then Adding the popUp() Function
Open the file, counsel.htm, in the Project 10 folder on the HTML Data Disk in drive A
Click File on the menu bar and then click Save As. Type counseling.htm in the File name text box. Save to the Project 10 folder on the HTML Data Disk

114. Adding the popUp() Function to the Student Life Web Page
Click line 4
Enter the JavaScript code shown on the following slides

119. Entering the Style Sheet for the Counseling Services Web Page
Click line 46
Enter the style sheet code on the following slide

122. Entering Hyperlinks and Event Handlers to Call the popUp() Function
Click line 72 to the left of the words, Counseling Services
Press the SPACEBAR once
Type <A HREF=“JAVASCRIPT:popUp(null,0)” onMouseover=“popUp(event,’Popup1’)” onMouseout=“popUP(event,’Popup1’)”> and do not press the ENTER key
Click to the right of the words, Counseling Services
Type </A> and do not press the ENTER key

124. Entering the close() Method to Close a Pop-up Window
Click line 84
Type <A HREF=“JAVASCRIPT:window.close()”>Close</A> and do not press the ENTER key

126. Entering a <SPAN> Tag for a Pop-up ScreenTip
Click line 88
Type <SPAN ID=“Popup1” CLASS=“PopupText”>Academic and personal-needs counselors are available to guide you through your time on campus.</SPAN> and then press the ENTER key

128. Saving the Counseling Services Web Page
With your HTML Data Disk in drive A, click File on the menu bar and then click Save

129. Opening and Saving the Financial Aid Web Page and then Adding the popUp() Function
Open the file, financial.htm, in the Project 10 folder on the HTML Data Disk
Save the file with the file name, financialaid.htm
Click line 4
Enter the JavaScript code on the following slides

134. Entering the Style Sheet for the Financial Aid Web Page
Click line 47
Enter the style sheet code on the following slide

137. Entering Hyperlinks and Event Handlers to Call the popUp() Function
Click line 84 to the left of the word, Scholarships
Press the SPACEBAR once
Type <A HREF=“JAVASCRIPT:popUp(null,0)” onMouseover=“popUp(event,’Popup1’)” onMouseout=“popUP(event,’Popup1’)”> and do not press the ENTER key
Click to the right of word, Scholarships
Type </A> and do not press the ENTER key

138. Entering Hyperlinks and Event Handlers to Call the popUp() Function
Click line 87 to the left of the word, Grants
Press the SPACEBAR once
Type <A HREF=“JAVASCRIPT:popUp(null,0)” onMouseover=“popUp(event,’Popup2’)” onMouseout=“popUP(event,’Popup2’)”> and do not press the ENTER key
Click to the right of the word, Grants
Type </A> and do not press the ENTER key

140. Entering the close() Method to Close the Financial Aid Web Page
Click line 101
Type <A HREF=“JAVASCRIPT:window.close()”>Close</A> and do not press the ENTER key

142. Entering <SPAN> Tags for the Pop-up ScreenTips
Click line 105
Enter the HTML code on the following slide

145. Saving the Financial Aid Web Page
With your HTML Data Disk in drive A, click File on the menu bar and then click Save

146. Testing the Student Services Web Page
Click the browser button on the taskbar
Click the Refresh button on the browser toolbar
When the Student Services Web page displays, move the mouse pointer over the left arrow
Click Student Life in the scrollable menu

147. Testing the Student Services Web Page
When the Student Life pop-up window displays, position the mouse pointer over the hyperlink, Services. Move the mouse pointer off the hyperlink. Click the Close hyperlink
Position the mouse pointer over the left arrow until the Financial Aid menu choice displays in the scrollable menu. Click Financial Aid

148. Testing the Student Services Web Page
When the Financial Aid pop-up window displays, position the mouse pointer over the hyperlink, Grants. Move the mouse pointer off the hyperlink. Click the Close hyperlink
Position the mouse pointer over the right arrow until the Counseling Services menu choice displays in the scrollable menu. Click the Counseling Services menu choice

149. Testing the Student Services Web Page
When the Counseling Services pop-up window displays, position the mouse pointer over the hyperlink, Counseling Services. Move the mouse pointer off the hyperlink. Click the Close hyperlink

151. Closing Notepad and Your Browser
Click the Close button on the browser title bar
Click the Close button on the Notepad window title bar

152. Summary Define DHTML and explain its uses in Web page development
Define the document object model (DOM)
Write code to differentiate between Internet Explorer and Netscape browsers
Create a cross browser scrolling marquee
Create dynamic layer areas using JavaScript
Use the eval() global function to create code usable in both browsers

153. Summary Integrate cascading style sheets into JavaScript statements
Use onMouseover and onMouseout event handlers to execute pop-up ScreenTips
Use ID and CLASS properties in a style sheet
Integrate the <SPAN> tag in JavaScript statements
Embed style commands in the <SPAN> tag in JavaScript statements

154. Summary Use the JavaScript setTimeout() and clearTimeout() methods
Use the JavaScript write() method to write text directly to the document
Call JavaScript functions directly with the JavaScript command
Use the JavaScript close() method to close a browser window

155. What You Should Know

156. Project 10 Complete