Using Dreamweaver to Create Pop-Up Windows for Multimedia Glossing of Texts

Step Three: Creating the HTML File You are Glossing To

1. The next step is to create the file that we are linking to from the word or phrase we highlighted and setup a hyperlink for in Step Two, in this case, we've called the file gloss1.html

• Again, to make this a bit easier for you, I've created some sample template files for you to download, depending on what type of gloss you are creating:
  • glossing from text to text
  • glossing from text to still image (photograph)
  • glossing from text to moving image (digital video clip)
  • glossing from text to audio clip
• Download either of these files, by right-clicking on the link and saving the target as a new file name, for our example, name this file gloss1.html. Save the file in the folder that you set up on your local machine within your site defintion in Step One.

Example I: Glossing to a Photograph/Still Image

1. For our first example, I want to gloss to a still image/photograph, so I will choose to download the second file above, and save it to the folder on my local computer where I am creating my web pages. I will save this downloaded file as gloss1.html because that is the name of the file I used when I created the hyperlink in my primary text document.
2. Next, in Dreamweaver, open the file gloss1.html. You will already see several things in the window:

   

• a transparent table with 1 row and 2 columns. The cells contain a broken image icon, and the words type text here
• a red dashed box with a button labeled "Close Window"

3. to create your gloss, insert the image you have chosen to gloss to, and type in a caption for the image, if you want, or leave that line of text blank.
4. save your file (remember: this should be saved as gloss1.html, or the link you set up earlier will not work)

Example II: Glossing to a Moving Image/Video Clip

1. For our second example, I want to gloss to a moving image/video clip, so I will choose to download the third file above (for glossing to a video clip), and save it to the folder on my local computer where I am creating my web pages. I will save this downloaded file as gloss1.html because that is the name of the file I used when I created the hyperlink in my primary text document.
2. Next, in Dreamweaver, open the file gloss1.html. You will already see several things in the window:

   

• a grey box with an icon in the middle of it -- this is where your video clip will appear
• a red dashed box with a button labeled "Close Window"

3. to create your gloss, click on the grey box -- the 3 small black squares will appear in the midpoint and lower right hand corner of the boxes
4. you will also notice that your property window will change to look like this:

.

5. in the box circled in red, you will need to type in the pathway to where you videoclip is saved, or, click on the folder icon to browse to the place where you saved your videoclip file.
6. next, click on the button labeled "Parameters" and type in the pathway information to your videoclip file, i.e. videoclip/WorldCup.mp2 -- in this example, my videoclip called 'WorldCup.mp2' is inside a folder called "videoclip"
7. save your file (remember: this should be saved as gloss1.html, or the link you set up earlier will not work)

Example III: Glossing to an Audio Clip

1. For our third example, I want to gloss to an audio clip, so I will choose to download the fourth file above (for glossing to an audio clip), and save it to the folder on my local computer where I am creating my web pages. I will save this downloaded file as gloss1.html because that is the name of the file I used when I created the hyperlink in my primary text document.
2. Next, in Dreamweaver, open the file gloss1.html. You will already see several things in the window:

   

• a grey box with height/width dimensions: this is a placeholder for an image file, if you choose to put one in the gloss.
• a grey box with an icon that looks like a jigsaw puzzle: this is an embedded audio plug-in, where an audioplayer will appear to play your audio file
• a red dashed box with a button labeled "Close Window"
3. to create your gloss, click on the grey box with the jigsaw puzzle icon -- the 3 small black squares will appear in the midpoint and lower right hand corner of the boxes
4. you will also notice that your property window will change to look like this:

.

5. in the box circled in red, you will need to type in the pathway to where you audio clip is saved, or, click on the folder icon to browse to the place where you saved your audio file.
6. save your file (remember: this should be saved as gloss1.html, or the link you set up earlier will not work)

Step Four: Test Your Work

1. After saving your primary text HTML file, and your gloss1.html file, test your files by previewing them in a web browser:
• In Dreamweaver, open your primary text HTML file.
• Click on File > Preview in Browser > iexplore
• The file will open up in Internet Explorer
• In Internet Explorer, you should now see your primary text file in the target language, with the word or phrase you glossed underlined as an active hyperlink.
• When you click on the hyperlink, a small pop-up window should open.
• The pop-up window should contain the still image/photograph you glossed to, the text caption (if you provided one) and the close window button. You should also be able to resize the pop-up window by dragging the edges/corners of the window.
• Click on the Close Window button to make sure that it is functioning properly.

Congratulations! You have created your first pop-up window gloss!!!