中小学教育资源及组卷应用平台
粤教版B信息技术九年级上册教学设计
课题
第三节
制作网站页面
单元
第二单元
学科
信息技术
年级
九
学习目标
1知识目标:(1）了解网页一般由哪些元素组成。(2）学会运用表格进行版面布局。(3）能够在网页中添加网页元素。(4）能在网页中设置超链接。2技能目标:(1）通过制作网站首页，掌握版面布局、添加网页元素和设置超链接的基本技术方法，达到举一反三的功效。(2）通过学生动手设计网页的实践活动，使学生掌握对象属性的设置方法，为学生今后学习其他软件奠定基础。3.情感态度与价值观(1)提高视觉素养，能根据网页主题确定恰当的网页风格并具有初步的创意。(2）通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，提高学生学习信息技术的信心。(3）在合作实践过程中，培养学生的审美能力和创造能力，在小组协作学习中，培养学生合作帮助、团结协作的良好品质。(4）培养学生大胆构思、自我创新的精神，培养学生的美感及创作后的成就感。(5）善于和老师、同伴一起分析讨论，在分析、探讨中学会欣赏，学会评价。
重点
(1）能用表格规划版面布局的方法与技巧。(2）恰当选取网页元素与设置。
难点
(1）掌握超链接技术设置网站导航功能的方法。(2）掌握设置网页属性的一般方法。
教学过程
教学环节
教师活动
学生活动
设计意图
导入新课
站点建好了，版面布局、色彩方案等也设计好了，建立网站的前期准备工作做好了，李鸣的小组开始制作页面了。“首页、栏目首页、内容页面的设计制作各有什么特点?”张琳首先提出。王纯马上响应:“首页是网站的‘脸面’，肯定要设计得新颖有特色，才能吸引人继续关注网站。”那其他的页面呢?还有，网页中有哪些元素是所有页面都必备的呢?
学生思考回答
从情境导入，激发学生学习的兴趣，引出问题思考。
讲授新课
上节课已经搜集了素材，这节课咱们来动手制作网站的首页。指导学生使用FrontPage打开范例“班级网站”的首页，让学生进行小组交流，回答以下几个问题:1、你知道有哪些软件可以用来制作网页吗?2、该网页包含了很多元素，它们是如何整齐有序地分布在网页中的?用什么可以分割网页的版面布局呢?3、该首页包含了哪些元素?是否能很好地表达主题思想?结合小组收集到的素材，你认为在自己的网站首页中可以添加哪些网页元素?4、导航栏是网站的“地图”，没有它，浏览者就会“迷路”。选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么?
观察思考、探究、小组合作交流，回答教师提出的几个问题，并确立自己将要开展的工作。
通过对比，学生能够很快感受到我们本学期这个软件的实用性。
自主学习
1、用表格进行版面布局(1）提问学生都为他们的主页准备了哪些内容和素材（如文本、图片、动画、音频、视频）?(2）引导学生阅读教材，然后动手实践。指出学生易出错或难于处理的问题及学生可能遇到的问题。2、添加网页元素师:(1）要求学生把事先准备好的各种网页元素（如文本、图片、动画、音频、视频）添加到主页，也可使用教师机的共享资源库的素材。(2）把学生用到的技能要点发到学习网站上。3、设置超链接师:（1）如何通过超链接技术实现网站的导航功能?(2）再次提出导航栏是网站的“地图”，没有它，浏览者就会“迷路”。选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么?(3）你发现哪些地方需要设墨超链接吗?试对它们进行设器。(4）如何检查各个链接目标是否设置正确?生:动手尝试，通过自主探究、小组合作交流，回答老师的问题。
(1）学生回答老师的问题。(2）上网学习相关的技能技巧。(3）小组合作自主探究，教师引导，并安排操作熟练的学生进行演示(1）认真观看教师演示，归纳总结交流自己动手动实践过程中存在的问题和不足、成功的心得体会及改进思路等。(2）互相找出易出错或难于处理的问题及学生可能遇到的问题，合作探究解决的办法。
过小组交流学习，培养学生自助、协作学习的能力，激发学生探究创新的学习精神。
课堂小结
(1）教师引导学生进行总结，针对本节课的重点知识进行提问，了解学生对相关知识的掌握。(2）学生相互欣赏作品，推荐优秀作品在全班进行展示。
师生共同小结，得出结论，培养学生提炼知识的能力
板书
制作网站页面一、常见网页元素二、用表格进行版面布局
三、添加网页元素1.插入文字2.插入图片3.添加Flash动画和滚动字幕四、设置超链接五、发布网站
21世纪教育网
www.21cnjy.com
精品试卷·第
2
页
（共
2
页）
HYPERLINK
"http://www.21cnjy.com/"
21世纪教育网(www.21cnjy.com)(共22张PPT)
信
技
息
术
九年级
上
第二章
动手创建自己的网站
第三节
制作网站页面
（粤教版B版）
新知导入
想
想
一
站点建好了，版面布局、色彩方案等也设计好了，建立网站的前期准备工作做好了，李鸣的小组开始制作页面了。“首页、栏目首页、内容页面的设计制作各有什么特点?”
思
考
新知导入
标
学
目
习
（2）如何用表格进行版面布局
（1）常见的网页元素有哪些
（3）制作网页的一般步骤是什么
新知讲解
首页
栏目首页
一、常见网页元素
内容页
标题区
突出网站的主题和导航条
一、常见网页元素
新知讲解
标题区
主要内容区
放置各种网页元素，可根据内容的设计划分不同的板块;
一、常见网页元素
新知讲解
主要内容区
页尾区
一般提供网站的版权信息和制作团体的联系方式
一、常见网页元素
新知讲解
页尾区
新知讲解
计算机
服务器
网页制作中使用表格划分版面，确定各种网页元素的版面位置。再把不同层的表格框线设置为不同的颜色，得到如图所示的表格布局结构。不难看出，我们可以通过多层嵌套的表格进行版面划分。
二、用表格进行版面布局
新知讲解
计算机
服务器
(1)
在网页编辑区插入最外层的4行1列表格，单击鼠标右键，打开“表格属性”窗口(如图所示)，设定表格宽度为760像素。
(2)从外到内分割版面，插入各层表格，再根据需要设定表格的高度和宽度。
二、用表格进行版面布局
构建方法如下：
新知讲解
三、添加网页元素
版面区域划分好以后，就可以在相应区域填充内容，如添加文字图片、动画等网页元素。
插入文字
英语单词
英文缩写
可以采用输入，或复制、粘贴从已有素材中提取文字的方法，来完成输入文字。字体设置成默认值是为了使所有的浏览环境都能够看到网页效果。同一级别的文字(如标题、正文等)的大小、颜色等一般保持致。标题文字可以做成图片格式，并以图片形式插入。
新知讲解
三、添加网页元素
在
“单元格属性”窗口，进行如图所示的设置。
插入图片
③设置单元格大小
②从浏览窗口中选图
①勾选
新知讲解
三、添加网页元素
首页中看到的动画和滚动字幕，使网页显得富于动感。这些动态元素的添加方法与我们已学过的Powerpoint等软件的使用方法类似。
添加Flash动画和滚动字幕
新知讲解
四、设置超链接
栏目链接
单击常用工具栏上的超链接按钮，打开如图2一11所示窗口，选择对应的目标网页，如“bjxc.htm”
然后按“确定”，就可以完成一个超链接的设置。其他栏目的设定方法相同。
设置超链接
先拖动鼠标选定导航栏中的栏目文字，如“班级相册”
新知讲解
四、设置超链接
班级邮箱链接
先选中文字“联系我们”
打开“编辑超链接”对话框，填入邮箱地址后按“确定”。
新知讲解
分
析
观
察
超链接可以建立在文字、图片或图片的某个局部位置上，实现了网页的跳转，形成了精彩的网络世界。
知识拓展
网站中的网页制作完成后，要让更多的人能够访问，就得将网站发布出去。
四、设置超链接
五、发布网站
在发布之前，首先要对网站进行测试，检查网站的内容、超链接等，以保证网页信息的正常显示。在成功发布之后，还要进行维护和管理，才能使网站更有生命力。
知识拓展
发布网站
内容检查
运行测试
发布站点
站点维护
课堂练习
做
做
一
1.网页其版面可划分为（
）、（
）、（
）三大区域。
2.
检査要添加到网页中的图片文件是否为（
）或（
）格式，如果不是则要进行格式转换。
3.超链接可以建立在（
）、（
）或图片的某个局部位置上，链接跳转的目标可以是另一个网页、另一个网站、同一网页内的其他地方、一个邮件地址个文件等。
标题区
图片
文字
gif
jpg
页尾区
主要内容区
课堂总结
第三节制作网站页面
一、常见网页元素
二、用表格进行版面布局
三、添加网页元素
1.插入文字
2.插入图片
3.添加Flash动画和滚动字幕
四、设置超链接
五、发布网站
总
结
板书设计
第三节制作网站页面
一、常见网页元素
二、用表格进行版面布局
三、添加网页元素
1.插入文字
2.插入图片
3.添加Flash动画和滚动字幕
四、设置超链接
五、发布网站
谢谢
21世纪教育网（www.21cnjy.com)
中小学教育资源网站
有大把高质量资料？一线教师？一线教研员？
欢迎加入21世纪教育网教师合作团队！！月薪过万不是梦！！
详情请看：
https://www.21cnjy.com/help/help_extract.php
