教学设计(利用表格布局网页)[推荐]_使用表格布局网页教案
教学设计(利用表格布局网页)[推荐]由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“使用表格布局网页教案”。
利用表格布局网页
教学设计
授课教师：刘春霞
授课班级：计算机应用1202班
一、课题名称：利用表格布局网页
二、授课课时：1个课时
三、教学内容分析
本节课以利用表格制作一个简单主页为例，要求学生掌握并灵活运用表格及单元格的一些基本属性设置，从而设计出一个“匡”字型的主页。本次课要求学生具有创建站点的知识，以及Dreamweaver CS3的一些基本操作。
四、学生特征分析
授课对象是职高高二学生，学生已具有熟练操作一些常用软件的能力，已掌握Dreamweaver CS3的一些基本操作。
五、教学目标（知识与技能、过程与方法、情感态度与价值观）
1、知识与技能目标
掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。
2、过程与方法目标
引导学生分析项目，自主独立思考及操作，指导与修正，掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。
3、情感态度与价值观目标
提高学生的观察能力及分析能力，调动学生自主能动性，培养学生较浓的学习兴趣，使学生建立正确的人生观与价值观。
六、教学重点难点
掌握插入表格的方法 掌握表格属性设置的基本方法 掌握单元格或行属性设置的基本方法 掌握使用表格进行页面布局的基本方法
七、教学方法
1、讲授法
2、演示法
3、任务驱动法
八、教学环境与资源
教师机，教学广播软件，学生机（60台）
九、教学过程
1、创设情境，导入新课
欣赏网页，分析网页结构，引入本次课学习的项目：利用表格制作一个简单的“匡”字型网页。
2、讲解知识，演示操作 讲解插入表格的方法，表格属性设置的基本方法及单元格属性设置的基本方法，（1）插入表格的方法
将光标置于页面中，然后在主菜单中选择【插入记录】／【表格】命令或在【插入】／【常用】面板中单击（表格）按钮打开【表格】对话框进行参数设置，最后单击【确定】按钮插入表格。（2）表格属性设置
首先选中表格，然后通过表格【属性】面板设置表格的行数、列数、宽度、高度、填充、间距、边框、对齐方式、背景颜色、背景图像、边框颜色等属性。
▲宽度中的百分比单位一般在制作表格嵌套的时候用。（3）设置单元格或行【属性】的方法
首先选择单元格或行，然后通过单元格或行【属性】面板可以设置单元格的宽度和高度、水平和垂直对齐方式、背景颜色和背景图像以及边框颜色等。
（4）展示网页的最终结果并引导学生分析其结构，提示并演示操作的关键步骤，让学生独立思考完成，培养学生知识的迁移能力，效果图如下：
主要操作步骤：
a、新建一个站点，站点根目录为自己的文件夹（含有素材），在站点里新建一个文件index,html。
b、在页面属性里设置字体为“12像素”，页边距为“0”
c、制作页眉部分，插入一个1行1列的表格，宽度为770像素，其它属性参考效果图设置，然后插入Logo图片，d、制作主体部分，I、插入一个1行2列，宽度为770像素的表格，左侧单元格为200像素，设置间距为2，其它属性参考效果图设置。II、III、在左侧单元格中插入一个5行1列，宽度为70%的表格，设置间距为5，其它属性参考效果图设置。（表格嵌套）
在右侧单元格中插入一个4行2列，宽度为96%的表格，设置间距为5，表格标题为“参考咨询”，第一列单元格宽度为160像素，其它属性参考效果图设置。（表格嵌套）
e、制作页脚部分，插入一个1行1列，宽度为770像素的表格，插入图像“foot,.jpg”。
3、学生练习，巡堂指导
（1）、学生参考最终效果图，根据教师提示的主要步骤，独立思考分析，完成主页。（2）、教师巡堂指导，留意学生在操作时出现的细节问题，做好作业点评。
4、上交作业，点评作业
（1）、要求学生把主页及素材（自己的文件夹）一起交到教师机“1202班”文件夹中。（2）、抽出两个学生的作业点评，修正错误，完善主页。
5、课堂小结，宣布下课
本次课主要学习插入表格、表格基本属性的设置、单元格或行的基本属性的设置，利用表格布局网页的方法。
十、教学反思（欢迎名位听课老师提出您宝贵的教学建议）
《应用表格布局网页结构》教学设计一、教学目标知识与技能：1、了解表格在网页设计中的作用。2、能够根据网页的内容，正确布局表格的结构。3、掌握网页中表格的制作方法，能够在......
《用表格为网页布局》教学设计《用表格为网页布局》是浙江教育出版社信息技术教材八年级上册第三单元第十五课的内容。本课是在学生学习建立网站站点后，开始尝试做第一张网页......
实验15 利用表格和框架技术进行网页布局设计1.1 15.1 实验目的1．掌握利用Adobe Dreamweaver CS6的表格进行网页布局设计的方法。 2．掌握利用Adobe Dreamweaver CS6的框架技术......
“动画补间”动画的教学案例南京武家嘴实验学校 邢建华 一、教材分析本课是江苏省科教版初中信息技术（下册）中第八单元《动画制作》中第3节内容，学习的对象是初中二年级的学生......
《应用表格布局网页结构》教案一、教学目标1、知识与技能：（1）了解表格网页的作用；（2）掌握网页中表格的制作方法，表格属性的属性设置方法； （3）能根据网页设计内容，正确布局表格的结构； （4）......
![教学设计(利用表格布局网页)[推荐]](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU2MjU5MTk0MTg2IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY0MDciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTQzMiAwaDE2MGMyNi42IDAgNDggMjEuNCA0OCA0OHYzMzZoMTc1LjRjMzUuNiAwIDUzLjQgNDMgMjguMiA2OC4yTDUzOS40IDc1Ni42Yy0xNSAxNS0zOS42IDE1LTU0LjYgMEwxODAuMiA0NTIuMmMtMjUuMi0yNS4yLTcuNC02OC4yIDI4LjItNjguMkgzODRWNDhjMC0yNi42IDIxLjQtNDggNDgtNDh6IG01OTIgNzUydjIyNGMwIDI2LjYtMjEuNCA0OC00OCA0OEg0OGMtMjYuNiAwLTQ4LTIxLjQtNDgtNDhWNzUyYzAtMjYuNiAyMS40LTQ4IDQ4LTQ4aDI5My40bDk4IDk4YzQwLjIgNDAuMiAxMDUgNDAuMiAxNDUuMiAwbDk4LTk4SDk3NmMyNi42IDAgNDggMjEuNCA0OCA0OHogbS0yNDggMTc2YzAtMjItMTgtNDAtNDAtNDBzLTQwIDE4LTQwIDQwIDE4IDQwIDQwIDQwIDQwLTE4IDQwLTQweiBtMTI4IDBjMC0yMi0xOC00MC00MC00MHMtNDAgMTgtNDAgNDAgMTggNDAgNDAgNDAgNDAtMTggNDAtNDB6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2NDA4Ij48L3BhdGg+PC9zdmc+)