《《网页设计》页面布局层行为和时间轴的使用》由会员分享，可在线阅读，更多相关《《网页设计》页面布局层行为和时间轴的使用（34页珍藏版）》请在金锄头文库上搜索。
1、江西师范大学网页设计课程组网页设计江西师范大学网页设计课程组6.1 6.1 版版 式式 6.2 6.2 布布 局局 6.3 6.3 利用层精确定位网页元素利用层精确定位网页元素 6.4 6.4 时时 间间 轴轴 的的 应应 用用 6.56.5 行行 为为第第6 6章章 页面布局、层、行为和时间轴的使用页面布局、层、行为和时间轴的使用江西师范大学网页设计课程组网页布局是网页设计的一个重要组成部分，在网页布局是网页设计的一个重要组成部分，在 布局模式中使用表格和布局单元格可以对网页进行布局模式中使用表格和布局单元格可以对网页进行 排版，利用布局表格的嵌套可以设计复杂的版面，排版，利用布局表格的嵌套
2、可以设计复杂的版面， 除此之外还可以使用层来布局版面。除此之外还可以使用层来布局版面。第第6 6章章 页面布局、层、行为和时间轴的使用页面布局、层、行为和时间轴的使用江西师范大学网页设计课程组设计一个网页，先要规划好版式，常用的版式为分栏式结构，比如二分栏、设计一个网页，先要规划好版式，常用的版式为分栏式结构，比如二分栏、 三分栏、四分栏等，搜狐网就是一个三分栏结构，如图三分栏、四分栏等，搜狐网就是一个三分栏结构，如图6-16-1所示。所示。6.1 6.1 版版 式式江西师范大学网页设计课程组把搜狐网版式简化一下，如图把搜狐网版式简化一下，如图6-26-2所示，这是一个典型三分栏结构，所示，这
3、是一个典型三分栏结构， 第一行分两列，左边单元格放置第一行分两列，左边单元格放置LogoLogo图片。右边单元格放入导航菜单，图片。右边单元格放入导航菜单， 由于栏目比较多，所以分成三行排放，第二行为网页的主题部分，分为由于栏目比较多，所以分成三行排放，第二行为网页的主题部分，分为 三栏，左边一栏为特色栏目导航，右边两栏分别放置不同的网页内容，三栏，左边一栏为特色栏目导航，右边两栏分别放置不同的网页内容， 最下面一行放置版权信息。最下面一行放置版权信息。湖北省精品课程湖北省精品课程网页设计与制作网页设计与制作就是一个典型的二分栏的结构就是一个典型的二分栏的结构, , 如图如图6-36-3所示，
4、所示， Dreamweaver8.0Dreamweaver8.0提供了丰富的布局模式提供了丰富的布局模式, ,下面我们就利下面我们就利 用用Dreamweaver8.0Dreamweaver8.0提供的布局模式进行网页布局提供的布局模式进行网页布局- -6.1 6.1 版版 式式江西师范大学网页设计课程组6.2.16.2.1布局表格的绘制布局表格的绘制 6.2.26.2.2布局单元格的绘制布局单元格的绘制 6.2.36.2.3嵌套布局表格的绘制嵌套布局表格的绘制 6.2.4 6.2.4 布局单元格和表格的调整布局单元格和表格的调整6.2 6.2 布布 局局江西师范大学网页设计课程组Dreamw
5、eaver8.0Dreamweaver8.0可以方便地在页面上创建层，并精确地定位层，可可以方便地在页面上创建层，并精确地定位层，可 以对层进行选择、移动、调整大小和对齐等操作。层主要有如下功能：以对层进行选择、移动、调整大小和对齐等操作。层主要有如下功能：有了层以后可以将元素置于层中，因为层可以重叠，所以就可以产生有了层以后可以将元素置于层中，因为层可以重叠，所以就可以产生 许多重叠效果许多重叠效果可以利用层来精确定位网页元素。它可以包含文本、图像甚至其它层可以利用层来精确定位网页元素。它可以包含文本、图像甚至其它层 ，凡是，凡是HTMLHTML文件可包含的元素均可包含在层中。文件可包含的元
6、素均可包含在层中。层还有非常特殊的功能，就是通过应用时间轴可以使其移动和变换。层还有非常特殊的功能，就是通过应用时间轴可以使其移动和变换。 这样在层中放置一些图片或文本，就能够实现动画效果。这样在层中放置一些图片或文本，就能够实现动画效果。层可以转换成表格，为不支持层的浏览器提供解决方法。层可以转换成表格，为不支持层的浏览器提供解决方法。层可以显示和隐藏，应用这一功能可以实现网页导航中的下拉菜单。层可以显示和隐藏，应用这一功能可以实现网页导航中的下拉菜单。 在在HTMLHTML中，层的描述如下所示。中，层的描述如下所示。 width:168px; height:94px; z.index:1“
7、6.36.3利用层精确定位网页元素利用层精确定位网页元素江西师范大学网页设计课程组6.3.1 6.3.1 层的创建层的创建 创建层有如下方法。创建层有如下方法。1.1.使用插入菜单使用插入菜单2.2.使用插入栏使用插入栏6.36.3利用层精确定位网页元素利用层精确定位网页元素江西师范大学网页设计课程组6.3.2 6.3.2 设置层属性设置层属性 层属性面板主要有以下参数。层属性面板主要有以下参数。 层编号：层的名称，用于识别不同的层。层编号：层的名称，用于识别不同的层。 左：层的左边界距离浏览器窗口左边界的距离。左：层的左边界距离浏览器窗口左边界的距离。 上：层的上边界距离浏览器窗口上边界的距
8、离。上：层的上边界距离浏览器窗口上边界的距离。 宽：层的宽。宽：层的宽。 高：层的高度。高：层的高度。 Z Z轴：层的轴：层的Z Z轴顺序。轴顺序。 背景图像：层的背景图。背景图像：层的背景图。 可见性：层的显示状态，包括可见性：层的显示状态，包括defaultdefault、inheritinherit、visiblevisible和和hidden4hidden4个选项。个选项。 背景颜色：层的背景颜色。背景颜色：层的背景颜色。 剪辑：用来指定哪一部分是可见的，输出的数值是距离层剪辑：用来指定哪一部分是可见的，输出的数值是距离层4 4个边界的距离。个边界的距离。 溢出：如果层里面的文字太多或
9、图像太大，层的大小不足以全部显示的时候，溢出：如果层里面的文字太多或图像太大，层的大小不足以全部显示的时候， 有以下选项有以下选项: :visiblevisible超出的部分照样显示。超出的部分照样显示。hiddenhidden超出的部分隐藏。超出的部分隐藏。scroolscrool不管是否超出，都显示滚动条。不管是否超出，都显示滚动条。autoauto有超出时才出现滚动条。有超出时才出现滚动条。6.36.3利用层精确定位网页元素利用层精确定位网页元素江西师范大学网页设计课程组6.3.3层的基本操作利用层可以精确的定位网页元素，包括如何选择层，设置层的背景颜色、改变层的可见性等基本操作。6.3
10、6.3利用层精确定位网页元素利用层精确定位网页元素江西师范大学网页设计课程组6.3.4 应用层排版虽然通过层定位网页元素比表格方便很多，但由于受到浏 览器版本的限制不是所有的浏览器都支持层，只有IE4.0以 上的版本才能支持，Dreamweaver8.0提供了层和表格相互 转换功能，可以最大程度方便网页设计，同时兼顾低版本浏 览器的访问者。 将层转换为表格2.将表格转换为层6.36.3利用层精确定位网页元素利用层精确定位网页元素江西师范大学网页设计课程组给出网页的页面如下：6.3.5实践技能训练1-利用层布局页面板面江西师范大学网页设计课程组制作后的效果如下：6.3.5实践技能训练1-利用层布
11、局页面板面江西师范大学网页设计课程组给出的网页如下：6.3.6 实践技能训练2-利用层制作下拉菜单江西师范大学网页设计课程组制作后的效果如下：6.3.6 实践技能训练2-利用层制作下拉菜单江西师范大学网页设计课程组6.4.1时间轴的概念时间轴通过在不同的时间改变层的位置、大小、可见 性和叠放顺序可以实现动画效果。这就是动态HTML的表 达方式，也是Dreamweaver8-0强于其它网页编辑器的 地方。“时间轴”只能对“层”发生作用，因此，如果要产生动 画效果，首先要创建层，再将图像、文本等内容插入到层 中，然后通过层来移动这些元素。在Dreamweaver8-0中为我们提供了时间轴的功 能，
12、它是将动态的DHTM功能转换为类似动画编辑的时间 轴概念，可以非常方便地设定对象在页面中的运动。6.4时间轴的应用江西师范大学网页设计课程组6.4.1时间轴的概念 1、“时间轴”面板 2、创建时间轴动画 3、修改时间轴 4、使用多个时间轴 5、拷贝和粘贴动画 6、将动画序列应用于另一对象 7、重命名时间轴 8、时间轴动画小技巧6.4时间轴的应用江西师范大学网页设计课程组1.“时间轴”面板“时间轴”弹出式菜单：指定当前在“时间轴”面板中显示文档的哪些 时间轴。播放栏：显示当前在“文档”窗口中显示时间轴的哪一帧。帧编号：指示帧的序号。“后退”和“播放”按钮之间的数字是当前帧 编号。每秒 15 帧这
13、一默认设置是比较适当的平均速率，可用于在通 常的 Windows 和 Macintosh 系统上运行的大多数浏览器。上下文菜单：包含各种与时间轴相关的命令。“行为”通道：是应该在时间轴中特定帧处执行的行为的通道。动画条：显示每个对象的动画的持续时间。一个行可以包含表示不 同对象的多个条。不同的条无法控制同一帧中的同一对象。关键帧：是动画条中已经为对象指定属性（如位置）的帧。 Dreamweaver 8会计算关键帧之间帧的中间值。小圆标记表示关键 帧。“动画”通道：显示用于制作层和图像动画的条。6.4时间轴的应用-时间轴的概念江西师范大学网页设计课程组后退至起点：将播放栏移至时间轴中的第一帧。后
14、退：将播放栏向左移动一帧。单击“后退”并按住鼠标按钮可向后播放时间 轴。当前帧序号： 当前所在帧。 播放：将播放栏向右移动一帧。单击“播放”并按住鼠标按钮可向前播放时间 轴。自动播放：使时间轴于当前页在浏览器中加载时自动开始播放。“自动播放 ”将一个行为附加到页的 body 标签，该行为在页加载时执行“播放时间轴”操 作。循环：使当前时间轴于页在浏览器中打开时无限地循环。“循环”在动画的 最后一帧之后将“转到时间轴帧”行为插入到“行为”通道中。在“行为”通道中双 击该行为的标记可编辑此行为的参数并更改循环的次数。6.4时间轴的应用-时间轴面板江西师范大学网页设计课程组2.修改时间轴定义完时间轴
15、的基本组成部分后，可以进行一些更改，如添加和删除帧 、更改动画开始时间等。要修改时间轴，请执行以下任一操作：若要使动画的播放时间更长，请将结束帧标记向右拖动。动画中的所 有关键帧都会移动，以保持它们的相对位置不变。若要阻止其他关键帧移动， 请按住 Ctrl 键并拖动结束帧标记。 若要使层更早或更晚地到达某一关键帧位置，请在动画条中将关键帧 向左或向右移动。 若要更改动画的开始时间，请选择一个或多个与该动画关联的动画条 （按 Shift 可一次选择多个动画条），然后向左或向右移动。 若要移动整个动画轨迹的位置，请选择整个动画条，然后在页面上拖 动该对象。Dreamweaver 会调整所有关键帧的位置。在整个动画条上所做 出的任何更改将更改所有关键帧。若要在时间轴上添加或删除帧，请选择“修改”“时间轴”“添加帧”或 “修改”“时间轴”“删除帧”。 若要使时间轴于页在浏览器中打开时自动播放，请单击“自动播放”。“自 动播放”会向页附加一个行为，该行为将在页
