Friday, November 20, 2009

Week #12: Pop Up Windows

This week we will design a web page that hyperlinks to a series of html files holding: a picture, a QT video, and an mp3 audio file. A new browser window will open when each hyperlink is clicked.




STEP #1: Create the resources and resource html files
Be sure to wrap each page:
relative
100%
100%
text-align: center
margins: 0, auto, 0, auto
-------------------

• PICTURE.html

• VIDEO.html
Insert > Plugin
Set the width and height properties for the video to 480 x 336 ( 320 + 16)
Modify > Page Properties, set margins to 0,0,0,0
In the HTML you can set autostart="false" to stop the video from playing automatically on opening the browser window.

• AUDIO.html
TIP: Use GarageBand to create an audio file for use in this exercise.

Insert > Plugin
Set the width and height properties for the audio to 300 x 16
Modify > Page Properties, set margins to 0,0,0,0
In the HTML you can set autostart="false" to stop the audio from playing automatically on opening the browser window.

------------------------------------
In DREAMWEAVER
1. When hyperlinking each item, be sure to add a # in the link field of the Properties for each hyperlink
2. Assign a behavior: Open Browser Window
URL to display: picture.html
Width: 200
height: 200
Name: picture
OK



CODE changes
Change to default script to now read the following:
function MM_openBrWindow(theURL,winName,features) { //v2.0
what = window.open(theURL,winName,features);
}
function MM_closeBrWindow() { //v2.0
what.window.close();
}


Also add the script to the close link:
a href="#" onClick="MM_closeBrWindow()">Close Window

No comments: