網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目7超鏈接(已修改)
2025-08-17 10:24 本頁(yè)面
【正文】 實(shí)現(xiàn)網(wǎng)頁(yè)間的跳轉(zhuǎn) —— 超級(jí)鏈接 項(xiàng)目 7 了解超級(jí)鏈接的概念 1 掌握內(nèi)部、外部超鏈接的類(lèi)型及創(chuàng)建方法 2 掌握郵件超鏈接的方法 3 掌握使用導(dǎo)航工具條的方法 5 知識(shí)要點(diǎn) 掌握下載文件超鏈接的方法 4 網(wǎng)頁(yè)展示：在“目的地”頁(yè)面中應(yīng)用超級(jí)鏈接 網(wǎng)頁(yè)的最大特點(diǎn)體現(xiàn)在它可以通過(guò)超鏈接功能在眾多的網(wǎng)頁(yè)中互相跳轉(zhuǎn)，在“樂(lè)途網(wǎng)”的“目的地”頁(yè)面中分別應(yīng)用了網(wǎng)頁(yè)之間超鏈接，插入文本超鏈接、錨記超鏈接、外部超鏈接、圖像超鏈接、導(dǎo)航工具條超鏈接、郵件超鏈接和下載文件超鏈接，“目的地”頁(yè)面效果如圖所示。 “目的地”頁(yè)面效果 網(wǎng)頁(yè)制作 設(shè)置導(dǎo)航條超鏈接 步驟 1 啟動(dòng) Dreamweaver CS6后，在 letuweb站點(diǎn)中創(chuàng)建新文檔，命名為“ ”。 步驟 2 在 destination文檔中繪制表格布局頁(yè)面，輸入相應(yīng)的文字、選擇圖像等素材，插入頁(yè)面頂部 LOGO及其他元素，如圖所示。 網(wǎng)頁(yè)制作 步驟 3 在表格的第 3行定位光標(biāo) ， 執(zhí)行 【 插入 】 |【 圖像對(duì)象 】 |【 鼠標(biāo)經(jīng)過(guò)圖像 】 菜單命令 ， 彈出 【 插入鼠標(biāo)經(jīng)過(guò)圖像 】 對(duì)話(huà)框 ， 如圖所示 。 【 插入鼠標(biāo)經(jīng)過(guò)圖像 】 對(duì)話(huà)框 網(wǎng)頁(yè)制作 步驟 4 在 【 插入鼠標(biāo)經(jīng)過(guò)圖像 】 對(duì)話(huà)框中圖像名稱(chēng)的文本框中輸入 “ 首頁(yè) ” ；分別單擊“ 原始圖像 ” 及 “ 鼠標(biāo)經(jīng)過(guò)圖像 ” 右側(cè)的 “ 瀏覽 ” 按鈕 ， 選擇所需要的圖像 ， 如圖所示為選擇原始圖像 。 選擇原始圖像 網(wǎng)頁(yè)制作 步驟 5 在 【 插入鼠標(biāo)經(jīng)過(guò)圖像 】 對(duì)話(huà)框中單擊“按下時(shí)，前往的 URL” 右側(cè)的“瀏覽”按鈕，選擇超級(jí)鏈接的目標(biāo)文件。 選擇目的地原始圖像 網(wǎng)頁(yè)制作 步驟 6 重復(fù)以上操作，執(zhí)行 【 插入 】 |【 圖像對(duì)象 】|【 鼠標(biāo)經(jīng)過(guò)圖像 】 菜單命令，在圖像名稱(chēng)的文本框中輸入“目的地”，分別單擊“原始圖像”及“鼠標(biāo)經(jīng)過(guò)圖像”右側(cè)的“瀏覽”按鈕，選擇所需要的圖像，如圖所示為選擇原始圖像；在 【 插入鼠標(biāo)經(jīng)過(guò)圖像 】 分別單擊對(duì)話(huà)框中的參數(shù)設(shè)置如圖所示。 【 插入鼠標(biāo)經(jīng)過(guò)圖像 】 對(duì)話(huà)框參數(shù)設(shè)置 網(wǎng)頁(yè)制作 步驟 7 重復(fù)同樣的操作 ， 插入鼠標(biāo)經(jīng)過(guò)圖像 ， 在圖像名稱(chēng)的文本輸入框中輸入 “ 酒店機(jī)票 ” ， 用與設(shè)置“ 首頁(yè) ” 相同的方法選擇所需要的圖像 ， 【 插入鼠標(biāo)經(jīng)過(guò)圖像 】 對(duì)話(huà)框中的參數(shù)設(shè)置如圖所示 。 【 插入鼠標(biāo)經(jīng)過(guò)圖像 】 對(duì)話(huà)框參數(shù)設(shè)置 網(wǎng)頁(yè)制作 步驟 8 用同樣的方法添加導(dǎo)航條中的其他圖像，添加完6個(gè)項(xiàng)目后，即完成導(dǎo)航條的插入，將“ ”保存在“ letuweb\ch7”文件夾中。 步驟 9 單擊“預(yù)覽”按鈕 ，在瀏覽頁(yè)面的導(dǎo)航條上移動(dòng)光標(biāo)，導(dǎo)航條會(huì)產(chǎn)生相應(yīng)的變化，如圖所示，單擊可以跳轉(zhuǎn)到相應(yīng)的頁(yè)面上。 鼠標(biāo)指向?qū)Ш綀D像 網(wǎng)頁(yè)制作 步驟 10 重復(fù)同樣的操作 ， 插入鼠標(biāo)經(jīng)過(guò)圖像 ， 在圖像名稱(chēng)的文本輸入框中輸入 “ 酒店機(jī)票 ” ， 用與設(shè)置“ 首頁(yè) ” 相同的方法選擇所需要的圖像 ， 【 插入鼠標(biāo)經(jīng)過(guò)圖像 】 對(duì)話(huà)框中的參數(shù)設(shè)置如圖所示 。 【 插入鼠標(biāo)經(jīng)過(guò)圖像 】 對(duì)話(huà)框參數(shù)設(shè)置 網(wǎng)頁(yè)制作 創(chuàng)建文本與圖片超鏈接 步驟 1 創(chuàng)建文本超級(jí)鏈接 。 在 【 屬性 】 面板上單擊“ 頁(yè)面屬性 ” 按鈕 ， 設(shè)置文本鏈接的屬性 ， 參數(shù)設(shè)置如圖所示 。 步驟 2 在 “ 目的地 ” 頁(yè)面中選擇文本 “ 預(yù)訂酒店 ” ，如圖所示；在 【 屬性 】 面板上單擊 “ 鏈接 （ L） ” 右側(cè)的“ 瀏覽文件 ” 按鈕 。 設(shè)置文本超級(jí)鏈接的屬性 選擇文本 網(wǎng)頁(yè)制作 步驟 3 在彈出的 【 選擇文件 】 對(duì)話(huà)框中 ， 選擇文件 “ ”， 如圖所示 ， 單擊 “ 確定 ” 按鈕 。 在 【 選擇文件 】 對(duì)話(huà)框中選擇目標(biāo)頁(yè)面 網(wǎng)頁(yè)制作 步驟 4 單擊 “ 預(yù)覽 ” 按鈕 ， 當(dāng)鼠標(biāo)指向文本“ 預(yù)訂酒店 ” 時(shí) ， 如圖所示 ， 單擊即可跳轉(zhuǎn)到 “ 酒店預(yù)訂 ” 頁(yè)面上 ， 如圖所示 。 預(yù)覽時(shí)鼠標(biāo)指向超級(jí)鏈接文本 目標(biāo)頁(yè)面顯示效果 網(wǎng)頁(yè)制作
范文總結(jié)相關(guān)推薦
鄂ICP備17016276號(hào)-1