實例4 制作統(tǒng)計表頁面

實例說明

本實例為一個統(tǒng)計表頁面，該實例包括主頁和引導(dǎo)頁。引導(dǎo)頁包括標(biāo)題和箭頭及文本，單擊文本后，會進入主頁，主頁內(nèi)容為調(diào)查表，包括文本框、單選按鈕等組件。通過本實例，可以使讀者了解文本相關(guān)組件的應(yīng)用方法。

技術(shù)要點

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

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

1. 設(shè)置主頁

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

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

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

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

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

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

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

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

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

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

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

12 選擇剛剛插入的文本字段，在“屬性”面板的“字符寬度”參數(shù)欄內(nèi)鍵入12，在“最多字符數(shù)”參數(shù)欄內(nèi)鍵入6，并選擇“密碼”單選按鈕，使文本字段變?yōu)槊艽a框。如圖4-11所示。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 設(shè)置引導(dǎo)頁

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

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

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

提示

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

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

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

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

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

提示

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

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

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

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

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

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

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

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