第7章 网页制作高级功能

《第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，单击编辑窗口状态栏上的标记，选中整个网页。2）打开行为面板，单击按钮，在菜单中选择“播放声音”。3）在弹出的菜单中输入音乐文件的路径，单击“确定”，如图7-14所示。4）把事件调整为onLoad(载入页面后)，如图7-15所示。5）保存后，在浏览器中预览，页面加载成功后即可欣赏音乐。图7-14“播放声音”动作设置图7-15修改事件 Dreamweaver8中包含若干内置动作，可以帮助用户创建各种具有特殊效果的网页，在后面将以案例的方式详细讲述这些常用内置动作的用法和参数设置等，方便用户掌握并在实际操作过程中灵活应用。7.2.3案例：网页提示问候语1.案例效果当访问者打开页面时弹出“欢迎你的到来！”的问候语，当访问者离开页面时弹出“谢谢你的到来，欢迎再次光临！”的问候语，如图7-16所示。图7-16a打开网页时弹出信息　　　图7-16b关闭网页时弹出信息 7.3.1创建时间轴1.时间轴的各项功能“时间轴”面板用于显示层与图像随时间变化的属性，执行“窗口”→“时间轴”命令，打开“时间轴”面板，如图7-40所示。图7-40“时间轴”面板①时间轴弹出菜单：表示当前的时间轴名称。②时间轴指针：在界面上显示当前位置的帧。③不管时间轴在哪个位置，一直移动到第一帧。④表示时间指针的当前位置。⑤表示每秒显示的帧数。默认值时15帧。增加帧数值，则动画播放的速度将加快。⑥自动不放：选中该项，则网页文档中应用动画后自动运行。⑦LOOP（循环）：选中该项，则继续反复时间轴上的动画。⑧行为通道：在指定帧中选选择要运行的行为。⑨关键帧：可以变化的帧。⑩动画条：意味着插入了“层”等对象，可以创建动画了。⑾图层通道：它是用于编辑图层的空间。 2.创建时间轴时间轴可以通过改变层的位置、大小、可见性等属性来创建动画，也可以改变图像的源文件，因此可以用它来创建图片幻灯效果。时间轴只能移到分层对象，如果想移动文本或图像之类的对象，可以将其放在层中。下面就通过一个实例来认识时间轴动画的创建。3.修改时间轴在创建了一个基本的时间轴动画以后，如果对动画还不十分满意，可以对其进行修改，如修改帧数、修改播放时间、修改关键帧等操作，以达到理想效果。（1）修改动画时间打开“时间轴”面板，拖动关键帧往右拖动以增长动画播放时间，如图7-47所示。图7-47改变动画时间在拖动过程中动画中的所有关键帧都将按比例发生位移，而彼此之间的位置不发生变化。如果不想让各关键帧随着总长度的变化而变化，只要在拖动最后一个关键帧时按住Ctrl键就行了。选中一个或所有与该动画关联的动画条（按下Shift键来同时选中多个动画条），并向右拖动动画条，可以改变动画的开始时间。 另外，使时间轴动画在页面打开时自动播放，要勾选“自动播放”复选框，系统弹出如图7-48所示的提示框，将一个行为附加到文档中，在页面读入后自动执行“播放时间轴”行为。图7-48设置时间轴的“自动播放”要使时间轴动画连续循环播放，应在“时间轴”面板中勾选“循环”复选框，系统弹出如图7-49所示的提示框，将“转到时间轴帧”行为插入到动画最后一帧之后的“行为”通道中，在动画结束时自动执行“转到时间轴帧”行为。图7-49“循环”播放时间轴（2）修改关键帧在“时间轴”面板中单击关键帧，然后将其右移或者左移，其他关键帧并不发生改变，这样可以改变该关键帧的发生时间。要移到整个动画路径的位置，首先应选择整个动画条，然后在页面上拖动对象。 7.4.1创建网页模板Dreamweaver模板实际上是一种特殊类型的文档，用于设计“锁定的”页面布局。模板创作者设计页面布局，并在模板种创建可在基于模板的文档中进行编辑的区域。模板最强大的用途之一在于一次更新多个页面。模板确定文档的基本结构，并包含诸如文本、图像、页面布局、样式和可编辑区域之类的元素。在创建模板时，可以指定页面的哪些元素保持不变，哪些元素可以被修改。用户也可以在将模板应用于文档之后重新修改模板。当使用修改后的模板更新文档时，文档中只有不可编辑的部分才会随模板更新。创建模板有两种方法：一种是修改已有的HTML文档使之成为合适的模板，另一种是从空白文档开始创建模板。要将已有文档另存为模板，请按以下步骤操作：1）打开已有的HTML文档2）执行“文件”→“另存为模板”，在出现的对话框中，选择站点并在“另存为”框中输入模板名称，如图7-54所示。图7-54将已有文档保存为模板 3）单击【保存】按钮。从空白文档开始创建模板，Dreamweaver用文件扩展名.dwt来保存模板。模板被保存在站点的本地根文件夹中的一个特殊的Templates文件夹中，如果该文件夹在站点中尚不存在，Dreamweaver会在设计者保存新建模板时自动创建该文件夹。提示：不要将模板移到Templates文件夹之外或者将任何非模板文件放在Templates文件夹中。此外，也不要将Templates文件夹移到本地根文件夹之外，以免引起路径错误。7.4.2基于模板创建网页在有了模板文件后，就可以基于模板新建文档。执行“文件”→“新建”，在出现的对话框中单击“模板”标签，然后选择站点下的一个模板，单击【创建】按钮。如图7-62所示。 7.5实训实训目标：在一个页面，或者网站的一系列页面中，综合应用层、行为和时间轴，并应用到模板和库创建页面。实训题目：综合网页的高级编辑功能，制作内容丰富全面的网站页面。7.6习题1.层对象的“Z轴”属性有什么意义？2.Dreameaver8行为是由哪些要素组成的？3.如要在页面载入完毕之后，打开一个广告窗口，需使用什么动作，并且附加给什么对象？4.如何创建一个复杂路径的时间轴动画？5.如何改变动画的播放时间？6.如何在现有文档上应用模板？7.模板文件的扩展名是什么？8.库项目可以包含哪些元素？