dreamweaver教程第9章
- 格式:doc
- 大小:1.68 MB
- 文档页数:8
第9章使用AP Div布局页面一、填空题1、通过设置AP Div的()属性可以使多个AP Div发生堆叠,也就是多重叠加的效果。
正确答案:z轴2、如果要选定多个AP Div,只要按住()键不放,在【AP元素】面板中逐个单击AP Div的名称即可。
正确答案:Shift3、在【CSS规则定义】对话框的【定位】分类中,将【类型】选项设置为“()”,即表示AP Div,否则即为Div标签,这是AP Div与Div标签转换的关键因素。
正确答案:绝对4、可以按住()键,在【AP元素】面板中将某一个AP Div拖曳到另一个AP Div上面,形成嵌套AP Div。
正确答案:Ctrl二、选择题1、下面关于创建AP Div的说法错误的有()。
A、选择菜单栏中的【插入记录】/【布局对象】/【AP Div】命令B、将【插入】/【布局】面板上的(绘制AP Div)按钮拖曳到文档窗口C、在【插入】/【布局】面板中单击(绘制AP Div)按钮,然后在文档窗口中按住鼠标左键并拖曳D、在【插入】/【布局】面板中单击(绘制AP Div)按钮,然后按住Shift键不放,按住鼠标左键并拖曳正确答案:D2、关于【AP元素】面板的说法错误的有()。
A、双击AP Div的名称,可以对AP Div进行重命名B、单击AP Div后面的数字可以修改AP Div的z轴顺序C、勾选【防止重叠】复选框可以禁止AP Div重叠D、在AP Div的名称前面有一个眼睛图标,单击眼睛图标可锁定AP Div正确答案:D3、关于选定AP Div的说法错误的有()。
A、单击文档中的图标来选定层B、将光标置于AP Div内,然后在文档窗口底边标签条中选择“<div>”标签C、单击AP Div的边框线D、如果要选定两个以上的AP Div,只要按住Alt键,然后逐个单击AP Div手柄或在【AP元素】面板中逐个单击AP Div的名称即可正确答案:D4、关于移动AP Div的说法错误的有()。
11 在center_content 层中再创建一个层,方法是单击“绘制层”并拖动另一个层,如以下示例所示:12 单击新层的选择柄,确保选中该层。
13 选中新层后,在“属性”检查器中执行以下操作:o单击“层编号”文本框,然后将该层重命名为text。
o在“宽(W)”文本框中,输入330px。
o在“高(H)”文本框中,输入350px。
o按Enter 键(Windows) 或Return 键(Macintosh) 应用最后一项。
14 拖动text 层或使用键盘上的方向键定位该层,如以下示例所示:注意在层的边框上看到虚线是正常现象。
这意味着各层间有部分区域(一个或两个像素)重叠。
15 保存页面。
向页面添加颜色提示可以通过将列标题的右边框向左或向右拖动来更改“层”面板中“名称”列的宽度。
现在,您将通过设置某些层以及整个页面背景的颜色,向页面添加颜色。
通过在“层”面板(“窗口”>“层”)中单击navigation 层的名称选择该层。
2在“属性”检查器中的“背景颜色”文本框内单击一次。
“背景颜色”文本框位于“背景颜色”(Bg) 颜色框旁。
3在“背景颜色”文本框中,输入十六进制值#993300,然后按Enter 键(Windows) 或Return 键(Macintosh)。
navigation 层的背景颜色即变为红棕色。
4在“层”面板中单击flash_video 层的名称选择该层。
5在“属性”检查器中,在“背景颜色”文本框内单击一次,输入十六进制值#F7EEDF,然后按Enter 键(Windows) 或Return 键(Macintosh)。
flash_video 层的颜色即变为浅棕色。
6重复上述步骤将text 层的颜色也更改为浅棕色。
7设置所有三个层的背景颜色后,单击它们的右侧,确保未选中任何内容。
接下来,您将通过修改页面属性来更改整个页面的背景颜色。
通过“页面属性”对话框可以设置一些页面属性,包括页面字体的大小和颜色、已访问链接的颜色以及页面边距等。
第9章制作网页特效
在制作网页时,为了丰富网页内容,可以为网页添加特殊效果。
这样制作出来的网页,不但新颖,有风格,而且也增加了网站访问量。
制作网页特效主要应用Dreamweaver 8中自带的行为以及在网页中添加JavaScript代码来完成。
行为丰富了网页的交互功能,它允许访问者通过与页面的交互来改变网页内容,或者让网页执行某个动作,Dreamweaver 8自带的行为种类多样、功能强大,而且这些行为都是开放的。
JavaScript语言在实际设计网页的过程中也非常有用,运用它可以设计出一些丰富多彩的网页。
JavaScript的出现,使得信息和用户之间不仅是显示和浏览的关系,而且也实现了实时的、动态的、可交互式的表达。
本章将详细介绍一些相关的行为和JavaScript 对文字、图像等网页对象的操作。
本章学习要点:
行为概念
行为的应用
JavaScript概念
JavaScript的操作
248Dreamweaver 8网页制作与网站开发标准教程
9.1 行为概述
行为是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。
使用行为可以使访问者与网页之间产生一种交互,来改变页面或触发任务。
Dreamweaver 8中的行为是一个带有面向对象设计思想的工具。
它事实上是由预先编写好的JavaScript 代码构成。
一个行为是由一个事件和一个动作构成。
任何一个动作都需要一个事件激活,两者相辅相成。
动作是一段已编辑好的JavaScript代码,而这些代码的特定事件是在被激发时执行。
9.1.1 行为概念
9.1.2 行为面板
表9-1行为面板中各按钮名称及功能描述
显示设置事件显示添加到当前文档的事件
显示所有事件显示所有可用的事件
添加行为选择快捷菜单中的选项添加行为
删除事件从当前动作列表中删除选中的行为
增加事件值动作项向前移,改变执行顺序
降低事件值动作项向后移,改变执行顺序
9.1.3 编辑行为
9.2 应用行为
Dreamweaver 8预定义有20多种行为,如果在网页中适当的添加行为,可以起到动态效果并使用户与网页之间具有交互性。
让网页设计者无需掌握JavaScript语言,就可以制作出快捷菜单、互动图像、为页面插入背景音乐等一些特殊效果。
第9章 第9章 制作网页特效
249
9.2.1 交换图像
9.2.2 打开浏览器窗口
表9-2 【打开浏览器窗口】对话框中参数名称及功能
9.2.3 拖动层
表9-3 【基本】面板中各参数名称及功能
提 示 示
250
Dreamweaver 8网页制作与网站开发标准教程
表9-4 【高级】面板中各参数名称及功能
9.2.4 弹出信息
9.2.5 改变属性
9.2.7 显示弹出式菜单
表9-5 【内容】选项卡中各参数名称及功能
第9章第9章制作网页特效251
表9-6 【高级】选项卡中各参数名称及功能
自动设置;如果要增加单元格宽度,在弹出菜单中选择“像素”,然后输入一个
比在【单元格宽度】文本框中显示的值更大的值
单元格高度为菜单按钮设置一个特定的高度
单元格边距指定单元格内容和其边框之间的像素数
单元格间距指定相邻单元格之间的像素数
文本缩进指定菜单项中的文本在单元格中的缩进距离(以像素为单位)
菜单延迟设置从用户将鼠标指针移动到触发图像或链接上,到菜单出现之间的时间间隔。
该值以毫秒为单位
弹出菜单边框确定菜单项中周围是否显示边框。
如果要在菜单项周围显示边框,则选中了【显示边框】复选框。
边框宽度设置边框的宽度(以像素为单位)。
阴影、边框颜色
和高亮显示允许为这些边框选项选择颜色。
阴影和高亮显示不反映在预览中
9.2.8 设置文本
9.2.9 检查浏览器
9.2.10 预先载入图像
9.3 JavaScript概述
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,有了JavaScript,使网页变得更加生动活泼。
使用它的目的是与HTML超文本置标语言、Java脚本语言一起实现在一个网页中链接多个对象,与网络客户交互作用,从而可以开发出客户端的应用程序。
它可以通过嵌入或调入标准的HTML语言实现。
9.3.1 JavaScript特点
9.3.2 JavaScript的安全性
9.3.3 JavaScript的应用范围
252Dreamweaver 8网页制作与网站开发标准教程
9.4 JavaScript操作
JavaScript在网页制作上的应用越来越广泛,例如对文字、图像、层等的操作。
JavaScript 操作文字创建水平运动和垂直运动,还可以改变文字大小和颜色等;对图像操作也就是对图像显示进行控制,如图像的大小、透明度等;对层的操作显示和隐藏层;以及下面将要介绍的一些对框架的操作。
9.4.1 JavaScript对文字的操作
9.4.2 JavaScript对图像的操作
9.4.3 JavaScript对框架的操作
表9-7 frame对象的方法及说明
focus() 设置焦点到指定窗格
setTimeout() 设定一定的时间让函数延迟执行
clearTimeout() 清除有setTimeout()方法设定的延迟操作
setInterval() 设定一定的时间让函数每隔这些时间就执行一次
clearInterval() 清除有setInterval()方法设定的重复执行的操作
OnBlur Blur事件的事件处理器
OnFocus Focus事件的事件处理器
OnResize Resize事件的事件处理器
OnMove Move事件的事件处理器
print() 激活打印对话框
9.4.4 JavaScript对层的操作
第9章第9章制作网页特效253
9.5 时间轴
应用【时间轴】面板制作动画,改变一幅图片的源文件,以及在指定的时间执行行为。
动态HTML允许用脚本语言改变样式或定位属性。
时间轴使用动态HTML改变层的属性,也可以随时间变化改变一系列帧中图像的属性。
时间轴通过改变层在不同时间的位置、大小、可见性和叠放顺序来创建动画。
9.5.1 时间轴面板
表9-8 【时间轴】面板参数名称及功能
指定当前在时间轴面板中都有哪些时间轴
重绕使当前帧指示线回到第1帧的位置
后退使当前帧指示线向左移动一帧。
单击该按钮并按住鼠标不放,可以反向播放时间轴
当前帧数显示当前播放或选中的是第几帧
播放使当前帧指示线向右移动一帧。
单击该按钮并按住鼠标不放,可以连续播放时间轴
自动播放选中该复选框,使当前页面在被载入时自动开始播放时间轴
循环选中该复选框,使动画在页面被浏览器载入时无限次的循环播放
当前帧指示线给出当前页面上显示的是时间轴的哪一帧
关键帧动画栏中指定了属性的帧,关键帧由小圆圈标明
行为通道时间轴中特定的帧执行某些行为的通道
动画通道显示用于制作层和图像动画的条
9.5.2 创建时间轴
9.5.3 修改时间轴
9.6 课堂练习9-1:幻灯片
实验目标
PowerPoint是制作多媒体幻灯片最常用的软件,利用Powerpoint可以制作演示文稿,它是一个文件,演示文稿中的每一页也就是一张幻灯片。
在本课堂练习中,介绍用
254Dreamweaver 8网页制作与网站开发标准教程
Dreamweaver 8中的时间轴和行为来制作幻灯片,当单击播放幻灯片按钮,开始连续播放,单击暂停按钮,幻灯片就停止在当前图片上,单击重新播放按钮时,幻灯片又重新播放。
9.7 课堂练习9-2:精确计时器
实验目标
本课堂练习是一个用来测试时间的特效。
单击【起始开关】按钮,时间就开始运行;当再次单击这个按钮,时间停止;单击【归零】按钮,时间从零开始重新计数。
JavaScript 中的setTimeout和setInterval函数虽然可以得到一定时间的延时,但是这个延时并不十分精确。
如果直接用来做计时器误差会很大,所以本课堂练习使用系统时间的差值来计算经过的毫秒数,这样就很精确了。
9.8 思考与练习。