您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习教材>>>Dreamweaver教程>>>网页制作——第六课:层与时间轴
网页制作——第六课:层与时间轴
发表日期:2007/3/31 7:59:00 出处:闪客启航 作者:未知 发布人:aypy1020 已被访问 4341

录音下载(一)   录音下载(二

第一节:层的认识与属性

在众多网页制作软件中 Dreamweaver MX 2004 独有层的功能。Dreamweaver MX 2004的层与 Flash MX 和Photoshop 中的层不同,Dreamweaver MX 2004 的层可以游离在文档之上,因此可以用层来精确定位网页元素;层可以通过时间轴来来移动或者变换位置,实现动画效果;层还转换为表格,为不支持层的浏览器提供解决方法。下面为我们根据一些实例来了解层的功能。

【建立层】

     打开Dreamweaver MX 2004软件,新建一个HTML文档。选择“布局” 格式:

    在菜单栏选择“插入”-“布局对象”-“层”:

    此时在文档窗口就能看到建立了一个层:

   

【层属性】

    鼠标点击上图中的手柄或层标签都能选中层,层选中之后,可以在属性面板里面查看和设置各种参数了。

【层编号】给层命名,在今后使用行为或者JavaScrip来控制层的时候,就必须用到这个名称。

【左】(上:层与浏览器窗口左边(上边)的距离。

【宽】(高):层的宽度和高度。

【Z轴】:除了屏幕的X、Y轴,逻辑上增加了一个垂直于屏幕的Z轴,其数值代表垂直平面的方向上层的序号。

【可见性】:层的可见性。

  • default-默认;
  • inherit-继承;
  • visible-可见;
  • hidden-隐藏。

【背景图像】(颜色):用来设置层的背景图像和颜色。

【溢出】:设置当层内的内容超过层的大小时的显示方式

  • visible:层将向右向下扩大以显示层内的全部内容;
  • hidden:只显示层尺寸以内的内容;
  • scroll:不改变层的大小,但增加滚动条,不管层的尺寸时候够大都会显示滚动条。
  • auto:只有在层不够大的时候才出项滚动条。

【剪辑】:用于指定层的哪一部分是可见的。

【层面板】

    选择下拉菜单的“窗口”-“层” 或者使用快捷键“F2”都可以打开层面板,它于层的属性面板配合使用,可以快速的对层进行操作,层面板如图所示:

   

    层面板可以实现以下功能:

  • 将一个层嵌套到另一个层
  • 选动一个或者多个层
  • 修改层的Z轴顺序
  • 修改层的可见性
  • 禁止或者允许层重叠

    关于层面板上各种功能,我们在下面的实例中讲解。

【嵌套层】

    层的嵌套与上面的说的层的重叠不同,重叠的层除了在视觉效果上觉得有些关联之外,各层之间没有联系。嵌套的层与其父层是有一定内在联系的。首先我们来建立一个嵌套层。

    1、在文档窗口插入一个层。
    2、将鼠标光标定位在这个层内,然后再插入一个层,这就形成了嵌套层,见下图左。同时在层面板也能看出这两个层是树型结构,我们把开始建立的那个层叫做父层,后插入的那个层叫做子层。父层和子层的Z轴位置是一样的。见下图右。

    嵌套层中的父层与子层的关系是,这种“父子关系”不是位置的关系,而是结构的关系。子层并不一定要在父层内,子层移动位置,父层不发生变化,而父层移动,子层会随着父层移动。具体的应用实例我们会结合时间轴一起来理解。目前我们仅仅知道嵌套层的关系即可。

第二节:层的应用实例

本节素材下载

 

【利用Z轴制作阴影字】

1、选择菜单栏选择“插入”-“布局对象”-“层” 在文档窗口插入一个层。

2、在层中输入文本“阴影字”然后在属性面板把字体设置为36号,红色。如图:

    然后选中该层使用鼠标右键选择拷贝,再粘贴,这样就复制了一个跟该层大小,内容完全一致的另一个层,此时通过层标签可以看出已经有了两个层,我们将这个层在属性面板层编号中改为“Layer2”。见图:

    在“Layer2”将文字颜色改为黑色,见下图:

    现在来看层面板,已经出来现了两个层,并且是可见的:

    按照上图所示,目前选中的是Layer2图层,用键盘的方向键移动该图层,按下左箭头两次,上箭头两次,会看到下图中的效果。

    回到层面板,将Layer1的Z轴数值改为2,见下图左,得到下图右的效果:

 

    以上这个实例说明,层是可以叠加的,并且叠加在一起的层是通过Z轴来确定位置的,z轴的值可以是正数、负数和零, 数值大的层在上面。合理的使用层和Z轴可以变换出各类效果。

 

【用层设计表格】

    我们制作网页当然希望能支持各类浏览器,以便向更多的浏览者传递我们的信息,尽管层定位网页的元素比使用表格定位方便了很多,但并不是所有的浏览器都支持层,仅以IE浏览器而言,只有IE4.0以上的浏览器才支持层,因此有的时候我们为了兼顾各类浏览器,就只有采用表格的形式,Dreamweaver MX 2004 层转换为表格的功能挤既利用层定位网页元素的便捷性,又能兼顾更多各类浏览器,给我们提供了很大的方便。

【层转换为表格】

    1、新建一个文档窗口,选中菜单的“查看”-“网络”-“显示网格”见图,网格将会显示在文档窗口内选择网格主要是为了在布局的时候有一个参照物来方便布局,而这网格并不会显示在发布的网页之中。

     2、在文档窗口中添加7个层,同时在层面板上选中“防止重叠”

     3、分别在每一个层内添加素材包内的图片(qh111.jpg/heng.gif)或添加文字,并参照下图将层移动到合适的位置。

 

  4、选择下拉菜单中的“修改”-“转换”-“层到表格”见图:

    弹出【转换层为表格】对话框:

【最精确】:
    为每个层创建一个单元格并增添一些单元格来保持相邻的层之间的距离,精确的保证转换之后的位置。

【最小】:
    当有一些层的坐标位置接近的时候去掉一些宽高小于指定象素的的空单元格,这样能减小HTML文档,但转换后页面会有一定的差别。

【使用透明GIF】:
    软件自己生成一个透明的GIF格式的图像充填在表格最后一行,用于保证在所有的浏览器中都有一致 的外观,选中该项之后将不能拖动表格的列来编辑表格,如果不选择,可能导致在不同的浏览器中表格具有不同的列宽而具有不同外观。可以根据设计需要选用本功能。

【置于页面中央】
     选中后表格在页面居中对其,反之默认在左对齐。

【防止重叠】:
     选中该项可以防止层的重叠,如果有重叠发生将无法转换,在层到表格的转换中该项应该选取。

【显示层面板】、【显示网格】、【靠齐到网格】:
    这几项主要为了便于布局设计,根据需要决定是否选取。

    选定并按下“确定”之后,Dreamweaver MX 2004自动打开一个新的窗口,窗口内的内容和布局和用图层制作的布局完全一致,不同的是,这是用表格布局的。见图:

 

表格转换到层】:

    在表格布局中布局受到局限的时候,可以把表格转换为层,然后通过移动层来调整布局,与层转换为表格不同的是,层转换为表格应该取消“防止重叠”的选择,使层能够根据需要相互叠加,然后通过改变Z轴位置来达到设计要求。有一点必须注意:一旦取消了“防止重叠”层叠加之后就无法再转换为表格了。

 

第三节:时间轴介绍与应用实例

本节素材下载

与层密切相关的另一个功能是时间轴,利用时间轴可以实现动画效果,随着时间的变化改变层的位置、尺寸、可视性以及叠放顺序可以实现更多的效果。

【时间轴面板】

    使用Alt+F9快捷键或者在菜单“窗口”中选择“时间轴”即可打开时间轴面板。(使用Dreamweaver MX 2004而没有时间轴的朋友请升级到 Dreamweaver MX 2004 7.0.1 版 )

播放头显示当前页面上的层是时间轴的哪一帧。

动画通道显示层与图像的动画条。

动画条显示每个对象的动画持续时间。

关键帧在动画条中被指定动画属性的帧。

行为通道在时间轴上某一帧执行指令的显示。

帧频每秒钟播放的帧数,但超过用户浏览器可处理的速率则会被忽略掉,15Fps是平均较好的速率。

自动播放选中后,在浏览器打开该页面,动画就自动播放。

循环选中后在浏览器中会无限循环播放,在行为通道中可以看到循环的标签,双击标签可以修改行为的参数和循环次数。

 

【创建时间轴动画】

    1、在文档窗口插入一个层,并在层中插入素材包中的qiqiu.gif图片,如图。

    2、选中层,将层用鼠标拖拽到时间面板中,此时一个动画条出现在时间轴的第一个通道中,层的名字出现在动画条中,如图所示。

    3、将关键帧选中第十五帧处,见下图:

    4、选中层,将层用鼠标拖拽到动画结束的地方,这里我们设定在文档窗口右下角,此时一条线段显示出动画运动的轨迹。见图。

    5、至此,一个动画创建完毕,按在“播放”可以浏览动画效果。选中自动播放和循环,保存文件后在浏览器也能看到动画效果。

    6、如果想改变一下用动路径,则需要添加关键帧,在第七帧处用鼠标右键添加一个关键帧,见图。

    在文档窗口选定层,并将层拖拽到需要的位置,我们可以看到运动的轨迹发生了相应的变化。

 

用层的嵌套结合时间轴创建滚动的公告牌

    1、建立一个新的文档窗口,然后插入一个层,并在层属性面板中设置该层的背景图像,插入素材包中的moban.jpg图片,作为公告牌的边框。见图。层属性中,层的大小应设置跟图片尺寸一样,否则可能产成平铺,影响设计效果。(注意,这里是层的背景而不是在层内插入图片,注意区别!

    2、在层面板取消防止重叠,并向刚才的层内插入一个层,这样形成了层的嵌套,将嵌入的层大小定义在背景边框以内。如图。

    3、向第二个层内继续添加一个层,尺寸略小于第二个层,选中添加的层拖拽到第二个层的下方,并向层内添加文字。

    4、在时间轴面板将第三个层,即有文字的层作为对象添加在时间轴中。

    5、在时间轴面板用鼠标选中关键帧15,用鼠标拖动到60帧处释放鼠标,可以看到动画条延长了,实际上也就是增加了动画运动的时间,当前选中的关键帧(蓝色)在60帧。

    6、回到文档窗口,选中带有文字的这个层,用鼠标移动到公告牌的上方。

    7、层面板选中第二个层Layer2,见下图左。回到层属性面板,将Layer2的“溢出”属性设置为“hidden”见下图右。

 

    8、至此,滚动公告牌制作完毕,保存文件后在浏览器可以看到效果。

【实例分析】

    实例4中第一个层是为了给背景图像,也就是公告牌边框做精确定位,第二个层则是父层,第三个层是子层,第三个层移动,第二个层不改变位置,正是利用了子层移动不影响父层位置的层的嵌套的特性。将第二个层,也就是父层溢出设定为隐藏,实际上是将第三个层作为元素,符合“层溢出隐藏时,超出层的部分不可见的原理”这样子层运动实际是局部可见,也就是在父层显示范围内可见。

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

兰幽空间 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:心梦、劳拉