Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P43 pps
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (231.41 KB, 10 trang )
The Old Standby: Linking
It's also considered good form to provide multiple types of multimedia to download because not all
media types are usable on all platforms:
Input
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" /><head>
<title>Apollo Multimedia Archive </title>
</head>
<body>
<div align="center">
<h1>Apollo 17 Videos</h1>
<p>Astronauts placing the flag on the Moon</p>
<table border="0">
<tr>
<td rowspan="3"><img src="Apollo_17_Flag.gif" width="160"
height="120" alt="Apollo 17 flag"/></td>
<td><a href="Apollo_17_Flag.qt">QuickTime</a>[2.75Mb]</td>
</tr>
<tr>
<td><a href="Apollo_17_Flag.mpg">MPEG</a> [2.45Mb]</td>
</tr>
<tr>
<td><a href="Apollo_17_Flag.avi">AVI </a> [3.11Mb]</td>
</tr>
</table>
<br />
file:///G|/1/0672328860/ch11lev1sec2.html (2 von 11) [19.12.2006 13:49:22]
The Old Standby: Linking
<a href=" />src="getquicktime4.gif" width="88" border="0" alt="Get QuickTime"
vspace="7" /></a><br />
<a href=" /><img src="getmedia_white.gif" width="65" height="57" border="0"
alt="Get Windows Media Player" vspace="7" /></a>
</div>
</body>
</html>
Figure 11.2 shows the resulting web page.
Output
Figure 11.2. When linking sound and video, provide multiple formats if
possible.
[View full size image]
Task: Exercise 11.1. Creating a Family History Multimedia Archive
file:///G|/1/0672328860/ch11lev1sec2.html (3 von 11) [19.12.2006 13:49:22]
The Old Standby: Linking
One of the common types of pages available on the Web is a media archive. A media
archive is a web page that serves no purpose other than to provide quick access to images
or other multimedia files for viewing and downloading.
It seems like everybody who knows the first thing about publishing on the Web sets up a
media archive when they have a child. People oftentimes have family members flung all
over the country, and with minimal HTML skills and a digital camera, you can quickly set up
an online photo album or multimedia archive that enables everyone to see the new bundle
of joy. If you're one of those people who's always emailing out photos of the kids to a huge
list of people, putting up a media archive might be a smart choice. (And if you want to
keep strangers from peeking in, skip ahead to
Lesson 19, "Taking Advantage of the
Server," where I explain how to protect your web pages with a password.)
By using inline images as thumbnails and splitting up sound and video files into small
sample clips with larger files, you can create a multimedia archive on the Web that is far
easy to use and enables users to download exactly what they want, without wasting time.
In this exercise, you'll create a simple multimedia archive with several GIF and JPEG
images, WAV sounds, and a mixture of MPEG and AVI video.
Using your favorite image editor, you can create thumbnails of each of your pictures to
represent them in the archive.
First, start with the framework for the archive and then add a table for the thumbnail
images, as follows:
Input
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" /><head>
<title>Family Multimedia Archive</title>
</head>
<body>
<div align="center">
<table border="0">
<tr>
<td width="80">
<h2>Images</h2>
</td>
<td>
<p>Select an image to view it in a larger size.</p>
</td>
</tr>
<tr>
<td width="80">Nephew opening a present.</td>
<td><img src="present.gif" height="150" width="200"
alt="Opening presents" /></td>
</tr>
<tr>
<td width="80">Mother holding child.</td>
<td><img src="with_baby.gif" height=""150 width="200"
alt="Mother and child" /></td>
file:///G|/1/0672328860/ch11lev1sec2.html (4 von 11) [19.12.2006 13:49:22]
The Old Standby: Linking
</tr>
<tr>
<td width="80">House in the snow.</td>
<td><img src="snowy_house.gif" height="150" width="200"
alt="House in the snow" /></td>
</tr>
</table>
</div>
</body>
</html>
Figure 11.3 shows how the page looks so far.
Output
Figure 11.3. The web page with the image archive almost completed.
[View full size image]
The next step is to create the hyperlinks to each image that point to the larger file. Here's
the HTML code that links to the images:
file:///G|/1/0672328860/ch11lev1sec2.html (5 von 11) [19.12.2006 13:49:22]
The Old Standby: Linking
Input
<tr>
<td width="80">Nephew opening a present.</td>
<td><a href="present_big.gif"><img src="present.gif" height="150" width="200"
alt="Opening presents" /></a></td>
</tr>
<tr>
<td width="80">Mother holding child.</td>
<td><a href="with_baby_big.jpg">
<img src="with_baby.gif" height=""150 width="200"
alt="Mother and child" /></a></td>
</tr>
<tr>
<td width="80">House in the snow.</td>
<td><a href="snowy_house_big.jpg">
<img src="snowy_house.gif" height="150" width="200"
alt="House in the snow" /></a></td>
</tr>
Figure 11.4 shows the result.
Output
Figure 11.4. The image now linked to larger images.
[View full size image]
file:///G|/1/0672328860/ch11lev1sec2.html (6 von 11) [19.12.2006 13:49:22]
The Old Standby: Linking
If I leave the archive like this, it looks nice, but I'm breaking one of my own rules: I
haven't noted how large each file is. Here, you have several choices for formatting, but the
easiest is to simply add the file size after the description of each picture, as follows:
Input
<tr>
<td width="80">Nephew opening a present. [105k]</td>
<td><a href="present_big.gif">
<img src="present.gif" height="150" width="200"
alt="Opening presents" /></a>
</td>
</tr>
<tr>
<td width="80">Mother holding child. [211k]</td>
<td><a href="with_baby_big.jpg">
<img src="with_baby.gif" height=""150 width="200"
alt="Mother and child" /></a>
</td>
</tr>
<tr>
<td width="80">House in the snow. [158k]</td>
file:///G|/1/0672328860/ch11lev1sec2.html (7 von 11) [19.12.2006 13:49:22]
The Old Standby: Linking
<td><a href="snowy_house_big.jpg">
<img src="snowy_house.gif" height="150" width="200"
alt="House in the snow" /></a>
</td>
</tr>
Figure 11.5 shows this result.
Output
Figure 11.5. Adding file sizes to the description of each image
enables people to determine how long it will take to load the image.
[View full size image]
Now, let's move on to the sound and video sections. There are two approaches to
formatting these sections. You can add the material in the same table that contains the
images or you can create two new tableseither way is fine. For this exercise, you're going
to create new tables that are virtually identical to the table that held the images.
Start by adding three sound and two video files. Because the sound files can't be reduced
file:///G|/1/0672328860/ch11lev1sec2.html (8 von 11) [19.12.2006 13:49:22]
The Old Standby: Linking
to a simple thumbnail image, you should provide a good description. With video files, you
can often use your video player to copy one frame of the clip and provide that as a
thumbnail. I've included icons with the links to the sound files. Following is the code for the
sound portion of your archive:
Input
<div align="center">
<table border="0" summary="Sound files for download.">
<tr>
<td>
<h2>Sound Bites</h2>
</td>
<td>
<p>Select a sound bite to download or listen to it.</p>
</td>
</tr>
<tr>
<td>An oral family history describing how we survived the
tornado of 1903. [1192k]</td>
<td><a href="tornado.wav"><img src="audio.jpg"
alt="download tornado.wav"></a></td>
</tr>
<tr>
<td>Don describing his first job. [1004k]</td>
<td><a href="donjob.wav"><img src="audio.jpg"
alt="download donjob.wav"></a></td>
</tr>
<tr>
<td>Grandma Jo telling how she came to America. [2459k]</td>
<td><a href="jo.wav"><img src="audio.jpg"
alt="download jo.wav"></a></td>
</tr>
</table>
</div>
Figure 11.6 shows how the linked sounds look on the web page.
Output
Figure 11.6. Linked sound files in a family history archive.
[View full size image]
file:///G|/1/0672328860/ch11lev1sec2.html (9 von 11) [19.12.2006 13:49:22]
The Old Standby: Linking
Finally, add the video clip section just as you have for the previous two. It's getting easier!
Input
<div align="center">
<table border="0">
<tr>
<td width="100">
<h2>Video Clips</h2>
</td>
<td>
<p>Select a video clip to download it.</p>
</td>
</tr>
<tr>
<td width="100">A video of a Christmas gathering. [2492k]</td>
<td><a href="presents.mpeg"><img src="present.gif" height="150"
width="200" alt="Opening presents" /></a></td>
</tr>
<tr>
<td width="100">Massachussetts in winter. [3614k]</td>
<td><a href="winter.mpeg"><img src="snowy_house.gif"
height="120" width="180"
alt="Winter snow" /></a></td>
</tr>
</table>
</div>
Figure 11.7 shows how the linked videos with thumbnails look on the web page.
file:///G|/1/0672328860/ch11lev1sec2.html (10 von 11) [19.12.2006 13:49:22]
The Old Standby: Linking
Output
Figure 11.7. The video section of our multimedia archive.
[View full size image]
Your multimedia archive is finished. Creating one is simple with the combination of inline
images and external files. With the use of the
alt attribute, you can even use it reasonably
well in text-only browsers.
file:///G|/1/0672328860/ch11lev1sec2.html (11 von 11) [19.12.2006 13:49:22]
