Download presentation
Presentation is loading. Please wait.
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.