《新編網(wǎng)頁制作三劍客培訓(xùn)教程》課件第3章

第3章添加網(wǎng)頁元素3.1添加文本3.2添加圖像3.3添加聲音3.4添加動(dòng)畫3.5添加其他多媒體元素3.6上機(jī)實(shí)訓(xùn)3.1添加文本3.1.1添加文本3.1.2設(shè)置文本格式3.1.1添加文本1.插入文字若要將文字添加到網(wǎng)頁文檔中，可執(zhí)行下列操作之一。◆直接在【文檔】窗口中輸入文字?！魪钠渌麘?yīng)用程序中復(fù)制文本，切換到Dreamweaver，將插入點(diǎn)定位在【文檔】窗口的【設(shè)計(jì)】視圖中，然后在菜單欄中選擇【編輯】→【粘貼】命令?！粼诓藛螜谥羞x擇【編輯】→【選擇性粘貼】命令，彈出【選擇性粘貼】對(duì)話框，然后選擇需要的選項(xiàng)。3.1.1添加文本2.插入空格若要在文本中插入空格，可執(zhí)行下列操作之一。 在菜單欄中選擇【插入記錄】→【HTML】→【特殊字符】→【不換行空格】命令。 按<Ctrl>+<Shift>+<空格>組合鍵。 在【插入】工具欄的【文本】選項(xiàng)卡中，選擇【字符】下拉列表框中的【不換行空格】命令。3.1.1添加文本3.插入換行符所謂“換行符”實(shí)際上就是Word中的“回車”，在HTML語言中“回車”有特殊要求，一種是按<Enter>鍵插入分段符“<p></p>”；另一種是換行不分段，被稱為換行符“<br>”，也可以叫做【硬回車】。若要在文本中插入換行符(不分段)，可執(zhí)行下列操作之一。 在菜單欄中選擇【插入記錄】→【HTML】→【特殊字符】→【換行符】命令。 按<Shift>+<Enter>組合鍵。 在【插入】工具欄的【文本】選項(xiàng)卡中選擇【字符】下拉列表框中的【換行符】命令。3.1.1添加文本4.插入特殊符號(hào)在【文檔】窗口中，首先將插入點(diǎn)定位時(shí)要插入特殊字符的位置，然后再執(zhí)行下列操作之一。 在菜單欄中選擇【插入記錄】→【HTML】→【特殊字符】命令，在彈出的子菜單中選擇字符名稱。 在【插入】工具欄的【文本】選項(xiàng)卡中，單擊【字符】按鈕，在彈出的子菜單中選擇字符。 插入其他特殊字符：在菜單欄中選擇【插入記錄】→【HTML】→【特殊字符】→【其他】命令，或者單擊【插入】工具欄中【文本】選項(xiàng)卡中的【字符】按鈕，然后選擇【其他字符】選項(xiàng)，彈出【插入其他字符】對(duì)話框，如圖3-2所示。在【插入其他字符】對(duì)話框中選擇一個(gè)字符，然后單擊【確定】按鈕即可。3.1.1添加文本5.插入水平線水平線對(duì)于組織信息很有用，在頁面上，可以使用一條或多條水平線，以可視方式分隔文本和對(duì)象。創(chuàng)建水平線的方法如下。(1)在【文檔】窗口中，將插入點(diǎn)定位到要插入水平線的位置。(2)在菜單欄中選擇【插入記錄】→【HTML】→【水平線】命令即可。3.1.1添加文本修改水平線的方法如下。(1)在【文檔】窗口中選擇水平線。(2)在菜單欄中選擇【窗口】→【屬性】命令，彈出水平線的【屬性】面板。通過【屬性】面板修改水平線的屬性，如圖3-3所示。圖3-3在【屬性】面板中修改水平線的屬性圖3-3在【屬性】面板中修改水平線的屬性3.1.2設(shè)置文本格式設(shè)置文本格式的方法如下。(1)在菜單欄中選擇【窗口】→【屬性】命令，彈出【屬性】面板。(2)選擇要設(shè)置格式的文本，【屬性】面板就會(huì)顯示出與所選文本有關(guān)的屬性，如圖3-4所示。在本文的【屬性】面板中設(shè)置文本格式。圖3-3在【屬性】面板中修改水平線的屬性圖3-4在【屬性】面板中設(shè)置文本格式3.2添加圖像3.2.1適合網(wǎng)頁使用的圖像格式3.2.2插入圖像3.2.3處理圖像效果圖3-3在【屬性】面板中修改水平線的屬性3.2.1適合網(wǎng)頁使用的圖像格式1.GIF格式GIF格式是圖形交換格式。GIF文件最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，例如導(dǎo)航條、按鈕、圖標(biāo)、徽標(biāo)或其他具有統(tǒng)一色彩和色調(diào)的圖像。其特點(diǎn)是：存儲(chǔ)的顏色只有256色(8位)，制作時(shí)可以將背景設(shè)為透明，瀏覽時(shí)可自動(dòng)分割下載，文件數(shù)據(jù)量非常小。2.JPEG格式JPEG(JPG)格式是“聯(lián)合圖像專家組”(JointPhotographicExpertsGroup)制定的圖像文件格式，主要用于存儲(chǔ)攝影或具有連續(xù)色調(diào)的圖像。這是因?yàn)镴PEG文件可以包含數(shù)百萬種顏色。它利用有損壓縮方式去除冗余的圖像和彩色數(shù)據(jù)，在獲得極高壓縮比的同時(shí)也能展現(xiàn)比較生動(dòng)的圖像效果。隨著JPEG文件品質(zhì)的提高(低壓縮比)，文件的大小和下載時(shí)間也會(huì)隨之增加。通常可以通過壓縮JPEG文件在圖像品質(zhì)和文件大小之間找到合適的平衡點(diǎn)。3.2.2插入圖像將圖像插入Dreamweaver文檔的操作步驟如下。(1)在【文檔】窗口中，將插入點(diǎn)定位在要顯示圖像的地方，然后執(zhí)行下列操作之一。 在【插入】工具欄的【常用】選項(xiàng)卡中，單擊【圖像】按鈕左側(cè)圖標(biāo)部分，然后選擇【圖像】選項(xiàng)(此處保持最近插入的圖標(biāo)類型)。 在【插入】工具欄的【常用】選項(xiàng)卡中，單擊【圖像】按鈕右側(cè)三角按鈕部分。 在菜單欄中選擇【插入】→【圖像】命令。 在菜單欄中選擇【窗口】→【資源】命令，打開【資源】面板，將圖像從【資源】面板拖動(dòng)到【文檔】窗口中的所需位置，然后跳到步驟(3)。 將圖像從【文件】面板拖動(dòng)到【文檔】窗口中的所需位置，然后跳到步驟(3)。3.2.2插入圖像(2)在【選擇圖像源文件】對(duì)話框中點(diǎn)選【文件系統(tǒng)】單選鈕，在【ch3】文件夾的列表框中選擇要插入的圖像文件，單擊【確定】按鈕，如圖3-6所示。彈出【圖像標(biāo)簽輔助功能屬性】對(duì)話框。圖3-6【選擇圖像源文件】對(duì)話框

3.2.3處理圖像效果1.設(shè)置圖像的一般屬性

【寬】和【高】文本框：用來設(shè)置圖像的寬度和高度，以像素為單位。

【源文件】文本框：指定圖像的源文件，通過此文本框右側(cè)的【瀏覽文件】按鈕可改變圖像源文件。

【鏈接】文本框：為圖像指定超鏈接，具體用法詳見“第4章建立網(wǎng)頁鏈接”。

【替換】下拉列表框：此處與圖3-7中【替換文本】下拉列表框的意義完全相同，即在只顯示文本的瀏覽器，或已設(shè)置為手動(dòng)下載圖像的瀏覽器中選擇代替圖像的文本文件。對(duì)于使用語音合成器(用于只顯示文本的瀏覽器)的有視覺障礙的用戶，語言合成器將大聲讀出該文本。在IE瀏覽器中，當(dāng)鼠標(biāo)指針滑過圖像時(shí)也會(huì)顯示該文本。3.2.3處理圖像效果2.對(duì)齊圖像可以設(shè)置圖像與同一行中的文本、另一個(gè)圖像、插件或其他元素的對(duì)齊方式。在【屬性】面板中可以通過選擇【對(duì)齊】下拉列表框中的選項(xiàng)來設(shè)置該圖像的對(duì)齊方式。3.縮放圖像在Dreamweaver中能夠以可視方式調(diào)整元素的大小，這些元素包括圖像、插件、Shockwave或Flash文件、applet和ActiveX控件等。3.2.3處理圖像效果4.裁剪圖像

Dreamweaver支持裁剪(或修剪)位圖文件圖像。裁剪圖像時(shí)，會(huì)更改磁盤上的圖像源文件。因此，最好保留一個(gè)圖像文件的備份文件，以便在需要時(shí)恢復(fù)到原始圖像。5.銳化圖像銳化將增加圖像邊緣的像素對(duì)比度，從而增加圖像清晰度或銳度。6.調(diào)整圖像的亮度和對(duì)比度修改圖像中像素的對(duì)比度或亮度，將影響圖像的高亮顯示、陰影和中間色調(diào)。3.3添加聲音3.3.1適合網(wǎng)頁使用的聲音格式3.3.2鏈接到聲音文件3.3.3嵌入聲音文件3.3.1適合網(wǎng)頁使用的聲音格式1.MIDI格式

MIDI是“樂器數(shù)字接口”(MusicalInstrumentDigitalInterface)的簡稱，其擴(kuò)展名為MID。MIDI記錄的不是聲音本身，而是將每個(gè)音符記錄為一個(gè)數(shù)字，從而形成聲音文件的格式。MIDI格式文件聲音效果的好與差，與用戶計(jì)算機(jī)聲卡質(zhì)量有直接關(guān)系。很小的MIDI格式文件就可以提供較長時(shí)間的聲音剪輯。2.MP3格式

MP3格式，是運(yùn)動(dòng)圖像專家組音頻第3層(MotionPictureExpertsGroupAudioLayer?3)，或稱為MPEG音頻第3層的一種壓縮格式，它可使聲音文件明顯縮小。MP3文件的聲音質(zhì)量非常好，如果正確錄制和壓縮mp3文件，其音質(zhì)甚至可以和CD音樂相媲美。MP3技術(shù)用戶可以對(duì)文件進(jìn)行“流式處理”，以便用戶不必等待整個(gè)文件下載完成即可收聽該文件。3.3.1適合網(wǎng)頁使用的聲音格式3.RAM格式RAM格式(RA、RPM或RealAudio)是REAL公司的流式媒體聲音格式，壓縮比可調(diào)(28.8Kbps、56K、256K、384K、512K)。此格式具有非常高的壓縮比，文件大小要小于MP3。由于可以在普通的Web服務(wù)器上對(duì)這些文件進(jìn)行“流式處理”，因此這些聲音文件可以邊下載邊播放。用戶必須下載并安裝RealPlayer輔助應(yīng)用程序或插件才可以播放RAM格式文件。4.WMA格式WMA格式是Microsoft新一代含有腳本命令的音頻智能流式媒體格式。所謂“腳本命令”是指在這種格式文件的內(nèi)部可以通過專用軟件寫入并啟動(dòng)運(yùn)行其他媒體文件的命令。所謂“智能”是指可以動(dòng)態(tài)監(jiān)測網(wǎng)絡(luò)環(huán)境，并自動(dòng)調(diào)整下載傳送文件的聲音質(zhì)量，以保證用戶流暢播放。使用MediaEncoder7.0(編碼器)以上版本的軟件壓縮轉(zhuǎn)換；使用WindowsMediaPlayer7.0以上版本的軟件播放。3.3.2鏈接到聲音文件

鏈接到聲音文件是將聲音添加到網(wǎng)頁的一種簡單而有效的方法。這種集成聲音文件的方法可以讓用戶選擇是否要收聽該文件。鏈接聲音文件的具體方法如下。(1)選擇指向聲音文件的文本或圖像。(2)在聲音【屬性】面板中，單擊【鏈接】文本框右側(cè)的【瀏覽文件】按鈕，彈出【選擇文件】對(duì)話框，如圖3-21所示。圖3-21【選擇文件】對(duì)話框

3.3.3嵌入聲音文件嵌入聲音的操作步驟如下。(1)在【設(shè)計(jì)】視圖中，將插入點(diǎn)定位在需要嵌入文件的地方，然后執(zhí)行以下操作之一。 在【插入】工具欄的【常用】選項(xiàng)卡中，單擊【媒體】按鈕，然后從彈出的菜單中選擇【插件】命令，如圖3-22所示，彈出【選擇文件】對(duì)話框。 在菜單欄中選擇【插入】→【媒體】→【插件】命令。圖3-22選擇【插件】命令圖3-22選擇【插件】命令

3.4添加動(dòng)畫3.4.1插入和預(yù)覽Flash動(dòng)畫3.4.2添加Flash按鈕圖3-22選擇【插件】命令3.4.1插入和預(yù)覽Flash動(dòng)畫1.插入Flash動(dòng)畫插入Flash動(dòng)畫的操作步驟如下。(1)在【文檔】窗口的【設(shè)計(jì)】視圖中，將插入點(diǎn)定位在要插入內(nèi)容的位置，然后執(zhí)行以下操作之一。圖3-22選擇【插件】命令3.4.1插入和預(yù)覽Flash動(dòng)畫

在【插入】工具欄的【常用】選項(xiàng)卡中，單擊【媒體】按鈕，然后在彈出的菜單中選擇【Flash】命令，彈出【選擇文件】對(duì)話框，如圖3-25所示。 在菜單欄中選擇【插入】→【媒體】→【Flash】命令，彈出【選擇文件】對(duì)話框，如圖3-25所示。圖3-22選擇【插件】命令圖3-25【選擇文件】對(duì)話框3.4.1插入和預(yù)覽Flash動(dòng)畫(2)在【選擇文件】對(duì)話框中，選擇一個(gè)Flash文件(如：top.swf)，然后單擊【確定】按鈕。如果出現(xiàn)如圖3-26所示的【對(duì)象標(biāo)簽輔助功能屬性】對(duì)話框，可直接單擊【取消】按鈕，即可完成Flash動(dòng)畫的添加過程。這時(shí)將在頁面中出現(xiàn)一個(gè)與實(shí)際Flash動(dòng)畫大小相同的Flash占位符，如圖3-27所示。圖3-22選擇【插件】命令圖3-26【對(duì)象標(biāo)簽輔助功能屬性】對(duì)話框3.4.1插入和預(yù)覽Flash動(dòng)畫2.預(yù)覽Flash動(dòng)畫 在【文檔】窗口中，選擇要預(yù)覽的Flash動(dòng)畫，在【屬性】面板中，單擊【播放】按鈕即可預(yù)覽動(dòng)畫效果。單擊【停止】按鈕可以結(jié)束預(yù)覽。 按<Ctrl>+<Alt>+<Shift>+<P>組合鍵可以預(yù)覽頁面中的所有Flash動(dòng)畫。 通過按<F12>鍵或單擊【文檔】窗口中的【瀏覽網(wǎng)頁文件】按鈕，在瀏覽器中預(yù)覽Flash動(dòng)畫效果。圖3-22選擇【插件】命令3.4.1插入和預(yù)覽Flash動(dòng)畫3.設(shè)置Flash動(dòng)畫屬性若要在【屬性】面板中查看以下屬性，必須先選擇Flash動(dòng)畫，然后在【屬性】面板中設(shè)置其屬性，如圖3-28所示。圖3-22選擇【插件】命令圖3-28【屬性】面板

3.4.2添加Flash按鈕1.添加Flash按鈕 在【插入】工具欄的【常用】選項(xiàng)卡中，單擊【媒體】按鈕，然后單擊【Flash按鈕】按鈕，彈出【插入Flash按鈕】對(duì)話框，如圖3-29所示。 在菜單欄中選擇【插入記錄】→【媒體】→【Flash按鈕】命令，彈出【插入Flash按鈕】對(duì)話框，如圖3-29所示。圖3-22選擇【插件】命令圖3-29【插入Flash按鈕】對(duì)話框3.4.2添加Flash按鈕(2)在【插入Flash按鈕】對(duì)話框的【樣式】下拉列表框中選擇一種按鈕樣式；在【按鈕文本】文本框中輸入按鈕標(biāo)題(可以是中文)。(3)單擊【插入Flash按鈕】對(duì)話框【鏈接】文本框右側(cè)的【瀏覽】按鈕，彈出【選擇文件】對(duì)話框，如圖3-30所示。圖3-22選擇【插件】命令圖3-30【選擇文件】對(duì)話框圖3-30【選擇文件】對(duì)話框3.4.2添加Flash按鈕2.修改Flash按鈕在【文檔】窗口的【設(shè)計(jì)】視圖中，選擇Flash動(dòng)畫，然后執(zhí)行以下操作之一。 單擊【屬性】面板中的【編輯】按鈕，在彈出的【插入Flash按鈕】對(duì)話框中進(jìn)行修改。 雙擊Flash動(dòng)畫占位符，在彈出的【插入Flash按鈕】對(duì)話框中進(jìn)行修改。圖3-22選擇【插件】命令圖3-30【選擇文件】對(duì)話框3.5添加其他多媒體元素3.5.1添加視頻文件3.5.2添加Shockwave

圖3-22選擇【插件】命令圖3-30【選擇文件】對(duì)話框3.5.1添加視頻文件1.插入Flash視頻插入Flash視頻的操作步驟如下。(1)在菜單欄中選擇【插入記錄】→【媒體】→【Flash視頻】命令，彈出【插入Flash視頻】對(duì)話框，如圖3-32所示。圖3-32【插入Flash視頻】對(duì)話框3.5.1添加視頻文件(2)在【插入Flash視頻】對(duì)話框的【視頻類型】下拉列表中選擇【累進(jìn)式下載視頻】選項(xiàng)。(3)單擊【插入Flash視頻】對(duì)話框【URL】右側(cè)的【瀏覽】按鈕，彈出【選擇文件】對(duì)話框，如圖3-33所示。圖3-33【選擇文件】對(duì)話框3.5.1添加視頻文件(4)在“video”文件夾的列表框中選擇一個(gè)本站點(diǎn)內(nèi)的FLV格式視頻文件(mhsg.flv)，單擊【確定】按鈕，返回【插入Flash視頻】對(duì)話框。(5)在【插入Flash視頻】對(duì)話框中，在【外觀】下拉列表框中選擇一種自己喜歡的視頻播放控制組件的【外觀】樣式。(6)在【插入Flash視頻】對(duì)話框中單擊【檢測大小】按鈕，讓Dreamweaver自動(dòng)檢測并設(shè)置視頻組件的大小(高與寬)。(7)勾選【如果必要，提示用戶下載FlashPlayer】復(fù)選框，在用戶沒有所需的版本時(shí)提示其下載FlashPlayer的最新版本。(8)單擊【確定】按鈕，關(guān)閉對(duì)話框，并將Flash視頻內(nèi)容添加到Web頁面中。(9)瀏覽網(wǎng)頁的同時(shí)即可播放Flash視頻內(nèi)容，如圖3-34所示。3.5.1添加視頻文件2.插入其他視頻內(nèi)容可以通過不同方式和使用不同格式將視頻添加到網(wǎng)頁中。視頻文件如果是AVI或MPEG格式，可以采用下載鏈接的方式將其添加到頁面中，讓用戶先下載后播放。而如果是WMV或RM等流媒體格式可以嵌入到網(wǎng)頁中，讓用戶邊下載邊播放。首先，將Director、Authorware等軟件的網(wǎng)絡(luò)發(fā)布格式(Director為DCR，Authorware為AAM)所攜帶的一系列AAS復(fù)制到站點(diǎn)文件夾中，然后再進(jìn)行下列操作。(1)在菜單欄中選擇【插入記錄】→【媒體】→【Shockwave】命令，彈出【選擇文件】對(duì)話框。(2)在【選擇文件】對(duì)話框中選擇Shockwave文件(“../Shockwave/huaban1.dcr”)，然后單擊【確定】按鈕。(3)選擇網(wǎng)頁文檔中的【插件】占位符并將其拖放到合適大小。3.5.2添加ShockwaveShockwave原是Macromedia公司發(fā)布的一種網(wǎng)絡(luò)交互式流媒體技術(shù)，現(xiàn)在也隨Macromedia一起歸入Adobe旗下。用于在網(wǎng)上直接播放Director、Authorware和Freehand等軟件的網(wǎng)絡(luò)發(fā)布格式。它與Flash動(dòng)畫一樣也需要下載插件，只要連接了Internet，那么當(dāng)用戶播放上述軟件的網(wǎng)絡(luò)發(fā)布格式產(chǎn)品時(shí)，插件將自動(dòng)下載到用戶計(jì)算機(jī)并安裝。3.6上機(jī)實(shí)訓(xùn)3.6.1使用文字和圖片完成網(wǎng)頁內(nèi)容3.6.2制作“奧運(yùn)之旅”主頁3.6.1使用文字和圖片完成網(wǎng)頁內(nèi)容使用文字和圖片完成“2.4.2使用表格的布局模式布局一個(gè)網(wǎng)頁”小節(jié)中未完成的網(wǎng)頁內(nèi)容。要求：實(shí)現(xiàn)如圖3-39所示的最終網(wǎng)頁效果，通過實(shí)訓(xùn)練習(xí)，進(jìn)一步熟練文字和圖片的具體操作過程。本實(shí)訓(xùn)最終效果文件見“站點(diǎn)實(shí)例”(WebDemo\ch3\3.6.1.html)。圖3-39最終網(wǎng)頁效果

3.6.2制作“奧運(yùn)之旅”主頁

利用表格、文字、圖片和動(dòng)畫制作一個(gè)完整的網(wǎng)頁。要求：實(shí)現(xiàn)如圖3-46所示的最終網(wǎng)頁效果，通過實(shí)訓(xùn)練習(xí)，進(jìn)一步熟練掌握表格、文字、圖片和動(dòng)畫的操作技巧。本實(shí)訓(xùn)最終效果文件見“站點(diǎn)實(shí)例”(WebDemo\ch3\3.6.2.html)。

整個(gè)網(wǎng)頁分為7個(gè)區(qū)域，在“標(biāo)題區(qū)”插入圖片“top_1.jpg”；在“動(dòng)畫區(qū)”插入Flash動(dòng)畫“top.swf”；在“填充區(qū)”填充與“動(dòng)畫區(qū)”最左側(cè)三角區(qū)相同顏色；在“橫導(dǎo)航”和“縱導(dǎo)航”區(qū)中文字前面的“4個(gè)白點(diǎn)”使用圖片“anniu.gif”；其他均由表格和文字以及背景顏色組成。

3.6.2制作“奧運(yùn)之旅”主頁(1)啟動(dòng)Dreamweaver軟件，按照“1.7建立站點(diǎn)”小節(jié)中介紹的方法將“站點(diǎn)實(shí)例”文件夾(WebDemo)設(shè)為站點(diǎn)文件夾?；蛘邉?chuàng)建一個(gè)新的文件夾將“WebDemo”文件夾下的素材文件復(fù)制至其中。(2)在【文件】面板的“ch3”文件夾上右擊，在彈出的右鍵快捷菜單中選擇【新建文件】命令，創(chuàng)建一個(gè)網(wǎng)頁文件，并將其改名為“3.6.2x.html”；雙擊文件“3.6.2x.html”將其打開。(3)在菜單欄中選擇【插入記錄】→【表格】命令，彈出【表格】對(duì)話框。3.6.2制作“奧運(yùn)之旅”主頁(4)按照對(duì)話中的設(shè)置，單擊【確定】按鈕，插入一個(gè)“1行，1列，760像素寬，邊框、邊距和間距均為0”的表格作為“標(biāo)題區(qū)”。(5)將插入點(diǎn)定位在“標(biāo)題區(qū)”的表格中，在菜單欄中選擇【插入記錄】→【圖像】命令，彈出【選擇圖像源文件】對(duì)話框，如圖3-48所示。(6)在“AY_Media”文件夾中選擇“top_1.jpg”圖片文件后單擊【確定】按鈕，將該圖片文件插入到“標(biāo)題區(qū)”中。(7)將插入點(diǎn)定位在“標(biāo)題區(qū)”表格后面重復(fù)步驟(3)～(4)，插入一個(gè)與“標(biāo)題區(qū)”表格相同的表格作為“動(dòng)畫區(qū)”表格。3.6.2制作“奧運(yùn)之旅”主頁(8)將插入點(diǎn)定位在“動(dòng)畫區(qū)”表格中重復(fù)步驟(5)～(6)將“AY_Media”文件夾中選擇“top_2.jpg”圖片文件插入到“動(dòng)畫區(qū)”表格中。(9)按<F6>鍵進(jìn)入表格的擴(kuò)展模式(或在菜單欄中選擇【查看】→【表格模式】→【擴(kuò)展表格模式】命令)，將插入點(diǎn)定位在“標(biāo)題區(qū)”表格后面，如圖3-49所示。圖3-48【選擇圖像源文件】對(duì)話框3.6.2制作“奧運(yùn)之旅”主頁(10)重復(fù)步驟(3)～(4)在“標(biāo)題區(qū)”和“動(dòng)畫區(qū)”表格之間插入一個(gè)“1行，1列，760像素寬，邊框、邊距和間距均為0”的表格，并將插入點(diǎn)定位在表格中；在【屬性】面板的【高】文本框中輸入“1”，如圖3-50所示。圖3-50在【屬性】面板的【高】文本框中輸入“1”3.6.2制作“奧運(yùn)之旅”主頁(11)在保證插入點(diǎn)在表格中的情況下，在【文檔】工具欄中單擊【拆分】視圖按鈕，進(jìn)入【拆分】視圖狀態(tài)，在“代碼”區(qū)找到光標(biāo)后面的表格代碼“ ”，如圖3-51所示，并將其刪除，這樣，新插入的表格就形成了1個(gè)像素寬的白線。圖3-51表格代碼3.6.2制作“奧運(yùn)之旅”主頁(12)在【文檔】工具欄中單擊【設(shè)計(jì)】視圖按鈕，返回【設(shè)計(jì)】視圖；按<F6>鍵，返回表格的標(biāo)準(zhǔn)模式。(13)將插入點(diǎn)定位到“動(dòng)畫區(qū)”表格后面，插入一個(gè)“1行，1列，760像素寬，邊框、邊距和間距均為0”的表格作為“填充區(qū)”；在“填充區(qū)”表格選中的情況下，在【屬性】面板中單擊【背景顏色】按鈕，光標(biāo)變?yōu)椤拔堋毙螤?；將光?biāo)移動(dòng)到“動(dòng)畫區(qū)”圖片左下角，單擊鼠標(biāo)。3.6.2制作“奧運(yùn)之旅”主頁(14)在“AY_Media”文件夾中選擇“top.swf”動(dòng)畫文件，將其拖放到“動(dòng)畫區(qū)”的圖片上，如圖3-53所示(也可在菜單欄中選擇【插入記錄】→【媒體】→【Flash】命令)，將Flash動(dòng)畫插入到圖片下方；選中“動(dòng)畫區(qū)”中的圖片，按<Delete>鍵將其刪除。這樣就可以把原來用來過渡的圖片換成動(dòng)畫。圖3-53拖拽動(dòng)畫文件到網(wǎng)頁“動(dòng)畫區(qū)”

3.6.2制作“奧運(yùn)之旅”主頁(15)將插入點(diǎn)定位到最下面的表格后面，插入一個(gè)“1行，7列，760像素寬，邊框、邊距和間距均為0”的表格作為“橫導(dǎo)航”區(qū)；將其背景顏色填充為“#336699”，拾色器選擇如圖3-54所示。圖3-54拾色器選擇3.6.2制作“奧運(yùn)之旅”主頁(16)將插入點(diǎn)定位到“橫導(dǎo)航”區(qū)表格的任意一個(gè)單元格中，然后在【文檔】窗口右下角的【標(biāo)簽選擇器】中選擇【<tr>】標(biāo)簽，將“橫導(dǎo)航”區(qū)的7個(gè)單元格全部選中，在【屬性】面板的【寬】文本框中輸入“108”，即將7個(gè)單元格的寬同時(shí)設(shè)置為108像素。3.6.2制作“奧運(yùn)之旅”主頁(17)在“橫導(dǎo)航”區(qū)表格的每個(gè)單元格(除去前兩個(gè))中，從【文件】面板的“AY_Media”文件夾中分別拖放一個(gè)“anniu.gif”圖標(biāo)；再分別輸入“奧運(yùn)會(huì)徽”、“奧運(yùn)火炬”、“奧運(yùn)吉祥物”、“奧運(yùn)獎(jiǎng)牌”和“聯(lián)系我們”等文字內(nèi)容，如圖3-55所示。圖3-55“橫導(dǎo)航”區(qū)表格內(nèi)容3.6.2制作“奧運(yùn)之旅”主頁(