09网页制作备课2.docx
《09网页制作备课2.docx》由会员分享,可在线阅读,更多相关《09网页制作备课2.docx(66页珍藏版)》请在冰点文库上搜索。
09网页制作备课2
教学日志1
章节名称
初识dreamweavercs5
学时数
2
授课时间
9月2日1、2节(09小教1)
教学进度
符合
学生考勤
应到:
43实到:
43请假:
0旷课:
0
授课时间
9月2日5、6节(09小教2)
教学进度
符合
学生考勤
应到:
43实到:
34请假:
9(提前实习)旷课:
0
课程类型
理论课√讨论课□习题课□实验课□上机课√技能课□其他□
教学方法
讲授法、练习法、自主探究、任务驱动法、小组合作
目的要求
1、了解dreamweavercs5作用。
2、了解dreamweavercs5的界面组成。
3、掌握dreamweavercs5的三种视图方式。
4、掌握dreamweavercs5创建站点及新建网页文档的方法。
5、掌握dreamweavercs5设置网页属性的方法。
6、让学生动手创建本地站点、建立站点文件及文件夹。
重点
难点
重点:
dreamweavercs5的界面组成;dreamweavercs5的三种视图方式;创建站点及新建网页文档的方法;设置网页属性的方法;
难点:
dreamweavercs5代码视图方式;创建站点;制作网页;
思考题
作业
见教案部分
教学准备
学生按照“组间同质,组内异质”的原则分成4组
作业批改及实验记录
1、随机抽查课堂笔记(本堂课抽查学号为的学生);
将本节课完成的网页提交到服务器;
2、抽查及上交作业情况:
说明:
1.每次授课后,任课教师应及时填写。
2.授课时间:
指授课日期和节次;教学进度:
指是否符合教学进度简表。
教案正文
教学过程
教学内容
师生互动
时间分配
1、新课导入
跟学生一起浏览枣庄学院初等教育学院的网页。
提出问题-如果要求大家制作这样一个网页,应该怎样制作?
需要使用到什么软件?
这就涉及到本学期即将学到的内容-网页制作,以及dreamweavercs5制作软件的学习。
激发学习兴趣,让学生带着疑问进入新课的学习。
2分钟左右
2、新课学习
dreamweavercs5概述。
1、打开dreamweavercs5,展示一个界面。
A.应用程序栏B.文档工具栏C.文档窗口
D.工作区切换器E.面板组F.CSLiveG.标签选择器
H.属性检查器I.文件面板
2、Dreamweaver功能
AdobeDreamweaverCS5是建立Web站点和应用程序的专业工具一款专业的HTML编辑软件,用于对Web站点、Web页和Web应用程序进行设计、编码和开发。
利用Dreamweaver中的可视化编辑功能,可以快速地创建页面而无需编写任何代码。
如果您喜欢用手工直接编码,Dreamweaver还包括许多与编码相关的工具和功能。
3、利用Dreamweavercs5构建站点
网站建设的一般步骤:
(1)根据收集的资料,整理出一个结构图,将它作为页面基本结构。
(2)提取整理数据中的重要内容,作为主页内容,并应用设计软件设计出主页效果图,切片后输出。
(3)在Flash中完成需要的动画。
(4)将切片后的图像及已有的文字资料在布局软件中进行制作,制作出与结构图相同的页面结构。
(5)根据主页效果,完成内页的制作
(6)测试站点并上传到指定的网站空间。
创建本地站点:
在【管理站点】对话框中创建站点:
选择【站点】【新建站点】命令,弹出【管理站点】对话框,在对话框中单击【新建】按钮
管理站点
打开站点、编辑站点、删除站点、复制站点。
操作站点文件及文件
创建文件夹创建文件、文件或文件夹的移动和复制、删除文件或文件夹
利用极域电子教室广播操作过程。
由于上课过程中没有课本,所以教师先集中讲解,学生再详细做笔记。
这里涉及Dreamweaver三种视图方式
根据课本步骤提示,要求学生上机进行练习。
该部分内容需要学生进行上机,是本节课的难点所在。
(需要教师的详细讲解+学生的上机实践)
33-38分钟
3、巩固练习
根据教师展示的站点,要求学生创建一摸一样的本地站点。
以最短的时间完成知识的再次整合,加深理解,熟练操作。
8分钟左右
4、总结作业
总结:
一是总结学生课堂表现;
二是总结本节课的学习内容。
作业:
要求学生课下构建自己的第一个网站,具体到网站的主题是什么、展示的文字、图片等具体的效果是什么,最好先画出效果图。
(完成不了可课下完成)
5分钟左右
5、教学反思
对于本节课过程中的实例,我准备从网络上更好的去查阅相关的资料,期望能够得到更多的启示,这是一种方法;我还设想跟已学完本节内容的学生和即将要学习的学生进行沟通,看看他们有没有更好的想法和素材。
教学日志2
章节名称
HTML基本标记1
学时数
2
授课时间
9月6日3、4节(09小教1)
教学进度
符合
学生考勤
应到:
43实到:
41请假:
2(提前实习)旷课:
0
授课时间
9月4日1、2节(09小教2)
教学进度
符合
学生考勤
应到:
43实到:
28请假:
15(提前实习)旷课:
0
课程类型
理论课√讨论课□习题课□实验课□上机课√技能课□其他□
教学方法
讲授法、练习法、自主探究、任务驱动法、小组合作
目的要求
了解HTML是什么及其作用;
了解编辑器和浏览器;
掌握HTML基本标记:
html;head;body;hr;marquee;
掌握HTML基本属性:
title;bgcolor;background;
重点
难点
重点:
HTML基本标记及属性;编辑器和浏览器
难点:
HTML基本标记及属性
思考题
作业
见教案部分
教学准备
学生按照“组间同质,组内异质”的原则分成4组
作业批改及实验记录
1、随机抽查课堂笔记(本堂课抽查学号为的学生);
将本节课完成的网页提交到服务器;
2、抽查及上交作业情况:
说明:
1.每次授课后,任课教师应及时填写。
2.授课时间:
指授课日期和节次;教学进度:
指是否符合教学进度简表。
教案正文
教学过程
教学内容
师生互动
时间分配
1、新课导入
打开dreamweavercs5,展示上节课所做网页。
提示学生重点观察代码视图!
代码视图中的含义是什么呢?
这些代码是如何编写的,引出本节课所要学习的内容。
让学生带着疑问进入新课的学习。
2分钟左右
2、新课学习
(一)HTML简介
1、网页使用HTML语言开发的。
HTML文档本身就是文本文件,扩展名为.HTML或者.HTM。
2、使用记事本或者DW作为网页代码的编辑器;各种各样的浏览器;
3、HTML文档的结构:
HTML部分:
每个HTML文档必须以标记开始,以结束。
网页的开始
网页名称或标题网页内容…….
网页的结束
注意:
由于这是编程的开始,因此我在讲解的时候是利用一个问题引出的:
如果将一个人进行解剖分成两部分的话,应该如何分解?
这样学生在轻松地问题中清晰地进行理解和记忆。
(二)HTML基本标记
:
插入分隔线
属性:
WIDTH=“value”:
为线段的长度
SIZE=“value”:
为线段的厚度
COLOR=”blue”或”#RRGGBB”值。
:
为颜色
ALIGN=”right|left|center”:
为线段的位置
NOSHADE:
为无阴影的实心线段
标签:
是整个文件最主要的起始标签,可以框出整个文件的范围。
标签:
是文件显示文件开头的卷标。
标签:是文件标题栏的名称置放位置。
滚动文字,从右往左滚动。
这里学生容易出现的问题是,由于没有结束该标记,网页上后面的内容一起滚动,这里需要注意。
(三)相关属性
:
是文件本体的标签,可以宣告文件内容背景颜色等等。
属性:
BACKGROUND=“背景档案的路径和名称”:
图案背景。
BGCOLOR=”#RRGGBB”:
颜色背景。
注意:
这两个标记是要加在
标记内部的,是属性部分。
这里要特别强调。
这些内容作为常识,要求学生进行了解记忆。
掌握网页的结构是理解网页代码的最基础部分;这部分要求学生能够独立进行编程。
插入水平线的时候,学生往往会自动插入水平线结束标记,主要让学生知道的是,水平线没有结束标记;默认的情况下水平线是占据整个屏幕的
标记显示的内容在网页标题栏中学生在学习的过程中,很容易出现代码放置位置不正确的情况。
33-38分钟
3、巩固练习
根据教师展示的网页,要求学生创建一摸一样的网页。
以最短的时间完成知识的再次整合,加深理解,熟练操作。
8分钟左右
4、总结作业
总结:
一是总结学生课堂表现;
二是总结本节课的学习内容。
作业:
独立使用记事本完成网页,要求加入水平线、滚动文字、网页标题和网页背景颜色。
(完成不了可课下完成)
5分钟左右
5、教学反思
对于计算机教学,一定要联系生活实际,发挥学生的主体作用,把课堂还给学生。
教师要做学生学习的引路人,鼓励学生创新思维,引导学生自己去探索、去钻研,让学生成为学习的真正主人,充分发挥他们在学习过程中的主动性、积极性和创造性。
如本节课中,我选取一些他们能看到的、深切体会到的网页效果吸引他们的学习注意力,调动他们的学习积极性,取得了良好的学习效果。
通过这样他们不仅深入地掌握了该项操作的技巧,还发挥主观能动性,提高了举一反三触类旁通的能力。
通过本次课的学习,真正让学生们成为课堂的主人,变被动学习为主动学习,从而能取到事半功倍的效果。
更多的教会了学生们对信息的获取、分析、加工,并给出分析结果的能力,可谓收获颇丰。
教学日志3
章节名称
HTML基本标记2-段落及文字效果
学时数
2
授课时间
9月9日1、2节(09小教1)
教学进度
符合
学生考勤
应到:
43实到:
14请假:
29(提前实习)旷课:
0
授课时间
9月9日5、6节(09小教2)
教学进度
符合
学生考勤
应到:
43实到:
15请假:
28(提前实习)旷课:
0
课程类型
理论课√讨论课□习题课□实验课□上机课√技能课□其他□
教学方法
讲授法、练习法、自主探究、任务驱动法、小组合作
目的要求
掌握HTML基本标记:
p;br;font;b;I;u标记
掌握HTML基本属性:
face;size;color;
重点
难点
重点:
HTML文字基本标记及属性;
难点:
HTML文字基本标记及属性
思考题
作业
见教案部分
教学准备
学生按照“组间同质,组内异质”的原则分成4组
作业批改及实验记录
1、随机抽查课堂笔记(本堂课抽查学号为的学生);
将本节课完成的网页提交到服务器;
2、抽查及上交作业情况:
说明:
1.每次授课后,任课教师应及时填写。
2.授课时间:
指授课日期和节次;教学进度:
指是否符合教学进度简表。
教案正文
教学过程
教学内容
师生互动
时间分配
1、新课导入
提示学生打开上节课完成的网页,并打开教师已经完成的网页效果进行对比,学生会发现做好的网页中已经插入了几行文字,并且文字效果多彩多样,引入本节课所学习的内容。
让学生带着疑问进入新课的学习。
2分钟左右
2、新课学习
(一)段落标记及其属性。
资料
:一般段落。
可利用属性align=”center|right|left”设定文件对齐方式。
:
换行。
属性:
CLEAR消除段落字,在图片和文字的页面上,可产生文绕框。
:置中标签,让网页文件置中对齐。
没有结束标记。
(二)文字标记及其属性。
~标题字字体的大小最大最小。
即是H1>H2>H3>H4>H5>H6。
:
字型卷标。
可调整文字的字型、大小及颜色。
Face=”标楷体”。
Size=”value”:
value=1~7,+2,-1。
Color=”blue”或”#RRGGBB”值。
柤体字重要文字(粗体)
斜体字显示变量
底线字显示程序代码
上标字文字内缩
下标字参考文献(斜体)
重要文字(斜体)显示地址(斜体)
较小加粗显示科学定律文字加横线
Align标记是本节课重点内容,学生初学会感到陌生和难度;
标记使用时学生要注意放置的位置。
Font标记的的三个属性在学习过程中容易产生问题,因此在讲解过程中要用具体的实例逐步深入讲解。
33-38分钟
3、巩固练习
根据教师展示的网页,要求学生创建一摸一样的网页。
完成效果如图所示:
以最短的时间完成知识的再次整合,加深理解,熟练操作。
8分钟左右
4、总结作业
总结:
一是总结学生课堂表现;
二是总结本节课的学习内容。
作业:
独立制作一个网页,要求加入各种各样的文字效果。
(若完不成可课下完成)
4分钟左右
5、教学反思
对于学生的计算机基础知识参差不齐,对于基础较好的学生,实践操作起来比较轻松,而基础较差的学生,害怕其他学生的嘲笑,或是怕老师看不起畏步不前,不愿动手实践操作,去接受新知识。
针对这种情况,在教学实践中得出,坚持鼓励和诱导相结合,是排除学生学习中各种心理障碍,克服学生的畏难情绪的有效方法。
教学日志4
章节名称
HTML基本标记3-有序列表和无序列表
学时数
2
授课时间
9月13日3、4节(09小教1)
教学进度
符合
学生考勤
应到:
43实到:
14请假:
29(提前实习)旷课:
0
授课时间
9月11日1、2节(09小教2)
教学进度
符合
学生考勤
应到:
43实到:
17请假:
26(提前实习)旷课:
0
课程类型
理论课√讨论课□习题课□实验课□上机课√技能课□其他□
教学方法
讲授法、练习法、自主探究、任务驱动法、小组合作
目的要求
掌握HTML有序列表和无序列表
掌握HTML有序列表和无序列表
重点
难点
重点:
HTML有序列表和无序列表
难点:
HTML有序列表和无序列表
思考题
作业
见教案部分
教学准备
学生按照“组间同质,组内异质”的原则分成4组
作业批改及实验记录
1、随机抽查课堂笔记(本堂课抽查学号为的学生);
将本节课完成的网页提交到服务器;
2、抽查及上交作业情况:
说明:
1.每次授课后,任课教师应及时填写。
2.授课时间:
指授课日期和节次;教学进度:
指是否符合教学进度简表。
教案正文
教学过程
教学内容
师生互动
时间分配
1、新课导入
提示学生打开上节课完成的网页,并打开教师已经完成的网页效果进行对比,学生会发现做好的网页中已经插入了各种类型的列表。
引入本节课所学习的内容。
让学生带着疑问进入新课的学习。
2分钟左右
2、新课学习
序列标签基本上可分为两种,一种是“无序列表”,一种是“有序列表”。
无序列表基本构架
无序列表开始
- ...单列内容
- ...单列内容
- ...单列内容
无序列表结束标签属性TYPE 设定符号款式,属性值为disc(实心圆-默认)、square(正方形)、circle(空心圆)。
原始代码
显示结果
∙实心圆
∙实心圆
∙实心圆
正方形正方形正方形▪正方形
▪正方形
▪正方形
空心圆空心圆空心圆o空心圆
o空心圆
o空心圆
∙实心圆
▪正方形
o空心圆
有序列表基本构架
有序列表开始 有序列表开始
- ...单列内容
- ...单列内容
- ...单列内容
有序列表结束原始代码
显示结果
- 战士
- 法师
- 道士
1.战士
2.法师
3.道士
- 战士
- 法师
- 道士
a.战士
b.法师
c.道士
战士法师道士A.战士
B.法师
C.道士
战士法师道士i.战士
ii.法师
iii.道士
战士法师道士I.战士
II.法师
III.道士
战士法师道士5.战士
6.法师
7.道士
- 战士
法师
- 道士
1.战士
2.法师
3.道士
33-38分钟
3、巩固练习
根据教师展示的网页效果,要求学生创建一摸一样的网页效果。
以最短的时间完成知识的再次整合,加深理解,熟练操作。
8分钟左右
4、总结作业
总结:
一是总结学生课堂表现;
二是总结本节课的学习内容。
作业:
独立制作一个网页,要求加入各种各样的列表。
(若完不成可课下完成)
5分钟左右
5、教学反思
这节课,我认为顺利上课的关键是我采用了对比教学法以及任务驱动法的使用。
对比教学体现在各种列表经对比之后发现不同之处以及代码的对比不同。
任务驱动法体现在各种任务的难度依次加大,从无序列表到有序列表,无序列表嵌套有序列表,有序列表嵌套无序列表。
学生在解决一个个任务的过程中完成学习内容。
教学日志5
章节名称
HTML基本标记4-表格
学时数
2
授课时间
9月16日1、2节(09小教1)
教学进度
符合
学生考勤
应到:
43实到:
41请假:
2(提前实习)旷课:
0
授课时间
9月16日5、6节(09小教2)
教学进度
符合
学生考勤
应到:
43实到:
28请假:
15(提前实习)旷课:
0
课程类型
理论课√讨论课□习题课□实验课□上机课√技能课□其他□
教学方法
讲授法、练习法、自主探究、任务驱动法、小组合作
目的要求
掌握HTML表格基本标记:
table;tr;td;
掌握HTML表格基本属性:
width;bgcolor;background
重点
难点
重点:
HTML表格基本标记及属性;
难点:
HTML表格基本标记及属性
思考题
作业
见教案部分
教学准备
学生按照“组间同质,组内异质”的原则分成4组
作业批改及实验记录
1、随机抽查课堂笔记(本堂课抽查学号为的学生);
将本节课完成的网页提交到服务器;
2、抽查及上交作业情况:
说明:
1.每次授课后,任课教师应及时填写。
2.授课时间:
指授课日期和节次;教学进度:
指是否符合教学进度简表。
教案正文
教学过程
教学内容
师生互动
时间分配
1、新课导入
展示一个已经做好的网页—含有各种各样的表格。
让学生在浏览网页的情况下获知本节课即将要学习的内容—表格。
展示作品,激起学生学习兴趣。
2分钟左右
2、新课学习
(一)任务一:
制作一个最基本的表格。
…………………表格的开始标记…………………行开始标记1 | …………………单元格标记2 | 3 | 4 |
…………………行结束标记a | b | c | d |
二 | 一 | 三 | 四 |
…………………表格的结束标记此部分教学设计:
展示一个做好的表格,告诉学生一个制作表格的规律:
表格是有行组成的,行有单元格组成的;接下来,展示代码部分,引导学生发现表格、行和单元格的标记。
然后让学生尝试去完成制作表格。
(二)任务二:
完善表格。
…此处发生代码变化
1 | 2 | 3 | 4 |
a | b | c | d |
二 | 一 | 三 | 四 |
教学设计:
展示教师的代码,跟学生的对比,学生就会发现代码的不同,然后教师进行重点引导即可。
(三)任务三:
美化表格
1 | 2
3 | 4 | a
b | c | d |
二
一 | 三 | 四 |
教学设计同上
学生尝试制作表格的时候,会发现制作完的表格非常小,而且还