初二上学期第三章主题网站设计与制作.docx
- 文档编号:9497027
- 上传时间:2023-02-05
- 格式:DOCX
- 页数:26
- 大小:26.05KB
初二上学期第三章主题网站设计与制作.docx
《初二上学期第三章主题网站设计与制作.docx》由会员分享,可在线阅读,更多相关《初二上学期第三章主题网站设计与制作.docx(26页珍藏版)》请在冰豆网上搜索。
初二上学期第三章主题网站设计与制作
第三章主题网站设计与制作
第1节主题网站我设计
一、学习目标:
1、了解网站的作用;
2、掌握网站规划的方法;
二、学习方法:
探究学习、实践学习、小组合作
三、教学过程:
(一)、情景导入
随着计算机技术与网络技术的日益发展,人们已不再满足于在网上漫游和获取信息,很多人自己制作网页并在网上发布信息、交流信息。
(欣赏网站,思考网站的构成)
(二)、规划网站
1、确定主题,规划网站
1)通过讨论,思考网站建设要经历哪些阶段。
学生分组讨论,并说出自己的看法
师生总结:
整体规划、收集资料、制作、编辑调试和网站发布与维护等
2)通过讨论,思考优秀网站的特点是什么。
学生分组讨论,并说出自己的看法
师生总结:
主题明确、特色鲜明、内容丰富、图文并茂、动静结合等特点,给访问者以赏心悦目的感受。
3)规划网站:
结合教材P46,小组成员相互合作,尝试规划网站。
学生分组讨论,说说规划网站要考虑哪些因素
师生总结:
①明确网站建设的目的
②可行性分析
③网站的内容设计
④网站的表现形式设计
⑤学生自定主题,设计一个网站
4)探究学习:
结合教材,小组成员相互合作,尝试完成P46探究学习。
学生分组讨论,并完成P47表格
5)欣赏“动物——人类的朋友”网站,思考他的结构
学生分组讨论,并说出自己的看法
师生总结:
栏目名
网页文件名
主要内容
(三)、学生讨论学习,尝试规划一个网站
1、学生以小组为单位,相互合作。
2、教师巡回指导。
3、作品展示,点评。
(四)、总结
1、网站规划的阶段。
2、优秀网站的特点
3、规划网站需要思考的问题
四、教学反思:
第2节网站的制作(共6课时)
站点创建与首页制作第1课时
一、教学目标:
1.知识与技能:
(1)认识Dreamweaver窗口结构。
(2)了解站点与主页的概念,理解站点的意义,学会建立、删除站点。
(3)掌握新建简单网页的方法,能够在网页中插入文字并进行排版,掌握图片、水平线的插入方法及属性的设置方法,能够灵活应用“页面属性”对话框,设置页面属性,如背景颜色、背景图像等。
(4)掌握保存网页的方法,了解网页保存与普通文档保存的不同点。
2.过程与方法:
(1)通过对比,掌握软件的使用方法,达到举一反三的功效。
(2)通过动手设计网站的实践活动,掌握对象属性的设置方法,为今后学习其他软件奠定基础。
3.情感态度与价值观:
(1)通过对比,了解软件学习的一般方法及规律,提高学习信息技术的信心。
(2)通过创建网站和设计首页,掌握对象属性的设置方法,初步体验成功的快乐。
(3)通过创建“动物——人类的朋友”网站,树立人与动物和谐相处,真爱、善待和保护动物的观念。
二、教学重点:
(1)认识Dreamweaver窗口结构及主要菜单的功能。
(2)掌握建立、删除网站的基本方法。
(3)掌握简单网页设计的基本方法,如文字、图片以及水平线的插入与编辑等。
(4)掌握设置页面属性的一般方法。
三、教学难点:
(1)站点的作用和存储路径。
(2)网页的保存。
四、教学方法:
对比教学,探究信息,模仿学习。
五、教学过程:
教学过程
教师活动
学生活动
引入
以学生一进机房就上网、浏览网页为切入点,提问:
同学们非常喜欢上网,大家一般登录哪些网站呢?
以此提问网站、网页和首页
喜欢上网浏览别人制作的精美网站、获取丰富的信息,是否想过直接制作网页供别人去浏览呢
如今网页制作的软件有很多,如Dreamweaver、Frontpage、东方网页王等。
今天我们将学习如何使用Dreamweaver来制作网页
思考回答问题,明白以下几点:
1.网站包含多个网页,通过超链接可以把不同的页面链接起来
2.网站的第一个页面称为主页,主页的文件名一般微微index.htm或者default.htm,主页也是网页
新授
一、Dreamweaver启动与窗口的组成(启发与Flash软件对比)
1.启动:
两种方式
2.窗口组成:
菜单栏、工具栏、编辑区、属性窗口、面板组、文档面板(展示软件图)
3.编辑区的4种工作模式:
设计、拆分、代码和预览
二、站点的建立
由于网站中需要制作多个网页文件以及相关图片、声音文件等,所以网站建设初期就要做好管理的准备,我们以站点的形式来管理网站内部文件
任务1:
在D盘下建立一个站点,站点名为直接学号加姓名
指导学生对照教材学习(显示)
学生操作期间教师巡视课堂,做个别辅导
针对学生中普通存在的问题,教师可做详细讲解
对学生自学后完成情况做一简单评价与总结
深入一问;在网站中有图片、声音、动画等文件,如何有效管理
在学生回答后,教师分析并指出网站内通常还建立多个子文件夹,分类管理网站内的文件,如通常有images文件夹,存放网页中的图片等
三、设计首页
引导学生分析一般首页组成情况,提出课堂制作要求
任务1:
新建首页,要求首页中有如下对象
A.网站的标题与图片徽标
B.网站的宗旨(文字介绍)
C.水平线(起分隔作用)
D.链接到下一页的标记(可为文字,页可为图片)
其中A、B、D内容可以类比文字处理软件中对象的插入方法来进行
教师师范:
水平线插入方法
单击“插入→HTML→水平线”命令
四、编辑与浏览主页
提出具体编辑要求,引导学生利用“属性窗口”来设置相关对象的属性
任务2:
编辑主页
A.设置网站标题文字为36磅(7级)字
B.设置首页标题为:
“欢迎您来到……”
C.选择一张淡雅图片,将其设置为首页背景图片
D.设置水平线粗细为3像素
E.为首页加上背景音乐
五、教师启发学生观察
A.标题输入、字体、字号、颜色等设置方法——选定文字对象——属性窗口进行
B.网页背景图片设置——页面属性——外观
探究
●如果图片不在网站内,计算机将提示说明?
怎么操作
●如果背景颜色、背景图片同时使用,其网页外观效果如何
C.水平线颜色如何设置——标签编辑器(难点1)
D.教师指导下给背景添加音乐(难点2)
单击“插入→媒体→插件”命令
六、保存并浏览网页
打开软件,并结合教材仔细观察
明确教师要求后,阅读教材,开展对照着教材的自学
同学交流自学后操作情况,可安排学生进行演示
学生操作:
在网站内根据需要建立多个子文件夹
构思自己网站首页中各对象的布局,但必要的元素不得缺少
同学师范,讲解如何插入图像
学生模仿并完成
学生示范,讲解如何设置文字的属性
学生完成网页背景图片的设置,并探究学习
完成水平线属性设置
完成背景音乐添加
学生自行探究,按要求保存自己的网页,并预览
小结
引导学生进行总结
提问本节课的重点知识,反馈学生相关知识掌握情况
教师与学生共同评价
开展同学间的作业相互检查,推荐优秀的作品,展示给全班同学,表扬完成情况好的学生与帮助他人的同学
学生总结,并继续完成自己的主页,完成的同学做教师的小助手,辅导需要帮助的学生
六、教学反思:
表格布局网页第2课时
一、教学目标:
1.知识与技能:
(1)了解表格在网页设计中的作用。
(2)掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法,能够在单元格中正确插入文字和图片
(3)能够根据网页设计内容,正确设计表格的结构,掌握表格嵌套的设计方法。
2.过程与方法:
(1)利用对比学习,培养知识迁移的能力。
(2)通过用表格布局网页,进一步理解表格的作用、功能及网页设计方法的多样性,培养学生的发散思维能力。
(3)通过自主探究,掌握软件的使用规则,培养自主学习的能力。
3.情感态度与价值观
(1)通过对比学习体验软件学习的一般方法及规律,提高自主学习的能力。
(2)通过运用表格布局各种网页对象(各人根据网站主题设计网页),进一步掌握各种不同对象的属性设置方法和规律,体验创造的快乐。
(3)通过“动物——人类的朋友”网站的设计与制作,激发关爱动物、保护动物的责任感,从而进一步树立共同改善人类生存环境的意识。
二、教学重点:
(1)了解表格在网页布局中的重要作用。
(2)掌握插入、编辑表格的方法及表格的属性设置方法。
(3)掌握单元格的修饰与属性的设置。
三、教学难点:
表格的嵌套在网页布局中的应用。
四、教学方法:
对比教学、探究学习、模仿学习
五、教学过程:
教学过程
教师活动
学生活动
复习
以提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入
认真回顾,回答教师提问
导入
1.观看两个页面进行比较:
一个是页面工整,文本、图片摆放对称且具有一定规律,使用了表格布局,但表格边框隐藏(看不出表格痕迹);另一个是页面凌乱。
你更喜欢怎样的页面布局?
提出问题,有什么办法可以到达第一个页面的效果
2.观察第三个页面,内容同第一个页面,但显现第一个页面的表格边框
学生讨论,交流(学生可能会想很多复杂的方法)
幡然领悟:
原来是利用“WPS文字“程序中学习过的表格,从而明白表格在Dreamweaver中的作用
新授
一、分析表格结构
展示一些由表格布局的网页,引导学生分析其表格结构,自然过渡到教材例子(biaoge.htm),分析结构,得出表格的布局(几行几列,哪些行做了哪些处理)
任务一:
规划网页表格布局
分层次完成该任务,基础相对弱一些的同学,仅要求读懂教材上的网页表格布局,知道规则表格的行数与列数,如何再调整至最终样式;基础扎实、操作能力较强的同学要求跳出教材,自行设计表格网页布局,并将自己的表格设计绘制在教材上
建议:
使用多个非嵌套的表格来布局
二、完成表格布局
Dreamweaver中表格的操作和“WPS文字”软件中的表格操作类似,教师应着重引导学生进行知识迁移,对具体的操作方法,无需做过多讲解
任务二:
新建一个页面,用表格布局该网页,并在该网页总放入相应内容
A.打开站点,新建一网页,保存为:
“biaoge.htm”
B.按前面分析的要求插入一个表格
C.调整表格结构(主要是行列的插入、删除、单元格的合并、拆分、调整大小等)
三、充实网页页面内容
任务三:
在表格中插入图片、输入文字
建议:
插入图片对象前,对图片做一定处理,如选择风格统一的图片,调整图片大小至同一尺寸等
友情提醒:
图片的保存
四、调整表格属性,美化页面
预览制作的网页,修饰网页,让网页看起来更美观
任务四:
表格属性以及单元格属性的编辑
A.表格属性的调整:
去除网格线、设置表格背景色等
B.单元格属性的调整:
使用不同的颜色区分各板块
强调:
学会利用属性窗口设置表格、单元格属性
五、表格的嵌套
有时为了制作出更加美观的网页,我们可以使用表格的嵌套来实现
任务五:
加入横向目录导航条,尝试使用表格嵌套的方法解决问题
根据自己的实际情况选择任务难度,并动手分析与创意设计
请操作熟练的同学来演示规则表格的插入,联想“WPS文字”软件中的表格操作来演示网页制作中表格的基本编辑,如行列的插入、删除、单元格的合并、拆分、调整大小等,以达到调整表格结构的目的
认真操作(耗时较长)
在表格相应位置放入相应文字、图片等
根据自己的实际情况选择任务难度,可按教师具体要求修饰调整表格,也可根据自己的意图修饰调整表格(但表格边框的调整都需掌握)
学生动手制作网页
总结
本节课我们学习了在Dreamweaver中插入表格、编辑表格以及表格嵌套的基本方法。
请同学回答几个问题,并演示几个基本操作
展示用表格布局完成的优秀作品。
表扬完成任务的学生,对未完成任务的学生给予激励,鼓励他们利用课余时间继续完成
回答问题
1.表格在Dreamweaver中的作用:
定位对象
2.表格编辑的基本操作:
利用表格属性和表格菜单进行
六、教学反思:
网页中动态效果的制作第3课时
一、教学目标:
1.知识与技能:
(1)理解动态网页与网页动态效果的区别。
(2)掌握网页动态效果的制作。
(3)掌握“插入”菜单中“图像对象”和“媒体”的使用方法,给网页增添动态效果。
2.情感态度与价值观
通过自主学习网页动态效果的制作,激发在积极、主动的学习气氛中的学习兴趣以及培养探究意识和创新能力。
二、教学重点:
滚动字幕、交替显示图像等动态效果的制作与Flash动画的插入。
三、教学难点:
标签选择器的使用及各种效果对象的属性设置。
四、教学方法:
自主探究式学习、任务驱动式教学。
五、教学过程:
教学过程
教师活动
学生活动
引入
打开两张分别为静态与加有动态效果的网页,请学生比较它们给浏览者的不同感受
学生观察比较两张网页,指出它们的不同点
新授
任务一:
滚动字幕的制作
教师巡视,个别给予指导
学生完成任务后,学生展示作品,并演示操作,小结滚动字幕以及悬停按钮设置的关键点
滚动字幕
◆文本的大小、字体、颜色等
◆表现方式
◆运动方向
◆背景色的设置
任务二:
交替显示图像的制作
教师巡视,个别给予指导
学生展示作品,演示操作,小结制作交替显示图像的关键点
◆预处理需要交替显示的图像:
大小
◆单击“插入→图像对象※鼠标经过图像”命令
◆选择两个图像:
原始图像,鼠标经过图像,单击“确定”按钮
任务三:
网页中插入一个Flash动画
教师巡视,个别给予指导
学生展示作品,演示操作,小结插入Flash动画的关键点
◆Flash显示窗口的大小调整
◆预览模式下方可看到Flash动画的效果
◆插入Flash后网页的保存
学生参照教材内容自学滚动字幕的制作
观察同学的操作,并和自己的操作进行比较
学生参照教材内容自学交替显示图像的制作
观察同学的操作,并和自己的操作进行比较
学生参照教材内容自学Flash在网页中的插入方法
比较分析同学的作品,对照自己的作品,加以完善
小结
学习过程评价
展示学生的作品,师生给予评价,激发他们更大的主动性与积极性
归纳总结
学生对照“自我评价”表,进行过程性学习的评价
六、教学反思:
设计交互功能的网页第4课时
一、教学目标:
(1)了解交互网页的概念,了解表单的功能及表单元件的使用方法,了解网上信息调查的设计方法。
(2)掌握表单元件的功能及使用方法,掌握表单各元件属性的设置方法。
(3)在运用、学习、制作的过程中感受表单给网页带来的交互作用。
二、教学重点:
(1)表单元件的正确插入。
(2)表单元件的属性设置。
三、教学难点:
表单元件的属性设置,根据实际需要正确运用表单元件。
四、教学过程:
教学过程
教师活动
学生活动
导入
让学生完成一个珍稀动物保护知识小测试
反馈测试结果
完成珍稀动物保护知识小测试
认真听讲
任务一
通过分析刚才的珍稀动物保护小测试来介绍表单元件
讲解简单表单的制作
布置任务一:
完成简单的个人信息的表单制作
巡视并及时指出学生操作过程中的问题
认真听讲
完成任务一,根据教师的提示修改自己网页中存在的问题
任务二
反馈任务一中比较普遍的问题
布置任务二:
在任务一的基础上完成个人信息调查的表单
让个别学生演示任务二的制作
认真思考教师的提问,并积极地回答
自学完成任务二
个别学生演示任务二
任务三
布置任务三:
完成环保知识、个人爱好、网站意见和建议的表单制作
演示学生作品,分析学生所运用的表单元件,讲解表单的提交
根据教师给的文字,使用正确的表单元件,完成整个表单网页的制作
和教师一起分析同学的作品,积极回答问题
拓展任务
布置拓展任务:
修饰表单网页
展示学生作品
讲解表单的提交
完成拓展任务
欣赏学生作品并进行评价
认真听讲
小结
展示其他表单网页
总结本课知识
了解多种表单网页
回顾本课所学知识
五、教学反思:
制作框架网页第5课时
一、教学目标:
1.知识与技能
(1)理解框架的概念及用途。
(2)掌握框架网页的新建、制作、编辑与保存,了解框架的拆分方法。
(3)初步掌握将框架结构与表格布局结合使用来制作网页。
2.过程与方法
(1)通过对表格网页的分析,体验新知识(框架结构网页)的优点,从而促进学习新知识。
(2)理解框架的概念与组成,学会分析网站的结构。
3.情感态度与价值观
(1)通过以“人与动物”为主题的框架结构网页制作活动,了解更多有关人与动物和谐相处的知识,增强关注动物的兴趣和意识。
(2)能够将表格与框架结构网页结合使用,在创作中体验乐趣。
二、教学重点:
框架的概念、用途,创建、编辑与保存框架网页的方法。
三、教学难点:
框架的拆分。
四、教学方法:
对比教学、探究学习、模仿学习。
五、教学过程:
教学过程
教师活动
学生活动
导入
展示一组表格制作的网页,这些网页有一个特点,要求学生仔细观察,找出该特点,并提问如何快捷地制作
尽管复制粘贴能为我们节省时间,但有没有更好的方法呢?
相同的区域我们能否只做一遍呢?
今天我们要学习的内容——制作框架网页,就能给我们带来很多快捷
仔细观察,发现:
上方和左侧内容都是相同的,仅右下部分内容不一样
使用复制粘贴快捷地制作
新授
一、框架网页概念
由以上例子入手,再展示一个框架网页,教师引导学生理解框架网页的概念
二、框架网页的新建与保存
教师要求学生先阅读教材存在步骤,再尝试自行探究操作
任务一:
创建“横幅和目录”结构的框架网页,新建top和left页面,并学会保存
框架结构中的每个框都是一个独立的选项文件,即网页文件,因此当框架确定之后,需要为每个框分别指定其选项文件的来源,在Dreamweaver软件中,默认每个框都是新建网页,所以如果该框内是新建网页,则与普通网页编辑方法一样;如果需要导入一个已有的网页,最简单方法就是复制、粘贴到该框架内
在“横幅和目录”框架网页中,一般top页面制作网页的标志和主题横幅,而在left页面通常制作导航目录或展示一些不常变更的信息
保存网页是教学难点,由教师讲解,可先由框架概念入手,框架结构中的每个框都是一个独立的选项文件,即网页文件,再针对保存页面中的蓝色部分,教会学生注意观察
三、相关页面的制作与设置
框架网页中相关页面的制作最终结合表格来布局,插入文字、图片和交互式按钮
任务二:
top和left页面的制作要求
1.top页面内插入1行2列的表格,左边单元格插入logo图片,右边单元格插入banner图片
2.框架页面left页面内插入5行1列的表格,在每个单元格内依次插入4个“交互式按钮”,按钮文字根据展示介绍的相关内容进行概括,在第5个单元格内插入一邮箱指示的图片
3.调整表格边框粗细
4.为main区域设置一个已有的初始页面……
(该网页由教师提供现成的)
反馈学生操作情况,开展比一比,评一评,看谁做得又快又好
四、框架网页属性的设置
创建好框架网页后,可以根据实际需要改变框架的属性
任务三:
调整框架的大小、设置框架的边框、设置框架窗口中的滚动条等
提高任务:
框架的拆分
理解概念
阅读教材内容,自学新建框架网页的操作
阅读教材后,初步了解“新建网页”和“设置初始网页”两个按钮的不同
认真聆听教师的讲解,注意观察,并按要求模仿操作
学生制作相关页面,耗时较长,同时也是对前面所学内容的复习回顾
“交互式按钮”可以利用交替显示的图像方法来制作,其文字则根据展示的内容进行概括和定义
学生自主探究学习,可向教材寻求帮助
完成设置后请学生示范操作并说明自己为什么这样设置
操作设置后请学生示范操作说明自己为什么这样设置
小结
给出一些常见的框架结构应用界面,如Web邮箱页面等
引导学生总结本课内容,梳理课堂所学知识
分组推荐一优秀作品进行全班展示
回顾总结本节课的知识点
共同欣赏
六、教学反思:
网页超链接的制作第6课时
一、教学目标:
1.展示与技能
(1)了解超链接的含义及链接源和链接目标的含义,掌握同一站点内以及不同站点间网页超链接的创建方法。
(2)掌握网页内锚记的作用及创建锚链接的方法,掌握交互式按钮、框架网页内超链接的设置方法。
(3)理解热区链接的含义及创建方法。
2.过程与方法
(1)通过创建网页超链接的操作,了解网页中创建超链接的基本方法,消除对网页链接的神秘感。
(2)通过对不同对象设置超链接的操作,总结出操作的规律,培养自主学习与操作的能力。
3.情感态度与价值观
完成超链接,感受成功的喜悦和快乐。
二、教学重点:
(1)超链接的含义及链接源和链接目标的含义。
(2)超链接的制作方法——给文字、图片添加超链接,制作锚链接;给交互式按钮添加超链接,在框架页面内创建超链接等。
三、教学难点:
(1)锚链接的名称及对应链接位置的设定。
(2)在框架页面中创建超链接时,目标对象所选择的窗口显示形式。
四、教学方法:
任务驱动法、讨论法、讲解与演示法、类比法。
五、教学过程:
教学过程
教师活动
学生活动
导入
展示两个主页,一个已经链接好的,一个没有链接的,同座位两人比较找出区别,引出本课课题——超链接
提出思考:
我们在先前的学习中什么软件中的相关操作与它是类似的?
什么是超链接?
找一例子,分析链接源和链接目标分别是什么
同座位两人操作交流,对比找出不同,并积极思考,回答教师问题
新授
一、站内超链接
语言引导学生回顾“WPS演示”中超链接的制作方法,教师提示右击链接源制作超链接,再辅以教材内容的阅读,自行探究完成以下操作
任务一:
同一站点内不同页面之间的链接
1.制作首页(欢迎页)到表格页的超链接
2.给表格页内交互式按钮设置超链接,链接到相关页面
3.给框架页内交互式按钮设置超链接,链接到相关页面
教师巡视,及时指导
安排学生示范操作并讲解如何制作超链接
交互式按钮超链接的制作,要求在框架网页中演示操作。
提问学生:
演示者的操作对吗?
有没有问题
引导学生发现问题:
超链接制作完成后的检验。
保存后预览
教师讲解,突破难点,再交由学生操作
以上是同一站点内不同网页之间的链接,有时有这样一种情况:
一个页面内的内容很多,需要不断拖动滚动条实现阅读,能否实现快速的跳转呢
任务二:
同一站点同一页面内的跳转(链接):
在动物趣闻页面内制作锚链接
教师讲解:
由生活中的书签引入,介绍“锚链接”的概念,然后再演示如何操作
提示:
锚链接的双向性问题(返回)
教师巡视,及时反馈
二、站间超链接
仅凭我们课堂上制作的这些页面还不足以详细介绍我们的主题,此时我们还可以借助超链接,链接到因特网的其他网站上,以丰富我们的内容
任务三:
借助热区链接,为友情链接页面制作超链接,链接我国一些自然保护区网站
有了以上的基础,可安排学生自学教材有关热区链接的相关内容,学生探究操作后教师再安排学生演示操作,辅助以提问的形
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 初二 上学 第三 主题 网站 设计 制作
![提示](https://static.bdocx.com/images/bang_tan.gif)