Presentation is loading. Please wait.

Presentation is loading. Please wait.

Using DHTML to Enhance Web Pages

Similar presentations


Presentation on theme: "Using DHTML to Enhance Web Pages"— Presentation transcript:

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

7

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.

9

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

11

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

13

14

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

16

17

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

27

28

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

31

32

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

35

36

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

38

39

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

42

43

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

45

46

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

48

49

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

52

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

54

55

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

57

58

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

61

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

64

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

67

68

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

70

71

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

73

74

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

77

78

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

80

81

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

84

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

86

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

88

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

90

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

93

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

95

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

97

98

99

100

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

102

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

104

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

106

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

108

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

110

111

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

115

116

117

118

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

120

121

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

123

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

125

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

127

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

130

131

132

133

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

135

136

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

139

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

141

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

143

144

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

150

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


Download ppt "Using DHTML to Enhance Web Pages"

Similar presentations


Ads by Google