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

左右逢源——滚动、字幕与层的使用 1 任务导航 在浏览网页的时候，人们的视线很容易被一些动态的元素所吸引，例如自动更迭的图片、滚动的文字标题等，这些动态效果在Dreamweaver CS5中是很容易实现的。 本课，我们将在制作“校园内外”栏目网页时，利用“滚动字幕”实现网页标题文本的动态效果，在“集体活动”网页中运用层进行精确布局，完成后的“校园内外”页面效果如左图所示，“集体活动”页面如右图所示。 2 1.规划“校园内外”文件夹和制作导航栏 导航按钮的两种状态图像，可以使用Photoshop、Fireworks等软件进行制作，也可以使用AAAlogo工具及在线按钮制作工具完成。对于有Flash基础的同学，还可以使用Flash软件制作具有动态效果的swf格式的按钮。按钮的链接无须在Flash中预先设置，可以都留待插入到Dreamweaver制作网页时再进行设置。只有灵活地使用各种工具软件来准备出丰富的素材才能制作出真正精美的网页作品。 3 2.利用“滚动字幕”制作动态页面标题 步骤1：选择要成为滚动字幕的文本，如“校园内外”网页的标题“校园内外活动安全”。 步骤2：执行“插入”→“标签”命令，打开如图所示的“标签选择器”对话框，单击展开“HTML标签”，再单击“页面元素”，在右侧的标签项目列表中找到marquee，单击“插入”按钮，然后再单击“关闭”按钮。 4 步骤3：系统自动切换到“拆分”视图，在窗口的左半部分显示代码，右半部分显示页面的编辑状态。将光标放到<marquee>标签内，执行“窗口”→“标签检查器”命令，打开“标签检查器”面板，为<marquee>标签的各个属性设置参数，如图所示。 5 3.使用AP Div元素（层）布局网页 步骤1：执行“窗口”→“工作区布局”→“经典”命令，将Dreamweaver CS5切换到经典视图下。 步骤2：单击“布局”工具栏中的“绘制AP Div”工具，如图所示。 6 步骤3：打开jthd.html，在设计窗口中的合适位置拖动鼠标，创建出一个层，把我们需要的文本复制粘贴到这个层中，并在“属性检查器”中为这个层设置背景颜色，此时的编辑窗口和“属性检查器”如图所示，观察“属性检查器”中代表层位置的“左”、“上”、“宽”、“高”属性，所谓精确控制就是因为它