（中职）网页设计与制作项目八 应用网页表单 任务一案例.docx

《（中职）网页设计与制作项目八 应用网页表单 任务一案例.docx》由会员分享，可在线阅读，更多相关《（中职）网页设计与制作项目八 应用网页表单 任务一案例.docx（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、（中职）网页设计与制作项目八 应用网页表单 任务一案例项目八 应用网页表单任务一 学会制作表单在网站制作中，我们经常需要提供用户注册登录的功能，那么网站的用户注册页面是如何制作的呢？我们今天一起制作一个简单的会员注册页面，让大家了解如何使用文本字段、密码域、文本区域、单选按钮等表单对象制作用户注册页面，如图8-15所示。图8-15 会员注册页面制作用户注册页面的具体操作步骤如下：第一步：启动Dreamweaver软件，新建html，在页面第一行输入“注册会员”，第二行插入表格，调整表给为我们需要的格式，在左方表格，依次输入“用户名：”、“输入密码：”等信息，形成模板，以便我们接着添加表单，如图

2、8-16所示。图8-16 输入表格和文字第二步：将光标定位到“用户名：”右侧的表格中，点击插入表单，完成表单的插入。如图8-17所示8-17 在表格中插入表单 第三步：将光标定位到红色虚线框中，选择插入工具栏的 “文本字段”，出现灰色实线框，单击，在页面下方出现属性面板，设置“字符宽度”为25，“类型”为单行，“初始值”为“”，如图8-18所示。图8-18 “用户名”文本字段的设置 第四步：按照上面的方法，在“输入密码”和“密码确认”右侧表格插入“表单”和“文本字段”，单击文本字段后，在属性中设置“字符宽度”为25，“类型”为“密码”，“初始值”为空，如图8-19所示。图8-19 输入密码和密

3、码确认的设置 第五步：在性别右侧表格插入表单，在插入工具栏单击“单选按钮”，设置“标签”为“男”，再插入第二个“单选按钮”，“标签”为女。单击第一个单选按钮，出现属性面板，设置“初始状态”为“已勾选”，如图8-20所示。图8-20 性别的设置第六步：在出生年月右侧表格中插入表单，点击插入菜单栏的，插入文本字段，设置文本字段属性中“字符宽度”为4，“最多字符数”为4，如图8-21所示。输入文字“年”，完成年份的输入。然后点击“选择（列表/菜单）”，输入ID和标签后完成选择（列表/菜单）的插入。在属性面板中设置“类型”为菜单，点击“列表值”，在弹出的窗口中添加列表值，如图8-22所示。最后输入文字

4、“月”。图8-21 年份的设置图8-22 列表值的添加第七步：在“喜爱项目”右侧表格中，插入表单，点击插入工具栏下的“复选框”，在弹出的窗口中“标签”一栏写入“Cosplay盛典”，完成复选框的插入。接着使用同样的方法，依次插入“动画片”、“漫画”、“其他”，最后的效果如图8-23所示。图8-23 喜爱项目 第八步：在联系地址右侧表格中，插入表单，点击插入工具栏下的文本区域按钮，插入文本区域。设置属性面板中“字符宽度”为20，行数为5，如图8-24所示。图8-24 联系地址的设置第九步：在个人上传简历右侧表格中，插入表单，点击表单中的“按钮”，设置值为“选择文件”，如图8-25所示。图8-25

5、 上传个人简历的设置第十步：在验证码右侧表格中，插入表单，点击插入菜单栏的，在属性面板中设置文本域“yang”，字符宽度为“25”如图8-26所示。完成文本域的插入后，加入验证码的图片。图8-26 验证码的设置第十一步：在最下面的表格中，插入表单，点击插入工具栏下的“按钮”，依次插入两个按钮。此时两个按钮都为提交，点击第二个按钮，在属性面板设置“动作”为“重设表单”，按钮即变为重设，如图8-27所示。两个按钮插入完成后，在最后的表格空白处单击，在表格属性面板中，将“水平”设为“居中对齐”，如图8-28所示。图8-27 重置按钮的设置图8-28 将表格设为水平居中感谢您的支持与使用如果内容侵权请联系删除仅供教学交流使用