制作网站首页

《制作网站首页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、制作网站首页 一、创设情景、引入课题、明确任务 师：上节课我们已经规划了自己的网站，今天老师给大家带来了一个礼物，它是一个漂亮的网站，它就是“老师个人学校网站”，里面有许多关于同学们的内容，如：你们漂亮的生活相等，请同学们欣赏。 生：学生认真观看，自主互相讨论，畅谈想法及发表意见。 师：继网站筹划之后我们就要着手来进行网页的设计了，第一个要进行的当然是首页的制作。首页是网站的“脸面”，能不能吸引访问者的注意，它显得尤为重要，所以在设计制作首页时需要特别花心思。怎样设计一个好看的网页让网站第一时间抢占浏览者的眼球呢？再度打开网站的首页。 生：仔细观察该首页的特点

2、。并互相讨论，各抒已见。 师：上节课已经搜集了素材，这节课咱们来动手制作网站的首页。指导学生使用FrontPage打开范例“班级网站”的首页，让学生进行小组交流，回答以下几个问题： 1、你知道有哪些软件可以用来制作网页吗？ 2、该网页包含了很多元素，它们是如何整齐有序地分布在网页中的？用什么可以分割网页的版面布局呢？ 3、该首页包含了哪些元素？是否能很好地表达主题思想？结合小组收集到的素材，你认为在自己的网站首页中可以添加哪些网页元素？ 4、导航栏是网站的“地图”，没有它，浏览者就会“迷路”。选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看

3、看会出现什么？ 生：观察思考、探究、小组合作交流，回答教师提出的几个问题，并确立自己将要开展的工作。 师：其实很多文字处理软件都可以设计网页，如Word中，利用“另存为web页”就可以将文档保存为网页，有些图像处理软件如PhotoShop也可以制作网页，Windows“记事本”也可以制作网页等，不过FrontPage和Dreamweaver却是最方便的网页制作软件，因为它们不仅可以制作网页，而且能方便地设计和管理网站，很适合入门学习。 二、先学后教、任务驱动、自主学习 1、用表格进行版面布局 师：（1）提问学生都为他们的主页准备了哪些内容和素材（如文本、图片、

4、动画、音频、视频）？ （2）引导学生阅读教材，然后动手实践。 生：（1）学生回答老师的问题。 （2）上网学习相关的技能技巧。 （3）小组合作自主探究，教师引导，并安排操作熟练的学生进行演示。 师：（1）教师巡视课堂，做个别辅导。针对学生普遍存在的问题，教师做详细讲解。 （2）以前我们可以用表格来表示数据信息吗？表格还可以用来对网页版面实现分割吗？ （3）你打算怎样安排它们的具体位置才能使网页更加合理美观，方便访问者访问？ 3（4）让打开学生常去的网站，腾讯QQ网站，让学生观察并提问他们发现了什么，再逐一把表格中的各元素删除，使网页上只留下一个空表格结构。 （5

5、）提醒学生要在编辑窗口和预窗口之间切换观察，使表格结构调整得更加合理。 （6）如何才能让表格不显示在我们的网页中呢？ 生：思考回答问题，小组合作探究、交流，完成老师布置的任务。 师：（1）对比展示两张素材相同布局不同的网页。一个使用表格布局，但表格边框隐藏，其页面工整，文本、图片摆放对称，具有一定的规律；另一个不用表格布局则页面凌乱，图文混杂，摆放杂乱。 （2）教师简单演示。 A：添加表格；B：表格属性设置面板中的几个常用设置选项说明。 （3）指出学生易出错或难于处理的问题及学生可能遇到的问题。 生：（1）认真观看教师演示，归纳总结交流自己动手动实践过程中存在

6、的问题和不足、成功的心得体会及改进思路等。 （2）互相找出易出错或难于处理的问题及学生可能遇到的问题，合作探究解决的办法。 2、添加网页元素 师：（1）要求学生把事先准备好的各种网页元素（如文本、图片、动画、音频、视频）添加到主页，也可使用教师机的共享资源库的素材。 （2）把学生用到的技能要点发到学习网站上。 生：（1）小组合作交流，对之前收集到的素材进行选用，添加到网页中。 （2）上网学习相关的技能技巧。 （3）上网查找需补充的素材。 （4）学有余力的同学还可以尝试怎样让网页更加生动。如添加视频、背景音乐等。 师：（1）恰当地为学生提供方法，讲授经验心得。 

7、（2）解决学生提出的疑难问题。 （3）鼓励学生进行发现和尝试提高他们的动手能力。 （4）教师巡视课堂，做个别辅导。针对学生普遍存在的问题，教师做详细讲解。 师：（1）教师简单演示。 （2）指出学生易出错或难于处理的问题及学生可能遇到的问题。 生：认真观看教师演示，归纳总结交流自己动手动实践过程中存在的问题和不足、成功的心得体会及改进思路等。 3、设置超链接 师：（1）如何通过超链接技术实现网站的导航功能？ （2）再次提出导航栏是网站的“地图”，没有它，浏览者就会“迷路”。选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么？ （3）

8、你发现哪些地方需要设置超链接吗？试对它