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

第4章建立網(wǎng)頁(yè)鏈接4.1網(wǎng)頁(yè)鏈接概述4.2創(chuàng)建文字鏈接4.3創(chuàng)建跳轉(zhuǎn)菜單鏈接4.4創(chuàng)建Spry導(dǎo)航菜單4.5創(chuàng)建圖片鏈接4.6上機(jī)實(shí)訓(xùn)4.1網(wǎng)頁(yè)鏈接概述4.1.1鏈接起點(diǎn)4.1.2鏈接路徑4.1.3鏈接目標(biāo)文件4.1.1鏈接起點(diǎn)

鏈接起點(diǎn)指插入到網(wǎng)頁(yè)中的一個(gè)元素，是用戶點(diǎn)擊的部位，其可以是文字、圖片、圖片熱區(qū)或按鈕等多種形式。也就是，當(dāng)用戶點(diǎn)擊加了鏈接的文字、圖片、圖片熱區(qū)或按鈕等部位時(shí)，瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)到所鏈接的目標(biāo)。其中最常使用的是文字，也稱文字鏈接。默認(rèn)情況下如果文字中添加了鏈接，在瀏覽狀態(tài)下就會(huì)出現(xiàn)下劃線，使用CSS層疊樣式表(詳見(jiàn)“第5章使用層疊樣式表控制網(wǎng)頁(yè)效果”)可以使其具有某些按鈕的效果。4.1.2鏈接路徑1.絕對(duì)路徑

所謂絕對(duì)路徑，指的是每個(gè)網(wǎng)頁(yè)在網(wǎng)絡(luò)(包括：Internet、廣域網(wǎng)、城域網(wǎng)或局域網(wǎng))中完整的、唯一的訪問(wèn)地址，又稱為“URL”地址。也就是用戶訪問(wèn)網(wǎng)絡(luò)資源時(shí)瀏覽器地址欄中顯示的內(nèi)容。網(wǎng)絡(luò)中的每個(gè)網(wǎng)頁(yè)或其他資源均有一個(gè)唯一的地址，這樣才可以被用戶訪問(wèn)而不會(huì)發(fā)生錯(cuò)誤。

4.1.2鏈接路徑2.文檔相對(duì)路徑文檔相對(duì)路徑是指相對(duì)于鏈接起點(diǎn)所在網(wǎng)頁(yè)來(lái)描述鏈接目標(biāo)文件的路徑。比如：在網(wǎng)頁(yè)“ch2/2-1.html”中有一個(gè)鏈接要打開(kāi)網(wǎng)頁(yè)“ch1/1-1.html”，那么其相對(duì)于網(wǎng)頁(yè)“2-1.html”的路徑就是“../ch1/1-1.html”，如圖4-1所示，這就屬于文檔相對(duì)路徑。也就是，鏈接起點(diǎn)為“2-1.html”，鏈接目標(biāo)為“1-1.html”，那么文檔相對(duì)路徑就是“../ch1/1-1.html”。圖4-1文檔相對(duì)路徑4.1.2鏈接路徑3.站點(diǎn)根目錄相對(duì)路徑站點(diǎn)根目錄相對(duì)路徑也屬于相對(duì)路徑，是相對(duì)于站點(diǎn)根目錄的鏈接路徑。與文檔相對(duì)路徑不同的是相對(duì)的起點(diǎn)不同。文檔相對(duì)路徑的起點(diǎn)是鏈接起點(diǎn)所在的網(wǎng)頁(yè)，而站點(diǎn)根目錄相對(duì)路徑的起點(diǎn)為站點(diǎn)根目錄。4.1.3鏈接目標(biāo)文件1.文件鏈接文件鏈接是指與其他文檔或文件(如圖形、影片、PDF或聲音文件)的鏈接。鏈接目標(biāo)文件一般可分為瀏覽器可解釋的文件和瀏覽器不可解釋的文件兩類。瀏覽器可解釋的文件當(dāng)鏈接執(zhí)行(用戶點(diǎn)擊)以后瀏覽器可解釋的文件將直接顯示在瀏覽器窗口中，這些目標(biāo)文件一般是各種格式的網(wǎng)頁(yè)文件和圖片動(dòng)畫(huà)文件。瀏覽器不可解釋的文件當(dāng)鏈接執(zhí)行(用戶點(diǎn)擊)以后，如果遇到的是瀏覽器不能解釋的文件，那么站點(diǎn)將會(huì)彈出【下載】對(duì)話框，提醒用戶是【保存】還是【打開(kāi)】文件。如果單擊【保存】按鈕，目標(biāo)文件將被保存到用戶指定的目錄中；如果單擊【打開(kāi)】按鈕，目標(biāo)文件將被首先自動(dòng)保存到瀏覽器的緩存文件夾中，然后再選擇用戶計(jì)算機(jī)默認(rèn)的程序打開(kāi)文件。這類文件一般是瀏覽器不能直接解釋的各種媒體文件、各種打包文件以及各種程序文件。4.1.3鏈接目標(biāo)文件2.錨記鏈接錨記(也叫錨點(diǎn))鏈接是指首先打開(kāi)目標(biāo)網(wǎng)頁(yè)并自動(dòng)跳轉(zhuǎn)至網(wǎng)頁(yè)中命名了錨記的特定位置。要求所鏈接的目標(biāo)網(wǎng)頁(yè)必須首先命名了錨記才行。3.電子郵件鏈接電子郵件鏈接是指鏈接的路徑為一個(gè)郵件地址，執(zhí)行時(shí)將新建一個(gè)已填好收件人地址的空白電子郵件。4.2創(chuàng)建文字鏈接4.2.1鏈接到文件4.2.2鏈接到錨記4.2.3鏈接到電子郵件4.2.1鏈接到文件1.鏈接到本地文件執(zhí)行下列操作之一，可以創(chuàng)建文字鏈接到本地文件。在【屬性】面板中單擊【瀏覽文件】按鈕創(chuàng)建鏈接。選擇要?jiǎng)?chuàng)建鏈接的文字，單擊【屬性】面板右上角【鏈接】下拉列表框右側(cè)的【瀏覽文件】按鈕，彈出【選擇文件】對(duì)話框，如圖4-2所示。在【相對(duì)于】下拉列表框中選擇【文檔】選項(xiàng)，再在“ch3”文件夾的列表框中選擇一個(gè)本地文件“3-1.html”，單擊【確定】按鈕。這時(shí)【屬性】面板的【鏈接】下拉列表框中就會(huì)自動(dòng)形成文檔相對(duì)路徑“../ch3/3-1.html”。圖4-2【選擇文件】對(duì)話框4.2.1鏈接到文件

在【屬性】面板中單擊【指向】按鈕創(chuàng)建鏈接。選中要?jiǎng)?chuàng)建鏈接的文字，在【屬性】面板的【指向】按鈕上按住鼠標(biāo)左鍵不松手，拖動(dòng)鼠標(biāo)到目標(biāo)文件上方后松開(kāi)鼠標(biāo)，如圖4-3所示。圖4-3【指向】按鈕操作示意圖4.2.1鏈接到文件2.鏈接到網(wǎng)絡(luò)資源鏈接到網(wǎng)絡(luò)資源中的某一個(gè)文件就不能使用上面剛講過(guò)的“鏈接到本地文件”的方法了。比如：要?jiǎng)?chuàng)建鏈接到“百度”網(wǎng)站首頁(yè)的鏈接，可以執(zhí)行以下操作。(1)啟動(dòng)瀏覽器，瀏覽到“百度”網(wǎng)站的首頁(yè)，選中【地址】欄中的地址后右擊，在彈出的右鍵快捷菜單中選擇【復(fù)制】命令，將其復(fù)制到剪貼板中，如圖4-4所示。圖4-4【復(fù)制】絕對(duì)路徑4.2.1鏈接到文件(2)返回Dreamweaver軟件中，選中要?jiǎng)?chuàng)建鏈接的文字，在【屬性】面板的【鏈接】下拉列表框中右擊，在彈出的右鍵快捷菜單中選擇【粘貼】命令，將網(wǎng)絡(luò)資源的絕對(duì)路徑粘貼到【鏈接】下拉列表框中，如圖4-5所示。圖4-5【粘貼】絕對(duì)路徑4.2.1鏈接到文件3.鏈接目標(biāo)文件顯示窗口鏈接目標(biāo)文件顯示窗口是指當(dāng)執(zhí)行一個(gè)鏈接后目標(biāo)文件所顯示的位置。在創(chuàng)建了鏈接的屬性中均有【目標(biāo)】屬性，其中在沒(méi)有應(yīng)用框架的情況下，每個(gè)鏈接的【目標(biāo)】下拉列表框中都有如下4個(gè)選項(xiàng)。●【_blank】：在新瀏覽器窗口中打開(kāi)所鏈接的頁(yè)面。●【_self】：在同一個(gè)瀏覽器窗口中加載所鏈接的頁(yè)面，這是默認(rèn)選項(xiàng)。如果頁(yè)面位于框架或框架集中，該頁(yè)面將在該框架中加載?！瘛綺parent】：在文檔的直接父框架集中加載所鏈接的文檔?！瘛綺top】：在框架集的頂層窗口中加載所鏈接的頁(yè)面。4.2.2鏈接到錨記1.創(chuàng)建命名錨記命名錨記就好像是一個(gè)書(shū)簽一樣，使網(wǎng)頁(yè)用戶可以快速定位到需要的位置，主要應(yīng)用在當(dāng)一個(gè)網(wǎng)頁(yè)文檔的內(nèi)容比較多，需要拖動(dòng)縱向卷滾條查看網(wǎng)頁(yè)中的內(nèi)容?？梢詧?zhí)行下列操作創(chuàng)建命名錨記。4.2.2鏈接到錨記(1)在【文檔】窗口的【設(shè)計(jì)】視圖中，將插入點(diǎn)定位在需要命名錨記的地方。在菜欄中選擇【插入】→【命名錨記】命令，彈出【命名錨記】對(duì)話框，如圖4-6所示。(2)在【錨記名稱】文本框中輸入錨記的名稱(錨記名稱不能包含空格)，然后單擊【確定】按鈕，【錨記標(biāo)記】圖標(biāo)將出現(xiàn)在插入點(diǎn)。圖4-6【命名錨記】對(duì)話框4.2.2鏈接到錨記2.鏈接到命名錨記鏈接到命名錨記的操作步驟如下。(1)在【文檔】窗口的【設(shè)計(jì)】視圖中，選擇要?jiǎng)?chuàng)建鏈接的文本或圖像。(2)在【屬性】面板的【鏈接】下拉列表框中，輸入一個(gè)符號(hào)“#”和錨記名稱。例如，若要鏈接到當(dāng)前網(wǎng)頁(yè)文檔中名為“01”的錨記，就輸入“#01”。若要鏈接到同一文件夾中其他文件(如“4-2.html”文件)中名為“01”的錨記，需輸入“4-2.html#01”。4.2.2鏈接到錨記3.使用拖拽方法鏈接到命名錨記使用拖拽方法鏈接到命名錨記的操作步驟如下。(1)同時(shí)打開(kāi)鏈接起點(diǎn)網(wǎng)頁(yè)和包含命名錨記的鏈接目標(biāo)網(wǎng)頁(yè)。(2)選擇網(wǎng)頁(yè)文檔右上角【窗口】按鈕中的【向下還原】按鈕(取消最大化)，并適當(dāng)調(diào)整窗口大小，以同時(shí)看到起點(diǎn)網(wǎng)頁(yè)的鏈接起點(diǎn)和目標(biāo)網(wǎng)頁(yè)的錨記標(biāo)記。(3)在【文檔】窗口的【設(shè)計(jì)】視圖中，選擇要?jiǎng)?chuàng)建鏈接的文本。(4)執(zhí)行下列操作之一。4.2.2鏈接到錨記

單擊【屬性】面板【鏈接】下拉列表框右側(cè)的【指向】按鈕，然后將它拖到要鏈接到的錨記上。可以是同一文檔中的錨記，也可以是其他打開(kāi)的文檔中的錨記，如圖4-7所示。在【文檔】窗口中，按<Shift>鍵拖動(dòng)鼠標(biāo)，從所選文本拖動(dòng)到要鏈接到的錨記。圖4-7拖拽指向目標(biāo)4.2.3鏈接到電子郵件

創(chuàng)建電子郵件鏈接要求用戶計(jì)算機(jī)安裝Outlook軟件，其方法如下。(1)將插入點(diǎn)定位在要?jiǎng)?chuàng)建到電子郵件鏈接的位置。(2)在菜單欄中選擇【插入記錄】→【電子郵件鏈接】命令，彈出【電子郵件鏈接】對(duì)話框，如圖4-8所示。圖3-3在【屬性】面板中修改水平線的屬性圖4-8【電子郵件鏈接】對(duì)話框4.3創(chuàng)建跳轉(zhuǎn)菜單鏈接4.3.1插入跳轉(zhuǎn)菜單4.3.2修改跳轉(zhuǎn)菜單4.3.1插入跳轉(zhuǎn)菜單

打開(kāi)一個(gè)文檔，然后將插入點(diǎn)定位在網(wǎng)頁(yè)【文檔】窗口中。

(1)在菜單欄中選擇【插入】→【表單】→【跳轉(zhuǎn)菜單】命令，彈出【插入跳轉(zhuǎn)菜單】對(duì)話框，如圖4-9所示。

(2)完成【插入跳轉(zhuǎn)菜單】對(duì)話框中的各項(xiàng)設(shè)置后，單擊【確定】按鈕。圖3-3在【屬性】面板中修改水平線的屬性圖4-9【插入跳轉(zhuǎn)菜單】對(duì)話框4.3.2修改跳轉(zhuǎn)菜單插入跳轉(zhuǎn)菜單以后可以更改菜單項(xiàng)的順序或菜單項(xiàng)所鏈接到的文件，也可以添加、刪除或重命名菜單項(xiàng)。(1)在【文檔】窗口的【設(shè)計(jì)】視圖中，單擊跳轉(zhuǎn)菜單對(duì)象以選中對(duì)象。(2)在【屬性】面板中，單擊【列表值】按鈕，彈出【列表值】對(duì)話框，如圖4-10所示。(3)使用【列表值】對(duì)話框更改菜單項(xiàng)，再單擊【確定】按鈕。

圖3-3在【屬性】面板中修改水平線的屬性圖4-10【列表值】對(duì)話框4.4創(chuàng)建Spry導(dǎo)航菜單4.4.1添加Spry導(dǎo)航菜單4.4.2修改Spry導(dǎo)航菜單圖3-3在【屬性】面板中修改水平線的屬性4.4.1添加Spry導(dǎo)航菜單進(jìn)行如下操作可以插入Spry導(dǎo)航菜單。(1)將插入點(diǎn)定位到需要插入導(dǎo)航菜單的位置。(2)在菜單欄中選擇【插入】→【Spry】→【Spry菜單欄】命令，彈出【Spry菜單欄】對(duì)話框，如圖4-11所示。圖3-3在【屬性】面板中修改水平線的屬性圖4-11【Spry菜單欄】對(duì)話框4.4.1添加Spry導(dǎo)航菜單(3)點(diǎn)選【水平】或【垂直】單選鈕，再單擊【確定】按鈕。若網(wǎng)頁(yè)在瀏覽狀態(tài)下，如果點(diǎn)選【水平】單選鈕，菜單效果為橫向?qū)Ш讲藛危鐖D4-12所示。圖4-12橫向?qū)Ш讲藛螆D4-12橫向?qū)Ш讲藛?.4.1添加Spry導(dǎo)航菜單(4)在【設(shè)計(jì)】視圖中選擇【Spry菜單欄：MenuBar2】命令，如圖4-14所示。在【屬性】面板中選擇【項(xiàng)目1】選項(xiàng)，在【文本】文本框中將【項(xiàng)目1】修改為“第1章”，如圖4-15所示。圖4-15在【屬性】面板中將【項(xiàng)目1】選項(xiàng)修改為“第1章”4.4.1添加Spry導(dǎo)航菜單(5)重復(fù)步驟(4)，分別將【項(xiàng)目2】改為“第2章”、【項(xiàng)目3】改為“第3章”。(6)在【屬性】面板中選擇【項(xiàng)目4】，單擊其上方的【刪除】按鈕將其刪除。(7)在【屬性】面板中選擇“第1章”，將【項(xiàng)目1.1】改為“第1節(jié)”，單擊【鏈接】右側(cè)的【瀏覽文件】按鈕查找到目標(biāo)網(wǎng)頁(yè)“ch1/1-1.html”；將【項(xiàng)目1.2】和【項(xiàng)目1.3】刪除，如圖4-16所示。圖4-16在【屬性】面板中將【項(xiàng)目1.1】選項(xiàng)修改為“第1節(jié)”4.4.1添加Spry導(dǎo)航菜單(8)在【屬性】面板中選擇“第2章”，并單擊【屬性】面板中間列表上方的【增項(xiàng)】按鈕，添加3個(gè)2級(jí)菜單，分別為“第1節(jié)”、“第2節(jié)”和“第3節(jié)”，并分別指向“ch2”文件夾中的“2-1.html”、“2-2.html”和“2-3.html”網(wǎng)頁(yè)，如圖4-17所示。圖4-17在【屬性】面板中修改“第2章”的2級(jí)菜單4.4.1添加Spry導(dǎo)航菜單(9)在【屬性】面板中選擇“第3章”選項(xiàng)，分別將2級(jí)菜單名改為“第1節(jié)”、“第2節(jié)”和“第3節(jié)”，并分別指向“ch3”文件夾中的“3-1.html”、“3-2.html”和“3-3.html”網(wǎng)頁(yè)，刪除“第1節(jié)”下的3級(jí)子菜單。完成后，編輯狀態(tài)下最終效果如圖4-18所示。圖4-18編輯狀態(tài)下最終效果4.4.2修改Spry導(dǎo)航菜單1.指定菜單項(xiàng)的目標(biāo)屬性目標(biāo)屬性是指要在何處打開(kāi)所鏈接的目標(biāo)頁(yè)面。例如，可以為菜單項(xiàng)分配一個(gè)目標(biāo)屬性，以便在站點(diǎn)用戶單擊鏈接時(shí)，在新瀏覽器窗口中打開(kāi)所鏈接的頁(yè)面。如果使用的是框架集，則還可以指定要在其中打開(kāi)所鏈接頁(yè)面的框架的名稱。關(guān)于框架集詳見(jiàn)“第6章使用框架布局網(wǎng)頁(yè)”。進(jìn)行如下操作可以指定菜單項(xiàng)的目標(biāo)屬性。(1)在【文檔】窗口中選擇一個(gè)Spry導(dǎo)航菜單。(2)在【屬性】面板中，選擇要分配目標(biāo)屬性的菜單項(xiàng)名稱。(3)在【目標(biāo)】下拉列表框中選擇以下4個(gè)選項(xiàng)之一。4.4.2修改Spry導(dǎo)航菜單2.其他修改要修改Spry導(dǎo)航菜單的一些內(nèi)容，一般可在其【屬性】面板中實(shí)現(xiàn)。在【設(shè)計(jì)】視圖中選擇Spry菜單標(biāo)題，打開(kāi)其【屬性】面板進(jìn)行修改，如圖4-20所示。圖4-20【屬性】面板

4.5創(chuàng)建圖片鏈接

4.5.1創(chuàng)建圖片整體鏈接4.5.2創(chuàng)建圖片局部熱點(diǎn)鏈接4.5.1創(chuàng)建圖片整體鏈接(1)首先將一幅圖片插入到頁(yè)面中，并將各個(gè)圖片的寬度和高度在【屬性】面板中調(diào)整為一致(這樣有利于美觀)，如圖4-21所示。圖4-21插入頁(yè)面中的圖片4.5.1創(chuàng)建圖片整體鏈接(2)在【設(shè)計(jì)】視圖中，選擇插入到頁(yè)面的圖片，在【屬性】面板中，單擊【鏈接】下拉列表框右側(cè)的【指向】按鈕，拖動(dòng)鼠標(biāo)至【文件】面板對(duì)應(yīng)的圖片文件上松開(kāi)鼠標(biāo)，如圖4-22所示。圖4-22為圖片添加鏈接4.5.1創(chuàng)建圖片整體鏈接(3)在【設(shè)計(jì)】視圖中選擇添加了鏈接的圖片，并且在【屬性】面板的【目標(biāo)】下拉列表框中選擇【_blank】選項(xiàng)，如圖4-23所示，使其目標(biāo)圖片在新彈出的窗口中顯示。圖4-23【屬性】面板的【目標(biāo)】下拉列表框4.5.2創(chuàng)建圖片局部熱點(diǎn)鏈接(1)首先將一幅圖片(河北地圖)插入到頁(yè)面中，選中圖片后在【屬性】面板中單擊【多邊形熱點(diǎn)工具】按鈕，如圖4-24所示。圖4-24在【屬性】面板中單擊【多邊形熱點(diǎn)工具】按鈕4.5.2創(chuàng)建圖片局部熱點(diǎn)鏈接(2)將光標(biāo)定位到【設(shè)計(jì)】視圖窗口中，鼠標(biāo)指針變?yōu)椤笆中巍保匦枰L制圖形的邊緣(比如：承德市)不斷單擊直至閉合，最后雙擊結(jié)束繪制。繪制的不規(guī)則熱區(qū)如圖4-25所示。圖4-25繪制的不規(guī)則熱區(qū)4.5.2創(chuàng)建圖片局部熱點(diǎn)鏈接(3)選擇熱區(qū)(出現(xiàn)控制點(diǎn))，在【屬性】面板中為其添加“chengde.jpg”圖片文件(承德地圖)的鏈接，在【目標(biāo)】下拉列表框中選擇【_blank】選項(xiàng)，【替換】文本框中輸入“承德地圖”用于文字提示，如圖4-26所示。圖4-26為熱區(qū)添加鏈接4.5.2創(chuàng)建圖片局部熱點(diǎn)鏈接(4)按<F12>鍵預(yù)覽本頁(yè)，當(dāng)光標(biāo)指向熱區(qū)時(shí)，將變?yōu)槭中喂鈽?biāo)，光標(biāo)右下角出現(xiàn)“承德地圖”文字提示條，如圖4-27所示。圖4-27預(yù)覽狀態(tài)4.6上機(jī)實(shí)訓(xùn)

4.6.1制作“奧運(yùn)吉祥物”網(wǎng)站4.6.2制作地圖網(wǎng)站4.6.1制作“奧運(yùn)吉祥物”網(wǎng)站

使用“站點(diǎn)實(shí)例”素材文件夾(WebDemo\AY_Media\jixiangwu)提供的圖片和文本素材制作“奧運(yùn)之旅”網(wǎng)站的子欄目網(wǎng)站“奧運(yùn)吉祥物”。1.實(shí)訓(xùn)目的4.6.1制作“奧運(yùn)吉祥物”網(wǎng)站2.實(shí)訓(xùn)分析(1)在3.6.2節(jié)中制作的“奧運(yùn)之旅”網(wǎng)頁(yè)(3.6.2x.html)的基礎(chǔ)上進(jìn)行修改。(2)文字部分按文本文件(WebDemo\AY_Media\jixiangwu\奧運(yùn)吉祥物.txt)提供的資料修改。(3)圖片部分文件名不帶“X”的(如：20.jpg)為大圖，用在各個(gè)主題頁(yè)上，帶“X”的(如：20x.jpg)為縮略圖，用在欄目主頁(yè)上。4.6.1制作“奧運(yùn)吉祥物”網(wǎng)站3.實(shí)訓(xùn)步驟(1)啟動(dòng)Dreamweaver軟件，打開(kāi)“3.6.2”節(jié)中制作的“奧運(yùn)之旅”主頁(yè)(WebDemo\ch3\3.6.2x.html)，將其另存為“WebDemo\ch4\4.6.1-1.html”，網(wǎng)頁(yè)下部需要修改的部分如圖4-29所示。圖4-29網(wǎng)頁(yè)下部需要修改的部分4.6.1制作“奧運(yùn)吉祥物”網(wǎng)站3.實(shí)訓(xùn)步驟(2)通過(guò)鼠標(biāo)拖拽選中左側(cè)文字鏈接部分的最下面3行。按<Delete>鍵將其刪除。(3)打開(kāi)“奧運(yùn)吉祥物.txt”文件，按其內(nèi)容將其余10行分別改為如圖4-31所示的“奧運(yùn)吉祥物”目錄。圖4-31“奧運(yùn)吉祥物”目錄4.6.1制作“奧運(yùn)吉祥物”網(wǎng)站3.實(shí)訓(xùn)步驟(4)將如圖4-29所示右側(cè)上部文字通過(guò)復(fù)制、粘貼將其內(nèi)容改為“1972年的慕尼黑奧運(yùn)會(huì)(小獵狗)”相關(guān)內(nèi)容。(5)將如圖4-29所示右側(cè)中間文字內(nèi)容刪除，插入一個(gè)表格(1行，1列，寬45像素，單元格間距為4，邊框?yàn)?)。選擇剛插入的表格，按<→右>方向鍵將光標(biāo)定位到其所在的單元格中，在【屬性】面板的【水平】下拉列表框中選擇【居中對(duì)齊】選項(xiàng)，以使表格在單元格中水平居中。4.6.1制作“奧運(yùn)吉祥物”網(wǎng)站3.實(shí)訓(xùn)步驟(6)在【文件】面板中將“20.jpg”圖片文件通過(guò)鼠標(biāo)拖拽到表格中，如圖4-32所示。完成“4.6.1-1.html”網(wǎng)頁(yè)修改的最終效果如圖4-33所示。圖4-32通過(guò)拖拽插入圖片4.6.1制作“奧運(yùn)吉祥物”網(wǎng)站3.實(shí)訓(xùn)步驟(7)將“4.6.1-1.html”另存為“4.6.1-2.html”，將右側(cè)文字部分按提供的文字資料改為“1976年蒙特利爾奧運(yùn)會(huì)(海貍)”相關(guān)內(nèi)容，將圖片改為“