網(wǎng)頁制作基礎(chǔ)教程 （Dreamweaver CC）（第3版）課件 第3、4章 網(wǎng)頁布局、使用超鏈接

職業(yè)教育教學(xué)用書網(wǎng)頁制作基礎(chǔ)教程（DreamweaverCC）網(wǎng)站制作前的準(zhǔn)備1網(wǎng)頁布局與規(guī)劃2網(wǎng)頁的編輯3網(wǎng)頁的多媒體效果4網(wǎng)站的管理與上傳5模塊目錄網(wǎng)頁布局網(wǎng)站的風(fēng)格網(wǎng)頁布局實(shí)例網(wǎng)頁布局的注意事項(xiàng)繪制網(wǎng)頁布局草圖項(xiàng)目一網(wǎng)頁布局的相關(guān)知識子項(xiàng)目1網(wǎng)站的風(fēng)格在對網(wǎng)頁插入各種對象和修飾效果前，一定要先確定網(wǎng)站風(fēng)格和網(wǎng)頁布局。也就是說，要先確定網(wǎng)站的總體風(fēng)格，并對網(wǎng)頁布局進(jìn)行規(guī)劃，這樣才能保證網(wǎng)站中各個(gè)網(wǎng)頁的統(tǒng)一。網(wǎng)上書店的網(wǎng)頁內(nèi)容豐富、色彩鮮艷，并且有大幅廣告和浮動(dòng)的“客服”懸停圖片鏈接。網(wǎng)站的風(fēng)格

網(wǎng)絡(luò)在線學(xué)習(xí)平臺內(nèi)容比較單一，但是非常有條理且欄目突出，使瀏覽者可以很容易地搜索到自己關(guān)心的內(nèi)容。網(wǎng)站的風(fēng)格旅行網(wǎng)站功能比較單一，看起來也比較簡單，采用一幅圖片作為主頁的主要內(nèi)容，僅有幾個(gè)打開其他網(wǎng)頁的超鏈接文字，感覺非常清新。網(wǎng)站的風(fēng)格網(wǎng)站的風(fēng)格網(wǎng)站風(fēng)格，沒有優(yōu)劣之分，只是網(wǎng)站的性質(zhì)與風(fēng)格有著根本的區(qū)別。“網(wǎng)上書店”采用鮮艷的色彩吸引瀏覽者的注意，具有一定的商業(yè)目的，所以有廣告。“網(wǎng)絡(luò)在線學(xué)習(xí)平臺”是一個(gè)服務(wù)性質(zhì)的網(wǎng)站，主要為用戶提供學(xué)習(xí)或培訓(xùn)服務(wù)等，所以它無須借助各種手段吸引瀏覽者，需要服務(wù)的用戶自然會來?！奥眯芯W(wǎng)站”顯然更具有個(gè)性色彩，網(wǎng)頁中的文字很少，也沒有廣告，卻留有大量的空白，給人以想象的空間，該網(wǎng)站提供的專一且專業(yè)的服務(wù)，是吸引瀏覽者的關(guān)鍵。子項(xiàng)目2網(wǎng)頁布局實(shí)例所謂網(wǎng)頁布局，通俗地說，就是確定網(wǎng)頁上的網(wǎng)站標(biāo)志、導(dǎo)航欄和菜單等元素的位置。不同網(wǎng)頁上各種網(wǎng)頁元素所處的地位不同，其位置也會不同。在通常情況下，重要的元素都放在突出位置。子項(xiàng)目2網(wǎng)頁布局實(shí)例1.“同”字形結(jié)構(gòu)。經(jīng)常變形為“回”字形結(jié)構(gòu)、“匡”字形結(jié)構(gòu)等，甚至有更加自由的結(jié)構(gòu)。無論如何變形，其特點(diǎn)都是網(wǎng)站的頂部是徽標(biāo)和圖片（廣告）欄；下面分為3列或多列，兩邊的兩列區(qū)域比較小，一般是導(dǎo)航超鏈接和小型圖片廣告等；中間是網(wǎng)站的主要內(nèi)容；底部是網(wǎng)站的版權(quán)信息等。子項(xiàng)目2網(wǎng)頁布局實(shí)例2.標(biāo)題正文形結(jié)構(gòu)：這種結(jié)構(gòu)頂部是網(wǎng)站標(biāo)識和標(biāo)題，下面是網(wǎng)頁正文，內(nèi)容非常簡單。子項(xiàng)目2網(wǎng)頁布局實(shí)例3.分欄形結(jié)構(gòu)：一般分為左、右（或上、下）兩欄，也可能分為多欄。通常將導(dǎo)航鏈接與正文放在不同的欄中，這樣在打開新的網(wǎng)頁時(shí)，導(dǎo)航鏈接欄的內(nèi)容不會發(fā)生變化。子項(xiàng)目2網(wǎng)頁布局實(shí)例4.網(wǎng)格形結(jié)構(gòu)網(wǎng)頁：使用不同大小的網(wǎng)格來表達(dá)內(nèi)容，給人一種整齊的秩序感。使用這種結(jié)構(gòu)可以讓不同的網(wǎng)格表達(dá)不同的內(nèi)容，從而減少了文字，保持了內(nèi)容的有序，提升了整個(gè)網(wǎng)頁的整齊性。子項(xiàng)目2網(wǎng)頁布局實(shí)例4.網(wǎng)格形結(jié)構(gòu)網(wǎng)頁：使用不同大小的網(wǎng)格來表達(dá)內(nèi)容，給人一種整齊的秩序感。使用這種結(jié)構(gòu)可以讓不同的網(wǎng)格表達(dá)不同的內(nèi)容，從而減少了文字，保持了內(nèi)容的有序，提升了整個(gè)網(wǎng)頁的整齊性。子項(xiàng)目2網(wǎng)頁布局實(shí)例5.封面形結(jié)構(gòu)：先看到的是一幅圖片或動(dòng)畫，在圖片或動(dòng)畫的下方有一個(gè)進(jìn)入下一級網(wǎng)頁的超鏈接提示文字。子項(xiàng)目3網(wǎng)頁布局的注意事項(xiàng)165432網(wǎng)頁布局的注意事項(xiàng)疏密度網(wǎng)頁布局要做到疏密有度，不要讓整個(gè)網(wǎng)頁布滿密集的文字信息或圖片，適當(dāng)留白反而可以強(qiáng)調(diào)整個(gè)畫面的重點(diǎn)部分。反復(fù)性反復(fù)就是不斷地出現(xiàn)。例如，利用幾個(gè)有規(guī)律的小色塊在網(wǎng)頁中上、下、左、右延伸排列，這就是反復(fù)之美；利用大小相同的圖片進(jìn)行反復(fù)排版，這也是反復(fù)之美。韻律感具有相同特性的對象，如點(diǎn)、圓、線條等在沿曲線反復(fù)排列時(shí)，就會產(chǎn)生韻律感，使畫面顯得輕盈且富有靈氣。平衡性一個(gè)好的網(wǎng)頁布局應(yīng)該給人一種安定、平穩(wěn)的感覺，它不僅表現(xiàn)在文字、圖像等元素的空間占用上分布均勻，還表現(xiàn)在色彩的平衡，要給人一種協(xié)調(diào)的感覺。對稱性對稱是一種美，而我們生活中有許多事物都是對稱的。對比性讓不同的形態(tài)、色彩等元素相互對比，可以產(chǎn)生鮮明的視覺效果，如色彩對比、圖形對比等，往往能創(chuàng)造出富有變化的效果。子項(xiàng)目3網(wǎng)頁布局的注意事項(xiàng)7.顏色搭配網(wǎng)頁中的顏色搭配也非常重要，一般不要用對比強(qiáng)烈的顏色搭配作主色，主色的顏色也盡量控制在3種以內(nèi)，背景和內(nèi)容的對比要明顯，盡可能少地使用花紋復(fù)雜的圖片，以便突出文字。網(wǎng)頁的排版布局是決定網(wǎng)站美觀與否的一個(gè)重要方面，通過合理的、有創(chuàng)意的布局才可以把文字和圖像等內(nèi)容完美地展現(xiàn)在瀏覽者面前。子項(xiàng)目4繪制網(wǎng)頁布局草圖這樣確定網(wǎng)頁布局：網(wǎng)站LOGO放置在左上角；右側(cè)為Banner區(qū)域，可以存放圖片或動(dòng)畫；下方為鏈接文字區(qū)；中間為主要內(nèi)容區(qū)，用于輸入文字或圖片；底部為網(wǎng)頁版權(quán)文字區(qū)。做一做：在網(wǎng)頁中插入表格制作不規(guī)則表格設(shè)置表格和單元格屬性表格的嵌套項(xiàng)目二使用表格規(guī)劃網(wǎng)頁布局完成網(wǎng)頁布局子項(xiàng)目1在網(wǎng)頁中插入表格網(wǎng)頁中表格的作用1：讓網(wǎng)頁中的內(nèi)容變得整齊有序，通過設(shè)置表格的行數(shù)、列數(shù)，以及合并單元格等操作來改變框線、背景色等，從而使網(wǎng)頁中的各種元素合理、有序地整合在一起；網(wǎng)頁中表格的作用2：利用表格把大的圖像拆分為幾個(gè)小的圖像，并按順序插入表格中，再將表格框線隱藏，達(dá)到快速顯示圖像的目的網(wǎng)頁中表格的作用3：利用表格實(shí)現(xiàn)網(wǎng)頁布局，先將網(wǎng)頁元素放置在不同的單元格中，再隱藏框線，從而使瀏覽者察覺不到表格的存在。子項(xiàng)目1在網(wǎng)頁中插入表格做一做選擇菜單欄中的“插入”→“Table”命令，在“Table”對話框中設(shè)置“行數(shù)”為“4”，“列”為“2”，“表格寬度”為“200像素”，“邊框粗細(xì)”為“1”像素，單擊“確定”按鈕，插入表格。子項(xiàng)目1在網(wǎng)頁中插入表格做一做：在默認(rèn)情況下，表格的行高和列寬都是相等的。如果想要表格左側(cè)一列比右側(cè)一列窄一些，并且各行的高度也略有不同。將鼠標(biāo)指針移動(dòng)到表格框線上，當(dāng)鼠標(biāo)指針變形狀時(shí)，移動(dòng)鼠標(biāo)指針到合適的位置后，釋放鼠標(biāo)左鍵。子項(xiàng)目2制作不規(guī)則表格做一做：添加新行或新列在選中行上右擊，在彈出的快捷菜單中選擇“表格”→“插入行或列”命令，彈出“插入行或列”對話框。在“插入行或列”對話框中選中“行”單選按鈕，在“行數(shù)”數(shù)值框中輸入“1”，選中“所選之上”單選按鈕，單擊“確定”按鈕，就可以在光標(biāo)所在行的上方插入一行。子項(xiàng)目2制作不規(guī)則表格做一做：刪除行或列使光標(biāo)出現(xiàn)在被刪除的行中，然后右擊，在彈出的快捷菜單中選擇“表格”→“刪除行”命令。子項(xiàng)目2制作不規(guī)則表格做一做：合并單元格選中兩個(gè)相鄰單元格，將鼠標(biāo)指針移動(dòng)到屬性檢查器上，單擊“合并單元格，使用跨度”按鈕，被選中的單元格被合并。子項(xiàng)目2制作不規(guī)則表格做一做：完成網(wǎng)頁布局圖參照網(wǎng)頁布局草圖，對表格中的一些單元格進(jìn)行合并操作，其最終效果如圖所示。子項(xiàng)目2制作不規(guī)則表格做一做：拆分單元格使光標(biāo)出現(xiàn)在被拆分單元格中，然后右擊，在彈出的快捷菜單中選擇“表格”→“拆分單元格”命令。在“拆分單元格”對話框中選中“列”單選按鈕，在“列數(shù)”數(shù)值框中輸入“5”，單擊“確定”按鈕。子項(xiàng)目3設(shè)置表格和單元格屬性做一做：拆分單元格將鼠標(biāo)指針移動(dòng)到表格左上方的外框線上，當(dāng)鼠標(biāo)指針變形狀時(shí)單擊，選中整個(gè)表格。在屬性檢查器中可以設(shè)置表格寬度以及框線寬度。讀一讀：要選中表格或者選中表格中的某部分1．選中表格的方法方法一：將鼠標(biāo)指針移動(dòng)到表格左上方的外框線上，當(dāng)鼠標(biāo)指針變?yōu)樾螤顣r(shí)單擊，可以選中整個(gè)表格。方法二：先單擊任意一個(gè)單元格，再單擊Dreamweaver窗口底部的“<table>”標(biāo)簽，可以選中整個(gè)表格。方法三：按住Shift鍵的同時(shí)單擊表格中的任意一個(gè)單元格，可以選中整個(gè)表格。方法四：先單擊任意一個(gè)單元格，再選擇菜單欄中的“編輯”→“表格”→“選擇表格”命令，可以選中整個(gè)表格。讀一讀：要選中表格或者選中表格中的某部分2．選中行或列的方法方法一：將鼠標(biāo)指針移動(dòng)到表格上框線位置，當(dāng)鼠標(biāo)指針變形狀時(shí)單擊，可以選中一列。方法二：將鼠標(biāo)指針移動(dòng)到表格左框線位置，當(dāng)鼠標(biāo)指針變形狀時(shí)單擊，可以選中一行。方法三：在表格的行或列中移動(dòng)鼠標(biāo)指針，可以選中一行或者一列。讀一讀：要選中表格或者選中表格中的某部分3．選中單元格的方法方法一：先在單元格中單擊，再單擊Dreamweaver窗口底部的“<td>”標(biāo)簽，可以選中該單元格。方法二：先在單元格中單擊，再按Ctrl+A組合鍵，可以選中該單元格。方法三：先在單元格中單擊，再選擇菜單欄中的“編輯”→“全選”命令，可以選中該單元格。讀一讀：要選中表格或者選中表格中的某部分4．選中多個(gè)單元格的方法方法一：在單元格中移動(dòng)鼠標(biāo)指針，可以選中多個(gè)相鄰的單元格。方法二：在單元格中單擊，按住Shift鍵的同時(shí)單擊另一個(gè)單元格，可以選中以這兩個(gè)單元格為矩形的多個(gè)相鄰單元格。方法三：按住Ctrl鍵，依次單擊多個(gè)單元格，可以選中多個(gè)不連續(xù)的單元格。子項(xiàng)目4表格的嵌套做一做：在表格中插入表格確定光標(biāo)的位置，選擇菜單欄中的“插入”→“Table”命令。在“Table”對話框中，設(shè)置“行數(shù)”為“1”，“列”為“5”，“表格寬度”為“100”，并在后面的下拉列表中選擇“百分比”選項(xiàng)，“邊框粗細(xì)”為“0”像素，單擊“確定”按鈕。子項(xiàng)目4表格的嵌套做一做：移動(dòng)嵌套表格的框線，可以調(diào)整各個(gè)單元格的寬度，但整個(gè)表格的寬度不變。子項(xiàng)目5完成網(wǎng)頁布局做一做：將表格中的所有框線粗細(xì)都設(shè)置為0，調(diào)整表格的高度和寬度，就可以初步看到一個(gè)規(guī)劃后的網(wǎng)頁布局。在表格中輸入文字和插入圖片，并設(shè)置背景。子項(xiàng)目5完成網(wǎng)頁布局做一做：選中整個(gè)表格，將屬性檢查器中的“CellPad”（填充值）設(shè)置為“10”，此時(shí)表格中的文字與表格框線的距離變?yōu)?0像素；將“CellSpace”（間距值）設(shè)置為“10”，此時(shí)各個(gè)單元格之間的距離變?yōu)?0像素。Div概述插入Div設(shè)置Div完成網(wǎng)頁布局項(xiàng)目三使用Div規(guī)劃網(wǎng)頁布局子項(xiàng)目1Div概述Div又被稱為Div標(biāo)簽，是一種區(qū)隔標(biāo)記。它的主要作用是將頁面分割為不同的區(qū)域，并設(shè)定文字、圖像和表格的排列方式，通過移動(dòng)或指定坐標(biāo)的位置等方式，對文字、圖像等元素進(jìn)行精確定位。絕對定位的Div又被稱為APDiv。它是通過設(shè)置與窗口邊框的距離來定位的，因?yàn)樗梢园淖帧D像等其他內(nèi)容，所以這使得組成網(wǎng)頁的各種元素可以精確定位在網(wǎng)頁的某個(gè)位置。相對定位可以使Div以當(dāng)前位置為基準(zhǔn)來確定具體的位置，當(dāng)前位置改變后，具體位置也會發(fā)生相應(yīng)的變化。子項(xiàng)目2插入Div選擇菜單欄中的“插入”→“Div”命令，“插入Div”對話框中的“插入”下拉列表用于選擇Div區(qū)域的插入位置；“Class”下拉列表用于選擇Div的樣式，“ID”下拉列表用于輸入Div的名稱。單擊“確定”按鈕，會在網(wǎng)頁中插入一個(gè)Div。做一做：插入Div子項(xiàng)目2插入Div做一做：將Div改為CSS-P元素單擊“拆分”按鈕，切換到“代碼”視圖和“設(shè)計(jì)”視圖。在“代碼”視圖中找到Div的語句，將“<div>此處顯示新Div標(biāo)簽的內(nèi)容</div>”改為“<divstyle="position:absolute">此處顯示新Div標(biāo)簽的內(nèi)容</div>”。設(shè)置完成，Div區(qū)域出現(xiàn)了藍(lán)框。子項(xiàng)目2插入Div做一做：將Div改為CSS-P元素在屬性檢查器中可以改變CSS-P元素的寬度和高度，以及背景顏色和背景圖像等。子項(xiàng)目3設(shè)置Div做一做：移動(dòng)該CSS-P元素的位置選中一個(gè)CSS-P元素，將鼠標(biāo)指針移動(dòng)到該CSS-P元素的左上角，移動(dòng)鼠標(biāo)指針即可移動(dòng)該CSS-P元素的位置。子項(xiàng)目3設(shè)置Div做一做：移動(dòng)該CSS-P元素的位置選中CSS-P元素，單擊該CSS-P元素的框線，將鼠標(biāo)指針移動(dòng)到該框線右下角，當(dāng)鼠標(biāo)指針變化時(shí)，移動(dòng)鼠標(biāo)指針，更改CSS-P元素的大小。子項(xiàng)目3設(shè)置Div讀一讀：CSS-P元素屬性檢查器CSS-P元素屬性檢查器中的主要參數(shù)含義如下：（1）“CSS-P元素”下拉列表：位于屬性檢查器的左下方，用于和同一網(wǎng)頁上的其他CSSP元素區(qū)分。圖3.3.11中的CSS-P元素名稱為空白。（2）“左”文本框、“上”文本框：用于設(shè)置CSS-P元素與頁面左上角的距離，用于確定定位。（3）“寬”文本框、“高”文本框：用于設(shè)置CSS-P元素的寬度和高度。（4）“Z軸”文本框：用于設(shè)置各個(gè)CSS-P元素的排列順序，也就是哪個(gè)CSS-P元素在上方，哪個(gè)CSS-P元素在下方。子項(xiàng)目3設(shè)置Div讀一讀：CSS-P元素屬性檢查器CSS-P元素屬性檢查器中的主要參數(shù)含義如下：（5）“背景顏色”文本框：用于設(shè)置CSS-P元素中的背景。（6）“可見性”下拉列表：用于設(shè)置是否顯示CSS-P元素生成的元素框，包括default、inherit、visible、hidden4個(gè)選項(xiàng)。其中，default表示不指明元素的可見性；inherit表示繼承父元素的可見性；visible表示顯示元素及其內(nèi)容；hidden表示隱藏元素及其內(nèi)容。子項(xiàng)目4完成網(wǎng)頁布局做一做：CSS-P元素最終結(jié)果參照網(wǎng)頁布局草圖，更改各個(gè)CSS-P元素的位置和大小。感謝聆聽職業(yè)教育教學(xué)用書網(wǎng)頁制作基礎(chǔ)教程（DreamweaverCC）網(wǎng)站制作前的準(zhǔn)備1網(wǎng)頁布局與規(guī)劃2網(wǎng)頁的編輯3網(wǎng)頁的多媒體效果4網(wǎng)站的管理與上傳5模塊目錄使用超鏈接超鏈接超鏈接可以分為內(nèi)部超鏈接、外部超鏈接和錨記超鏈接。內(nèi)部超鏈接是指打開的超鏈接對象在本網(wǎng)站內(nèi)；外部超鏈接是指打開的超鏈接對象在WWW的其他網(wǎng)站內(nèi)；錨記超鏈接可以鏈接到同一網(wǎng)頁中的不同位置，又被稱為“書簽”。根據(jù)創(chuàng)建超鏈接對象的不同，超鏈接又可以分為文本超鏈接、電子郵件超鏈接和圖片超鏈接。創(chuàng)建網(wǎng)站內(nèi)的文本超鏈接創(chuàng)建網(wǎng)站外的文本超鏈接項(xiàng)目一創(chuàng)建文本超鏈接子項(xiàng)目1創(chuàng)建網(wǎng)站內(nèi)的文本超鏈接做一做：設(shè)置文本超鏈接在網(wǎng)頁中選中熱區(qū)文本，然后在屬性檢查器中打開“HTML”標(biāo)簽，并單擊“瀏覽文件”按鈕。在“選擇文件”對話框中選中要鏈接的文件。子項(xiàng)目1創(chuàng)建網(wǎng)站內(nèi)的文本超鏈接讀一讀：打開屬性檢查器如果屬性檢查器沒有打開，則可以使用以下兩種方法將其打開。（1）選擇菜單欄中的“窗口”→“屬性”命令。（2）按Ctrl+F3組合鍵。子項(xiàng)目1創(chuàng)建網(wǎng)站內(nèi)的文本超鏈接做一做：使用錨記鏈接設(shè)置文本超鏈接先選中熱區(qū)文字，再按住鼠標(biāo)左鍵將屬性檢查器中的錨記標(biāo)記拖動(dòng)到右側(cè)“文件”面板中網(wǎng)頁文件上，釋放鼠標(biāo)左鍵，即可完成超鏈接的創(chuàng)建。子項(xiàng)目1創(chuàng)建網(wǎng)站內(nèi)的文本超鏈接做一做：打開其他網(wǎng)頁，首先為這些網(wǎng)頁中導(dǎo)航區(qū)域的文字創(chuàng)建超鏈接，然后保存網(wǎng)頁，最后在瀏覽器中預(yù)覽網(wǎng)頁，驗(yàn)證網(wǎng)頁超鏈接效果。子項(xiàng)目2創(chuàng)建網(wǎng)站外的文本超鏈接做一做：先選中熱區(qū)文字，在屬性檢查器的“HTML”標(biāo)簽中找到“鏈接”文本框，并在該文本框中輸入網(wǎng)址，最后單擊“目標(biāo)”下拉按鈕，在彈出的下拉列表中選擇“NEW”選項(xiàng)，這樣設(shè)置的目的是讓網(wǎng)頁在新的窗口中打開。子項(xiàng)目1創(chuàng)建網(wǎng)站內(nèi)的文本超鏈接做一做：為其他友情鏈接網(wǎng)站創(chuàng)建互聯(lián)網(wǎng)超鏈接。項(xiàng)目二創(chuàng)建電子郵件超鏈接項(xiàng)目二創(chuàng)建電子郵件超鏈接做一做：選擇熱區(qū)文本。選擇菜單欄中的“插入”→“HTML”→“電子郵件鏈接”命令，在“電子郵件鏈接”對話框中輸入設(shè)計(jì)者的電子郵件地址，單擊“確定”按鈕。項(xiàng)目二創(chuàng)建電子郵件超鏈接做一做：直接在屬性檢查器中輸入直接在屬性檢查器的“鏈接”文本框中輸入“mailto:電子郵件地址”，也可以達(dá)到同樣的效果。需要注意的是，“mailto:”與電子郵件地址之間不能有空格。項(xiàng)目二創(chuàng)建電子郵件超鏈接讀一讀在預(yù)覽網(wǎng)頁過程中，如果發(fā)現(xiàn)超鏈接發(fā)生錯(cuò)誤，則可以隨時(shí)進(jìn)行修改，但是該如何修改呢？首先在文檔編輯區(qū)中選中需要修改的超鏈接熱區(qū)文本，然后在屬性檢查器“HTML”標(biāo)簽下的“鏈接”文本框中進(jìn)行修改，修改完之后在任意區(qū)域單擊即可。需要注意的是，每次修改完之后，都需要對網(wǎng)頁進(jìn)行保存。創(chuàng)建整張圖片的超鏈接創(chuàng)建圖片熱區(qū)超鏈接項(xiàng)目三創(chuàng)建圖片超鏈接子項(xiàng)目1創(chuàng)建整張圖片的超鏈接做一做：選中圖片，然后在屬性檢查器的“鏈接”文本框中輸入網(wǎng)址，完成設(shè)置，保存網(wǎng)頁，這樣就為圖片創(chuàng)建了超鏈接。子項(xiàng)目1創(chuàng)建整張圖片的超鏈接做一做：為首頁上其他友情超鏈接網(wǎng)站創(chuàng)建圖片超鏈接。子項(xiàng)目2創(chuàng)建圖片熱區(qū)超鏈接做一做：選中圖片，單擊屬性檢查器中的“矩形熱點(diǎn)工具”按鈕，在選中的整張圖片上移動(dòng)鼠標(biāo)指針，在圖片上繪制一個(gè)矩形框，可以發(fā)現(xiàn)被選區(qū)域中的文字變虛。單擊屬性檢查器中的“瀏覽文件”按鈕，在“選擇文件”對話框中選擇網(wǎng)頁文件，單擊“確定”按鈕。子項(xiàng)目2創(chuàng)建圖片熱區(qū)超鏈接讀一讀在屬性檢查器中，涉及圖像熱區(qū)超鏈接的選項(xiàng)有以下幾個(gè)。（1）“地圖”文本框：輸入熱區(qū)的名稱。（2）“矩形熱點(diǎn)工具”按鈕：選中該按鈕后，在圖像上移動(dòng)鼠標(biāo)指針可以繪制出矩形的熱區(qū)。（3）“圓形熱區(qū)工具”按鈕：選中該按鈕后，在圖像上移動(dòng)鼠標(biāo)指針可以繪制出圓形的熱區(qū)。（4）“多邊形熱區(qū)工具”按鈕：選中該按鈕后，在圖像上移動(dòng)鼠標(biāo)指針可以繪制出多邊形的熱區(qū)。（5）“指針熱點(diǎn)工具”按鈕：當(dāng)鼠標(biāo)指針處于標(biāo)準(zhǔn)指針狀態(tài)時(shí)，用于選取熱區(qū)，以及移動(dòng)控制塊調(diào)整熱區(qū)大小。子項(xiàng)目2創(chuàng)建圖片熱區(qū)超鏈接做一做：使用同樣的方法，為導(dǎo)航圖片上的不同位置創(chuàng)建超鏈接，保存網(wǎng)頁后，在瀏覽器中預(yù)覽網(wǎng)頁效果。項(xiàng)目四創(chuàng)建錨記超鏈接錨記超鏈接錨記超鏈接，即網(wǎng)頁中所謂的書簽，也就是到達(dá)網(wǎng)頁中某個(gè)具體位置的超鏈接。當(dāng)網(wǎng)頁內(nèi)容過長時(shí)，使用錨記超鏈接可以快速瀏覽到用戶所關(guān)心的信息。在網(wǎng)頁頂部輸入書簽的熱區(qū)文本，熱區(qū)文本在網(wǎng)頁中依次輸入各個(gè)熱區(qū)文本對應(yīng)的書簽內(nèi)容書簽內(nèi)容建立錨記超鏈接創(chuàng)建錨記超鏈接做一做：首先命名錨記，也就是確定錨記超鏈接指向的位置。將垂直滾動(dòng)條移動(dòng)到網(wǎng)頁底部，選中文字，然后在屬性檢查器的“ID”文本框中輸入“maodian1”作為名字。創(chuàng)建錨記超鏈接做一做：移動(dòng)到網(wǎng)頁頂部，選中網(wǎng)頁頂部的熱區(qū)文字，然后在屬性檢查器的“鏈接”文本框中輸入“#maodian1”，釋放鼠標(biāo)左鍵可以看到網(wǎng)頁頂部的文字已經(jīng)變?yōu)樗{(lán)色且?guī)в邢庐嬀€，表示錨記超鏈接已創(chuàng)建完成。創(chuàng)建錨記超鏈接做一做：使用同樣的方法，將網(wǎng)頁頂部的其他熱區(qū)文本都制作成錨記超鏈接，保存網(wǎng)頁后，在瀏覽器中預(yù)覽網(wǎng)頁效果。更新超鏈接測試超鏈接項(xiàng)目五管理超鏈接在HTML代碼中直接查看超鏈接子項(xiàng)目1更新超鏈接Dreamweaver會自動(dòng)創(chuàng)建一個(gè)緩存文件，用來加快更新速度。緩存文件中會存儲所有與本地文件夾有關(guān)的超鏈接信息，當(dāng)刪除文件、移動(dòng)文件、更改文件名時(shí)，與這些文件相關(guān)的超鏈接緩存文件會自動(dòng)進(jìn)行更新。子項(xiàng)目1更新超鏈接通過設(shè)置，在Dreamweaver中可以實(shí)現(xiàn)自動(dòng)更新超鏈接的功能。Dreamweaver會自動(dòng)創(chuàng)建一個(gè)緩存文件，用來加快更新速度。緩存文件中會存儲所有與本地文件夾有關(guān)的超鏈接信息，當(dāng)刪除文件、移動(dòng)文件、更改文件名時(shí)，與這些文件相關(guān)的超鏈接緩存文件會自動(dòng)進(jìn)行更新。做一做：子項(xiàng)目1更新超鏈接做一做：選擇菜單欄中的“編輯”→“首選項(xiàng)”命令。在彈出的“首選項(xiàng)”對話框的“分類”列表框中選擇“常規(guī)”選項(xiàng)，單擊“文檔選項(xiàng)”選項(xiàng)區(qū)中的“移動(dòng)文件時(shí)更新鏈接”右側(cè)的