1、网页制作第6单元 表格图层行为时间轴教学内容网页制作第6单元 表格、图层、行为、时间轴第6单元 表格、图层、行为、时间轴课程目标： 掌握在网页中插入表格方法 掌握网页中细线表格、立体表格等制作方法 掌握层的使用建议学时：理论3学时，实践3学时。6.1 表格表格在网页中是一种用途非常广泛的工具，这不仅表现在它可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素，使这些元素的水平位置、垂直位置发生细小变化，这在网页版面布局方面是非常重要的。对于网页的排版布局来说，表格是不可或缺的工具。作为一名网页设计人员，表格运用得熟练与否直接影响作品外观的好坏，因上掌握网页表格是十分重要的。
2、6.1.1 表格的插入要在页面中插入表格，可按以下步骤操作。（1）使用菜单【插入】|【表格】，或常用工具栏的【表格】工具。（2）弹出【表格】对话框，如图6-1所示。图6-1 表格对话框行数：设置表格的行数。列数：设置表格的列数表格宽度：设置表格的宽度，可使用“像素值”为单位，也可以使用“百分比”作为单位，在嵌套表格中常使用百分比。边框粗细：设置表格线宽度，单位是像素。单元格边距：设置表格单元格内部和表格线的距离。单元格间距：设置单元格之间的距离。其它可使用默认设置，按下确定后，在页面出现插入的表格，表格下方的淡绿色线条及数据为表格的宽度数据。图6-2 插入表格示例6.1.2 设置表格属性选中表
3、格后，属性面板变为了表格的属性面板，可以在属性面板中直接设置表格的各项属性。图6-3 表格属性面板表格Id：设置表格的ID号，一般可不输入。行、列：设置表格行数、列数。宽、高：设置表格的宽度、高度，有百分比和像素值两种单位可选。填充、间距：填充栏用于设置单元格内部和表格线的距离，间距栏用于设置单元格之间的距离，单位是像素。对齐：设置表格的对齐方式，有左对齐、居中对齐、右对齐、默认方式为左对齐。边框：设置边框的宽度，单位是像素。类：使用CSS中定义的类（见有关CSS章节）列宽控制、行高控制按钮组：上行包含有清除表格宽度、将宽度转换为像素值、将宽度转换为百分比三个按钮。下行包含有清除表格行高、将行
4、高转换为像素值、将行高转换为百分比三个按钮。背景颜色、背景图像：用于设置表格的背景。边框颜色：用于设置表格边框的颜色。6.1.3 设置单元格属性当选中表格的单元格时，有关单元格属性设置显示在属性面板下方，如图6-4所示。图6-4 单元格属性面板合并单元格、拆分单元格：用于合并选定的单元格或拆分单元格对齐方式：设置单元格内的水平对齐方式（左对齐、居中对齐、右对齐）、垂直对齐方式（顶端对齐、居中对齐、底部对齐、基线对齐），默认均为居中对齐。宽、高：设置单元格的宽度和高度。背景、背景颜色、边框：设置所选单元格的背景颜色、背景图像及边框颜色。提示：在合并的表格单元格和嵌套表格，通常需要设置垂直方向为顶
5、端对齐方式。6.1.4 1像素细线表格的制作在Dreamweaver8中插入一个表格，尽管设置边框为1像素，表格的边框还是显得比较粗，看起来并不象是1像素的表格线，视觉效果不佳。为了获得1像素细线表格效果，可以采用以下方法来制作。方法一：通过颜色来实现，步骤如下：按一般方法插入表格，设置间距为1像素，边框为0像素。设置表格颜色为黑色。选定表格所有单元格，设置颜色为白色。图6-5 细线表格效果方法二：设置style属性的设置(1)插入表格，设置边框为1像素。(2)切换到代码视图，在表格的标签中增加style=border-collapse:collapse，参考如下：此时，在设计视图中仍显示为粗
6、线边框，但预览可看到细线表格。6.1.5 立体表格特效通过设置表格标签Table的两个属性borderColorDark（边框暗影）、borderColorLight（边框亮影），并加上适当背景bgcolor，就可以制作出三维立体表格表格。效果1：（1）插入表格，设置边框为5，间距为0。（2）打开代码视图，修改Table标签，增加borderColorLight、boderColorDark、bgcolor三个颜色值，参考如下：预览，效果如图6-6所示：图6-6 立体表格效果一（3）将代码改为：预览，效果如图6-7所示。图6-7 立体表格效果二6.1.6 圆角表格在Dreamweaver8中并
7、无直接的圆角表格，但在网页设计中，设计者常常喜欢用一些圆角表格以获得布局表现上的特别感觉。如何获得圆角表格效果，常用的方法是使用圆角的图形来实现。（1）使用Photoshop等软件，制作如图6-8所示的四个圆角图形。图6-8（2）插入3行3列表格，并设边框、边距、间距均为0。（3）在表格四个角的单元格，分别插入1.gif、2.gif、3.gif、4.gif，并调整单元格的大小与圆角图表一致，如图6-9。图6-9（4）第1行第2列、第3行第2列，均使用与圆角图形相同的颜色进行填充。（5）合并第2行的三个单元格。插入一个1行1列的内嵌表格，设置边框为1，表格线颜色与圆角相同，并调整宽度为100%，
8、高度与外表格相同。即可得到如图6-10所示的圆角表格。图6-10 圆角表格效果6.1.7 本节小结在网页上插入表格，通过设置属性，可以达到编辑表格的目的。通过在代码中更进一步的设置表格的属性，可以增强表格的效果。6.2 层“层”可以比作一张透明的纸，网页的元素可以画在这张纸上，当将多张这样的纸重叠在一起，上层有元素的地方，就会遮住下层，下层的元素可以透过上层透明的地方显示出来。层的上下顺序通过设置“Z”轴的数值来设定，数值大的在上层，数值小的在下层。6.2.1 插入层插入层，可使用布局工具栏的【绘制层】工具，在编辑的页面“画”出一个层，也可以使用菜单【插入】|【布局对象】|【层】。图6-11
9、使用布局工具“绘制层”如果要连续绘制多个层，只需按住Ctrl键，就可以使用“绘制层”工具，“画”出多个层，这在使用层进行布局时是十分有用的。6.2.2 层面板执行菜单【窗口】|【层】，显示出层面板，如图6-12所示。图6-12 层面板左边（小眼睛）为控制层的显示/隐藏，缺省为显示。“张开眼睛”图标为显示，“合上眼睛”为隐藏。单击左列可控制眼睛的开合，达到控制层的显示/隐藏的目的。名称Layer1、Layer2为层的名称，右边显示的是层的Z层数值。通过数值的调整可控制层重叠的顺序。如图6-13所示。图6-13 层的Z轴数值对重叠顺序的影响6.2.3 嵌套层层与层之间可以嵌套，被嵌套层称为子层，嵌
10、套层称为父层。当父层移动时，子层随之移动，反之，子层的移动不影响父层的位置。（1）插入嵌套层当光标位于层里面时，执行菜单【插入】|【布局对象】|【层】，则插入的新局成为嵌套层。在层面板中可看到以下嵌套关系，如图6-14所示。图6-14 在层面板中的嵌套关系（2）撤消嵌套关系在层面板中，将子层拖出，即可撤消嵌套关系。嵌套层的子层随父层的位置改变，在对象定位方面有一定的用处，但建议尽量少用，因为有些浏览器（如Netscape）不支持嵌套层。6.2.4 层的属性设置在属性面板中，可以直接设置层的一般层性，如层编号（名称）、背景、可见性、溢出、剪辑等，如图6-12所示。图6-15 面属性面板（1）溢出
11、：溢出选项共有4个。当层内部的内容过多时，进行设置。Visuble:：使超出部分显示。Hidden：将超出部分隐藏。Scroll：无论是否超出，均显示滚动条Auto：自动，当超出时，显示滚动条。见图6-16所示。图6-16 当图象超出层的大小时，显示滚动条（2）剪辑当层内的对象（如图片）尺寸大于层的大小时，使用剪辑设置其显示的区域。6.2.5 层与表格的转换层与表格是可以相互转换的，通过执行菜单【修改】|【转换】，可以选择【层到表格】也可以选择【表格到层】，可以实现表格与层的相互转换。但层转为表格时，必须清楚不存在有重叠、嵌套，否则转换将无法进行。6.2.6 本节小结本节简单介绍插入层及设置层
12、的属性。6.3 行为首先我们对行为做一个简单的了解，一个行为是由一个事件触发一个动作组成的，因此行为由两个基本元素构成：事件和动作。举一个例子：事件是访问者对网页的某个对象所做的事情，比如把鼠标移动到一个链接上，这就生一个鼠标经过的事件，这个事件触发浏览器去执行一段JavaSceipt代码，这就是动作，然后产生了JavaScript设计的效果，可能是显示信息，包可能是打开窗口等，这就是行为。6.3.1 行为面板执行菜单【窗口】|【行为】或使用Shift+F4可以打开行为面板，如图6-17所示。图6-17 行为面板（1）窗口上方显示行为面板对象操作按钮，包括：显示设置事件；仅显示所设计的事件。显
13、示所有事件：显示浏览器支持的所有事件添加行为：添加一个行为删除行为：删除选定的行为上移行为/下移行为：调整行为触发的顺序（2）面板左边显示页面对象可用的动作，根据所选触发动作的源对象，可以包括不同的动作，如onClick、onMouseOut等。（3）面板右边显示选用的动作，如弹出信息、交换图像等6.3.2 事件触发行为的对象可以是文字、图像、表格，甚至是整个页面等，根据选定的触发源的不同，可以有不同的事件，常用的事件有：OnLoad：当图像或页面结束载入进产生。OnUnload：当访问者离开页面时产生。OnClick：当访问者单击指定的元素（比如一个链接、按钮或图像地图）时产生。单击直到访问
14、者释放鼠标按键时才完成，只要按下onMouseDown按钮便会令某些现象发生。OnDblClick：当访问者双击指定的元素时产生（双击是指向元素时迅速按下及释放鼠标按键）。OnMouseDown：当访问者按下鼠标按键时产生（访问者不必释放鼠标按键以产生这个事件）。OnMouseMove：当访问者在指向一个特定元素并移动鼠标时产生（那是指光标停留在元素的边界以内）。OnMouseOut：当光标从特定的元素（该特定元素通常是一个图像或一个附加于图像的链接）移走时产生。这个事件经常被用来和“恢复交换图像（Swap Image Restore0“动作关联，当访问者不再指向一个图像时，把它返回到其初始状
15、态。OnMouseOver：当鼠标首次指向特定元素时产生（指当光标从不是指向该元素到指向该元素），该特定元素通常是一个链接。OnMouseUp：当一个被按下的鼠标按键被释放时产生。OnSelect：当访问者在一个文本区域内选择文本时产生6.3.3 动作当在【行为面板】上按下“+”按钮添加行为时，弹出可选用的各种动作，如图6-18所示。图6-18 行为6.3.4 行为应用示例网页菜单的制作对于较多页面的网站，常使用菜单导航，菜单的制作方法很多，使用行为中的“显示弹出式菜单”制作菜单是一种较简单的方法，下面介绍使用“显示弹出式菜单制作”网页菜单的步骤。（1）新建网页menu.html，插入1行7列
16、表格（边框线粗细0、边距0、间距0），输入一级菜单文字，并设置各一级菜单文字链接到“#”，即空链接。系部简介师资力量专业介绍实训环境作品欣赏学子风采网络教程（2）作为示例，选中“专业介绍”，在【行为】面板中，按下“+”添加“显示弹出式菜单”行为，进入如图6-19所示的菜单编辑面板。图6-19 弹出式菜单内容选项面板在【内容】选项中，提供有相关操作按钮，依次为增加菜单项、删除菜单项、左缩进项、缩进项、上移、下移等。在文本中逐条输入菜单项文字，如“电脑艺术设计”，并设置链接文件及目标。通过缩进调整按钮，可设置次级菜单项，如图6-19中的环境艺术设计专业下分为室内设计方向、景观规划设计方向等，作为“
17、环境艺术设计”下的两个次级菜单。 在【外观】选项中，可设置菜单的放置方式“垂直菜单”/“水平菜单”，以及文字的大小、颜色等属性。图6-20 弹出式菜单外观面板在【高级】选项中，可设置边框、单元格高度及间距等。在【位置】选项中，可设置弹出式菜单的具体位置。制作完毕，按下“确定”按钮，完成一个弹出式菜单制作。（3）重复步骤（2）设置其它菜单文字对应的二级菜单项。（4）如果需要修改，则打开行为面板，选中“onMouseOver|显示弹出式菜单”行为，双击即可进行修改。（5）制作完毕，预览。效果如图6-21所示。图6-21 弹出式菜单示例6.3.5 本节小结本节简单介绍了行为的使用，使用Dreamwe
18、aver88中的行为，就可以方便地完成菜单、弹出信息、检查插件等较复杂的功能。本节着重讲述了关于“行为”的定义和基本功能。我们知道行为就是由一段段JaveScript代码组成的，它主要是为更好地控制其他网页中的元素而设置的，因此严格来说，行为不是网页中的元素。Dreamweaver8提供了22种行为动作，对于普通使用者来说已经足够了，当然行为的扩展是无限制的，只要掌握了JaveScript，就可以编写行为了，也可以从Dreamweave的官方网站中获得。6.4 时间轴在浏览网页时，常常会看到有些小广告在页面上随意游动，这是如何实现的呢？将浮动的广告作为一个层，然后通过时间轴来控制其游动路线，就
19、是一个十分简单的方法，这种方法创建的动画又称为时间轴动画。这种动画是如何实现的呢？与电影的原理是一样的，电影是通过连续放映不同的图像，从而在人的眼中加以看到运动的画面。时间轴动画就是通过时间的变化而不断改变层的位置所产生的动画效果。6.4.1 时间轴面板要了解时间轴的使用，首先认识一下时间轴面板。执行菜单【窗口】|【时间轴】，即可将时间轴面板显示出来，为了方便起见，我们先建立一个图层，然后拖动图层的“选择柄”到时间轴上，结果如图6-22所示。图6-22 时间轴面板下面介绍时间轴面板各控件的功能： 播放开始：显示当前页面上的层是时间轴的哪一帧开始播放。 时间轴下拉菜单：指定当前显示在“时间轴”面
20、板中的是文档的哪一条时间轴。 动画条：显示每个对象的动画持续时间。一行可包含多个代表不同对象的动画条，不同的动画条不能控制同一帧中同一对象。 当前帧：表示当前帧的序列号。 播放速度：即每秒钟播放的帧数来控制动画的持续时间，通常的默认设置是每秒钟播放15帧，这对于运行在Window系统上的大多数浏览器是一个较好的平均速率。速率并不是越快越好，太快的速率不一定能提高性能浏览器总是播放动画的每一帧，即使它们不能达到用户系统上指定的帧速率，高于浏览器可管理速率的帧速率将被忽略。 自动播放：选中后，在浏览器打开该页面，动画就自动播放。 循环播放：选中后在浏览器中会无限循环播放，在行为通道中可以看到循环的
21、标签，双击标签可以修改行为的参数和循环次数。6.4.2 创建浮动广告要创建一个时间轴动画，第一步就是在页面中插入一个层；第二步在层中插入图像、文字或动画（GIF动画、Flash动画）；第三步使用时间轴窗口改变层的位置，创建时间轴动画。其详细步骤如下：（1）在网页编辑窗口插入一个层，并在层中插入一幅图片、文字或动画，并设置相应的链接，如图6-23所示。图6-23 图层（2）执行菜单【窗口】|【时间轴】，显示出【时间轴】面板（3）拖动图层左上角的选择柄到时间轴第1行第1帧上，结果在时间轴上形成了动画条，共有15帧。（4）在时间轴面板上拖动动画条的结束帧至60帧位置。按缺省的15Fps的速度，则共有
22、4秒钟的动画。（5）在时间轴面板第1帧是单击，然后在网页上拖动图层到设定的初始位置。（6）在时间轴面板最后一帧（即60帧）上单击，然后在网页上拖动图层到设定的结束位置。可看到在网页上形成一条从初始位置到结束位置的直线，表示此时图层将作直线运动。（7）在时间轴面板的第10帧位置右击，在弹出的菜单中选择“增加关键帧”，然后在网页上拖动图层到另一个位置，可看到原来的直线轨迹发生了变化。如图6-24所示。图6-24 增加了关键帧的图层轨迹（8）根据需要可重复步骤（7）分别在第20、30、40、50帧位置增加关键帧，并改变图层的位置，结果可得到一个曲线运动的轨迹线。如图6-25所示。图6-25 增加了多
23、个关键帧后的图层运动轨迹线（9）勾选时间轴上的“自动播放”、“循环”，按下F12进行预览。可看到图层在页面上循环浮动。实际上，还有更简单快捷的办法，在拖动图层到时间轴后，右击时间轴，在弹出的菜单中选择“录制层路径”，然后在页面中拖动图层随意游动，此时会将游动的路径自动记录下来，如图6-26所示。在预览时可看到图层按照记录好的路径“游动”。图6-26 录制层路径6.4.3 本节小结制作网页浮动广告多见于商业类网站中，在一般的网站中也常用浮动广告作为一些重要提示或最新消息提示，本节主要介绍使用时间轴来制作浮动广告。在这种时间轴广告中，广告就是一个层，通过在时间轴中设置关键帧，并改变页面中广告在关键
24、帧中的位置，从而设定了广告的运动轨迹。6.5 同步训练6.5.1 填空题（1）插入表格，如果不设定表格的间距，则默认值为 。（2）如果一次要绘制多个层，需要按住键盘上的 键。6.5.2 问答题（1）选择整个表格与选择表格所有单元格有何不同？（2）表格边框的属性borderColorDark、borderColorLight的作用分别是什么？如何利用这两个属性制作三维立体表格表格？6.5.3 实训题 (1) 练习用3种方法制作1像素细线表格（2）参考光盘中char62.html，练习制作如图6-27的菜单，一级菜单“ABOUTME”、“设计作品”、“策划方案”、“设计思考”，当鼠标移动一级菜单项（如图中的设计作品）时，在下一行位置显示二级菜单项（如图中的广告作品、包装作品、室内设计、工艺设计）。图6-27 菜单示例（3）练习制作一浮动广告，使其在页面上循环浮动。
