项目制作海洋观光动画要点.ppt

主讲： 网页设计与制作——Dreamweaver CS3 项目九 制作海洋观光动画 任务一 制作背景 任务二 制作动画 项目九： 制作海洋观光动画 网页设计与制作Dreamweaver CS3 任务一 小 结 任务二 实 训 任务一 制作背景 本任务首先使用AP Div布局页面中的海洋图及标题内容。通过本任务的学习，应该掌握的内容主要有： Dreamweaver CS3 网页设计与制作 项目九： 制作海洋观光动画 任务一 小 结 任务二 实 训 1.AP Div的概念 AP Div是一种能够随意定位的页面元素，如同浮动在页面里的透明AP Div，可以将AP Div放置在页面的任何位置。由于AP Div中可以放置包含文本、图像或多媒体对象等其他内容，很多网页设计者都会使用AP Div定位一些特殊的网页内容。 Dreamweaver CS3 网页设计与制作 项目九： 制作海洋观光动画 任务一 制作背景 任务一 小 结 任务二 实 训 2.创建AP Div的方法 （1）选择【插入记录】／【布局对象】／【AP Div】命令来创建一个AP Div。 （2）将【插入】／【布局】面板上的 绘制AP Div】按钮拖曳到文档窗口，松开鼠标后就在文档窗口中插入了一个AP Div。 （3）在【插入】／【布局】面板中单击 【绘制AP Div】按钮，在文档窗口中按住鼠标左键并拖曳，也可绘出一个自定义大小的AP Div。 （4）在【插入】／【布局】面板中单击 【绘制AP Div】按钮，然后按住Ctrl键不放，按住鼠标左键并拖曳可在文档窗口中连续绘制多个AP Div。 Dreamweaver CS3 网页设计与制作 项目九： 制作海洋观光动画 任务一 制作背景 任务一 小 结 任务二 实 训 3. 设置插入AP Div时的默认属性 选择【编辑】／【首选参数】命令，打开【首选参数】对话框，在其中的【分类】列表框中选择【AP元素】选项，根据需要对其中的参数进行设置。如果勾选【在AP Div中创建以后嵌套】复选框则指定从现有AP Div边界内绘制的AP Div是嵌套的。按住Alt键可在取消与选择该复选框之间转换 。 Dreamweaver CS3 网页设计与制作 项目九： 制作海洋观光动画 任务一 制作背景 任务一 小 结 任务二 实 训 4.认识【AP元素】面板 【AP元素】面板的主体部分分为3列。第1列为显示与隐藏栏，在 图标的下方，用于设置相应AP Div的显示和隐藏。第2列为ID名称栏，它与【属性】面板中【CSS-P元素】选项的作用是相同的。第3列为z轴栏，它与【属性】面板中的z轴选项是相同的。 Dreamweaver CS3 网页设计与制作 项目九： 制作海洋观光动画 任务一 制作背景 任务一 小 结 任务二 实 训 在【AP元素】面板中可以实现以下操作。 ? 双击AP Div的名称，可以对AP Div进行重命名。 ? 单击AP Div后面的数字可以修改AP Div的z轴顺序，数字大的将位于上层。 ? 勾选【防止重叠】复选框可以禁止AP Div重叠。 ? 在AP Div的名称前面有一个眼睛图标，单击眼睛图标可显示或隐藏AP Div。 ? 单击AP Div的名称可以选定该AP Div，按住Shift键不放，单击想选择的AP Div可以将多个AP Div选中。 ? 按住Ctrl键不放，将某一个AP Div拖动到另一个AP Div上，形成嵌套的AP Div。 Dreamweaver CS3 网页设计与制作 项目九： 制作海洋观光动画 任务一 制作背景 任务一 小 结 任务二 实 训 5.选定AP Div ? 在【AP元素】面板中单击AP Div的名称来选定该AP Div。 ? 单击文档中的 图标来选定AP Div。如果没有显示该图标，可以在【首选参数】对话框的【不可见元素】分类中勾选【AP元素的锚点】复选框。 ? 将光标置于AP Div内，然后在文档窗口底边标签条中选择“<div>”标签。 ? 单击AP Div的边框线。 ? 如果要选定两个以上的AP Div，只要按住Shift键，然后逐个单击AP Div手柄或? 在【AP元素】面板中逐个单击AP Div的名称即可。 Dreamweaver CS3 网页设计与制作 项目九： 制作海洋观光动画 任务一 制作背景 任务一 小 结 任务二 实 训 6.设置AP Div的属性 选定AP