《網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版）》07 建立網(wǎng)頁(yè)鏈接

網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版）目錄DIRECTORY01DreamweaverCS5入門05插入圖像02創(chuàng)建站點(diǎn)06插入多媒體03設(shè)置首頁(yè)07建立網(wǎng)頁(yè)鏈接04DreamweaverCS5編輯文本08表格目錄DIRECTORY09使用Div標(biāo)簽和APDiv10框架11表單12CSS樣式13行為14資源15模板和庫(kù)16站點(diǎn)上傳和維護(hù)07建立網(wǎng)頁(yè)鏈接1.會(huì)Dreamweaver中創(chuàng)建各種鏈接的方法。2.會(huì)Dreamweaver編輯各種鏈接的方法。3.能利用站點(diǎn)地圖管理鏈接的方法。4.培養(yǎng)學(xué)生換位思考能力。任務(wù)目標(biāo)1任務(wù)實(shí)施（一）使用菜單命令創(chuàng)建超鏈接（1）打開(kāi)或者新建一個(gè)HTML網(wǎng)頁(yè)，在“設(shè)計(jì)”視圖中選擇要?jiǎng)?chuàng)建超鏈接的對(duì)象。如圖7-1所示。“這是一個(gè)超鏈接”文本已經(jīng)被鼠標(biāo)選中。（2）點(diǎn)擊“修改”菜單，選擇“創(chuàng)建鏈接”命令，或者單擊鼠標(biāo)右鍵，選擇“創(chuàng)建鏈接”命令，打開(kāi)“選擇文件”對(duì)話框，如圖7-2所示。（3）在“選擇文件”對(duì)話框中，點(diǎn)擊被鏈接的文件?！裨凇拔募蔽谋究蛑袝?huì)顯示要鏈接的文件名?！裨凇癠RL”文本框中會(huì)自動(dòng)顯示該文件的地址?！裨凇跋鄬?duì)于”下拉列表中選擇“文檔”項(xiàng)，表示使用相對(duì)路徑。如果選擇“站點(diǎn)根目錄”項(xiàng)，表示使用根相對(duì)路徑。一、創(chuàng)建超鏈接的方法（二）使用“瀏覽文件”圖標(biāo)創(chuàng)建超鏈接（1）在“設(shè)計(jì)”視圖中選擇要?jiǎng)?chuàng)建超鏈接的對(duì)象。使用窗口底部的“屬性”面板中的“瀏覽文件”圖標(biāo)也可以創(chuàng)建超鏈接。點(diǎn)擊“窗口”菜單，選擇“屬性”命令，可以打開(kāi)“屬性”面板。（2）點(diǎn)擊“鏈接”下拉列表右邊的“瀏覽文件”圖標(biāo)，出現(xiàn)“選擇文件”對(duì)話框，具體設(shè)置參考圖7-2。（3）在“選擇文件”對(duì)話框中點(diǎn)擊“確定”按鈕后，創(chuàng)建的超鏈接文件的地址會(huì)出現(xiàn)在“鏈接”下拉列表中。（4）“屬性”面板中的“目標(biāo)”下拉列表中的選項(xiàng)確定了被鏈接文件的載入位置。一、創(chuàng)建超鏈接的方法（三）使用“指向文件”圖標(biāo)添加超級(jí)鏈接（1）在“設(shè)計(jì)”視圖中選擇要?jiǎng)?chuàng)建超鏈接的文本或圖像等。使用窗口底部“屬性”面板中的“指向文件”圖標(biāo)也可以添加超級(jí)鏈接。如圖7-4所示。（2）點(diǎn)擊鼠標(biāo)左鍵，拖動(dòng)“指向文件”圖標(biāo)到目標(biāo)位置，當(dāng)“鏈接”下拉列表框中出現(xiàn)目標(biāo)位置上的文件名稱以后，釋放鼠標(biāo)左鍵，完成操作。一、創(chuàng)建超鏈接的方法（四）直接建立超級(jí)鏈接（1）在“設(shè)計(jì)”視圖中選擇要建立超級(jí)鏈接的文本或圖像等。（2）按住Shift鍵，在選定的文本或圖像上點(diǎn)擊鼠標(biāo)左鍵，拖動(dòng)鼠標(biāo)指向被鏈接的目標(biāo)文檔。如圖7-5所示。（3）當(dāng)“鏈接”下拉列表框中出現(xiàn)目標(biāo)文檔的名稱時(shí)，松開(kāi)鼠標(biāo)左鍵，完成了直接建立超級(jí)鏈接的步驟。一、創(chuàng)建超鏈接的方法二、創(chuàng)建錨點(diǎn)鏈接（一）命名錨點(diǎn)（1）在打開(kāi)的文檔中將光標(biāo)移動(dòng)到要設(shè)置錨點(diǎn)的地方。（2）點(diǎn)擊“插入”菜單，選擇“命名錨記”命令?；蛘咴凇安迦搿泵姘迳线x擇“常用”項(xiàng)，點(diǎn)擊“命名錨記”按鈕。如圖7-6所示。（3）彈出“命名錨記”對(duì)話框。（4）在“命名錨記”對(duì)話框中輸入錨記的名稱，例如，“百科369”。單擊“確定”按鈕，錨記設(shè)置完成。（5）如果需要修改錨的名稱，在“設(shè)計(jì)”視圖中點(diǎn)擊已經(jīng)命名的錨記，在底部的“屬性”面板的“名稱”文本框中可以修改錨記的名稱。（6）在“代碼”視圖中可以查看源代碼：<aname="百科369"id="百科369"></a>二、創(chuàng)建錨點(diǎn)鏈接（二）創(chuàng)建同一文檔的錨點(diǎn)鏈接請(qǐng)?jiān)谡?qǐng)?jiān)冢?）在“代碼”視圖中可以查看源代碼：<ahref="#網(wǎng)頁(yè)設(shè)計(jì)">這是第一個(gè)鏈接</a>（2）在“屬性”面板中的“鏈接”下拉列表框中輸入錨記名稱。（1）在文檔的“設(shè)計(jì)”視圖中選擇要?jiǎng)?chuàng)建錨點(diǎn)鏈接的文本或圖像。二、創(chuàng)建錨點(diǎn)鏈接（三）創(chuàng)建不同文檔的錨點(diǎn)鏈接（1）打開(kāi)要命名錨點(diǎn)的文檔，在文檔中命名錨點(diǎn)。（2）打開(kāi)要?jiǎng)?chuàng)建錨點(diǎn)鏈接的文檔，在文檔中選擇要建立錨點(diǎn)鏈接的文本或圖像。（3）點(diǎn)擊“窗口”菜單，選擇“垂直平鋪”命令，如圖7-10所示。（4）在圖7-10中，在1.html文檔中命名了錨點(diǎn)名稱為“#百科369”，在2.html文檔中選擇了文本“鏈接到百科369”，在“屬性”面板中選擇“指向文件”按鈕，按下鼠標(biāo)左鍵拖動(dòng)到“命名錨記”的位置上，當(dāng)在“鏈接”下拉列表框中出現(xiàn)“1.html#百科369”的內(nèi)容時(shí)，松開(kāi)鼠標(biāo)左鍵。至此，在不同的文檔中創(chuàng)建錨點(diǎn)鏈接的操作完成了。（5）在文檔的“代碼”視圖中可以查看源代碼：<p><ahref="1.html#百科369">鏈接到百科369</a></p>（一）使用菜單命令創(chuàng)建電子郵件鏈接（1）在文檔窗口中將光標(biāo)定位在要插入電子郵件鏈接的位置。（2）點(diǎn)擊“插入”菜單，選擇“電子郵件鏈接”命令，或者在插入面板中選擇“常用”項(xiàng)，點(diǎn)擊“電子郵件鏈接”按鈕。如圖7-11所示。（3）彈出“電子郵件鏈接”對(duì)話框，如圖7-12所示。（4）在“文本”框中輸入在文檔窗口中要顯示的內(nèi)容，在“電子郵件”框中輸入E-Mail地址。三、創(chuàng)建電子郵件鏈接（二）使用屬性面板添加電子郵件鏈接（1）在文檔窗口中選擇文本或圖片。如圖7-13所示。（2）在屬性面板的“鏈接”下拉列表框中輸入“mailto:”和電子郵件地址，然后按回車鍵（Enter鍵）。如圖7-14所示。（3）電子郵件鏈接在屬性面板中設(shè)置完成。三、創(chuàng)建電子郵件鏈接四、創(chuàng)建圖像鏈接在DreamweaverCS5中新建一個(gè)HTML文件取名為“map.html”，選擇“插入”菜單，“圖像”選項(xiàng)。當(dāng)繪制完矩形熱點(diǎn)區(qū)域后，或者重新選擇繪制好的矩形熱點(diǎn)區(qū)域后，圖像屬性面板將變成熱點(diǎn)屬性面板。保存頁(yè)面文件并按F12鍵進(jìn)行預(yù)覽。至此，本實(shí)例操作完畢。繪制熱點(diǎn)區(qū)域。單擊頁(yè)面上的中國(guó)地圖，選擇底部“屬性”欄中的“矩形熱點(diǎn)工具”在地圖上繪制熱點(diǎn)區(qū)域。繪制其他熱點(diǎn)區(qū)域?，F(xiàn)在在地圖上繼續(xù)繪制其他熱點(diǎn)區(qū)域并設(shè)置鏈接。0103050204五、更改超鏈接（一）移動(dòng)文檔時(shí)更新鏈接如果對(duì)站點(diǎn)中的文檔要進(jìn)行不同文件夾之間的移動(dòng)，或者不同文件夾之間的復(fù)制后又更改文件名的操作，DreamweaverCS5會(huì)彈出“更新文件”對(duì)話框，如圖7-18所示。點(diǎn)擊“更新”按鈕，則會(huì)修改文本框中文件的鏈接；點(diǎn)擊“不更新”按鈕，則不會(huì)修改文本框中文件的鏈接。五、更改超鏈接（二）改變鏈接1.直接修改超鏈接在“站點(diǎn)”窗口中雙擊鏈接出錯(cuò)的文檔，然后在DreamweaverCS5編輯窗口中直接修改即可完成。2.使用菜單命令更改超鏈接（1）在“站點(diǎn)”窗口中選擇一個(gè)文件，點(diǎn)擊“站點(diǎn)”菜單，選擇“改變站點(diǎn)范圍的鏈接”項(xiàng)，彈出“更改整個(gè)站點(diǎn)鏈接”對(duì)話框（2）在“更改所有的鏈接”文本框中，如果沒(méi)有選擇的文檔，則需要點(diǎn)擊右邊的“文件夾”按鈕，選擇需要更改的鏈接文檔，在“變成新鏈接”文本框中，直接輸入同站點(diǎn)的根目錄路徑相對(duì)應(yīng)的其他文檔，也可以點(diǎn)擊右邊的“文件夾”按鈕選擇需要的文檔。（3）點(diǎn)擊“確定”按鈕，彈出“更新文件”對(duì)話框。（4）點(diǎn)擊“更新”按鈕，更改文件的鏈接，點(diǎn)擊“不更新”按鈕，則不更改文件的鏈接。在DreamweaverCS5中提供了對(duì)站點(diǎn)中的超鏈接進(jìn)行自動(dòng)管理的功能。具體操作如下：（1）點(diǎn)擊“編輯”菜單，選擇“首選參數(shù)”命令。彈出“首選參數(shù)”對(duì)話框，如圖7-23所示。（2）在“分類”列表框中選擇“常規(guī)”項(xiàng)。（3）在“移動(dòng)文件時(shí)更新鏈接”下拉列表中根據(jù)自己的喜好進(jìn)行選擇。六、自動(dòng)管理鏈接2項(xiàng)目實(shí)訓(xùn)項(xiàng)目要求：為index.html網(wǎng)頁(yè)中“游戲介紹”添加鏈接到：yxjs.html?！耙?、網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)（八）發(fā)布網(wǎng)站的意義對(duì)于大公司來(lái)說(shuō)，它可以在網(wǎng)站開(kāi)展電子商務(wù)、推銷產(chǎn)品、發(fā)布有關(guān)產(chǎn)品的技術(shù)支持，在公司與客戶之間搭起聯(lián)系的橋梁。對(duì)于大公司來(lái)說(shuō)，一個(gè)網(wǎng)站發(fā)布后所起的作用，比上千技術(shù)、銷售人員全球滿天飛的作用還要大。對(duì)于小公司來(lái)說(shuō)，制作網(wǎng)站的主要目的是為企業(yè)、產(chǎn)品做廣告。網(wǎng)站由于不受時(shí)間、地域的限制，其廣告作用有很大的優(yōu)點(diǎn)，有人形容網(wǎng)上廣告為“永不落幕的交易會(huì)”。對(duì)于政府機(jī)構(gòu)來(lái)說(shuō)，其網(wǎng)站有提高政府形象，增加政府辦事透明度，增強(qiáng)社會(huì)對(duì)政府的監(jiān)督及政策、法規(guī)的發(fā)布說(shuō)明等優(yōu)點(diǎn)。對(duì)于教育部門來(lái)說(shuō)，網(wǎng)頁(yè)可以進(jìn)行遠(yuǎn)程教育、模擬考試、網(wǎng)上輔導(dǎo)、對(duì)提高整個(gè)國(guó)民素質(zhì)水平有很大的幫助，而且節(jié)省了大量教育經(jīng)費(fèi)。對(duì)于個(gè)人來(lái)說(shuō)，可以通過(guò)網(wǎng)頁(yè)介紹自己，結(jié)交更多的朋友；尋求更好的工作崗位；發(fā)表自己的文章、觀點(diǎn)、作品。S1S2S3S5S4IntelPentiumIII600MHZ或更快的處理器或等效處理器。Windows98、Windows2000、WindowsXP或Windows.NETServer2003。至少275MB的可用磁盤空間。能達(dá)到1024像素×768像素分辨率的16位或更高分辨率的顯示器。至少128MB的可用內(nèi)存（RAM），建議采用256MB及以上內(nèi)存。二、DreamweaverCS5的硬件要求（一）DreamweaverCS5工作區(qū)設(shè)置2.改變DreamweaverCS5工作區(qū)（1）單擊“窗口”→“工作區(qū)布局”→“編碼器”命令，即可進(jìn)入采用“編碼器”風(fēng)格的DreamweaverCS5的工作區(qū)。單擊“窗口”→“工作區(qū)布局”→“設(shè)計(jì)器”命令，即可進(jìn)入采用“設(shè)計(jì)器”風(fēng)格的DreamweaverCS5的工作區(qū)。（2）新建工作區(qū)布局（例如，打開(kāi)或關(guān)閉一些面板、工具欄，調(diào)整面板的位置等）后，單擊“窗口”→“工作區(qū)布局”→“新建工作區(qū)”命令，可彈出“保存工作區(qū)布局”對(duì)話框，在“名稱”文本框內(nèi)輸入名稱（例如，張三）。再單擊“確定”按鈕，即可將當(dāng)前工作區(qū)布局保存。三、DreamweaverCS5的基本功能3項(xiàng)目小結(jié)通過(guò)本項(xiàng)目學(xué)習(xí)，大家