實例1 材質查詢網頁

實例說明

本實例為一個材質查詢網站的頁面，該網頁包含了圖片、文本、超鏈接等網頁的基本元素。通過本實例，可以使讀者了解網頁設置的基礎知識點，并能夠獨立制作網頁。

技術要點

在本實例中，為了便于管理，首先需要設置本地站點，然后使用表格工具設置布局；接下來要導入位圖并設置圖片的超鏈接，最后輸入文本，完成網頁的設置。

網頁的設置，需要進行合理的規劃和編輯，并進行大量的前期準備工作。雖然其過程較為復雜，但是如果方法得當，工具運用正確，制作網頁的過程并不困難。在本實例中，將指導讀者按照標準的工作流程來制作一個網頁，使讀者了解使用Dreamweaver CS3制作網頁的基本方法。該網頁制作完成后，在網頁中有各種材質的名稱和縮略圖，單擊縮略圖，可以顯示大圖，圖1-1所示為網頁完成后的效果。

1. 設置本地站點

1 為了更好地對網頁進行編輯和管理，首先需要定義一個本地站點，運行Dreamweaver CS3，單擊起始頁面的“Dreamweaver站點”選項，打開“站點定義為”對話框。在該對話框內設置站點名稱和HTTP地址，由于本站點為制作練習使用的，所以可以不設置HTTP地址，如圖1-2所示。單擊“下一步”按鈕，進入下一個面板。

2 進入“編輯文件，第2部分”面板，選擇“否，我不想使用服務器技術”單選按鈕，如圖1-3所示。單擊“下一步”按鈕，進入下一個面板。

3 進入“編輯文件，第3部分”面板，選擇“編輯我的計算機上的本地副本，完成后再上傳到服務器（推薦）”單選按鈕，并設置文件的保存路徑，如圖1-4所示。單擊“下一步”按鈕，進入下一個面板。

4 進入“共享文件”面板，在“您如何連接到遠程服務器”下拉式選項欄內選擇“無”選項，如圖1-5所示。單擊“下一步”按鈕，進入下一個面板。

5 進入“總結”面板后，單擊“完成”按鈕，如圖1-6所示，完成本地站點的設置。在“文件”面板中會顯示創建站點的信息，如圖1-7所示。

提示

2. 制作網頁

1 將本書附帶光盤的“咨詢類網頁/實例1：材質查詢網頁”文件夾拷貝到本地站點的路徑。

提示

2 單擊起始頁面的HTML選項，如圖1-8所示。創建一個新的HTML格式文件，將該文件保存在本地站點的路徑。

3 在“常用”工具欄內單擊“表格”按鈕，打開“表格”對話框。在“行數”參數欄內鍵入1，在“列數”參數欄內鍵入1，在“表格寬度”參數欄內鍵入1024，在“邊框粗細”、“單元格邊距”、“單元格間距”參數欄內均鍵入0，如圖1-9所示。單擊“確定”按鈕，退出該對話框。

提示

4 退出“表格”對話框后，在文檔窗口中會出現一個表格，如圖1-10所示。

5 單擊表格內的單元格，在“常用”工具欄內單擊“圖像”按鈕，打開“選擇圖像源文件”對話框。從該對話框內選擇拷貝的“實例1：材質查詢網頁”文件夾內的“版頭.gif”文件，如圖1-11所示。單擊“確定”按鈕，退出“選擇圖像源文件”對話框。

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

7 圖像導入后的效果如圖1-13所示。

8 將光標定位在表格底部，在“常用”工具欄內單擊“表格”按鈕，打開“表格”對話框。在“行數”參數欄內鍵入2，在“列數”參數欄內鍵入5，在“表格寬度”參數欄內鍵入1024，在“邊框粗細”、“單元格邊距”、“單元格間距”參數欄內均鍵入0，如圖1-14所示。單擊“確定”按鈕，退出該對話框。

9 退出“表格”對話框后，在文檔窗口會插入如圖1-15所示的表格。

10 在第1行第1列的單元格內單擊，在“常用”工具欄內單擊“圖像”按鈕，打開“選擇圖像源文件”對話框。從該對話框內選擇拷貝的“實例1：材質查詢網頁”文件夾內的“木材02.jpg”文件，如圖1-16所示。單擊“確定”按鈕，退出“選擇圖像源文件”對話框。

11 選擇導入后的圖像，在“屬性”面板內激活“居中對齊”按鈕，使其居中對齊，如圖1-17所示。

12 使用同樣的方法，在第1行第2列單元格內導入“實例1：材質查詢網頁”文件夾內的“皮革02.jpg”文件；在第1行第3列單元格內導入“實例1：材質查詢網頁”文件夾內的“肌理02.jpg”文件；在第1行第4列單元格內導入“實例1：材質查詢網頁”文件夾內的“石材02.jpg”文件；在第1行第5列單元格內導入“實例1：材質查詢網頁”文件夾內的“布藝02.jpg”文件；均使其居中對齊，效果如圖1-18所示。

13 設置圖像的超鏈接。單擊“木材02.jpg”圖像，在“屬性”面板中單擊“鏈接”文本框右側的“瀏覽”按鈕，打開“選擇文件”對話框。從該對話框內選擇拷貝的“實例1：材質查詢網頁”文件夾內的“木材.jpg”文件，如圖1-19所示。

提示

14 使用同樣的方法設置其他圖像相應的超鏈接。

15 選擇第2行第1列的單元格，在“屬性”面板內的“大小”參數欄內鍵入20，設置“文本顏色”顯示窗內的顏色為黑色，激活“居中對齊”按鈕，如圖1-20所示。

16 在所選單元格內鍵入“木材”，如圖1-21所示。

17 使用同樣的設置，在第2行第2列單元格內鍵入“皮革”，在第2行第3列單元格內鍵入“肌理”，在第2行第4列單元格內鍵入“石材”，在第2行第5列單元格內鍵入“布藝”，如圖1-22所示。

18 將光標定位在表格外側，在“常用”工具欄內單擊“表格”按鈕，打開“表格”對話框。在“行數”參數欄內鍵入1，在“列數”參數欄內鍵入1，在“表格寬度”參數欄內鍵入1024，在“邊框粗細”、“單元格邊距”、“單元格間距”參數欄內均鍵入0，單擊“確定”按鈕，退出該對話框，在文檔窗口會插入一個表格。

19 在剛剛插入表格的單元格內單擊，在“常用”工具欄內單擊“圖像”按鈕，打開“選擇圖像源文件”對話框。從該對話框內選擇拷貝的“實例1：材質查詢網頁”文件夾內的“底部.gif”文件，如圖1-23 所示。單擊“確定”按鈕，退出“選擇圖像源文件”對話框。

20 導入圖像后的效果如圖1-24所示。

21 在菜單欄執行“文件”/“保存”命令，將該網頁保存，本實例就全部設置完畢了。打開本實例制作的html文件，單擊材質圖片，可以打開相應的圖像，圖1-25所示為網頁設置完成后的效果。如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤的“咨詢類網頁/實例1：材質查詢網頁/材質查詢網頁.html”文件，該文件為本實例設置完成后的文件。