----------------------- Monday, June 26th, 1999 ----------------------
The objectives for the following hands-on lab exercise:
1. Make you familiar with the process of multitasking using Windows 95
and Windows NT interface. You'll switch between two programs.
2. Give experience and/or review of basic web browser and html concepts.
3. Show what web page scripting languages can do and how it is possible
to make your web page more dynamic using scripting languages like
JavaScript and VBScript. (This is NOT ever required for your web page!)
4. Reinforcing the concept that the Z: drive is your home directory
on chaos and the web folder you have there is for all of your
web pages, whether html files or graphics files.
----------------------------------------------------------------------------
This lab exercise requires Microsoft INTERNET EXPLORER. Do NOT use Netscape.
----------------------------------------------------------------------------
The URL for today's file is: http://www.cns.uni.edu/~jacobson/zoomer.html
Since it uses ActiveX controls and VBScript, you should use Microsoft
Internet Explorer instead of using Netscape to view it.
Zooming Ghostbuster's Sign
The headline of this text has a tendency to go far away and then come
back again at a very rapid pace. But it only seems to happen when you
push this button here:
******* VIP *** ***
1. Try out this web page by clicking the Start button and the Stop button
a few times. (Start up Internet Explorer and use the URL to get to it).
The URL is
http://www.cns.uni.edu/~jacobson/zoomer.html
2. Do the View menu Source command. The Microsoft Internet Explorer program
automatically starts up the Notepad program.
3. Using the Notepad editor, change the
from
Zooming Ghostbuster's Sign to <TITLE> your name's Zoom experiment
4. Find the 5th line after the tag. It has the word that zoomed.
Change the VALUE="Caption" from VALUE="Ghostbusters"
to VALUE="YourFirstName YourLastName".
5. Now it is time to use the Notepad program's File menu, Save As command
and save the file on the Z: drive inside of your web folder. If you do
not yet have a web folder, please ask for help.
When you are sure you have found your Z: drive and opened up your web
folder, name the file Z1.html (Z as in Zoo or Zebra, 1 as in ONE or 1,2,3).
6. Click on Zooming Ghostbuster's Sign on your Taskbar to Switch To the
Internet Explorer program. The Taskbar is at the bottom of your screen.
In the Address textbox, type in the following as the URL:
Z:\Web\Z1.html and then press Enter to see your web page.
7. After trying out your z1.html page, switch back to the Notepad program
by using the Taskbar to find z1.html - Notepad icon and single clicking
on it. Have the instructor show you another way of switching too.
Please ask now. Switching between tasks is a very important skill.
8. Find the 6th line after line. Its the line after your 1st name!
Change the ANGLE="0" to ANGLE="5" and do the Notepad File menu Save
command. This will save the new version of z1.htm with the change
that we have just made.
9. Switch back to the Internet Explorer browser program and click on the
Refresh button. It is the 4th button on the toolbar. Is your name
now slightly different looking?
9b. Switch back to editing your page (z1.html - Notepad icon on taskbar).
Change the FontSize to 25 (VALUE="12" is the current setting).
This will be about the the 14th line after the tag line.
10. Change the Interval to 150 (This is 3 lines before the tag,
toward the very end of your z1.html file).
11. Change the three line script for the Sub ZoomTimer_Timer() program
to the following:
If ZoomLabel.Angle > 4 Then direction = -1
If ZoomLabel.Angle < -4 Then direction = 1
ZoomLabel.Angle = ZoomLabel.Angle + direction
Notice that all you are really doing is
changing the word FontSize to the word Angle, and
changing 30 to 4 and 13 to -4 here. -----
- --
The 3 lines you are changing are
between the Sub ZoomTimer_Timer() line
and the End Sub line.
12. Use Notepad's File menu Save As command and save the file inside your
web folder on your Z: drive home directory with the name z2.html
instead
of z1.html. WE ARE SAVING THE FILE WITH A NEW NAME, z2.html is the name!
13. Switch back to the Internet Explorer browser program and type the new
URL into the Address: textbox. You should be able to just edit the
z1.html and change it to z2.html and then press Enter.
14. Try out your new page. What does it do?
15. Now lets try changing the color of the text. Switch back to the
Notepad program (it is still an edit of file z2.htm, on the Taskbar).
16. Very carefully change the 3 line script for the Sub ZoomTimer_Timer()
program to the following 5 line program:
If ZoomLabel.ForeColor = RGB(255,0,0) Then
ZoomLabel.ForeColor = RGB(128,0,0)
Else
ZoomLabel.ForeColor = RGB(255,0,0)
End If
RGB stands for Red, Green, Blue color values, i.e. (Red, Green, Blue)
Each value can go from 0 to 255.
Thus (255,0,0) is the brightest RED color available, and
(128,0,0) would be a duller RED color.
17. After you have made these changes, Notepad program File menu Save As
command should be used. Save the new web page by naming the file z3.html.
18. Switch to the Microsoft Internet Explorer web browser program again.
Edit the Address: by changing z2.html to z3.html and then press Enter.
Try out the new web page. What do you think of the effect?
19. Switch back to Notepad program and editing of z3.html web page file.
Change the Interval value, the 3rd line before the tag, to
VALUE="500" and then File menu Save the changes.
20. Switch to the web browser program again. Click on the Refresh button.
Run the program again. Do you like the slower effect?
21. Put the following TAGS into your z3.html file by again using the
Notepad editor program. Put the and the tags
into your z3.html file as follows:
Place the tag just before the
tag that preceeds the
words
" The headline of this text has a tendency to ... "
Place the tag
just after the line that reads:
" push this button here:
"
22. Switch to the Microsoft Internet Explorer program again. You will
need to do the Refresh button on the Internet Explorer toolbar to
get the newest version of z3.html loaded. What did the Horizontal
Ruler tags (