dreamweaver教程第9章
Dreamweaver-CS3网页制作基础教程第9章习题答案
第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的说法错误的有（）。
dw09
任务二：使用模板
模板实战演练
任务三：模板与库的结合使用
实战演练 实战总结 •模板中可以使用库元素 ，以应对不同子页中相同的内容可能会在 位置上发生变化。 •在制作完成首页后，即要生成库元素（库项目）。然后，在生成的 模板文件中，插入库。 •在一些排版相对较简单的动态前台页中，可以直接使用库元素，而 不必套用模板。
库的作用 一是帮助设计人员在需要调用网站中相同内容的时候，不需要重 复制作，只需要从资源面板中，将其拖入页面即可。 二是如果库元素中的内容发生了变化，则整站中使用该库元素的 部分都会自动更新。
任务一：使用库
如何创建库元素？ 创建完成的库元素在哪里存放？ •站点下的Library文件夹 •资源面板 如何使用？
本讲练习
上机操作： 上机操作： 1. 完成本讲实例
任务一：使用库
库元素实战演练
任务二：使用模板
什么是模板？ Dreamweaver中的模板，是将网页中共同的布局和元素排版完成， 然后生成模板，网站中其他的页面就由此模板生成。
模板的作用 更新模板文件中布局，就可以更新整站的网页布局。
任务二：使用模板
如何创建模板文件？ 创建完成的模板文件在哪里存放？ •站点下的Templates文件夹 •资源面板 如何使用？
网页设计与制作教程 ----Dreamweaver
第9讲 提高工作效率—使用模板与库 提高工作效率—
教学目的与要求
•掌握模板的基本使用 •掌握库的使用 •掌握模式与库的结合使用
重点难点
•掌握模板和库的使用为本讲重点 • 将模板与库结合使用为本讲难点
任务一：使用库
什么是库？ Dreamweaver中的库，是将需要在整站中重复调用的内容进行整合， 生成库元素。
DREAMWEAVER 官方教程第9章
提示: 每个框架都显示单独的HTML文档 , 必须保存每个文档以及该框架集文 文档, 提示 : 每个框架都显示单独的 文档 件. 步骤3 为每个框架以及该框架集设置属性,包括命名每个框架, 步骤 为每个框架以及该框架集设置属性,包括命名每个框架,设置滚动和 不滚动选项等. 不滚动选项等. 步骤4 确保在"属性"检查器中为所有链接设置了"目标"属性, 步骤 确保在"属性"检查器中为所有链接设置了"目标"属性,以便所链 接的内容显示在正确区域中. 接的内容显示在正确区域中.
第9章 使用框架
关于框架和框架集 文档" 在"文档"窗口中使用 框架集 创建框架和框架集 选择框架和框架集 在框架中打开文档
保存框架和框架集文件 查看和设置框架属性 查看和设置框架集属性 控制具有链接的框架内容 处理不能显示框架的浏览器 JavaScript脚本用于框架 将JavaScript脚本用于框架
9.1.2 决定是否使用框架
框架的最常见用途就是导航. 框架的最常见用途就是导航.一组框架通常包括一个含有导航条的框架和另 一个要显示主要内容页面的框架. 一个要显示主要内容页面的框架.
但是, 但是 , 框架的设计可能比较复 并且在许多情况下, 杂 ; 并且在许多情况下 , 可以创建 没有框架的Web页 , 它可以达到使 没有框架的 页 用一组框架所能达到的许多同样效 例如, 果 . 例如 , 如果想让导航条显示在 页面的左侧, 页面的左侧 , 则既可以用一组框架 代替您的页面, 代替您的页面 , 也可以只是在站点 中的每一页上包含该导航条. 中的每一页上包含该导航条. 右图显示了具有类似框架布局 的页面设计, 但在设计中并没有使 的页面设计 , 用框架. 用框架. 许多专业Web设计人员不喜欢使用框架,并且许多浏览 设计人员不喜欢使用框架,并且许多浏览Web的人也不喜欢框 许多专业 设计人员不喜欢使用框架 的人也不喜欢框 在大多数情况下, 架.在大多数情况下,这种反感是因为遇到了那些使用框架效果不佳或不必要地 使用框架的站点.例如, 使用框架的站点.例如,每当访问者单击导航按钮时就重新加载导航框架内容的 框架集.如果框架使用得法,例如,在允许其他框架的内容发生更改的同时, 框架集.如果框架使用得法,例如,在允许其他框架的内容发生更改的同时,使 一个框架中的导航控件保持静态,则这些框架对于某些站点可能非常有用. 一个框架中的导航控件保持静态,则这些框架对于某些站点可能非常有用. 并不是所有的浏览器都提供良好的框架支持, 并不是所有的浏览器都提供良好的框架支持,框架对于无法导航的访问者而 言可能难以显示.所以,如果确实要使用框架, 言可能难以显示 . 所以 , 如果确实要使用框架 , 应始终在用户的框架集中提供 noframes部分, 以方便不能查看这些框架的访问者.最好还要提供指向站点的 部分, 以方便不能查看这些框架的访问者. 部分 无框架版本的显式链接, 无框架版本的显式链接,以用于那些虽然其浏览器支持框架但不喜欢使用框架的 访问者. 访问者.
dreamweaver第9章PPT教学课件
2020/12/12
7
框架和框架集的属性
❖ 框架名称：此框架的名字 源文件：指定在框架中的起始文件，有三种方法 滚动当框架中的内容显示不下的时候是否出现滚动条 不能调整大小：限定了框架的尺寸 边框：用来控制当前框架边框 边框颜色：设置与当前框架相邻的所有框架的边框颜色 边界宽度：设置以像素为单位的框架边框和内容之间的左右边距 边界高度：设置以像素为单位的框架边框和内容之间的上下边距
12
在框架中创建链接
❖ 目标框架：当在框架网页的某一个框架中定义超链接时，需要指定被 链接的网页显示在哪一个框架中，即指定超链接的目标框架。 选择要设置超链接的文字或图像，“插入”—“超链接”，单击“目标 框架”、“更改目标框架”
1. blank:在新的浏览器窗口打开链接的文档，同时保持当前窗口不变。 2. self:在当前框架中打开链接，同时替换该框架的内容。 3. mainframe:在底部框架中打开链接，同时替换该框架中的内容。 4. topfr2/12
10
图 10- 21“另存为”对话 框
（2）Dreamweaver首先要保存框架集文件，框架集边框显示虚线框。 文件名默认为“UntitledFrame-1.html”，可以根据需要更改文件名， 比如命名为“index.html”。 （3）单击“保存”按钮，接着要求保存框架文件，相应框架边框显 示虚线框。本例命名3个框架分别为：“biaoti.html”（对应 topFrame）、“daohang.html”（对应leftFrame）、“neirong.html” （对应mainFrame）。
2020/12/12
2
10.1 【课堂讲解】框架概述
10.1.1 框架和框架集 框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中
《Dw CC网页制作案例教程》教学课件 第9章 模板和库的应用
步骤 02
在“文档类型〞列表中选择 “网站模板〞，在“站点〞列 表中选择“ydjt〞，在“站点 ‘ydjt’的模板〞列表中选择 “xinwen〞。
第9章 模板和库的应用
24
案例实施
一、网页、网站和主页
步骤 03 单击“创立〞按钮，基于模板创立文档，如以下图所示。
第9章 模板和库的应用
25
案例实施
中文版Dreamweaver CC 网页制作案例教程
目录页
CONTENTS PAGE
第9章 模板和库的应用
案例一 案例二
创建并应用库项目制作新闻显示页面——库的基本操作
案例说明
使用模板可以高效率地制作同一网站 中结构相同的网页。本案例通过创立 模板，并应用模板制作网站新闻显示 页面，来学习模板的根本操作。
第9章 模板和库的应用
20
案例实施
在学习了模板的创立、编辑、应用和管 理后，下面通过在企业网站中创立一个 模板，并使用该模板制作一个网页，以 进一步学习模板的创立和应用，网页效 果如右图所示。
一、网页、网站和主页
第9章 模板和库的应用
21
案例实施
一一、、网创页立、模网板站和主页
步骤 01 在“文件〞面板中翻开“ydjt〞站点，并双击翻开其中的网页文档“xinwen.html〞。 步骤 02 翻开“另存模板〞对话框。在“另存为〞文本框中输入“xinwen〞作为模板名，然后单
CONTENTS PAGE
第9章 模板和库的应用
案例一 案例二
案例说明
使用库工程可以将网页中的常用页面元素保存起 来，然后在多个网页中重复使用。本案例主要学 习创立和应用库工程的根本操作。
第9章 模板和库的应用
DreamweaverCS5网页制作第9章 模板和库
9.1 模板的建立与应用
9.1.1案例制作：使用模板制作明星网站
操作步骤： （3）利用所建模板建立“托马斯• 穆勒”的网页 1）选择“文件”→“新建”命令， 打开“新建文档”对话框，在左侧 单击“模板中的页”选项，站点选 择“球星风采”，在“站点‘球星 风采’的模板”中选择“qiuyuan”， 选择“当模板改变时更新页面”复 选框，在“预览”框中可以预览模 板的效果，如图所示。单击“创建” 按钮，即可创建基于模板的网页。
9.1 模板的建立与应用
9.1.1案例制作：使用模板制作明星网站
操作步骤： 2）使用模板创建的网页四周有黄色边框，右上角有黄色标签及模板名称。网页中 可编辑区域被套上蓝色边框，只有可编辑区域的内容能够编辑。如图所示。删除可 编辑区域的内容。
9.1 模板的建立与应用
9.1.1案例制作：使用模板制作明星网站
9.1 模板的建立与应用
9.1.1案例制作：使用模板制作明星网站
操作步骤： 2）单击“插入”面板“常用”选项中的模板按钮 右边的向下箭头，在弹出的菜单中 选择“ 可编辑区域”命令，如图所示。
9.1 模板的建立与应用
9.1.1案例制作：使用模板制作明星网站
操作步骤： 3）系统会提示“Dreamweaver会自动将此文档转换为模板”，单击“确定”按钮， 在打开的“新建可编辑区域”对话框中，修改可编辑区域的名称为“球星姓名2.模板 在Dreamweaver CS5中，模板文件最显著的特征存在可编辑区域和锁定区域两部分。 锁定区域是不需要编辑的区域，多个网页的相同部分，是相对固定、不可改变的；可 编辑区域是需要编辑的区域，用来定义网页具体内容部分。当使用模板建立网页时， 用户只能编辑可编辑区域，其它区域不能编辑，使用模板有利用网站的维护、管理， 也有利于网站风格的统一。 模板实际上也是一种文档，它的扩展名为“.dwt”，存放在站点文件夹下的 Templates文件夹中，如果该文件夹在站点中尚不存在，则Dreamweaver CS5将在保存 新建模板时自动创建。
Dreamweaver CS6网页设计立体化教程第9章
9.3.1
测试与发布“快乐旅游”网站
13
1. 实训目标 本实训的目标是本实训将对“快乐旅游”网站进行测试与发布，通过测试修复浏览器兼容性 和各种链接，然后对站点配置正确的远程信息，并将其上传至申请的主页空间。本实训的最终效 果如右图所示。
口，其中将显示文件的上传进度。文
件上传成功后将自动关闭该对话框。
行业提示：认识站点访问量
11
站点的访问量是衡量网站成功与否的重要指标之一，要想增加网站访问量，则需对网站进行宣 传。下面介绍几种在网站制作行业最常用的站点宣传技巧。 ①导航网站登录。对于流量不大，知名度不高的网站来说，进入导航网站是最有效的提高访问 量的方法之一。 ②友情链接。友情链接可以给一个网站带来稳定的访问量，同时也有助于提升网站在GOOGLE 等搜索引擎中的排名。进行友情链接时，最好能链接一些流量较高的知名网站，或是和网站内容互
9.3.1
测试与发布“快乐旅游”网站
14
2. 专业背景
网站发布标志着网页制作正式告一段落，在正式发布网站之前，必须对网页进行测试。本章只简 要地对网页进行了一些基本设置，在专业领域，网站测试包括了许多方面，如配置测试、兼容性测试、 易用性测试、文档测试以及安全性测试等。假如网站面向全球范围的浏览者，则还应包括本地化测试。 另外，使用不同技术制作的网站程序应该在不同的环境中进行测试。目前主流的一些网站程序，
9.1.3 检测下载速度
在“属性”面板上方的状态栏右侧可看到当前网页的下载速度为3秒。 按【Ctrl+U】组合 键打开“首选参数”对话框，在“分类”列表框中选择“窗口大小”选项，在右侧的“窗口大 小”列表框中可更改网页窗口的宽度和高度，在“连接速度”下拉列表框中可更改下载速度， 完成后单击 按钮即可。
Dreamweaver CC网页设计课件第9章第3节
第9章 模板和库
9.3 商业网站模板的修改与应用
9.3 商业网站模板的修改应用
第二部分 在Dreamweaver CC 2015中处理网页 （2）制作导航部分 3）定义“.nav_bg”CSS规则。打开“CSS设计器”面板，在“源”窗格中点击 图标， 选择“在页面中定义”，在“源”窗格中生成<style>标签。选择创建的源<style>， 在“选择器”窗格中点击添加选择器图标 ，输入选择器“.nav_bg”。
பைடு நூலகம்9.12
第9章 模板和库
9.3 商业网站模板的修改与应用
9.3 商业网站模板的修改应用
第二部分 在Dreamweaver CC 2015中处理网页 （2）制作导航部分 7）将光标定位在左侧单元格，点击菜单“插入”→“HTML”→“日期”命令，选择日期 格式如图所示，点击“确定”按钮，插入日期，并在日期前插入全角空格。
9.17
第9章 模板和库
9.3 商业网站模板的修改与应用
9.3 商业网站模板的修改应用
第二部分 在Dreamweaver CC 2015中处理网页 （3）制作左侧部分 3）将“属性”窗格切换到“布局”属性，设置“padding”的上、右、下、左的值为5px， 即填充为5px。
9.18
第9章 模板和库
9.11
第9章 模板和库
9.3 商业网站模板的修改与应用
9.3 商业网站模板的修改应用
第二部分 在Dreamweaver CC 2015中处理网页 （2）制作导航部分 6）此时，可以看到单元格已经设置的背景图像，在单元格中插入1行2列的表格，宽为 100%，边框粗细、单元格边距、单元格间距设置为0，然后设置左侧单元格为宽度为25%。
《Dreamweaver网页制作实训教程》教学课件 第9章
9.2.4 应用复选框
复选框允许用户在一组选项中选择一个或多个 选项，常用于制作调查类栏目。
“复选框〞 的应用
9.2.5 应用单项选择按钮和单项选择按 钮组
单项选择按钮允许用户在多个选项中选择一个 ，不能进行多项选择。
有时候需要一次添加多个单项选择按钮，此时 可用单项选择按钮组来代替。单项选择按钮组 相当于多个名称相同的单项选择按钮，除创立 方法不同外，它们之间没有任何区别。
使用图像域可以用一些漂亮的图像按钮来代替 Dreamweaver自带的按钮，从而使网站更美观。 要插入图像域，首先将插入点置于表单中，然 后单击“表单〞插入栏中的“图像域〞按钮， 弹出“选择图像源文件〞对话框。
选择要添加的图 像，然后单击“ 确定〞按，添 加图像域
9.2.8 应用文件域
“文件域〞可以使浏览者选择本地计算机上的 文件，并将其上传到效劳器上。“文件域〞的 外观与文本字段类似，只是后面多了一个“浏 览〞按钮。浏览者可以单击该按钮来选择要上 传的文件，或者直接在文本框中输入要上传文 件的路径。
9.2.3 应用按钮
对表单而言，按钮是不可缺少的元素，它能控制 表单的内容，如“提交〞或“重设〞。单击“提 交〞按钮可将表单中的内容发送到效劳器，单击 “重设〞按钮可去除表单中现有的内容。
综合实训1 制作留言页面
本节通过制作一个包含表单、文本域和按钮的 留言页面，来练习和稳固一下常见表单对象在 网页制作中的应用，具体操作见视频9-1。
添加 行为
翻开“检查表单〞 对话框，设置各项 后单击“确定〞按 钮即可添加行为
应用表单应用表单对象验证表单数据911插入表单在dreamweaver的插入栏中有一个表单类别选择该类别可插入的表单对象快捷按钮将显示在插入栏中
Dreamweaver基础教程课件PPT第9章
网页特效
学习目标
1）了解行为面板的基本功能。 2）掌握常用行为的使用。
9.1 行为面板基本功能
重点提示
1）理解行为的作用。 2）熟悉行为面板。
行为是实现网页上交互的一种捷径， Dreamweaver 8.0 行为将 Javascript 代码放置在文 档中，以允许访问者与 Web 页进行交互，从而以 多种方式更改页面动作或执行某些任务。行为是 事件和由该事件触发的动作的组合。事件是动作 被触发的结果，而动作是用于完成特殊任务的预 先编好的JavaScript代码，诸如打开一个浏览器窗 口，播放声音等。当对一个页面元素使用行为时， 需要用户指定动作和所触发的事件。
实例4 载入网页时弹出窗口。
课堂练习
1．使用超级链接控制弹出窗口。 2．图片控制弹出窗口练习。
9.4 制作动态图片按钮
实例5 制作动态图片按钮。实例效果如下 图所示。
9.5 制作动态图片说明
重点提示
掌握动态图片说明的制作方法。
实例6 制作动态图片说明。当鼠标指向不 同的图片上时显示一段关于相应图片的文 字说明，实例效果下图A、B所示。
实例1 熟悉行为面板。
9.2 “改变属性”动作的应用
重点提示
1）动态改变文字大小 2）使用“改变属性”动作交换图片
实例2 动态改变文字大小。鼠标移到这段 文字上，文字将被放大，单击鼠标时，改 变文字的背景色，鼠标移开，文字恢复原 大小。
实例3 变换图片。
实现效果：当用户把鼠标移到图片上时，就换了 一张图片；当把鼠标移开图片时，它又恢复了 原来的图片。这种动态效果同样是用“行为” 中的“改变属性”动作功能实现的。
图A鼠标不在图象上
图B 鼠标移到图象上
Dreamweaver教程第9章
3．创建单选按钮组
使用单选按钮组可以快速地创建多个单选按钮供用户选 择。使用Dreamweaver MX 2004可以一次插入一组单选按 钮，这些单选按钮具有同样的名称，包含着不同的值。
（1）选择“插入”面板中“表单”选项，打开“表单”
子面板，在此面板中单击“单选按钮组”按钮，弹出“单选
按钮组”对话框，如图9.2.8所示。
（14）字段集：用来让用户在此对话框中输入代码，然
后系统自动将这些代码加入到表单源代码中。
二、表单域
创建表单域的方法很简单，将光标定位在要插入表单域
的位置，然后单击“插入”面板中的“表单”子面板中的
“表单”按钮（或选择“插入”→“表单”命令来插入表单 体）。插入表单体后我们就会看到文档窗口中出现红色区域， 该区域就是表单体，如图9.1.2所示。红线框内的区域即为表 单域，所有的其他表单对象都将插入到该红线框内，否则服
图9.2.9 “单选按钮组”对话框
三、创建菜单域
跳转菜单是一种常见的交互式表单对象，其中每个菜单
选项都含有一个超链接，使浏览者在选择某个选项后可以跳 转到相应的页面。创建表单域的操作步骤如下： （1）单击“插入”面板中“表单”选项，打开“表单” 子面板，在此面板中单击“跳转菜单”按钮，弹出“插入跳 转菜单”对话框，如图9.2.10所示。 该对话框中的各选项说明如下：
9）菜单之后插入前往按钮：选中此复选框，可以在菜
单后面插入“前往”按钮，以便用户跳转到其他页。
10）：选中此复选框，当跳转到指定的URL后，仍然选
择默认设置项。
（2）在该对话框中设置各项参数，如图9.2.11所示，单 击“确定”按钮即可插入菜单域。 提示：“插入跳转菜单”的属性设置方法和“列表/菜单” 的基本相同，用户在设置“跳转菜单”时可以参照相关内容。
网页设计教程Dreamweaver电子课件第9章
在导航条的下方插入一个新表格。选中该表格，在“属性”面板上将背 景色设为白色。
9.4 制作中部框架
9.5 制 作 底 部
9.5 制 作 底 部
9.5 制 作 底 部
9.6 版式设计原则
1. 用大表格控制页面布局，嵌套表格控制内容 2. 大表格宽度使用像素值，嵌套表格尽量使用百分比 3. 一般不指定表格高度 4. 每行（列）只需设定一个单元格的宽度（高度） 5. 不要轻易拖动表格边框 6. 较长的页面至少要用表格分割成3个部分
1. 插入水平线 2. 插入大表格
9.9.3 底部
9.9 制作网页右侧部分
3. 制作“友情链接”栏目
9.9.3 底部
9.9 制作网页右侧部分
4. 制作“网上调查”栏目
9.9.3 底部
9.9 制作网页右侧部分
5. 制作“特别推荐”栏目
9.9.3 底部
9.9 制作网页右侧部分
9.9.3 底部
9.10 首页制作注意问题
3. 插入图片 4. 插入文本框
9.8.1 论坛入口
9.8 制作网页左侧部分
5. 插入图像域
9.8.1 论坛入口
9.8 制作网页左侧部分
6. 插入第2个表格
9.8.1 论坛入口
9.8 制作网页左侧部分
1. 插入表格
9.8.2 本站公告
9.8 制作网页左侧部分
2. 加入文本和图片
9.8.2 本站公告
第9章 制作网站首页
9.1 分析网页结构
9.2 页面整体设计
在Dreamweaver窗口中选择菜单命令“文件”|“新建”命 令，此时将打开“新建文档”对话框。
Dreamweaver(9)
第9章 章
回顾
Flash的界面组成。 的界面组成。 的界面组成 Flash的时间轴及工具栏的使用方法。 的时间轴及工具栏的使用方法。 的时间轴及工具栏的使用方法 场景的设置方法。 场景的设置方法。 应用网格及标尺进行页面处理
第2页 页
本章目的
学习在Flash中创建形状。 中创建形状。 学习在 中创建形状 掌握曲线的调整方式。 掌握曲线的调整方式。 学会各种颜色的编辑方法。 学会各种颜色的编辑方法。 掌握图像及文字的使用
第3页 页
本章重点
制作动画时， 制作动画时，绘制形状和调整颜色是必不可 少的，而文字和图像的应用则是动画的基础， 少的，而文字和图像的应用则是动画的基础， 本章的重点就是掌握动画设置中各种基本成 分的应用。 分的应用。
第4页 页
绘制直线
绘制直线
选择直线工具 设置颜色 选择直线类型及直线宽度
绘制线条
第17页 页
导入图像
导入图像 导入图像序列 导入多层文件 导入其他格式文件
第18页 页
描摹位图图像
导入位图文件 转换位图文件
第19页 页
实例 — 图片在文字内的循环播放
将导入的连续图片设置为一个整体元件 将输入文字设置为一个新层 设置关键帧与遮罩效果 其他设置
第20页 页
思考与练习
Flash的形状绘制工具包括哪些？ 的形状绘制工具包括哪些？ 的形状绘制工具包括哪些 如何调整曲线？ 如何调整曲线？ 怎样设置颜色？ 怎样设置颜色？ 如何操作文字？ 如何操作文字？
第21页 页
思考与练习
导入的图像如何转为矢量图？ 导入的图像如何转为矢量图？ 根据实例制作移动图像动画。 根据实例制作移动图像动画。 练习应用图像和文字设置动画。 练习应用图像和文字设置动画。
Dreamweaver CC网页设计课件第9章第2节
第9章 模板和库
9.2 库的建立与应用
9.2.1 案例制作：利用库修改站点导航
（4）修改库项目 1）在“资源”面板的“库”中双击库项目“zddh”，打开该项目，删除原来的“精彩瞬 间”图片，输入鼠标经过图像“动物危机”。 2）编辑完成后，保存，此时会打开“更新库项目”对话框，单击“更新”按钮，使用该 库项目的网页“beijixiong.html”和“haishi.ht 模板和库
9.2 库的建立与应用
9.2.1 案例制作：利用库修改站点导航
（2）创建库项目 3）在表格的第2～5行分别插入鼠标经过图像“极地环境”、“动物档案”、“动物趣 闻”、“精彩瞬间”，设第一行单元格高度为40。 4）选择“文件”→“保存”，保存库项目。
9.4
第9章 模板和库
9.2 库的建立与应用
9.8
第9章 模板和库
9.2 库的建立与应用
9.2.2 新知解析
3.使文档中的库项目可编辑 库项目添加到文档后，如希望专门针对该页编辑，则必须断开文档中的库项目实 例和库之间的链接。方法如下，在当前文档中选中库项目，在“属性”面板中单 击“从源文件中分离”按钮。则网页中的库项目变成网页中普通的一部分，当库 项目发生更改时不会再更新该实例。
9.2
第9章 模板和库
9.2 库的建立与应用
9.2.1 案例制作：利用库修改站点导航
（2）创建库项目 2）点击编辑按钮 ，进入编辑窗口，插入一个6行1列、宽116像素，其 它各项均为0的表格。选中表格，切换到代码视图，将光标移到字符 “<table”后面按空格键，在出现的属性下拉列表中双击“background” 属性，单击弹出的浏览按钮，指定背景图像文件是image/beijing.gif 。 继续按空格键，在出现的属性下拉列表中双击“height”属性，输入数 值为218，这样就设定了表格的背景图像和高度，选中所有单元格，设 水平和垂直的对齐方式为居中。
Dreamweaver 入门-9
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设置所有三个层的背景颜色后，单击它们的右侧，确保未选中任何内容。
接下来，您将通过修改页面属性来更改整个页面的背景颜色。
通过“页面属性”对话框可以设置一些页面属性，包括页面字体的大小和颜色、已访问链接的颜色以及页面边距等。
Dreamweaver电子教案课件第9章
9.1.3 设置表单属性
✓ “表单ID”：对表单命名以进行识别。 ✓ “动作”：注明用来处理表单信息的脚本或程序所在的URL。 ✓ “方法”：选择将表单数据传输到服务器的方法。“
POST”方法将在 HTTP 请求中嵌入表单数据，将表单值以消息方 式送出；“GET”方法将表单值作为请求该页面的URL的附加值发送； “默认”方法使用浏览器的默认设置将表单数据发送到服务器。 ✓ “目标” ✓ “编码类型”：对提交给服务器进行处理的数据使用MIME编码类型。
第9章 表单的应用
本章将介绍表单的基本知识及使用方法。内容包括：表单的创建，各种表 单对象的添加及属性设置。这些表单对象包括文本域、单选框、复选框、文 件域、按钮、图像域、列表/菜单、跳转菜单、隐藏域、Spry表单验证构件， 以及表单的简单处理等。其中文本域、单选框、复选框、按钮是表单常用的 基本对象，要重点掌握。
的文字替换图像。 ✓ “编辑图像”：启动默认的图像编辑器，并打开该图像文件进行编辑。
7、列表/菜单 在网页中以列表的形式为用户提供一系列的预设选择项。
✓ “列表/菜单”：用于设置“列表/菜单”的名称。 ✓ “类型”： 指定该对象是单击时下拉的菜单，还是可滚动列表。 ✓ “允许多选”：用于设置是否允许选多项列表值。 ✓ “列表值”：用于设置列表内容。 ✓ “初始化时选定”：用于设置“列表/菜单”的默认选项。
9.2 表单对象
1、文本字段
✓ “文本域”：文本域的名称。表单对象名称不能包含空格或特殊 字符,可以使用字母、数字、字符和下划线的任意组合。请注意， 为文本域指定的标签是将存储在该域的值（输入的数据）的变量 名,这是发送给服务器进行处理的值。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第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 思考与练习。