Dreamweaver网页制作幻灯片.ppt

Dreamweaver网页制作 第六单元 制作“访客信息”网页 任务三 使用代码制作表单网页 任务描述：用代码设计表单页面。 任务分析：当用户浏览此表单页面时，可以向网页中输入数据，单击其中的“提交”按钮，可以把输入的数据发送到后台服务器。本任务要求在Dreamweaver 8的“代码”视图中使用HTML语言设计表单页面，添加“文本字段”、“单选按钮”、“复选框”等表单元素。 第六单元 制作“访客信息”网页 　　 自己动手： 　　 1．使用form标签制作一个表单 。　　 　　 在D盘新建一个名为“BD”的文件夹，将光盘中本单元素材“HTML”文件夹中的“send.html”文件拷贝到新建的文件夹中。 然后运行Dreamweaver 8，在“BD”文件夹中新建一个网页文件，命名为“email.html”。切换到“代码”视图，在页面body和/body之间插入表单“form1”的源代码如下。 任务三 使用代码制作表单网页 form action=send.html name=form1 id=form1 !--其中的send.html文件在素材文件夹中--〉 /form 表单标签格式 2．添加文本字段和单选按钮 在表单“form1”中添加文本字段和单选按钮后预览效果如下： 任务三 使用代码制作表单网页 在上文代码的form……和/form之间添加如下代码。 pto:学海无涯/ p pfrom: input type=text name=username size=20 value=您的大名/ p p 性别： 男/p input type=radio name=sex value=男男 input type=radio name=sex value=女女/p 文本字段语句格式 单选按钮的语句格式 任务三 使用代码制作表单网页 3．添加下拉式菜单 在表单“form1”中添加下拉菜单后预览效果如下图所示。 任务三 使用代码制作表单网页 在上一步所添加代码的后边添加下面代码： p学历: select name=edu option selected初中/初中以下 /option option高中/中专/技校 /option option大专 /option option本科 /option option研究生 /option option博士/博士以上 /option /select/p 菜单或列表语句格式 任务三 使用代码制作表单网页 4．添加复选框 在表单“form1”中添加复选框后预览效果如下图所示。 在上一步所添加代码的后边添加下面代码： p兴趣： input type=checkbox name=interst value=看书看书 input type=checkbox name=interst value=体育体育 input type=checkbox name=interst value=购物购物 input type=checkbox name=interst value=上网上网 input type=checkbox name=interst value=其他其他 /p 复选框语句格式 任务三 使用代码制作表单网页 5．添加多行文本区域 在表单“form1”中添加多行文本区域后预览效果如下图所示。 在上一步所添加代码的后边添加下面代码： p textarea name=comment rows=8 cols=60hello~ /textarea p 多行文本区域语句格式 任务三 使用代码制作表单网页 6．添加“发送”和“重置”按钮 在表单“form1”中添加“发送”和“重置”按钮后预览效果如下图所示。 在上一步所添加代码的后边添加下面代码： p input type=submit value=发送 input type=reset value=重置 /p “发送”和“重置”按钮 语句格式 任务三 使用代码制作表单网页 任务小结 1．使用HTML代码在网页中添加表单。 2．使用HTML代码在网页中添加文本字段。 3．使用HTML代码在网页中添加单选按钮。 4．使用HTML代码在网页中添加下拉式菜单。 5．使用HTML代码在网页中添加复