實例4 制作統計表頁面

實例說明

本實例為一個統計表頁面，該實例包括主頁和引導頁。引導頁包括標題和箭頭及文本，單擊文本后，會進入主頁，主頁內容為調查表，包括文本框、單選按鈕等組件。通過本實例，可以使讀者了解文本相關組件的應用方法。

技術要點

在本實例中，首先創建主頁，將素材文件拷貝到本地站點的路徑，然后使用表格工具設置布局。接下來要使用表單工具欄中的文本字段、文本區域、復選框、單選按鈕組、列表/菜單、按鈕工具等工具來創建網頁內容，完成主頁的設置；最后創建引導頁，創建一個新的HTML格式文件，導入圖像和輸入文本，并設置文本的超鏈接，完成網頁的設置。

在本實例中，將指導讀者制作統計表和設置超鏈接的方法。該網頁制作完成后，在引導頁中單擊文本按鈕，進入統計表頁面。統計表頁面包括文本框、單選按鈕等組件，可以進行輸入文本、選擇選項等操作，圖4-1所示為網頁完成后的效果。

1. 設置主頁

1 由于主頁為引導頁的超鏈接內容，所以需要設置主頁。將本書附帶光盤文件中的“咨詢類網頁/實例4：進入統計表格”文件夾拷貝到本地站點的路徑。

2 運行Dreamweaver CS3，單擊起始頁面的HTML選項，創建一個新的HTML格式文件，將該文件保存在本地站點的路徑，并將其命名為“統計表主頁02”。

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

4 退出“表格”對話框后，在文檔窗口會插入一個表格，如圖4-3所示。

5 單擊表格內的單元格，在“屬性”面板中的“背景圖像”右側單擊“瀏覽”按鈕，打開“選擇圖像源文件”對話框。從該對話框內選擇拷貝的“實例4：進入統計表格”/“背景.jpg”文件，如圖4-4所示。單擊“確定”按鈕，退出“選擇圖像源文件”對話框。

6 退出“選擇圖像源文件”對話框后，背景圖像被導入到單元格中。在單元格內單擊鼠標，在“屬性”面板的“高”參數欄內鍵入768，如圖4-5所示。

7 在“屬性”面板的“大小”參數欄內鍵入16，激活“左對齊”按鈕，然后鍵入“用戶名：”字樣。如圖4-6所示。

8 將光標定位在“用戶名：”文本右側，然后在“表單”工具欄中單擊“文本字段”按鈕，打開“輸入標簽輔助功能屬性”對話框，在該對話框中參照默認參數設置，如圖4-7所示。單擊“確定”按鈕，退出該對話框。

9 退出“輸入標簽輔助功能屬性”對話框后，會打開“Dreamweaver”對話框，詢問是否添加表單標簽。在“Dreamweaver”對話框中單擊“否”按鈕，退出該對話框，如圖4-8所示。

10 退出“Dreamweaver”對話框后，在文檔窗口中會插入一個文本字段。選擇該文本字段，在“屬性”面板的“字符寬度”參數欄內鍵入12，在“最多字符數”參數欄內鍵入15，如圖4-9所示。

11 使用同樣方法，在“用戶名：”文本的底部鍵入“密碼：”字樣，并插入一個文本字段，如圖4-10所示。

12 選擇剛剛插入的文本字段，在“屬性”面板的“字符寬度”參數欄內鍵入12，在“最多字符數”參數欄內鍵入6，并選擇“密碼”單選按鈕，使文本字段變為密碼框。如圖4-11所示。

13 將光標定位在“密碼：”文本的底部，插入一個文本字段。選擇該文本字段，在“屬性”面板內的“字符寬度”參數欄內鍵入30，在“最多字符數”參數欄內鍵入5，選擇“多行”單選按鈕，在“初始值”文本框內鍵入“請多提寶貴意見，我們期待您的來信！”字樣，如圖4-12所示。

14 使用相同的設置，在剛剛插入的文本字段底部鍵入“您的興趣：”字樣，如圖4-13所示。

15 將光標定位在“您的興趣：”文本右側，在“表單”工具欄中單擊“復選框”按鈕。打開“輸入標簽輔助功能屬性”對話框，在該對話框的“標簽文字”文本框內鍵入“旅游”字樣，其他屬性使用默認設置，如圖4-14所示。單擊“確定”按鈕，退出該對話框。

16 退出“輸入標簽輔助功能屬性”對話框后，會打開“Dreamweaver”對話框。在“Dreamweaver”對話框中單擊“否”按鈕，退出該對話框，如圖4-15所示。

17 退出“Dreamweaver”對話框后，在文檔窗口中便插入一個復選框。選擇該復選框右側的“旅游”文本，在“屬性”面板的“大小”參數欄內鍵入12，如圖4-16所示。

18 參照上述插入復選框的方法，分別插入標簽文本為“攝影”、“讀書”、“電影”、“寫字”的復選框，如圖4-17所示。

19 在“您的興趣：”文本底部鍵入“您最想學習哪方面的知識？”字樣，如圖4-18 所示。

20 將光標定位在“您最想學習哪方面的知識？”文本的底部，然后在“表單”工具欄中單擊“單選按鈕組”按鈕，打開“單選按鈕組”對話框，如圖4-19所示。

21 在“單選按鈕組”對話框中單擊“標簽”值下的“單選”文本，此時文本處于可編輯的狀態，然后分別輸入Dreamweaver和Photoshop。在“單選按鈕”選項組中單擊按鈕，向該組添加單選按鈕，并分別輸入3dmax和Flash，如圖4-20所示。單擊“確定”按鈕，退出該對話框。

22 退出“單選按鈕組”對話框后，會打開“Dreamweaver”對話框。在“Dreamweaver”對話框中單擊“否”按鈕，退出該對話框，這時在文檔窗口中插入一個單選按鈕組，如圖4-21所示。

23 在單選按鈕組的底部鍵入“您最想上哪所大學：”字樣，如圖4-22所示。

24 將光標定位在“您最想上哪所大學：”文本的右側，在“表單”工具欄中單擊“列表/菜單”按鈕，打開“輸入標簽輔助功能屬性”對話框，在該對話框中，參照默認參數設置，如圖4-23所示。單擊“確定”按鈕，退出該對話框。

25 退出“輸入標簽輔助功能屬性”對話框后，會打開“Dreamweaver”對話框。在“Dreamweaver”對話框中單擊“否”按鈕，退出該對話框，這時在文檔窗口中插入一個列表/菜單，如圖4-24所示。

26 選擇剛剛插入的列表，在“屬性”面板中單擊“列表值”按鈕，打開“列表值”對話框，如圖4-25所示。

27 單擊“項目標簽”欄下的區域，這時會出現一個文本輸入框。在該文本輸入框內鍵入“北京大學”，然后在“列表值”對話框中單擊按鈕，這時會出現一個新的文本輸入框，在該文本框內鍵入“清華大學”。使用同樣的方法，分別添加當前菜單的選擇項目“上海大學”、“鄭州大學”、“山東大學”、“濟南大學”，如圖4-26所示。單擊“確定”按鈕，退出該對話框。

28 將光標定位于列表的底部，然后單擊“表單”工具欄中的“按鈕”按鈕，打開“輸入標簽輔助功能屬性”對話框，如圖4-27所示。單擊“確定”按鈕，退出該對話框。

29 退出“輸入標簽輔助功能屬性”對話框后，會打開“Dreamweaver”對話框。在“Dreamweaver”對話框中單擊“否”按鈕，退出該對話框，這時文檔窗口中插入一個按鈕。如圖4-28所示。

30 選擇剛剛插入的按鈕，在“屬性”面板的“值（V）”文本框內鍵入“完成”字樣，并選擇“提交表單”單選按鈕，如圖4-29所示。

31 執行菜單欄中的“文件”/“保存”命令，將該網頁保存，然后按下鍵盤上的F12鍵，預覽頁面，圖4-30所示為統計表的頁面效果。

2. 設置引導頁

1 運行Dreamweaver CS3，單擊起始頁面的HTML選項，創建一個新的HTML格式文件，將該文件保存在本地站點的路徑，將其命名為“統計表引導頁02”。

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

3 退出“表格”對話框后，在文檔窗口會插入一個3行1列的表格。選擇第1行單元格，在“屬性”面板中的“背景圖像”右側單擊“瀏覽”按鈕，打開“選擇圖像源文件”對話框。從該對話框內選擇拷貝的“實例4：進入統計表格”/“素材01.gif”文件，如圖4-32所示。單擊“確定”按鈕，退出“選擇圖像源文件”對話框。

提示

4 退出“選擇圖像源文件”對話框后，所選圖像被導入到單元格中。單擊第1行單元格，在“屬性”面板的“高”參數欄內鍵入270，如圖4-33所示。

5 接下來使用同樣方法，分別將“實例4：進入統計表格”/“素材02.jpg”文件導入第2行單元格中，將“實例4：進入統計表格”/“素材03.jpg”文件導入第3行單元格中。并將第2行單元格的“高”設置為185，第3行單元格的“高”設置為313，如圖4-34所示。

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

7 退出“表格”對話框后，在第2行單元格內會插入一個表格，如圖4-36所示。

8 拖動剛剛插入的表格邊框，以改變表格的大小，圖4-37為調整表格后的狀態。

提示

9 選擇第1行第2列的單元格，然后單擊“常用”工具欄內的“圖像”按鈕，打開“選擇圖像源文件”對話框。在該對話框中選擇“實例4：進入統計表格”/“素材01.jpg”文件，然后單擊“確定”按鈕，退出該對話框。

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

11 退出“圖像標簽輔助功能屬性”對話框后，在文檔窗口中出現導入的圖像。選擇該圖像，在“屬性”面板中激活“居中對齊”按鈕，使其居中對齊，如圖4-39所示。

12 選擇第2行第2列的單元格，鍵入“Come into”字樣。選擇該文本，在“屬性”面板的“大小”參數欄內鍵入16，設置“文本顏色”顯示窗內的顏色設置為黑色，并激活“居中對齊”按鈕，文本效果如圖4-40所示。

13 確定文本處于選擇狀態，在“屬性”面板中單擊“鏈接”下拉式選項欄右側的“瀏覽”按鈕，打開“選擇文件”對話框。在該對話框中選擇拷貝的“實例4：進入統計表格”文件夾內的“統計表頁面.html”文件或讀者自己制作的“統計表主頁02.html”文件，如圖4-41所示。單擊“確定”按鈕，退出該對話框。

14 退出“選擇文件”對話框后，再次選擇文本，執行菜單欄中的“修改”/“頁面屬性”命令，打開“頁面屬性”對話框，在“分類”列表框中選擇“鏈接”選項。

15 在“鏈接字體”下拉式列表框中選擇“（同頁面字體）”選項，在“大小”參數欄內鍵入16，單擊“鏈接顏色”顯示窗，在彈出的顏色列表中選擇黑色；在“下劃線樣式”下拉式列表中選擇“始終無下劃線”選項，其他選項按默認設置，如圖4-42所示。單擊“確定”按鈕，退出該對話框。

16 執行菜單欄中的“文件”/“保存”命令，將該網頁保存，本實例就全部設置完畢了，圖4-43所示為網頁設置完成后的效果。如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤的“咨詢類網頁/實例4：進入統計表頁面/統計表頁面.html”文件和“設置超鏈接.html”文件，這兩個文件為本實例設置完成后的文件。