图层与行为时间轴表单框架样式表模板.ppt

《图层与行为时间轴表单框架样式表模板.ppt》由会员分享，可在线阅读，更多相关《图层与行为时间轴表单框架样式表模板.ppt（89页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、图层与行为时间轴表单框架样式表模板 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望网页布局-层n使用图层设计页面布局，可以实现页面使用图层设计页面布局，可以实现页面元素的精确定位元素的精确定位n在图层中可以插入文本、图像、表单等在图层中可以插入文本、图像、表单等页面元素。页面元素。n借助层，可对加入的页面元素进行精确借助层，可对加入的页面元素进行精确定位，还可做出重叠效果和运动效果。定位，还可做出重叠效果和运动效果。9.1 图层与行为图层与行为l 行为行为:某个事

2、件发生时浏览器执行的动作。某个事件发生时浏览器执行的动作。l 行为（行为（Behavior）是由事件（）是由事件（Event）和）和动作（动作（Action）组成的）组成的l 利用行为可以创建一些交互。利用行为可以创建一些交互。9.1.1 9.1.1 图层的基本操作图层的基本操作图层的基本操作图层的基本操作 图层的基本操作包括：图层的基本操作包括：图层的基本操作包括：图层的基本操作包括：创建图层、激活图层、选创建图层、激活图层、选创建图层、激活图层、选创建图层、激活图层、选择图层、移动图层、调整择图层、移动图层、调整择图层、移动图层、调整择图层、移动图层、调整图层的大小、对齐图层和图层的大小、

3、对齐图层和图层的大小、对齐图层和图层的大小、对齐图层和设置图层的背景等。设置图层的背景等。设置图层的背景等。设置图层的背景等。【例例例例9-19-1】页面的中间为一页面的中间为一页面的中间为一页面的中间为一组重叠的图层，显示金、组重叠的图层，显示金、组重叠的图层，显示金、组重叠的图层，显示金、庸、大、侠庸、大、侠庸、大、侠庸、大、侠4 4个字，页面个字，页面个字，页面个字，页面两端分别为显示金庸名著两端分别为显示金庸名著两端分别为显示金庸名著两端分别为显示金庸名著对联效果的图层，实例效对联效果的图层，实例效对联效果的图层，实例效对联效果的图层，实例效果如图果如图果如图果如图9-19-1所示。所

4、示。所示。所示。9.1 9.1 图层与行为图层与行为图层与行为图层与行为图9-1 实例效果【例9-1】9.1.2 9.1.2 图层与行为结合图层与行为结合图层与行为结合图层与行为结合 通过图层和行为的结通过图层和行为的结通过图层和行为的结通过图层和行为的结合可以创造出一些特别的合可以创造出一些特别的合可以创造出一些特别的合可以创造出一些特别的网页效果。网页效果。网页效果。网页效果。【例【例【例【例9-29-2】制作一个交换图】制作一个交换图】制作一个交换图】制作一个交换图像，当鼠标移动到图像上像，当鼠标移动到图像上像，当鼠标移动到图像上像，当鼠标移动到图像上时，图像变换为清晰的图时，图像变换为

5、清晰的图时，图像变换为清晰的图时，图像变换为清晰的图像，同时在图像左下侧显像，同时在图像左下侧显像，同时在图像左下侧显像，同时在图像左下侧显示说明图像的文字图层；示说明图像的文字图层；示说明图像的文字图层；示说明图像的文字图层；当鼠标移动到图像外时，当鼠标移动到图像外时，当鼠标移动到图像外时，当鼠标移动到图像外时，恢复显示原来模糊的图像，恢复显示原来模糊的图像，恢复显示原来模糊的图像，恢复显示原来模糊的图像，同时说明图像的文字图层同时说明图像的文字图层同时说明图像的文字图层同时说明图像的文字图层消失，实例效果如图消失，实例效果如图消失，实例效果如图消失，实例效果如图9-219-21所示。所示。

6、所示。所示。9.1 9.1 图层与行为图层与行为图层与行为图层与行为【例9-2】图9-21 实例效果添加行为n选择IE6.0浏览器n插入图片n交换图像：onMouseOut恢复交换图像 onMouseOver交换图像n插图文字图层：默认（隐藏）n选中图像，添加行为 onMouseOut（显示-隐藏层）隐藏 onMouseOver（显示-隐藏层）显示行为和动作n可附加行为的对象：整个文档、链接、图像、表单元素和任何html元素n注意应用dreamweaver提供的动作增加行为n打开行为面板n选定须增加行为的对象n选定动作n指定触发该动作的事件行为面板的操作n编辑行为：选定附加行为的对象，修改该编

7、辑行为：选定附加行为的对象，修改该行为的参数行为的参数n改变行为中的触发事件的顺序改变行为中的触发事件的顺序n增加行为增加行为n删除行为删除行为常用动作n图像的交换n弹出信息、弹出菜单n播放声音n显示弹出式菜单n检查表单n调用javaScriptn检查浏览器：常用于检查浏览器：常用于body标签标签常用动作n检查插件n控制shockwave或flashn拖动层n转到urln打开浏览器窗口n预载入图像n播放事件轴n转到时间轴帧有些动作只在有些动作只在链接状态下有链接状态下有效效创建层n使用使用Insert菜单创建层：菜单创建层：Insert菜单菜单-Layer选项选项n通过对象调板创建层：通过对

8、象调板创建层：Window菜单菜单-Object-Draw Layer按钮按钮n使用使用CSS样式创建层：样式创建层：Window菜单菜单-CSS Styles选项选项n嵌套层：就是在一个层内创建新的层嵌套层：就是在一个层内创建新的层n选中这个层，可用鼠标拖动，将层移至页选中这个层，可用鼠标拖动，将层移至页面合适的位置。面合适的位置。n用鼠标拖动边线上的黑色方块，可调节层用鼠标拖动边线上的黑色方块，可调节层的大小。的大小。n 用鼠标点击层内的任意位置，这时可往层用鼠标点击层内的任意位置，这时可往层内加入文本、图像等内容。内加入文本、图像等内容。n层中可再嵌套层。层中可再嵌套层。嵌套层的操作n将

9、插入点光标放入父层内，然后使用将插入点光标放入父层内，然后使用Insert菜单的菜单的Layers选项；选项；n将对象调板的将对象调板的Layer按钮拖到父层内；按钮拖到父层内；n按住按住Ctrl键，并在层调板内，将子层的名称键，并在层调板内，将子层的名称拖到父层的名称上拖到父层的名称上。修改层n选择层选择层1）激活层：用鼠标单击层所属的区域）激活层：用鼠标单击层所属的区域2）选择某一个层：）选择某一个层：用鼠标单击文档的层标识，使层的边框上出现用鼠标单击文档的层标识，使层的边框上出现黑色的小方块；黑色的小方块；用鼠标单击层的选择手柄；用鼠标单击层的选择手柄；用鼠标单击层的边框；用鼠标单击层的

10、边框；用鼠标单击层调板内层的名称。用鼠标单击层调板内层的名称。3）选择多个层：）选择多个层：按住按住Shift键的同时，依次单击多个层；键的同时，依次单击多个层；按住按住Shift键的同时，依次在层调板的名称列键的同时，依次在层调板的名称列表内选择；表内选择；按住按住Shift键的同时，依次用鼠标单击层所在键的同时，依次用鼠标单击层所在的区域。的区域。4）取消选择：在文档窗口内单击鼠标）取消选择：在文档窗口内单击鼠标 5）删除层：选定层后，按）删除层：选定层后，按Delete键键n改变层的大小：鼠标拖曳或属性调板改变层的大小：鼠标拖曳或属性调板n改变层的位置：鼠标拖曳改变层的位置：鼠标拖曳 n

11、对齐层：选定多个层、对齐层：选定多个层、Modify菜单菜单-Align选项选项n注意：对齐层时，系统自动将最后选定的层作注意：对齐层时，系统自动将最后选定的层作为对齐标准为对齐标准设置图层参数和图层属性n设置图层参数设置图层参数1）使用图层参数可以为新创建的层定义默）使用图层参数可以为新创建的层定义默认设置认设置2）操作：）操作：Edit菜单菜单-Preferencesn设置图层属性：属性调板设置图层属性：属性调板n“层编号层编号“后填入你给这个层的命名。后填入你给这个层的命名。n“左左”和和“上上”是层的定位，即在页面中的是层的定位，即在页面中的位置。位置。nZ轴：是页面元素的轴：是页面元

12、素的Z值，在后面填入一个数值，在后面填入一个数值。当页面元素因定位而重叠时，值。当页面元素因定位而重叠时，Z值大的页值大的页面元素将在最表面显示，覆盖或部分覆盖面元素将在最表面显示，覆盖或部分覆盖Z值值小的页面元素。小的页面元素。n“可见性可见性”是设置页面元素是否可视。不设是设置页面元素是否可视。不设置当然是可视。其后的下拉选框有四个选项置当然是可视。其后的下拉选框有四个选项default、inherit、visible和和hidden。1.default是使用浏览器默认值，这个默认值是使用浏览器默认值，这个默认值一般是可视。一般是可视。2.inherit是继承母体元素的可视性设置，是继承母

13、体元素的可视性设置，3.visible是可视是可视4.hidden是不可视。是不可视。n背景图像。背景图像。n层的背景颜色。层的背景颜色。n“溢出溢出”是如何处理插入层内的元素超过层本身的宽是如何处理插入层内的元素超过层本身的宽或高的部分。其后的下拉选框有四个选项或高的部分。其后的下拉选框有四个选项visible、hidden、scroll和和auto。visible是可视是可视 hidden是不可视，是不可视，scroll是可滚动是可滚动 auto是由浏览器默认。是由浏览器默认。n剪辑：在层中间再限定一个区域，来放置插入层里的剪辑：在层中间再限定一个区域，来放置插入层里的页面元素。页面元素。

14、L是是Clip区域左边离层左边的距离，区域左边离层左边的距离，T是是Clip区域上边离层上边的距离，区域上边离层上边的距离，R是是Clip区域右边离层右边的距离区域右边离层右边的距离 B是是Clip区域下边离定位区域下边的距离。区域下边离定位区域下边的距离。n其实层的各种设置，其原理就是用其实层的各种设置，其原理就是用CSS对对DIV等等HTML标记的定位、背景及其它属性的设置。标记的定位、背景及其它属性的设置。层面板n层面板上将列出当前页面所有的层。层面板上将列出当前页面所有的层。nName下面是各层的命名下面是各层的命名nZ下面是各层的下面是各层的Z值，点击这个值后可修改。值，点击这个值后

15、可修改。n眼睛图标下面是显示各层的可视性。点击可调出三种状眼睛图标下面是显示各层的可视性。点击可调出三种状态态无图标、睁开的眼睛图标和闭上的眼睛图标。无图标、睁开的眼睛图标和闭上的眼睛图标。1.无图标表示该层的可视性使用默认值，无图标表示该层的可视性使用默认值，2.睁开的眼睛图标表示该层可视，睁开的眼睛图标表示该层可视，3.闭上的眼睛图标表示该层不可视。闭上的眼睛图标表示该层不可视。n选中面板选中面板Prevent Overlaps上的选框，则各层之间不能有重合部上的选框，则各层之间不能有重合部分，层中也不能再嵌套层。分，层中也不能再嵌套层。层与表格n将层转换为表格：将层转换为表格：Modif

16、y菜单菜单-Convert选选项项-Layers to Tablen将表格转换为层：将表格转换为层：Modify菜单菜单-Convert选选项项-Tables to Layers 9.2.1 9.2.1 时间轴面板时间轴面板时间轴面板时间轴面板 时间轴面板显示层与图像随时间变化的属性。执行时间轴面板显示层与图像随时间变化的属性。执行时间轴面板显示层与图像随时间变化的属性。执行时间轴面板显示层与图像随时间变化的属性。执行“窗口窗口窗口窗口”“时间轴时间轴时间轴时间轴”命令，或者按快捷键命令，或者按快捷键命令，或者按快捷键命令，或者按快捷键AltAlt+F9F9，打开时，打开时，打开时，打开时间轴

17、面板，如图间轴面板，如图间轴面板，如图间轴面板，如图9-349-34所示。所示。所示。所示。9.2 9.2 时间轴时间轴时间轴时间轴图9-34 时间轴面板 9.2.2 9.2.2 创建时间轴动画创建时间轴动画创建时间轴动画创建时间轴动画 时间轴是一种用来控制网页中的层在每一秒的位置的工具。时间轴是一种用来控制网页中的层在每一秒的位置的工具。时间轴是一种用来控制网页中的层在每一秒的位置的工具。时间轴是一种用来控制网页中的层在每一秒的位置的工具。它通过在不同的时间改变层的位置、大小、可见性或叠放次序它通过在不同的时间改变层的位置、大小、可见性或叠放次序它通过在不同的时间改变层的位置、大小、可见性或

18、叠放次序它通过在不同的时间改变层的位置、大小、可见性或叠放次序等来创建动画。等来创建动画。等来创建动画。等来创建动画。【例【例【例【例9-39-3】制作一条小鱼沿着简单的曲线移动的时间轴动画，实】制作一条小鱼沿着简单的曲线移动的时间轴动画，实】制作一条小鱼沿着简单的曲线移动的时间轴动画，实】制作一条小鱼沿着简单的曲线移动的时间轴动画，实例效果如图例效果如图例效果如图例效果如图9-359-35所示。所示。所示。所示。9.2 9.2 时间轴时间轴时间轴时间轴图9-35 实例效果【例9-3】9.2.3 9.2.3 记录路径记录路径记录路径记录路径 要创建复杂的曲线运动，可以使用记录拖动路径的方法，要

19、创建复杂的曲线运动，可以使用记录拖动路径的方法，要创建复杂的曲线运动，可以使用记录拖动路径的方法，要创建复杂的曲线运动，可以使用记录拖动路径的方法，这比在关键帧上改变运动轨迹更为方便。这比在关键帧上改变运动轨迹更为方便。这比在关键帧上改变运动轨迹更为方便。这比在关键帧上改变运动轨迹更为方便。【例例例例9-49-4】制作一个在网页上自由飘动的广告的时间轴动画，实制作一个在网页上自由飘动的广告的时间轴动画，实制作一个在网页上自由飘动的广告的时间轴动画，实制作一个在网页上自由飘动的广告的时间轴动画，实例效果如图例效果如图例效果如图例效果如图9-439-43所示。所示。所示。所示。9.2 9.2 时间

20、轴时间轴时间轴时间轴【例9-4】记录路径记录路径n插入图层，插入图像n选择图层，执行“修改”-”时间轴“-录制层命令，拖动图层，出现+正确 9.2.4 9.2.4 使用时间轴改变图像属性使用时间轴改变图像属性使用时间轴改变图像属性使用时间轴改变图像属性 除了可以利用时间轴移动层制作动画以外，还可以在时间除了可以利用时间轴移动层制作动画以外，还可以在时间除了可以利用时间轴移动层制作动画以外，还可以在时间除了可以利用时间轴移动层制作动画以外，还可以在时间轴的不同关键帧上改变图像的源文件、层的属性，产生丰富的轴的不同关键帧上改变图像的源文件、层的属性，产生丰富的轴的不同关键帧上改变图像的源文件、层的

21、属性，产生丰富的轴的不同关键帧上改变图像的源文件、层的属性，产生丰富的动画效果。动画效果。动画效果。动画效果。【例【例【例【例9-59-5】制作一个幻灯片轮流播放效果的】制作一个幻灯片轮流播放效果的】制作一个幻灯片轮流播放效果的】制作一个幻灯片轮流播放效果的LogoLogo广告动画，实现广告动画，实现广告动画，实现广告动画，实现一组广告画面不断轮流切换的效果，如图一组广告画面不断轮流切换的效果，如图一组广告画面不断轮流切换的效果，如图一组广告画面不断轮流切换的效果，如图9-479-47所示。所示。所示。所示。9.2 9.2 时间轴时间轴时间轴时间轴【例9-5】图9-47 实例效果使用时间轴改变

22、图像属性使用时间轴改变图像属性n添加图像n将图像添加到时间轴n拖动尾关键侦n在中间增加关键侦，并且选择相应的图像 9.2.5 9.2.5 使用时间轴改变图层属性使用时间轴改变图层属性使用时间轴改变图层属性使用时间轴改变图层属性 在时间轴中还可以改变层的可见性、大小及叠放次序等。在时间轴中还可以改变层的可见性、大小及叠放次序等。在时间轴中还可以改变层的可见性、大小及叠放次序等。在时间轴中还可以改变层的可见性、大小及叠放次序等。【例例例例9-69-6】制作一幅卷轴式展开的国画，从左向右逐渐推出显示，制作一幅卷轴式展开的国画，从左向右逐渐推出显示，制作一幅卷轴式展开的国画，从左向右逐渐推出显示，制作

23、一幅卷轴式展开的国画，从左向右逐渐推出显示，效果如图效果如图效果如图效果如图9-519-51所示。所示。所示。所示。9.2 9.2 时间轴时间轴时间轴时间轴【例9-6】图9-51 实例效果1 1时间轴（时间轴（TimelineTimeline）的功能）的功能n网页中制作出动画网页中制作出动画n改变层的大小改变层的大小n改变层的可见性改变层的可见性n改变层的叠放顺序改变层的叠放顺序n改变图片的属性只能改变图片的源改变图片的属性只能改变图片的源 动态效果动态效果时间轴和行为概述时间轴和行为概述时间轴的控制面板n自动播放：播放时间轴动作通过onload时间添加到文档，页面载入时间轴便可以播放；1 1

24、TimelinesTimelines面板面板4.8.2 4.8.2 使用时间轴创建动画使用时间轴创建动画Timelines面板面板2 2使用时间轴创建动画使用时间轴创建动画（1 1）创建）创建Layer（层）动画（层）动画（2）创建）创建Image（图像）动画（图像）动画4.8.2 4.8.2 使用时间轴创建动画使用时间轴创建动画3 3编辑时间轴编辑时间轴 新建、删除、查看与重命令时间轴新建、删除、查看与重命令时间轴 给时间轴添加动作、对象、帧与关键帧给时间轴添加动作、对象、帧与关键帧 将已有的动画应用于其他对象将已有的动画应用于其他对象4.8.2 4.8.2 使用时间轴创建动画使用时间轴创建

25、动画1 1行为面板行为面板2 2内置行为内置行为4.8.3 4.8.3 内置行为内置行为行为面板行为面板 4.8.4 4.8.4 将行为应用到时间轴将行为应用到时间轴1.1.时间轴面板中多个时间轴之间的转换时间轴面板中多个时间轴之间的转换 GO to Time FrameGO to Time Frame（转到某一帧）（转到某一帧）Play Timeline Play Timeline（播放某一时间轴）（播放某一时间轴）Stop Timeline Stop Timeline（停止播放某一时间轴）（停止播放某一时间轴）2.Timeline2.Timeline中包含的中包含的3 3种行为种行为关键帧

26、的应用n层的运动变为曲线录制层路径n插入层n在层内插入图片n选中层，选择主菜单“修改”“时间轴”“录制层路径”n在编辑窗口中，按线路拖动层后松开鼠标，则自动在时间轴面板中创建了一定数目的关键帧。向时间轴添加对象n只有图像和图层可以添加到时间轴；n把选定的对象放在图层内添加到时间轴编辑时间轴动画n增加或缩短动画播放时间n改变动画的开始时间n修改关键帧n添加或删除帧n复制动画表单概述n表单：是使访问者与网站或网站管理人交互。表单：是使访问者与网站或网站管理人交互。n用来收集浏览者的用户名、密码、用来收集浏览者的用户名、密码、E-mail地址、地址、个人爱好和联系地址等用户信息的输入区域集合。个人爱

27、好和联系地址等用户信息的输入区域集合。n表单的工作流程：表单的工作流程：填写信息填写信息-提交信息提交信息-Web服务器服务器-CGI（公共网关（公共网关接口）接口）9.3.1 9.3.1 表单的基本概念表单的基本概念表单的基本概念表单的基本概念1 1表单的工作原理表单的工作原理表单的工作原理表单的工作原理 表单的作用是从客户端收集信息。当访问者在表单中输入表单的作用是从客户端收集信息。当访问者在表单中输入表单的作用是从客户端收集信息。当访问者在表单中输入表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器信息，单击提交按钮后，这些信息将被发

28、送到服务器，服务器信息，单击提交按钮后，这些信息将被发送到服务器，服务器信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。用于处理表单数据端脚本或应用程序将对这些信息进行处理。用于处理表单数据端脚本或应用程序将对这些信息进行处理。用于处理表单数据端脚本或应用程序将对这些信息进行处理。用于处理表单数据的常用服务器端技术包括的常用服务器端技术包括的常用服务器端技术包括的常用服务器端技术包括Macromedia ColdFusionMacromedia ColdFusion，Microsoft Microsoft Active Server PagesAct

29、ive Server Pages（ASPASP）和）和）和）和PHPPHP。服务器进行响应时，会将。服务器进行响应时，会将。服务器进行响应时，会将。服务器进行响应时，会将被请求信息发送回用户（或客户端。被请求信息发送回用户（或客户端。被请求信息发送回用户（或客户端。被请求信息发送回用户（或客户端。2 2表单对象表单对象表单对象表单对象 表单、文本字段、隐藏域、文本域、复选框、单选按钮、单选表单、文本字段、隐藏域、文本域、复选框、单选按钮、单选表单、文本字段、隐藏域、文本域、复选框、单选按钮、单选表单、文本字段、隐藏域、文本域、复选框、单选按钮、单选按钮组、列表按钮组、列表按钮组、列表按钮组、列

30、表/菜单、跳转菜单、图像域、文件域、命令按钮、菜单、跳转菜单、图像域、文件域、命令按钮、菜单、跳转菜单、图像域、文件域、命令按钮、菜单、跳转菜单、图像域、文件域、命令按钮、标签和字段集。标签和字段集。标签和字段集。标签和字段集。9.3 9.3 表单表单表单表单表单的作用n根据访问者输入的信息，自动生成页面反根据访问者输入的信息，自动生成页面反馈给访问者；馈给访问者；n为网站收集访问者输入的信息。为网站收集访问者输入的信息。表单的使用n一部分是表单本身，即怎样把表单作为页一部分是表单本身，即怎样把表单作为页面元素加入到网页页面。面元素加入到网页页面。n另一部分为表单的处理，即调用服务器端另一部分

31、为表单的处理，即调用服务器端的脚本程序，或使以电子邮件的方式发送。的脚本程序，或使以电子邮件的方式发送。9.3.3 9.3.3 检查表单检查表单检查表单检查表单【例例例例9-89-8】以例以例以例以例9-79-7中的热播电视剧收视调查表表单为基础，在中的热播电视剧收视调查表表单为基础，在中的热播电视剧收视调查表表单为基础，在中的热播电视剧收视调查表表单为基础，在表单中使用表单中使用表单中使用表单中使用“检查表单检查表单检查表单检查表单”行为。检查规则设置为行为。检查规则设置为行为。检查规则设置为行为。检查规则设置为“调查者姓名调查者姓名调查者姓名调查者姓名”和和和和“调查者密码调查者密码调查者

32、密码调查者密码”文本框必须输入内容，如果没有输入内容，文本框必须输入内容，如果没有输入内容，文本框必须输入内容，如果没有输入内容，文本框必须输入内容，如果没有输入内容，则表单提交后弹出警告信息；电子邮件地址必须合乎邮件地址则表单提交后弹出警告信息；电子邮件地址必须合乎邮件地址则表单提交后弹出警告信息；电子邮件地址必须合乎邮件地址则表单提交后弹出警告信息；电子邮件地址必须合乎邮件地址的格式，否则表单提交后弹出警告信息，实例效果如图的格式，否则表单提交后弹出警告信息，实例效果如图的格式，否则表单提交后弹出警告信息，实例效果如图的格式，否则表单提交后弹出警告信息，实例效果如图9-819-81所所所所

33、示。示。示。示。9.3 9.3 表单表单表单表单【例9-8】图9-81 实例效果【例9-7】n描述表单的描述表单的HTML源代码。源代码。n用用于于处处理理用用户户在在表表单单域域中中输输入入的的信信息息的的服服务器端应用程序或客户端脚本。务器端应用程序或客户端脚本。表单表单 表单简介表单简介 Object Object面板的表单元素面板的表单元素 表单有两个重要组成部分：表单有两个重要组成部分：表单属性n“表单名称表单名称”：JavaScript和和VBScrpt等教本语等教本语言要通过表单名称进行控制；言要通过表单名称进行控制；n动作：识别处理表单信息的服务器端应用程序。动作：识别处理表单

34、信息的服务器端应用程序。n方法：方法：Get:将表单值追加到将表单值追加到URL并发送服务器并发送服务器get请求；请求；POST：在消息正文中发送表单值并发送服务器：在消息正文中发送表单值并发送服务器post请求。请求。n动作一栏中若用电子邮件的发送方式：动作一栏中若用电子邮件的发送方式：mailto:电子邮件电子邮件?subject=主题主题n代码中采用：代码中采用：enctype=“text/plain”,表单表单内容将以正文的方式发送，否则将以附件内容将以正文的方式发送，否则将以附件的方式发送的方式发送创建Form表单n选择选择Insert下的下的Form利用利用Dreamweaver

35、 处理表单处理表单1插入文本框插入文本框（1）创建空白表单）创建空白表单（2）插入文本框）插入文本框 插入单行文本框插入单行文本框 插入多行文本框插入多行文本框 插入密码文本框插入密码文本框2设置文本框属性设置文本框属性3插入单选按钮插入单选按钮（1）插入单选按钮）插入单选按钮（2）设置单选按钮的属性）设置单选按钮的属性4插入复选框插入复选框（1）插入复选框）插入复选框（2）设置复选框的属性）设置复选框的属性5插入下拉列表框插入下拉列表框（1）插入下拉列表框）插入下拉列表框（2）设置下拉列表框属性）设置下拉列表框属性6插入按钮插入按钮（1）插入）插入“Submit”（提交）按钮（提交）按钮（2

36、）插入）插入“Reset”（重置）按钮（重置）按钮（3）插入）插入“Button”按钮按钮4.7.2 4.7.2 插入文本框插入文本框空白表单的属性面板空白表单的属性面板 修改空白表单的属性修改空白表单的属性 列表框，属性面板 插入文件字段插入图像域和跳转菜单n可设定名称可设定名称n设置类型是设置类型是“菜单菜单”或或“列表列表”，当选择菜单时，当选择菜单时，不能设置其高度，并每次只能选择一个列表中的不能设置其高度，并每次只能选择一个列表中的项目。当选择列表时，可以设置高度，并能设置项目。当选择列表时，可以设置高度，并能设置一次选择多个列表中的项目。一次选择多个列表中的项目。n当在当在“列表值

37、列表值”中输入列表中项目，和值后，中输入列表中项目，和值后，可以在可以在“初始化时选定初始化时选定”中选列表第一个项目显中选列表第一个项目显示哪个。示哪个。框架介绍框架介绍n框架：可以将整个网页分割为多个区域，每个区框架：可以将整个网页分割为多个区域，每个区域显示为不同的文档内容（框架窗口）；域显示为不同的文档内容（框架窗口）；n例如：左边显示站点，右边显示站点内容；单击例如：左边显示站点，右边显示站点内容；单击左边的站点，右边显示相应的内容左边的站点，右边显示相应的内容n应用框架的页面称为框架页面。应用框架的页面称为框架页面。n在任何一个框架窗口中单独显示一个网页。在任何一个框架窗口中单独显

38、示一个网页。n是将两个或两个以上的网页页面组合起来，能用是将两个或两个以上的网页页面组合起来，能用同一个窗口打开的结构，即多个页面合起来显示同一个窗口打开的结构，即多个页面合起来显示成一个页面的效果。成一个页面的效果。n框架由两部分组成：一个框架集和独立的框架。框架由两部分组成：一个框架集和独立的框架。n框架集文件定义了包含在该框架集中的框架数量、框架集文件定义了包含在该框架集中的框架数量、每个框架的大小、链接到每个框架的页面。框架每个框架的大小、链接到每个框架的页面。框架集并不在浏览器中显示，它只存储包括上述信息集并不在浏览器中显示，它只存储包括上述信息在内的、关于每个框架的信息。在内的、关

39、于每个框架的信息。窗框结构窗框结构n框架集：将几个框架页面结合起来，告诉框架集：将几个框架页面结合起来，告诉浏览器有哪些内容文件，怎样排列；浏览器有哪些内容文件，怎样排列；n框架页面：内容文件框架页面：内容文件,将在窗口中分框显示，将在窗口中分框显示，每个页面作为总页面的一个框体。例如，每个页面作为总页面的一个框体。例如，一个两框的窗框结构有三个文件，即一个一个两框的窗框结构有三个文件，即一个窗框设置文件、两个内容文件。窗框设置文件、两个内容文件。框架的作用框架的作用n节约下载时间节约下载时间n导航功能导航功能n能统一风格、便于制作和修改、方便访问。能统一风格、便于制作和修改、方便访问。n缺点

40、：使用窗框结构的页面会影响页面的缺点：使用窗框结构的页面会影响页面的浏览速度。浏览速度。窗框结构网页的保存窗框结构网页的保存n窗框结构包括框架集和框体内容文件两方面的网窗框结构包括框架集和框体内容文件两方面的网页文件。页文件。n保存窗框结构页面时，点击菜单栏的保存窗框结构页面时，点击菜单栏的“文件文件”-“保存全部保存全部”的页面；的页面；n点击菜单栏的点击菜单栏的FileFrameset是保存窗框设置文件；是保存窗框设置文件；n移动光标到某一特定框体，点击菜单栏的文件移动光标到某一特定框体，点击菜单栏的文件-保保存是保存此框体的内容文件。存是保存此框体的内容文件。9.4.2 9.4.2 使用

41、框架排版使用框架排版使用框架排版使用框架排版【例例例例9-99-9】制作一个使用框架排版的网页，页面分为制作一个使用框架排版的网页，页面分为制作一个使用框架排版的网页，页面分为制作一个使用框架排版的网页，页面分为3 3个区域：个区域：个区域：个区域：上边是网站主题区，左边是导航区，右边是内容区。在浏览网上边是网站主题区，左边是导航区，右边是内容区。在浏览网上边是网站主题区，左边是导航区，右边是内容区。在浏览网上边是网站主题区，左边是导航区，右边是内容区。在浏览网页时，单击左边的某个文本链接，则对应的链接内容显示在右页时，单击左边的某个文本链接，则对应的链接内容显示在右页时，单击左边的某个文本链

42、接，则对应的链接内容显示在右页时，单击左边的某个文本链接，则对应的链接内容显示在右边，而上边的网站主题和左边的导航栏目仍然留在屏幕上，实边，而上边的网站主题和左边的导航栏目仍然留在屏幕上，实边，而上边的网站主题和左边的导航栏目仍然留在屏幕上，实边，而上边的网站主题和左边的导航栏目仍然留在屏幕上，实例效果如图例效果如图例效果如图例效果如图9-879-87所示。所示。所示。所示。9.4 9.4 框架框架框架框架图9-87 实例效果【例9-9】创建框架创建框架n1布局面板上的布局面板上的“框架框架”按钮，选择框体排按钮，选择框体排列方式。列方式。n2点击点击“插入插入”/html/框架，再从中选择。

43、框架，再从中选择。n3一个页面上框架的数目不要太多一个页面上框架的数目不要太多n无框架内容：对不支持框架的浏览器显示无框架内容：对不支持框架的浏览器显示提示内容；提示内容；选择框架选择框架nAlt+鼠标单击；鼠标单击；n框架调板：框架调板：“窗口窗口”菜单菜单-“框架框架”选项选项编辑框架编辑框架q每一个框架里都是一个文档，每一个框架里都是一个文档，q可以直接添加内容；可以直接添加内容；q也可以在框架内打开已经存在的文档。也可以在框架内打开已经存在的文档。q框框架架内内容容的的链链接接：链链接接的的目目标标栏栏，选选中中目目标标选选项；项；q删除框架删除框架框架集属性框架集属性n边框边框:是否

44、显示边框是否显示边框;n边框颜色：边框颜色：n边框宽度：自动设为边框宽度：自动设为0，可作修改。，可作修改。n列：对同一行的一个或几个框体的高进行设置，列：对同一行的一个或几个框体的高进行设置，或对同一列的一个或几个框体的宽进行设置。或对同一列的一个或几个框体的宽进行设置。n面板右方小框：可用鼠标对行或列进行选取，面板右方小框：可用鼠标对行或列进行选取，设置高或宽的大小。设置高或宽的大小。n单位：设置数值单位，单位：设置数值单位，框架名称框架名称n框架名称：在这里输入的框架名，将被超链接和框架名称：在这里输入的框架名，将被超链接和脚本引用。脚本引用。n命名框架必须符合以下要求：命名框架必须符合

45、以下要求：框架名应该是一个单词；框架名应该是一个单词；允许使用下划线允许使用下划线(_)；不能使用横杠不能使用横杠(-)、句号、句号(.)和空格；和空格；应以字母开头，不要使用应以字母开头，不要使用 JavaScript的的 保留字（例如保留字（例如top或或navigator）。）。框架属性框架属性n源文件：指定在当前框架中打开的源文件；源文件：指定在当前框架中打开的源文件；n滚动：是否显示滚动条；滚动：是否显示滚动条；n不能调整大小：防止用户浏览时拖动框架边框来不能调整大小：防止用户浏览时拖动框架边框来调整当前框架大小。调整当前框架大小。n边框：决定当前框架是否显示边框；边框：决定当前框架

46、是否显示边框；n边框颜色边框颜色n左右边距：设置框架边框与内容之间的距离；左右边距：设置框架边框与内容之间的距离；n上下边距：设置上和下边距上下边距：设置上和下边距Frame中的链接中的链接编辑框架集编辑框架集n先选择先选择“查看查看”“可视化助理可视化助理”框框架边框，使框架边框在文档窗口中可见。架边框，使框架边框在文档窗口中可见。n再选择再选择“修改修改”“框架集框架集”下拆分选下拆分选项；项；n或者可以通过对象面板中的定义好的框或者可以通过对象面板中的定义好的框架集来快速插入，框架集图标的蓝色区架集来快速插入，框架集图标的蓝色区域代表当前框架。域代表当前框架。n按住按住Alt键拖曳任一条

47、框架边框，可以垂键拖曳任一条框架边框，可以垂直或水平分割文档（或已有的框架）；直或水平分割文档（或已有的框架）；n可以框架集嵌套，即一个框架集套在另可以框架集嵌套，即一个框架集套在另一个框架集内称为框架集嵌套。使用框一个框架集内称为框架集嵌套。使用框架嵌套可以为一个文档设置多个框架。架嵌套可以为一个文档设置多个框架。9.5.1 Dreamweaver 9.5.1 Dreamweaver中中中中CSSCSS样式的类型样式的类型样式的类型样式的类型在在在在DreamweaverDreamweaver中中中中CSSCSS样式的类型包括以下样式的类型包括以下样式的类型包括以下样式的类型包括以下3 3种

48、。种。种。种。（1 1）类）类）类）类 类也称为类也称为类也称为类也称为classclass类样式或自定义类样式或自定义类样式或自定义类样式或自定义CSSCSS样式，它在网页中定义了样式，它在网页中定义了样式，它在网页中定义了样式，它在网页中定义了一个一个一个一个CSSCSS样式属性集，当页面中的对象引用该样式后，所定义样式属性集，当页面中的对象引用该样式后，所定义样式属性集，当页面中的对象引用该样式后，所定义样式属性集，当页面中的对象引用该样式后，所定义的的的的CSSCSS属性应用到页面中。属性应用到页面中。属性应用到页面中。属性应用到页面中。（2 2）标签）标签）标签）标签 标签也称为重新

49、定义标签也称为重新定义标签也称为重新定义标签也称为重新定义HTMLHTML标签样式，该类样式是对标签样式，该类样式是对标签样式，该类样式是对标签样式，该类样式是对HTMLHTML标签进行重新定义。例如，创建或更改标签进行重新定义。例如，创建或更改标签进行重新定义。例如，创建或更改标签进行重新定义。例如，创建或更改H1H1标签（对应于标签（对应于标签（对应于标签（对应于段落格式中的段落格式中的段落格式中的段落格式中的“标题标题标题标题1”1”）的）的）的）的CSSCSS样式时，网页中所有使用样式时，网页中所有使用样式时，网页中所有使用样式时，网页中所有使用H1H1标标标标签设置了该格式的文本都能

50、立即被更新。签设置了该格式的文本都能立即被更新。签设置了该格式的文本都能立即被更新。签设置了该格式的文本都能立即被更新。（3 3）高级）高级）高级）高级CSSCSS选择器样式选择器样式选择器样式选择器样式 该类样式可以定义网页中的超链接效果。例如，可以使超链该类样式可以定义网页中的超链接效果。例如，可以使超链该类样式可以定义网页中的超链接效果。例如，可以使超链该类样式可以定义网页中的超链接效果。例如，可以使超链接文字在各种状态下均无下划线，并且当鼠标悬停时，文字颜接文字在各种状态下均无下划线，并且当鼠标悬停时，文字颜接文字在各种状态下均无下划线，并且当鼠标悬停时，文字颜接文字在各种状态下均无下