网页设计完整网页设计9ppt课件

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

1、 已学已学过过的知的知识识：我：我们们前面曾前面曾经经学学习习了运用了运用表格来表格来进进展网展网页页中元素的中元素的规规划，划，经过经过表格表格实现实现网网页页中元素的中元素的规规划。划。 问题问题：运用表格：运用表格规规划划时时，大家都，大家都发现发现一个一个这这样样的的问题问题：有些元素：有些元素规规格大小一致的用表格大小一致的用表格很方便，但是格很方便，但是对对于一些不于一些不规规那么的、位那么的、位置随意的网置随意的网页页元素表格的元素表格的规规划也是不理想。划也是不理想。用表格用表格进进展展规规划并不是很方便。划并不是很方便。 Dreamweaver MX Dreamweaver

2、MX提供了另外的一个工具：提供了另外的一个工具：图层图层，它可以，它可以实现实现网网页页元素的元素的规规划。划。第九讲 图层的运用主要内容：一、什么是图层二、创建图层及层的操作三、层与表格的转换四、层的运用五、时间轴线六、举例阐明七、本节小结什么是图层？什么是图层？ 现实上在现实上在DreamweaverDreamweaver系系统中，图层是放置文本、统中，图层是放置文本、图像等元素的载体。运用图像等元素的载体。运用图层及配合其它元素、时图层及配合其它元素、时间线等，可以实现有很多间线等，可以实现有很多很奇妙的功能。在网页设很奇妙的功能。在网页设计中运用非常广泛。计中运用非常广泛。 通俗地讲：

3、图层就像含有通俗地讲：图层就像含有文字、图片、表格等元素文字、图片、表格等元素的胶片，一张张按照顺序的胶片，一张张按照顺序叠放在一同，组合起来构叠放在一同，组合起来构成页面的最终效果。成页面的最终效果。图层层叠的效果图层的特点：图层可以将页面的元素准确定位；层在网页编辑区中可以自在挪动，可以去很多其它元素不能去的地方；图层中可以参与文本、图像、表格等元素；可以在图层里面嵌套图层，嵌套后的关系是“父与“子的关系，里面嵌套的称为子图层，包含嵌套层的图层称为父图层。嵌套层永远在其父图层的上方。n n图层可以显示或隐藏；n n图层在平面上可以设置X，Y坐标，除此之外，还添加一个具有三维空间的Z坐标，使

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

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

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

7、文本框中输入层的宽度和高度尺寸，便可准确调整该层尺寸。4、对齐层选中要对齐的多个层，选择菜单“修正/对齐命令，可以设置层的不同的对齐方式。 四、设置图层的属性选择图层，那么弹出图层属性面板对话框【层编号】：在本栏为图层命名。称号不能用中文，不能以数字开头，只能用西文和数字。【左L】：层左边境间隔阅读器窗口左边的间隔。【上T】：层上边境间隔阅读器窗口上边的间隔。这两个参数是设置当前层的左上角的坐标值。20px100px 【宽W】：图层的宽度，单位为像素。 【高H】：图层的高度，单位为像素。【Z轴】：在垂直平面的方向上层的顺序号。设置图层的堆叠顺序。提示：在该文本框中的数值，决议了当前层放在哪个层

8、上面。通常，Z值大的层放在上面，Z值小的层放在下面。【显示Vis】：层的可见性，设置图层的显示情况。可选择“defaul默许、“inherit承继父层的属性、“visible可见、“hidden隐藏四个选项之一。 【背景图像】：设置图层的背景图像。【背景颜色】：设置图层的背景颜色。【标签Tag】：设置图层在HTML代码中运用标志，建议运用DIV，它可以同时被IE和Netscape支持。【溢出Overflow】：设置图层的内容超出图层范围大小时的显示方式。有以下4种选择：Visible:按照内容尺寸向右、向下扩展层，以显示层内的全部内容。换句话说，添加层尺寸，显示超出部分的内容。Hidden：只

9、显示图层尺寸以内的内容。坚持层尺寸不变，隐藏超出部分的内容。Scroll:不改动图层的大小，但添加滚动条，用户可以经过滚动条来阅读整个图层。Auto:只在层不够大时才出现滚动条，这一项也是在支持滚动条的阅读器中才有效。【剪辑Clip】：设置图层的可视区域，即哪一部分是可见的，输入的数值表示图层的可视区域与层左、上边境之间的间隔。五、图层的默许设置当图层被插入时，其属性是默许，但这些默许属性不是固定不变的，可以随时修正。操作方法：选择主菜单中的【编辑】/ 【“参数修正或者称为“偏好设置】命令，在弹出的对话框中的【分类】栏中选择层。如以下图所示：【标签Tag】：设置图层在HTML代码中运用标志，可

10、运用DIV、SPAN、LAYER 或ILAYER。【显示Vis】：层的可见性，设置图层的显示情况。可选择“defaul默许、“inherit承继父层的属性、“visible可见、“hidden隐藏四个选项之一。【宽W】和【高H】：设置图层的宽和高度，单位为像素。【背景图像】：设置图层的背景图像。【背景颜色】：设置图层的背景颜色。【嵌套】：勾选该项，只需出现重叠时，将采用嵌套的方式。【Netscape4兼容性】：勾选该项，当插入层时，固定其大小。层的属性被修正后，当下一次插入层时，其默许的属性会变为修正后的数值。六、层的管理 在Dreamweaver中，图层的管理是运用层面板。层面板是文档中层的

11、可视图。在层面板中，层以堆叠称号列表的方式显示，先建立的层位于列表的底部，后建立的层位于列表的上部，运用层面板可以防止层重叠、改动层的可见性和堆叠顺序。 翻开层面板的方法： 选择主菜单中的【窗口】/ 【其它】 】/ 【层】命令，或者直接按F2键翻开层面板，如下图： 在层面板中，在层面板中，Z Z轴数值最大的，图层就轴数值最大的，图层就会排在上面。可以经过改动会排在上面。可以经过改动Z Z的数值，的数值，来改动图层上下位置。来改动图层上下位置。层面板先创建的层后创建的层改动层的可视性代表可视代表不可视层和表格是网页设计中经常用到的两种技术，二者各有优缺陷。利用表格规划网页元素过于呆板；而运用层对

12、网页进展规划，那么有能够无法被有些阅读器支持。假设将二者结合运用，可以大大提高效率。1、表格转换为层操作方法：1、选中要转换为层的表格。2、选择菜单中的“修正/转换/表格到层命令。层与表格的转换2、层转换为表格操作方法：1、选中要转换为表格的层。2、选择菜单中的“修正/转换/层到表格命令。在弹出的对话框中进展设置。提示：层转换为表格时，要求层不能重叠。假设层重叠，那么不能进展层转换为表格的操作。层的运用一、图层层叠效果制造实例操作演示二、鼠标移到图片时显示隐含图层。 实例操作演示三、拖动层的运用。 实例操作演示时间轴线时间轴线 在这节中我们要学习DreamweaverMX的时间轴动画，在不需求

13、编写复杂的程序，只是利用层和时间轴，就可以让网页元素在网页画面中挪动起来。这也是DreamweaverMX强于其它网页编辑工具的地方。 动画的原理：动画是由一系列延续静止的图片组成的。动画的实现就是将画面连起来播放，由于人的视觉的滞后，产生运动的和错觉，从而构成了运动的效果。 动画的根本单位就是一个画面，也叫做帧。 有些画面是关键的，会影响整个动画，这个画面称为关键帧。很多的画面按时间先后顺序链起来就是动画。时间轴就是来陈列画面的顺序的。根本概念：什么是时间轴线？-时间轴线是用来控制网页中的层在每一秒的位置的工具。什么时候运用时间轴线？-想要网页中的层挪动的时候运用时间轴线。时间线一定是和层一

14、同运用的！-牢记!如何翻开时间轴？-操作方法：选择主菜单中的【窗口】/ 【其它】/【时间线轴】命令，或者直接按Alt+F9翻开时间轴。 翻开的时间轴线如以下图所示：时间轴线面板时间线下拉列表框播放栏动画条关键帧：在动画中的画面是关键的，会影响整个动画。行为通道帧编号(帧数)B循环循环动画的播放速度时间线面板中各部分的功能：时间线面板中各部分的功能：【时间线下拉列表框】【时间线下拉列表框】 ：指定显示文档中的哪一个：指定显示文档中的哪一个时间线。一个文档中可以包含多个时间线时间线。一个文档中可以包含多个时间线【播放栏】【播放栏】 ：在时间线中指定显示哪一帧。：在时间线中指定显示哪一帧。【帧编号【

15、帧编号( (帧数帧数) )】 ：以延续编号的方式表示动画中：以延续编号的方式表示动画中的帧。的帧。【行为通道】【行为通道】 ：用于存放控制时间线的指定帧的行：用于存放控制时间线的指定帧的行为。为。【FpsFps】 ：动画的播放速度，用每秒播放多少帧来表：动画的播放速度，用每秒播放多少帧来表示。系统默许设置是示。系统默许设置是1515帧帧/ /秒专家经过无数次实秒专家经过无数次实验得出的比较适宜的平均速度，可以很好地满足验得出的比较适宜的平均速度，可以很好地满足多数多数WindowsWindows系统中阅读器的显示要求，到达流畅系统中阅读器的显示要求，到达流畅的播放效果。的播放效果。 【动画条】 ：显示每个对象的动画长度。【关键帧】 ：在动画条中特殊的帧。【动画通道】 ：用于显示层对应的动画条。即是把要设置成动画的层添加到此通道中下面举例阐明如何运用时间线来制造动画效果：例1、滚动字幕例2、滚动广告牌例3、幻灯片效果本节小结本节小结 本节主要引见了图层的作用、图层的创建方法，最后又经过制造一个图层网页的实例讲解，使大家对图层的功能加深了了解。 重点熟练掌握网页中图层的创建，灵敏、合理运用图层以满足网页设计实践中的需求。上机操作作业上机操作作业 每个同窗独立上机操作完成教师讲过的例子。要求熟练掌握。