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

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

1、9.1 图层与行为 9.2 时间轴 9.3 表单 9.4 框架 9.5 样式表 9.6 模板和库 9.7 其他网页特效,第9章 Dreamweaver 8高级应用,网页布局-层,使用图层设计页面布局，可以实现页面元素的精确定位 在图层中可以插入文本、图像、表单等页面元素。 借助层，可对加入的页面元素进行精确定位，还可做出重叠效果和运动效果。,9.1 图层与行为,行为:某个事件发生时浏览器执行的动作。 行为（Behavior）是由事件（Event）和动作（Action）组成的 利用行为可以创建一些交互。,9.1.1 图层的基本操作 图层的基本操作包括：创建图层、激活图层、选择图层、移动图层、调整

2、图层的大小、对齐图层和设置图层的背景等。 【例9-1】页面的中间为一组重叠的图层，显示金、庸、大、侠4个字，页面两端分别为显示金庸名著对联效果的图层，实例效果如图9-1所示。,9.1 图层与行为,图9-1 实例效果,【例9-1】,9.1.2 图层与行为结合 通过图层和行为的结合可以创造出一些特别的网页效果。 【例9-2】制作一个交换图像，当鼠标移动到图像上时，图像变换为清晰的图像，同时在图像左下侧显示说明图像的文字图层；当鼠标移动到图像外时，恢复显示原来模糊的图像，同时说明图像的文字图层消失，实例效果如图9-21所示。,9.1 图层与行为,【例9-2】,图9-21 实例效果,添加行为,选择IE

3、6.0浏览器 插入图片 交换图像：onMouseOut恢复交换图像 onMouseOver交换图像 插图文字图层：默认（隐藏） 选中图像，添加行为 onMouseOut（显示-隐藏层）隐藏 onMouseOver（显示-隐藏层）显示,行为和动作,可附加行为的对象：整个文档、链接、图像、表单元素和任何html元素 注意应用dreamweaver提供的动作,增加行为,打开行为面板 选定须增加行为的对象 选定动作 指定触发该动作的事件,行为面板的操作,编辑行为：选定附加行为的对象，修改该行为的参数 改变行为中的触发事件的顺序 增加行为 删除行为,常用动作,图像的交换 弹出信息、弹出菜单 播放声音 显

4、示弹出式菜单 检查表单 调用javaScript 检查浏览器：常用于body标签,常用动作,检查插件 控制shockwave或flash 拖动层 转到url 打开浏览器窗口 预载入图像 播放事件轴 转到时间轴帧,有些动作只在链接状态下有效,创建层,使用Insert菜单创建层：Insert菜单-Layer选项 通过对象调板创建层：Window菜单-Object-Draw Layer按钮 使用CSS样式创建层：Window菜单-CSS Styles选项 嵌套层：就是在一个层内创建新的层,选中这个层，可用鼠标拖动，将层移至页面合适的位置。 用鼠标拖动边线上的黑色方块，可调节层的大小。 用鼠标点击层内

5、的任意位置，这时可往层内加入文本、图像等内容。 层中可再嵌套层。,嵌套层的操作,将插入点光标放入父层内，然后使用Insert菜单的Layers选项； 将对象调板的Layer按钮拖到父层内； 按住Ctrl键，并在层调板内，将子层的名称拖到父层的名称上。,修改层,选择层 1）激活层：用鼠标单击层所属的区域 2）选择某一个层： 用鼠标单击文档的层标识，使层的边框上出现黑色的小方块； 用鼠标单击层的选择手柄； 用鼠标单击层的边框； 用鼠标单击层调板内层的名称。,3）选择多个层： 按住Shift键的同时，依次单击多个层； 按住Shift键的同时，依次在层调板的名称列表内选择； 按住Shift键的同时，依

6、次用鼠标单击层所在的区域。 4）取消选择：在文档窗口内单击鼠标 5）删除层：选定层后，按Delete键 改变层的大小：鼠标拖曳或属性调板 改变层的位置：鼠标拖曳 对齐层：选定多个层、Modify菜单-Align选项 注意：对齐层时，系统自动将最后选定的层作为对齐标准,设置图层参数和图层属性,设置图层参数 1）使用图层参数可以为新创建的层定义默认设置 2）操作：Edit菜单-Preferences 设置图层属性：属性调板,“层编号“后填入你给这个层的命名。 “左”和“上”是层的定位，即在页面中的位置。 Z轴：是页面元素的Z值，在后面填入一个数值。当页面元素因定位而重叠时，Z值大的页面元素将在最表

7、面显示，覆盖或部分覆盖Z值小的页面元素。 “可见性”是设置页面元素是否可视。不设置当然是可视。其后的下拉选框有四个选项default、inherit、visible和hidden。 default是使用浏览器默认值，这个默认值一般是可视。 inherit是继承母体元素的可视性设置， visible是可视 hidden是不可视。,背景图像。 层的背景颜色。 “溢出”是如何处理插入层内的元素超过层本身的宽或高的部分。其后的下拉选框有四个选项visible、hidden、scroll和auto。 visible是可视 hidden是不可视， scroll是可滚动 auto是由浏览器默认。 剪辑：在层

8、中间再限定一个区域，来放置插入层里的页面元素。 L是Clip区域左边离层左边的距离， T是Clip区域上边离层上边的距离， R是Clip区域右边离层右边的距离 B是Clip区域下边离定位区域下边的距离。 其实层的各种设置，其原理就是用CSS对DIV等HTML标记的定位、背景及其它属性的设置。,层面板,层面板上将列出当前页面所有的层。 Name下面是各层的命名 Z下面是各层的Z值，点击这个值后可修改。 眼睛图标下面是显示各层的可视性。点击可调出三种状态无图标、睁开的眼睛图标和闭上的眼睛图标。 无图标表示该层的可视性使用默认值， 睁开的眼睛图标表示该层可视， 闭上的眼睛图标表示该层不可视。 选中面

9、板Prevent Overlaps上的选框，则各层之间不能有重合部分，层中也不能再嵌套层。,层与表格,将层转换为表格：Modify菜单-Convert选项-Layers to Table 将表格转换为层：Modify菜单-Convert选项-Tables to Layers,9.2.1 时间轴面板 时间轴面板显示层与图像随时间变化的属性。执行“窗口”“时间轴”命令，或者按快捷键Alt+F9，打开时间轴面板，如图9-34所示。,9.2 时间轴,图9-34 时间轴面板,9.2.2 创建时间轴动画 时间轴是一种用来控制网页中的层在每一秒的位置的工具。它通过在不同的时间改变层的位置、大小、可见性或叠放

10、次序等来创建动画。 【例9-3】制作一条小鱼沿着简单的曲线移动的时间轴动画，实例效果如图9-35所示。,9.2 时间轴,图9-35 实例效果,【例9-3】,9.2.3 记录路径 要创建复杂的曲线运动，可以使用记录拖动路径的方法，这比在关键帧上改变运动轨迹更为方便。 【例9-4】制作一个在网页上自由飘动的广告的时间轴动画，实例效果如图9-43所示。,9.2 时间轴,【例9-4】,记录路径,插入图层，插入图像 选择图层，执行“修改”-”时间轴“-录制层命令，拖动图层，出现+正确,9.2.4 使用时间轴改变图像属性 除了可以利用时间轴移动层制作动画以外，还可以在时间轴的不同关键帧上改变图像的源文件、

11、层的属性，产生丰富的动画效果。 【例9-5】制作一个幻灯片轮流播放效果的Logo广告动画，实现一组广告画面不断轮流切换的效果，如图9-47所示。,9.2 时间轴,【例9-5】,图9-47 实例效果,使用时间轴改变图像属性,添加图像 将图像添加到时间轴 拖动尾关键侦 在中间增加关键侦，并且选择相应的图像,9.2.5 使用时间轴改变图层属性 在时间轴中还可以改变层的可见性、大小及叠放次序等。 【例9-6】制作一幅卷轴式展开的国画，从左向右逐渐推出显示，效果如图9-51所示。,9.2 时间轴,【例9-6】,图9-51 实例效果,1时间轴（Timeline）的功能 网页中制作出动画 改变层的大小 改变

12、层的可见性 改变层的叠放顺序 改变图片的属性只能改变图片的源,动态效果,时间轴和行为概述,时间轴的控制面板,自动播放：播放时间轴动作通过onload时间添加到文档，页面载入时间轴便可以播放；,1Timelines面板,4.8.2 使用时间轴创建动画,Timelines面板,2使用时间轴创建动画,（1）创建Layer（层）动画,（2）创建Image（图像）动画,4.8.2 使用时间轴创建动画,3编辑时间轴,新建、删除、查看与重命令时间轴 给时间轴添加动作、对象、帧与关键帧 将已有的动画应用于其他对象,4.8.2 使用时间轴创建动画,1行为面板 2内置行为,4.8.3 内置行为,行为面板,4.8.

13、4 将行为应用到时间轴,1.时间轴面板中多个时间轴之间的转换,GO to Time Frame（转到某一帧） Play Timeline（播放某一时间轴） Stop Timeline（停止播放某一时间轴）,2.Timeline中包含的3种行为,关键帧的应用,层的运动变为曲线,录制层路径,插入层 在层内插入图片 选中层，选择主菜单“修改”“时间轴”“录制层路径” 在编辑窗口中，按线路拖动层后松开鼠标，则自动在时间轴面板中创建了一定数目的关键帧。,向时间轴添加对象,只有图像和图层可以添加到时间轴； 把选定的对象放在图层内添加到时间轴,编辑时间轴动画,增加或缩短动画播放时间 改变动画的开始时间 修改

14、关键帧 添加或删除帧 复制动画,表单概述,表单：是使访问者与网站或网站管理人交互。 用来收集浏览者的用户名、密码、E-mail地址、个人爱好和联系地址等用户信息的输入区域集合。 表单的工作流程： 填写信息-提交信息-Web服务器-CGI（公共网关接口）,9.3.1 表单的基本概念 1表单的工作原理 表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。用于处理表单数据的常用服务器端技术包括Macromedia ColdFusion，Microsoft Active Server Pages（ASP）和PHP

15、。服务器进行响应时，会将被请求信息发送回用户（或客户端。 2表单对象 表单、文本字段、隐藏域、文本域、复选框、单选按钮、单选按钮组、列表/菜单、跳转菜单、图像域、文件域、命令按钮、标签和字段集。,9.3 表单,表单的作用,根据访问者输入的信息，自动生成页面反馈给访问者； 为网站收集访问者输入的信息。,表单的使用,一部分是表单本身，即怎样把表单作为页面元素加入到网页页面。 另一部分为表单的处理，即调用服务器端的脚本程序，或使以电子邮件的方式发送。,9.3.3 检查表单 【例9-8】以例9-7中的热播电视剧收视调查表表单为基础，在表单中使用“检查表单”行为。检查规则设置为“调查者姓名”和“调查者密

16、码”文本框必须输入内容，如果没有输入内容，则表单提交后弹出警告信息；电子邮件地址必须合乎邮件地址的格式，否则表单提交后弹出警告信息，实例效果如图9-81所示。,9.3 表单,【例9-8】,图9-81 实例效果,【例9-7】,描述表单的HTML源代码。 用于处理用户在表单域中输入的信息的服务器端应用程序或客户端脚本。,表单,表单简介,Object面板的表单元素,表单有两个重要组成部分：,表单属性,“表单名称”：JavaScript和VBScrpt等教本语言要通过表单名称进行控制； 动作：识别处理表单信息的服务器端应用程序。 方法： Get:将表单值追加到URL并发送服务器get请求； POST：

17、在消息正文中发送表单值并发送服务器post请求。,动作一栏中若用电子邮件的发送方式：mailto:电子邮件?subject=主题 代码中采用：enctype=“text/plain”,表单内容将以正文的方式发送，否则将以附件的方式发送,创建Form表单,选择Insert下的Form,利用Dreamweaver 处理表单 1插入文本框 （1）创建空白表单 （2）插入文本框 插入单行文本框 插入多行文本框 插入密码文本框 2设置文本框属性,3插入单选按钮 （1）插入单选按钮 （2）设置单选按钮的属性 4插入复选框 （1）插入复选框 （2）设置复选框的属性,5插入下拉列表框 （1）插入下拉列表框 （

18、2）设置下拉列表框属性 6插入按钮 （1）插入“Submit”（提交）按钮 （2）插入“Reset”（重置）按钮 （3）插入“Button”按钮,4.7.2 插入文本框,空白表单的属性面板,修改空白表单的属性,列表框，属性面板,插入文件字段,插入图像域和跳转菜单,可设定名称 设置类型是“菜单”或“列表”， 当选择菜单时，不能设置其高度，并每次只能选择一个列表中的项目。当选择列表时，可以设置高度，并能设置一次选择多个列表中的项目。 当在“列表值”中输入列表中项目，和值后，可以在“初始化时选定”中选列表第一个项目显示哪个。,框架介绍,框架：可以将整个网页分割为多个区域，每个区域显示为不同的文档内容

19、（框架窗口）； 例如：左边显示站点，右边显示站点内容；单击左边的站点，右边显示相应的内容 应用框架的页面称为框架页面。 在任何一个框架窗口中单独显示一个网页。 是将两个或两个以上的网页页面组合起来，能用同一个窗口打开的结构，即多个页面合起来显示成一个页面的效果。,框架由两部分组成：一个框架集和独立的框架。 框架集文件定义了包含在该框架集中的框架数量、每个框架的大小、链接到每个框架的页面。框架集并不在浏览器中显示，它只存储包括上述信息在内的、关于每个框架的信息。,窗框结构,框架集：将几个框架页面结合起来，告诉浏览器有哪些内容文件，怎样排列； 框架页面：内容文件,将在窗口中分框显示，每个页面作为总

20、页面的一个框体。例如，一个两框的窗框结构有三个文件，即一个窗框设置文件、两个内容文件。,框架的作用,节约下载时间 导航功能 能统一风格、便于制作和修改、方便访问。 缺点：使用窗框结构的页面会影响页面的浏览速度。,窗框结构网页的保存,窗框结构包括框架集和框体内容文件两方面的网页文件。 保存窗框结构页面时，点击菜单栏的“文件”-“保存全部”的页面； 点击菜单栏的FileFrameset是保存窗框设置文件； 移动光标到某一特定框体，点击菜单栏的文件-保存是保存此框体的内容文件。,9.4.2 使用框架排版 【例9-9】制作一个使用框架排版的网页，页面分为3个区域：上边是网站主题区，左边是导航区，右边是

21、内容区。在浏览网页时，单击左边的某个文本链接，则对应的链接内容显示在右边，而上边的网站主题和左边的导航栏目仍然留在屏幕上，实例效果如图9-87所示。,9.4 框架,图9-87 实例效果,【例9-9】,创建框架,1布局面板上的“框架”按钮，选择框体排列方式。 2点击“插入”/html/框架，再从中选择。 3一个页面上框架的数目不要太多 无框架内容：对不支持框架的浏览器显示提示内容；,选择框架,Alt+鼠标单击； 框架调板：“窗口”菜单-“框架”选项,编辑框架,每一个框架里都是一个文档， 可以直接添加内容； 也可以在框架内打开已经存在的文档。 框架内容的链接：链接的目标栏，选中目标选项； 删除框架

22、,框架集属性,边框:是否显示边框; 边框颜色： 边框宽度：自动设为0，可作修改。 列：对同一行的一个或几个框体的高进行设置，或对同一列的一个或几个框体的宽进行设置。 面板右方小框：可用鼠标对行或列进行选取，设置高或宽的大小。 单位：设置数值单位，,框架名称,框架名称：在这里输入的框架名，将被超链接和脚本引用。 命名框架必须符合以下要求： 框架名应该是一个单词； 允许使用下划线(_)； 不能使用横杠(-)、句号(.)和空格； 应以字母开头，不要使用 JavaScript的 保留字（例如top或navigator）。,框架属性,源文件：指定在当前框架中打开的源文件； 滚动：是否显示滚动条； 不能调

23、整大小：防止用户浏览时拖动框架边框来调整当前框架大小。 边框：决定当前框架是否显示边框； 边框颜色 左右边距：设置框架边框与内容之间的距离； 上下边距：设置上和下边距,Frame中的链接,编辑框架集,先选择“查看”“可视化助理”框架边框，使框架边框在文档窗口中可见。 再选择“修改”“框架集”下拆分选项； 或者可以通过对象面板中的定义好的框架集来快速插入，框架集图标的蓝色区域代表当前框架。 按住Alt键拖曳任一条框架边框，可以垂直或水平分割文档（或已有的框架）； 可以框架集嵌套，即一个框架集套在另一个框架集内称为框架集嵌套。使用框架嵌套可以为一个文档设置多个框架。,9.5.1 Dreamweav

24、er中CSS样式的类型 在Dreamweaver中CSS样式的类型包括以下3种。 （1）类 类也称为class类样式或自定义CSS样式，它在网页中定义了一个CSS样式属性集，当页面中的对象引用该样式后，所定义的CSS属性应用到页面中。 （2）标签 标签也称为重新定义HTML标签样式，该类样式是对HTML标签进行重新定义。例如，创建或更改H1标签（对应于段落格式中的“标题1”）的CSS样式时，网页中所有使用H1标签设置了该格式的文本都能立即被更新。 （3）高级CSS选择器样式 该类样式可以定义网页中的超链接效果。例如，可以使超链接文字在各种状态下均无下划线，并且当鼠标悬停时，文字颜色由蓝色变为红

25、色等。,9.5 样式表,9.5.2 Dreamweaver中使用CSS样式表美化页面 【例9-10】制作一个展示推理电视剧的经典断案案例的页面，页面中使用了多种形式的CSS样式，整个页面看起来错落有致，如图9-100所示。,9.5 样式表,图9-100 实例效果,【例9-10】,Dreamweaver中使用CSS样式表美化页面,设置页面背景 新建外部css文件 新建css样式 .bt：华文中宋，36，粗体 .case:华文新魏，24 重建table:边框，右下突起，宽度1pt 重建td:边框，左上凹陷，宽度1pt a:link:修饰无， 颜色 a:hover:下划线，颜色,让css使网页图片或

26、菜单半透明,Extension:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) Opacity :代表透明度水准，范围是0-100， “FinishOpacity”就是用来指定结束时的透明度，范围0-100 “Style”是指定透明区域的形状特征，0代表统一形状，1代表线形，2代表放射形，3代表长方形。 “startX”与”startY”就是代表渐变效果开始的X与Y坐标，（一般我们设置为StartX=0, StartY=0（这样就是表示的透明效果是从图片的左上角开始的。）

27、“FinishX”与“FinishY” 代表渐变效果结束时的横纵坐标了，这里很关键，填什么数值与图片的高与宽有关,改变浏览者的鼠标形状,通过编辑样式表来实现的。 具体方法是：选择“文字（text）定制样式（CSS Style）编辑样式表（Edit Style Sheet）”，弹出编辑样式表窗口，在其中选择“新建（new）”。接着选择“建立一个定制的样式（Make custom style）”，给这个样式表起名，单击确定。 编辑该样式表，选择扩展项(extension)，在右边的光标项（Cursor）中选择要出现的指针效果即可。,模板,同一网站中的页面往往采用布局相同，内容不同的方式 模板提供了

28、将网页的布局与内容分开的功能 模板的改变，会使应用到这个模板的网页随之改变,9.6.1 模板的基本概念 生成具有相似结构和外观的一种网页制作功能。如:相同的布局结构，相似的导航栏。 新的页面可以从模板中创建。这个新的文档将保持和原来模板的联系，除非被明确地隔离或分开。 把模板应用于一组网页，就可以通过编辑该模板来改变这一组网页中的共享信息。 模板是由两类区域组成的：锁定区域和可编辑区域。,9.6 模板和库,9.6.2 利用模板创建页面 【例9-11】制作某高校“新校区简介”的系列页面。图9-118所示的页面是系列展示中的第一个页面，其他4个页面均是以图9-118的页面为模板创建的。,9.6 模

29、板和库,【例9-11】,利用模板创建页面,新建页面 另存为模板 定义可编辑区域 从模板创建页面 更新模板，更新站点,Dreamweaver如何制作计数器、留言板,首先Dreamweaver是不能制作上面的这些东西的。他只能定制页面，而上面的这些都需要和服务器进行交互。因此必须使用CGI Php ASp等编程实现。 很多的个人主页服务商都提供了现成的计数器和留言板。你只要添加到页面中你想要的地方就可以了。最直接的办法，单击页面中的想要的位置。按F10切换到源代码编辑器。将他们提供的源代码Copy/paste就可以了。 Dreamweaver的同门兄弟Ultradev可以制作。,设置状态栏文字,在

30、Behaviors窗口中选取Behaviors，单击“”号，再选取“Set TextSet Text of Status Bar”，最后在弹出的对话框中写上你想在状态栏出现的文字就可以了。,9.6.4 库 站点中的每个页面上都会有内容是被重复使用的，如：版权信息、公司地址、标题和页面页脚等。 库用来存放页面元素，如图像、文本等对象。这些元素广泛地用在整个站点中，能够重复地被使用或者需要经常更新，它们被称为库项目。 在Dreamweaver文档中，可以将任何元素创建为库项目。这些元素包括文本、表格、表单、Java程序、插件、ActiveX代控件、导航条及图像等。库项目文件的扩展名为.lbi。所有

31、的库项目都被保存在一个文件中，且库文件的默认放置文件夹为“站点文件夹Library”。 利用库同样可以实现对文档风格的维护。可以将某些文档中的共有内容定义为库，然后放置到文档中。 0一旦库进行了修改，通过Dreamweaver的站点管理特性，可以对站点中所有放入该库项目的文档进行更新，实现风格的统一更新。,9.6 模板和库,9.7.1 Java特效 Java特效就是用Java语言编写的一种应用程序，一般叫做Applet，用于实现一些图像效果（如图像切换）或交互式界面效果（如下拉菜单）。 可以使用Dreamweaver将Java Applet插入到HTML文档中。插入Java Applet的方法

32、是，在文档窗口中，将插入点放置在用户要插入Applet的地方，然后执行以下操作之一： 在插入工具栏的“常用”分类中，单击“媒体”按钮右侧的下拉箭头，然后选择Applet项； 执行“插入”“媒体”“Applet”命令。,9.7 其他网页特效,9.7.2 插入Flash按钮对象 在使用Dreamweaver时，用户可以在文档中创建、插入和修改Flash按钮。 Flash按钮对象是基于Flash模板的可更新按钮。用户可以自定义Flash按钮对象，并添加文本、背景颜色，以及指向其他文件的链接。 执行“插入”“媒体”“Flash按钮”命令。,9.7 其他网页特效,9.7.3 插入Flash动画 向网页中

33、插入用Flash制作好的动画（Flash动画也称为Flash电影）的步骤如下所述。 将光标定位到要插入Flash动画的位置。 执行“插入”“媒体”“Flash”命令，打开“选择文件”对话框，选择要插入的Flash动画即可，如图9-131所示。,9.7 其他网页特效,图9-131 “选择文件”对话框,9.7.4 插入Shockwave电影 可以使用Dreamweaver将Shockwave影片插入到文档中。Shockwave作为Web上用于交互式多媒体的Macromedia标准，是一种压缩格式，使得在Macromedia Director中创建的多媒体文件能够被快速下载，而且可以在大多数常用浏览

34、器中进行播放。 向网页中插入用Director制作好的电影，步骤如下所述。 将光标定位到要插入Shockwave电影的位置。 执行“插入”“媒体”“Shockwave”命令，打开“选择文件”对话框，选择要插入的Shockwave电影即可。,9.7 其他网页特效,1使用图层制作一个具有图像相互叠放效果的页面。 2使用图层和行为网页中的对象（如文字或图像）制作一个弹出菜单。 3使用时间轴和图层制作一个图像在网页中飘动的效果。 4使用时间轴制作一个循环切换画面的广告网页。 5参考中文雅虎（http:/）电子邮箱的申请过程，制作一个申请电子邮箱的表单。 6使用框架技术制作Windows学习简介的框架网页。 7使用CSS样式表制作一个课程表。 8使用模板技术制作学校各部门的宣传网页，要求导航栏和版权区域为锁定区域，其余区域为可编辑区域。 9制作一个简单的页面，练习插入Java小程序、Flash动画、Flash按钮和Shockwave电影等多媒体对象。,习题9,