资源简介

网页制作
-------利用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@
新授内容：
十、网页保存：
教师演示，学生实践
提示：将图片保存在网页同一文件夹中的好处是：网
站文件夹移动时，不会出现找不到图片的现象。
小结：
学生作品演示，教师总结

展开更多......

收起↑