1、第第1010章章 表单表单本章学习要点：本章学习要点：1 1创建表单创建表单 2 2插入表单对象插入表单对象 3 3表单及表单对象属性的设置表单及表单对象属性的设置第第1010章章 表单表单 网页设计中的交互性是用户与服务器之间的交互，通过页面设计为用户提供一个平等的交流平台，交互体验设计成为新媒体网页吸引用户的重要因素，这个功能主要由表单来实现。表单的作用是从访问网站的用户处获得信息，如注册、登录等信息。10.1 10.1 认识网页中的表单认识网页中的表单 表单是一种特殊的网页容器标签，是Internet用户同服务器进行信息交互的最重要的控件，它从Web用户那里收集信息，不仅可以收集用户访问
2、的浏览路径，还可以收集用户填写的个人资料。表单支持客户端/服务器关系中的客户端。用户在Web浏览器（客户端）的表单中输入信息后，单击【提交】按钮，这些信息即被发送到服务器端，由服务器端脚本或应用程序对这些信息进行处理。服务器向用户（客户端）返回所请求的信息或基于表单内容执行某些操作，以此进行响应，如图所示。10.1 10.1 认识网页中的表单认识网页中的表单表单服务器数据库数据表 10.2 10.2 创建表单创建表单10.2.1 创建表单创建表单 将鼠标光标置于目标位置，选择【插入】/【表单】/【表单】命令，即可在鼠标光标所在行插入一个空白表单。在设计视图中，表单轮廓会以红色虚线表示，如图所示
3、。10.3.1 10.3.1 插入文本域插入文本域 表单中的文本域分为文本域和文本区域，分别用于在表单中插入一个可以输入一行或多行文本的表单元素。将鼠标光标置于表单域中，选择【插入】/【表单】/【文本域】命令，弹出【输入标签辅助功能属性】对话框，在该对话框中可以设置表单对象的属性，如图所示。10.3 10.3 添加并设置表单对象的属性添加并设置表单对象的属性 属性设置完成后，单击【确定】按钮即可以在表单中插入一个文本域，如图所示。10.3 10.3 添加并设置表单对象的属性添加并设置表单对象的属性 在文本域中可以输入任何类型的文本、数字和字母，也可以在文本域【属性】检查器的【类型】中选择【密码
4、】单选按钮，对文本进行加密显示；如果需要显示多行文本，则可以在文本域【属性】检查器的【类型】中选择【多行】单选按钮，如图所示。10.3 10.3 添加并设置表单对象的属性添加并设置表单对象的属性10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 1插入单选按钮 单选按钮是一种选择性表单对象，可以进行数据的选择，但一次只能选择一个选项，当用户选中其中一个单选按钮时，其他单选按钮将自动转换为未选中状态。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【单选按钮】命令，即可以在表单中插入一个单选按钮，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入
5、单选按钮和单选按钮组 选中单选按钮，可以设置单选按钮属性，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 选中单选按钮，可以设置单选按钮属性，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 2插入单选按钮组 当表单中有多组单选按钮需要使用时，使用单选按钮组承载不同组的单选按钮。将鼠标光标置于表单的指定位置，选择【插入】/【表单】/【单选按钮组】命令，弹出【单选按钮组】对话框，在该对话框可以设置单选按钮组的属性，如图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 插入的单选按钮组如
6、左图所示。10.3.2 10.3.2 插入单选按钮和单选按钮组插入单选按钮和单选按钮组 10.3.3 10.3.3 插入复选框和复选框组插入复选框和复选框组1插入复选框 复选框表单对象用于设置预定义的选择对象，用户可以单击复选框按钮进行选择。复选框对每个单独的响应进行“打开”和“关闭”状态切换，因此，用户可以从复选框组中同时选择多个选项。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【复选框】命令，即可以表单中插入一个复选框，选中复选框，可以设置复选框的属性，如下图所示。10.3.3 10.3.3 插入复选框和复选框组插入复选框和复选框组【复选框】属性检查器插入复选框2插入复选框组
7、当有多组复选框需要使用时，使用复选框组承载不同的复选框。将鼠标光标置于表单的指定位置，选择【插入】/【表单】/【复选框组】命令，弹出【复选框组】对话框，在该对话框可以设置复选框组的属性，如图所示。10.3.3 10.3.3 插入复选框和复选框组插入复选框和复选框组10.3.4 10.3.4 插入列表插入列表/菜单菜单 列表/菜单是一种重要的表单对象，用户可以在列表或菜单中方便地选择其中某一个项目，在提交表单时，将选择的项目值传送到服务器中。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【选择（列表/菜单）】命令，在表单中插入一个空白【列表/菜单】表单对象，选中该对象，设置属性如图所示
8、。单击【列表值】按钮，可以设置列表值属性。10.3.4 10.3.4 插入列表插入列表/菜单菜单 当选择【类型】中的【列表】时，【高度】和【选定范围】可用，设置插入列表的【高度】为“3”，并复选【允许多选】选项，插入的列表如图所示。10.3.4 10.3.4 插入列表插入列表/菜单菜单 跳转菜单是一种带链接属性的选项弹出菜单，当单击该菜单时，即可跳转到指定的站内文件或其他网站的Web页面。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【跳转菜单】命令，弹出【插入跳转菜单】对话框，设置跳转让菜单属性如图所示。10.3.5 10.3.5 插入跳转菜单插入跳转菜单10.3.5 10.3.5
9、 插入跳转菜单插入跳转菜单插入的跳转菜单如图所示。10.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 表单按钮用于控制表单操作。使用表单按钮能够将输入表单的数据提交到服务器或重置表单，还可以将其他已经在脚本中定义的处理任务分配给按钮。表单按钮可分为标准表单按钮和图片式表单按钮，即图像域。1插入按钮 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【按钮】命令，即在表单中插入一个标准表单按钮，选中表单按钮，属性如图所示。10.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 若想使用按钮图像作为提交按钮，就要使用图像域。图像域只能用作表单的提交按钮，而不能用于重置按钮。1
10、0.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【图像域】命令，在弹出的【选择图像源文件】对话框中选择所的图像，单击【确定】按钮，即在表单中插入一个图像域，选中插入的图像域，属性设置如图所示。10.3.6 10.3.6 插入按钮和图像域插入按钮和图像域 文件域又称为文件上传域，允许用户将本机上的文件上传到服务器。文件域要求使用POST方法将文件从浏览器传输到服务器，该文件被发送到表单的操作域中所指定的地址。10.3.7 10.3.7 插入文件域插入文件域 10.3.7 10.3.7 插入文件域插入文件域 将鼠标光标置于表单域指
11、定位置，选择【插入】/【表单】/【文件域】命令，即可在表单中插入文件域。选中文件域，设置属性如图所示。10.3.8 10.3.8 插入隐藏域插入隐藏域 隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域不可见。当表单被提交后，隐藏域会将信息用设置时定义的名称和值发送到服务器端。10.3.8 10.3.8 插入隐藏域插入隐藏域 将鼠标光标置于表单域指定位置，选择【插入】/【表单】/【隐藏域】命令，即可在表单中插入隐藏域。选中隐藏域，属性如图所示。具体操作步骤：1新建网页，输入文本“客户信息反馈表”，将文件另存为“examplechapter10fankuibiaoindex.h
12、tml”。2插入表单。将鼠标光标置于“客户信息反馈表”文本的下面，选择【插入】/【表单】/【表单】命令，在网页中插入一个空白表单。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表3在表单中插入表格。将鼠标光标置于表单域中，选择【插入】/【表格】命令，在表单中插入一个【边框粗细】为“1”、【单元格间距】和【单元格边距】均为“2”、【表格宽度】为“80%”的6行4列的表格，设置表格名称为“fkxx”，并居中对齐，如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表4布局表格。根据需要合并单元格，并调整单元格宽度和高度，输入文本信
13、息，如图所示。设置表格列宽分别为“15%”、“35%”、“15%”和“35%”，设置“购物途径”下面一行的行高为“150”，“您的建议”行高为“90”，其他行行高均为“40”。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表5插入表单元素。（1）将鼠标光标置于“您的名字”后的单元格中，选择【插入】/【表单】/【文本域】命令，插入一个文本域，设置文本域名称为“mz”，【类型】选择【单行】单选按钮。（2）将鼠标光标置于“性别”后的单元格中，分别插入两个单选按钮，设置两个单选按钮的名称均为“xb”，标签文本分别为“男”和“女”。选中标签为“女”的单选按钮，设置【初始状
14、态】为“已勾选”。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（3）将鼠标光标置于“年龄”后的单元格中，插入一个菜单/列表，设置【选择】名称为“nl”，列表值如图所示。（4）将鼠标光标置于“所购商品”后的单元格中，选择【插入】/【表单】/【选择（列表/菜单）】命令，插入一个列表/菜单，设置【选择】名称为“sp”，列表值如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（5）将鼠标光标置于“购物途径”行的下面右侧的单元格中，选择【插入】/【表
15、单】/【单选按钮组】命令，插入一个单选按钮组，设置属性如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（6）将鼠标光标置于“问题的类型”行的下面右侧的单元格中，选择【插入】/【表单】/【复选框组】命令，插入一个复选框组，设置属性如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（7）将鼠标光标置于“您的建议”后的单元格中，选择【插入】/【表单】/【文本区域】命令，插入一个文本区域，设置【文本域】名称为“jy”，【字符宽度】为“60”，【行数】为“6”，【类型】选择【多行】单选按钮。10.3.9 10.3.9 课堂
16、案例课堂案例制作客户信息反馈表制作客户信息反馈表10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（8）将鼠标光标置于底部单元格中，选择【插入】/【表单】/【按钮】命令，分别插入两个按钮，设置【动作】分别为【提交表单】和【重设表单】，如图所示。6创建CSS样式（1）创建表格CSS样式。选中整个表格，选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，为ID为“fkxx”的表格创建CSS规则，设置属性如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表（2）创建标题CSS样式。新建一个名为“bt”的基本类，设置属性如图所示
17、。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表7应用标题样式。选中“客户信息反馈表”标题文本，在【CSS样式】面板中右键单击“.bt”样式，在弹出的快捷菜单中选择【应用】。整个表单显示效果如图所示。10.3.9 10.3.9 课堂案例课堂案例制作客户信息反馈表制作客户信息反馈表10.4 10.4 使用使用SprySpry验证表单验证表单 Spry表单验证允许用户建立丰富网页的一套JavaScript和CSS库，用户可以使用这个框架显示XML数据，创建交互效果。通过Spry验证，能够实现对表单元素内容的检测，以确保将正确的信息发送到服务器。10.4.1 10.
18、4.1 使用使用SprySpry验证文本域验证文本域 Dreamweaver CS6提供了一个Ajax的框架Spry，Spry内置表单验证功能对于初学者来说非常实用和方便。Spry验证文本域构件是一个文本域，该域用于在站点访问者输入文本时判断文本域的合法或非法状态，例如有效或无效等。验证文本域可以检测多个状态，用户可以在【属性】检查器中根据检查结果来设置这些状态。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证文本域】命令，即在表单中插入一个Spry验证文本域，选中该文本域，可以设置Spry验证文本域属性，如图所示。10.4.1 10.4.1 使用使用SprySpry验证
19、文本域验证文本域使用Spry验证文本域的表单如图所示。10.4.1 10.4.1 使用使用SprySpry验证文本域验证文本域 与Spry验证文本域类似，都可以用于进行输入信息的判断，当Spry验证文本区域中必须输入数据，但用户没有输入任何信息时，可根据其【属性】检查器的【提示】文本框中的内容进行提示。10.4.2 10.4.2 使用使用SprySpry验证文本区域验证文本区域 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证文本区域】命令，即在表单中插入一个Spry验证文本域，选中该文本区域，设置属性如图所示。10.4.2 10.4.2 使用使用SprySpry验证文本
20、区域验证文本区域 使用Spry验证文本区域的表单效果如图所示。10.4.2 10.4.2 使用使用SprySpry验证文本区域验证文本区域10.4.3 10.4.3 使用使用SprySpry验证复选框验证复选框 Spry验证复选框能够对用户选中复选框的行为进行验证，当用户选择复选框时，Spry验证复选框会显示合法或非法状态的复选框。10.4.3 10.4.3 使用使用SprySpry验证复选框验证复选框 将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证复选框】命令，即在表单中插入一个Spry验证复选框，选中Spry验证复选框，设置属性如图所示。10.4.3 10.4.3
21、使用使用SprySpry验证复选框验证复选框 如果需要对多个复选框进行验证，即验证复选框组，则可以在Spry验证复选框的蓝色区域内部再插入多个普通复选框及标签，并设置所有复选框的【ID】属性值相同。然后单击Spry验证复选框，选择【实施范围（多个）】单选按钮，复选【验证于】的【onBlur】属性，设置【最小选择数】和【最大选择数】属性值，如图所示。Spry验证选择能够对用户选择的下拉菜单项目进行合法性验证，验证选择有多个常用状态。将鼠标光标置于表单域的指定位置，选择【插入】/【表单】/【Spry验证选择】命令，即在表单中插入一个Spry验证选择对象。选中Spry验证选择对象，设置属性如图所示。
22、10.4.4 10.4.4 使用使用SprySpry验证选择验证选择使用Spry验证选择的表单效果如图所示。10.4.4 10.4.4 使用使用SprySpry验证选择验证选择10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单具体操作步骤：1打开素材文件“examplechapter10spryyzspryyanzheng.html”。2添加“用户昵称”Spry验证文本域。将鼠标光标置于“用户昵称”文本后，选择【插入】/【表单】/【Spry验证文本域】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“nc”，单击【确定】按钮。选中Spry验证文本域对象，设置属性
23、如图所示。3添加“电子邮箱”Spry验证文本域。将鼠标光标置于“电子邮箱”文本后，选择【插入】/【表单】/【Spry验证文本域】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“yx”，单击【确定】按钮。选中Spry验证文本域对象，设置属性如图所示。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单4添加Spry验证密码。将鼠标光标置于“登录密码”文本后，选择【插入】/【表单】/【Spry验证密码】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“mm”，单击【确定】按钮。选中Spry验证密码对象，设置属性如图所示。10.4.5 10.4.5 课堂案例课堂
24、案例制作用户注册表单制作用户注册表单5添加Spry验证确认。将鼠标光标置于“确认密码”文本后，选择【插入】/【表单】/【Spry验证确认】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“mmqr”，单击【确定】按钮。选中Spry验证确认对象，设置属性如图所示。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单6添加Spry验证复选框。将鼠标光标置于“我已阅读协议”文本前，选择【插入】/【表单】/【Spry验证复选框】命令，在弹出的【输入标签辅助功能属性】中设置【ID】为“OK”，单击【确定】按钮。选中Spry验证复选框对象，单击【必需（单个）】单选按钮。10.
25、4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单7添加按钮。将鼠标光标置于“我已阅读协议”文本的下一行，选择【插入】/【表单】/【按钮】命令，不设置任何属性，单击【确定】按钮。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单8保存文件。选择【文件】/【保存】命令，系统会弹出【复制相关文件】对话框，如图所示。单击【确定】按钮，将文件进行保存。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单9按下F12键预览网页，网页效果如图所示。10.4.5 10.4.5 课堂案例课堂案例制作用户注册表单制作用户注册表单第第11 11
26、章章 综合实训综合实训家具联盟网站家具联盟网站本章学习要点：本章学习要点：1 1视图的切换视图的切换 2 2网页的布局网页的布局 3 3制作网页主体制作网页主体 4 4CSSCSS层叠样式表的应用层叠样式表的应用11.1 11.1 实例目标实例目标 本例通过综合运用所学知识，以家具联盟网站为例制作一个综合性网站，使用户通过实践巩固所学知识，掌握网站的开发流程，并能结合PhotoShop、Flash等技术，熟练地使用Dreamweaver CS6进行网站的设计和开发。11.2 11.2 制作思路制作思路 本例包含了本教材大部分的知识点，通过综合运用这些知识，制作一个家具联盟网站。网站使用DIV+
27、CSS对页面进行布局，通过CSS对页面内容进行修饰和美化，从而制作出一个主题鲜明、布局合理、色彩丰富、效果美观的网站，如图所示。11.2 11.2 制作思路制作思路 11.3 11.3 制作过程制作过程11.3.1 11.3.1 创建站点及网页文件创建站点及网页文件1新建站点。启动Dreamweaver CS6，选择【站点】/【新建站点】命令，在打开对话框的【站点名称】中输入“Furniture Union”，在【本地站点文件夹】文本框中设置文件的根目录，单击【保存】按钮，如图所示。2新建网页文件。选择【文件】/【新建】命令，在打开的【新建文档】对话框中，选择【空白页】，【页面类型】选择【HT
28、ML】，单击【创建】按钮，如图所示。11.3 11.3 制作过程制作过程3保存网页文件。单击【文件】/【保存】命令，在打开的【另存为】对话框中，将文件保存到“Furniture Union”站点根文件夹下，设置文件名称为“index.html”。11.3 11.3 制作过程制作过程4新建文件夹。选择【文件】/【窗口】命令，打开【文件】面板，右键单击站点名称，在弹出的快捷菜单中选择【新建文件夹】，在站点根文件夹下生成一个名为“untitled”的空白文件夹，修改文件夹名称为“CSS”。11.3 11.3 制作过程制作过程5创建样式表文件。选择【文件】/【新建】命令，在打开的【新建文档】对话框中，
29、选择【空白页】，【页面类型】选择【CSS】，单击【创建】按钮。11.3 11.3 制作过程制作过程6保存样式表文件。单击【文件】/【保存】命令，在打开的【另存为】对话框中，将文件存储到“Furniture Union”站点根文件夹下名为“CSS”的文件夹下，设置文件名称为“format.css”。11.3 11.3 制作过程制作过程7附加样式表。打开“index.html”文件，选择【窗口】/【CSS】命令，在【CSS样式】面板中单击“附加样式表”按钮，在弹出的【链接外部样式表】对话框中设置【文件/URL】为“CSS/format.css”，【添加为】选择“链接”，单击【确定】按钮，如图所示。
30、11.3 11.3 制作过程制作过程本例的网页总体布局如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构1 插入DIV。（1）插入网页容器DIV。首先将鼠标光标置于目标位置，选择【插入】/【布局对象】/【DIV标签】命令，插入一个名为“box”的DIV。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（2）插入其他DIV。将鼠标光标置于“box”内部，分别插入名字分别为“logo”、“titl”、“aboutus”、“menu”、“searc”、“picBox”、“show”(包含嵌套DIV“list”和“
31、ifr”，“list”中包含嵌套DIV“m1”、“m2”和“m3”)、“center”、“news”、“scroll”、“link”和“bot”的DIV，如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构 11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构2创建DIV布局（1）新建ID为“box”的CSS规则。选中ID为“box”的DIV，选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，单击【CSS样式】面板底部的按钮，创建名为“#box”的ID CSS规则，在【规则定义】下拉列表框中 选择“CSS
32、/format.css”，单击【确定】按钮，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（2）新建ID为“logo”的CSS规则。选中ID为“logo”的DIV，创建名为“#logo”的ID CSS规则，创建方法如步骤（1），以下均相同。属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（3）新建“titl”ID样式。选中ID为“titl”的DIV，创建名为“#titl”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网
33、页结构布局网页结构(4)新建ID为“aboutus”的CSS规则。选中ID为“aboutus”的DIV，单击【CSS样式】面板底部的按钮，创建名为“#aboutus”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（5）新建ID为“menu”的CSS规则。选中ID为“menu”的DIV，创建名为“#menu”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（7）新建ID为“picBox”的CSS规则。选中ID为“picBox”的DIV，创建
34、名为“#picBox”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（8）新建ID为“line”的CSS规则。选中ID为“line”的DIV，创建名为“#line”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构(9)新建ID为“show”的CSS规则。选中ID为“show”的DIV，创建名为“#show”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构(10)
35、新建ID为“list”的CSS规则。选中ID为“list”的DIV，创建名为“#list”的ID CSS规则，属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构(11)新建“m1”、“m2”和“m3”CSS规则。设置三个DIV的属性值如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构(12)新建ID为“ifr”的CSS规则。选中ID为“ifr”的DIV，创建名为“#ifr”的ID CSS规则。属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网
36、页结构（13）分别创建ID为“center”、“news”和“scroll”的CSS规则。选中名为“center”的DIV，创建名为“#center”的ID CSS规则。属性设置如图所示。设置“news”和“scroll”【方框】的【width】属性值分别为“400px”和“300px”，其他属性与“center”DIV相同。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（14）新建ID为“link”的CSS规则。选中名为“link”的DIV，单击【CSS样式】面板底部的按钮，创建名为“#link”的 CSS规则。属性设置如图所示。11.3.2 11.
37、3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构（15）新建ID为“bot”的CSS规则。选中名为“bot”的DIV，单击【CSS样式】面板底部的按钮，创建名为“#bot”的CSS规则。属性设置如图所示。11.3.2 11.3.2 使用使用DIV+CSSDIV+CSS布局网页结构布局网页结构1定义网页整体样式。将鼠标光标置于文档窗口的空白处或单击标签选择器上的“body”标签，选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，创建“body”标签的CSS规则，属性设置如图所示。11.3.3 11.3.3 定义定义CSSCSS规则规则2定义链接样式。新建“a”标签的C
38、SS规则。属性设置如图所示。3定义图像边框样式。新建“img”标签的CSS规则，设置“img”标签【边框】的【Width】属性值增均为“0”。11.3.3 11.3.3 定义定义CSSCSS规则规则11.3.4 11.3.4 制作头部内容制作头部内容 1插入LOGO图标。将鼠标光标置于ID为“logo”的DIV中，选择【插入】/【图像】命令，在弹出的【选择图像源文件】对话框中选择images文件夹下的“logo.png”。2插入站点标语图像。将鼠标光标置于ID为“titl”的DIV中，插入名为“biaoyu.png”的图像。3设置联系信息。将鼠标光标置于ID为“aboutus”的DIV中，输入
39、“联系我们”、“关注我们”、“关于我们”三个段落文本；设置超级链接分别为“mailto:”、“guanzhu.html”和“guanyuwm.html”。11.3.4 11.3.4 制作头部内容制作头部内容 4插入菜单。将鼠标光标置于ID为“menu”的DIV中，选择【插入】/【Spry】/【Spry菜单栏】命令，在弹出的【Spry菜单栏】对话框中选择【水平】选项，编辑菜单项如图所示。11.3.4 11.3.4 制作头部内容制作头部内容 5编辑菜单样式。（1）设置菜单栏文本字体大小。选择【窗口】/【CSS样式】命令，在【CSS样式】面板中展开“SpryMenuBarHorizontal.css
40、”样式，双击ul.MenuBarHorizontal，在弹出的对话框中设置【类型】中的【Font-size】为“14px”。11.3.4 11.3.4 制作头部内容制作头部内容（2）设置菜单栏宽度及文本对齐方式。在【CSS样式】面板中栏双击“ul.MenuBarHorizontal li”样式，在弹出的对话框中设置【方框】中的【Width】属性值为“150px”；设置【区块】中的【Text-align】属性值为“center”。11.3.4 11.3.4 制作头部内容制作头部内容（3）设置链接样式。在【CSS样式】面板中选择“ul.MenuBarHoriaontal a:hover，ul.Me
41、nuBarHorizontal a:focus”，设置【Color】属性值为“#FFF”，【background-color】属性值为“#F00”。选择“ul.MenuBarHorizontal a.MenuBarItemHover,ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,ul.MenuBarHorizontal a.MenuBarSubmenuVisible”，设置【background-color】属性值为“#F00”。11.3.4 11.3.4 制作头部内容制作头部内容（4）设置“首页”文本样式。将鼠标光标置于“首页”菜单项中，在【属
42、性】检查器中设置ID为“l1”，新建“#box#menu#MenuBar1 li#l1”ID CSS规则，设置【背景】的【background-color】属性值为“#F00”。11.3.4 11.3.4 制作头部内容制作头部内容 6插入搜索表单。将鼠标光标置于ID为“search”的DIV中，选择【插入】/【表单】/【表单】命令，在指定位置插入一个表单，将鼠标光标置于表单中，插入一个【ID】为“ss”的单行文本域和属性【值】为“搜索”的提交按钮。7插入轮显广告。打开站点根文件夹下的“翻滚图像代码.txt”，依据提示将相应代码复制到网页指定位置。11.3.4 11.3.4 制作头部内容制作头部
43、内容 11.3.5 11.3.5 制作网页主体制作网页主体1插入鼠标经过图像。将鼠标光标置于ID为“m1”的DIV中，选择【插入】/【图像对象】/【鼠标经过图像】命令，在弹出的【插入鼠标经过图像】对话框中选择原始图像为“images/fanzhuantuxiang/gm.png”，鼠标经过图像为“images/fanzhuantuxiang/gm1.png”，按下时前往的URL选择“images/guangming/guangm.png”。用同样的方法在ID为“m2”的DIV中，插入原始图像为“images/fanzhuantuxiang/zy.png”鼠标经过图像为“images/fanzh
44、uantuxiang/zy1.png”按下时前往的URL为“images/zuoyou/zuoyou.jpg”的鼠标经过图像。在ID为“m3”的DIV中，插入原始图像为“images/fanzhuantuxiang/sy.png”鼠标经过图像为“images/fanzhuantuxiang/sy1.png”按下时前往的URL为“images/shuangye/shuangye.jpg”的鼠标经过图像。11.3.5 11.3.5 制作网页主体制作网页主体2设置改变属性行为。选中第一幅鼠标经过图像，选择【窗口】/【行为】命令，打开【行为】面板，单击【行为】面板上的“+”按钮，在弹出的快捷菜单中选择
45、【改变属性】行为，设 置 属 性 如 图 所 示。在【行 为】面 板 中 选 择 事 件 为“onMouseOver”。11.3.5 11.3.5 制作网页主体制作网页主体 用同样的方法设置其他两个鼠标经过图像的行为值为“url(images/zuoyou/zuoyou.jpg)”和“url(images/shuangye/shuangye.jpg)”11.3.5 11.3.5 制作网页主体制作网页主体3录入文本信息并设置列表。在ID为“center”、“news”和“scroll”的DIV中，分别输入文本信息，设置文本标题样式为【标题三】，段落文本设置成项目列表，并设置项目列表的超级链接，如
46、图所示。11.3.5 11.3.5 制作网页主体制作网页主体4设置滚动字幕。将鼠标光标置于“精品欣赏”下的列表中，在设计窗口左下角的【标签选择器】中选择“”标签，选择【插入】/【标签】命令，在打开的【标签选择器】中选择【HTML标签】下的“”标签，如图所示。11.3.5 11.3.5 制作网页主体制作网页主体 单击【插入】按钮，系统自动进入【拆分】窗口，在左侧的代码窗口中显示刚刚插入的“”标签，设置“”标签属性如图所示，单击【关闭】按钮，关闭【标签选择器】。11.3.5 11.3.5 制作网页主体制作网页主体 在ID为“link”和“bot”的DIV中分别插入友情链接和版权信息文本，并设置友情
47、链接的超级链接，如图所示。11.3.6 11.3.6 制作页脚内容制作页脚内容1打开“index.html”，将文件另存为“Templates/moban.dwt”，创建模板文件。2打开“moban.dwt”文件，选中ID为“aboutus”的DIV，选择【插入】/【模板对象】/【可编辑区域】命令，在打开的【新建可编辑区域】对话框中，设置【名称】为“func”，如图所示。11.4 11.4 制作网页模板制作网页模板3 用 同 样 的 方 法，分 别 在 I D 为“s h o w”、“center”、“news”和“scroll”的DIV中插入名称为“main”、“list1”、“list2”
48、、“list3”的可编辑区域，删除可编辑区域内容，如图所示。11.4 11.4 制作网页模板制作网页模板11.4 11.4 制作网页模板制作网页模板4应用模板。选择【文件】/【新建】命令，新建一个空白HTML网页，选择【窗口】/【资源】命令，打开资源面板，单击 按钮，在右侧列表中选择名“moban”的文件，单击面板底部的【应用】按钮，设置【不一致的区域名称】对话框，属性如图所示。将套用模板的网页另存为“guangming.html”。11.4 11.4 制作网页模板制作网页模板5编辑网页文件（1）编辑“func”区域。将鼠标光标置于名为“func”的可编辑区域内，选择【插入】/【图像】命令，在
49、打开的【选择图像源文件】对话框中，选择本地站点“images”文件夹下的“funcimg.gif”图像。11.4 11.4 制作网页模板制作网页模板（2）编辑“mian”区域 将鼠标光标置于名为“main”的可编辑区域内，插入一个2行4列的表格，设置【表格宽度】为“100%”，【边框粗细】、【单元格边距】、【单元格间距】均为“0”；在指定单元中，分别插入名为“guangm.png”、“chaji.jpg”、“shafa.jpg”和“shugui.jpg”的图像，并输入相应的文本，如图所示；新建一个名为“.fonta”的基本类，将其保存至“format.css”中，设置为“#666”；分别选中单
50、元格文本，右键单击“.fonta”样式，在弹出的快捷菜单中选择“应用”。11.4 11.4 制作网页模板制作网页模板11.4 11.4 制作网页模板制作网页模板（3）编辑“list1”区域 将鼠标光标置于名为“list1”的可编辑区域，插入一个4行2列的表格，设置【表格宽度】为“95%”，【边框粗细】、【单元格边距】、【单元格间距】均为“0”；将鼠标光标置于表格第一行的单元格中，设置单元格【高】为“6”，将鼠标光标置于表格第二行第一列，设置单元格【宽】为“5%”，【高】为“20”；11.4 11.4 制作网页模板制作网页模板（3）编辑“list1”区域选择【插入】/【图像】命令，在打开的【选择
