任务二制作用户留言网页

网站建设与维护项目三制作表单网页CONTENTS目录Part1使用表单Part2制作用户留言网页02

任务二

制作用户留言网页

制作用户留言页在掌握了表单的基础认知后，现结合认知进行用户留言页的制作，将表单知识实践起来！首先，我们得为我们的表单策划一下该有什么功能，用什么形式表现。在这个示例中，将制作一个比较简单的留言表单。表单需要具备如下：•

名称•电子邮件网站地址留言框•提交按钮【设计草图示】制作用户留言页文本框文本区域按钮页面制作元素分析：制作用户留言页留言页面制作form标记出现在任何一个表单窗体的开始，其功能是设置表单的基础数据。使用form标记的语法格式如下所示。<formaction=""method="post"enctype="application/x-www-form-urlencoded"name="form1"target="_parent">name：表单的名字；method：数据的传送方式action：处理表单数据的页面文件enctype：传输数据的MIME类型target：处理文件的打开方式。制作用户留言页留言页面制作【步骤1】：新建一个HTML空白页，点击插入--表格，在跳出的表格编辑页面，选择表格的行数与列数等元素，在设计页面，可以对表格的大小进行拖拉调整；。留言页面我们可以利用表格+表单的结合方式进行制作：【插入表格】【表格编辑器】【调整表格大小】制作用户留言页【步骤2】：根据前面的留言页草图，在表格内依次填入文本文字，在放置按钮一行中，因为要放置两个按钮，考虑到，视觉效果，选中两个单元格，右键单击，在跳出的选择项中，选择表格--合并单元格，或使用快捷键（Ctrl+alt+m）。对单元格进行合并；。【合并单元格】制作用户留言页【步骤3】：对文本也进行对齐设置，完成后，在另一单元格内添加相应的表单元素，如草图规划的，姓名+邮件+网址，三项需要添加的表单元素是文本域，点击“插入”--“表单”--“文本域”；。【对齐文本】【插入文本域】制作用户留言页【步骤4】：在跳出的文本域标签编辑器中，填好ID与标签名称，插入完成后，可以在属性栏中，进行进一步的细化文本域，如添加初始值，文本域类型调整等；依次完成文本域的插入；。【文本域编辑器】【文本域属性栏】制作用户留言页<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">网址：</div></td><td><formid="form3"name="form3"method="post"action=""><label><inputtype="text"name="网址"id="网址"/></label></form></td></tr><tr>..........</table>【效果与代码】：制作用户留言页【步骤5】：完成文本域的插入后，进行留言栏的文本区域元素插入，点击“插入”--“表单”--“文本区域”，在出现的标签编辑器填写好ID与标签的名字，即完成文本区域的插入；【插入文本区域】【文本区域编辑器】【文本域插入效果】制作用户留言页【步骤6】：，点击“插入”--“表单”--“按钮”，插入按钮后，选中按钮，右键点击调整按钮的位置，并在属性栏中选择按钮的值与动作，即可完成按钮的插入。【插入按钮】【按钮对齐设置】【按钮属性设置栏】制作用户留言页<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">网址：</div></td><td><formid="form3"name="form3"method="post"action=""><label><inputtype="text"name="网址"id="网址"/></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】：最后，对按钮间的距离进行调整，可以采用空格符 进行调整；【按钮距离没调整前】【按钮距离调整后】制作用户留言页有边框：<tablewidth="457"height="150"bor