《网页设计》完整课件网页设计9.ppt

《《网页设计》完整课件网页设计9.ppt》由会员分享，可在线阅读，更多相关《《网页设计》完整课件网页设计9.ppt（32页珍藏版）》请在三一文库上搜索。

1、已学过的知识：我们前面已经学习了使用表格来进行网页中元素的布局，通过表格实现网页中元素的布局。 问题：使用表格布局时，大家都发现一个这样的问题：有些元素规格大小一致的用表格很方便，但是对于一些不规则的、位置随意的网页元素表格的布局也是不理想。用表格进行布局并不是很方便。 Dreamweaver MX提供了另外的一个工具：图层，它可以实现网页元素的布局。,第九讲 图层的应用,主要内容： 一、什么是图层 二、创建图层及层的操作 三、层与表格的转换 四、层的应用 五、时间轴（线） 六、举例说明 七、本节小结,什么是图层？,事实上在Dreamweaver系统中，图层是放置文本、图像等元素的载体。使用图

2、层及配合其它元素、时间线等，可以实现有很多很奇妙的功能。在网页设计中应用非常广泛。 通俗地讲：图层就像含有文字、图片、表格等元素的胶片，一张张按照顺序叠放在一起，组合起来形成页面的最终效果。,图层层叠的效果,图层的特点： 图层可以将页面的元素精确定位； 层在网页编辑区中可以自由移动，可以去很多其它元素不能去的地方； 图层中可以加入文本、图像、表格等元素； 可以在图层里面嵌套图层，嵌套后的关系是“父”与“子”的关系，里面嵌套的称为子图层，包含嵌套层的图层称为父图层。嵌套层永远在其父图层的上方。,图层可以显示或隐藏； 图层在平面上可以设置X，Y坐标，除此之外，还添加一个具有三维空间的Z坐标，使图层

3、有一个叠放顺序，而且可以通过改变Z值，来改变图层的叠放顺序。正是因为有了这个Z坐标使得图层有一个独特的功能-就是可以使页面元素重叠。,创建图层及层的操作,一、创建图层 方法有两种： 第一种：利用菜单插入一个层，操作步骤： 1）、在要插入图层的位置单击鼠标左键，确定插入点。 2）、执行【插入】/ 【图层】命令，则在光标的当前处插入了一个系统缺省默认的图层。 第二种：利用插入栏中的常用面板来实现插入图层，操作步骤如下：,1）、打开要创建图层的文档。 2）、单击插入栏中的常用面板的 按钮。 3）、用鼠标拖动该图标，到工作窗口释放鼠标左键（或直接在编辑区内画层）。,二、创建嵌套的图层 操作步骤如下：

4、1）、打开要创建图层的文档。 2）、单击插入栏中的常用面板的 按钮。 3）、用鼠标拖动该图标，到工作窗口释放鼠标左键（或直接在编辑区内画层）。 4）、将光标插入到已建好的图层中，然后选择菜单中的“插入/层”命令，可在已建的图层中插入一个嵌套的图层。,三、图层的操作 1、激活图层 一个层在被激活后，才能将文本、图像、表格、表单等网页元素插入到图层中。 如何激活？-单击图层的任意位置，就可以激活图层，此时光标在图层中闪烁，这时候就可以往图层插入其它的网页元素。,未被选中激活的层,激活的层,被选中的层,2、选中（取）图层 选中图层的方法有很多： 1）、按下Shift键+鼠标单击层的任意位置，可以选中

5、层。 2）、单击层的标记可以选中层。 3）、单击层的边框线可以选中层。 4）、先激活层，再单击层的左上角的选择柄 可以选中层。 5）、按下Shift键+鼠标单击每一个层的任意位置，可以选中多个层。,3、层的操作 1）、删除层 方法：选中要删除的层，然后按Delete键。 2）、移动层 方法： 用鼠标移动层，将光标移到层的左上角的选择柄上，或者将鼠标移动到层的边框线上，指针变成4个十字状箭头时，拖动鼠标即可移动该层。 选中要移动的层，在属性面板中的左和上两个文本框中输入层的左上角坐标，便可精确设置这个层在网页中的目标位置。,3）、调整层的大小 方法： 用鼠标操作，先选中要改变大小的层，此时层的边

6、框线出现8个黑色活动块，用鼠标拖拽某个活动块，即可调整层的大小。 选中要移动的层，在属性面板中的宽和高两个文本框中输入层的宽度和高度尺寸，便可精确调整该层尺寸。 4）、对齐层 选中要对齐的多个层，选择菜单“修改/对齐”命令，可以设置层的不同的对齐方式。,四、设置图层的属性 选择图层，则弹出图层属性面板对话框 【层编号】：在本栏为图层命名。名称不能用中文，不能以数字开头，只能用西文和数字。 【左L】：层左边界距离浏览器窗口左边的距离。 【上T】：层上边界距离浏览器窗口上边的距离。,这两个参数是设置当前层的左上角的坐标值。,20px,100px,【宽W】：图层的宽度，单位为像素。 【高H】：图层的

7、高度，单位为像素。 【Z轴】：在垂直平面的方向上层的顺序号。 设置图层的堆叠顺序。（提示：在该文本框中的数值，决定了当前层放在哪个层上面。通常，Z值大的层放在上面，Z值小的层放在下面。） 【显示Vis】：层的可见性，设置图层的显示情况。可选择“defaul”（默认）、“inherit”（继承父层的属性）、“visible”（可见）、“hidden”（隐藏）四个选项之一。,【背景图像】：设置图层的背景图像。 【背景颜色】：设置图层的背景颜色。 【标签Tag】：设置图层在HTML代码中使用标记，建议使用DIV，它可以同时被IE和Netscape支持。 【溢出Overflow】：设置图层的内容超出图

8、层范围大小时的显示方式。 有以下4种选择： Visible:按照内容尺寸向右、向下扩大层，以显示层内的全部内容。（换句话说，增加层尺寸，显示超出部分的内容。）,Hidden：只显示图层尺寸以内的内容。保持层尺寸不变，隐藏超出部分的内容。 Scroll:不改变图层的大小，但增加滚动条，用户可以通过滚动条来浏览整个图层。 Auto:只在层不够大时才出现滚动条，这一项也是在支持滚动条的浏览器中才有效。 【剪辑Clip】：设置图层的可视区域，即哪一部分是可见的，输入的数值表示图层的可视区域与层左、上边界之间的距离。,五、图层的默认设置 当图层被插入时，其属性是默认，但这些默认属性不是固定不变的，可以随

9、时修改。操作方法： 选择主菜单中的【编辑】/ 【“参数修改”或者称为“偏好设置”】命令，在弹出的对话框中的【分类】栏中选择层。 如下图所示：,【标签Tag】：设置图层在HTML代码中使用标记，可使用DIV、SPAN、LAYER 或ILAYER。 【显示Vis】：层的可见性，设置图层的显示情况。可选择“defaul”（默认）、“inherit”（继承父层的属性）、“visible”（可见）、“hidden”（隐藏）四个选项之一。 【宽W】和【高H】：设置图层的宽和高度，单位为像素。,【背景图像】：设置图层的背景图像。 【背景颜色】：设置图层的背景颜色。 【嵌套】：勾选该项，只要出现重叠时，将采用

10、嵌套的方式。 【Netscape4兼容性】：勾选该项，当插入层时，固定其大小。 层的属性被修改后，当下一次插入层时，其默认的属性会变为修改后的数值。,六、层的管理,在Dreamweaver中，图层的管理是使用层面板。层面板是文档中层的可视图。在层面板中，层以堆叠名称列表的形式显示，先建立的层位于列表的底部，后建立的层位于列表的上部，使用层面板可以防止层重叠、改变层的可见性和堆叠顺序。 打开层面板的方法： 选择主菜单中的【窗口】/ 【其它】 】/ 【层】命令，或者直接按F2键打开层面板，如图所示：,在层面板中，Z轴数值最大的，图层就会排在上面。可以通过改变Z的数值，来改变图层上下位置。,层面板,

11、先创建的层,后创建的层,改变层的可视性,代表可视,代表不可视,层和表格是网页设计中经常用到的两种技术，二者各有优缺点。利用表格布局网页元素过于呆板；而使用层对网页进行布局，则有可能无法被有些浏览器支持。如果将二者结合使用，可以大大提高效率。 1、表格转换为层 操作方法： 1）、选中要转换为层的表格。 2）、选择菜单中的“修改/转换/表格到层”命令。,层与表格的转换,2、层转换为表格 操作方法： 1）、选中要转换为表格的层。 2）、选择菜单中的“修改/转换/层到表格”命令。在弹出的对话框中进行设置。 提示：层转换为表格时，要求层不能重叠。如果层重叠，则不能进行层转换为表格的操作。,层的应用,一、

12、图层层叠效果制作（实例操作演示） 二、鼠标移到图片时显示隐含图层。 （实例操作演示） 三、拖动层的应用。 （实例操作演示）,时间轴（线）,在这节中我们要学习DreamweaverMX的时间轴动画，在不需要编写复杂的程序，只是利用层和时间轴，就可以让网页元素在网页画面中移动起来。这也是DreamweaverMX强于其它网页编辑工具的地方。 动画的原理：动画是由一系列连续（静止）的图片组成的。动画的实现就是将画面连起来播放，由于人的视觉的滞后，产生运动的和错觉，从而形成了运动的效果。 动画的基本单位就是一个画面，也叫做帧。 有些画面是关键的，会影响整个动画，这个画面称为关键帧。,很多的画面按时间先

13、后顺序链起来就是动画。 时间轴就是来排列画面的顺序的。基本概念： 什么是时间轴（线）？-时间轴（线）是用来控制网页中的层在每一秒的位置的工具。 什么时候使用时间轴（线）？-想要网页中的层移动的时候使用时间轴（线）。（时间线一定是和层一起使用的！-牢记!） 如何打开时间轴？-操作方法：选择主菜单中的【窗口】/ 【其它】/【时间线（轴）】命令，或者直接按Alt+F9打开时间轴。 打开的时间轴（线）如下图所示：,时间轴（线）面板,时间线下拉列表框,播放栏,动画条,关键帧：在动画中的画面是关键的，会影响整个动画。,行为通道,帧编号(帧数),B,循环,动画的播放速度,时间线面板中各部分的功能： 【时间线

14、下拉列表框】 ：指定显示文档中的哪一个时间线。（一个文档中可以包含多个时间线） 【播放栏】 ：在时间线中指定显示哪一帧。 【帧编号(帧数)】 ：以连续编号的形式表示动画中的帧。 【行为通道】 ：用于存放控制时间线的指定帧的行为。 【Fps】 ：动画的播放速度，用每秒播放多少帧来表示。系统默认设置是15帧/秒（专家经过无数次实验得出的比较合适的平均速度，可以很好地满足多数Windows系统中浏览器的显示要求，达到流畅的播放效果。 ）,【动画条】 ：显示每个对象的动画长度。 【关键帧】 ：在动画条中特殊的帧。 【动画通道】 ：用于显示层对应的动画条。（即是把要设置成动画的层添加到此通道中） 下面举例说明如何使用时间线来制作动画效果： 例1、滚动字幕 例2、滚动广告牌 例3、幻灯片效果,本节小结,本节主要介绍了图层的作用、图层的创建方法，最后又通过制作一个图层网页的实例讲解，使大家对图层的功能加深了理解。 重点熟练掌握网页中图层的创建，灵活、合理使用图层以满足网页设计实际中的需要。,上机操作作业,每个同学独立上机操作完成老师讲过的例子。要求熟练掌握。,