内容正文:
第2课 设计网站首页 学案
本课学习目标:1、知识目标:认识网页的工作原理;了解网页编辑的一般过程。
2、技能目标:学会在网页中输入文字、插入图片和水平线;学会新建、预览和保存网页。[来源:学科网]
3、情感、态度与价值观目标:善于从身边的广告、书刊中学习版面设计知识,并学以致用。
教学方法:自学法、演示法、观察法、实践法、小组合作。[来源:Z_xx_k.Com]
教学重点:在网页中插入文字、图片、水平线及网页的保存、预览。
教学难点:在网页中插入文字、图片和水平线。
学习时间:1课时。
学习过程:[来源:Z.xx.k.Com]
引入课题:展示一个包含有文字、图片和水平线的网页,并通过对这三部分的介绍激发学生的学习欲望。
学习与探究:
一、在网页中输入文字
小组合作并操作:根据前面所学知识,即在WORD中输入文字的操作,在“D:\情感小屋”站点中,双击打开主页文件“index.htm”,对照小宇在上节课中设计的首页效果图,在编辑窗口输入相应文字,并按照图例对这些文字进行修改字体、字号、颜色、对齐方式等操作。[来源:学,科,网Z,X,X,K]
二、在网页中插入图片
教师演示:“插入”---“图片”---“来自文件”
学生操作:在“Banner位置”处插入存放在“D:\素材”中的Banner图片,并对所插入的图片进行大小调整。
注:为便于上传,网页中图片一般采用容量较小的格式,如JPEG、GIF、PNG等。
三、在网页中插入水平线
学生阅读相关内容,试着自己在网页中的标题与正文之间插入一条水平线,并设置“水平线属性”。(教师巡回指导)
四、保存网页
同WORD操作相似,并尝试用不同的方法保存index.htm,考虑哪种方式更方便?
试一试:将刚刚插入到网页中的图片指定保存位置为:本站点的“images”文件夹。
五、预览网页
方法一:利用FrontPage自带的预览功能;方法二:通过浏览器预览。[来源:Zxxk.Com]
练一练:按照上面介绍的两种方法预览自己的网页,分析它们各有什么优缺点?
六、添加新网页
“文件”---“新建”---“网页”
七、实践与创新:
1、根据第1课的规划,参照小宇设计的“我的父母”所示的界面,设计制作网页“我的父母”,其文件名为:Parents.htm,标题为“我的父母”。
2、对新建的网页进行预览,并改变预览窗口的大小,你会发现什么现