高中信息技术选修3课件-4.3.2 网页制作1-教科版(共16张PPT)

网页制作 --利用frontpage制作一张简单的网页 教学目标： 知识目标： 1.熟悉网页中的各种元素，初步了解网页制作过程； 2.了解网页视图中的三种工作模式的作用； 3.学会用文字、水平线、图片、表格及超链接制作简单网页。 技能目标：综合利用所学知识完成简单网页的制作； 情感目标：获得一定的审美观教育 。 　　　 学习重点：简单网页制作。 学习难点：HTML视图的作用。 教学过程： 一、启动frontpage2000： 二、复习提问 1、上节课的学习中，我们了解到FrontPage 2000共 有六种视图方式，是哪六种？ 网页、文件夹、报表、导航、超链接、任务 新授内容： 1、??网页视图中三种工作模式的作用 ①???? 普通： 在普通模式下，可以输入文字、插入图片等，对网页中各种元素进行直观编排。 ②???? HTML： HTML的含义是：Hypertext Markup Language (超文本标记语言)。 提问：记得HTTP这个英文缩写吗？它的含义是什么？ 超文本传输协议。 在这种模式下标注的就是真正描述网页结构的HTML代码。 ③???? 预览： FrontPage 2000具有“所见即所得”的功能，但某些效果还需在浏览器中才能看出，但不同的浏览器处理同样的HTML代码会有一些细微的差别。 二、在网页中输入文字： 新授内容： ①????在普通模式下，输入文字“绿色家园”，要求字体 为黑体，字号为36磅，颜色为绿色，对齐方式为水平居中 ② ??? 打开D:\素材\“绿色家园.txt”,采用“复制—粘贴” 的方式， 在网页中输入一段文字。要求文字颜色为褐 色，对齐方式为水平居中 ———我们共同的家园 您想让世界充满阳光吗？ 您想让自己的后代生活在净土中吗？ 从我做起，从现在做起，保护自然吧！ 因为保护自然就是珍惜生命。 让我们一起， 为美好的明天而奋斗， 相信我们的明天会更美好！ 新授内容： 三、在网页中插入水平线： ①????在标题文字下方，插入一条水平线，要求水平线属性： 宽度为600象素，高度3象素，颜色为灰色。 方法： 1）把光标定位在标题文字下方 2）单击『插入』—>『水平线』 3) 右击水平线，选择水平线属性 四、在网页中插入滚动字幕： 1、在水平线下方插入一条滚动字幕，要求： 文本：让地球更绿，让我们的家园更美好！ 延迟时间：60 表现方式：交替 文字颜色：红色 新授内容： 方法： 1）在水平线下方，单击『插入』?『组件』 ?字幕 2）在字幕属性中，按要求修改 新授内容： 五、在网页中插入图片： 要求：在正文中插入一张竹子的图片，图片来源为： D:\素材\竹子.gif 方法： 1)光标定位在文字中间，单击『插入』?『图片』?『来自文件』 2）对图片进行排版（看演示） 绝对定位 学生自由尝试 新授内容： 六、网页中背景的设置： 要求：要求网页的背景为一张背景图片，图片来源为： D:\素材\背景.jpg 方法： 1)右击页面?『网页属性』?『背景』?『背景图片』 提示：背景设置中如果图片背景与背景颜色同时设置， 那么显示的背景应该是什么？ 新授内容： 七、网页中背景音乐的设置： 要求：要求网页的背景为一张背景图片，图片来源为： D:\素材\GOLDYEAR.mid 方法： 1)右击页面?『网页属性』?『常规』 新授内容： 八、在网页中插入表格： 要求：要求在网页中插入一张表格，要求： 1）1行2列 2）表格的宽度为窗口的40% 3）水平对齐方式为居中 4）边框线不显示 5）在第一个单元格中输入“学校首页”，第二个单元格中输入“给我留言” 新授内容： 九、在网页中创建超链接： 教师演示，学生实践 http://www.dylzsc.net xxxxx@ 新授内容： 十、网页保存： 教师演示，学生实践 提示：将图片保存在网页同一文件夹中的好处是：网 站文件夹移动时，不会出现找不到图片的现象。 小结： 学生作品演示，教师总结 ... ...