网页制作第3讲网页的布局与定位课件.ppt
129页
2024/9/231本章知识点和技能点：本章知识点和技能点：n n利用布局视图、表格、层、框架进行页面布局的方法n n 创建表单的方法以及表单的提交与校验设置n nDreamweaverDreamweaver内置行为的应用1网页制作第3讲网页的布局与定位 2024/9/232一、网页布局定位一、网页布局定位n n经过前面的学习，相信你已经掌握了基本的网页制作知识，可以独立制作一些较简单的网页了n n但仅仅这些知识还是远远不够的，因为你还不能解决对象的位置会随着浏览器窗口大小的变化而发生变的这个问题，下面我们将介绍网页的布局定位技术，从而实现对网页对象的精确控制2网页制作第3讲网页的布局与定位 2024/9/233什么是网页布局定位？什么是网页布局定位？n n网页布局定位，就是指把网页元素诸如文本、图片等按需要放在合适的位置，DreamweaverDreamweaver提供了诸如布局视图、表格、框架、层等网页定位技术，掌握它们才能真正学到网页制作技术的精髓n n网页设计的思想和排版方式是需要网页制作者通过自己的灵感和艺术思想产生的所以在制作网页前，制作者一般都要有一个设计的总体规划，然后才能按照规划的思想完成网页的制作。
3网页制作第3讲网页的布局与定位 2024/9/234（一）、利用布局视图进行布（一）、利用布局视图进行布局局n nDreamweaverDreamweaver提供了三种视图模式：标准、扩展和布局，其中““布局””插入栏如图1 1所示注意DreamweaverDreamweaver的某些功能只能在某一种视图模式下使用，如描绘层，只能在标准视图下才有效，而在布局视图中却无效4网页制作第3讲网页的布局与定位 2024/9/235图图1 1 布局插入栏布局插入栏5网页制作第3讲网页的布局与定位 2024/9/236n n在布局视图中，用户可以使用布局表格和布局单元格进行页面布局，页面布局效果如图2 2所示6网页制作第3讲网页的布局与定位 2024/9/237图图2 2 页面布局效果页面布局效果7网页制作第3讲网页的布局与定位 2024/9/2381.首页布局n n使用布局视图进行首页页面布局的操作过程如下：使用布局视图进行首页页面布局的操作过程如下：n n步骤步骤1 1 1 1：：新建新建页面页面index.htmindex.htmindex.htmindex.htm，，设置页面属性，设置页面属性，标题标题为动为动物天堂之门，物天堂之门，上、下、左、右边界均为上、下、左、右边界均为0 0 0 0。
n n步骤步骤2 2 2 2：执行：执行【查看】【查看】→→→→【表格模式】【表格模式】→→→→【布局模式】【布局模式】或单击或单击““““布局布局””””插入栏中的插入栏中的““““布局布局””””按钮，切换到布局视图按钮，切换到布局视图模式下切换到布局视图模式后，文档窗口工具栏的下模式下切换到布局视图模式后，文档窗口工具栏的下方会出现一个横条，正中央显示方会出现一个横条，正中央显示““““布局模式【退出】布局模式【退出】””””，，这表示当前处于布局模式下，它不会显示在浏览器中这表示当前处于布局模式下，它不会显示在浏览器中单击单击““““布局布局””””插入栏中的插入栏中的““““标准标准””””或单击横条上的【退出】或单击横条上的【退出】可以回到标准视图模式中可以回到标准视图模式中8网页制作第3讲网页的布局与定位 2024/9/239n n步骤3 3：单击““布局””插入栏中的 布局表格按钮，在页面空白处单击并拖动鼠标，绘制布局表格在其属性面板中设置布局表格的宽度760760、高度420420绘制的布局表格如图3 3所示，布局表格的属性面板如图4 4所示 默认设置下，布局表格以灰色显示，顶端有一个标签，底部有一个横条，其中包含列宽及菜单、表格宽度及菜单。
9网页制作第3讲网页的布局与定位 2024/9/2310图图3 3 绘制布局表格绘制布局表格10网页制作第3讲网页的布局与定位 2024/9/2311图图4 4 布局表格的属性面板布局表格的属性面板11网页制作第3讲网页的布局与定位 2024/9/2312n n步骤4 4：在760×420760×420的布局表格中，再绘制四个纵向排列的布局表格，高度分别为8080、3030、280280、3030，如图5 5所示n n步骤5 5：根据需要在已有的布局表格中嵌套其他的布局表格，如图6 6所示n n现在大致的布局结构已经出来了，但是还不能添加内容，因为在布局视图下，不允许在布局表格中添加内容，只能在布局单元格中添加内容12网页制作第3讲网页的布局与定位 2024/9/2313图图5 5 绘制嵌套布局表格绘制嵌套布局表格13网页制作第3讲网页的布局与定位 2024/9/2314图图6 6 再次绘制嵌套布局表格再次绘制嵌套布局表格14网页制作第3讲网页的布局与定位 2024/9/2315注意：n n在一个布局表格中可以嵌套其他布局表格，但是各布局表格之间不能交叉n n当绘制的布局表格与已有的相邻布局表格之间的距离小于等于8 8个像素时，DreamweaverDreamweaver会自动对齐已有的相邻布局表格。
15网页制作第3讲网页的布局与定位 2024/9/2316n n步骤6 6：使用““布局””插入栏中的 布局单元格工具，绘制布局单元格n n在第一行布局表格中绘制三个布局单元格，宽度分别为：8080、600600、8080；n n第二行布局表格中绘制一个布局单元格；n n第三行绘制三个布局单元格；n n第四行绘制一个布局单元格默认情况下，布局单元格以白色显示，绘制的布局单元格如图7 7所示16网页制作第3讲网页的布局与定位 2024/9/2317图图7 7 绘制布局单元格绘制布局单元格17网页制作第3讲网页的布局与定位 2024/9/2318n n当鼠标指针移动到布局单元格边框时，它会变成红色，单击可以选择此布局单元格，选中后布局单元格边框变为蓝色，并显示控制柄布局单元格不能覆盖其他单元格，也不能移动到布局表格之外n n利用布局单元格的属性面板可以设置单元格宽度、高度以及内容的对齐方式等图8 8为第一行右侧布局单元格的属性面板设置n n注意：在布局模式下，不能在一个表格的单元格中再绘制布局表格如果要在表格的单元格中嵌套表格，必须使用标准模式18网页制作第3讲网页的布局与定位 2024/9/2319图图8 8 布局单元格的属性面板布局单元格的属性面板19网页制作第3讲网页的布局与定位 2024/9/2320n n在布局表格和布局单元格的属性面板中都有““自动伸展””选项，其作用是使表格或单元格的宽度可以随着浏览器窗口的变化而自动伸展。
n n在给定的布局表格中，只能让一列自动伸展如果把一列设置为自动伸展，那么这一列里所有的单元格都具有自动伸展特性20网页制作第3讲网页的布局与定位 2024/9/23212.首页制作n n在制作首页的过程中，需要插入用FireworksFireworks制作的网页素材，如LogoLogo图标、BannerBanner广告、导航条等n n步骤1 1：设置760×420760×420布局表格的背景颜色为#DDFFDF#DDFFDFn n步骤2 2：在第一行的三个布局单元格中，分别插入LogoLogo图标、插入BannerBanner广告条和输入文字21网页制作第3讲网页的布局与定位 2024/9/2322n n步骤3 3：在第二行中插入利用FireworksFireworks制作的导航条单击““常用””插入栏中的 Fireworks HTMLFireworks HTML按钮，弹出““插入Fireworks HTML”Fireworks HTML”对话框，如图9 9所示，通过【浏览】按钮选择所需的文件dh.htmdh.htm然后单击【确定】按钮，结果如图1010所示22网页制作第3讲网页的布局与定位 2024/9/2323图图9 9 插入插入Fireworks HTMLFireworks HTML对话框对话框23网页制作第3讲网页的布局与定位 2024/9/2324图图10 10 插入插入LogoLogo、、BannerBanner和导航条和导航条24网页制作第3讲网页的布局与定位 2024/9/2325n n步骤4 4：在内容区插入图片、输入相关文字，在页面范围的下端输入版权声明。
文字的大小为10pt10pt，版权声明布局单元格的颜色为# #C8F7FEC8F7FE内容添加完成后的结果如图1111所示n n步骤5 5：切换到标准视图模式下，选中最外层的表格将其设置为居中对齐，保存文档后，预览效果，如前面的图2 2所示25网页制作第3讲网页的布局与定位 2024/9/2326图图11 11 内容添加完成效果内容添加完成效果26网页制作第3讲网页的布局与定位 2024/9/2327（二）、利用表格进行布局（二）、利用表格进行布局n n表格是一种能够有效地描述信息的组织方式在WebWeb页面中，表格也被用来控制““空白区域””，即空白文字、图形及其他所有页面元素之间及周围区域也就是说，使用表格可以无所不及地控制页面布局下面介绍利用表格制作一个如图1212所示的动物大观页面daguan.htmdaguan.htm27网页制作第3讲网页的布局与定位 2024/9/2328图图12 12 动物大观页面布局动物大观页面布局28网页制作第3讲网页的布局与定位 2024/9/23291.1.插入表格插入表格n n在一个表格中插入另一个表格实现表格的嵌套，这是网页排版常用的手段之一。
在DreamweaverDreamweaver的文档窗口中插入表格，可以按照如下方法操作：n n步骤1 1：新建页面daguan.htmdaguan.htm，设置页面属性，标题为动物大观，上、下、左、右边界均为0 029网页制作第3讲网页的布局与定位 2024/9/2330n n步骤2 2：在标准视图模式下，单击““布局””或““常用””插入栏中的插入表格按钮，出现““表格””设置对话框，设置表格的行数为4 4、列数为1 1、宽度为760760像素，如图1313所示n n注意：设置表格宽度时，其单位可用百分比或像素表示在进行页面布局时，建议第一层表格（定义页面使用的范围）的宽度单位使用像素30网页制作第3讲网页的布局与定位 2024/9/2331图图13 13 设置表格对话框设置表格对话框31网页制作第3讲网页的布局与定位 2024/9/2332n n步骤3 3：单击【确定】按钮，页面中插入一个4 4行1 1列的表格，如图1414所示图图14 14 插入表格插入表格32网页制作第3讲网页的布局与定位 2024/9/2333n n步骤4 4：选中表格，在其属性面板中进行属性设置表格高度为420420、居中对齐，表格的属性面板如图1515所示。
图图15 15 表格属性面板表格属性面板33网页制作第3讲网页的布局与定位 2024/9/2334n n步骤5 5：利用如图1616所示的单元格属性面板设置各单元格的属性4 4行的高度分别为8080、3030、280280、3030，每个单元格都居中对齐，设置后的结果如图1717所示34网页制作第3讲网页的布局与定位 2024/9/2335图图16 16 单元格属性面板单元格属性面板拆分单拆分单元格元格合并单合并单元格元格图图17 17 设置单元格后的效果设置单元格后的效果35网页制作第3讲网页的布局与定位 2024/9/2336n n步骤5 5：在第一行中插入一个1 1行3 3列的表格，3 3个单元格的宽度分别为8080、600600、8080在第3 3行中插入一个3 3行4 4列的表格，3 3行的高度分别为4040、120120、120120，4 4列的宽度分别均为190190，所有单元格居中对齐，效果如图1818所示36网页制作第3讲网页的布局与定位 2024/9/2337图图18 18 嵌套插入表格的效果嵌套插入表格的效果37网页制作第3讲网页的布局与定位 2024/9/23382.2.添加内容添加内容n n步骤步骤1 1 1 1：设置：设置760×420760×420760×420760×420表格的背景颜色为表格的背景颜色为#99#99#99#99CCFFCCFFCCFFCCFF。
n n步骤步骤2 2 2 2：在第一行的三个布局单元格中，分别：在第一行的三个布局单元格中，分别插入插入LogoLogoLogoLogo图标、图标、BannerBannerBannerBanner广告条和输入文字；在广告条和输入文字；在第二行中插入利用第二行中插入利用FireworksFireworksFireworksFireworks制作的导航条；制作的导航条；在第三行中输入相关文字、插入所需图像；在在第三行中输入相关文字、插入所需图像；在第四行中输入版权声明第四行中输入版权声明n n步骤步骤3 3 3 3：保存文档后，预览效果，如图：保存文档后，预览效果，如图12121212所示38网页制作第3讲网页的布局与定位 2024/9/2339（三）、层的应用（三）、层的应用n nDreamweaverDreamweaverDreamweaverDreamweaver中的层相当于一个中的层相当于一个容器容器，它可以，它可以包含所有在包含所有在HTMLHTMLHTMLHTML文件中出现的元素层文件中出现的元素层可以放可以放置在页面的任何位置置在页面的任何位置，利用层可以方便而又精，利用层可以方便而又精确地定位页面元素。
层可以使元素在页面中的确地定位页面元素层可以使元素在页面中的定位达到定位达到像素级的精确度像素级的精确度n n层更为重要的一项作用是层更为重要的一项作用是用来实现页面元素的用来实现页面元素的重叠重叠，层还与，层还与DreamweaverDreamweaverDreamweaverDreamweaver的许多高级特性紧的许多高级特性紧密相关，例如使用行为可以对层进行操作与控密相关，例如使用行为可以对层进行操作与控制n n下面介绍如何创建和使用层来组织页面元素，下面介绍如何创建和使用层来组织页面元素，并创建如图并创建如图19191919所示的页面所示的页面39网页制作第3讲网页的布局与定位 2024/9/2340图图19 19 利用层技术创建的页面预览效果利用层技术创建的页面预览效果40网页制作第3讲网页的布局与定位 2024/9/23411.创建层n n创建一个层可以使用创建一个层可以使用插入、拖动或绘制插入、拖动或绘制等方法层一旦被创建，就可以应用层一旦被创建，就可以应用LayersLayersLayersLayers面板选中它，面板选中它，或将它嵌套在其他层中，或改变它的叠放顺序或将它嵌套在其他层中，或改变它的叠放顺序。
n n层的参数选择决定了层的默认属性（如标记、层的参数选择决定了层的默认属性（如标记、可见性、高度和宽度等）如果要改变这些设可见性、高度和宽度等）如果要改变这些设置，可选择置，可选择【编辑】【编辑】→→→→【首选参数】【首选参数】命令，在命令，在弹出的弹出的““““首选参数首选参数””””对话框中选中层选项，如图对话框中选中层选项，如图20202020所示，重新设置属性所示，重新设置属性41网页制作第3讲网页的布局与定位 2024/9/2342图图20 20 首选参数中的层选项首选参数中的层选项42网页制作第3讲网页的布局与定位 2024/9/2343利用层来布局页面的操作如下：利用层来布局页面的操作如下：n n步骤1 1：新建页面katong.htmkatong.htm，设置页面属性，标题为卡通动物，上、下、左、右边界均为0 0n n步骤2 2：在标准视图模式下，单击““布局””插入栏中的 插入层按钮或执行【插入】→→【布局对象】→→【层】命令，在页面中单击并拖动鼠标创建层，此时页面的左上角会出现一个标记选中层，在其属性面板中进行属性设置，如图2121所示绘制层的效果如图2222所示。
43网页制作第3讲网页的布局与定位 2024/9/2344图图21 21 层的属性面板层的属性面板图图2 22 2 创创建建层层44网页制作第3讲网页的布局与定位 2024/9/2345n n步骤3 3：在第一个层嵌套其他的层，效果如图2323所示嵌套层是指包含在其他层中的层，创建嵌套层的好处是能确保此层位于其父层的上方使用ShiftShift键同时选中多个层，执行【修改】→→【对齐】→→【设置宽度相同】和【修改】→→【对齐】→→【设置高度相同】命令，可使多个层的宽度、高度一致45网页制作第3讲网页的布局与定位 2024/9/2346图图23 23 绘制嵌套层绘制嵌套层46网页制作第3讲网页的布局与定位 2024/9/23472.插入内容n n将光标定位在需要插入内容的层中，输入文本或插入图像预览效果如图1919所示47网页制作第3讲网页的布局与定位 2024/9/23483.层面板n n选择【窗口】→→【层】命令可以打开层面板，图2424为katong.htmkatong.htm文件的层面板图图2 24 4 层层面面版版48网页制作第3讲网页的布局与定位 2024/9/2349n n在层面板中，层以层名堆栈列表的形式显示，最先生成的层位于列表底部，最后生成的位于列表的上方。
n n嵌套的层会以连接符与父层相连，以表明从属关系单击父层旁边的减号可以隐藏嵌套子层，单击父层旁边的加号可以显示隐藏的嵌套子层n n另外，层名称前紧闭的眼睛图标 表示该层目前不可见单击该图标，则变为睁开的眼睛图标，表示该层将在页面中显示出来单击层名称，则该层被选中，并出现深蓝色选取标记49网页制作第3讲网页的布局与定位 2024/9/2350n n在层面板中可以完成禁止层重叠、改变层的可见性、嵌套层、改变层的堆栈顺序以及选中一个或多个层等操作在创建一个层时若要防止它与其他层发生重叠，需在层面板中选中““防止重叠””复选框50网页制作第3讲网页的布局与定位 2024/9/2351注意：n n在在HTMLHTMLHTMLHTML代码中，堆栈顺序或代码中，堆栈顺序或Z-IndexZ-IndexZ-IndexZ-Index决定了浏决定了浏览器中层的顺序在层面板中改变层的堆栈顺览器中层的顺序在层面板中改变层的堆栈顺序，可按如下步骤进行操作：序，可按如下步骤进行操作：n n步骤步骤1 1 1 1：选择【：选择【窗口】窗口】→→→→【层】【层】命令，打层面命令，打层面板n n步骤步骤2 2 2 2：在层面板中的：在层面板中的“Z”“Z”“Z”“Z”栏栏中，单击要改变的中，单击要改变的层所对应的数字。
层所对应的数字输入一个比当前数字大的数输入一个比当前数字大的数字将后移层的堆栈顺序；输入一个比当前数字字将后移层的堆栈顺序；输入一个比当前数字小的数字将前移层的堆栈顺序小的数字将前移层的堆栈顺序在层属性面板在层属性面板的的“Z“Z“Z“Z轴轴””””文本框文本框中输入一个数字，也可以改变中输入一个数字，也可以改变层的堆栈顺序层的堆栈顺序51网页制作第3讲网页的布局与定位 2024/9/23524.层与表格的互相转换n n使用层可以定位页面中的内容，与表格相比，使用层可以定位页面中的内容，与表格相比，层更易于操作和更改页面设计因此用户可以层更易于操作和更改页面设计因此用户可以利用层的特点快速设计一个页面，同时对其页利用层的特点快速设计一个页面，同时对其页面设计进行优化，然后将其转化为表格面设计进行优化，然后将其转化为表格n n通过选择通过选择【修改】【修改】→→→→【转换】【转换】→→→→【表格到层】【表格到层】或【层到表格】或【层到表格】命令，可以进行层和表格之间命令，可以进行层和表格之间的相互转换将的相互转换将katong.htmkatong.htmkatong.htmkatong.htm文件中的层转化为文件中的层转化为表格，操作过程如下：表格，操作过程如下：52网页制作第3讲网页的布局与定位 2024/9/2353n n步骤1 1：打开katong.htmkatong.htm的层面板，移除嵌套层和删除交叠层。
因为在进行层转换表格时，要求页面中不能有交叠层和嵌套层n n步骤2 2：选择【修改】→→【转换】→→【层到表格】命令，弹出如图2525所示的对话框53网页制作第3讲网页的布局与定位 2024/9/2354图图25 25 转换层为表格对话框转换层为表格对话框54网页制作第3讲网页的布局与定位 2024/9/2355步骤步骤3 3：进行设置后，单击【确定】按钮进行设置后，单击【确定】按钮效果如图效果如图2626所示所示图图26 26 层转换为表格后的效果层转换为表格后的效果 55网页制作第3讲网页的布局与定位 2024/9/2356（四）、框架的应用（四）、框架的应用n n 框架主要用于在一个浏览窗口中显示多个HTMLHTML文档通过构建这些文档之间的相互关系，从而实现文档导航、浏览以及操作等目的56网页制作第3讲网页的布局与定位 2024/9/23571.框架技术n n利用框架可以将浏览器窗口分隔成几个不同的利用框架可以将浏览器窗口分隔成几个不同的区域，每个区域中显示不同的文档内容区域，每个区域中显示不同的文档内容n n最常见的方式是将左方或上方的区域设置为目最常见的方式是将左方或上方的区域设置为目录区域，用于显示文档页面的目录索引或导航录区域，用于显示文档页面的目录索引或导航条，而将右方或下方的区域设置为主体区域，条，而将右方或下方的区域设置为主体区域，用于显示网页的主体内容，通过单击不同的目用于显示网页的主体内容，通过单击不同的目录索引项或导航条按钮，就可以在主体区域实录索引项或导航条按钮，就可以在主体区域实现网页之间的导航，在浏览网页的同时，目录现网页之间的导航，在浏览网页的同时，目录索引或导航条始终显示于页面的目录区域中，索引或导航条始终显示于页面的目录区域中，这样便于用户继续浏览其他的网页，如图这样便于用户继续浏览其他的网页，如图27272727所所示。
示57网页制作第3讲网页的布局与定位 2024/9/2358图图27 27 利用框架技术制作的页面利用框架技术制作的页面58网页制作第3讲网页的布局与定位 2024/9/2359n n利用框架技术可以将不同的文档显示在同一个浏览器窗口中通过构建这些显示在同一窗口中的文档之间的相互链接关系，可以实现文档之间的相互控制n n一般来说，框架（FramesFrames）技术主要是通过两种类型的元素来实现的：框架集（FramesetFrameset）和框架（FrameFrame）n n所谓框架集，顾名思义，就是框架的集合框架集实际上是一个页面，用于定义在一个文档窗口中显示多个文档的框架结构n n所谓框架，就是在框架集中被组织和显示的文档在框架集中显示的每个框架事实上都是一个独立存在的HTMLHTML文档59网页制作第3讲网页的布局与定位 2024/9/23602.创建框架n n 框架的构建总是从一个正常的文档开始的，利用DreamweaverDreamweaver可以很容易的将正常方式的文档分割成多个框架窗格，从而构建框架创建框架既可以使用预定义框架格式，也可以使用自定义框架格式操作过程如下：n n步骤1 1：新建一个页面。
60网页制作第3讲网页的布局与定位 2024/9/2361n n步骤2 2：单击““布局””插入栏中的按钮旁的下拉菜单，如图2828所示，也可执行【插入】→→【HTMLHTML】→→【框架】命令，然后选择所需的类型文档窗口会显示框架的结构，如图2929所示利用鼠标拖动框架边框，可以快速改变框架大小61网页制作第3讲网页的布局与定位 2024/9/2362图图29 29 框架结构框架结构图图28 28 框架按钮的下拉菜单框架按钮的下拉菜单62网页制作第3讲网页的布局与定位 2024/9/2363n n步骤步骤3 3 3 3：保存框架执行：保存框架执行【文件】【文件】→→→→【保存全【保存全部】部】命令，按照提示依次保存框架集文档和各命令，按照提示依次保存框架集文档和各框架文档，分别命名为框架文档，分别命名为xiangce.htmxiangce.htmxiangce.htmxiangce.htm、、main.htmmain.htmmain.htmmain.htm、、left.htmleft.htmleft.htmleft.htm、、top.htmtop.htmtop.htmtop.htmn n在在DreamweaverDreamweaverDreamweaverDreamweaver中，可以单独保存某个框架文中，可以单独保存某个框架文档，或单独保存框架集文档本身，也可以将整档，或单独保存框架集文档本身，也可以将整个框架集（包括框架集文档本身以及其中的各个框架集（包括框架集文档本身以及其中的各个框架文档）保存。
如果希望在浏览器中预览个框架文档）保存如果希望在浏览器中预览框架效果，则必须保存各个框架文档以及框架框架效果，则必须保存各个框架文档以及框架集文档，保存文件的数目为框架的个数加集文档，保存文件的数目为框架的个数加1 1 1 163网页制作第3讲网页的布局与定位 2024/9/2364n n选中框架集，执行【文件】→【保存框架页】命令，可保存框架集文档本身单击某个框架区，然后执行【文件】→【保存框架】命令，可保存该框架文档64网页制作第3讲网页的布局与定位 2024/9/2365步骤4：设置各个框架的属性n n方法一：在文档窗口中，单击框架边线选择框架集，其属性面板如图3030所示，框架集的属性可以控制整体属性图图30 30 框架集属性框架集属性 65网页制作第3讲网页的布局与定位 2024/9/2366n n按住AltAlt键，单击框架区可以在框架属性面板中，如图3131所示，进行各框架属性的设置图图31 31 框架属性框架属性66网页制作第3讲网页的布局与定位 2024/9/2367方法二：方法二：n n执行【窗口】→→【框架】命令，打开框架面板，如图3232所示利用框架面板能方便地选择框架和框架集。
单击框架边线可选择框架集，单击某个框架区可以选择该框架图图32 32 框架面板框架面板 67网页制作第3讲网页的布局与定位 2024/9/2368n n此处我们重新命名三个框架的名称，框架页面及框架的名称如图3333所示图图33 33 框架页及框架的名称框架页及框架的名称68网页制作第3讲网页的布局与定位 2024/9/2369步骤步骤4 4：输入内容每一个框架页面都是一：输入内容每一个框架页面都是一个独立的文件，它们可以单独编辑，也可个独立的文件，它们可以单独编辑，也可以在框架集中编辑上框架中输入标题，以在框架集中编辑上框架中输入标题，左框架中输入目录，右框架中为主要内容左框架中输入目录，右框架中为主要内容显示区编辑内容后的效果如图显示区编辑内容后的效果如图3434所示69网页制作第3讲网页的布局与定位 2024/9/2370图图34 34 编辑内容后的效果编辑内容后的效果70网页制作第3讲网页的布局与定位 2024/9/2371n n步骤5 5：创建左侧各个目录的链接文件因为显示的都是图片，所以此处我们使用““创建网站相册””功能来创建各个目录的链接页面以创建海洋动物目录链接的页面为例进行介绍：71网页制作第3讲网页的布局与定位 2024/9/2372过程：n n执行执行【命令】【命令】→→→→【创建网站相册】【创建网站相册】命令，弹出命令，弹出““““创建网站相册创建网站相册””””对话框，进行设置，如图对话框，进行设置，如图35353535所所示。
示n n单击单击【确定】【确定】按钮，按钮，DreamweaverDreamweaverDreamweaverDreamweaver会会启动启动FireworksFireworksFireworksFireworks程序进行图像拍照程序进行图像拍照，然后会弹出相，然后会弹出相册已经建立的提示框，单击册已经建立的提示框，单击【确定】【确定】按钮即可按钮即可网站相册的主页面以网站相册的主页面以index.htmindex.htmindex.htmindex.htm进行命名，放进行命名，放置在目标文件夹中如果置在目标文件夹中如果index.htmindex.htmindex.htmindex.htm已经存在，已经存在，则自动命名为则自动命名为index1.htmindex1.htmindex1.htmindex1.htm，，依次类推依次类推72网页制作第3讲网页的布局与定位 2024/9/2373图图35 35 创建网站相册对话框创建网站相册对话框 73网页制作第3讲网页的布局与定位 2024/9/2374n n步骤步骤6 6 6 6：创建各目录的链接，并设置目标文档：创建各目录的链接，并设置目标文档在哪个框架中被打开。
在哪个框架中被打开n n选中左侧的文字选中左侧的文字““““海洋动物海洋动物””””，在其属性面板中，在其属性面板中进行链接设置，链接到进行链接设置，链接到pages/xiangce/index1.htmpages/xiangce/index1.htmpages/xiangce/index1.htmpages/xiangce/index1.htm，将，将““““目标目标””””选项选项设设置为置为“main”“main”“main”“main”（（右侧框架的名称）右侧框架的名称）这样单击这样单击““““海洋动物海洋动物””””链接时，链接目标文档链接时，链接目标文档index1.htmindex1.htmindex1.htmindex1.htm将在右侧框架被打开将在右侧框架被打开 n n按此方法设置按此方法设置““““哺乳动物哺乳动物””””、、““““爬行动物爬行动物””””、、““““鸟类鸟类””””目录的链接，目录的链接，““““目标目标””””选项设置为选项设置为““““main”main”main”main”n n将将““““首页首页””””链接到站点根目录下首页链接到站点根目录下首页index.htmindex.htmindex.htmindex.htm，，““““目标目标””””设置为设置为“_top”“_top”“_top”“_top”（以整页方式显示）。
以整页方式显示）74网页制作第3讲网页的布局与定位 2024/9/2375步骤步骤7 7：保存后预览效果，如图：保存后预览效果，如图2727所示75网页制作第3讲网页的布局与定位 2024/9/2376在实际进行页面布局时，经常在实际进行页面布局时，经常联合应用几种布局技术，设计联合应用几种布局技术，设计出布局更加合理的页面出布局更加合理的页面76网页制作第3讲网页的布局与定位 2024/9/2377二、网页交互技术网页交互技术n n上网时经常会遇到要求上网者填写一些信息以实现注册或者登陆，然后才有权访问该网页，这是浏览者与网页的一种交互，就如同在生活中人与人之间交流信息一样利用DreamweaverDreamweaver提供的行为控制，可以方便地创建页面中的交互行为77网页制作第3讲网页的布局与定位 2024/9/2378（一）、表单（一）、表单n n 表单（FormsForms）是网页与浏览者交互的一种界面DreamweaverDreamweaver中的表单包括文本域、单选按钮、复选框、菜单/ /列表等表单域在表单设置时，注意将表单域放置在红色表单虚线内如果某表单出现在红色虚线以外，那么在该表单域中填入的信息将不能被发送到WebWeb服务器。
78网页制作第3讲网页的布局与定位 2024/9/2379表单（表单（FormsForms））是网页与浏览者交互的一种是网页与浏览者交互的一种界面下面通过制作如图界面下面通过制作如图3636所示的留言簿所示的留言簿页面介绍表单的相关技术页面介绍表单的相关技术图图36 36 表单页面效果表单页面效果79网页制作第3讲网页的布局与定位 2024/9/23801.创建表单n n操作操作过程如下：n n步骤1 1：新建页面，命名为liuyan.htmliuyan.htm，页面标题为““留言簿””n n步骤2 2：将光标置于将要创建表单的位置，单击如图3737所示““表单””插入栏中的表单按钮，会在文档窗口创建一个表单虚线框，如图3838所示80网页制作第3讲网页的布局与定位 2024/9/2381图图37 37 表单插入栏表单插入栏图图3 38 8 插插入入表表单单虚虚框框81网页制作第3讲网页的布局与定位 2024/9/2382n n步骤步骤3 3 3 3：利用表单属性面板可进行属性设置，：利用表单属性面板可进行属性设置，表单属性面板如图表单属性面板如图39393939所示其中所示其中““““动作动作““““是制表是制表单提供的数据将作何种处理，比如说：单提供的数据将作何种处理，比如说：mailtomailtomailtomailto指将用电子邮件发送到某地。
指将用电子邮件发送到某地图图39 39 表单的属性面板表单的属性面板82网页制作第3讲网页的布局与定位 2024/9/2383n n步骤4 4：为了布局好看，可在表单中创建一个表格，并设置表格的边框和背景颜色，合并最后一行的单元格，效果如图4040所示83网页制作第3讲网页的布局与定位 2024/9/23842.添加表单内容n nDreamweaverDreamweaver中的表单包括文本域、单选按钮、复选框、菜单/ /列表等表单域在表单设置时，注意将表单域放置在红色表单虚线内如果某表单出现在红色虚线以外，那么在该表单域中填入的信息将不能被发送到WebWeb服务器n n向图4040中的表单中添加表单域的操作过程如下：84网页制作第3讲网页的布局与定位 2024/9/2385n n步骤1 1：在第1 1行的第1 1列中输入““姓名””，第2 2列中插入单行文本域将光标定位在第2 2列中，单击““表单””插入栏中的 按钮插入文本域在其属性面板中进行属性设置，输入文本域的名称，选择类型为““单行””文本域，设置如图4141所示85网页制作第3讲网页的布局与定位 2024/9/2386注意：文本框是非常通用的，大多数据信文本框是非常通用的，大多数据信息都可以以文本框形式输入，但访息都可以以文本框形式输入，但访问者使用文本框输入信息时比较麻问者使用文本框输入信息时比较麻烦。
因此，在表单中应尽量少使用烦因此，在表单中应尽量少使用文本框86网页制作第3讲网页的布局与定位 2024/9/2387n n步骤步骤2 2 2 2：在第：在第2 2 2 2行的第行的第1 1 1 1列中输入列中输入““““密码密码””””，第，第2 2 2 2列列中插入密码文本域将光标定位在第中插入密码文本域将光标定位在第2 2 2 2列中，列中，单击单击““““表单表单””””插入栏中的插入栏中的 按钮插入文本域在其按钮插入文本域在其属性面板中进行属性设置，输入文本域的名称，属性面板中进行属性设置，输入文本域的名称，选择类型为选择类型为““““密码密码””””文本域，设置初始值等，属文本域，设置初始值等，属性设置如图性设置如图42424242所示n n预览状态下，在密码文本域中输入的内容时以预览状态下，在密码文本域中输入的内容时以“*”“*”“*”“*”显示87网页制作第3讲网页的布局与定位 2024/9/2388n n步骤3 3：在第3 3行的第1 1列中输入““性别””，第2 2列中插入单选按钮组用于进行性别的选择将光标定位在第2 2列中，单击““表单””插入栏中的按钮，弹出““单选按钮组””对话框，输入内容，如图4343所示，然后单击【确定】按钮即可。
88网页制作第3讲网页的布局与定位 2024/9/2389n n““单选按钮组””对话框的LabelLabel内容将在页面中显示，当用户提交这个表单时，ValueValue中的内容将被发送至服务器端的应用程序中，同一组中的每个单选按钮必须设置不同的值n n选中““男””前面的单选按钮，在其属性面板中设置““初始状态””为““已勾选””，单选按钮的属性面板如图4444所示89网页制作第3讲网页的布局与定位 2024/9/2390n n当用户单击单选按钮组中的某个按钮时，其他按钮就会取消选中状态n n预知所有答案的各种可能项，且只有一种项被选中时，才能使用单选按钮90网页制作第3讲网页的布局与定位 2024/9/2391n n步骤4 4：在第4 4行的第1 1列中输入““职业””，第2 2列中插入下拉菜单用于进行职业的选择将光标定位在第2 2列中，单击““表单””插入栏中的 按钮插入下拉列表在其属性面板中进行属性设置：选择““列表””类型、输入列表名称、添加列表选项等列表属性面板如图4545所示，单击【列表值】按钮后弹出的““列表值””对话框如图4646所示91网页制作第3讲网页的布局与定位 2024/9/2392图图45 45 列表的属性面板列表的属性面板图图46 46 列表值对话框列表值对话框92网页制作第3讲网页的布局与定位 2024/9/2393n n下拉列表和列表框都是使用 按钮来创建的。
下拉列表类似于菜单，单击其右侧的下拉按钮时，弹出一个下拉列表框，在下拉列表框中只能选中其中的一个选项而列表框可以显示多个选项，它要比下拉列表直观，在列表框中可以选中一个或多个选项93网页制作第3讲网页的布局与定位 2024/9/2394n n步骤步骤5 5 5 5：在第：在第5 5 5 5行的第行的第1 1 1 1列中输入列中输入““““喜爱的动物喜爱的动物””””，，第第2 2 2 2列中插入复选框以便进行多项喜爱动物的列中插入复选框以便进行多项喜爱动物的选择将光标定位在第选择将光标定位在第2 2 2 2列中，单击列中，单击““““表单表单””””插入插入栏中的栏中的 按钮按钮插入复选框，在其后输入文字插入复选框，在其后输入文字““““海海洋动物洋动物””””选中复选框，在其属性面板中进行选中复选框，在其属性面板中进行属性设置，输入复选框的名称，设置属性设置，输入复选框的名称，设置““““选定值选定值””””等，复选框的属性面板如图等，复选框的属性面板如图47474747所示当用户提所示当用户提交表单时，交表单时，““““选定值选定值””””选项中的内容将会被发送选项中的内容将会被发送至服务器端的应用程序中。
至服务器端的应用程序中94网页制作第3讲网页的布局与定位 2024/9/2395 再创建其他的复选框，效果如图 再创建其他的复选框，效果如图 再创建其他的复选框，效果如图 再创建其他的复选框，效果如图48484848所示复选框提供了多个选项供访问者选择选中某个复选框提供了多个选项供访问者选择选中某个复选框提供了多个选项供访问者选择选中某个复选框提供了多个选项供访问者选择选中某个复选框时，在相应的方框内标有复选框时，在相应的方框内标有复选框时，在相应的方框内标有复选框时，在相应的方框内标有“√““√““√““√“，去掉，去掉，去掉，去掉“√”“√”“√”“√”则则则则表示不选中该复选框表示不选中该复选框表示不选中该复选框表示不选中该复选框95网页制作第3讲网页的布局与定位 2024/9/2396n n步骤6 6：在第6 6行的第1 1列中输入““畅所欲言””，第2 2列中插入多行文本域以便能输入较多的内容将光标定位在第2 2列中，单击““表单””插入栏中的 按钮可以插入多行文本域在其属性面板中进行属性设置：输入文本域的名称、字符宽度、行数等多行文本域的属性面板如图4949所示96网页制作第3讲网页的布局与定位 2024/9/2397n n单击““表单””插入栏中的插入文本域按钮，然后在其属性面板中选择““类型””为多行，同样也可以创建多行文本域。
图图49 49 多行文本域的属性面板多行文本域的属性面板97网页制作第3讲网页的布局与定位 2024/9/2398n n步骤7 7：在第7 7行的第1 1列中输入““友情链接””，第2 2列中跳转菜单用于选择其他网站的网址将光标定位在第2 2列中，单击““表单””插入栏中的 按钮，弹出““插入跳转菜单””对话框，添加跳转菜单中的各个选项，如图5050所示，然后单击【确定】按钮完成跳转菜单的插入，在文档中出下一个下拉菜单和一个按钮. .98网页制作第3讲网页的布局与定位 2024/9/2399图图50 50 插入跳转菜单对话框插入跳转菜单对话框跳转菜单是一个跳转菜单是一个下拉菜单，其中下拉菜单，其中的每一个选项都的每一个选项都可以设置超级链可以设置超级链接99网页制作第3讲网页的布局与定位 2024/9/23100n n步骤8 8：在最后1 1行中插入提交和重置按钮n n将光标定位在最后1 1行中，单击““表单””插入栏中的按钮插入提交按钮，按钮的属性面板如图5151所示，提交按钮用来发送表单中的数据n n然后再插入一个按钮，将其属性面板的““动作””设置为““重设表单””。
100网页制作第3讲网页的布局与定位 2024/9/23101n n属性面板中的““动作””选项用于指定单击这个按钮时发生的事件n n选中““提交表单””，表示单击按钮时提交表单进行处理；选中““重设表单””，表示单击按钮时清空输入到表单中的数据；选中““无””，表示单击按钮时根据处理脚本进行操作101网页制作第3讲网页的布局与定位 2024/9/23102n n步骤9 9：保存后预览表单102网页制作第3讲网页的布局与定位 2024/9/231033.表单的提交n n无论表单是要提交信息、执行搜索操作还是进无论表单是要提交信息、执行搜索操作还是进行其他处理数据的操作，都需要定义行其他处理数据的操作，都需要定义如何处理如何处理数据和传输数据数据和传输数据，从而发挥表单的作用这种，从而发挥表单的作用这种定义是由定义是由““““属性属性””””栏中的栏中的““““动作动作””””和和““““方法方法””””选项选项来来实现的n n““““动作动作””””用于指明处理表单信息的服务器端应用用于指明处理表单信息的服务器端应用程序（通常是程序（通常是CGICGICGICGI脚本或动态页面）的路径或脚本或动态页面）的路径或URLURLURLURL和文件名，当单击和文件名，当单击““““提交提交””””按钮后将处理表单按钮后将处理表单信息。
信息CGICGICGICGI脚本位于处理表单数据的服务器上脚本位于处理表单数据的服务器上103网页制作第3讲网页的布局与定位 2024/9/23104n n““方法””用于定义表单数据的处理方式n nGetGet方法把表单内容附加到““动作””选项指定的URLURL之后，这些信息在浏览器地址栏里是可见的，显然这并不是传输数据的安全方法由于浏览器和服务器对于URLURL长度的限制，GetGet方法只能传输有限数量的信息，而且这种限制在不同浏览器上也有所不同n nPostPost方法能够比GetGet发表方法发送更多的信息，而且更可靠、更安全，在脚本中发送表单数据时这是最常用的方法，它使用httphttp请求在消息主体发送表单数据104网页制作第3讲网页的布局与定位 2024/9/23105我们将对我们将对我们将对我们将对liuyan.htmliuyan.htmliuyan.htmliuyan.htm文档中的表单进行文档中的表单进行文档中的表单进行文档中的表单进行mailtomailtomailtomailto动动动动作提交设置和表单测试，操作过程如下：作提交设置和表单测试，操作过程如下：作提交设置和表单测试，操作过程如下：作提交设置和表单测试，操作过程如下：n n步骤步骤1 1 1 1：打开：打开liuyan.htmliuyan.htmliuyan.htmliuyan.htm文档，单击表单红色文档，单击表单红色虚线，虚线，选中表单选中表单。
n n步骤步骤2 2 2 2：利用表单属性面板进行属性设置，在：利用表单属性面板进行属性设置，在““““动作动作””””选项中输入选项中输入“mailto:wolf7842@”“mailto:wolf7842@”“mailto:wolf7842@”“mailto:wolf7842@”，在，在““““方法方法””””选项选项选择选择“Post”“Post”“Post”“Post”方式n n步骤步骤3 3 3 3：保存后在浏览器中进行测试单击：保存后在浏览器中进行测试单击【【提交】提交】按钮，弹出如图按钮，弹出如图53535353所示的对话框，单击所示的对话框，单击【确定】【确定】按钮，即可启动相应的电子邮件程序按钮，即可启动相应的电子邮件程序105网页制作第3讲网页的布局与定位 2024/9/23106图图53 53 表单提交对话框表单提交对话框106网页制作第3讲网页的布局与定位 2024/9/23107（二）、行为控制（二）、行为控制n n如果要执行复杂的数据处理，通常需要执行服务器端的脚本或程序如果仅希望执行简单的页面中交互控制，则可以使用客户端的脚本或程序n n所谓客户端，即指脚本程序被包容在当前的网页中，用户可以直接在网页中进行各种动作，实现信息交互，而不必连入InternetInternet服务器。
107网页制作第3讲网页的布局与定位 2024/9/231081.行为事件n n1 1 1 1）行为）行为n n所谓所谓行为（行为（BehaviorBehaviorBehaviorBehavior）），就是在网页中进行的，就是在网页中进行的一系列动作通过这些动作，可以实现用户同一系列动作通过这些动作，可以实现用户同网页的交互，也可以执行某个任务网页的交互，也可以执行某个任务n n一般来说，一个行为应该由一个事件一般来说，一个行为应该由一个事件( ( ( (Event)Event)Event)Event)和和一个动作（一个动作（ActionActionActionAction））组成例如，当用户将鼠组成例如，当用户将鼠标移动到一幅图像上时，这就产生了一个事件，标移动到一幅图像上时，这就产生了一个事件，如果这时候图像变化，则实际上就导致了一个如果这时候图像变化，则实际上就导致了一个动作的发生动作的发生108网页制作第3讲网页的布局与定位 2024/9/23109n n 动作通常由一段JavaScriptJavaScript代码组成，利用这段代码可以完成相应的任务，例如打开浏览器、播放声音和视频等。
在DreamweaverDreamweaver中，可以使用DreamweaverDreamweaver内置的行为往页面中添加JavaScriptJavaScript代码，而不用自己书写，当然，也可以对现有的代码进行修改，使之更符合自己的需要109网页制作第3讲网页的布局与定位 2024/9/23110n n 事件则通常由浏览器所定义，它可以被附加到各种页面元素上，也可以被附加到HTMLHTML标记中通常一个事件总是针对页面元素或标记而言的n n例如，在大多数浏览器中的超级链接上都会发生onMouseOveronMouseOver、onMouseOutonMouseOut和onClickonClick这三种事件当鼠标指针移动到链接上时，就发生链接的onMouseOveronMouseOver事件；当鼠标指针移动到链接之外时，就发生链接的onMouseOutonMouseOut事件；而单击链接时，就发生链接的onClickonClick事件110网页制作第3讲网页的布局与定位 2024/9/23111n n 将事件和动作组合起来，就构成了将事件和动作组合起来，就构成了行为行为，例如，，例如，将将onClickonClickonClickonClick行为同一段行为同一段JavaScriptJavaScriptJavaScriptJavaScript代码相关联，在单代码相关联，在单击鼠标时就可以执行相应的击鼠标时就可以执行相应的JavaScriptJavaScriptJavaScriptJavaScript代码。
代码n n 通常，我们将事件产生的过程称作触发通常，我们将事件产生的过程称作触发n n不是所有的动作都需要用户的干涉才会发生，例如，不是所有的动作都需要用户的干涉才会发生，例如，我们可以指定某个动作每隔我们可以指定某个动作每隔10101010秒执行一次，当然，秒执行一次，当然，这实际上还是由事件触发的，只是这种事件不是通这实际上还是由事件触发的，只是这种事件不是通过用户本身的行为而产生的罢了过用户本身的行为而产生的罢了n n有时候会有多个动作与一个事件相关联，换句话说，有时候会有多个动作与一个事件相关联，换句话说，当事件发生时，会导致多个动作被执行在当事件发生时，会导致多个动作被执行在DreamweaverDreamweaverDreamweaverDreamweaver中，可以指定这些动作的发生顺序，从中，可以指定这些动作的发生顺序，从而实现需要的结果而实现需要的结果111网页制作第3讲网页的布局与定位 2024/9/23112n n（2 2）行为事件n nDreamweaverDreamweaver提供行为控制，可以方便地创建页面中的交互行为利用DreamweaverDreamweaver，不用书写一行代码，就可以实现丰富的页面效果，实现人和网页的交互。
在DreamweaverDreamweaver中，利用行为面版，可以为对象附加JavaScriptJavaScript行为，还可以为以前添加的行为修改参数行为会按事件的字母顺序显示在行为面板中如果对于同一事件可以引发不同的动作，则这些动作将以其执行顺序在行为面板中显示112网页制作第3讲网页的布局与定位 2024/9/231132.附加行为n n 可以将行为附加给整个文件（BodyBody部分），也可以附加给链接、图像、表单元素或任何其他的HTMLHTML元素哪些元素可以接受附加行为取决于浏览器每个事件可以指定多个动作，动作将按顺序列表依次发生下面介绍常用的行为设置113网页制作第3讲网页的布局与定位 2024/9/23114（1）弹出浏览器窗口n n 弹出浏览器窗口可以在加载页面时打开新的浏览窗口，弹出浏览器窗口可以在加载页面时打开新的浏览窗口，用于显示广告或其他各种消息下面以在网站首页弹出用于显示广告或其他各种消息下面以在网站首页弹出广告为例来说明弹出窗口动作的应用，具体操作过程如广告为例来说明弹出窗口动作的应用，具体操作过程如下：下：n n步骤步骤1 1 1 1：新建页面，页面标题：新建页面，页面标题““““弹出窗口弹出窗口””””，上、下、左、，上、下、左、右边界均设置为右边界均设置为0 0 0 0。
在页面中插入一幅在页面中插入一幅130×110130×110130×110130×110的图像n n步骤步骤2 2 2 2：打开：打开index.htmindex.htmindex.htmindex.htm，，将光标定位在最外层表格的外将光标定位在最外层表格的外面，执行【窗口】面，执行【窗口】→→→→【行为】命令，打开行为面板单【行为】命令，打开行为面板单击击 按钮，如图按钮，如图54545454所示，从弹出的行为菜单中选项选择所示，从弹出的行为菜单中选项选择““““打开浏览器窗口打开浏览器窗口””””，弹出如图，弹出如图55555555所示的所示的““““打开浏览器窗口打开浏览器窗口””””对话框114网页制作第3讲网页的布局与定位 2024/9/23115图图54 54 行为面板及行为行为面板及行为115网页制作第3讲网页的布局与定位 2024/9/23116n n步骤3：单击“浏览“按钮选择将在新窗口里加载的ad.htm页面文件，设置窗口宽度和高度分别为130、110，然后单击【确定】按钮116网页制作第3讲网页的布局与定位 2024/9/23117图图55 55 打开浏览器窗口对话框打开浏览器窗口对话框117网页制作第3讲网页的布局与定位 2024/9/23118n n步骤4 4：打开浏览窗口的行为和相应的onLoadonLoad事件显示在行为面板中。
n n步骤5 5：保存文件后在浏览器预览，效果如图5656所示118网页制作第3讲网页的布局与定位 2024/9/23119表单的校验n n DreamweaverDreamweaverDreamweaverDreamweaver中的中的““““检查表单检查表单””””行为，只能设置行为，只能设置文本域的校验我们将文本域的校验我们将liuyan.htmliuyan.htmliuyan.htmliuyan.htm文档中的表文档中的表单进行表单的校验设置和测试，操作过程如下：单进行表单的校验设置和测试，操作过程如下：n n步骤步骤1 1 1 1：打开：打开liuyan.htmliuyan.htmliuyan.htmliuyan.htm文档，选中【提交】按文档，选中【提交】按钮，执行【窗口】钮，执行【窗口】→→→→【行为】命令，打开行为【行为】命令，打开行为面板n n步骤步骤2 2 2 2：单击行为面板中的：单击行为面板中的 按钮，从菜单选按钮，从菜单选项中选择项中选择““““检查表单检查表单””””，弹出，弹出““““检查表单检查表单””””设置对话设置对话框，如图框，如图61616161所示。
选中所示选中““““name”name”name”name”姓名文本域，值姓名文本域，值设置为设置为““““必需的必需的””””，可接受，可接受““““任何东西任何东西””””；选中；选中““““password”password”password”password”密码文本域，值设置为密码文本域，值设置为““““必需的必需的””””，，可接受可接受““““数字数字””””设置完毕后单击【确定】按钮设置完毕后单击【确定】按钮119网页制作第3讲网页的布局与定位 2024/9/23120图图61 61 检查表单对话框检查表单对话框120网页制作第3讲网页的布局与定位 2024/9/23121n n步骤3 3：保存后在浏览器中进行测试在姓名文本域中输入内容，密码文本域中输入数字的内容，再填写其他内容，然后单击【提交】按钮，即可启动相应的电子邮件程序如果姓名文本域中没有输入内容、密码文本域中输入的不是数字，单击【提交】按钮后会弹出如图6262所示的提示框图图62 62 提示框提示框121网页制作第3讲网页的布局与定位 2024/9/23122（3）弹出信息框n n DreamweaverDreamweaverDreamweaverDreamweaver的弹出消息动作是指显示带特定信息的弹出消息动作是指显示带特定信息JavaScriptJavaScriptJavaScriptJavaScript警告。
我们将在警告我们将在katong.htmkatong.htmkatong.htmkatong.htm页面中添加弹页面中添加弹出信息框，具体操作过程如下：出信息框，具体操作过程如下：n n步骤步骤1 1 1 1：打开：打开katong.htmkatong.htmkatong.htmkatong.htm，，执行单击执行单击【窗口】【窗口】→→→→【行为【行为】】命令，打开行为面版命令，打开行为面版n n步骤步骤2 2 2 2：单击文档窗口左下角的：单击文档窗口左下角的
标记，准备将行标记，准备将行为附加给整个页面为附加给整个页面n n步骤步骤3 3 3 3：单击：单击 加号按钮并从行为菜单中选择加号按钮并从行为菜单中选择““““弹出弹出信息信息””””动作命令，弹出如图动作命令，弹出如图63636363所示的对话框，在所示的对话框，在““““消息消息””””文本框中输入文本框中输入““““这里是卡通动物的世界！这里是卡通动物的世界！””””，然后单击，然后单击【确定】【确定】按钮122网页制作第3讲网页的布局与定位 2024/9/23123图图63 63 弹出信息对话框弹出信息对话框123网页制作第3讲网页的布局与定位 2024/9/23124n n步骤4 4：在行为面板中修改行为事件为““onLoad”onLoad”。n n步骤5 5：保存后预览效果，如图6464所示124网页制作第3讲网页的布局与定位 2024/9/23125（4）调用JavaScriptn n 调用JavaScriptJavaScript动作允许设置当某些事件被触发时，调用JavaScriptJavaScript代码，以实现相应的动作调用JavaScriptJavaScript动作的参数设置对话框，如图9-659-65所示，允许输入要执行的JavaScriptJavaScript语句，或者是要调用的函数名称125网页制作第3讲网页的布局与定位 2024/9/23126（5）播放声音n n利用播放声音动作，可以在网页中播放声音文件，例如，你可以设置当网页被完全载入后播放一段音乐，或者是设置当鼠标指针移动到某个对象上时播放声音，提供声音效果调用““播放声音””动作的参数设置对话框进行声音文件的选择，如图6666所示126网页制作第3讲网页的布局与定位 2024/9/23127本章要点本章要点n n1.1.网页布局定位是指把网页元素诸如文本、图片等等按需要放在合适的位置n n2.2.利用布局视图进行页面布局时，一个布局表格中可以嵌套其他布局表格，但是各布局表格之间不能交叉，不允许在布局表格中添加内容，只能在布局单元格中添加内容。
n n3.3.使用表格可以无所不及地控制页面布局127网页制作第3讲网页的布局与定位 2024/9/23128n n4.4.DreamweaverDreamweaver中的层相当于一个容器，它可以包含所有在HTMLHTML文件中出现的元素层可以放置在页面的任何位置n n5.5.利用框架可以浏览器窗口分隔成了几个不同的区域，每个区域中显示不同的文档内容框架集实际上是一个页面，用于定义在一个文档窗口中显示多个文档的框架结构框架集中显示的每个框架事实上都是一个独立存在的HTMLHTML文档如果希望在浏览器中预览框架效果，则必须保存各个框架文档以及框架集文档128网页制作第3讲网页的布局与定位 2024/9/23129n n6.6.表单是网页与浏览者交互的一种界面DreamweaverDreamweaver中的表单包括文本域、单选按钮、复选框、菜单/ /列表等表单域，注意应将表单域放置在红色表单虚线内如果某表单出现在红色虚线以外，那么在该表单域中填入的信息将不能被发送到WebWeb服务器n n7.7.行为就是在网页中进行的一系列动作通过这些动作，可以实现用户同网页的交互，也可以执行某个任务129网页制作第3讲网页的布局与定位 。
