CSci 220 - Lecture 23

Web Page Design

© Morris Firebaugh

 

A. Introduction




B. New GoLive 5.0 Features


For GoLive instruction, see Training Videos


 
C. More JavaScript Syntax

Recall, JavaScripts may be multiple and appear in either the <HEAD> or <BODY>, and are generally of the form:

<SCRIPT  LANGUAGE = "JavaScript">
   script goes here
</SCRIPT>

To link to a JavaScript file:


<HEAD>
<TITLE>My Page</TITLE>
<SCRIPT SRC="common.js">
...
</SCRIPT>
</HEAD>
<BODY>


D. Examples of JavaScript - RollOvers

Example 1: JavaScript code segments to set HTML tab attributes

The following code:

<script language="JavaScript1.2">
<!--
var barWidth=50
var barSize=7
var solid=true
document.write(barWidth,"   ",barSize)
// -->
</script>

<noedit>
<hr width="&{barWidth};%" size="&{barSize};" noshade="&{solid};" align="left">
</noedit>

Produces:





Example 2: Four Button Rollover

The code for firebaugh.html:


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">		
<meta name="generator" content="Adobe GoLive 4">	
<title>Five RollOver Buttons</title>		
<script language="JavaScript">
<!--
if (document.images)  {
	img1on = new Image();			//  Active images
	img1on.src = "SyllabiOn.gif";
	img2on = new Image();			
	img2on.src = "PresentationsOn.gif";
	img3on = new Image();			
	img3on.src = "InformationOn.gif";
	img4on = new Image();			
	img4on.src = "AdventuresOn.gif";
	img5on = new Image();			
	img5on.src = "emailOn.gif";
	
	img1off = new Image();			//  Inactive images		
	img1off.src = "SyllabiOff.gif";
	img2off = new Image();			
	img2off.src = "PresentationsOff.gif";
	img3off = new Image();			
	img3off.src = "InformationOff.gif";
	img4off = new Image();			
	img4off.src = "AdventuresOff.gif";
	img5off = new Image();			
	img5off.src = "emailOff.gif";
	}
		function imgOn(imgName)  {
			if(document.images)  {
				document[imgName].src = eval(imgName + "on.src");
			}
		}
		function imgOff(imgName)  {
			if(document.images)  {
				document[imgName].src = eval(imgName + "off.src");
			}
		}
	// -->
		</script>
	</head>
<body background="GrandBKG2.jpg">
<spacer type="vertical" size="80">
<spacer type="horizontal" size="45">
<a href="page1.html" onmouseover="imgOn('img1')" onmouseout="imgOff('img1')">
<img name="img1" border="0" height="42" width="140" src="SyllabiOff. gif"> /a><
<a href="page2.html" onmouseover="imgOn('img2')" onmouseout="imgOff('img2')">
<img name="img2" border="0" height="42" width="140" src="PresentationsOff. gif"> </a>
<a href="page3.html" onmouseover="imgOn('img3')" onmouseout="imgOff('img3')">
<img name="img3" border="0" height="42" width="140" src="InformationOff. gif"> </a>
<a href="page4.html" onmouseover="imgOn('img4')" onmouseout="imgOff('img4')">
<img name="img4" border="0" height="42" width="140" src="AdventuresOff. gif"> </a>
<a href="page5.html" onmouseover="imgOn('img5')" onmouseout="imgOff('img5')">
<img name="img5" border="0" height="42" width="140" src="emailOff. gif"> </a>
</body>

</html>


E. Scripting with GoLive Button Images

Task: Redesign Instructor's Home Page with Rollover Buttons

1. Create five independent, transparent GIFs, . . . for Off state

2. Create five alternative, transparent GIFs, . . . for On state

3. Create an image which will serve as a background for the buttons,




4. Drag a Layout Grid from the Basic Palette onto your page in Layout mode

5. Drag the Image icon from the Basic Palette onto the upper-lefthand corner of the Layout Grid, and select your background image.

6. Drag a Floating Box onto the background image, position it, and reshape it to hold the rollover buttons

7. Switch to the Cyber Objects palette, and drag a Button Image into the correct location in the Floating Box

8. The Button Inspector will now open, with "Main" Image selected. Browse for the appropriate OFF button file.




9. Next, with the button selected, click on the "Over" button, and Browse for the appropriate ON button file




10. Switch to Status & Link tab to link buttons to URLs you wish to jump to




11. Whatever you do, DON'T look at the ugly code which GoLive generates to implement this!





F. Laboratory Assignment # 12

 




Updated 4/11/2000