欢迎来到天天文库
浏览记录
ID:44986697
大小:489.00 KB
页数:16页
时间:2019-11-06
《第7章 网页制作高级功能》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
第7章网页制作高级功能本章要点·使用层定位页面·应用行为创建页面动态效果·使用时间轴创建动画·使用模板和库7.1使用层层又叫图层,它是一种HTML页面元素,它为用户提供了强大的定位页面的能力,与表格相比更加灵活,更加随心所欲。层是网页中的一个区域,一个网页中可以有多个层,而且可以相互重叠,可以定义层间的层次关系,还可以定义层的可见性,如果在网页中再配合使用脚本程序的话,还可以实现绚丽的网页动态效果。在本节中,除了讲解有关层的基本知识外,如创建层、设置层属性等,还通过制作一个网页案例“科技咖啡馆”来具体说明在网页制作中使用层的操作。7.1.1层的基本知识本小节将详细介绍有关创建层、设置层属性和将层转换为表格的基本知识。1.创建层在文档中创建层的具体操作步骤如下:1)首先新建一个空白文档,然后将鼠标移到文档中要插入层的位置。2)执行“插入”→“布局对象”→“层”命令,则向页面中添加了一个层。3)选中层,线框周围出现8个黑色实心方块,左上角还有一个空心方块,这表示该层被选中了。4)为了能看出层的特点,按照上面的操作再插入一个层。5)选中刚插入的层,当鼠标光标变成四箭头时按鼠标左键并拖拽鼠标可以将层移到任何位置,如图7-1所示。 图7-1移动层的位置2.设置层属性为层设置属性的具体操作步骤如下:1)选择文档中名为Layer1的层,可以看到层的属性面板如图7-2所示。图7-2层的属性面板2)在层的属性面板中可以设定很多参数,如在“层编号”输入框中可以为层重新命名;在“左”输入框中可以设定层左边界距离浏览器窗口左边界的距离;在“上”输入框中可以设定层的上边界距浏览器窗口上边界的距离;在“宽”和“高”输入框中可设定层的宽和高;在“Z”轴输入栏中可设定层的Z顺序号;在“溢出”下拉框中还可设置层内内容超过层的大小时的处理方式。还可以在“可见性”下拉框中选择层的可见性,还可设置如背景颜色、背景图片等属性。 提示:Z顺序是在层互相重叠时,Z顺序号大的层将遮盖住Z顺序号小的层。“溢出”的处理方式有以下4种:●visible:向下向右扩大层从而使层中的所有内容得以显示。●hidden:只显示层的大小所能显示的内容,超过层大小部分的内容将不能显示。●scroll:当内容超过层的大小所能显示时,并不改变层的大小,而是增加滚动条来显示所有内容。但选择这个选项之后,无论层是否够大,都会显示滚动条。●auto:只有在图层不够大时才显示滚动条。在如图7-3所示的浏览器窗口中,分别采用了这4种溢出处理方式的图层及其内容,可以看到这4种处理方式的不同效果。3)执行“窗口”→“层”命令,则在窗口右侧出现“层”面板,如图7-4所示。图7-3不同溢出处理方式的效果 图7-4“层”面板 4)在“层”面板中,单击层的名字可以对层的名字进行修改,也可以在这里修改层的顺序和显示隐藏属性。如果选中“防止重叠”复选框,还可以放置层重叠起来。3.将层转换成表格当调整好页面元素的位置后,可以将层转换为表格,以求网页有更好的兼容性。因为表格单元格不能重叠,所以Dreamweaver无法从重叠的层创建表格。如果计划将层转换为表格,那么在绘制层时需使用“防止重叠”选项以限制层的移到和定位,避免出现重叠层的现象。要将层转换为表格,具体操作步骤如下:1)执行“修改”→“转换”→“层到表格”。2)在出现的对话框中,选择所需的表格布局选项,如图7-5所示。图7-5设置层的转换选项在“转换层为表格”对话框中的一些设置的意义如下:●最精确:采用精确的转换方式,为每一个层建立一个单元格,并创建所有附加单元格,以保证单元格之间的距离。 ●最小:采用最小转换方式,去掉高度或宽度小于指定像素数目的空白单元格,即当某些层的位置比较接近时,会自动使他们对齐。●使用透明GIF:可以选择是否使用透明GIF图片。●置于页面中央:选中此选项,可以使转换后的表格居中对齐。3)使用默认设置,单击【确定】按钮。层将立即被转换为表格,如图7-6所示。图7-6a转换前的层 图7-6b转换后的表格有了将层转换为表格的功能,用户可以方便地使用层来定位页面,最后再转为成表格以适应不同的情况。还可以将表格转换为层,读者可以自己试着完成,这里就不再介绍。 7.2应用行为7.2.1了解行为所谓“行为”,是指在某一网页对象上因为某一事件被触发而产生某一动作的综合描述。行为是Dreamweaver8中重要的一个部分,通过行为,用户可以方便地制作出许多网页效果,极大地提高了用户的效率。与行为相关的有三个重要的部分——对象、事件和动作。1.对象(Object)对象是产生行为的主体,很多网页元素都可以成为对象,如图片、文字、多媒体文件等,甚至是整个页面。2.事件(Event)事件是触发动态效果的原因,它可以被附加到各种页面元素上,也可以被附加到HTML标记中。不同的浏览器支持的事件种类和多少是不一样的,通常高版本的浏览器支持更多的事件。表7-1列出了Dreamweaver中的一些主要事件,其中NS代表Netscape浏览器,IE代表InternetExplorer浏览器,后面的数值为可支持此事件的最低版本号。表7-1Dreamweaver事件 3.动作(Action)行为通过动作来完成动态效果,如:图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript代码,在Dreamweaver中使用Dreamweaver内置的行为往页面中添加JaveScript代码,就不必自己编写。7.2.2应用行为在Dreamweaver8中,可以将行为附加给整个文档、链接、图像、表单元素或其他任何HTML元素。并由浏览器决定哪些元素可以接收行为,可以接收哪些行为动作,哪些元素不能接收行为。用户可以使用“行为”面板来选择行为动作。执行“窗口”→“行为”命令,打开“行为”面板,如图7-12所示。一般应用行为有三个步骤:选择对象、添加动作、调整事件。要应用行为,首先要选择要添加行为的网页元素,如果不选择,系统一般会认为是整个网页文档,然后单击“行为面板”中的按钮,在弹出的如图7-13所示的动作菜单中选择要使用的行为即可。图7-12“行为”面板 图7-13动作菜单 在为对象附加行为动作时,可以一次为每个事件关联多个动作,动作的执行按照在“行为”面板的动作列表中的顺序执行。【例7-1】利用行为给网页添加背景音乐1)新建一个网页文档,保存为01.html,单击编辑窗口状态栏上的
此文档下载收益归作者所有
举报原因
联系方式
详细说明
内容无法转码请点击此处