清华大学版信息技术八下 3.10 左右逢源——滚动、字幕与层的使用 课件 (共13张PPT)

左右逢源
——滚动、字幕与层的使用
任务导航
在浏览网页的时候，人们的视线很容易被一些动态的元素所吸引，例如自动更迭的图片、滚动的文字标题等，这些动态效果在Dreamweaver CS5中是很容易实现的。
本课，我们将在制作“校园内外”栏目网页时，利用“滚动字幕”实现网页标题文本的动态效果，在“集体活动”网页中运用层进行精确布局，完成后的“校园内外”页面效果如左图所示，“集体活动”页面如右图所示。
1.规划“校园内外”文件夹和制作导航栏
导航按钮的两种状态图像，可以使用Photoshop、Fireworks等软件进行制作，也可以使用AAAlogo工具及在线按钮制作工具完成。对于有Flash基础的同学，还可以使用Flash软件制作具有动态效果的swf格式的按钮。按钮的链接无须在Flash中预先设置，可以都留待插入到Dreamweaver制作网页时再进行设置。只有灵活地使用各种工具软件来准备出丰富的素材才能制作出真正精美的网页作品。
2.利用“滚动字幕”制作动态页面标题
步骤1：选择要成为滚动字幕的文本，如“校园内外”网页的标题“校园内外活动安全”。
步骤2：执行“插入”→“标签”命令，打开如图所示的“标签选择器”对话框，单击展开“HTML标签”，再单击“页面元素”，在右侧的标签项目列表中找到marquee，单击“插入”按钮，然后再单击“关闭”按钮。
步骤3：系统自动切换到“拆分”视图，在窗口的左半部分显示代码，右半部分显示页面的编辑状态。将光标放到标签内，执行“窗口”→“标签检查器”命令，打开“标签检查器”面板，为标签的各个属性设置参数，如图所示。
3.使用AP Div元素（层）布局网页
步骤1：执行“窗口”→“工作区布局”→“经典”命令，将Dreamweaver CS5切换到经典视图下。
步骤2：单击“布局”工具栏中的“绘制AP Div”工具，如图所示。
步骤3：打开jthd.html，在设计窗口中的合适位置拖动鼠标，创建出一个层，把我们需要的文本复制粘贴到这个层中，并在“属性检查器”中为这个层设置背景颜色，此时的编辑窗口和“属性检查器”如图所示，观察“属性检查器”中代表层位置的“左”、“上”、“宽”、“高”属性，所谓精确控制就是因为它引入了坐标的概念进行定位。
步骤4：继续在页面内绘制层，将文本和图像粘贴入适当的层中，其中注意动态图像jthd2.gif应单独放置到一个AP Div层，并添加标签，使它能够在层内进行图像滚动。
步骤5：在“属性检查器”中调整层的“Z轴”数值，数值大的层会显示在数值小的层上方，通过这个参数的调整就可以精确控制对象的层次关系。制作完成的页面效果如图所示。
4.测试网页
保存网页，在浏览器中测试网页效果。
知识着陆
1.制作具有动态效果的导航按钮，可以综合利用多种软件进行素材准备工作。制作时要注意图片的尺寸控制。
2.如果需要对网页文本或者图像添加动态效果，可以使用标签来制作，添加标签后，还需要在“标签检查器”面板中进行参数的设置，才能精确控制滚动元素的效果。
3.当多个元素（例如文字与图片）互相叠加时，可以通过“层”来精确布局；如果不希望采用“层”来制作，那么利用表格进行图文混排是一种比较好的方式，这两种方式都可以使元素“和谐共处”，而不至于发生“环绕”混乱的问题，相对来说，“层”的功能更加强大和灵活一些。
创作天地
为“校园内外”篇的4个栏目页面“体育健身”、“集体活动”、“校内实践”和“野外拓展”，创建相同的导航按钮，完成栏目间的跳转，并适当运用滚动字幕和滚动图像美化网页。
谢 谢

点击下载

同课章节目录

• 第1单元 初建网站
• 第1课 新手入门——网站欣赏与创建网页
• 第2课 轻松上路——规划网站及创建站点
• 第3课 开篇之作——基于表格的页面布局
• 第4课 星光闪烁——用Flash动画完善首页
• 第2单元 框架模板
• 第5课 统一风格——制作框架网页
• 第6课 事半功倍——制作网页模板
• 第3单元 编辑网页
• 第7课 驾轻就熟一应用模板创建网页
• 第8课 自由穿梭——利用锚记实现局部链接
• 第9课 按图索骥——制作热点超链接
• 第10课 左右逢源——滚动、字幕与层的使用
• 第11课 最佳搭档——应用CSS样式与层美化网页
• 第4单元 网页特效
• 第12课 一触即发——应用行为创建动态效果
• 第13课 影音视听——制作多媒体网页
• 第14课 锦上添花——用层制作网页特效
• 第15课 信息互动——制作表单网页
• 第16课 成果分享——网站的测试与发布

© 21世纪教育网