實例4 咖啡館網頁

實例說明 在本實例中將指導讀者制作一個咖啡館網頁，該網頁包含了大量的信息內容，因此使用了鏈接來更具體直觀地展示信息內容。通過本實例的學習，使讀者掌握為圖片設置鏈接的方法。

技術要點 在本實例中，首先需要將網頁中使用的素材導入到本地站點，然后打開已進行過編輯的網頁，通過導入圖片豐富網頁內容，通過設置輔助操作，簡化操作步驟，最后為導入的圖片添加鏈接，并設置其屬性，完成該網頁的制作。圖4-1所示為本實例完成后的效果。

1 將本書附帶光盤中的“網頁基礎設置/實例4：咖啡館網頁”文件夾復制到本地站點路徑內。

2 運行Dreamweaver CS4，打開復制的“實例4：咖啡館網頁”文件夾中的“咖啡館網頁源文件．html”，如圖4-2所示，將該文件另存在本地站點路徑內，然后將其命名為“咖啡館網頁”。

3 在第二行第二列單元格內單擊，執行菜單欄中的“插入”/“圖像”命令，打開“選擇圖像源文件”對話框。從該對話框中選擇復制的“實例4：咖啡館網頁”文件夾中的a-01.jpg文件，如圖4-3所示，單擊“確定”按鈕，退出該對話框。

4 退出“選擇圖像源文件”對話框后，會打開“圖像標簽輔助功能屬性”對話框，如圖4-4所示，使用默認設置，單擊“確定”按鈕，退出該對話框，將圖像導入到頁面內。

5 在前面講解的操作中，導入圖片時會彈出“圖像標簽輔助功能屬性”對話框，為了便于操作，可以關閉該對話框。

6 接下來設置輔助操作，執行菜單欄內的“編輯”/“首選參數”命令，打開“首選參數”對話框，如圖4-5所示。

7 在打開的“首選參數”對話框中的“分類”顯示窗中選擇“輔助功能”選項，在“首選參數”對話框中會顯示“輔助功能”編輯窗，清除“圖像”復選框，如圖4-6所示。單擊“確定”按鈕，退出“首選參數”對話框。

8 使用同樣的方法，參照圖4-7所示由左至右依次導入復制的“實例4：咖啡館網頁”文件夾中的a-02.jpg、a-03.jpg、a-04.jpg文件。

9 選擇第二行第二列單元格內的圖像，單擊“屬性”面板中的“鏈接”文本框右側的“瀏覽文件”按鈕，打開“選擇文件”對話框。從該對話框中選擇復制的“實例4：咖啡館網頁”文件夾中的01.jpg文件，如圖4-8所示，單擊“確定”按鈕，退出該對話框。

10 設置圖像的邊框。確定a-01.jpg文件仍處于被選擇狀態，在“屬性”面板中的“邊框”參數欄中鍵入0，設置圖像的邊框，如圖4-9所示。

11 使用同樣的方法，為其他文件添加鏈接圖像，并設置圖像的邊框。

12 執行菜單欄內的“文件”/“保存”命令，將該網頁保存，按下鍵盤上的F12鍵瀏覽網頁，如圖4-10所示。

13 現在本實例的制作就全部完成了，圖4-11所示為本實例完成后的效果。如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤中的“網頁基礎設置/實例4：咖啡館網頁/咖啡館．html”文件，該文件為本實例完成后的文件。