任務(wù)二制作用戶留言網(wǎng)頁

網(wǎng)站建設(shè)與維護項目三制作表單網(wǎng)頁CONTENTS目錄Part1使用表單Part2制作用戶留言網(wǎng)頁02

任務(wù)二

制作用戶留言網(wǎng)頁

制作用戶留言頁在掌握了表單的基礎(chǔ)認知后，現(xiàn)結(jié)合認知進行用戶留言頁的制作，將表單知識實踐起來！首先，我們得為我們的表單策劃一下該有什么功能，用什么形式表現(xiàn)。在這個示例中，將制作一個比較簡單的留言表單。表單需要具備如下：?

名稱?電子郵件網(wǎng)站地址留言框?提交按鈕【設(shè)計草圖示】制作用戶留言頁文本框文本區(qū)域按鈕頁面制作元素分析：制作用戶留言頁留言頁面制作form標(biāo)記出現(xiàn)在任何一個表單窗體的開始，其功能是設(shè)置表單的基礎(chǔ)數(shù)據(jù)。使用form標(biāo)記的語法格式如下所示。<formaction=""method="post"enctype="application/x-www-form-urlencoded"name="form1"target="_parent">name：表單的名字；method：數(shù)據(jù)的傳送方式action：處理表單數(shù)據(jù)的頁面文件enctype：傳輸數(shù)據(jù)的MIME類型target：處理文件的打開方式。制作用戶留言頁留言頁面制作【步驟1】：新建一個HTML空白頁，點擊插入--表格，在跳出的表格編輯頁面，選擇表格的行數(shù)與列數(shù)等元素，在設(shè)計頁面，可以對表格的大小進行拖拉調(diào)整；。留言頁面我們可以利用表格+表單的結(jié)合方式進行制作：【插入表格】【表格編輯器】【調(diào)整表格大小】制作用戶留言頁【步驟2】：根據(jù)前面的留言頁草圖，在表格內(nèi)依次填入文本文字，在放置按鈕一行中，因為要放置兩個按鈕，考慮到，視覺效果，選中兩個單元格，右鍵單擊，在跳出的選擇項中，選擇表格--合并單元格，或使用快捷鍵（Ctrl+alt+m）。對單元格進行合并；?！竞喜卧瘛恐谱饔脩袅粞皂摗静襟E3】：對文本也進行對齊設(shè)置，完成后，在另一單元格內(nèi)添加相應(yīng)的表單元素，如草圖規(guī)劃的，姓名+郵件+網(wǎng)址，三項需要添加的表單元素是文本域，點擊“插入”--“表單”--“文本域”；。【對齊文本】【插入文本域】制作用戶留言頁【步驟4】：在跳出的文本域標(biāo)簽編輯器中，填好ID與標(biāo)簽名稱，插入完成后，可以在屬性欄中，進行進一步的細化文本域，如添加初始值，文本域類型調(diào)整等；依次完成文本域的插入；?！疚谋居蚓庉嬈鳌俊疚谋居?qū)傩詸凇恐谱饔脩袅粞皂?lt;tablewidth="457"height="150"border="1"><tr><tdwidth="59"><divalign="right">姓名：</div></td><tdwidth="382"><formid="form1"name="form1"method="post"action=""><label><inputname="姓名"type="text"id="姓名"value="請輸入您的姓名"maxlength="18"/></label></form></td></tr><tr><td><divalign="right">郵件：</div></td><td><formid="form2"name="form2"method="post"action=""><label><inputname="郵件"type="text"id="郵件"value="請輸入您的郵件地址"/></label></form></td></tr><tr><td><divalign="right">網(wǎng)址：</div></td><td><formid="form3"name="form3"method="post"action=""><label><inputtype="text"name="網(wǎng)址"id="網(wǎng)址"/></label></form></td></tr><tr>..........</table>【效果與代碼】：制作用戶留言頁【步驟5】：完成文本域的插入后，進行留言欄的文本區(qū)域元素插入，點擊“插入”--“表單”--“文本區(qū)域”，在出現(xiàn)的標(biāo)簽編輯器填寫好ID與標(biāo)簽的名字，即完成文本區(qū)域的插入；【插入文本區(qū)域】【文本區(qū)域編輯器】【文本域插入效果】制作用戶留言頁【步驟6】：，點擊“插入”--“表單”--“按鈕”，插入按鈕后，選中按鈕，右鍵點擊調(diào)整按鈕的位置，并在屬性欄中選擇按鈕的值與動作，即可完成按鈕的插入?！静迦氚粹o】【按鈕對齊設(shè)置】【按鈕屬性設(shè)置欄】制作用戶留言頁<tablewidth="457"height="150"border="1"><tr><tdwidth="59"><divalign="right">姓名：</div></td><tdwidth="382"><formid="form1"name="form1"method="post"action=""><label><inputname="姓名"type="text"id="姓名"value="請輸入您的姓名"maxlength="18"/></label></form></td></tr><tr><td><divalign="right">郵件：</div></td><td><formid="form2"name="form2"method="post"action=""><label><inputname="郵件"type="text"id="郵件"value="請輸入您的郵件地址"/></label></form></td></tr><tr><td><divalign="right">網(wǎng)址：</div></td><td><formid="form3"name="form3"method="post"action=""><label><inputtype="text"name="網(wǎng)址"id="網(wǎng)址"/></label></form></td></tr><tr><td><divalign="right">留言：</div></td><td><formid="form4"name="form4"method="post"action=""><label><textareaname="留言"id="留言"cols="45"rows="5"></textarea></label></form></td></tr><tr><tdcolspan="2"><formid="form5"name="form5"method="post"action=""><divalign="center"><inputtype="submit"name="提交"id="提交"value="提交"/><inputtype="reset"name="提交2"id="提交2"value="重置"/></div></form></td></tr></table>【效果與代碼】：制作用戶留言頁<inputtype="submit"name="提交"id="提交"value="提交"/>

<inputtype="reset"name="提交2"id="提交2"value="重置"/>【步驟7】：最后，對按鈕間的距離進行調(diào)整，可以采用空格符 進行調(diào)整；【按鈕距離沒調(diào)整前】【按鈕距離調(diào)整后】制作用戶留言頁有邊框：<tablewidth="457"height="150"bor