网页制作教案文档格式.docx
- 文档编号:19764803
- 上传时间:2023-01-09
- 格式:DOCX
- 页数:10
- 大小:20.16KB
网页制作教案文档格式.docx
《网页制作教案文档格式.docx》由会员分享,可在线阅读,更多相关《网页制作教案文档格式.docx(10页珍藏版)》请在冰豆网上搜索。
网页就是把用文字、图形、声音、影视等多种媒体形式表达的信息,以及分布在因特网上的相关信息,相互链接起来而构成的一种信息表达方式。
学习与探究:
一、他山之石,可以攻玉
通过对“中国少年雏鹰网”与“网易”首页的比较,谈谈自己的感受,并说出它们之间有什么差异?
二、网站规划的一般步骤
小组合作:
阅读本部分内容,总结网站规划的一般步骤?
常见的网页版面布局形式有哪些?
步骤:
1、确定网站的主题和风格;
2、设计规划网站的结构和内容;
3、设计网站的版面布局;
(“T”型、“口”型、时尚型、“三”型布局)
4、搜集整理网站素材;
5、选择网站制作工具(frontpage2003)。
三、Frontpage2003的站点管理
1、?
初识Frontpage
根据打开程序的一般方法,自己试着打开Frontpage。
并思考有没有其它的打开方法。
2、?
新建站点
教师演示:
“文件”---“新建”---“站点”,打开“新建”对话框。
学生操作:
(1)指定新站点的位置为“F:
\诗文荟萃”,并选择站点类型为“只有一个网页的站点”。
(2)观察界面发生了什么变化?
在“文件夹列表”中自动生成了哪几个文件或文件夹?
它们有什么作用?
3、?
打开站点
“文件”---“打开站点”。
四、实践与创新:
访问以下网站,描述它们各自的主题和风格,并画出网站的结构图和主页的布局图。
搜集整理关于赞美父母的诗句、文章、图片或歌曲,分组合作设计“我的父母”网页。
(包括页面结构、内容、版面布局、网页的风格和内容,通过表格的形式记录下来)
五、小结:
网站规划的一般步骤、Frontpage的站点管理
六、教学反思:
第2课设计网站首页
认识网页的工作原理;
了解网页编辑的一般过程。
学会在网页中输入文字、插入图片和水平线;
学会新建、预览和保存网页。
善于从身边的广告、书刊中学习版面设计知识,并学以致用。
在网页中插入文字、图片、水平线及网页的保存、预览。
在网页中插入文字、图片和水平线。
展示一个包含有文字、图片和水平线的网页,并通过对这三部分的介绍激发学生的学习欲望。
一、在网页中输入文字
小组合作并操作:
根据前面所学知识,即在WORD中输入文字的操作,在“F:
\诗文荟萃”站点中,双击打开主页文件“”,对照小宇在上节课中设计的首页效果图,在编辑窗口输入相应文字,并按照图例对这些文字进行修改字体、字号、颜色、对齐方式等操作。
二、在网页中插入图片
“插入”---“图片”---“来自文件”
在“Banner位置”处插入存放在“F:
\素材”中的Banner图片,并对所插入的图片进行大小调整。
注:
为便于上传,网页中图片一般采用容量较小的格式,如JPEG、GIF、PNG等。
三、在网页中插入水平线
学生阅读相关内容,试着自己在网页中的标题与正文之间插入一条水平线,并设置“水平线属性”。
(教师巡回指导)
四、保存网页
同WORD操作相似,并尝试用不同的方法保存,考虑哪种方式更方便?
试一试:
将刚刚插入到网页中的图片指定保存位置为:
本站点的“images”文件夹。
五、预览网页
方法一:
利用FrontPage自带的预览功能;
方法二:
通过浏览器预览。
练一练:
按照上面介绍的两种方法预览自己的网页,分析它们各有什么优缺点?
六、添加新网页
“文件”---“新建”---“网页”
七、实践与创新:
1、根据第1课的规划,参照小宇设计的“我的父母”所示的界面,设计制作网页“我的父母”,其文件名为:
,标题为“我的父母”。
2、对新建的网页进行预览,并改变预览窗口的大小,你会发现什么现象?
有什么办法可以解决这个问题?
八、小结:
在网页中插入文字、图片、水平线及网页的保存、预览,添加新网页。
九、课后反思:
第3课网页中的表格
理解表格在网页设计中的重要作用。
学会使用表格布局网页;
灵活掌握表格调整的方法。
了解学校概貌,发现校园之美;
养成良好的生活和学习习惯。
在网页中插入表格及表格的调整。
通过对“某校园鸟瞰图”与下载的“中学生作文网”的首页作比较,引导学生发现网页中表格的运用。
一、表格的作用
阅读本部分内容,思考:
在网页中使用表格有何作用?
表格可使网页中的文字、图片、动画等素材排列整齐有序,并且不会因浏览窗口大小的改变而改变排列方式。
二、在网页中插入表格
阅读相关内容,试着在站点“诗文荟萃”中打开首页文件,分别插入四个表格,依次为:
2*3、2*2、1*4和2*1,宽度都为780像素,水平居中。
三、表格的调整
行高和列宽的调整
手动操作方法二:
通过单元格属性或表格属性调整
单元格的合并和拆分
(1)选中想要合并或拆分的单元格;
(2)单击鼠标右键,在快捷菜单中选择“合并单元格”或“拆分单元格”。
插入或删除表格中的行或列
(1)选择相应的行或列;
(2)单击鼠标右键,在快捷菜单中进行相应选择。
4、?
平均分布行和列
(1)选择需要平均分布的行或列;
参照“诗文荟萃”网站首页布局的内容,调整前面插入的表格,并将在第1课中输入的内容移到表格内。
预览网页,测试调整效果。
四、设计网页模板
教师操作:
“文件”---“另存为”---选择“Frontpage模板(*.tem)”,并命名模板文件名(如:
“诗文荟萃”)
将网站首页文件存储为网页模板,命名为“我的模板”,然后以利用模板的方式新建一个网页。
五、实践与创新:
运用表格重新设计的网页布局,预览时改变浏览器窗口的大小,观察网页的布局是否会发生变化?
这说明表格对于网页内容还能起到什么作用?
六、小结:
在网页中插入表格、表格的调整和网页模板的设计。
七、课后反思:
第4课网页的美化
了解美化网页的常用方法,理解美化网页对提高网站质量的作用。
学会在网页中设置背景、音乐、FLASH动画和滚动字幕。
提高审美意识,善于发现美,美化生活从自身做起。
在网页中设置背景、音乐、FLASH动画和滚动字幕。
前面我们学习了网页制作中最基本的文字、图片、水平线的插入,并且还知道了怎样使用表格使网页中的内容排列的更整齐,层次更分明。
这里同学们再考虑你更喜欢什么样的网页?
一、设置网页的背景
学生活动:
阅读课文第一部分,并利用前面所学内容,给自己的网页加上一个背景,使页面更加美观,更能衬托网页的主题。
打开“诗文荟萃”站点,并打开主页文件,在“网页属性”对话框“颜色”栏中设置文本和背景的颜色,并进行预览。
二、设置表格的背景
比较:
观察两幅电视背景墙效果图,比较多色彩背景墙和单色背景墙哪种让客厅更加充满活力?
通过比较,同学们知道了多色彩背景墙可以让房间显得更加生动活泼,在网页中我们也可以通过设置表格或单元格的背景来达到局部色彩的变化,使网页变得生动有活力。
方法:
将光标定位在某一单元格内,单击鼠标右键,在快捷菜单中选择“表格属性”或“单元格属性”分别进行设置。
在你的网页表格中,先后设置不同的背景颜色和背景图片,体验背景对网页的美化作用。
三、插入背景音乐
通过阅读课文,小组合作,在“诗文荟萃”站点中插入一个背景音乐。
教师总结:
在网页中单击右键,选择“网页属性”命令,在对话框中进行设置。
四、插入Flash动画
步骤:
“插入”----“高级”----“插件”,在“插件属性”对话框中进行设置。
将光标定位在网页的适当位置,选择插入一个Flash动画文件。
反复修改对话框中各参数的值,体会不同参数值的不同效果。
五、插入滚动字幕
小组合作思考操作:
怎样可以让你网页中的文字或图片动起来,使它们更加醒目呢?
教师总结:
“插入”----“web组件”----“字幕”,在“字幕属性”对话框中进行设置。
将光标定位在输入标题的单元格内,按照上述步骤进行插入字幕的操作。
六、实践与创新:
运用本课所学知识,分别对以下三个网页进行美化。
文件名
要求
参考样图
设置网页和表格背景
第1课“网页版面布局示意图c”
添加滚动字幕“海内存知己,天涯若比邻”;
插入一个Flash动画;
设置纯文字单元格的背景色。
第1课“网页版面布局示意图d”
设置单元格背景;
设置背景音乐
第1课“网页版面布局示意图e”
一、本课小结:
设置网页背景、表格背景、插入背景音乐、Flash动画及滚动字幕。
课后反思:
第5课建立超链接
理解超链接的概念,理解导航栏在网页设计中的重要性。
学会在网页中插入超链接和导航栏;
掌握将链接指向站点内、站点外和电子邮箱的方法。
体会万物皆有联系,互相影响,或此消彼长,或相互促进。
。
设置超链接和网站导航栏。
任何事物都不是独立存在的,考虑你的周围有哪些事物存在着一定的联系?
如:
我与同桌是同学,我有老师,有父母……
一、设置超链接
阅读课文第一部分,小组讨论,完成以下问题:
设置超链接的目的是什么?
什么是超链接?
超链接有哪几种类型?
目的:
使网页之间形成一个紧密的整体,能够很容易地从一个网页到达另一个网页。
定义:
超链接是指从一个网页指向一个目标的连接关系。
类型:
站点内的链接、到其他网站的链接、到邮箱的链接、书签链接。
“插入”------“超链接”。
大显身手:
根据所阅读内容,在“诗文荟萃”站点中,建立不同类型的链接。
二、设置网站导航栏
阅读课文第二部分,考虑
1、为什么要设置网站导航栏?
2、什么是导航栏?
3、建立导航栏的方法有哪些?
三、实践与创新:
1、在你的成长过程中,有多少人为你付出了艰辛的努力?
回忆对你帮助较大的1-3人,然后通过书信、电子邮件、电话、QQ等通讯工具表达你的感激之情。
网页中的文字建立超链接后,会有什么变化?
你能改变超链接文字的默认颜色吗?
四、展示学生作品,查看链接是否正确。
五、小结
设置超链接、设置网站导航栏
六、课后反思:
第6课网站的发布与维护
理解网站空间的概念;
了解网站上传的原理。
掌握网站检查和宣传的方法;
学会申请免费的主页空间;
熟练使用网站上伟的工具。
正确认识自己,诚实地与他人交流,学会展示自己真实的一面。
自学法、演示法、观察法、实践法、小组合作交流法。
申请网站空间与上传网站。
如何让更多的人走进自己的“诗文荟萃”了解自己呢?
怎样才能使自己的网站发布出去?
一、网站发布前的检查
阅读课文第一部分,考虑:
网站发布前要做哪几项检查?
1、检查语法;
2.检查网站的整体情况;
3.?
检查超链接;
4.?
检查网页中嵌入式文件的存放路径。
打开自己的“诗文荟萃”网站,按照上述项目检查自己的网站是否完善。
二、申请网站空间
阅读课文第二部分,小组讨论,完成以下问题:
1、为什么要申请网站空间?
2、怎样申请一个免费的网站空间?
3、你知道的可以提供免费空间的网站有哪些?
原因:
要想把自己制作的网站发布到Internet上,就必须申请一个特定的地点和空间,用来存放整个网站的信息,这个空间我们通常称为网站空间或主页空间。
申请方法:
登录网站---单击申请免费空间的链接---阅读协议并接受协议内容---按要求填写表格后提交—网站发送注册信息到你的邮箱内。
常用免费提供空间的网站:
中联网、中华网个人主页、方舟网、中通互联、天禧网等。
登录一个可以提供免费空间的网站,申请自己的主页空间。
三、上传网站
阅读课文第三部分,小组合作交流:
1、要想将制作好的网站上传到已经申请的免费空间,常用的方式有哪几种?
2、开动脑筋:
根据你所学到的知识,把你的的网站上传至你申请的免费空间吧!
3、在浏览器中输入自己网站的网址,访问自己的主页。
四、网站的宣传
思考:
怎样才能让更多人来访问我们的网站?
自己尝试对我们的网站进行宣传?
1、网站登录
2、交换链接
3、论坛发帖
五、课堂小结:
网站发布前的检查—申请网站空间—上传网站—宣传网站
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 教案
![提示](https://static.bdocx.com/images/bang_tan.gif)