精品文档-新编Dreamweaver CS3动态网页设计与制作教程-第11章
合集下载
Dreamweaver CS3网页制作基础教程-教学大纲
《Dreamweaver CS3中文版网页制作基础》课程教学大纲一、课程性质和任务本课程是网页制作的一门实用课程，是网络类专业的一门实践性很强的技术基础课。
它的主要任务是培养学生规划、设计和制作网站的实际技能。
二、课程教学目标1、掌握Dreamweaver CS3界面的组成与使用方法2、掌握创建和发布站点的基本方法3、掌握首选参数及页面属性的设置方法4、掌握文本、图象、多媒体的主要属性与设置方法5、掌握制作超级链接的方法6、掌握表格的创建、编辑与属性设置方法7、掌握框架结构网页的制作方法8、掌握使用AP Div和CSS样式布局网页的方法9、掌握使用时间轴创建动画的方法10、掌握使用模板和库项目创建网页的方法11、掌握使用行为和Spry构件的方法12、掌握使用表单设计网页的方法13、掌握创建ASP应用程序的方法四、教学内容和基本要求第1章Dreamweaver CS3概况∙了解Dreamweaver CS3的基本概况。
∙熟悉Dreamweaver CS3的工作界面。
∙掌握常用工具栏和面板的基本使用方法。
∙了解Dreamweaver CS3的新特性。
第2章规划、创建和管理站点∙了解网站制作的一般流程。
∙了解网页布局的基本方式。
∙了解网页色彩搭配的基本原理。
∙掌握定义站点的基本方法。
∙掌握设置首选参数的基本方法。
∙掌握创建文件夹和文件的基本方法。
∙掌握编辑、复制和删除站点的基本方法。
∙掌握导出和导入站点的基本方法。
第3章创建和设置文档∙掌握创建、打开、保存和关闭文档的方法。
∙掌握添加文档内容的方法。
∙掌握设置文档格式的方法。
第4章使用图像和媒体∙了解网页中常用图像的基本格式。
∙掌握插入图像和设置图像属性的方法。
∙掌握插入图像占位符的方法。
∙掌握设置网页背景颜色和背景图像的方法。
∙掌握插入Flash动画、图像查看器、ActiveX视频的方法。
第5章设置超级链接∙了解超级链接的种类。
∙掌握设置文本和图像超级链接的方法。
Dreamweaver CS3网页设计案例教程 (11)
2.事件
事件是附加在浏览器中元素上的特殊过程，每个浏览器都提供一组事件。 事件可以与单击“行为”控制面板的“添加行为”按钮后弹出菜单中列出的动 作相关联。实际上，事件是浏览器生成的消息，以通知计算机该网页的访问者 选择了某种操作。当某个事情发生时，系统有一个事件处理机制会自动选择事 件过程中的行为代码。 行为一定要与相应的事件相关联，因此，必须知道每个事件都在哪种情况 下触发选择。
第11章
使用行为
本章简介：
Dreamweaver CS3 的行为 是 将 内 置 的 JavaScript 代 码放置在文档中，以实现 Web 页的动态效果。下面从如何 使用行为并为其应用相应的 事件来讨论如何实现网页动 态、交互的效果。
课堂学习目标
行为的使用 动作的使用
11.1 美丽女人购物网页
4.播放声音
“播放声音”动作的功能是在完全加载网页后播放声音或当鼠标指针对 某个网页元素操作时播放声音。 使用“播放声音”动作的具体操作步骤如下。 （1）选择一个网页元素对象并启用“行为”控制面板。 （2）在“行为”控制面板中单击“添加行为”按钮，并从弹出的菜单 中选择“播放声音”动作，弹出“播放声音”对话框，在对话框的“播放 声音”选项中设置声音文件的路径和文件名，单击“确定”按钮完成设置。 （3）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头 按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件。 （4）按<F12>键浏览网页
1.调用JavaScript
“调用 JavaScript”动作的功能是当发生某个事件时选择自定 义函数或 JavaScript代码行。 使用“调用 JavaScript”动作的具体操作步骤如下。 （1）选择一个网页元素对象，如“刷新”按钮。启用“行为”控制面 板。 （2）在“行为”控制面板中，单击“添加行为”按钮 ，从弹出的菜 单中选择“调用 JavaScript”动作，弹出“调用 JavaScript”对话框， 在文本框中输入JavaScript 代码或用户想要触发的函数名，单击“确定” 按钮完成设置。 （3）如果不是默认事件，则单击该事件，会出现箭头按钮，单击箭头 按钮，弹出包含全部事件的事件列表，用户可根据需要选择相应的事件 （4）按<F12>键浏览网页，当单击“关闭”按钮时，用户可以看到效 果。
动态网页设计与制作实用教程
2021/7/22
33
4.2 三种基本动画形式
4.2.1 逐帧动画的制作 4.2.2 位移动画的制作 4.2.3 变形动画
2021/7/22
34
5.1 洋葱皮效果的应用
Flash MX 中有种专门的多帧编辑与对齐模式，叫作"洋葱皮效 果"(Onion Skin)，它们位于时间轴下面。把"洋葱皮"视图模式打 开，点按时间轴下面的图标，时间轴会变成时间轴上出现了两个圆 圈，它们分别代表洋葱皮的起始帧与终止帧，凡是在这个范围内的 帧都可在同时间进行显示。现在我们把右边的圆圈拉到第30 帧
《动态网页设计与制作实用教程》
电子教案
制 作：程伟渊 任俊杰
2021/7/22
1
目录
网页设计概述 Flash MX基础知识 动画角色的绘制与编辑 动画的基本形式 洋葱皮、图层及声音的应用 动画技术的综合应用 Fireworks MX基础知识 位图编辑与动画制作 图像的优化与导出
Dreamweaver MX基础知识 设计页面布局 网页元素的添加与编辑 链接、库与模板 浏览器动态网页的制作 服务器动态网页知识基础 服务器动态网页的制作 动态网页设计实例 站点管理
17.1 网上新闻发布 17．2 网上投票系统的设计
2021/7/22
19
第18章 站点管理
18.1 测试本地站点 18.2 站点文件的上传 18.3 站点的维护与管理 18.4 宣传自己的网站
2021/7/22
20
附录：经典网页赏析
经典网页赏析1 经典网页赏析2 经典网页赏析3 经典网页赏析4 经典网页赏析5 经典网页赏析6
8.2.3 动画预览
8.2.4 动画的编辑
网页设计DreamweaverCS3教案(华东师范大学)
第 7章建立框架网页教学目标：1．能够理解框架的作用2．能够合理使用框架划分窗口布局3．能够明白框架和框架集的关系4．能在框架中创建编辑网页5．能在框架中打开已有的网页进行编辑6．能够正确保存框架和框架集7．能够理解和编辑框架的属性教学重点：绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性教学难点：绘制嵌套布局表格教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。
教学过程:一、导入新课网页布局技术还有一种，叫做框架。
然而框架本质上是一种浏览器窗口的分割技术。
而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。
利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。
按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。
二、讲授新课（一）、框架和框架集的概念框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。
不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。
每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。
（二）、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
新编Dreamweaver CS3动态网页设计与制作教程图文 (8)
第8章 HTML框架布局
2. 相关知识点 框架的制作方法； 主框架页面及包含的相关页面。
第8章 HTML框架布局
8.2 为框架页制作页面链接
1. 制作页面链接 制作页面链接的具体操作步骤如下： (1) 首先，制作一个框架，其步骤见8.1节所述，创建结 果如图8.16所示。 (2) 在站点处单击鼠标右键，选择【新建文件】，如图 8.17所示。
第8章 HTML框架布局 图8.6 头部框架命名
第8章 HTML框架布局 图8.7 左侧框架命名
第8章 HTML框架布局
(6) 在Adobe Dreamweaver CS3窗口中点击【文件】→ 【保存全部】命令，将刚刚创建的框架布局保存到站点中， 如图8.8所示。
(7) 在默认情况下，Dreamweaver CS3首先保存主框架， 在【另存为】窗口中输入“index”，点击【保存】按钮，如 图8.9所示。
第8章 HTML框架布局 图8.26 框架模板效果图A
第8章 HTML框架布局 图8.27 框架模板效果图B
第8章 HTML框架布局 图8.28 框架模板效果图C来自第8章 HTML框架布局
8.3 小 结
本章主要讲述了HTML框架布局的相关知识。框架在实 际网页制作中的应用较广，建议读者多加练习。
第8章 HTML框架布局
习题
1．选择题
(1) 建立一个上方固定，下方固定的框架，共会产生( )
个html文件。
A. 2 B. 3
C. 4 D. 5
(2) 在HTML中建立框架命令使用的是( )。
A. frameset B. from C. form D. 以上都不是
2．操作题
(1) 创建一个“上方固定，下方固定”的布局。
Dreamweaver网页制作实训教程(CS3版)教学课件
Fireworks：主要用于制作网页图像、网站标志、GIF 动画、图像按钮与导航栏等。 Flash：主要用于制作矢量动画，如广告条、网站片 头动画、动画短片、MTV等。 Photoshop：Adobe公司出品的一个优秀而强大的图形 图像处理软件，起初它的应用领域主要是平面设计而 不是网页设计，但是它所具有的强大功能完全涵盖了 网页设计的需要（除了多媒体）。
1.3.4 测试和发布网站
有了空间和域名后，就可以测试并发布网站了， 网站测试一般包括服务器稳定和安全测试、程序 和数据库测试、网页兼容性测试等。
1.3.5 网站推广
1. 注册到搜索引擎 2. 交换广告条 3. 宣传 4. 网络广告 5. 报纸、杂志
第2章 Dreamweaver CS3入门
初识Dreamweaver CS3 网站创建与管理 页面总体设置
2.2.3 “文件”面板的应用
利用“文件”面板，可以高效地管理站 点。实际操作中，在定义站点后，我们 通常是利用该面板来创建、重命名或打 开站点中的网页文档或文件夹。
在定义了多个站点 后，可利用该下拉 列表选择要进行操 作的站点
2.3 页面总体设置
2.3是检索网页的整个内容，而是只检索 网页中的关键字和说明文本，如果想要自己的 网页能够被搜索引擎检索到，则最好把关键字 设定为人们经常使用的词语。
选择目标 文件所在 文件夹
单击选 择文件
单击“打 开”按钮
5．预览文档
如要预览文档，可在打开文档后单击“文档” 工具栏中的“在浏览器中预览/调试”按钮 ， 在弹出的菜单中选择“预览在IExplore”菜单 项（或直接按【F12】键），在浏览器中打开 文档。
2.2 网站创建与管理
2.2.1 确定站点目录结构
1.3.4 测试和发布网站
有了空间和域名后，就可以测试并发布网站了， 网站测试一般包括服务器稳定和安全测试、程序 和数据库测试、网页兼容性测试等。
1.3.5 网站推广
1. 注册到搜索引擎 2. 交换广告条 3. 宣传 4. 网络广告 5. 报纸、杂志
第2章 Dreamweaver CS3入门
初识Dreamweaver CS3 网站创建与管理 页面总体设置
2.2.3 “文件”面板的应用
利用“文件”面板，可以高效地管理站 点。实际操作中，在定义站点后，我们 通常是利用该面板来创建、重命名或打 开站点中的网页文档或文件夹。
在定义了多个站点 后，可利用该下拉 列表选择要进行操 作的站点
2.3 页面总体设置
2.3是检索网页的整个内容，而是只检索 网页中的关键字和说明文本，如果想要自己的 网页能够被搜索引擎检索到，则最好把关键字 设定为人们经常使用的词语。
选择目标 文件所在 文件夹
单击选 择文件
单击“打 开”按钮
5．预览文档
如要预览文档，可在打开文档后单击“文档” 工具栏中的“在浏览器中预览/调试”按钮 ， 在弹出的菜单中选择“预览在IExplore”菜单 项（或直接按【F12】键），在浏览器中打开 文档。
2.2 网站创建与管理
2.2.1 确定站点目录结构
新编Dreamweaver CS3动态网页设计与制作教程第1章
式，例如JPEG、PNG、GIF等图像格式，并且能够扩展支持 众多的插件(plug-in)。另外，许多浏览器还支持其他的URL 类型及其相应的协议，如FTP、Gopher、HTTPS(HTTP协议 的加密版本)。HTTP内容类型和URL协议规范允许网页设计
者在网页中嵌入图像、动画、视频、声音、流媒体等。
的文本或图形与另一台电脑中的文本或图形方便地联系在一
起，形成有机的整体。人们不用考虑具体信息是在当前电脑 上还是在网络的其他电脑上，只需使用鼠标在某一文档中点
取一个图标，Internet就会马上转到与此图标相关的内容上去，
而这些信息可能存放在网络的另一台电脑中。
第1章 Dreamweaver CS3网页设计基础
第1章 Dreamweaver CS3网页设计基础
1.3 网页色彩的搭配
1. 色彩的基本知识 颜色是因为光的折射而产生的。颜色分非彩色和彩色两 类。非彩色是指黑、白、灰系统色。彩色是指除了非彩色以 外的所有色彩。红、黄、蓝是三原色，其他的色彩都可以用 这三种色彩调和而成。网页HTML语言中的色彩表达即采用 这三种颜色的数值表示，例如：红色为(255，0，0)，十六进 制的表示方法为(FF0000)；白色的十六进制表示方法为 (FFFFFF)，我们经常看到的“bgColor=#FFFFFF”就是指背 景色为白色。任何色彩都有饱和度和透明度属性，属性的变 化产生不同的色相，所以至少可以制作几百万种色彩。在一 般情况下，彩色页面较完全黑白页面更加吸引人。
第1章 Dreamweaver CS3网页设计基础
6. 脚本 脚本(Script)是使用一种特定的描述性语言，依据一定的 格式编写的可执行文件。脚本通常可以由应用程序临时调用 并执行。各类脚本目前被广泛应用于网页设计中，脚本不仅 可以减小网页的规模和提高网页浏览速度，而且可以丰富网 页的表现，如动画、声音等。 脚本语言(如JavaScript、VBScript等)介于HTML和C、 C++、Java、C#等编程语言之间。HTML通常用于格式化和 链接文本，编程语言通常用于向机器发出一系列复杂的指令。 脚本语言与编程语言也有很多相似的地方，其函数与编程语 言比较相像，也涉及到变量。脚本语言与编程语言之间最大 的区别是，编程语言的语法和规则更为严格和复杂一些。脚 本语言不需要编译，可以直接用，由解释器(或称虚拟机)来 负责解释。
者在网页中嵌入图像、动画、视频、声音、流媒体等。
的文本或图形与另一台电脑中的文本或图形方便地联系在一
起，形成有机的整体。人们不用考虑具体信息是在当前电脑 上还是在网络的其他电脑上，只需使用鼠标在某一文档中点
取一个图标，Internet就会马上转到与此图标相关的内容上去，
而这些信息可能存放在网络的另一台电脑中。
第1章 Dreamweaver CS3网页设计基础
第1章 Dreamweaver CS3网页设计基础
1.3 网页色彩的搭配
1. 色彩的基本知识 颜色是因为光的折射而产生的。颜色分非彩色和彩色两 类。非彩色是指黑、白、灰系统色。彩色是指除了非彩色以 外的所有色彩。红、黄、蓝是三原色，其他的色彩都可以用 这三种色彩调和而成。网页HTML语言中的色彩表达即采用 这三种颜色的数值表示，例如：红色为(255，0，0)，十六进 制的表示方法为(FF0000)；白色的十六进制表示方法为 (FFFFFF)，我们经常看到的“bgColor=#FFFFFF”就是指背 景色为白色。任何色彩都有饱和度和透明度属性，属性的变 化产生不同的色相，所以至少可以制作几百万种色彩。在一 般情况下，彩色页面较完全黑白页面更加吸引人。
第1章 Dreamweaver CS3网页设计基础
6. 脚本 脚本(Script)是使用一种特定的描述性语言，依据一定的 格式编写的可执行文件。脚本通常可以由应用程序临时调用 并执行。各类脚本目前被广泛应用于网页设计中，脚本不仅 可以减小网页的规模和提高网页浏览速度，而且可以丰富网 页的表现，如动画、声音等。 脚本语言(如JavaScript、VBScript等)介于HTML和C、 C++、Java、C#等编程语言之间。HTML通常用于格式化和 链接文本，编程语言通常用于向机器发出一系列复杂的指令。 脚本语言与编程语言也有很多相似的地方，其函数与编程语 言比较相像，也涉及到变量。脚本语言与编程语言之间最大 的区别是，编程语言的语法和规则更为严格和复杂一些。脚 本语言不需要编译，可以直接用，由解释器(或称虚拟机)来 负责解释。
Dreamweaver_CS3实用教程完整版
1.1.1 网页和网站的概念
网页(web)，也就是网站上的某一个页面，它是一个纯文本文件，是向浏览 者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML等语 言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览 器进行解析，从而向浏览者呈现网页的各种内容。 网站(Website)，它是指在互联网上，根据一定的规则，使用HTML等工具 制作的用于展示特定内容的相关网页集合，它建立在网络基础之上，以计算机、 网络和通信技术为依托，通过一台或多台计算机向访问者提供服务。平时所说 的访问某格站点，实际上访问的是提供这种服务的一台或多台计算机。
第1章 网站的设计与制作简述
Dreamweaver CS3是一款专业的网页制作软件，它具有简单易学、操作 方便以及适用于网络等优点。通过对Dreamweaver CS3的学习，即使没有任 何网页制作经验的用户，也能很容易上手，制作出精美的网页。本章主要介绍 了网页的基本概念、网页设计的构思和设计流程，以及Dreamweaver CS3的 新增特色功能和工作环境等。
1.2.2 网页的设计构思
在制作网页之前，首先要进行网页的设计与构思，主要包括网页的主题、 网页的命名、网站标志、色彩搭配和字体等要素。
1.2.3 网页的布局
网页布局的好坏是决定网页美观与否的一个重要方面。通过合理的布局， 可以将页面中的文字、图像等内容完美、直观地展现给访问者，同时合理安排 网页空间，优化网页的页面效果和下载速度。反之，如果页面布局不合理，网 页在浏览器中的显示将十分糟糕，页面中的各个元素显示效果可能会重叠或丢 失。因此，在对网页进行布局设计时，应遵循对称平衡、异常平衡、对比、凝 视和空白等原则。常见的网页布局形式包括：型布局、T型布局、“三”型布 局、对比布局和POP布局等。
Dreamweaver网页设计案例教程 第11章 综合设计实训
11.1.2 【项目创意及制作】
1．设计素材 2．设计作品效果图ຫໍສະໝຸດ 11.1.2 【项目创意及制作】
3．步骤提示
1
2
3
4
11.2 游戏娱乐网页——锋七游戏网页
【项目背景及要求】 【项目创意及制作】
11.2.1 【项目背景及要求】
1．客户名称 锋七游戏公司。 2．客户需求 锋七游戏公司是全球领先的游戏互动娱乐平台、游戏玩家的网上乐园，汇集 最新最热门的网络游戏、最好玩的大型游戏、玩家真实交友等服务，现推出几款 新的游戏，要为其前期的宣传做准备，网站内容要求能够表现公司的特点，达到 宣传效果。 3．设计要求 （1）以浅色的背景与深色图像形成对比，突出前方的宣传主体。 （2）以观感强烈的游戏画面瞬间抓住人们的视线，让人印象深刻。 （3）整体设计整洁干净，方便人们的操作。 （4）以沉稳严谨的设计体现出公司的经营特色。 （5）设计规格为1600像素（宽）×1206像素（高）。
11.4.2 【项目创意及制作】
1．设计素材 2．设计作品
效果图
11.4.2 【项目创意及制作】
3．步骤提示
1
2
3
4
11.5 电子商务网页——家政无忧网页
【项目背景及要求】 【项目创意及制作】
11.5.1 【项目背景及要求】
1．客户名称 家政无忧服务有限公司。 2．客户需求 家政无忧服务有限公司是一家以日常保洁、家电清洗、干洗服务、新居开荒 为主要经营项目的专业家政服务公司。公司为扩大服务范围，使服务更便捷，需 要制作网站，网站要突出公司的优势，整体风格简洁大气。 3．设计要求 （1）网页整体风格简洁大气，突出家政服务的专业性。 （2）网页的内容以家居为主，画面和谐，具有特色。 （3）向客户传达真实的服务信息内容。 （4）画面表现出空间感与层次感，图文搭配协调。 （5）设计规格为1400像素（宽）×2082像素（高）。
网页设计与制作——Dreamweaver CS5标准教程第11章 CSS样式
ห้องสมุดไป่ตู้
11.1 CSS样式
11.1.2 CSS样式构造规则
CSS样式是由三个要素对象、属性和属性值构成的。 对象是CSS样式所作用和控制的网页元素，属性是 CSS样式描述和设置对象性质的项目，属性值是属性 的一个实例。
Body { font-family：宋体； font-size：15px； color：red； text-decoration：underline； } 页面文字 { 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线 }
11.1 CSS样式
11.1.3 CSS样式种类
根据CSS样式所控制的网页元素不同，可以将样式分 为4种形式。 当所控制的网页元素是HTML语言中的某一个特定的 标签时，为此标签设置的CSS样式，称为标签样式。 当把网页中或网站中若干元素归为一类，作为一个整 体来看待，为此类元素设置一个CSS样式，称为类样 式。
111css样式?一个标签或元素在网站中的不同网页中或在一个网页中的不同位置上外观效果不同则需要先为该特定标签赋予一个唯一的id号然后再为具有该id号的标签设置样式称此样式为id样式
第11章 CSS样式
网页设计与制作 Dreamweaver CS5 标准教程
本章学习的主要内容：
1. CSS样式构造规则及意义 2. 利用CSS样式面板创建各种样式 3. 利用CSS样式面板创建文本导航条 4. 利用CSS样式面板创建CSS滤镜
11.2 CSS样式控制面板
11.2.3 CSS样式的存储位置
1. 定义内部样式 2. 移动CSS规则 3. 定义外部样式 4. 附加样式表
11.2.4编辑样式
11.3 CSS属性
11.1 CSS样式
11.1.2 CSS样式构造规则
CSS样式是由三个要素对象、属性和属性值构成的。 对象是CSS样式所作用和控制的网页元素，属性是 CSS样式描述和设置对象性质的项目，属性值是属性 的一个实例。
Body { font-family：宋体； font-size：15px； color：red； text-decoration：underline； } 页面文字 { 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线 }
11.1 CSS样式
11.1.3 CSS样式种类
根据CSS样式所控制的网页元素不同，可以将样式分 为4种形式。 当所控制的网页元素是HTML语言中的某一个特定的 标签时，为此标签设置的CSS样式，称为标签样式。 当把网页中或网站中若干元素归为一类，作为一个整 体来看待，为此类元素设置一个CSS样式，称为类样 式。
111css样式?一个标签或元素在网站中的不同网页中或在一个网页中的不同位置上外观效果不同则需要先为该特定标签赋予一个唯一的id号然后再为具有该id号的标签设置样式称此样式为id样式
第11章 CSS样式
网页设计与制作 Dreamweaver CS5 标准教程
本章学习的主要内容：
1. CSS样式构造规则及意义 2. 利用CSS样式面板创建各种样式 3. 利用CSS样式面板创建文本导航条 4. 利用CSS样式面板创建CSS滤镜
11.2 CSS样式控制面板
11.2.3 CSS样式的存储位置
1. 定义内部样式 2. 移动CSS规则 3. 定义外部样式 4. 附加样式表
11.2.4编辑样式
11.3 CSS属性
新编Dreamweaver CS3动态网页设计与制作教程图文 (10)
第10章 行为和JavaScript的应用 图10.7 预览效果
第10章 行为和JavaScript的应用
10.3 项目3：交换图像
1. 操作步骤 交换图像的具体操作步骤如下： (1) 在页面中插入交换前的图像，如图10.8所示。
第10章 行为和JavaScript的应用 图10.8 原始图像
第10章 行为和JavaScript的应用 图10.21 【输入框】窗口
第10章 行为和JavaScript的应用
10.7 课堂综合训练
1. 训练内容 进行课堂综合训练的具体内容如下： (1) 在页面中插入一个1 × 6的表格。 (2) 准备14张图像，给7张鼠标移出时显示的图像分别命 名为“menu_0”加上1～7的数字再加上“.gif”，给7张鼠标 移入时显示的图像分别命名为“menu_0”加上1～7的数字再 加上“_over.gif”。
第10章 行为和JavaScript的应用 图10.5 预览效果
第10章 行为和JavaScript的应用
2. 相关知识点 行为面板； 打开浏览器窗口行为； 页面加载事件。
第10章 行为和JavaScript的应用
10.2 项目2：状态栏文本
1. 操作步骤 设置状态栏文本的具体操作步骤如下： (1) 打开【行为】面板，将光标放在<body>标签中，或 选中标签，【行为】面板上方的标签会出现所选标签<body>， 如图10.1所示。 (2) 单击 按钮，展开“添加行为”列表，选择“设 置文本”→“状态栏文本”。弹出【设置状态栏文本】对话 框，在“消息”后的文本框内输入文本，如图10.6所示。
2. 相关知识点 调用JavaScript关闭浏览器窗口。
第10章 行为和JavaScript的应用 图10.15 【设置触发事件】对话框(2)
Dreamweaver网页设计与制作教程
Dreamweaver网页设计与制作教程第一章：Dreamweaver的介绍与安装Dreamweaver是一款著名的网页设计与制作工具，由Adobe公司开发。
本章将介绍Dreamweaver的功能特点与优势，并提供详细的安装步骤和注意事项。
第二章：Dreamweaver的界面与工具栏在本章中，我们将深入了解Dreamweaver的界面布局，包括工具栏的功能和使用方法。
通过熟悉Dreamweaver的界面，可以提高工作效率。
第三章：网页设计基础知识本章将介绍网页设计的基础知识，包括HTML、CSS、JavaScript等的概念和用法。
了解这些基础知识对于进行网页设计和制作至关重要。
第四章：网页布局与设计在本章中，我们将学习如何在Dreamweaver中进行网页布局与设计。
包括DIV布局、响应式设计等常用技术和方法，以及一些设计原则和注意事项。
第五章：网页文本与图像处理网页中的文本和图像是网页设计中重要的元素。
本章将介绍如何在Dreamweaver中对文本和图像进行处理，如字体设置、锚点链接、图像优化等技巧。
第六章：网页导航与交互设计网页导航和交互设计是网页设计中至关重要的部分。
在本章中，我们将学习如何使用Dreamweaver创建导航菜单、表单、按钮等交互元素，提升用户体验。
第七章：网页动画与多媒体元素网页动画和多媒体元素可以增加网页的吸引力和互动性。
本章将介绍如何在Dreamweaver中使用HTML5和CSS3技术创建动画和嵌入多媒体元素。
第八章：网页调试与代码优化在网页设计和制作过程中，调试和代码优化是必不可少的环节。
本章将介绍Dreamweaver中的调试工具和一些常见的代码优化技巧，帮助提高网页的性能和稳定性。
第九章：网页发布与维护完成网页设计与制作后，下一步就是将网页发布到互联网上。
本章将介绍如何使用Dreamweaver将网页上传至服务器，并提供一些维护和更新网页的技巧。
第十章：常见问题与解决方法在使用Dreamweaver进行网页设计与制作的过程中，可能会遇到一些问题和困惑。
网页制作实用教程(第3版)第11章
Dreamweaver CS6
第11章 站点的测试、发布于维护
本章导读
1 站点的测试
2 站点的发布 3 站点的后期维护 Contents
2
11.1 站点的测试
网站制作完成后，在正式上传之前，还有 一项重要工作，就是网站的测试。网站测试 的内容很多，例如不同的浏览器能否正常浏 览网站页面、网站页面在不同分辨率下显示 的效果是否正常、网站中是否存在空链接或 断开链接等，都需要进行测试。完成网站的 测试之后，再将网站上传到Internet服务器 上，这样就能够在因特网中浏览到该网站了。
11
12
从检查结果可以看到总共有31个链接，29 个正确，还有2个外部链接没有检查，因此 我们进行外部链接的检查，单击“断掉的 链接”下拉按钮，打开下拉菜单，如图11 －9所示，从中选择“外部链接”。
13
结果显示，2个外部链接不在站点内，不能 检查。如图11－10所示。
14
11.1.3 生成站点报告 在Dreamweaver CS6中，可以对当前网 页、选定的文件、整个站点的工作流程或 HTML属性运行站点报告。报告对话框中可 显示关于文件信息、HTML代码信息等相关 内容，从而便于网站设计者对网页文件进 行修改。 【实例11－3】生成站点报告。
15
具体操作如下： 打开本书附带实例“web\index.html”， 以该页面为例介绍生成站点报告。执行“ 站点>报告”命令，打开“报告”对话框， 如图11-11所示。
16
在“报告”对话框中勾选需要显示的选项， 然后单击“运行”按钮。即可打开“站点 报告”面板，生成站点报告。如图11－12 所示。
3
11.1.1 检查浏览器的兼容性 Dreamweaver CS6提供了网页的浏览器兼 容性检查功能，可以检测出在不同浏览器 中网页的显示情况。 【实例11－1】检查网页的浏览器兼容性。
第11章 站点的测试、发布于维护
本章导读
1 站点的测试
2 站点的发布 3 站点的后期维护 Contents
2
11.1 站点的测试
网站制作完成后，在正式上传之前，还有 一项重要工作，就是网站的测试。网站测试 的内容很多，例如不同的浏览器能否正常浏 览网站页面、网站页面在不同分辨率下显示 的效果是否正常、网站中是否存在空链接或 断开链接等，都需要进行测试。完成网站的 测试之后，再将网站上传到Internet服务器 上，这样就能够在因特网中浏览到该网站了。
11
12
从检查结果可以看到总共有31个链接，29 个正确，还有2个外部链接没有检查，因此 我们进行外部链接的检查，单击“断掉的 链接”下拉按钮，打开下拉菜单，如图11 －9所示，从中选择“外部链接”。
13
结果显示，2个外部链接不在站点内，不能 检查。如图11－10所示。
14
11.1.3 生成站点报告 在Dreamweaver CS6中，可以对当前网 页、选定的文件、整个站点的工作流程或 HTML属性运行站点报告。报告对话框中可 显示关于文件信息、HTML代码信息等相关 内容，从而便于网站设计者对网页文件进 行修改。 【实例11－3】生成站点报告。
15
具体操作如下： 打开本书附带实例“web\index.html”， 以该页面为例介绍生成站点报告。执行“ 站点>报告”命令，打开“报告”对话框， 如图11-11所示。
16
在“报告”对话框中勾选需要显示的选项， 然后单击“运行”按钮。即可打开“站点 报告”面板，生成站点报告。如图11－12 所示。
3
11.1.1 检查浏览器的兼容性 Dreamweaver CS6提供了网页的浏览器兼 容性检查功能，可以检测出在不同浏览器 中网页的显示情况。 【实例11－1】检查网页的浏览器兼容性。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
11.1 项目1：创建、操作和管理AP元素
1. 操作步骤 可以在“AP元素”面板中创建AP元素。 1) 创建AP元素 创建AP元素的具体操作步骤如下： (1) 在Adobe Dreamweaver CS3主窗口中，单击【布局】 类别中的【绘制AP Div】按钮，如图11.1所示。
第11章 AP元素和时间轴在网页中的应用 图11.1 【AP Div按钮】绘制窗口
第11章 AP元素和时间轴在网页中的应用 图11.29 播放时间变长视图
第11章 AP元素和时间轴在网页中的应用
(9) 若要实现曲线运动，需要添加关键帧。例如，将动画 条末端的关键帧标签拖放到第50帧，选择动画条的第30帧，然 后按住Ctrl键并单击动画条，即添加了一个关键帧，如图 11.30所示。
第11章 AP元素和时间轴在网页中的应用
第11章 AP元素和时间轴在网页中的应用
11.1 项目1：创建、操作和管理AP元素 11.2 项目2：利用AP元素布局网页 11.3 项目3：制作AP元素动画 11.4 项目4：控制时间轴动画 11.5 课堂综合训练 11.6 小结 习题
第11章 AP元素和时间轴在网页中的应用
5) 更改AP元素的堆叠顺序 更改AP元素堆叠顺序的具体操作如下： (1) 在Dreamweaver CS3中选择【窗口】→【AP元素】项， 打开【AP元素】面板，如图11.6所示。
第11章 AP元素和时间轴在网页中的应用 图11.6 【AP元素】面板
第11章 AP元素和时间轴在网页中的应用
(2) 将AP元素向上或向下拖动至所需的堆叠顺序，如图 11.7所示。
6) 显示和隐藏AP元素 显示和隐藏AP元素的具体操作如下： (1) 选择【窗口】→【AP元素】，打开【AP元素】面板。 在AP元素的眼形图标列内单击可以更改其可见性，如图11.8所 示。
第11章 AP元素和时间轴在网页中的应用 图11.7 改变AP元素堆叠顺序后的视图
第11章 AP元素和时间轴在网页中的应用 图11.8 AP元素的可见性
第11章 AP元素和时间轴在网页中的应用 图11.31 曲线路径
第11章 AP元素和时间轴在网页中的应用
2. 相关知识点 时间轴面板； AP元素的移动效果； 关键帧的添加。 3. 知识拓展：利用时间轴和AP元素实现滚动字幕效果 利用时间轴和AP元素实现滚动字幕效果的具体操作如下： (1) 在【插入】面板的【布局】类别中，单击【绘制AP Div】按钮。在【文档】窗口的【设计】视图中拖动鼠标以绘 制一个AP元素，在AP元素中添加文字内容，如图11.32所示。
(10) 单击此关键帧，拖动AP元素在页面中的位置，形成 曲线路径，如图11.31所示。
(11) 可依此方法继续添加关键帧，并改变AP元素在页面 中的位置，形成更加丰富的曲线路径。按F12键预览页面，可 以看到图像沿着曲线移动的效果。
第11章 AP元素和时间轴在网页中的应用 图11.30 添加关键帧视图
第11章 AP元素和时间轴在网页中的应用
2. 相关知识点 AP元素的属性设置； 将AP元素转换为表格。 3. 知识拓展：将表格布局转换为AP Div布局 将表格布局转换为AP Div布局的具体操作步骤如下： (1) 在Adobe Dreamweaver CS3主窗口的【布局】类别中， 单击【表格】按钮。在【文档】窗口的【设计】视图中，绘制 两个表格，如图11.18所示。
第11章 AP元素和时间轴在网页中的应用 图11.24 插入图像视图
第11章 AP元素和时间轴在网页中的应用 图11.25 将AP元素拖至【时间轴】面板
第11章 AP元素和时间轴在网页中的应用 图11.26 动画轨迹设置
第11章 AP元素和时间轴在网页中的应用
(6) 若要使时间轴在浏览器打开时自动播放，单击【时间 轴】面板中的【自动播放】按钮，然后单击提示消息中的【确 定】按钮，如图11.27所示。
第11章 AP元素和时间轴在网页中的应用 图11.5 AP元素【属性】面板
第11章 AP元素和时间轴在网页中的应用
(3) “左”和“上”是指定AP元素的左上角，相当于页面 左上角的位置；“宽”和“高”指定AP元素的宽度和高度； “Z轴”确定AP元素的堆叠顺序；“溢出”是当AP元素的内容 超过AP元素的指定大小时，如何在浏览器中显示AP元素。
(4) 选择动画条的第20帧，然后按住Ctrl键并单击动画条， 从而添加了一个关键帧，单击此关键帧，拖动AP元素在页面中 的位置，如图11.35所示。
(5) 选择动画条的第40帧，然后按住Ctrl键并单击动画条， 从而添加了一个关键帧。单击此关键帧，拖动AP元素在页面中 的位置，如图11.36所示。
第11章 AP元素和时间轴在网页中的应用
(2) 之后，在【文档】窗口的【设计】视图中，拖动光标 以绘制一个AP Div，如图11.2所示。
2) 查看AP元素的首选参数 查看AP元素首选参数的具体步骤如下： (1) 选择【编辑】→【首选参数】，从左侧的【分类】列 表中选择AP元素并指定以下首选参数，然后单击【确定】按钮， 如图11.3所示。
第11章 AP元素和时间轴在网页中的应用 图11.2 【绘制AP Div】视图
第11章 AP元素和时间轴在网页中的应用 图11.3 AP元素首选参数
第11章 AP元素和时间轴在网页中的应用
【显示】：确定AP元素在默认情况下是否可见，其选 项为“default”、“继承”、“可见”和“隐藏”。
【宽】和【高】：指定使用【插入】→【布局对象】 →【AP Div】创建的AP元素的默认宽度和高度(以像素为单位)。
第11章 AP元素和时间轴在网页中的应用 图11.32 插入AP元素和文字视图
第11章 AP元素和时间轴在网页中的应用
(2) 选择【窗口】→【时间轴】，打开【时间轴】面板， 使用鼠标选定AP元素，拖至【时间轴】面板中，在时间轴的第 一个通道中出现一个动画条，再将动画条末端的关键帧标签拖 放到第50帧，如图11.33所示。
第11章 AP元素和时间轴在网页中的应用 图11.18 【表格布局】视图
第11章 AP元素和时间轴在网页中的应用
(2) 选择【修改】→【转换】，单击【将表格转换为AP Div】命令，如图11.19所示。
(3) 弹出【将表格转换为AP Div】对话框，如图11.20所 示。
(4) 转换后的效果如图11.21所示。
第11章 AP元素和时间轴在网页中的应用 图11.11 apDiv1属性
第11章 AP元素和时间轴在网页中的应用 图11.12 apDiv2属性
第11章 AP元素和时间轴在网页中的应用 图11.13 apDiv3属性
第11章 AP元素和时间轴在网Байду номын сангаас中的应用
(2) 三个AP元素的布局如图11.14所示。 (3) 在标题栏中选择【修改】→【转换】项，单击【将AP Div转换为表格】命令，如图11.15所示。 (4) 弹出【将AP Div转换为表格】对话框，如图11.16所 示。 (5) 转换后的效果如图11.17所示。
2. 相关知识点 AP元素的创建； AP元素的首选参数； AP元素的面板、Z轴和可见性； AP元素的属性设置。
第11章 AP元素和时间轴在网页中的应用
11.2 项目2：利用AP元素布局网页
1. 操作步骤 利用AP元素布局网页的具体操作步骤如下： (1) 在【插入】面板的【布局】类别中，单击【绘制AP Div】按钮。在【文档】窗口的【设计】视图中，拖动以绘制 三个AP Div，属性设置见图11.11～图11.13。
第11章 AP元素和时间轴在网页中的应用 图11.22 【时间轴】面板
第11章 AP元素和时间轴在网页中的应用 图11.23 绘制AP元素视图
第11章 AP元素和时间轴在网页中的应用
(3) 在AP元素中插入如图11.24所示的图像。 (4) 使用鼠标选定AP元素，拖至【时间轴】面板中，在时 间轴的第一个通道中出现一个动画条，如图11.25所示。 (5) 单击提示消息中的【确定】按钮，然后单击位于动画 条末端的关键帧标签。在页面上将层移至它在动画结束的位置。 这时将出现一条线，显示的即是动画的轨迹，如图11.26所示。
11.3 项目3：制作AP元素动画
1. 操作步骤 制作AP元素动画的具体操作步骤如下： (1) 选择【窗口】→【时间轴】，打开【时间轴】面板， 如图11.22所示。 (2) 在Adobe Dreamweraver CS3主窗口的【布局】类别中， 单击【绘制AP Div】按钮。在【文档】窗口的【设计】视图中， 拖动以绘制一个AP元素，如图11.23所示。
第11章 AP元素和时间轴在网页中的应用
(2) 其中， 表示AP元素是不可见的， 表示AP元素 是可见的。
7) 选择、移动和调整AP元素 选择、移动和调整AP元素的具体操作步骤如下： (1) 在【AP元素】面板中，单击该AP元素可选中AP元素。 (2) 在【设计】视图中，选中一个或多个AP元素，拖动选 定的AP元素的选择控点，如图11.9所示。
3) 为AP元素添加内容 创建AP Div后，只需将插入点放置于该AP Div中，然后就 可以像在页面中添加内容一样，将内容添加到AP Div中，如图 11.4所示。
第11章 AP元素和时间轴在网页中的应用 图11.4 【插入内容】视图
第11章 AP元素和时间轴在网页中的应用
4) 查看AP元素的属性 查看AP元素属性的具体操作如下： (1) 选择一个AP元素，在属性面板中可查看该AP元素的属 性，如图11.5所示。 (2) 其中，“CSS-P”元素是为选定的AP元素指定一个ID， 用于在“AP元素”面板和JavaScript代码中标识AP元素。此ID 只能用字母、数字和字符，不能使用空格、斜杠或句号等特殊 字符。
第11章 AP元素和时间轴在网页中的应用 图11.14 AP元素布局视图
第11章 AP元素和时间轴在网页中的应用 图11.15 【修改】菜单
1. 操作步骤 可以在“AP元素”面板中创建AP元素。 1) 创建AP元素 创建AP元素的具体操作步骤如下： (1) 在Adobe Dreamweaver CS3主窗口中，单击【布局】 类别中的【绘制AP Div】按钮，如图11.1所示。
第11章 AP元素和时间轴在网页中的应用 图11.1 【AP Div按钮】绘制窗口
第11章 AP元素和时间轴在网页中的应用 图11.29 播放时间变长视图
第11章 AP元素和时间轴在网页中的应用
(9) 若要实现曲线运动，需要添加关键帧。例如，将动画 条末端的关键帧标签拖放到第50帧，选择动画条的第30帧，然 后按住Ctrl键并单击动画条，即添加了一个关键帧，如图 11.30所示。
第11章 AP元素和时间轴在网页中的应用
第11章 AP元素和时间轴在网页中的应用
11.1 项目1：创建、操作和管理AP元素 11.2 项目2：利用AP元素布局网页 11.3 项目3：制作AP元素动画 11.4 项目4：控制时间轴动画 11.5 课堂综合训练 11.6 小结 习题
第11章 AP元素和时间轴在网页中的应用
5) 更改AP元素的堆叠顺序 更改AP元素堆叠顺序的具体操作如下： (1) 在Dreamweaver CS3中选择【窗口】→【AP元素】项， 打开【AP元素】面板，如图11.6所示。
第11章 AP元素和时间轴在网页中的应用 图11.6 【AP元素】面板
第11章 AP元素和时间轴在网页中的应用
(2) 将AP元素向上或向下拖动至所需的堆叠顺序，如图 11.7所示。
6) 显示和隐藏AP元素 显示和隐藏AP元素的具体操作如下： (1) 选择【窗口】→【AP元素】，打开【AP元素】面板。 在AP元素的眼形图标列内单击可以更改其可见性，如图11.8所 示。
第11章 AP元素和时间轴在网页中的应用 图11.7 改变AP元素堆叠顺序后的视图
第11章 AP元素和时间轴在网页中的应用 图11.8 AP元素的可见性
第11章 AP元素和时间轴在网页中的应用 图11.31 曲线路径
第11章 AP元素和时间轴在网页中的应用
2. 相关知识点 时间轴面板； AP元素的移动效果； 关键帧的添加。 3. 知识拓展：利用时间轴和AP元素实现滚动字幕效果 利用时间轴和AP元素实现滚动字幕效果的具体操作如下： (1) 在【插入】面板的【布局】类别中，单击【绘制AP Div】按钮。在【文档】窗口的【设计】视图中拖动鼠标以绘 制一个AP元素，在AP元素中添加文字内容，如图11.32所示。
(10) 单击此关键帧，拖动AP元素在页面中的位置，形成 曲线路径，如图11.31所示。
(11) 可依此方法继续添加关键帧，并改变AP元素在页面 中的位置，形成更加丰富的曲线路径。按F12键预览页面，可 以看到图像沿着曲线移动的效果。
第11章 AP元素和时间轴在网页中的应用 图11.30 添加关键帧视图
第11章 AP元素和时间轴在网页中的应用
2. 相关知识点 AP元素的属性设置； 将AP元素转换为表格。 3. 知识拓展：将表格布局转换为AP Div布局 将表格布局转换为AP Div布局的具体操作步骤如下： (1) 在Adobe Dreamweaver CS3主窗口的【布局】类别中， 单击【表格】按钮。在【文档】窗口的【设计】视图中，绘制 两个表格，如图11.18所示。
第11章 AP元素和时间轴在网页中的应用 图11.24 插入图像视图
第11章 AP元素和时间轴在网页中的应用 图11.25 将AP元素拖至【时间轴】面板
第11章 AP元素和时间轴在网页中的应用 图11.26 动画轨迹设置
第11章 AP元素和时间轴在网页中的应用
(6) 若要使时间轴在浏览器打开时自动播放，单击【时间 轴】面板中的【自动播放】按钮，然后单击提示消息中的【确 定】按钮，如图11.27所示。
第11章 AP元素和时间轴在网页中的应用 图11.5 AP元素【属性】面板
第11章 AP元素和时间轴在网页中的应用
(3) “左”和“上”是指定AP元素的左上角，相当于页面 左上角的位置；“宽”和“高”指定AP元素的宽度和高度； “Z轴”确定AP元素的堆叠顺序；“溢出”是当AP元素的内容 超过AP元素的指定大小时，如何在浏览器中显示AP元素。
(4) 选择动画条的第20帧，然后按住Ctrl键并单击动画条， 从而添加了一个关键帧，单击此关键帧，拖动AP元素在页面中 的位置，如图11.35所示。
(5) 选择动画条的第40帧，然后按住Ctrl键并单击动画条， 从而添加了一个关键帧。单击此关键帧，拖动AP元素在页面中 的位置，如图11.36所示。
第11章 AP元素和时间轴在网页中的应用
(2) 之后，在【文档】窗口的【设计】视图中，拖动光标 以绘制一个AP Div，如图11.2所示。
2) 查看AP元素的首选参数 查看AP元素首选参数的具体步骤如下： (1) 选择【编辑】→【首选参数】，从左侧的【分类】列 表中选择AP元素并指定以下首选参数，然后单击【确定】按钮， 如图11.3所示。
第11章 AP元素和时间轴在网页中的应用 图11.2 【绘制AP Div】视图
第11章 AP元素和时间轴在网页中的应用 图11.3 AP元素首选参数
第11章 AP元素和时间轴在网页中的应用
【显示】：确定AP元素在默认情况下是否可见，其选 项为“default”、“继承”、“可见”和“隐藏”。
【宽】和【高】：指定使用【插入】→【布局对象】 →【AP Div】创建的AP元素的默认宽度和高度(以像素为单位)。
第11章 AP元素和时间轴在网页中的应用 图11.32 插入AP元素和文字视图
第11章 AP元素和时间轴在网页中的应用
(2) 选择【窗口】→【时间轴】，打开【时间轴】面板， 使用鼠标选定AP元素，拖至【时间轴】面板中，在时间轴的第 一个通道中出现一个动画条，再将动画条末端的关键帧标签拖 放到第50帧，如图11.33所示。
第11章 AP元素和时间轴在网页中的应用 图11.18 【表格布局】视图
第11章 AP元素和时间轴在网页中的应用
(2) 选择【修改】→【转换】，单击【将表格转换为AP Div】命令，如图11.19所示。
(3) 弹出【将表格转换为AP Div】对话框，如图11.20所 示。
(4) 转换后的效果如图11.21所示。
第11章 AP元素和时间轴在网页中的应用 图11.11 apDiv1属性
第11章 AP元素和时间轴在网页中的应用 图11.12 apDiv2属性
第11章 AP元素和时间轴在网页中的应用 图11.13 apDiv3属性
第11章 AP元素和时间轴在网Байду номын сангаас中的应用
(2) 三个AP元素的布局如图11.14所示。 (3) 在标题栏中选择【修改】→【转换】项，单击【将AP Div转换为表格】命令，如图11.15所示。 (4) 弹出【将AP Div转换为表格】对话框，如图11.16所 示。 (5) 转换后的效果如图11.17所示。
2. 相关知识点 AP元素的创建； AP元素的首选参数； AP元素的面板、Z轴和可见性； AP元素的属性设置。
第11章 AP元素和时间轴在网页中的应用
11.2 项目2：利用AP元素布局网页
1. 操作步骤 利用AP元素布局网页的具体操作步骤如下： (1) 在【插入】面板的【布局】类别中，单击【绘制AP Div】按钮。在【文档】窗口的【设计】视图中，拖动以绘制 三个AP Div，属性设置见图11.11～图11.13。
第11章 AP元素和时间轴在网页中的应用 图11.22 【时间轴】面板
第11章 AP元素和时间轴在网页中的应用 图11.23 绘制AP元素视图
第11章 AP元素和时间轴在网页中的应用
(3) 在AP元素中插入如图11.24所示的图像。 (4) 使用鼠标选定AP元素，拖至【时间轴】面板中，在时 间轴的第一个通道中出现一个动画条，如图11.25所示。 (5) 单击提示消息中的【确定】按钮，然后单击位于动画 条末端的关键帧标签。在页面上将层移至它在动画结束的位置。 这时将出现一条线，显示的即是动画的轨迹，如图11.26所示。
11.3 项目3：制作AP元素动画
1. 操作步骤 制作AP元素动画的具体操作步骤如下： (1) 选择【窗口】→【时间轴】，打开【时间轴】面板， 如图11.22所示。 (2) 在Adobe Dreamweraver CS3主窗口的【布局】类别中， 单击【绘制AP Div】按钮。在【文档】窗口的【设计】视图中， 拖动以绘制一个AP元素，如图11.23所示。
第11章 AP元素和时间轴在网页中的应用
(2) 其中， 表示AP元素是不可见的， 表示AP元素 是可见的。
7) 选择、移动和调整AP元素 选择、移动和调整AP元素的具体操作步骤如下： (1) 在【AP元素】面板中，单击该AP元素可选中AP元素。 (2) 在【设计】视图中，选中一个或多个AP元素，拖动选 定的AP元素的选择控点，如图11.9所示。
3) 为AP元素添加内容 创建AP Div后，只需将插入点放置于该AP Div中，然后就 可以像在页面中添加内容一样，将内容添加到AP Div中，如图 11.4所示。
第11章 AP元素和时间轴在网页中的应用 图11.4 【插入内容】视图
第11章 AP元素和时间轴在网页中的应用
4) 查看AP元素的属性 查看AP元素属性的具体操作如下： (1) 选择一个AP元素，在属性面板中可查看该AP元素的属 性，如图11.5所示。 (2) 其中，“CSS-P”元素是为选定的AP元素指定一个ID， 用于在“AP元素”面板和JavaScript代码中标识AP元素。此ID 只能用字母、数字和字符，不能使用空格、斜杠或句号等特殊 字符。
第11章 AP元素和时间轴在网页中的应用 图11.14 AP元素布局视图
第11章 AP元素和时间轴在网页中的应用 图11.15 【修改】菜单