教科版选修3《制作动态网页》教案.docxVIP

必威体育精装版教科版选修 3《制作动态网页》教案 学习目标 1）了解动态网页的有关知识。 2）掌握 DHTML 的应用。 1.2.1 在 FrontPage 中插入横幅广告 操作步骤如下： 1）单击“开始”按钮 ,选择“程序” →“ Microsoft FrontPage ”,“ Microsoft FrontPage ”窗口,执行“文件” →“保存文件”命令 ,将新建文件保存为 guanggao.htm。 （2）在 FrontPage 中执行“插入” →“组件” →“横幅广告管理器”命令 ,打开“横幅广 告管理器属性”对话框 ,设置宽度为 200,高度为 100,过滤效果为“分解” ,每幅图片显示 3 秒 , 单击“添加”按钮 ,将所需要的图片添加到“显示图片”列表框中 ,单击“上移”、“下移” 按钮调整横幅广告图像变换的次序 ,单击“确定”按钮。 （3）保存后在浏览器中进行预览 ,每隔 3 秒钟变换一幅图片。 1.2.2 在 FrontPage 中应用动态 HTML 效果 FrontPage 中应用动态 HTML 效果 ,操作步骤如下： 1 ）单击“开始”按钮,选择“程序”→ “ Microsoft FrontPage ”。打开“ Microsoft FrontPage 窗”口 ,执行“文件” →“保存文件”命令 ,将新建文件保存为 dtsg.htm。 2）在 FrontPage 窗口中输入文本“助理电子商务师” ,然后选中文本执行“格式” → “动态 HTML 效果”命令 ,在出现的“ HTML 效果”工具栏中进行设置。 3）保存后在浏览器中进行预览。 1.2.3 插入字幕 1.2.4 建立及应用 CSS 样式文件 使用 FrontPage 建立名为 mystyle.css 的外部 CSS 样式文件 ,并在其他页面文件中应用此 1 / 5 样式文件。 1.创建 CSS 样式文件 操作步骤如下： （ 1 ） 单 击 “ 开 始 ” 按 钮 , 选 择 “ 程 序 ” → “ Microsoft FrontPage ”,打 开 “ Microsoft FrontPage 窗”口。 2）在 FrontPage 窗口中 ,选择“文件” →“新建” →“网页” ,在“新建”对话框中单击“样式表”选择卡 ,选择要创建的样式类型 ,然后单击“确定”按钮。 3）单击样式工具栏中的样式按钮,弹出“样式”对话框。 （ 4 ）单击“样式”对话框中的“新建”按钮 , 弹出“新样式”对话框 ,在“名称（选择 器）”中输入样式名称 ,单击“格式”按钮进行字体、段落、边框等设置 ,新建样式的设置。 5）单击“确定”按钮后 ,会在“样式”对话框的样式栏中显示用户自定义的样式。再单击“确定”按钮 ,完成样式文件的创建。 6）执行“文件” →“保存文件”命令 ,保存文件。 2.应用外部 CSS 样式 操作步骤如下： 1）新建页面文件并进行保存操作,输入文字内容“这是样式的应用”。 2）执行“格式” →“样式表链接”命令 ,在打开的“链接样式表”对话框中进行设置,选 择“所选的网页”选项 ,单击“添加”按钮选择所要链接的样式表文件,单击“确定”按钮。 3）选中文字 ,切换到 HTML 视图下 ,将body 区中的“ p这是样式的应用 /p ”HTML 语句修改为“ p class= “test这”是样式的应用 /p ”,保存文件后浏览效果。 大多数时候可以不为具体的HTML 标记符定义格式 ,而是定义一些开放的格式 ,在内容 需要的时候才引用这些格式。例如 ,在 mystyle.css 文件中定义了一个类样式 test,在 body 区 中的段落标记 p 中应用了这个类样式。 相关知识 （一） DHTML 1、 DHTML 的定义 又称动态网页 ,它将内容对象化 ,应用编程语言来操作页面上的对象 ,不必通过服务器就 可以与用户交互信息 ,更新页面的内容。动态见面技术包括 javascript 、 vbscript 、 css、 layer 等。 2 / 5 ２、 DHTML 的基本结构 DHTML 的基本结构包括 HTML 、 CSS、脚本程序、浏览器对象和网页对象等。 DHTML 是基于 HTML 语言 ,通过 CSS 技术扩展了 HTML 的样式定义语法和语义 ,用脚本 程序或控制浏览器对象和网页对象 ,从而使页面具有动态效果和交互功能。 （二） CSS 层叠样式表 CSS 是一种用于定义网页内容显示样式的技术。通过样式可以设定许多属性 ,如字号 ,颜 色,页边距等。 样式表的建立要符合 CSS 规则 ,它们一般被定义成以下形式的句法： HTML 标志 { 标志属性 : 属性值；标志属性 :属性值；标志属性