初二上学期-第三章主题网站设计与制作Word格式.docx
《初二上学期-第三章主题网站设计与制作Word格式.docx》由会员分享，可在线阅读，更多相关《初二上学期-第三章主题网站设计与制作Word格式.docx（18页珍藏版）》请在冰点文库上搜索。
学生分组讨论，并说出自己的看法
栏目名
网页文件名
主要内容
（三）、学生讨论学习，尝试规划一个网站
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文件夹，存放网页中的图片等
三、设计首页
引导学生分析一般首页组成情况，提出课堂制作要求
新建首页，要求首页中有如下对象
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）了解表格在网页设计中的作用。
（2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片
（3）能够根据网页设计内容，正确设计表格的结构，掌握表格嵌套的设计方法。
（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）理解动态网页与网页动态效果的区别。
（2）掌握网页动态效果的制作。
（3）掌握“插入”菜单中“图像对象”和“媒体”的使用方法，给网页增添动态效果。
2.情感态度与价值观
通过自主学习网页动态效果的制作，激发在积极、主动的学习气氛中的学习兴趣以及培养探究意识和创新能力。
滚动字幕、交替显示图像等动态效果的制作与Flash动画的插入。
标签选择器的使用及各种效果对象的属性设置。
自主探究式学习、任务驱动式教学。
打开两张分别为静态与加有动态效果的网页，请学生比较它们给浏览者的不同感受
学生观察比较两张网页，指出它们的不同点
滚动字幕的制作
教师巡视，个别给予指导
学生完成任务后，学生展示作品，并演示操作，小结滚动字幕以及悬停按钮设置的关键点
滚动字幕
◆文本的大小、字体、颜色等
◆表现方式
◆运动方向
◆背景色的设置
任务二：
交替显示图像的制作
学生展示作品，演示操作，小结制作交替显示图像的关键点
◆预处理需要交替显示的图像：
大小
◆单击“插入→图像对象※鼠标经过图像”命令
◆选择两个图像：
原始图像，鼠标经过图像，单击“确定”按钮
任务三：
网页中插入一个Flash动画
学生展示作品，演示操作，小结插入Flash动画的关键点
◆Flash显示窗口的大小调整
◆预览模式下方可看到Flash动画的效果
◆插入Flash后网页的保存
学生参照教材内容自学滚动字幕的制作
观察同学的操作，并和自己的操作进行比较
学生参照教材内容自学交替显示图像的制作
学生参照教材内容自学Flash在网页中的插入方法
比较分析同学的作品，对照自己的作品，加以完善
学习过程评价
展示学生的作品，师生给予评价，激发他们更大的主动性与积极性
归纳总结
学生对照“自我评价”表，进行过程性学习的评价
设计交互功能的网页第4课时
（1）了解交互网页的概念，了解表单的功能及表单元件的使用方法，了解网上信息调查的设计方法。
（2）掌握表单元件的功能及使用方法，掌握表单各元件属性的设置方法。
（3）在运用、学习、制作的过程中感受表单给网页带来的交互作用。
（1）表单元件的正确插入。
（2）表单元件的属性设置。
表单元件的属性设置，根据实际需要正确运用表单元件。
四、教学过程：
让学生完成一个珍稀动物保护知识小测试
反馈测试结果
完成珍稀动物保护知识小测试
认真听讲
任务一
通过分析刚才的珍稀动物保护小测试来介绍表单元件
讲解简单表单的制作
布置任务一：
完成简单的个人信息的表单制作
巡视并及时指出学生操作过程中的问题
完成任务一，根据教师的提示修改自己网页中存在的问题
任务二
反馈任务一中比较普遍的问题
布置任务二：
在任务一的基础上完成个人信息调查的表单
让个别学生演示任务二的制作
认真思考教师的提问，并积极地回答
自学完成任务二
个别学生演示任务二
任务三
布置任务三：
完成环保知识、个人爱好、网站意见和建议的表单制作
演示学生作品，分析学生所运用的表单元件，讲解表单的提交
根据教师给的文字，使用正确的表单元件，完成整个表单网页的制作
和教师一起分析同学的作品，积极回答问题
拓展任务
布置拓展任务：
修饰表单网页
展示学生作品
讲解表单的提交
完成拓展任务
欣赏学生作品并进行评价
展示其他表单网页
总结本课知识
了解多种表单网页
回顾本课所学知识
五、教学反思：
制作框架网页第5课时
1.知识与技能
（1）理解框架的概念及用途。
（2）掌握框架网页的新建、制作、编辑与保存，了解框架的拆分方法。
（3）初步掌握将框架结构与表格布局结合使用来制作网页。
2.过程与方法
（1）通过对表格网页的分析，体验新知识（框架结构网页）的优点，从而促进学习新知识。
（2）理解框架的概念与组成，学会分析网站的结构。
（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）理解热区链接的含义及创建方法。
（1）通过创建网页超链接的操作，了解网页中创建超链接的基本方法，消除对网页链接的神秘感。
（2）通过对不同对象设置超链接的操作，总结出操作的规律，培养自主学习与操作的能力。
完成超链接，感受成功的喜悦和快乐。
（1）超链接的含义及链接源和链接目标的含义。
（2）超链接的制作方法——给文字、图片添加超链接，制作锚链接；
给交互式按钮添加超链接，在框架页面内创建超链接等。
（1）锚链接的名称及对应链接位置的设定。
（2）在框架页面中创建超链接时，目标对象所选择的窗口显示形式。
任务驱动法、讨论法、讲解与演示法、类比法。
展示两个主页，一个已经链接好的，一个没有链接的，同座位两人比较找出区别，引出本课课题——超链接
提出思考：
我们在先前的学习中什么软件中的相关操作与它是类似的什么是超链接找一例子，分析链接源和链接目标分别是什么
同座位两人操作交流，对比找出不同，并积极思考，回答教师问题
一、站内超链接
语言引导学生回顾“WPS演示”中超链接
升级会员 