《网页设计》——页面布局、层、行为及时间轴的使用

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
江西师范大学网页设计课程组
6.4时间轴的应用
5.将动画序列应用于另一对象 为了节约时间,您可以只创建一次动画序列,然后将其应 用于文档中剩余的每个层。若要将现有动画序列应用于其他对 象,请执行以下操作: ⑴在“时间轴”面板中,选择动画序列并将其拷贝。 ⑵单击“时间轴”面板的任一帧,然后在该帧处粘贴动画 序列。 ⑶右键单击 (Windows) 或按住 Control 键并单击 (Macintosh) 粘贴的动画序列,然后从上下文菜单中选择“更 改对象”。 ⑷在出现的对话框中,从弹出式菜单中选择另一对象并单 击“确定”。 对于要遵循同一动画序列的其他所有对象,重复第 2 步到 第 4 步。 创建动画序列后,您也可以改变关于制作哪一个层的 动画的决定;只需执行上面的第 3 步和第 4 步即可(不必进行
6.4.1时间轴的概念
江西师范大学网页设计课程组
6.4时间轴的应用---时间轴的概念
6.重命名时间轴 若要重命名当前在“时间轴”面板中显示的时间轴,请执 行以下操作: ⑴选择“修改 ”、“时间轴”、“重命名时间轴”。 ⑵在“重命名时间轴”对话框中输入新的名称。 如果您的文档包含“播放时间轴”行为操作(例如,如果 它包含访问者必须单击才能启动时间轴的按钮),则必须 编辑该行为以反映新的时间轴名称。
江西师范大学网页设计课程组
6.3.6 实践技能训练2--------利用层制作下拉菜单
制作后的效果如下:
江西师范大学网页设计课程组
6.4时间轴的应用
6.4.1时间轴的概念 时间轴通过在不同的时间改变层的位置、大小、可见 性和叠放顺序可以实现动画效果。这就是动态HTML的表 达方式,也是Dreamweaver8-0强于其它网页编辑器的 地方。 “时间轴”只能对“层”发生作用,因此,如果要产 生动画效果,首先要创建层,再将图像、文本等内容插入 到层中,然后通过层来移动这些元素。 在Dreamweaver8-0中为我们提供了时间轴的功 能,它是将动态的DHTM功能转换为类似动画编辑的时间 轴概念,可以非常方便地设定对象在页面中的运动。
江西师范大学网页设计课程组
6.3利用层精确定位网页元素
6.3.3层的基本操作 利用层可以精确的定位网页元素,包括如何选择层,设置 层的背景颜色、改变层的可见性等基本操作。
江西师范大学网页设计课程组
6.3利用层精确定位网页元素
6.3.4 应用层排版 虽然通过层定位网页元素比表格方便很多,但由于受到浏 览器版本的限制不是所有的浏览器都支持层,只有IE4.0以 上的版本才能支持,Dreamweaver8.0提供了层和表格相 互转换功能,可以最大程度方便网页设计,同时兼顾低版本 浏览器的访问者。 ⒈将层转换为表格 2.将表格转换为层
江西师范大学网页设计课程组
6.1 版 式
设计一个网页,先要规划好版式,常用的版式为分栏式结构,比如二分栏、 三分栏、四分栏等,搜狐网就是一个三分栏结构,如图6-1所示。
江西师范大学网页设计课程组
6.1 版 式
把搜狐网版式简化一下,如图6-2所示,这是一个典型三分栏结构, 第一行分两列,左边单元格放置Logo图片。右边单元格放入导航菜单, 由于栏目比较多,所以分成三行排放,第二行为网页的主题部分,分为 三栏,左边一栏为特色栏目导航,右边两栏分别放置不同的网页内容, 最下面一行放置版权信息。 湖北省精品课程《网页设计与制作》就是一个典型的二分栏的结构, 如图6-3所示, Dreamweaver8.0提供了丰富的布局模式,下面我们就 利用Dreamweaver8.0提供的布局模式进行网页布局-
网页设计
江西师范大学网页设计课程组
第6章 页面布局、层、行为和时间轴的使用
6.1 6.2 6.3 6.4 6.5 版 式 布 局 利用层精确定位网页元素 时 间 轴 的 应 用 行 为
江西师范大学网页设计课程组
第6章 页面布局、层、行为和时间轴的使用
网页布局是网页设计的一个重要组成部分,在 布局模式中使用表格和布局单元格可以对网页进行 排版,利用布局表格的嵌套可以设计复杂的版面, 除此之外还可以使用层来布局版面。
江西师范大学网页设计课程组
6.3.5实践技能训练1------利用层布局页面板面
给出网页的页面如下:
江西师范大学网页设计课程组
6.3.5实践技能训练1------利用层布局页面板面
制作后的效果如下:
江西师范大学网页设计课程组
6.3.6 实践技能训练2--------利用层制作下拉菜单
给出的网页如下:
江西师范大学网页设计课程组
6.4时间轴的应用---时间轴的概念
2.修改时间轴 定义完时间轴的基本组成部分后,可以进行一些更改,如添加和删除帧、 更改动画开始时间等。要修改时间轴,请执行以下任一操作: 若要使动画的播放时间更长,请将结束帧标记向右拖动。动画中的所 有关键帧都会移动,以保持它们的相对位置不变。若要阻止其他关键帧移动, 请按住 Ctrl 键并拖动结束帧标记。 若要使层更早或更晚地到达某一关键帧位置,请在动画条中将关键帧 向左或向右移动。 若要更改动画的开始时间,请选择一个或多个与该动画关联的动画条 (按 Shift 可一次选择多个动画条),然后向左或向右移动。 若要移动整个动画轨迹的位置,请选择整个动画条,然后在页面上拖 动该对象。Dreamweaver 会调整所有关键帧的位置。在整个动画条上所做 出的任何更改将更改所有关键帧。 若要在时间轴上添加或删除帧,请选择“修改”>“时间轴”>“添加 帧”或“修改”>“时间轴”>“删除帧”。 若要使时间轴于页在浏览器中打开时自动播放,请单击“自动播放”。 “自动播放”会向页附加一个行为,该行为将在页加载时执行“播放时间轴” 操作。 若要使时间轴连续循环,请单击“循环”。“循环”将“转到时间轴帧” 操作插入到动画最后一帧后的“行为”通道。您可以编辑此行为的参数以定 江西师范大学网页设计课程组
6.4时间轴的应用----时间轴的概念
3.使用多个时间轴 若要管理多个时间轴,请执行以下任一操作: 若要新建时间轴,请选择“修改”>“时间 轴”>“添加时间轴”。 若要删除选定的时间轴,请选择“修改”>“时间 轴”>“删除时间轴”。这将永久删除选定时间轴中的所 有动画。 若要重命名选定时间轴,请选择“修改”>“时 间轴”>“重命名时间轴”,或者在“时间轴”面板的 “时间轴”弹出式菜单中输入新的名称。 若要在“时间轴”面板中查看另一个时间轴,请 从“时间轴”面板的“时间轴”弹出式菜单中选择一个新 的时间轴。
江西师范大学网页设计课程组
6.2 布
6.2.1布局表格的绘制 6.2.2布局单元格的绘制 6.2.3嵌ຫໍສະໝຸດ Baidu布局表格的绘制 6.2.4 布局单元格和表格的调整

江西师范大学网页设计课程组
6.3利用层精确定位网页元素
Dreamweaver8.0可以方便地在页面上创建层,并精确地定位层,可 以对层进行选择、移动、调整大小和对齐等操作。层主要有如下功能: 有了层以后可以将元素置于层中,因为层可以重叠,所以就可以产 生许多重叠效果 可以利用层来精确定位网页元素。它可以包含文本、图像甚至其它 层,凡是HTML文件可包含的元素均可包含在层中。 层还有非常特殊的功能,就是通过应用时间轴可以使其移动和变换。 这样在层中放置一些图片或文本,就能够实现动画效果。 层可以转换成表格,为不支持层的浏览器提供解决方法。 层可以显示和隐藏,应用这一功能可以实现网页导航中的下拉菜单。 在HTML中,层的描述如下所示。 <div id="layerl" style="position:absolute; left:162px; top:247px; width:168px; height:94px; z.index:1"></div>
江西师范大学网页设计课程组
6.3利用层精确定位网页元素
6.3.1 层的创建 创建层有如下方法。 1.使用插入菜单 2.使用插入栏
江西师范大学网页设计课程组
6.3利用层精确定位网页元素
6.3.2 设置层属性
层属性面板主要有以下参数。 ⑴层编号:层的名称,用于识别不同的层。 ⑵左:层的左边界距离浏览器窗口左边界的距离。 ⑶上:层的上边界距离浏览器窗口上边界的距离。 ⑷宽:层的宽。 ⑸高:层的高度。 ⑹Z轴:层的Z轴顺序。 ⑺背景图像:层的背景图。 ⑻可见性:层的显示状态,包括default、inherit、visible和hidden4个选项。 ⑼背景颜色:层的背景颜色。 ⑽剪辑:用来指定哪一部分是可见的,输出的数值是距离层4个边界的距离。 ⑾溢出:如果层里面的文字太多或图像太大,层的大小不足以全部显示的时候, 有以下选项: visible超出的部分照样显示。 hidden超出的部分隐藏。 scrool不管是否超出,都显示滚动条。 auto有超出时才出现滚动条。
江西师范大学网页设计课程组
6.4时间轴的应用
6.4.1时间轴的概念 1、“时间轴”面板 2、创建时间轴动画 3、修改时间轴 4、使用多个时间轴 5、拷贝和粘贴动画 6、将动画序列应用于另一对象 7、重命名时间轴 8、时间轴动画小技巧
江西师范大学网页设计课程组
6.4时间轴的应用--时间轴的概念
1.“时间轴”面板 “时间轴”弹出式菜单:指定当前在“时间轴”面板中显示文档的 哪些时间轴。 播放栏:显示当前在“文档”窗口中显示时间轴的哪一帧。 帧编号:指示帧的序号。“后退”和“播放”按钮之间的数字是当 前帧编号。每秒 15 帧这一默认设置是比较适当的平均速率,可用于 在通常的 Windows 和 Macintosh 系统上运行的大多数浏览器。 上下文菜单:包含各种与时间轴相关的命令。 “行为”通道:是应该在时间轴中特定帧处执行的行为的通道。 动画条:显示每个对象的动画的持续时间。一个行可以包含表示不 同对象的多个条。不同的条无法控制同一帧中的同一对象。 关键帧:是动画条中已经为对象指定属性(如位置)的帧。 Dreamweaver 8会计算关键帧之间帧的中间值。小圆标记表示关键 帧。 “动画”通道:显示用于制作层和图像动画的条。
江西师范大学网页设计课程组
6.4时间轴的应用--时间轴面板
后退至起点:将播放栏移至时间轴中的第一帧。。 后退:将播放栏向左移动一帧。单击“后退”并按住鼠标按钮可向后播放时 间轴。 当前帧序号: 当前所在帧。 播放:将播放栏向右移动一帧。单击“播放”并按住鼠标按钮可向前播放 时间轴。 自动播放:使时间轴于当前页在浏览器中加载时自动开始播放。“自动播 放”将一个行为附加到页的 body 标签,该行为在页加载时执行“播放时间 轴”操作。 循环:使当前时间轴于页在浏览器中打开时无限地循环。“循环”在动画 的最后一帧之后将“转到时间轴帧”行为插入到“行为”通道中。在“行为” 通道中双击该行为的标记可编辑此行为的参数并更改循环的次数。
江西师范大学网页设计课程组
6.4时间轴的应用---拷贝和粘贴动画
⑷将选定内容粘贴到时间轴中。 同一对象的动画条不 能重叠,因为一个层不能同时处于两个位置(一个图像也 不能同时具有两个不同的源)。如果您所粘贴的动画条与 同一对象的另一动画条重叠,Dreamweaver 会自动将选 定内容移至第一个不重叠的帧。 在将动画序列粘贴到另一文档时,应牢记两条原则: 如果您拷贝层的动画序列且新文档包含同名的层, Dreamweaver 会将动画属性应用于新文档中的现有层。 如果您拷贝层的动画序列且新文档不包含同名的层, Dreamweaver会将层和它的内容随动画序列一起从初始 文档中拷贝下来。若要将粘贴的动画序列应用于新文档中 的另一个层,请从上下文菜单中选择“更改对象”并从弹 出式菜单中选择第二个层的名称。如果需要,删除所粘贴 的层。
江西师范大学网页设计课程组
6.4时间轴的应用---时间轴的概念
4.拷贝和粘贴动画 若要剪切(或拷贝)并粘贴动画序列,请执行以下操
作:
⑴单击一个动画条以选择一个序列。若要选择多个序 列,请按住 Shift 键并单击多个动画条;若要选择所有序 列,请按 Ctrl+A 键 (Windows) 或 Command+A 键 (Macintosh)。 ⑵拷贝或剪切选定内容。 ⑶ 执行下列操作之一: 将播放栏移至当前时间轴中的另一处。 从“时间轴”弹出式菜单中选择另一个时间轴。 打开另一个文档或创建一个新文档,然后在“时 间轴”面板中单击。
相关文档
最新文档