dreamweaver第六单元

Dreamweaver网页制作第六单元制作“访客信息”网页主编：王树平副主编：杜大志王润泉目录上一页下一页退出任务描述：前面学习了网页制作的相关知识，已经知道，浏览者作为网站的用户，可以从网站了解相关信息，但是网站管理员如何通过网页获得浏览者的信息呢？在这个单元当中，将介绍使用表单来获得信息的基本方法，制作一个用于和用户进行交互的“访客信息”网页，效果如下图所示。第六单元制作“访客信息”网页目录上一页下一页退出第六单元制作“访客信息”网页任务一插入表单任务二检查表单任务三使用代码制作表单网页目录上一页下一页退出第六单元制作“访客信息”网页任务一插入表单任务描述：在页面中插入表单及表单元素制作“访客信息”页面。任务分析：表单是网站与用户之间沟通的桥梁，其应用非常广泛，如制作访客信息、论坛、留言板、用户注册和在线交易等类型的网页。有了表单，网站不仅是信息提供者，同时也是信息获取者。因此，应用表单可以与Web站点的访问者进行交互。本任务通过向网页插入一个表单，然后使用表格对“访客信息”的各个表单元素进行布局，制作一个“访客信息”页面，学习表单页面制作的基本方法。目录上一页下一页退出任务一插入表单自己动手：1．建立本栏目目录结构。所在路径文件/文件夹的名字说明D:\mysite\bbsbbs.html“访客信息”页面sed.html提交后显示的页面bbsimages存放“访客信息”栏目中需要的图片本栏目目录结构如下表所示：目录上一页下一页退出任务一插入表单2．创建表单。打开“bbs.html”页面，修改页面标题并设置“页面属性”。将“插入”栏切换到“表单”类别。“表单”类别包含用于创建表单和插入表单元素的按钮，当鼠标指针指向一个按钮时，会出现相应的提示信息。目录上一页下一页退出任务一插入表单表单插入的表单在文档窗口中以红色虚线表示。如果没有看到红色虚线框,如何让其显示呢?目录上一页下一页退出任务一插入表单在表单的虚线框中单击，插入一个11行２列的表格，设置表格属性,在第一列单元格中填写内容，此时页面如下图所示:目录上一页下一页退出3．设置表单属性选中表单后，在表单“属性”面板设置动作为sed.html，其他保持默认值。任务一插入表单“表单”属性面板选项介绍选择表单的方法：单击表单轮廓线，或从文档窗口左下角的标签选择器中选择“form”标签。目录上一页下一页退出任务一插入表单4．插入表单元素切换“插入”栏到“表单”类别，工具栏中按钮如下图所示：表单文本字段隐藏域文本区域复选框单选按钮单选按钮组列表/菜单跳转菜单图像域文件域按钮标签字段集各按钮功能简介目录上一页下一页退出任务一插入表单A.插入“留言标题”文本字段。选中“留言标题”文本字段，在“属性”面板中设置文本字段名称为“title”，“初始值”文本框中输入“请在这里输入留言标题！”。B.插入“留言人姓名”文本字段”。文本字段名称文本字段“属性”面板参数介绍目录上一页下一页退出C.插入单选按钮。在“属性”面板中，分别设置三个单选按钮的属性。下图所示为“帅哥”单选按钮属性设置。D.插入“列表/菜单”。任务一插入表单单选按钮“属性”面板参数介绍目录上一页下一页退出E.插入“单选按钮组”。任务一插入表单“单选按钮组”对话框选项介绍目录上一页下一页退出F.插入“自定义头像”文件域。插入文件域后，页面及文件域属性如下图所示。文件域“属性”面板参数介绍任务一插入表单目录上一页下一页退出G.插入“电子邮件”文本字段。H.插入“个人网站”文本字段。I.插入复选框。单击“插入”栏“表单”类别中的“复选框”按钮，弹出“输入标签辅助功能属性”对话框，在“标签文字”文本框中输入“看书”。任务一插入表单目录上一页下一页退出在“属性”面板中，设置复选框的属性，如下图所示。按照同样的方法再添加5个复选框，并依次输入“体育”、“购物”、“上网”、“电影”和“其他”等不同的标签文字，把各复选框的“选定值”设为不同的值，生成一组名称均为“checkbox1”复选框，如下图所示。设置复选框的“选定值”时要注意什么？任务一插入表单目录上一页下一页退出任务一插入表单J.插入文本域并设置属性。K.插入按钮。标准表单按钮的种类和作用分别是什么？目录上一页下一页退出任务总结：任务一插入表单1．插入表单及表单属性的设置。2．插入表单元素及表单元素属性的设置。3．表单的作用。4．通常“访客信息”只是网页中的一小部分，表单一般都是插入到布局表格的一个单元格内，而不是将整个页面的布局表格都插入到表单中。一个表单页面制作完成后，还需要后台处理程序的协助才能完成信息的互动任务。表单有两个重要组成部分，一是描述表单的HTML源代码，二是用于处理用户在表单域中输入信息的服务器端应用程序，如“ASP”、“CGI”等。本单元仅介绍前一部分，即如何利用表单及相关标记生成用户界面。目录上一页下一页退出举一反三：任务一插入表单1．分析如图所示的“会员资料登记”页面中有哪些表单元素。A.启发思路：常用的表单元素有：文本框、密码框、单选按钮、复选框、按钮等。B.分组完成任务。目录上一页下一页退出2．将本单元“举一反三”文件夹中的网页“practice6-1.html”拷贝到D盘根目录，将表单中的“单选按钮组”修改为“列表/菜单”元素，“列表/菜单”元素修改为“单选按钮组”，并使其具有相同的功能。A.启发思路：多个单选按钮在同一页面中成组使用时，这些单选按钮必须使用相同的名称，以确保只能选中其中的一个。用户可以从列表中选择多项内容，但只能从菜单中选择一项。B.分组完成任务。任务一插入表单目录上一页下一页退出作业：1．利用本单元所学的知识，制作个人网站的“个人简介”网页“practice6-2.html”，效果如下图所示。要点提示：首先插入表单，然后在表单中插入8行2列的表格，并设置表格属性，之后插入表单元素。任务一插入表单目录上一页下一页退出任务二检查表单任务描述：检验“访客信息”栏目中表单输入数据的正确性。任务分析：用户在表单中输入内容时，可能会输入各种各样的数据，其中有些可能是无效的，为了避免这些无效的数据提交到后台服务器，可以使用“检查表单”验证用户输入的正确性。本任务将对“访客信息”表单中的“留言人姓名”和“电子邮件”中输入的内容进行验证。首先验证一个“文本域”的内容是“必须的”，然后验证一个“文本域”的内容必须符合电子邮件地址。通过设置文本域的验证规则，来验证用户输入的内容是否有效，如果用户输入的内容不符合规则，则给出错误提示。第六单元制作“访客信息”网页目录上一页下一页退出自己动手：1．验证文本内容为“必需的”。运行Dreamweaver8，打开“bbs.html”页面，选择菜单栏“窗口”菜单下的“行为”选项，在面板组添加“行为”面板。单击“bbs.html”页面中的“提交”按钮，然后在“行为”面板上单击“添加行为”按钮，在弹出的下拉菜单中选择“检查表单”选项，打开“检查表单”对话框，如下图所示。选中此复选框任务二检查表单各属性选项有什么作用？目录上一页下一页退出按下F12键，预览“bbs.html”页面。完成表单中各选项的数据输入，把“留言人姓名”文本框中的内容全部删除，单击“提交”按钮，会弹出如下图所示提示框，提示输入的信息有误，要求“留言人姓名”文本框中必须输入数据而不能为空。任务二检查表单目录上一页下一页退出2．验证文本内容必须符合“电子邮件地址”打开“检查表单”对话框。由于“电子邮件”文本域的名称为“Email”，所以在“检查表单”对话框的“命名的栏位”列表框中，选择文本“Email”在表单“form1”，然后选中“可接受”中的“电子邮件地址”单选按钮，如下图所示，设置完成后单击“确定”按钮，保存文件。选中电子邮件地址任务二检查表单目录上一页下一页退出任务小结1.了解检查表单的作用。2.验证文本内容为“必需的”。3.验证文本内容必需符合“电子邮件地址”。任务二检查表单目录上一页下一页退出举一反三利用本单元所学的知识，制作个人网站的“用户登录”网页“practice6-3.html”，效果如下图所示。设置验证规则，要求用户必须输入用户名和密码，并且其中密码必须是数字格式，若不符合要求，则显示错误提示信息。任务二检查表单目录上一页下一页退出作业：1．总结“检查表单”行为可以检查的表单元素有哪些。2．在运行“检查表单”时，必须先单击“提交”按钮吗？任务二检查表单1．启发思路：使用“检查表单”对话框完成2．分组完成任务。目录上一页下一页退出任务三使用代码制作表单网页任务描述：用代码设计表单页面。任务分析：当用户浏览此表单页面时，可以向网页中输入数据，单击其中的“提交”按钮，可以把输入的数据发送到后台服务器。本任务要求在Dreamweaver8的“代码”视图中使用HTML语言设计表单页面，添加“文本字段”、“单选按钮”、“复选框”等表单元素。第六单元制作“访客信息”网页目录上一页下一页退出自己动手：1．使用form标签制作一个表单。在D盘新建一个名为“BD”的文件夹，将光盘中本单元素材“HTML”文件夹中的“send.html”文件拷贝到新建的文件夹中。然后运行Dreamweaver8，在“BD”文件夹中新建一个网页文件，命名为“email.html”。切换到“代码”视图，在页面body和/body之间插入表单“form1”的源代码如下。任务三使用代码制作表单网页formaction=send.htmlname=form1id=form1!--其中的send.html文件在素材文件夹中--〉/form表单标签格式目录上一页下一页退出2．添加文本字段和单选按钮在表单“form1”中添加文本字段和单选按钮后预览效果如下：任务三使用代码制作表单网页目录上一页下一页退出在上文代码的form……和/form之间添加如下代码。pto:学海无涯/ppfrom:inputtype=textname=usernamesize=20value=您的大名/pp性别：男/pinputtype=radioname=sexvalue=男男inputtype=radioname=sexvalue=女女/p文本字段语句格式单选按钮的语句格式任务三使用代码制作表单网页目录上一页下一页退出3．添加下拉式菜单在表单“form1”中添加下拉菜单后预览效果如下图所示。任务三使用代码制作表单网页目录上一页下一页退出在上一步所添加代码的后边添加下面代码：p学历:selectname=eduoptionselected初中/初中以下/optionoption高中/中专/技校/optionoption大专/optionoption本科/optionoption研究生/optionoption博士/博士以上/option/select/p菜单或列表语句格式任务三使用代码制作表单网页目录上一页下一页退出4．添加复选框在表单“form1”中添加复选框后预览效果如下图所示。在上一步所添加代码的后边添加下面代码：p兴趣：inputtype=checkboxname=interstvalue=看书看书inputtype=checkboxname=interstvalue=体育体育inputtype=checkboxname=interstvalue=购物购物inputtype=checkboxname=interstvalue=上网上网inputtype=checkboxname=interstvalue=其他其他/p复选框语句格式任务三使用代码制作表单网页目录上一页下一页退出5．添加多行文本区域在表单“form1”中添加多行文本区域后预览效果如下图所示。在上一步所添加代码的后边添加下面代码：ptextareaname=commentrows=8cols=60hello~/textareap多行文本区域语句格式任务三