第10课左右逢源-滚动字幕与层的使用.doc

《第10课左右逢源-滚动字幕与层的使用.doc》由会员分享，可在线阅读，更多相关《第10课左右逢源-滚动字幕与层的使用.doc（2页珍藏版）》请在三一办公上搜索。

1、第10课左右逢源-滚动字幕与层的使用（一）本课教学目标知识与技能： 1掌握综合运用多种软件制作导航栏的方法。 2. 学会使用marquee标签制作滚动字幕。3. 初步掌握使用层来进行布局。过程与方法：通过使用滚动字幕，标签属性的认识来设置网页的特效。情感态度与价值观：1.培养学生的自主学习能力和创新能力. 2.提高学生对处理信息，应用信息的能力。（二）教学重，难点重点：制作动态页面难点：会熟练的运用marquee标签属性。（三）教学课时 2课时（四）教学方法任务驱动，教授加演示（五）教学过程 1课堂引入分析 从本课开始制作网站的“校园内外”篇，共包含栏目介绍页面、“体育健身”、“集体活动”、“

2、校内实践”和“野外拓展”5个页面。 在标题部分，我们将会学习用滚动字幕来实现动态效果，同时为了更好的控制页面的布局，学习使用层来作为容器精确定位多种对象。教授新课：1.背景图像的更改拆分backgroundjpg”2.标题文本的设置通过CSS样式进行设置，目标规则：style1，字体：黑体，大小：24，颜色：#0000FF3.滚动字幕-活动字幕使用marquee标签制作滚动字幕 教材中已经详尽的介绍了marquee标签制作滚动字幕的方法，插入marquee标签后，要在“标签检查器”中设置好属性，那么不论是文字还是图像（包括多张）的滚动就不在话下了。 设置好属性后，注意观察代码视图，此时字幕部分

3、的代码如下图10.2所示，对照“标签检查器”中的属性和教材提供的属性列表，我们可以轻松看懂这些代码，它表示字幕将先向右再向左以两个方向滚来滚去，滚动速度是3，滚动停顿时间是1毫秒。标题文字应用的样式是ys02（关于样式的内容我们在下节课集中介绍）。图10.2 设置滚动字幕后的代码视图图10.3 设置图片滚动后的代码视图使用AP Div 元素布局网页 教材中我们使用“布局工具栏中”的“绘制AP Div”工具创建新的绝对定位层元素，另外还有一种比较常用的方法，是通过执行“插入” “布局对象” AP Div命令插入层。 （三）教学补充 插入日期、时间 我们经常在网页上看到最近一次修改网页的时间，这说

4、明网页是在不断更新的，从而吸引访问者再次光顾。Dreamweaver 提供了一个方便的日期对象，可以以多种格式插入当前日期。其具体操作步骤如下： （1）打开网页，将插入点设置在要插入时间的位置上。（2） 执行“插入” “日期”命令，打开如图10.4所示的“插入日期”对话框。（3） 在此对话框中，分别设置星期格式、日期格式和时间格式，并且注意要选中“储存时自动更新”复选框，这样才会不断更新时间、日期。 （4）切换到代码窗口，可以看出在body标签内，增加了一句代码，它的含义就是按照指定格式显示并更新当前系统日期和时间。（5）调整日期时间的文字显示格式 删除插入的“日期时间”：单击设计窗口中的日期时间显示部分，会发现整个区域一起被选中，而不是普通字符的闪烁插入点状态，此时直接单击键盘上的Delete删除即可，相应的代码窗口内容也会自动删除。