网页设计教学案例
2020-03-03 21:01:12 来源：范文大全收藏下载本文
《网页设计》之站点的建立教学案例
新疆阜康市厦门实验小学成伟
一、教学目标
1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；
2、认识FRONTPAGE的界面；
3、掌握在主页中插入文字、图片、水平线；
4、掌握页面文件与图片的保存。
二、教学重点
1、能在指定位置建立只有一个网页的站点（难点）
2、能在页面中插入文字、图片、水平线
3、掌握页面文件与图片的保存（难点）
三、教学方法
在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。
四、教学过程 设计
教师活动：
1、引入课题：（激发兴趣，活跃气氛）
同学们喜不喜欢上网？经常上新浪、百度等，有没有同学知道新浪、百度称做什么？
（网站）
浏览新浪网站，浏览的第一个页面称为什么？
（主页）
问题1：网站是不是就是网页？用自己的语言描述一下网站的概念
（网站包含多个网页，通过超链接把不同的页面链接起来）
问题2：网页是不是就是主页？
(第一个页面称为主页,网站设计者可以确定哪一个是主页,主页的文件名一般为：index.htm,主页也是网页)
设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。
今天我们学习用Frontpage建立站点，制作一个主页。先来研究一下没有发布的网站,打开教师做的网站
问：同学们看到了什么？
（文件夹）
总结：
可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。
打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。
请学生浏览教师课件，了解学习任务
2、新建站点
FRONTPAGE的启动
问：与word比较，有什么不同？
（增加了视图区，编辑区有三个窗口）
总结：
视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面
普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式
预览窗口：浏览器中出现的效果，与PowerPoint中的“放映幻灯片”类似。
打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。任务1：学生根据导学课件，在d:\\建立自己站点(站点名字改为自己的名字，便于记忆)
请一位学生示范如何建立站点,教师总结
问：在文件夹列表中看到了什么？
（分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在images文件夹中）
3、编辑主页与保存主页
看效果图，请学生分析主页中的元素
总结：鲜明的主题，如：我的世界、开心乐园等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍根据导学软件，学生完成任务2：设计主页、保存主页与图片
4、总结反馈
请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存
总结：必须切换到“编辑”窗口下编辑
主页的保存中存在问题：
单击“文件”----“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中,便于站点的管理。
5、请学生继续完成自己的主页，有能力的同学完成提高篇
6、教师与学生共同评价总结
老师向学生展示自己的作品，与学生一起讨论评价。
请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。
学生活动：学生回答问题、学生观察网站的表现形式、浏览课件，并了解本节课的学习任务、学生观察FRONTPAGE界面与word的不同，学生观察教师演示不同编辑窗口的区别。学生上机操作，在指定位置建立自己站点、同桌互相帮助，并参考教师做的课件，利用网络环境下的课件自己探索学习，满足不同层次学生的需求、学生总结。
人人范文网 m.inrrp.com.cn 手机版