cq9传奇电子官方

書名：網(wǎng)頁編程技術(shù)
作者名：叢書編委會(huì)編
本章字?jǐn)?shù)： 3041字
更新時(shí)間： 2018-12-28 18:13:49

第2章 HTML進(jìn)階

本章要點(diǎn)

▲表格的基本結(jié)構(gòu)

▲表格屬性的具體應(yīng)用

▲表格的頁面布局

▲圖片與多媒體元素在頁面中的具體應(yīng)用

2.1 表格標(biāo)簽

表格是常用的頁面元素，制作網(wǎng)頁經(jīng)常要借助表格進(jìn)行排版，在網(wǎng)頁布局方面，表格起著舉足輕重的作用，通過設(shè)置表格以及單元格的屬性，對頁面中的元素進(jìn)行準(zhǔn)確定位，表格能夠有序地排列數(shù)據(jù)又能對頁面進(jìn)行更加合理的布局。靈活地使用表格的背景、框線等屬性可以得到更加美觀的效果。

HTML表格是由行和列組成的二維表格，由行和列構(gòu)成一個(gè)個(gè)單元格，在其中可以放置文本、圖像等相關(guān)網(wǎng)頁元素。每一列的最上方可以定義列標(biāo)題，用來突出顯示該列的主題，表格也可以定義標(biāo)題，如圖2.1所示，這些都可以通過HTML中具體的標(biāo)簽來實(shí)現(xiàn)。

圖2.1 表格的形式

在網(wǎng)頁中使用表格有如下幾個(gè)優(yōu)點(diǎn)：

以行列對齊的形式來顯示文本和數(shù)字信息
可以固定文本或圖像的顯示位置
對網(wǎng)頁結(jié)構(gòu)的優(yōu)化，充分利用空間
可以嵌套使用，但不利于手工代碼的維護(hù)

HTML語法中表格用<table>標(biāo)簽表示，一個(gè)表格可以分成很多行，用<tr>標(biāo)簽表示，每行又可以分成很多單元格，用<td>標(biāo)簽表示，這3個(gè)標(biāo)簽是創(chuàng)建表格最常用的標(biāo)簽。

※ 表格的基本結(jié)構(gòu)：

<table>
  <caption>表格標(biāo)題</caption>
    <tr> //定義表行
      <th>列標(biāo)題</th>
    </tr>
    <tr>
      <td>…</td> //定義單元格
    </tr>
</table>

<table>標(biāo)簽代表表格的開始，<tr>標(biāo)簽代表行的開始，<td>和</td>之間就是單元格的內(nèi)容。

注意：表格中的具體內(nèi)容必須放在<td>與</td>之間。

2.1.1 表格標(biāo)簽<Table>

※ 基本語法：<table>表格內(nèi)容</table>表格標(biāo)簽常用的屬性如表2-1所示

表2-1 <table>標(biāo)簽常用屬性

※ 范例代碼 2.1.html

<table width="200" border=1 align="center" cellpadding=0 cellspacing=0 bordercolor=#FFFFFF bordercolorlight=#000000 bgcolor=#FF6600>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    <br>
   <table cellspacing=2 cellpadding=0 width="200" bgcolor=#FF6600 border=1 align="center">
       <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
       </tr>
       <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
       </tr>
     </table>
<br>
     <table width="200" border=1 align="center" bordercolor=#ffffff bordercolorlight=#000000 bgcolor=#FF6600>
     <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
     </tr>
     <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
     </tr>
   </table><p><strong></strong></p>
   <p>&nbsp;</p>
   </td>
  </tr>
</table>

※ 代碼分析

第一個(gè)<table>標(biāo)簽定義表格，屬性值為寬度200px，邊線1px，居中對齊，單元格與單元格之間的間距是0px，單元格邊框與單元格內(nèi)容之間的間距是0px，邊框顏色為白色，表格的亮邊框顏色為黑色，背景色值為#FF6600。第二個(gè)<table>標(biāo)簽定義單元格與單元格之間的間距是2px，單元格邊框與單元格內(nèi)容之間的間距是0px，寬度200px，邊線1px，居中對齊，背景色值為#FF6600。第三個(gè)<table>標(biāo)簽與前兩個(gè)相似，這里不再贅述。

※ 范例效果圖

范例效果如圖2.2所示。

圖2.2 表格屬性的應(yīng)用

2.1.2 表格的行<Tr>

※ 基本語法：<tr>行內(nèi)容</tr>

<tr>標(biāo)記屬性的使用方法與<table> 標(biāo)記屬性非常相似，用來設(shè)定表格中某一行的屬性。行標(biāo)簽常用的屬性如表2-2所示。

表2-2 <tr>標(biāo)簽常用屬性

※ 范例代碼 2.2.html

<table width="100%" height="189" border="1" cellpadding="0" cellspacing="0" class="bian1">
<tr bordercolor="#CCCCCC" bgcolor="#FF9900" class="text2">
   <td height="30"><div align="center">類別</div></td>
   <td><div align="center">旅游線路</div></td>
   <td><div align="center">出團(tuán)日期</div></td>
   <td><div align="center">報(bào)價(jià)</div></td>
   <td><div align="center">備注</div></td>
</tr>
<tr bordercolor="#CCCCCC" class="text2">
    <td height="34"><div align="center">海南旅游</div></td>
   <td><div align="center">海南四星貴賓純玩游(二)****</div></td>
   <td><div align="center">每周三五六發(fā)/團(tuán)隊(duì)另議</div></td>
   <td><div align="center">2480元/人</div></td>
   <td><div align="center"><a href="#">詳情</a></div></td>
</tr>
<tr bordercolor="#CCCCCC" class="text2">
   <td height="46"><div align="center">四川線路</div></td>
   <td><div align="center">成都/九寨溝/黃龍雙飛五日***</div></td>
   <td><div align="center">每周三六發(fā)團(tuán)/團(tuán)隊(duì)另議</div></td>
   <td><div align="center">2080元/人</div></td>
   <td><div align="center"><a href="#">詳情</a></div></td>
</tr>
<tr bordercolor="#CCCCCC" class="text2">
   <td height="43"><div align="center">黃山旅游</div></td>
   <td><div align="center">黃山一地雙臥四日游**</div></td>
   <td><div align="center">每周三六發(fā)團(tuán)/團(tuán)隊(duì)另議</div></td>
   <td><div align="center">1090元/人</div></td>
   <td><div align="center"><a href="#">詳情</a></div></td>
</tr>
<tr bordercolor="#CCCCCC" class="text2">
   <td><div align="center">武夷山旅游</div></td>
   <td><div align="center">廈門/武夷山雙飛五日游**</div></td>
   <td><div align="center">天天發(fā)團(tuán)/團(tuán)隊(duì)另議</div></td>
   <td><div align="center">2110元/人</div></td>
   <td><div align="center"><a href="#">詳情</a></div></td>
</tr>
</table>

※ 代碼分析

<tr>標(biāo)簽的class屬性表示定義行的CSS樣式，此部分在后面章節(jié)中講解。

※ 范例效果圖

范例效果如圖2.3所示。

圖2.3 <tr>標(biāo)簽的應(yīng)用

2.1.3 表格的單元格<Td>

※ 基本語法：<td>單元格內(nèi)容</td>

<td>標(biāo)簽屬性的使用方法與<table> 標(biāo)記屬性非常相似，用來設(shè)定表格中某一單元格的屬性。

行標(biāo)簽常用的屬性如表2-3所示。

表2-3 <td>標(biāo)簽常用屬性

※ 范例代碼 2.3.html

<table width="300" border="1" cellpadding="1" cellspacing="1" bordercolor="#FF6600">
<tr>
   <td colspan="2" bgcolor="#FF6600">&nbsp;</td>
   <td>&nbsp;</td>
</tr>
<tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td rowspan="2" bgcolor="#CCCCCC">&nbsp;</td>
</tr>
<tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
</tr>
</table>

※ 代碼分析

第一個(gè)<tr>標(biāo)簽中包含兩個(gè)<td>標(biāo)簽對，第一個(gè)<td>標(biāo)簽對表示將一行中的兩個(gè)單元格合并成一個(gè)單元格，單元格背景色為#FF6600。第二個(gè)<tr>標(biāo)簽中包含3個(gè)<td>標(biāo)簽，其中第三個(gè)<td>標(biāo)簽表示將兩行中的單元格合并成一個(gè)單元格，背景色為#CCCCCC。

※ 范例效果圖

范例效果如圖2.4所示。

圖2.4 <td>標(biāo)簽的應(yīng)用

2.1.4 表格列標(biāo)題<Th>

※ 基本語法：<th>列標(biāo)題內(nèi)容</td>

列標(biāo)題用粗體樣式標(biāo)記，另外內(nèi)容的對齊方式也可能和數(shù)據(jù)的對齊方式不同。數(shù)據(jù)通常會(huì)默認(rèn)左對齊，列標(biāo)題默認(rèn)居中對齊。列標(biāo)題標(biāo)簽常用的屬性如表2-4所示。

表2-4 <th>標(biāo)簽常用屬性

※ 范例代碼 2.4.html

<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<tr align="CENTER">
<th bgcolor="#FF6600">姓名</span></th>
<th bgcolor="#FF6600">性別</span></th>
<th bgcolor="#FF6600">年齡</span></th>
</tr>
<tr align="CENTER">
<td><span class="STYLE3">王曉華</span></span></td>
<td><span class="STYLE3">女</span></span></td>
<td><span class="STYLE3">20</span></span></td>
</tr>
<tr align="CENTER">
<td><span class="STYLE3">周揚(yáng)</span></td><td><span class="STYLE3">女</span></td>
<td><span class="STYLE3">21</span></td></tr>
<tr align="CENTER">
<td><span class="STYLE3">張強(qiáng)</span></td><td><span class="STYLE3">男</span></td>
<td><span class="STYLE3">20</span></td></tr>
</table>

※ 范例效果圖

范例效果如圖2.5所示。

圖2.5 <th>標(biāo)簽的應(yīng)用

2.1.5 表格標(biāo)題<caption>

※ 基本語法：<caption>表格標(biāo)題內(nèi)容</caption>

標(biāo)題是表格的說明性文字，出現(xiàn)在表格上方，通常在<table>標(biāo)簽后立即加入<caption>標(biāo)簽及其內(nèi)容，標(biāo)題可以包括任何主體內(nèi)容。表格標(biāo)題標(biāo)簽常用的屬性如表2-5所示。

表2-5 <caption>標(biāo)簽常用屬性

※ 范例代碼 2.5.html

<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<caption>學(xué)生情況表</caption>
<tr align="CENTER">
<th bgcolor="#FF6600">姓名</span></th>
<th bgcolor="#FF6600">性別</span></th>
<th bgcolor="#FF6600">年齡</span></th>
</tr>
<tr align="CENTER">
<td><span class="STYLE3">王曉華</span></span></td>
<td><span class="STYLE3">女</span></span></td>
<td><span class="STYLE3">20</span></span></td>
</tr>
<tr align="CENTER">
<td><span class="STYLE3">周揚(yáng)</span></td>
<td><span class="STYLE3">女</span></td>
<td><span class="STYLE3">21</span></td>
</tr>
<tr align="CENTER">
<td><span class="STYLE3">張強(qiáng)</span></td>
<td><span class="STYLE3">男</span></td>
<td><span class="STYLE3">20</span></td>
</tr>
</table>

※ 范例效果圖

范例效果如圖2.6所示。

圖2.6 <caption>標(biāo)簽的應(yīng)用

2.2 圖像標(biāo)簽<IMG>

在HTML語言中，可以在頁面中嵌入圖片、聲音、視頻、Flash動(dòng)畫等多媒體內(nèi)容，這些多媒體內(nèi)容極大地豐富了頁面的表現(xiàn)力，給瀏覽者帶來了閱讀上的享受和對網(wǎng)站的強(qiáng)烈印象。

在HTML頁面中插入圖片，可以起到美化頁面的作用。網(wǎng)頁常用的圖片格式有JPEG、GIF和PNG這三種，插入圖片的標(biāo)簽只有一個(gè)，那就是<img>標(biāo)簽。

※ 基本語法：<img src=" file_url">具體屬性說明如表2-6所示。

表2-6 <img>的屬性

※ 范例代碼 2.6.html

…
<body leftmargin="70">
<p><img src="Figure-00/7-01.gif" width="230" height="48"><img src="image/7-2.gif" width="207" height="48">
</p>
<p class="text3">申辦護(hù)照</p>
<p class="text3">1.北京市居民申請護(hù)照<br>
…

※ 范例效果圖

范例效果如圖2.7所示。

圖2.7 <img>標(biāo)簽的應(yīng)用

※ 范例代碼 2.7.html

<img src="YS.jpg" width="192" height="183" hspace="10" vspace="10" border="3" align="left" />雖皓月當(dāng)空，祥云瑞彩依舊遮住了游子北望的眼睛。<br />
<img src="YSB.jpg" width="132" height="100" hspace="5" vspace="5" border="3" align="right" />能捎帶上我那縷鄉(xiāng)魂嗎？一同回到夢里的山村？<br />

※ 代碼分析

頁面中插入和頁面在同一路徑下的圖片"YS.jpg"，寬度為192px，高度為183px，水平間距和垂直間距都是10px，邊框?yàn)?px，對齊方式為左對齊。插入第二張和頁面在同一路徑下的圖片"YSB.jpg"，寬度為132px，高度為100px，水平間距和垂直間距都是5px，邊框?yàn)?px，對齊方式為右對齊。

※ 范例效果圖

范例效果如圖2.8所示。

圖2.8 <img>標(biāo)簽的屬性應(yīng)用

注意1：src屬性是<img>標(biāo)簽必需的。

注意2：為了保證下載速度，圖片并不是越多越好。

注意3：<img>沒有結(jié)束標(biāo)簽。

2.3 多媒體

在網(wǎng)頁中可以放置如MP3音樂、電影、動(dòng)畫等多種格式的多媒體內(nèi)容，豐富了網(wǎng)頁的效果。需要使用的相關(guān)標(biāo)簽如表2-7所示。

表2-7 多媒體標(biāo)簽

2.3.1 多媒體標(biāo)簽<embed>

※ 基本語法：

   <embed src="file_url" width="value" height="value" hidden="heidden_value" autostart="auto_value" loop="loop_value"></embed>

具體屬性說明如表2-8所示。

表2-8 <embed>的屬性

1.嵌入FLASH動(dòng)畫

例：<embed src="flash.swf" width="450" height="600"></embed>

2.嵌入MP3音樂

<embed src="song.mp3" width="450" height="600"></embed>

3.嵌入MPG電影

<embed src="dianying.mpg" width="450" height="600"></embed>

4.嵌入AVI視頻

<embed src="shipin.avi" width="450" height="600"></embed>

※ 范例代碼 2.8.html

   <embed src="jthintroduce/zzjj.swf" width=280 height=282 quality=high wmode=transparent bgcolor=#000000 type="application/x-shockwaveflash"
pluginspage="http://www.macromedia.com/shockwave/download/inde x.cgi?P1_Prod_Version=ShockwaveFlash"> </embed>
   <embed src="jthintroduce/resume.swf" quality=high wmode=transparent bgcolor=#000000 width=150 height=43 type="application/x- shockwaveflash"
pluginspage="http://www.macromedia.com/shockwave/download/inde x.cgi?P1_Prod_Version=ShockwaveFlash"> </embed>

※ 代碼分析

swf格式是Flash生成的動(dòng)畫文件，src表示文件的來源，quality表示定義品質(zhì)為高品質(zhì)，wmode屬性值為transparent，表示Flash的背景顏色為透明。

※ 范例效果圖

范例效果如圖2.9所示。

圖2.9 多媒體標(biāo)簽的應(yīng)用

2.3.2 背景聲音<bgsound>

頁面中的背景音樂的效果可通過<bgsound>標(biāo)簽實(shí)現(xiàn)。網(wǎng)頁中常用的聲音格式包括WAV、MP3、MIDI、AIF和RM格式，其中主要以MIDI格式文件為主。

※ 基本語法：<bgsound src="value" loop="value">

其屬性如表2-9所示。

表2-9 <bgsound>的屬性

例：<bgsound src="okok.mid" loop="-1">

※ 范例代碼 2.9.html

<body>
<bgsound src="sound/Ed5gm010.mid">

※ 范例效果圖

范例效果如圖2.10所示。

圖2.10 背景聲音

注意：src屬性是<img>、<embed>、<bgsound>標(biāo)簽必需的。

2.3.3 插入Java小程序

Java語言可以編寫兩種類型的程序，分別是應(yīng)用程序(Application)和小應(yīng)用程序Applet)。其中應(yīng)用程序是可以獨(dú)立運(yùn)行的程序，Java Applet是用Java編寫的嵌入到頁面并能產(chǎn)生特殊效果的小程序。通過使用Java Applet小程序可以在網(wǎng)頁中實(shí)現(xiàn)一些文字、圖片、動(dòng)畫等的顯示特效，也可以完成人機(jī)交互的功能。

瀏覽器要執(zhí)行Applet程序，必須內(nèi)嵌有Java解釋器。當(dāng)瀏覽器訪問使用了Java Applet的網(wǎng)頁時(shí)，Java Applet會(huì)被下載到瀏覽器的客戶機(jī)內(nèi)存中，Java解釋器將對其進(jìn)行解釋執(zhí)行。如果瀏覽器中沒有內(nèi)嵌的Java解釋器，Java Applet將不被執(zhí)行，其運(yùn)行效果也不會(huì)被看到。Applet需要使用HTML語法的<applet>標(biāo)簽，在網(wǎng)頁中引入該組件。

※ 基本語法：<applet code="file_name">

其屬性如表2-10所示。

表2-10 <applet>的屬性

※ 范例代碼 2.10.html

<html>
<head>
<title>Java Applet標(biāo)簽</title>
<head>
<body bgcolor="red">
   <center>
      <b>
         <font size="+3" color="orange">Java Applet小程序的應(yīng)用 </font>
      </b>
      <applet code="Hello.class" heitht=200 width=300>
         <param name=varname value="李莉">
         <param num=varnum value=24>
      </applet>
   </center>
</body>
<html>
Hello.java
import java.applet.Applet;
import java.awt.Graphics;
public class hello extends Applet
   {
     private String name;
     private int num;
     public void init()
       {
         name=getParameter("varname");
         num=integer.parseInt(getParameter("varnum"));
       }
     public void paint(Graphics g)
       {
           g.drawString("歡迎"+name+"來到Java世界,你今年"+num+"歲了!",10,20);
       }
   }

2.4 頁面實(shí)例——表格、圖片與Flash動(dòng)畫的綜合應(yīng)用

※ 范例代碼 2.11.html

<html>
<head>
<title>表格標(biāo)志的綜合示例</title>
</head>
<body>
<table border="1" width="80%" bgcolor="#E8E8E8" cellpadding="2" bordercolor="#0000FF"
bordercolorlight="#7D7DFF" bordercolordark="#0000A0">
<tr>
  <th width="33%" colspan="2" valign="bottom">意大利</th>
  <th width="36%" colspan="2" valign="bottom">英格蘭</th>
  <th width="36%" colspan="2" valign="bottom">西班牙</th>
</tr>
<tr>
  <td width="16%" align="center">AC米蘭</td>
  <td width="16%" align="center">佛羅倫薩</td>
  <td width="17%" align="center">曼聯(lián)</td>
  <td width="17%" align="center">紐卡斯?fàn)?lt;/td>
  <td width="17%" align="center">巴塞羅那</td>
  <td width="17%" align="center">皇家社會(huì)</td>
</tr>
<tr>
  <td width="16%" align="center">尤文圖斯</td>
  <td width="16%" align="center">桑普多利亞</td>
  <td width="17%" align="center">利物浦</td>
  <td width="17%" align="center">阿森納</td>
  <td width="17%" align="center">皇家馬德里</td>
  <td width="17%" align="center">……</td>
</tr>
<tr>
  <td width="16%" align="center">拉齊奧</td>
  <td width="16%" align="center">國際米蘭</td>
  <td width="17%" align="center">切爾西</td>
  <td width="17%" align="center">米德爾斯堡</td>
  <td width="17%" align="center">馬德里競技</td>
  <td width="17%" align="center">……</td>
  </tr>
</table>
</body>
</html>

※ 范例效果圖

范例效果如圖2.11所示。

圖2.11 表格應(yīng)用

※ 范例代碼 2.12.html

<body topmargin="0">
<div id="Layer3" style="position:absolute; width:0; height:0; z-index:2; left: 120;">
  <div id="Layer4" style="position:absolute; width:770; height:145; z-index:1; left: 0;"></div>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,29,0" width="770" height="145">
    <param name="movie" value="image/banner2.swf">
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <embed src="image/banner2.swf" width="770" height="145" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed></object>
 </div>
 <div align="center">
   <table width="770" border="0" cellpadding="0" cellspacing="0">
     <!--DWLayoutTable-->
     <tr>
       <td width="567" height="145" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
          <!--DWLayoutTable-->
          <tr>
            <td width="567" height="145" valign="top" background="image/lian_r1_c1.jpg"><div id="Layer1" style="position:absolute; width:0; height:0; z-index:1;">
                <div id="Layer2" style="position:absolute; width:567; height:145; z-index:1;">
                  <div align="center">
                    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,29,0" width="567" height="145">
                      <param name="movie" value="image/banner11.swf"><param name="quality" value="high">
                      <param name="wmode" value="transparent">
                      <embed src="image/banner11.swf" width="567" height="145" quality="high" pluginspage="http://www.macromedia.com/go/ getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed></object>
                   </div>
                 </div>
               </div></td>
            </tr>
          </table></td>
        <td colspan="6" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
           <!--DWLayoutTable-->
           <tr>
             <td width="203" height="145" valign="top"><img src="image/lian_r1_c2.jpg" width="203" height="145"></td>
           </tr>
         </table></td>
      </tr>
      <tr>
        <td rowspan="2" valign="top" background="image/car_1_r2_ c1.jpg"><div id="Layer5" style="position:absolute; width:0; height:0; z-index:3">
           <div id="Layer6" style="position:absolute; width:428px; height:218px; z-index:1; left: 99px; top: 56px;">
             <table width="99%" height="198" border="2" cellpadding="0" cellspacing="2" bordercolor="#000099">
               <tr>
                 <td width="22%" height="50">&nbsp;</td>
                 <td width="27%" align="center" class="5">日本五十鈴<br>
                   (430馬力40尺) </td>
                 <td width="26%" align="center" class="5">斯太爾王<br>
                   (310馬力40尺) </td>
                 <td width="25%" align="center" class="5">解放<br>
                   (280馬力40尺) </td>
               </tr>
               <tr>
                 <td height="34" align="center" class="text">載重量(T)</td>
                 <td align="center" class="5">40</td>
                 <td align="center" class="5">30</td>
                 <td align="center" class="5">25</td>
               </tr>
               <tr>
                 <td height="32" align="center" class="text">車長度(m)</td>
                 <td align="center" class="5">12.5</td>
                 <td align="center" class="5">12.5</td>
                 <td align="center" class="5">12.5</td>
               </tr>
               <tr>
                 <td height="32" align="center" class="5">車寬度(m)</td>
                 <td align="center" class="5">2.4</td>
                 <td align="center" class="5">2.4</td>
                 <td align="center" class="5">2.4</td>
               </tr>
               <tr>
                 <td height="34" align="center" class="5">載貨限高(m)</td>
                 <td align="center" class="5">2.7</td>
                 <td align="center" class="5">2.7</td>
                 <td align="center" class="5">2.7</td>
               </tr>
             </table>
           </div>
         </div>
         <div id="Layer7" style="position:absolute; width:0; height:0; z-index:4">
           <div id="Layer8" style="position:absolute; width:770; height:127; z-index:1; left: 2px; top: 272px;">
             <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="770" height="127">
               <param name="movie" value="image/car.swf">
               <param name="quality" value="high">
               <param name="wmode" value="transparent">
               <embed src="image/car.swf" width="770" height="127" quality="high" pluginspage="http://www.macromedia.com/go/ getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed></object>
            </div>
          </div></td>
        <td width="35" height="174" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!--DWLayoutTable-->
            <tr>
              <td width="35" height="174" valign="top"><a href="about%20us.htm"><img src="image/lian_r2_c2.jpg" width="35" height="174" border="0"></a></td>
            </tr>
          </table></td>
        <td width="36" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!--DWLayoutTable-->
            <tr>
              <td width="36" height="174" valign="top"><a href="car. htm"><img src="image/lian_r2_c3.jpg" width="36" height="174" border="0"></a></td>
            </tr>
          </table></td>
        <td width="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!--DWLayoutTable-->
            <tr>
              <td width="32" height="174" valign="top"><a href="join. htm"><img src="image/lian_r2_c4.jpg" width="32" height="174" border="0"></a></td>
            </tr>
          </table></td>
        <td width="35" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!--DWLayoutTable-->
            <tr>
              <td width="35" height="174" valign="top"><a href="he. htm"><img src="image/lian_r2_c5.jpg" width="35" height="174" border="0"></a></td>
            </tr>
          </table></td>
        <td width="34" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!--DWLayoutTable-->
            <tr>
              <td width="34" height="174" valign="top"><a href="lian.htm"><img src="image/lian_r2_c6.jpg" width="34" height="174" border="0"></a></td>
            </tr>
          </table></td>
        <td width="31" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!--DWLayoutTable-->
            <tr>
              <td width="31" height="174" valign="top"><a href="index.htm"><img src="image/lian_r2_c7.jpg" width="31" height="174" border="0"></a></td>
            </tr>
          </table></td>
       </tr>
       <tr>
         <td height="225" colspan="6" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!--DWLayoutTable-->
            <tr>
              <td width="203" height="225" background="image/car_1_ r3_c2.jpg">&nbsp;</td>
            </tr>
          </table></td>
       </tr>
       <tr>
         <td height="78" colspan="7" valign="top"><img src="image/ 78_r2_c1.jpg" width="770" height="77"></td>
       </tr>
     </table>
   </div>
   </body>

※ 范例效果圖

范例效果如圖2.12所示。

圖2.12 表格、圖片、動(dòng)畫的綜合應(yīng)用

2.5 上機(jī)練習(xí)

1.運(yùn)用所學(xué)的表格標(biāo)簽，設(shè)計(jì)如圖2.13所示頁面。

圖2.13 表格應(yīng)用

2.用HTML語言設(shè)計(jì)一張借書登記表，內(nèi)容包括序號、書名、借書人、借書日期和備注。要求表格中的借書信息不得少于5項(xiàng)。

3.對上題中的表格指定表格的背景色。要求表頭行部分的背景色為藍(lán)色，表格主體部分的背景色為綠色。

4.設(shè)計(jì)如圖2.14所示頁面。

圖2.14 圖片應(yīng)用

官术网_书友最值得收藏!

網(wǎng)頁編程技術(shù)

第2章 HTML進(jìn)階

2.1 表格標(biāo)簽

2.1.1 表格標(biāo)簽<Table>

2.1.2 表格的行<Tr>

2.1.3 表格的單元格<Td>

2.1.4 表格列標(biāo)題<Th>

2.1.5 表格標(biāo)題<caption>

2.2 圖像標(biāo)簽<IMG>

2.3 多媒體

2.3.1 多媒體標(biāo)簽<embed>

1.嵌入FLASH動(dòng)畫

2.嵌入MP3音樂

3.嵌入MPG電影

4.嵌入AVI視頻

2.3.2 背景聲音<bgsound>

2.3.3 插入Java小程序

2.4 頁面實(shí)例——表格、圖片與Flash動(dòng)畫的綜合應(yīng)用

2.5 上機(jī)練習(xí)