【文章內(nèi)容簡(jiǎn)介】 接時(shí)必須了解鏈接與被鏈接文件的路徑 。 在一個(gè)網(wǎng)站中 ， 路徑通常有 3種表示方法：絕對(duì)路徑 、 根目錄相對(duì)路徑 、 文檔目錄相對(duì)路徑 。 1) 絕對(duì)路徑 絕對(duì)路徑是被鏈接文檔的完整 URL地址 ， 包括使用的傳輸協(xié)議 (對(duì)于網(wǎng)頁(yè)而言通常是 例如： 就是一個(gè)絕對(duì)路徑 。 絕對(duì)路徑包含的是精確地址 ，因此不用考慮源文件位置 。 如果目標(biāo)源文件被移動(dòng) ， 則鏈接在打開(kāi)時(shí)會(huì)無(wú)效 。 創(chuàng)建外部鏈接時(shí) (即從一個(gè)網(wǎng)站的網(wǎng)頁(yè)鏈接到其他網(wǎng)站的網(wǎng)頁(yè) )， 必須使用絕對(duì)路徑 。 2) 根目錄相對(duì)路徑 根目錄相對(duì)路徑是指從站點(diǎn)根文件夾到鏈接文檔經(jīng)過(guò)的路徑 。 站點(diǎn)上所有公開(kāi)的文件都存放在站點(diǎn)的根目錄下 。 根目錄相對(duì)路徑以斜杠 (/)開(kāi)頭 ，表示站點(diǎn)根文件夾 ， 例如： /images/lianxi/， 是指站點(diǎn)根文件夾下images子文件夾中 lianxi子文件夾中的一個(gè)圖像文件 。 使用根目錄相對(duì)路徑時(shí) ， 即使移動(dòng)包含根目錄相對(duì)鏈接的文檔 ，鏈接也不會(huì)發(fā)生錯(cuò)誤 。 3) 文檔目錄相對(duì)路徑 文檔目錄相對(duì)路徑是指以當(dāng)前文檔所在位置為起始點(diǎn)到被鏈接文檔經(jīng)由的路徑，這種方式適合于創(chuàng)建本地鏈接。使用文檔相對(duì)路徑可以省去當(dāng)前文檔和被鏈接文檔的絕對(duì) URL中相同的部分，保留不同部分。一般在創(chuàng)建同一個(gè)站點(diǎn)中不同的網(wǎng)頁(yè)之間的鏈接時(shí)，會(huì)使用到這種鏈接方式。 3. 文本超鏈接 文本超鏈接是網(wǎng)頁(yè)中最常見(jiàn)的超級(jí)鏈接 ， 它能給瀏覽者非常直觀的主題信息 ， 對(duì)它所包含的信息一目了然 。 同時(shí) ， 文本超鏈接的建立也非常簡(jiǎn)單 ， 所以文本超鏈接在網(wǎng)頁(yè)中最常用 。 使用 Dreamweaver MX 2022創(chuàng)建召集鏈接既簡(jiǎn)單又方便 ， 只要選中要設(shè)置成超級(jí)鏈接的文字 ，然后在屬性檢查器 “ 鏈接 ” 文本框中添加相應(yīng)的URL即可 。 4. 圖像超鏈接 有些時(shí)候 ， 我們需要建立圖像之間的超鏈接 。例如 ， 在個(gè)人的 Web中提供自己的照片 ， 通過(guò)單擊照片 ， 可以看到有關(guān)個(gè)人的一些內(nèi)容；在電子商務(wù)中 ， 商家在 Web頁(yè)中提供商品的圖片 ， 通過(guò)單擊圖片來(lái)了解商品的情況等 。 這樣一方面可以吸引其他人的注意 ， 另一方面可以通過(guò)單擊這些圖像 ，實(shí)現(xiàn)特定的功能 。 建立圖像超鏈接和建立文本超鏈接一樣簡(jiǎn)單 ，步驟也大同小異 ， 通過(guò)創(chuàng)建圖像的各種超鏈接 ，可以實(shí)現(xiàn)主頁(yè)結(jié)構(gòu)和內(nèi)容的多樣性 。 在建立圖像超鏈接的過(guò)程中 ， 需要先在一個(gè) Web頁(yè)中插入圖像 ，然后再與需要鏈接的內(nèi)容建立超鏈接 。 5. 郵件超鏈接 電子郵件正日益成為人們的重要溝通手段 。 因此 ， 在網(wǎng)頁(yè)中設(shè)置電子郵件鏈接已經(jīng)變得非常普遍 。 電子郵件鏈接可以附加在按鈕圖片上 ， 也可以附加在文本上 ， 一般出現(xiàn)在網(wǎng)頁(yè)末尾 。 從方便溝通的角度出發(fā) ， 需要在網(wǎng)頁(yè)中大量使用電子郵件鏈接 。 當(dāng)頁(yè)面瀏覽者單擊具有電子郵件鏈接的文本或按鈕時(shí) ， 可以直接打開(kāi)安裝在系統(tǒng)中的電子郵件應(yīng)用程序 ， 在 “ 收件人 ” 位置已經(jīng)自動(dòng)填寫(xiě)好了預(yù)先輸入的電子郵件地址 ， 瀏覽者只要在編寫(xiě)完電子郵件后 ， 直接發(fā)送即可 。 6. 書(shū)簽鏈接 當(dāng)用戶(hù)瀏覽網(wǎng)頁(yè)時(shí) ， 經(jīng)常會(huì)碰到這樣的情況：在網(wǎng)頁(yè)上端位置由一個(gè)內(nèi)容列表 ， 列表下面分別是針對(duì)各列表項(xiàng)的詳細(xì)說(shuō)明 。 當(dāng)用戶(hù)單擊上端內(nèi)容列表中感興趣的某一項(xiàng)時(shí) ， 網(wǎng)頁(yè)會(huì)自動(dòng)跳轉(zhuǎn)到該列表項(xiàng)的詳細(xì)說(shuō)明位置 。 當(dāng)用戶(hù)閱讀完該項(xiàng)說(shuō)明的全部?jī)?nèi)容之后 ， 又可以單擊 “ 返回 ” 文本或按鈕回到頁(yè)面的前端 。 這種處理方式需要使用到一種特殊方式的超鏈接 ——“書(shū)簽鏈接 ” 。 書(shū)簽鏈接的原理就和錨一樣 ，在 需 要 的 時(shí) 候 ， 返 回 到 指 定 的 位 置 。 在Dreamweaver MX 2022中文版中 ， “ 書(shū)簽 ” 就被翻譯成 “ 命名錨記 ” 。 7. 空鏈接 空鏈接的含義就是像它的名字一樣：它不會(huì)跳轉(zhuǎn)到任何地方。這種鏈接對(duì)于讀取某些 JavaScript事件時(shí)是非常有用的。有些 JavaScript事件有鏈接但是并不針對(duì)文本或圖像，而且也不需要用戶(hù)離開(kāi)當(dāng)前頁(yè)面。例如，在大多數(shù)瀏覽器中，圖像不能識(shí)別 onMouseOver事件。因此，必須使用空鏈接實(shí)現(xiàn)圖像變換。在 Dreamweaver MX 2022，“ 交換圖像 ” 的行為就是通過(guò)自動(dòng)調(diào)用空鏈接實(shí)現(xiàn)的。 8 實(shí)訓(xùn) 。 建立站點(diǎn)，新建一個(gè)名為 。 (1) 創(chuàng)建一指向搜狐 ( ① 在網(wǎng)頁(yè)中選中要添加超鏈接的文本“文本鏈接”。 ② 單擊 【 插入 】 → 【 超級(jí)鏈接 】 選項(xiàng)，彈出“超級(jí)鏈接”設(shè)置對(duì)話(huà)框，鏈接后輸入“ 目標(biāo)為“ _blank”，其他參數(shù)默認(rèn)設(shè)置。如圖所示。 ③ 也可以在屬性面板中進(jìn)行設(shè)置或修改，如圖所示。 ④ 保存。按 F12預(yù)覽網(wǎng)頁(yè)。在瀏覽器里光標(biāo)移到超級(jí)鏈接的地方就會(huì)變成手型，狀態(tài)欄顯示鏈接的指向位置。 (2) 創(chuàng)建一個(gè)指向站內(nèi)文件的鏈接 ① 在網(wǎng)頁(yè)中選中要添加超鏈接的文本“文本鏈接”。 . ② 拖動(dòng) “ 指向文件 ” 按鈕到需要鏈接的文件位置，放開(kāi)。此時(shí)，在 “ 鏈接 ” 對(duì)話(huà)框中就會(huì)出現(xiàn)剛才被選中的鏈接文件。如圖所示。也可以在屬性面板中單擊 “ 文件夾 ”圖標(biāo)，在彈出的對(duì)話(huà)框里選中相應(yīng)的網(wǎng)頁(yè)文件就完成了，效果是一樣的。 ③ 保存。按 F12預(yù)覽網(wǎng)頁(yè)。 9 實(shí)訓(xùn) 給圖像創(chuàng)建超級(jí)鏈接的制作方法同文本鏈接一樣，區(qū)別只是添加鏈接的對(duì)象不同。下面介紹通過(guò)熱區(qū)給圖像添加超鏈接。 制作圖像上的超級(jí)鏈接。這里所說(shuō)的圖像上的超級(jí)鏈接是指在一張圖片上實(shí)現(xiàn)多個(gè)局部區(qū)域指向不同的網(wǎng)頁(yè)鏈接。 ① 在 。如圖所示。 ② 選中圖片，單擊屬性面板上的 “ 多邊形熱點(diǎn)工具 ”按鈕，如圖所示。 ③ 在圖上左下角的花朵上繪制熱區(qū)，彈出熱點(diǎn)面板，在“鏈接”位置輸入“ ”，目標(biāo)為“ _blank”,替代文本為“新浪網(wǎng)”，其他參數(shù)默認(rèn)設(shè)置。如圖所示。 ④ 重復(fù)③的操作，對(duì)其他花朵進(jìn)行熱區(qū)設(shè)置。 ⑤ 保存。按 F12預(yù)覽。用鼠標(biāo)在設(shè)置的熱區(qū)檢驗(yàn)效果，可以看到光標(biāo)移上熱區(qū)就會(huì)顯示出相應(yīng)的說(shuō)明文字，狀態(tài)欄顯示鏈接的 URL。如圖所示。 10 實(shí)訓(xùn) 創(chuàng)建一個(gè)指向 ，發(fā)送的主題為 “ 咨詢(xún) ” 。 ① 選中要作為鏈接的 “ 聯(lián)系管理員 ” 。 ② 單擊 【 插入 】 → 【 電子郵件鏈接 】 選項(xiàng) ， 或者在“ 插入 ” 工具欄上的 “ 常用 ” 選項(xiàng)上單擊 “ 電子郵件鏈接 ” 按鈕 ， 都會(huì)彈出 “ 電子郵件鏈接 ” 對(duì)話(huà)框 。 ③ 在 “ 文本 ” 文本框中會(huì)顯示選中的文字 ， 也可以在該文本框中輸入新文字代替 。 在 “ Email”文本框中輸入相應(yīng)的 Email地址 “ ”。如圖所示 。 如果希望在輸入地址的同時(shí)輸入信件主題 ，則可以在 “ Email”文本框中進(jìn)行設(shè)置 ， 例如輸入 “ ？subject=咨詢(xún) ” ， 單擊鏈接后啟動(dòng)郵件程序 ，如圖所示 。 ④ 保存 。 按 F12預(yù)覽網(wǎng)頁(yè)效果 。 11 實(shí)訓(xùn) 。 利用書(shū)簽可以在文件中特定的位置上設(shè)置鏈接的目標(biāo)端點(diǎn) 。 使用書(shū)簽可以跳轉(zhuǎn)到其他文件中的制定位置 ， 也可以跳轉(zhuǎn)到當(dāng)前文件中的指定位置 。 在 文 件 中 制 作 一 個(gè) 指 向 站 點(diǎn) 。 ① 在 位置 。 ② 單擊 【 插入 】 →【 命名錨記 】 選項(xiàng) ，彈出 “ 命名錨記 ”對(duì)話(huà)框 ， 給錨命名為 “ lianjie”。 如圖所示 。 ③ 單擊 “ 確定 ” 。錨就插入在指定的位置 。 如圖所示 。 ④ 打開(kāi) ，選中設(shè)置超鏈接的對(duì)象 。 ⑤ 單擊屬性面板中 “ 鏈接 ” 文本框后的 “ 瀏覽文件 ” 按鈕 ， 彈出 “ 選擇文件 ” 對(duì)話(huà)框 ， 選擇存在錨的網(wǎng)頁(yè)文件 。 ⑥ 在 “ URL： ” 文本框中輸入“ lianjie”。如圖所示。 ⑦ 單擊確定。保存。按F12預(yù)覽網(wǎng)頁(yè)。在狀態(tài)欄中顯示了帶有錨的URL地址，如圖所示。 12 實(shí)訓(xùn) 。 ① 選中要作為鏈接的對(duì)象 。 ② 在屬性面板的 “ 鏈接 ” 文本框中輸入一個(gè) “ ”， 這樣單擊地址為 “ ”的鏈接就會(huì)自動(dòng)跳轉(zhuǎn)到文檔的起始位置 。 為了避免上述情況 ， 可以用 “ ”來(lái)代替“ ”， 這時(shí)會(huì)保持在當(dāng)前頁(yè)面的瀏覽位置 。 ③ 保存 。 按 F12預(yù)覽網(wǎng)頁(yè) 。會(huì)看到狀態(tài)欄的文件路徑后出現(xiàn) “ ”。 如圖所示 。 13 思考與練習(xí) （ 1） 絕對(duì)路徑和相對(duì)路徑有什么區(qū)別 ？ （ 2） 超級(jí)鏈接按鏈接目標(biāo)分類(lèi) ， 分為哪幾類(lèi) ？ （ 3） 新建一個(gè)頁(yè)面 。 創(chuàng)建電子郵件鏈接 、 空鏈接和文字鏈接 。 （ 4） 在一個(gè)文件中命名一個(gè)錨 “ tu”，在當(dāng)前文檔內(nèi)實(shí)現(xiàn)書(shū)簽鏈接。 網(wǎng) 頁(yè) 編 輯 ——網(wǎng)頁(yè)布局 Dreamweaver MX 2022 提供了兩種查看和操作表格的方式 ， 一種是在 “ 標(biāo)準(zhǔn) ” 模式中 ， 表格顯示為行和列的網(wǎng)格 ， 另一種是在 “ 布局 ” 模式 ，允許用戶(hù)在頁(yè)面上繪制 、 調(diào)整以及移動(dòng)布局表格或單元格 。 由于層可以定位在頁(yè)面上的任意位置 。 所以使用層進(jìn)行布局 ， 可以作到對(duì)層中文檔內(nèi)容的精確定位 。 利用層可以非常靈活地放置內(nèi)容 ， 給了設(shè)計(jì)者很大的自己度 。 但是同時(shí)我們也必須要考慮它的兼容性問(wèn)題 。 框架是一種常用的版面設(shè)計(jì)方式 。 框架可以將一個(gè)瀏覽器窗口劃分為多個(gè)區(qū)域 ， 而且每個(gè)區(qū)域都可以顯示不同 HTML文檔 。 1. 表格 表格是用于在頁(yè)面上顯示表格式數(shù)據(jù)以及對(duì)文本和圖像進(jìn)行布局的強(qiáng)有力的工具 ， 很多設(shè)計(jì)人員還使用表格來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行布局 。 表格由一行或多行組成 ， 每行又由一個(gè)或多個(gè)單元格組成 ， 雖然 HTML代碼中通常不明確指定列 ，但 Dreamweaver MX 2022允許用戶(hù)操作列 、 行和單元格 。 當(dāng)用戶(hù)選定了表格或表格中有插入點(diǎn)時(shí) ，Dreamweaver MX 2022會(huì)顯示表格寬度和每個(gè)單元列的列寬 ， 提供了兩種查看和操作表格的方式：在 “ 標(biāo)準(zhǔn) ” 模式中 ， 表格顯示為行和列的網(wǎng)格；在 “ 布局 ” 模式下允許用戶(hù)在將表格用作基礎(chǔ)結(jié)構(gòu)的同時(shí)再頁(yè)面上繪制 、 調(diào)整表格的大小以及移動(dòng)表格 。 2. 布局視圖 布局視圖是一種特殊的表格視圖 ， 它的作用在于用可視化的方法在頁(yè)面上繪制復(fù)雜的表格 。 它同傳統(tǒng)繪制表格方法的差別在于 ， 在布局視圖中 ，我們可以在頁(yè)面上繪制任意數(shù)量和大小的表格 ，而且在表格中的任意位置上也可以繪制任意數(shù)量和任意大小的單元格 。 要進(jìn)入布局視圖 ， 可以在布局選項(xiàng)卡上 ， 單擊“ 布局 ” 按鈕 。 3. 層 層是網(wǎng)頁(yè)的一個(gè)區(qū)域 ， 在一個(gè)網(wǎng)頁(yè)中可以有多個(gè)層存在 ， 它最大的魅力在于各個(gè)層可以重疊 ，并且可以設(shè)定層的屬性和關(guān)系 。 使用層可以更靈活有效的制作頁(yè)面 ， 它可與表格相互轉(zhuǎn)換 。 與表格的功能相比 ， 層與表格相似 ，而且能夠相互轉(zhuǎn)化 ， 但層在操作上上自由度更高 。 在 Dreamweaver MX2022中 ， 層能夠?qū)崿F(xiàn)對(duì)網(wǎng)頁(yè)內(nèi)容的精確定位 ， 層中可以放置任何網(wǎng)頁(yè)對(duì)象 ，包括文本 、 圖像 、 表單 、 對(duì)象插件及其他層等 。 4. 框架 框架的作用是把瀏覽器窗口劃分為若干個(gè)區(qū)域 ，各區(qū)域可以分別顯示不同的網(wǎng)頁(yè)內(nèi)容 。 框架由兩個(gè)主要部分組成：框架集和單個(gè)框架 。 框架可以起到折分瀏覽器窗口的作用 ， 它本身并不是網(wǎng)頁(yè) ， 在使用框架建立并編輯網(wǎng)頁(yè)時(shí) ， 一定要分別保存與名框架相鏈接的網(wǎng)頁(yè) 。 框架與框架中顯示的網(wǎng)頁(yè)是鏈接關(guān)系 ， 改變框架的結(jié)構(gòu)并不會(huì)改變與框架鏈接的網(wǎng)頁(yè)的內(nèi)容 。一般建立完成框架后 ， 會(huì)分別設(shè)計(jì)與框架鏈接的網(wǎng)頁(yè) ， 然后檢測(cè)網(wǎng)頁(yè)內(nèi)容是否可以在框架中正確地顯示 。 5 實(shí)訓(xùn) 。 （ 1） 建立表格 ① 建立一個(gè)新的空白頁(yè)面 ，在文件中選定插入點(diǎn)。 ② 單擊 【 插入 】 → 【 表格 】選項(xiàng)，或單擊 “ 常用 ”工具欄上的 “ 插入表格 ”按鈕，彈出 “ 表格 ” 對(duì)話(huà)框。如圖所示。 ③ 在對(duì)話(huà)框中設(shè)置 5行 8列表格 ，寬度為 600像素 ， 邊框粗細(xì)為 1，單元格邊距為 1， 單元格間距為 0。 如圖所示 。 ④ 如果需要查看表格的屬性 ，可以選中表格 ， 彈出表格屬性面板 。 如圖所示 。 ⑤ 如果需要查看單元格的屬性，可以選中單元格，彈出單元格屬性面板。如圖所示。 ⑥ 單擊 “ 確定 ” 按鈕，保存，按 F12預(yù)覽。效果如圖所示。 （ 2） 調(diào)整表格行數(shù)和