第6章 页面布局、层、行为和时间轴的使用
第6章 AP元素

6.4.2激活层
要在层中插入文字、图像等,首先要激活层。
注意:默认情况下,当在一个层中插入比层的尺寸还大的 图片时,会将层自动撑大。而如果选中层,将图片设置为 层的背景图像,则不会影响层的大小。 注意“激活层”不等于选择层,无法设置层的属性。
6.4.3 选择层
要对层进行移动、调整大小等操作,首先要选择层。
第6章 AP元素
在Dreamweaver中,可以使用AP元素来设计页面的布局。 利用AP元素可以灵活准确地在页面中放置内容,无论将其放 置到文档中的哪一个位置,都可以随意移动和设置大小。 AP 元素(绝对定位元素)是分配有绝对位置的 HTML 页面元 素,具体地说,就是 div 标签或其它任何标签。AP 元素可 以包含文本、图像或其它任何可放置到 HTML 文档正文中的 内容。
6.1 AP元素简介
在Dreamweaver CS3中,层被称为AP元素。Dreamweaver使用div标签创建AP元素。 AP元素可以包含文本、图像,或其它任何可放置到网页中的内容。 当创建AP元素时,Dreamweaver在网页中插入一个div标签,并为该div指定一个ID值(默认情况下 第一个div指定为apDiv1,第二个div指定为apDiv2,依此类推)。Dreamweaver使用文档头中的嵌入式 CSS代码来定位AP Div以及设置AP Div大小。
6.4.4移动层
1. 在层属性检查器里精确设置“左”“上”的数值(像 2. 3.
素)。坐标系以页面或父层的左上角为标准起点( 0, 0) 。 拖曳层。此方法不精确。 方向键,每次微移一个像素。 Shift+方向键,则是吸附 到网格。
吸附到网格:“查看-网格设置”
6.4.5 对齐层
《网页设计与制作教程与实训》全套电子课件教案-第六章 行为的操作

第六章 行为的操作
(3)选择“改变为红色” ,打开行为面板,选择 “改变属性”,在对话框中的“对象类型”下拉列 表框中选择DIV选项,在“命名对象”下拉列表 框中选择div “Layer1”选项;在“属性”选项区选 择style.color选项,在“新的值”文本框中输入 “red”,单击“确定”按钮,
《网页设计与制作教程与实训 》
第六章 行为的操作
三、操作题
打开素材页面“htm\f61.htm”,为该网页添加背景音 乐;为表头图片设置弹出信息,当鼠标滑过该图片时会 弹出消息。
打开素材文件“htm\62.htm”,在该页面中插入层, 输入相应的文字,为该层创建任意路径的运动,让该层 在浏览网页的时候能自动循环播放。
《 Dreamweaver mx 2004网页制作与设计教程》
第六章 行为的操作 《 Dreamweaver mx 2004网页制作与设计教程》
第六章 行为的操作
(2)选中页面中的文字“改变为红色”,在 “属性” 面板中的“链接”下拉列表框中输入“#”,就将 此文本设置成了可以响应鼠标事件的空链接。 对“改变为蓝色”、“改变为黑色”、“改变文字。 恢复文字”、“隐藏文字。显示文字”都作如此 设置。
提示 使用此行为还可以针对整个文档,让用户在 打开网页的时候能随之打开另外一个小窗口,可 以为本网站做一个内容简介或主要导航,增加网 页的美观和实用性。
《网页设计与制作教程与实训 》
第六章 行为的操作
6.2.5播放背景音乐
使用“播放声音”行为可以针对当前网页设 置背景音乐,还可以针对某一对象设置音乐,并 可以对音乐播放进行控制,使用此行为可以给网 页带来更加精彩的多媒体效果。
第六章 使用框架,层和时间轴

第六章使用框架、层和时间轴本章要点:●框架的概念●使用框架设置网页布局●层的概念●创建层●使用时间轴一、使用框架(P90 6.2 使用框架)(一)、使用框架如果多个网页拥有相同的导航区,只是内容有所不同,则可以使用框架来设计网页布局,这样浏览者在查看不同内容时,无需每次都下载整个页面,而可以保持导航部分不变,只下载网页中需要更新的内容即可,从而极大提高网页的下载速度。
这类网页称为框架页,其最典型的应用时各大论坛的设计。
1、框架的概念框架页面通过框架将网页分成多个独立的区域,在每个区域可以单独显示不同的页面,每个区域可以独立翻滚。
(1)框架网页的结构框架由框架和框架集组成,框架就是网页中被分隔开的各个部分,每一个部分都是一个完整的网页,这些网页共同组成了框架集。
框架集实际上也是一个网页文件,用于定义框架的结构、数量、尺寸等属性。
框架集又被称为父框架,框架被称为子框架,将某个页面划分为若干框架时,既可独立地操作各个框架,创建新文件,也可为框架指定自己制作好的文档。
选择【查看】-【可视化助理】-【框架边框】命令可以显示或隐藏框架边界。
(2)框架网页的功能——导航(3)框架结构的优点●浏览者无需为每个页面重新加载与导航相关的图形,可以大大提高网页的下载效率●每个框架都有自己的滚动条,浏览者可以独立滚动这些框架2、创建框架网页文档(1)在【新建文档】对话框中创建文件-新建-示例中的页-框架集-选择所需框架结构在【框架标签辅助功能属性】对话框中为每一个框架指定一个标题(2)在【布局】插入栏中创建插入-布局-框架-可选13种预定于框架(3)手动创建框架网页查看-可视化助理-框架边框,显示框架边框,选中所需分隔的框架,按ALT键同时,光标移至框架边框上,显示为双箭头时,即可将一个框架拆分为两个框架。
(二)、编辑框架1、框架的基本操作(1)创建嵌套框架打开一个框架网页,将光标移至要创建嵌套框架集的框架中,选择【插入记录】-【HTML】-【框架】-选择某种嵌套框架集(2)删除框架光标移至需要删除的框架边缘,显示为双箭头时,将鼠标朝向框架外继续拖拽至边框消失即删除该框架(3)选择框架和框架集【窗口】-【框架】,显示框架面板,在框架面板中选择所需框架。
网页制作第6单元-表格、图层、行为、时间轴

第6单元表格、图层、行为、时间轴课程目标:●掌握在网页中插入表格方法●掌握网页中细线表格、立体表格等制作方法●掌握层的使用建议学时:理论3学时,实践3学时。
6.1 表格表格在网页中是一种用途非常广泛的工具,这不仅表现在它可以有序地排列数据,还表现在它可以精确地定位文本、图像及其他网页中的元素,使这些元素的水平位置、垂直位置发生细小变化,这在网页版面布局方面是非常重要的。
对于网页的排版布局来说,表格是不可或缺的工具。
作为一名网页设计人员,表格运用得熟练与否直接影响作品外观的好坏,因上掌握网页表格是十分重要的。
6.1.1 表格的插入要在页面中插入表格,可按以下步骤操作。
(1)使用菜单【插入】|【表格】,或常用工具栏的【表格】工具。
(2)弹出【表格】对话框,如图6-1所示。
图6-1 表格对话框行数:设置表格的行数。
列数:设置表格的列数表格宽度:设置表格的宽度,可使用“像素值”为单位,也可以使用“百分比”作为单位,在嵌套表格中常使用百分比。
边框粗细:设置表格线宽度,单位是像素。
单元格边距:设置表格单元格内部和表格线的距离。
单元格间距:设置单元格之间的距离。
其它可使用默认设置,按下确定后,在页面出现插入的表格,表格下方的淡绿色线条及数据为表格的宽度数据。
图6-2 插入表格示例6.1.2 设置表格属性选中表格后,属性面板变为了表格的属性面板,可以在属性面板中直接设置表格的各项属性。
图6-3 表格属性面板①表格Id:设置表格的ID号,一般可不输入。
②行、列:设置表格行数、列数。
③宽、高:设置表格的宽度、高度,有百分比和像素值两种单位可选。
④填充、间距:填充栏用于设置单元格内部和表格线的距离,间距栏用于设置单元格之间的距离,单位是像素。
⑤对齐:设置表格的对齐方式,有左对齐、居中对齐、右对齐、默认方式为左对齐。
⑥边框:设置边框的宽度,单位是像素。
⑦类:使用CSS中定义的类(见有关CSS章节)⑧列宽控制、行高控制按钮组:上行包含有清除表格宽度、将宽度转换为像素值、将宽度转换为百分比三个按钮。
4.层、 行为和时间轴

onKeyPress:当按下和松开任意键时产生。此事件相当 于把onKeyDown和onKeyUp这两事件合在一起。
onKeyUp:当按下的键松开时产生。 onLoad:当一图像或网页载入完成时产生。
onMouseDown:当访问者按下鼠标时产生。 onMouseMove:当访问者将鼠标在指定元素上移动时产生。 onMouseOut:当鼠标从指定元素上移开时产生。 onMouseOver:当鼠标移动到指定元素(刚进入区域)时产生。 onMouseUp:当鼠标弹起时产生。
onSubmit:当访问者提交表单时产生。
制作步骤
(1)在“布局”插入栏中点击“绘制层”按钮在页面中 绘制一个层,然后在层的“属性面板”中设置各参数。
(2)将光标移至title层内,点击插入面板“常用”视图 下的表格按钮,插入一个1行4列的表格,宽度为100%, 设置四个单元格宽度为120px
实例4:打开浏览器窗口
实例创意
打开浏览器窗口即在打开当前网页的同时,另外打开一个新 的窗口,而这个新打开的窗口,可以根据自己的喜好对它的菜单、
页面尺寸、滚动条等进行设置,如263网站打开时弹出的“免费试
用”广告窗口。
制作步骤:
(1)设计一个页面,作为新窗口。
(2)创建另一个网页“index.htm”,由于是对整个页的行为, 即广告窗口是在该网页加载时自动弹出,所以选择状态栏 上的“<body>”后单击行为面板的“+”按钮,选择“打开 浏览器窗口”菜单命令 (3)系统弹出 “打开浏览器窗口”对话框,在“要显示的 URL”文本框中输入新窗口文件的路径和文件名,也可以通 过单击“浏览”按钮查找相应的路径及文件名。“窗口宽 度”和“窗口高度”文本框中定义新窗口的长宽值。 (4)选择事件为“onload”。
网页制作第6单元表格、图层、行为、时间轴

网页制作第6单元表格、图层、行为、时间轴-标准化文件发布号:(9456-EUATWK-MWUB-WUNN-INNUL-DDQTY-KII第6单元表格、图层、行为、时间轴课程目标:掌握在网页中插入表格方法掌握网页中细线表格、立体表格等制作方法掌握层的使用建议学时:理论3学时,实践3学时。
6.1 表格表格在网页中是一种用途非常广泛的工具,这不仅表现在它可以有序地排列数据,还表现在它可以精确地定位文本、图像及其他网页中的元素,使这些元素的水平位置、垂直位置发生细小变化,这在网页版面布局方面是非常重要的。
对于网页的排版布局来说,表格是不可或缺的工具。
作为一名网页设计人员,表格运用得熟练与否直接影响作品外观的好坏,因上掌握网页表格是十分重要的。
6.1.1 表格的插入要在页面中插入表格,可按以下步骤操作。
(1)使用菜单【插入】|【表格】,或常用工具栏的【表格】工具。
(2)弹出【表格】对话框,如图6-1所示。
2图6-1 表格对话框行数:设置表格的行数。
列数:设置表格的列数表格宽度:设置表格的宽度,可使用“像素值”为单位,也可以使用“百分比”作为单位,在嵌套表格中常使用百分比。
边框粗细:设置表格线宽度,单位是像素。
单元格边距:设置表格单元格内部和表格线的距离。
单元格间距:设置单元格之间的距离。
其它可使用默认设置,按下确定后,在页面出现插入的表格,表格下方的淡绿色线条及数据为表格的宽度数据。
图6-2 插入表格示例36.1.2 设置表格属性选中表格后,属性面板变为了表格的属性面板,可以在属性面板中直接设置表格的各项属性。
图6-3 表格属性面板①表格Id:设置表格的ID号,一般可不输入。
②行、列:设置表格行数、列数。
③宽、高:设置表格的宽度、高度,有百分比和像素值两种单位可选。
④填充、间距:填充栏用于设置单元格内部和表格线的距离,间距栏用于设置单元格之间的距离,单位是像素。
⑤对齐:设置表格的对齐方式,有左对齐、居中对齐、右对齐、默认方式为左对齐。
网页制作-行为与时间轴及其应用

① 【时间轴列表】: 是时间轴选择列表,在同一个文档中可以设置多个
时间轴,当用户创建多个时间轴时,利用该下拉列表可 选择当前时间轴。
② 【播放控制选项】: 它的3个按钮的功能分别是切换到第一帧、切换到
当前帧的上一帧、切换到当前帧的下一帧,文本框中是 当前帧的序号。若输入某个帧序号值,便可切换到该帧。 单击、这2个按钮并按住鼠标左键不放,可预览动画效 果。
例2 双击层1,改变状态栏中显示的文字。
layer1
例3 拖动层。 选中整个<body>……</body>
9.2 Dreamweaver 8 内置的动作和事件
Dreamweaver 8中自带了很多动作,使用它们可以在 网页中设计出各种效果。在本节中列出的动作是Netscape 6.0、Internet Explorer 6.0及以上版本支持的动作。在 【行为】面板的【动作】菜单中各项的意义如下所述。
当用户调整浏览器窗口或框架的尺寸时, 将触发该事件。 当捆绑数据源的当前记录指针改变时,将
触发该事件。 当捆绑数据源的当前记录指针将要改变时,
触发该事件。 当用户拖动上、下滚动条时,触发该事件。 在文本区域选定文本时,触发该事件。 当编辑框中的内容开始循环时,触发该事件。 提交表单时,触发该事件。 离开页面时,触发该事件。
18 【跳转菜单】: 设计者通过选择【插入】|【表单对 象】|【跳转菜单】命令,可在网页上创建一个跳转菜单。若 要修改这个跳转菜单,可在【行为】面板中双击【跳转菜单】 动作,在【跳转菜单】对话框中修改跳转菜单的各项参数。
19 【跳转菜单开始】:可以给跳转菜单添加不同的事件。
20 【转到 URL】: 这个动作用于在当前窗口或指定的框架中 打开一个新的页面。
行为及时间轴的应用

项目十五行为及时间轴的应用一、目的学会运用行为实现网页中的动态效果二、内容1、制作漂浮公告拦2、弹出菜单的设计;3、使用行为控制时间轴;三、步骤1.制作漂浮公告拦第一步:在准备好的页面上绘制一个层,并给层加上背景,如下图:第二步:在层中插入一行一列的表格,宽和高同时设置成100% ,并加入“公告栏”,再给它加一个链接。
如下图:第三步:打开时间轴面板,右键点击层边缘,弹出属性菜单,点击“添加到时间轴”如下图所示:第四步:点中15 帧进行拖动到400 帧。
第五步:然后把层从起点拖到终点,这就是这400 帧层的运动轨迹。
第六步:为了让层运动轨迹更加自然,我们在先200 帧处分别添加关键帧,如下图所示第七步:然后拖动层到理想的位置,如下图,那么它的运动轨迹成了一个抛物线,看起来就比较自然了。
第八步:为了使层的运动轨迹更加自然,我们可以依照上一步的方法添加多个关键帧来设置层的运动轨迹。
第九步:把时间轴面板上的“自动播放”和“循环”都选上,它们分别表示当页面一打开就运行运动和层运动到了终点后,再到起点循环播放。
2.弹出菜单的设计第一步:新建网页,插入一行四列表格,背景颜色为#5A85B2 ,在表格中插入图片。
第二步:选定第二列中图片,打开行为面板,单击右键,在弹出的窗口中选择显示弹出菜单。
设定菜单内容和格式,保存预览。
3.使用行为控制时间轴第一步:新建网页,插入层layer1, 宽700px ,高320px, 在层中插入图片beijing.gif,设置图片大小与层相同;第二步:在层layer1 中插入一个子层layer2,在layer2 中插入图片image1.gif,分别在播放、暂停和停止三个按钮上绘制热点;第三步:保存,预览一下。
第四步:按ALT+F9 打开时间轴,选定image1.jpg, 拖到时间轴中。
拖动最后一个关键帧到第25 帧。
在第 5 帧、第10 帧、第15 帧、第20 帧、插入关键帧。
并将第 5 帧上图片设为image2.jpg, 第10 帧上图片设为image3.jpg, 第15 帧上图片设为image4.jpg, 第20 帧上图片设为image5.jpg.第五步:通过行为控制时间轴。
网页设计课后复习题

《网页设计课后复习题》第一章网页设计概述一、填空题。
1.HTML是超文本标记语言的英文缩写,全称是Hyper Text Markup Language。
2.现在网络上使用的绝大多数图片和图像是gif格式、jpeg格式和png文件格式。
3.通过超链接可以从一个网页转到另一个网页,也可以从一个网页转到另一个网页。
超链接的载体包括文本、图像和热区三种。
4.网页能够把信息以多媒体的方式表现出来,同时把世界各地的信息链接在一起。
网页的基本功能有媒体的作用、互动的作用和传输的作用三方面。
5.PNG格式是Fireworks默认的格式。
它结合了jpeg和gif的优点,也支持透明和交错,是无损压缩的。
二、选择题。
1.网页中最基本的元素是(D)。
D.文字。
2.浏览网页时,当鼠标指针指向超链接时,通常鼠标指针的形状会变成(A)。
A.手形。
3.下列(D)不是用于制作网页的软件。
D.ORC。
4.以下图像格式具有动画效果的是(B)。
B.GIF。
5.网页编制完成以后,一般是以(C)为扩展名存盘的。
C.html。
第二章HTML语言基础一、填空题。
1.在HTML语言中文本文档标签是必须的。
2.在HTML语言中<P>标记的作用是表示一个文本段落的开始。
3.在插入图像或者使用超链接时,路径有相对路径和绝对路径两种。
4.HTML的英文全称是Hypertext Markup Language。
5.HTML列表常用的包括有序列表和无序列表,有序列表的标记是<OL>,无序列表的标记是<UL>。
二、选择题。
1.为同段落中的文本换行时,HTML标记为(B)。
B.<br>。
2.HTML代码<img src=url>表示(A)。
A.添加一个图像。
3.在HTML文档中创建最大的标题的文本标签是(B)。
B.<hL></hL>。
4.在HTML文档中网页的主体内容将写在(A)标记内。
网页设计类之时间轴及其应用

动画通道播放速度(帧/秒) 进一帧,按住不放可以连续播放 时间轴及其应用使用时间轴创建动画实际上是通过时间轴改变层在不同时间段的位置来实现的。
要实现图像或文本的动画效果,必须把相关图像或文本先放到一个层中,设置层的起始位置和终点位置,Dreamweaver 会自动添加中间的帧,以实现平滑的动画效果。
(1)时间轴面板单击主菜单“窗口”→“其他”→“时间轴”,弹出“时间轴”面板,如图3-190所示。
“时间轴”面板“自动播放”:如果选中该项,则在网页加载后自动开始播放当前时间轴的动画。
自动播放实际上是给文档<body>标识符加载一种行为,使页面载入时执行播放时间轴(Play 时间轴)动作。
“循环”:如果选中该项,使页面在浏览器中打开时当前时间轴可以循环播放。
(2)创建时间轴动画创建时间轴动画,就是往动画通道上添加对象,构建动画条,然后构建动画条上的关键帧,再从文档窗口中设置对象在关键帧上的位置,实现动画的创作。
这里需要注意的是时间线,只能移动层对象。
所以,如果希望移动诸如文本或图像之类的对象,应将之放入层中。
实例:利用录制层路径,创建复杂路径的动画。
操作步骤:①在文档窗口中选择要创建动画的层;②在层内插入图片hua.gif ;③ 将层移动到动画的起始位置;④ 执行“修改”→“时间线”→“录制层路径”命令;⑤ 在文档窗口中,按照需要的路径拖动层;⑥ 当希望动画停止时,可以释放鼠标,停止移动层,录制结束;⑦ 在时间轴面板上会自动添加关于该层的动画条(见图3-197)。
⑧ 保存文档,并选中“自动播放”复选框,如果想不停地播放再选中“循环”复选框,按F12键就可以预览动画效果。
录制层路径利用录制层路径功能,可以制作出优美的动画效果。
如绕太阳旋转的地球、飘动的雪花、飞翔的小鸟等,如果录制的路径不够光滑和规则,则可以选定关键帧,再拖动层调整路径。
《网页设计基础教程与上机指导(第2版)》第6章使用层.

6.4 时间轴的应用
时间轴和层就像一对钥匙和锁,只有相互配合,才能打开网页动画的大门。常见的时 间轴动画都涉及到沿着一条轨迹移动层,时间轴只能移动层。【时间轴】面板用于显 示层与图像随时间变化的属性,选择【窗口】|【时间轴】命令,打开【时间轴】面 板,如图6.27所示。 在【时间轴】面板中可以进行如下设置。 – 【播放头】:显示当前在页面中的是时间轴上对应的帧。 – 【动画条】:显示每个对象动画的持续时间。 – 【关键帧】:在动画中被指定对象属性的帧。 – 【动画通道】:显示层图像的动画条。 – 【行为通道】:在时间轴上某一帧执行Dreamweaver行为的通道。 – 【时间轴下拉列表框】:指定当前显示在【时间轴】面板中的是文档的哪一条时 间轴。 – 【回退】:移动播放头到时间轴的第1帧。 – 【后退】:向左移动播放头一帧。单击按钮并按住鼠标左键,可以回放时间轴。 – 【播放】:向右移动播放头一帧。单击按钮并按住鼠标左键,可以连续播放时间 轴动画。 – 【帧数】:可以通过设置总帧数和每秒钟播放帧数来控制动画的持续时间,通常 默认设置是每秒播放15帧。 – 【自动播放】:使时间轴在打开浏览器后自动开始播放。 – 【循环播放】:使当前时间轴在浏览器中打开后做循环播放。
第6章 使 用 层
教学提示和教学目标 6.1 创建和设置层 6.2 层的基本操作 6.3 层和表格间的相互转换 6.4 时间轴的应用
教学提示和教学目标
教学提示:层是一种精确定位网页元素工具,层可以包含文本、 图像或其他任何在HTML文档正文中插入的内容。使用层可以 将网页元素放置任何位置,还可以按顺序排放网页文档中的其 他构成元素。在Dreamweaver中使用层和行为结合,还可以 不用编写任何HTML或JavaScript代码制作出动画效果。 教学目标:
第6章 层和时间轴

• 6)、创建父层和子层 • 在已有层中按Alt键绘制 • 在层面板中按Ctrl键,将准备设置为子层的层拖动到准备设置为父 层的层上,就可以创建子层。当移动父层位置时,子层的位置也将同 时发生变化。 • 7)、将多个层对齐到相同位置 • 按住Shift键选择要排列的层,最后选定的层就是作为对齐的标准 • 选择“修改-排列顺序” • 8)、确定层的层叠顺序 • 从字面意义上来看,层本身就具有层层叠放的意思。插入的时间相 对晚的层将为于之前插入的层的外侧。当层层叠时,最终插入的层将 位于最外侧。 • 层面板中,数值大的层相对位于上方位置。通过拖动鼠标,可以直 接修改层顺序。
• 时间轴 • 时间轴是Dreamweaver实现动画的一种方法,用户不需要编辑代码 或使用任何ActiveX、Java或其他任何插件即可在网页上制作动画效 果。时间线主要是通过改变层的位置、属性、可见性以及层的顺序来 实现动画效果的。 • 时间轴的各项功能
帧数。默认15帧。帧数增加,播放速度将加快。 网页中自动运行 时间指针位置 移到第一帧 反复播放动画 添加行为 时间轴名称 图层通道
图层条 指针 关键帧
• 创建时间抽动画 • 1、关键帧动画 • 时间线只能移动分层对象,如果想移动文本或图像之类的。 • 1、将层拖动到时间轴的行上。 • 2、确定第一帧位置,选择最后关键帧,移动层到结束位置。 • 3、勾选“自动播放选项”,按F12浏览效果。 • 2、自动生成动画 选择“修改→ 时间轴→ 录制层路径”.
第定位技术,在Dreamweaver中对其进行了可视化操作。 文本、图像、表格等元素只能固定其位置,不能互相叠加在一起,而 层可以放置在网页文档内的任何一个位置,层内可以放置网页文档中 的其他构成元素,层可以自由移动,层与层之间还可以重叠,层体现 了网页技术从二维空间向三维空间的一种延伸。 • 层的特点 • 大家可以将层理解为文档窗口内的又一个文档窗口。像在普通文档 窗口中进行操作一样,在层中可以输入文字,也可以插入图像、动影 像、音乐文件、表格、Flash影片等之后,对其进行编辑。 • 重叠排放各构成元素 • 精确地指定层位置 • 隐藏/显示层
第6章 页面布局、层、行为和时间轴的使用

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