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

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

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

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

3、具有三维空间的Z坐标，使图层有一个叠放顺序，而且可以通过 改变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）、移动层 方法：n用鼠标移动层，将光标移到层的左上角的 选择柄上，或者将鼠标移动到层的边框线 上，指针变成4个十字状箭头时，拖动鼠标 即可移动该层。n选中要移动的层，在属性面板中的左和 上两个文本框中输入层的左上角坐标，便 可精确设置这个层在网页中的目标位置。3）、调整层的大小方法：n用鼠标操

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

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

8、 【溢出Overflow】：设置图层的内容超出图 层范围大小时的显示方式。 有以下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轴数值最大的

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

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

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

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