资源描述
2019/10/16,1,本章知识点和技能点：,利用布局视图、表格、层、框架进行页面布局的方法 创建表单的方法以及表单的提交与校验设置 Dreamweaver内置行为的应用,1,2019/10/16,2,一、网页布局定位,经过前面的学习，相信你已经掌握了基本的网页制作知识，可以独立制作一些较简单的网页了。 但仅仅这些知识还是远远不够的，因为你还不能解决对象的位置会随着浏览器窗口大小的变化而发生变的这个问题，下面我们将介绍网页的布局定位技术，从而实现对网页对象的精确控制。,2,2019/10/16,3,什么是网页布局定位？,网页布局定位，就是指把网页元素诸如文本、图片等按需要放在合适的位置，Dreamweaver提供了诸如布局视图、表格、框架、层等网页定位技术，掌握它们才能真正学到网页制作技术的精髓。 网页设计的思想和排版方式是需要网页制作者通过自己的灵感和艺术思想产生的。所以在制作网页前，制作者一般都要有一个设计的总体规划，然后才能按照规划的思想完成网页的制作。,3,2019/10/16,4,（一）、利用布局视图进行布局,Dreamweaver提供了三种视图模式：标准、扩展和布局，其中“布局”插入栏如图1所示。注意Dreamweaver的某些功能只能在某一种视图模式下使用，如描绘层，只能在标准视图下才有效，而在布局视图中却无效。,4,2019/10/16,5,图1 布局插入栏,5,2019/10/16,6,在布局视图中，用户可以使用布局表格和布局单元格进行页面布局，页面布局效果如图2所示。,6,2019/10/16,7,图2 页面布局效果,7,2019/10/16,8,1.首页布局,使用布局视图进行首页页面布局的操作过程如下： 步骤1：新建页面index.htm，设置页面属性，标题为动物天堂之门，上、下、左、右边界均为0。 步骤2：执行【查看】【表格模式】【布局模式】或单击“布局”插入栏中的“布局”按钮，切换到布局视图模式下。切换到布局视图模式后，文档窗口工具栏的下方会出现一个横条，正中央显示“布局模式【退出】”，这表示当前处于布局模式下，它不会显示在浏览器中。单击“布局”插入栏中的“标准”或单击横条上的【退出】可以回到标准视图模式中。,8,2019/10/16,9,步骤3：单击“布局”插入栏中的 布局表格按钮，在页面空白处单击并拖动鼠标，绘制布局表格。在其属性面板中设置布局表格的宽度760、高度420。绘制的布局表格如图3所示，布局表格的属性面板如图4所示。 默认设置下，布局表格以灰色显示，顶端有一个标签，底部有一个横条，其中包含列宽及菜单、表格宽度及菜单。,9,2019/10/16,10,图3 绘制布局表格,10,2019/10/16,11,图4 布局表格的属性面板,11,2019/10/16,12,步骤4：在760420的布局表格中，再绘制四个纵向排列的布局表格，高度分别为80、30、280、30，如图5所示。 步骤5：根据需要在已有的布局表格中嵌套其他的布局表格，如图6所示。 现在大致的布局结构已经出来了，但是还不能添加内容，因为在布局视图下，不允许在布局表格中添加内容，只能在布局单元格中添加内容。,12,2019/10/16,13,图5 绘制嵌套布局表格,13,2019/10/16,14,图6 再次绘制嵌套布局表格,14,2019/10/16,15,注意：,在一个布局表格中可以嵌套其他布局表格，但是各布局表格之间不能交叉。 当绘制的布局表格与已有的相邻布局表格之间的距离小于等于8个像素时，Dreamweaver会自动对齐已有的相邻布局表格。,15,2019/10/16,16,步骤6：使用“布局”插入栏中的 布局单元格工具，绘制布局单元格。 在第一行布局表格中绘制三个布局单元格，宽度分别为：80、600、80； 第二行布局表格中绘制一个布局单元格； 第三行绘制三个布局单元格； 第四行绘制一个布局单元格。默认情况下，布局单元格以白色显示，绘制的布局单元格如图7所示。,16,2019/10/16,17,图7 绘制布局单元格,17,2019/10/16,18,当鼠标指针移动到布局单元格边框时，它会变成红色，单击可以选择此布局单元格，选中后布局单元格边框变为蓝色，并显示控制柄。布局单元格不能覆盖其他单元格，也不能移动到布局表格之外。 利用布局单元格的属性面板可以设置单元格宽度、高度以及内容的对齐方式等。图8为第一行右侧布局单元格的属性面板设置。 注意：在布局模式下，不能在一个表格的单元格中再绘制布局表格。如果要在表格的单元格中嵌套表格，必须使用标准模式。,18,2019/10/16,19,图8 布局单元格的属性面板,19,2019/10/16,20,在布局表格和布局单元格的属性面板中都有“自动伸展”选项，其作用是使表格或单元格的宽度可以随着浏览器窗口的变化而自动伸展。 在给定的布局表格中，只能让一列自动伸展。如果把一列设置为自动伸展，那么这一列里所有的单元格都具有自动伸展特性。,20,2019/10/16,21,2.首页制作,在制作首页的过程中，需要插入用Fireworks制作的网页素材，如Logo图标、Banner广告、导航条等。 步骤1：设置760420布局表格的背景颜色为#DDFFDF。 步骤2：在第一行的三个布局单元格中，分别插入Logo图标、插入Banner广告条和输入文字。,21,2019/10/16,22,步骤3：在第二行中插入利用Fireworks制作的导航条。单击“常用”插入栏中的 Fireworks HTML按钮，弹出“插入Fireworks HTML”对话框，如图9所示，通过【浏览】按钮选择所需的文件dh.htm。然后单击【确定】按钮，结果如图10所示,22,2019/10/16,23,图9 插入Fireworks HTML对话框,23,2019/10/16,24,图10 插入Logo、Banner和导航条,24,2019/10/16,25,步骤4：在内容区插入图片、输入相关文字，在页面范围的下端输入版权声明。文字的大小为10pt，版权声明布局单元格的颜色为#C8F7FE。内容添加完成后的结果如图11所示。 步骤5：切换到标准视图模式下，选中最外层的表格将其设置为居中对齐，保存文档后，预览效果，如前面的图2所示。,25,2019/10/16,26,图11 内容添加完成效果,26,2019/10/16,27,（二）、利用表格进行布局,表格是一种能够有效地描述信息的组织方式。在Web页面中，表格也被用来控制“空白区域”，即空白文字、图形及其他所有页面元素之间及周围区域。也就是说，使用表格可以无所不及地控制页面布局。下面介绍利用表格制作一个如图12所示的动物大观页面daguan.htm。,27,2019/10/16,28,图12 动物大观页面布局,28,2019/10/16,29,1.插入表格,在一个表格中插入另一个表格实现表格的嵌套，这是网页排版常用的手段之一。在Dreamweaver的文档窗口中插入表格，可以按照如下方法操作： 步骤1：新建页面daguan.htm，设置页面属性，标题为动物大观，上、下、左、右边界均为0。,29,2019/10/16,30,步骤2：在标准视图模式下，单击“布局”或“常用”插入栏中的插入表格按钮，出现“表格”设置对话框，设置表格的行数为4、列数为1、宽度为760像素，如图13所示。 注意：设置表格宽度时，其单位可用百分比或像素表示。在进行页面布局时，建议第一层表格（定义页面使用的范围）的宽度单位使用像素。,30,2019/10/16,31,图13 设置表格对话框,31,2019/10/16,32,步骤3：单击【确定】按钮，页面中插入一个4行1列的表格，如图14所示。,图14 插入表格,32,2019/10/16,33,步骤4：选中表格，在其属性面板中进行属性设置。表格高度为420、居中对齐，表格的属性面板如图15所示。,图15 表格属性面板,33,2019/10/16,34,步骤5：利用如图16所示的单元格属性面板设置各单元格的属性。4行的高度分别为80、30、280、30，每个单元格都居中对齐，设置后的结果如图17所示。,34,2019/10/16,35,图17 设置单元格后的效果,35,2019/10/16,36,步骤5：在第一行中插入一个1行3列的表格，3个单元格的宽度分别为80、600、80。在第3行中插入一个3行4列的表格，3行的高度分别为40、120、120，4列的宽度分别均为190，所有单元格居中对齐，效果如图18所示。,36,2019/10/16,37,图18 嵌套插入表格的效果,37,2019/10/16,38,2.添加内容,步骤1：设置760420表格的背景颜色为#99CCFF。 步骤2：在第一行的三个布局单元格中，分别插入Logo图标、Banner广告条和输入文字；在第二行中插入利用Fireworks制作的导航条；在第三行中输入相关文字、插入所需图像；在第四行中输入版权声明。 步骤3：保存文档后，预览效果，如图12所示。,38,2019/10/16,39,（三）、层的应用,Dreamweaver中的层相当于一个容器，它可以包含所有在HTML文件中出现的元素。层可以放置在页面的任何位置，利用层可以方便而又精确地定位页面元素。层可以使元素在页面中的定位达到像素级的精确度。 层更为重要的一项作用是用来实现页面元素的重叠，层还与Dreamweaver的许多高级特性紧密相关，例如使用行为可以对层进行操作与控制。 下面介绍如何创建和使用层来组织页面元素，并创建如图19所示的页面。,39,2019/10/16,40,图19 利用层技术创建的页面预览效果,40,2019/10/16,41,1.创建层,创建一个层可以使用插入、拖动或绘制等方法。层一旦被创建，就可以应用Layers面板选中它，或将它嵌套在其他层中，或改变它的叠放顺序。 层的参数选择决定了层的默认属性（如标记、可见性、高度和宽度等）。如果要改变这些设置，可选择【编辑】【首选参数】命令，在弹出的“首选参数”对话框中选中层选项，如图20所示，重新设置属性。,41,2019/10/16,42,图20 首选参数中的层选项,42,2019/10/16,43,利用层来布局页面的操作如下：,步骤1：新建页面katong.htm，设置页面属性，标题为卡通动物，上、下、左、右边界均为0。 步骤2：在标准视图模式下，单击“布局”插入栏中的 插入层按钮或执行【插入】【布局对象】【层】命令，在页面中单击并拖动鼠标创建层，此时页面的左上角会出现一个标记。选中层，在其属性面板中进行属性设置，如图21所示。绘制层的效果如图22所示。,43,2019/10/16,44,图21 层的属性面板,图22 创建层,44,2019/10/16,45,步骤3：在第一个层嵌套其他的层，效果如图23所示。嵌套层是指包含在其他层中的层，创建嵌套层的好处是能确保此层位于其父层的上方。使用Shift键同时选中多个层，执行【修改】【对齐】【设置宽度相同】和【修改】【对齐】【设置高度相同】命令，可使多个层的宽度、高度一致。,45,2019/10/16,46,图23 绘制嵌套层,46,2019/10/16,47,2.插入内容,将光标定位在需要插入内容的层中，输入文本或插入图像。预览效果如图19所示。,47,2019/10/16,48,3.层面板,选择【窗口】【层】命令可以打开层面板，图24为katong.htm文件的层面板。,图24 层面版,48,2019/10/16,49,在层面板中，层以层名堆栈列表的形式显示，最先生成的层位于列表底部，最后生成的位于列表的上方。 嵌套的层会以连接符与父层相连，以表明从属关系。单击父层旁边的减号可以隐藏嵌套子层，单击父层旁边的加号可以显示隐藏的嵌套子层。 另外，层名称前紧闭的眼睛图标 表示该层目前不可见。单击该图标，则变为睁开的眼睛图标，表示该层将在页面中显示出来。单击层名称，则该层被选中，并出现深蓝色选取标记。,49,2019/10/16,50,在层面板中可以完成禁止层重叠、改变层的可见性、嵌套层、改变层的堆栈顺序以及选中一个或多个层等操作。在创建一个层时若要防止它与其他层发生重叠，需在层面板中选中“防止重叠”复选框。,50,2019/10/16,51,注意：,在HTML代码中，堆栈顺序或Z-Index决定了浏览器中层的顺序。在层面板中改变层的堆栈顺序，可按如下步骤进行操作： 步骤1：选择【窗口】【层】命令，打层面板。 步骤2：在层面板中的“Z”栏中，单击要改变的层所对应的数字。输入一个比当前数字大的数字将后移层的堆栈顺序；输入一个比当前数字小的数字将前移层的堆栈顺序。在层属性面板的“Z轴”文本框中输入一个数字，也可以改变层的堆栈顺序。,51,2019/10/16,52,4.层与表格的互相转换,使用层可以定位页面中的内容，与表格相比，层更易于操作和更改页面设计。因此用户可以利用层的特点快速设计一个页面，同时对其页面设计进行优化，然后将其转化为表格。 通过选择【修改】【转换】【表格到层】或【层到表格】命令，可以进行层和表格之间的相互转换。将katong.htm文件中的层转化为表格，操作过程如下：,52,2019/10/16,53,步骤1：打开katong.htm的层面板，移除嵌套层和删除交叠层。因为在进行层转换表格时，要求页面中不能有交叠层和嵌套层。 步骤2：选择【修改】【转换】【层到表格】命令，弹出如图25所示的对话框。,53,2019/10/16,54,图25 转换层为表格对话框,54,2019/10/16,55,步骤3：进行设置后，单击【确定】按钮。效果如图26所示。,图26 层转换为表格后的效果,55,2019/10/16,56,（四）、框架的应用,框架主要用于在一个浏览窗口中显示多个HTML文档。通过构建这些文档之间的相互关系，从而实现文档导航、浏览以及操作等目的。,56,2019/10/16,57,1.框架技术,利用框架可以将浏览器窗口分隔成几个不同的区域，每个区域中显示不同的文档内容。 最常见的方式是将左方或上方的区域设置为目录区域，用于显示文档页面的目录索引或导航条，而将右方或下方的区域设置为主体区域，用于显示网页的主体内容，通过单击不同的目录索引项或导航条按钮，就可以在主体区域实现网页之间的导航，在浏览网页的同时，目录索引或导航条始终显示于页面的目录区域中，这样便于用户继续浏览其他的网页，如图27所示。,57,2019/10/16,58,图27 利用框架技术制作的页面,58,2019/10/16,59,利用框架技术可以将不同的文档显示在同一个浏览器窗口中。通过构建这些显示在同一窗口中的文档之间的相互链接关系，可以实现文档之间的相互控制。 一般来说，框架（Frames）技术主要是通过两种类型的元素来实现的：框架集（Frameset）和框架（Frame）。 所谓框架集，顾名思义，就是框架的集合。框架集实际上是一个页面，用于定义在一个文档窗口中显示多个文档的框架结构。 所谓框架，就是在框架集中被组织和显示的文档。在框架集中显示的每个框架事实上都是一个独立存在的HTML文档。,59,2019/10/16,60,2.创建框架,框架的构建总是从一个正常的文档开始的，利用Dreamweaver可以很容易的将正常方式的文档分割成多个框架窗格，从而构建框架。创建框架既可以使用预定义框架格式，也可以使用自定义框架格式。操作过程如下： 步骤1：新建一个页面。,60,2019/10/16,61,步骤2：单击“布局”插入栏中的按钮旁的下拉菜单，如图28所示，也可执行【插入】【HTML】【框架】命令，然后选择所需的类型。文档窗口会显示框架的结构，如图29所示。利用鼠标拖动框架边框，可以快速改变框架大小。,61,2019/10/16,62,图29 框架结构,图28 框架按钮的下拉菜单,62,2019/10/16,63,步骤3：保存框架。执行【文件】【保存全部】命令，按照提示依次保存框架集文档和各框架文档，分别命名为xiangce.htm、main.htm、left.htm、top.htm。 在Dreamweaver中，可以单独保存某个框架文档，或单独保存框架集文档本身，也可以将整个框架集（包括框架集文档本身以及其中的各个框架文档）保存。如果希望在浏览器中预览框架效果，则必须保存各个框架文档以及框架集文档，保存文件的数目为框架的个数加1。,63,2019/10/16,64,选中框架集，执行【文件】【保存框架页】命令，可保存框架集文档本身。单击某个框架区，然后执行【文件】【保存框架】命令，可保存该框架文档。,64,2019/10/16,65,步骤4：设置各个框架的属性。,方法一：在文档窗口中，单击框架边线选择框架集，其属性面板如图30所示，框架集的属性可以控制整体属性。,图30 框架集属性,65,2019/10/16,66,按住Alt键，单击框架区可以在框架属性面板中，如图31所示，进行各框架属性的设置。,图31 框架属性,66,2019/10/16,67,方法二：,执行【窗口】【框架】命令，打开框架面板，如图32所示。利用框架面板能方便地选择框架和框架集。单击框架边线可选择框架集，单击某个框架区可以选择该框架。,图32 框架面板,67,2019/10/16,68,此处我们重新命名三个框架的名称，框架页面及框架的名称如图33所示。,图33 框架页及框架的名称,68,2019/10/16,69,步骤4：输入内容。每一个框架页面都是一个独立的文件，它们可以单独编辑，也可以在框架集中编辑。上框架中输入标题，左框架中输入目录，右框架中为主要内容显示区。编辑内容后的效果如图34所示。,69,2019/10/16,70,图34 编辑内容后的效果,70,2019/10/16,71,步骤5：创建左侧各个目录的链接文件。因为显示的都是图片，所以此处我们使用“创建网站相册”功能来创建各个目录的链接页面。以创建海洋动物目录链接的页面为例进行介绍：,71,2019/10/16,72,过程：,执行【命令】【创建网站相册】命令，弹出“创建网站相册”对话框，进行设置，如图35所示。 单击【确定】按钮，Dreamweaver会启动Fireworks程序进行图像拍照，然后会弹出相册已经建立的提示框，单击【确定】按钮即可。网站相册的主页面以index.htm进行命名，放置在目标文件夹中。如果index.htm已经存在，则自动命名为index1.htm，依次类推,72,2019/10/16,73,图35 创建网站相册对话框,73,2019/10/16,74,步骤6：创建各目录的链接，并设置目标文档在哪个框架中被打开。 选中左侧的文字“海洋动物”，在其属性面板中进行链接设置，链接到pages/xiangce/index1.htm，将“目标”选项设置为“main”（右侧框架的名称）。这样单击“海洋动物”链接时，链接目标文档index1.htm将在右侧框架被打开。 按此方法设置“哺乳动物”、“爬行动物”、“鸟类”目录的链接，“目标”选项设置为“main”。 将“首页”链接到站点根目录下首页index.htm，“目标”设置为“_top”（以整页方式显示）。,74,2019/10/16,75,步骤7：保存后预览效果，如图27所示。,75,2019/10/16,76,在实际进行页面布局时，经常联合应用几种布局技术，设计出布局更加合理的页面。,76,2019/10/16,77,二、网页交互技术,上网时经常会遇到要求上网者填写一些信息以实现注册或者登陆，然后才有权访问该网页，这是浏览者与网页的一种交互，就如同在生活中人与人之间交流信息一样。利用Dreamweaver提供的行为控制，可以方便地创建页面中的交互行为。,77,2019/10/16,78,（一）、表单,表单（Forms）是网页与浏览者交互的一种界面。Dreamweaver中的表单包括文本域、单选按钮、复选框、菜单/列表等表单域。在表单设置时，注意将表单域放置在红色表单虚线内。如果某表单出现在红色虚线以外，那么在该表单域中填入的信息将不能被发送到Web服务器。,78,2019/10/16,79,表单（Forms）是网页与浏览者交互的一种界面。下面通过制作如图36所示的留言簿页面介绍表单的相关技术。,图36 表单页面效果,79,2019/10/16,80,1.创建表单,操作操作过程如下： 步骤1：新建页面，命名为liuyan.htm，页面标题为“留言簿”。 步骤2：将光标置于将要创建表单的位置，单击如图37所示“表单”插入栏中的表单按钮，会在文档窗口创建一个表单虚线框，如图38所示。,80,2019/10/16,81,图37 表单插入栏,图38 插入表单虚框,81,2019/10/16,82,步骤3：利用表单属性面板可进行属性设置，表单属性面板如图39所示。其中“动作“是制表单提供的数据将作何种处理，比如说：mailto指将用电子邮件发送到某地。,图39 表单的属性面板,82,2019/10/16,83,步骤4：为了布局好看，可在表单中创建一个表格，并设置表格的边框和背景颜色，合并最后一行的单元格，效果如图40所示。,83,2019/10/16,84,2.添加表单内容,Dreamweaver中的表单包括文本域、单选按钮、复选框、菜单/列表等表单域。在表单设置时，注意将表单域放置在红色表单虚线内。如果某表单出现在红色虚线以外，那么在该表单域中填入的信息将不能被发送到Web服务器。 向图40中的表单中添加表单域的操作过程如下：,84,2019/10/16,85,步骤1：在第1行的第1列中输入“姓名”，第2列中插入单行文本域。将光标定位在第2列中，单击“表单”插入栏中的 按钮插入文本域。在其属性面板中进行属性设置，输入文本域的名称，选择类型为“单行”文本域，设置如图41所示。,85,2019/10/16,86,注意：,文本框是非常通用的，大多数据信息都可以以文本框形式输入，但访问者使用文本框输入信息时比较麻烦。因此，在表单中应尽量少使用文本框。,86,2019/10/16,87,步骤2：在第2行的第1列中输入“密码”，第2列中插入密码文本域。将光标定位在第2列中，单击“表单”插入栏中的 按钮插入文本域。在其属性面板中进行属性设置，输入文本域的名称，选择类型为“密码”文本域，设置初始值等，属性设置如图42所示。 预览状态下，在密码文本域中输入的内容时以“*”显示。,87,2019/10/16,88,步骤3：在第3行的第1列中输入“性别”，第2列中插入单选按钮组用于进行性别的选择。将光标定位在第2列中，单击“表单”插入栏中的按钮，弹出“单选按钮组”对话框，输入内容，如图43所示，然后单击【确定】按钮即可。,88,2019/10/16,89,“单选按钮组”对话框的Label内容将在页面中显示，当用户提交这个表单时，Value中的内容将被发送至服务器端的应用程序中，同一组中的每个单选按钮必须设置不同的值。 选中“男”前面的单选按钮，在其属性面板中设置“初始状态”为“已勾选”，单选按钮的属性面板如图44所示。,89,2019/10/16,90,当用户单击单选按钮组中的某个按钮时，其他按钮就会取消选中状态。 预知所有答案的各种可能项，且只有一种项被选中时，才能使用单选按钮。,90,2019/10/16,91,步骤4：在第4行的第1列中输入“职业”，第2列中插入下拉菜单用于进行职业的选择。将光标定位在第2列中，单击“表单”插入栏中的 按钮插入下拉列表。在其属性面板中进行属性设置：选择“列表”类型、输入列表名称、添加列表选项等。列表属性面板如图45所示，单击【列表值】按钮后弹出的“列表值”对话框如图46所示。,91,2019/10/16,92,图45 列表的属性面板,图46 列表值对话框,92,2019/10/16,93,下拉列表和列表框都是使用 按钮来创建的。下拉列表类似于菜单，单击其右侧的下拉按钮时，弹出一个下拉列表框，在下拉列表框中只能选中其中的一个选项。而列表框可以显示多个选项，它要比下拉列表直观，在列表框中可以选中一个或多个选项。,93,2019/10/16,94,步骤5：在第5行的第1列中输入“喜爱的动物”，第2列中插入复选框以便进行多项喜爱动物的选择。将光标定位在第2列中，单击“表单”插入栏中的 按钮插入复选框，在其后输入文字“海洋动物”。选中复选框，在其属性面板中进行属性设置，输入复选框的名称，设置“选定值”等，复选框的属性面板如图47所示。当用户提交表单时，“选定值”选项中的内容将会被发送至服务器端的应用程序中。,94,2019/10/16,95,再创建其他的复选框，效果如图48所示。 复选框提供了多个选项供访问者选择。选中某个复选框时，在相应的方框内标有“，去掉“”则表示不选中该复选框。,95,2019/10/16,96,步骤6：在第6行的第1列中输入“畅所欲言”，第2列中插入多行文本域以便能输入较多的内容。将光标定位在第2列中，单击“表单”插入栏中的 按钮可以插入多行文本域。在其属性面板中进行属性设置：输入文本域的名称、字符宽度、行数等。多行文本域的属性面板如图49所示。,96,2019/10/16,97,单击“表单”插入栏中的插入文本域按钮，然后在其属性面板中选择“类型”为多行，同样也可以创建多行文本域。,图49 多行文本域的属性面板,97,2019/10/16,98,步骤7：在第7行的第1列中输入“友情链接”，第2列中跳转菜单用于选择其他网站的网址。将光标定位在第2列中，单击“表单”插入栏中的 按钮，弹出“插入跳转菜单”对话框，添加跳转菜单中的各个选项，如图50所示，然后单击【确定】按钮完成跳转菜单的插入，在文档中出下一个下拉菜单和一个按钮.,98,2019/10/16,99,图50 插入跳转菜单对话框,跳转菜单是一个下拉菜单，其中的每一个选项都可以设置超级链接。,99,2019/10/16,100,步骤8：在最后1行中插入提交和重置按钮。 将光标定位在最后1行中，单击“表单”插入栏中的按钮插入提交按钮，按钮的属性面板如图51所示，提交按钮用来发送表单中的数据。 然后再插入一个按钮，将其属性面板的“动作”设置为“重设表单”。,100,2019/10/16,101,属性面板中的“动作”选项用于指定单击这个按钮时发生的事件。 选中“提交表单”，表示单击按钮时提交表单进行处理；选中“重设表单”，表示单击按钮时清空输入到表单中的数据；选中“无”，表示单击按钮时根据处理脚本进行操作。,101,2019/10/16,102,步骤9：保存后预览表单。,102,2019/10/16,103,3.表单的提交,无论表单是要提交信息、执行搜索操作还是进行其他处理数据的操作，都需要定义如何处理数据和传输数据，从而发挥表单的作用。这种定义是由“属性”栏中的“动作”和“方法”选项来实现的。 “动作”用于指明处理表单信息的服务器端应用程序（通常是CGI脚本或动态页面）的路径或URL和文件名，当单击“提交”按钮后将处理表单信息。CGI脚本位于处理表单数据的服务器上。,103,2019/10/16,104,“方法”用于定义表单数据的处理方式。 Get方法把表单内容附加到“动作”选项指定的URL之后，这些信息在浏览器地址栏里是可见的，显然这并不是传输数据的安全方法。由于浏览器和服务器对于URL长度的限制，Get方法只能传输有限数量的信息，而且这种限制在不同浏览器上也有所不同。 Post方法能够比Get发表方法发送更多的信息，而且更可靠、更安全，在脚本中发送表单数据时这是最常用的方法，它使用http请求在消息主体发送表单数据。,104,2019/10/16,105,我们将对liuyan.htm文档中的表单进行mailto动作提交设置和表单测试，操作过程如下：,步骤1：打开liuyan.htm文档，单击表单红色虚线，选中表单。 步骤2：利用表单属性面板进行属性设置，在“动作”选项中输入“mailto:wolf7842”，在“方法”选项选择“Post”方式。 步骤3：保存后在浏览器中进行测试。单击【提交】按钮，弹出如图53所示的对话框，单击【确定】按钮，即可启动相应的电子邮件程序。,105,2019/10/16,106,图53 表单提交对话框,106,2019/10/16,107,（二）、行为控制,如果要执行复杂的数据处理，通常需要执行服务器端的脚本或程序。如果仅希望执行简单的页面中交互控制，则可以使用客户端的脚本或程序。 所谓客户端，即指脚本程序被包容在当前的网页中，用户可以直接在网页中进行各种动作，实现信息交互，而不必连入Internet服务器。,107,2019/10/16,108,1.行为事件,1）行为 所谓行为（Behavior），就是在网页中进行的一系列动作。通过这些动作，可以实现用户同网页的交互，也可以执行某个任务。 一般来说，一个行为应该由一个事件(Event)和一个动作（Action）组成。例如，当用户将鼠标移动到一幅图像上时，这就产生了一个事件，如果这时候图像变化，则实际上就导致了一个动作的发生。,108,2019/10/16,109,动作通常由一段JavaScript代码组成，利用这段代码可以完成相应的任务，例如打开浏览器、播放声音和视频等。在Dreamweaver中，可以使用Dreamweaver内置的行为往页面中添加JavaScript代码，而不用自己书写，当然，也可以对现有的代码进行修改，使之更符合自己的需要。,109,2019/10/16,110,事件则通常由浏览器所定义，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。通常一个事件总是针对页面元素或标记而言的。 例如，在大多数浏览器中的超级链接上都会发生onMouseOver、onMouseOut和onClick这三种事件。当鼠标指针移动到链接上时，就发生链接的onMouseOver事件；当鼠标指针移动到链接之外时，就发生链接的onMouseOut事件；而单击链接时，就发生链接的onClick事件。,110,2019/10/16,111,将事件和动作组合起来，就构成了行为，例如，将onClick行为同一段JavaScript代码相关联，在单击鼠标时就可以执行相应的JavaScript代码。 通常，我们将事件产生的过程称作触发。 不是所有的动作都需要用户的干涉才会发生，例如，我们可以指定某个动作每隔10秒执行一次，当然，这实际上还是由事件触发的，只是这种事件不是通过用户本身的行为而产生的罢了。 有时候会有多个动作与一个事件相关联，换句话说，当事件发生时，会导致多个动作被执行。在Dreamweaver中，可以指定这些动作的发生顺序，从而实现需要的结果。,111,2019/10/16,112,（2）行为事件 Dreamweaver提供行为控制，可以方便地创建页面中的交互行为。利用Dreamweaver，不用书写一行代码，就可以实现丰富的页面效果，实现人和网页的交互。在Dreamweaver中，利用行为面版，可以为对象附加JavaScript行为，还可以为以前添加的行为修改参数。行为会按事件的字母顺序显示在行为面板中。如果对于同一事件可以引发不同的动作，则这些动作将以其执行顺序在行为面板中显示。,112,2019/10/16,113,2.附加行为,可以将行为附加给整个文件（Body部分），也可以附加给链接、图像、表单元素或任何其他的HTML元素。哪些元素可以接受附加行为取决于浏览器。每个事件可以指定多个动作，动作将按顺序列表依次发生。下面介绍常用的行为设置。,113,2019/10/16,114,（1）弹出浏览器窗口,弹出浏览器窗口可以在加载页面时打开新的浏览窗口，用于显示广告或其他各种消息。下面以在网站首页弹出广告为例来说明弹出窗口动作的应用，具体操作过程如下： 步骤1：新建页面，页面标题“弹出窗口”，上、下、左、右边界均设置为0。在页面中插入一幅130110的图像。 步骤2：打开index.htm，将光标定位在最外层表格的外面，执行【窗口】【行为】命令，打开行为面板。单击 按钮，如图54所示，从弹出的行为菜单中选项选择“打开浏览器窗口”，弹出如图55所示的“打开浏览器窗口”对话框。,114,2019/10/16,115,图54 行为面板及行为,115,2019/10/16,116,步骤3：单击“浏览“按钮选择将在新窗口里加载的ad.htm页面文件，设置窗口宽度和高度分别为130、110，然后单击【确定】按钮。,116,2019/10/16,117,图55 打开浏览器窗口对话框,117,2019/10/16,118,步骤4：打开浏览窗口的行为和相应的onLoad事件显示在行为面板中。 步骤5：保存文件后在浏览器预览，效果如图56所示,118,2019/10/16,119,表单的校验,Dreamweaver中的“检查表单”行为，只能设置文本域的校验。我们将liuyan.htm文档中的表单进行表单的校验设置和测试，操作过程如下： 步骤1：打开liuyan.htm文档，选中【提交】按钮，执行【窗口】【行为】命令，打开行为面板。 步骤2：单击行为面板中的 按钮，从菜单选项中选择“检查表单”，弹出“检查表单”设置对话框，如图61所示。选中“name”姓名文本域，值设置为“必需的”，可接受“任何东西”；选中“password”密码文本域，值设置为“必需的”，可接受“数字”。设置完毕后单击【确定】按钮。,119,2019/10/16,120,图61 检查表单对话框,120,2019/10/16,121,步骤3：保存后在浏览器中进行测试。在姓名文本域中输入内容，密码文本域中输入数字的内容，再填写其他内容，然后单击【提交】按钮，即可启动相应的电子邮件程序。如果姓名文本域中没有输入内容、密码文本域中输入的不是数字，单击【提交】按钮后会弹出如图62所示的提示框。,图62 提示框,121,2019/10/16,122,（3）弹出信息框,Dreamweaver的弹出消息动作是指显示带特定信息JavaScript警告。我们将在katong.htm页面中添加弹出信息框，具体操作过程如下： 步骤1：打开katong.htm，执行单击【窗口】【行为】命令，打开行为面版。 步骤2：单击文档窗口左下角的标记，准备将行为附加给整个页面。 步骤3：单击 加号按钮并从行为菜单中选择“弹出信息”动作命令，弹出如图63所示的对话框，在“消息”文本框中输入“这里是卡通动物的世界！”，然后单击【确定】按钮。,122,2019/10/16,123,图63 弹出信息对话框,123,2019/10/16,124,步骤4：在行为面板中修改行为事件为“onLoad”。 步骤5：保存后预览效果，如图64所示。,124,2019/10/16,125,（4）调用JavaScript,调用JavaScript动作允许设置当某些事件被触发时，调用JavaScript代码，以实现相应的动作。调用JavaScript动作的参数设置对话框，如图9-65所示，允许输入要执行的JavaScript语句，或者是要调用的函数名称。,125,2019/10/16,126,（5）播放声音,利用播放声音动作，可以在网页中播放声音文件，例如，你可以设置当网页被完全载入后播放一段音乐，或者是设置当鼠标指针移动到某个对象上时播放声音，提供声音效果。调用“播放声音”动作的参数设置对话框进行声音文件的选择，如图66所示。,126,2019/10/16,127,本章要点,1.网页布局定位是指把网页元素诸如文本、图片等等按需要放在合适的位置。 2.利用布局视图进行页面布局时，一个布局表格中可以嵌套其他布局表格，但是各布局表格之间不能交叉，不允许在布局表格中添加内容，只能在布局单元格中添加内容。 3.使用表格可以无所不及地控制页面布局。,127,2019/10/16,128,4.Dreamweaver中的层相当于一个容器，它可以包含所有在HTML文件中出现的元素。层可以放置在页面的任何位置。 5.利用框架可以浏览器窗口分隔成了几个不同的区域，每个区域中显示不同的文档内容。框架集实际上是一个页面，用于定义在一个文档窗口中显示多个文档的框架结构。框架集中显示的每个框架事实上都是一个独立存在的HTML文档。如果希望在浏览器中预览框架效果，则必须保存各个框架文档以及框架集文档。,128,2019/10/16,129,6.表单是网页与浏览者交互的一种界面。Dreamweaver中的表单包括文本域、单选按钮、复选框、菜单/列表等表单域，注意应将表单域放置在红色表单虚线内。如果某表单出现在红色虚线以外，那么在该表单域中填入的信息将不能被发送到Web服务器。 7.行为就是在网页中进行的一系列动作。通过这些动作，可以实现用户同网页的交互，也可以执行某个任务。,129,
展开阅读全文