Dreamweaver MX2004教案 第三周星期二第1、2节 课题表格的应用 教学目标丨通过本节学习,让学生掌握在网页中如何应用表格,以及如何对表格进行编辑。 教学重点表格的创建与修改 教学难点表格的修改 复习:1、如何利用 Dreamweaver MX2004创建一个站点。 2、如何利用 Dreamweaver MX2004创建一个简单的网页。 讲授新课 、概念 1、表格宽度:百分比、像素 2、边框粗细:设置表格边框的大小,默认值为1像素 3、单元格边框:单元格中的内容与边框距离的大小 4、单元格间距:指单元格与单元格、单元格与表格边框的距离,两者的单位都为像素。 5、页面设置:实质是为表格选择一个加粗文字的标题栏,这样对于要求标题以默认粗体显示的 表格省去加粗动作。 、表格的编辑和排版 教 1、创建表格 方法一:菜单。单击“插入/表格”命令,完成表格创建操作 方法二:在“常用”工具栏中单击“插入表格”按钮,创建表格 学 2、表格修改 (1)表格的宽度和高度 (2)表格的背景和边框 过 3、选择单元格 (1)选择单个单元格:按 delete键后,内容清除,表格存在。 2)连续选多个单元格: (3)选择整行单元格: (4)选择多个非连续的单元格:按下ctrl键 (5)选择整个表格 4、调整行和列的宽度和高度 shift 5、插入行和列 修改一表格-一插入行或列 6、拆分和合并单元格 7、表格的嵌套: 在一个表格的其中一个单元格里再插入一个表格,“插入”一“表格” 、课堂小结 学生通过本节课的学习后,大多数同学己经掌握了网页制作软件 dreamweaver的表格创建,应用及 编辑。制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的 实例来调动学习积极性
Dreamweaver MX2004 教案 第三周 星期二 第 1、2 节 课 题 表格的应用 教学目标 通过本节学习,让学生掌握在网页中如何应用表格,以及如何对表格进行编辑。 教学重点 表格的创建与修改 教学难点 表格的修改 教 学 过 程 复习:1、如何利用 Dreamweaver MX2004 创建一个站点。 2、如何利用 Dreamweaver MX2004 创建一个简单的网页。 讲授新课: 一、概念 1、 表格宽度:百分比、像素 2、 边框粗细:设置表格边框的大小,默认值为 1 像素。 3、 单元格边框:单元格中的内容与边框距离的大小。 4、 单元格间距:指单元格与单元格、单元格与表格边框的距离,两者的单位都为像素。 5、 页面设置:实质是为表格选择一个加粗文字的标题栏,这样对于要求标题以默认粗体显示的 表格省去加粗动作。 二、表格的编辑和排版 1、 创建表格 方法一:菜单。单击“插入/表格”命令,完成表格创建操作。 方法二:在“常用”工具栏中单击“插入表格”按钮,创建表格。 2、 表格修改 (1) 表格的宽度和高度 (2) 表格的背景和边框 3、 选择单元格 (1) 选择单个单元格:按 delete 键后,内容清除,表格存在。 (2) 连续选多个单元格: (3) 选择整行单元格: (4) 选择多个非连续的单元格:按下 ctrl 键。 (5) 选择整个表格 4、 调整行和列的宽度和高度 shift 5、 插入行和列 修改---表格---插入行或列 6、 拆分和合并单元格 7、 表格的嵌套: 在一个表格的其中一个单元格里再插入一个表格,“插入”—“表格” 三、课堂小结: 学生通过本节课的学习后,大多数同学已经掌握了网页制作软件 dreamweaver 的表格创建,应用及 编辑。制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较多的 实例来调动学习积极性。 四、课外作业:课后习题填空 1、2、3
Dreamweaver MX2004教案 第三周星期三第1,2节 课题表格应用实例(一) 教学目标 教学重点将课程表做成一个网页 教学难点表格的修改 复习:1、如何创建一个表格? 如何修改创建好的表格? 3、更改表格中行、列、单元格属性 授新课 304班课程表- Microsoft Internet Explorer 包回区 文件①)编辑¢)查看收藏④)工具① 后·9图的搜索次收魂夹的 址①)ep:s3dsms数案TM4 rm98rObq. htm 转到链接 304班课程表 星期一星期二星期 星期四星期五 程序设计动画制作图像处理动画制作 上v程序设计动画制作图像处理动画制作 教 午网页制作硬件组装0B网页制作网页制作 网页制作硬件组装0B网页制作网页制作 学 下动画制作图像处理程序设计硬件组装图像处理 午动画制作图像处理程序设计硬件组装图像处理 过 操作步骤 1、启动Dr 创建新站点 趣|3、创建一新网页,网页标题为“304班课程表” 4、单击“插入”菜单,选择“表格”命令 5、创建一个8行6列的表格,设置表格的宽度为480像素,高度为200像素 6、设置表格的边框,单元格宽度、高度及背景颜色 7、对表格进行合并和拆分操作,如上图所示 8、在表格中输入本班的课程表 9、保存预览,完成网页操作 上机练习 按要求完成本网页的制作 教学反思 学生通过本节课的学习后,大多数同学已经掌握了网页制作软件 dreamweaver中表格的应用及其把 课程表设计为网页的操作。制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过 程中应该应用较多的实例来调动学习积极性
Dreamweaver MX2004 教案 第三周 星期三 第 1,2 节 课 题 表格应用实例(一) 教学目标 1、掌握表格的创建及修改操作;2、将本班课程表设计成一个网页。 教学重点 将课程表做成一个网页 教学难点 表格的修改 教 学 过 程 复习:1、如何创建一个表格? 2、如何修改创建好的表格? 3、更改表格中行、列、单元格属性。 讲授新课: 一、操作步骤 1、启动 Dreamweaver MX2004 2、创建新站点 3、创建一新网页,网页标题为“304 班课程表” 4、单击“插入”菜单,选择“表格”命令 5、创建一个 8 行 6 列的表格,设置表格的宽度为 480 像素,高度为 200 像素 6、设置表格的边框,单元格宽度、高度及背景颜色 7、对表格进行合并和拆分操作,如上图所示 8、在表格中输入本班的课程表 9、保存预览,完成网页操作。 二、上机练习 按要求完成本网页的制作 三、教学反思 学生通过本节课的学习后,大多数同学已经掌握了网页制作软件 dreamweaver 中表格的应用及其把 课程表设计为网页的操作。制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过 程中应该应用较多的实例来调动学习积极性 四、作业
Dreamweaver MX2004教案 第四周星期一第3、4节 课题表格实例(二) 教学目标 握表格的创建及修改操作:2、将教材目录设计成一个网 教学重点教材目录设计为一个网页 教学难点单元格修改操作 复习:1、表格的创建与修改 2、表格中单元格的操作 3、课程表网页制作 授新课 、实例操作步骤 Dreamweaver夏2004实例教程- icrosoft Internet Explorer 文件q)编辐)查看①收藏08)工具①)帮助Q ⊙·回的P默☆收来 地址①)]D:134s教案 sMP ewteeraqe htn 长入关能字直振转到链援 Dreamweaver JIX2004实例教程 第1意网站津设介绍 8.2表单对象 1.1网的基础知识 8.3表单操作实例 1.2系统配置和软件安装 第章架 1.3编辑环境 9.1设置框架 教 9.2框架属性 5页面标尺及网格 9.3为框架设置链接 1.6创建新站点及新页面 9.4框架制作实例 第2章设置文字 第10章行为 2.1文字的应用 10.1行为的便用 2.2应用文字样式 10.2行为的具体应用 23应用Cs样式 第11章提高网站工作效率 第3盒网页中的图像 11.1便用库项目 11.2使用历史记录面板 3.2图像的满错 1.3编培菜单命令 3.3使用外部图学编辑器 第12站点管理 第4网页中的表格 12.2设置远程站点 4.1表格的包建 12.3使用站点面板 过 不害内你 3罗的电脑 程 1、新建一页面 2、在新建页面中创建一45行7列的表格,表格的宽度为600像素,第一列宽度为190像素 第二列宽度为60像素,第三列宽度为30像素,第四列宽度为40像素,第五列宽度为190 像素,第六列宽度为60像素,第七列宽度为30像素 3、将表中第四列的单元格选定,并将其合并为一个单元格 4、将 Dreamweaver mX2004教材上的目录输入到表格中,如上图所示。 5、设置文字属性:文字字体为“宋体”,文字大小为“12像素”,文字对齐方式为“居中” 6、添加省略号和页数,最后保存,效果如上图所示 上机练习 、小结 1、表格的创建及修改操作 教学反思学生通过本节课的学习后,大多数同学已经掌握了网页制作软件 dreamweaver创建站 点的应用,制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较
Dreamweaver MX2004 教案 第四周 星期一 第 3、4 节 课 题 表格实例(二) 教学目标 1、掌握表格的创建及修改操作;2、将教材目录设计成一个网页。 教学重点 教材目录设计为一个网页 教学难点 单元格修改操作 教 学 过 程 复习:1、表格的创建与修改 2、表格中单元格的操作 3、课程表网页制作 讲授新课: 一、实例操作步骤 1、 新建一页面 2、 在新建页面中创建一 45 行 7 列的表格,表格的宽度为 600 像素,第一列宽度为 190 像素, 第二列宽度为 60 像素,第三列宽度为 30 像素,第四列宽度为 40 像素,第五列宽度为 190 像素,第六列宽度为 60 像素,第七列宽度为 30 像素。 3、 将表中第四列的单元格选定,并将其合并为一个单元格 4、 将 Dreamweaver MX 2004 教材上的目录输入到表格中,如上图所示。 5、 设置文字属性:文字字体为“宋体”,文字大小为“12 像素”,文字对齐方式为“居中”。 6、 添加省略号和页数,最后保存,效果如上图所示。 一、上机练习 二、小结 1、 表格的创建及修改操作 三.教学反思学生通过本节课的学习后,大多数同学已经掌握了网页制作软件 dreamweaver 创建站 点的应用,制作一个简单的网页。在教学过程中取得了较好的效果。同时在教学过程中应该应用较 多的实例来调动学习积极性 三
Dreamweaver MX2004教案 第四周星期二第1、2节 课题表格线框制作 教学目标|掌握边框的制作方法,尤其是细线边框、粗线边框的制作 教学重点细线边框制作 教学难点细线边框制作 复习:1、表格和单元格操作 目录网页制作 授新课 、细表格边框制作方法 方法一:背景设置式 <html> tt>背景设置式一细边框表格<tte </head> <table width="200"border="0" cellpadding="2" cellspacing="1"bgcolor"#000000"> <tr> < <th bgcolor=“#FFFE" colspan="2>背景设置式一细边框表格<h> <td bgcolor#iFFFFEE >text.</td> 教 <td bgcolor#FFFFEE >text .</td </tr> td bgcolor=“# FFFEE"?text…sfd> std bgcolor=“#FFEE">text…<fdx 学 </table> body> 过|方法二 <html> <head <t边框设置式一细边框表格<itle <table width="200"border"1"cellpadding="2" cellspacing=0" bordercolorlight="#000000"bordercolordark="#FFFFFF"b color=“# FFFEE"> th colpa="2">边框设置式一细边框表格</h> <td>text…</td> td>text…</td> <td>text <html>
Dreamweaver MX2004 教案 第四周 星期二 第 1、2 节 课 题 表格线框制作 教学目标 掌握边框的制作方法,尤其是细线边框、粗线边框的制作 教学重点 细线边框制作 教学难点 细线边框制作 教 学 过 程 复习:1、表格和单元格操作 2、目录网页制作 讲授新课: 一、细表格边框制作方法 方法一:背景设置式 方法二:
方法三:CSS层叠式 <html> <head> title>CSS层式一细边框表格</ title> E<style type="text/css"> 中 T Sample border-collapse: collapse border: none background: #FFFFEE 中 Sample th border: solid 1 px #OO0000 中 T Sample td border, solid 1 px #UOO00O </style> <body> <table width="200"border="1"cellpadding=2 cellspacing="0"class="T_ Sample"> < sth colspan="2">CSS层叠式一细边框表格<h> <tr 学 <td>text…<td <td>text…</td> <tr td>text <td>text </tr </table> </body> </html> 程 、上机练习 1、用第一种细表格方法完成课程表网页制作 2、用第二种细表格方法完成目录网页制作 3、用第三种细表格制作方法完成P54面实例 教学反思 学生通过本节课的学习后,大多数同学己经掌握了网页制作软件 dreamweaver边框的制作方法,尤其 细线边框、粗线边框的制作应用,制作一个简单的网页。在教学过程中取得了较好的效果。同时在 教学过程中应该应用较多的实例来调动学习积极性 四、作业
教 学 过 程 方法三:CSS 层叠式 二、上机练习 1、 用第一种细表格方法完成课程表网页制作。 2、 用第二种细表格方法完成目录网页制作。 3、 用第三种细表格制作方法完成 P54 面实例。 三、教学反思: 学生通过本节课的学习后,大多数同学已经掌握了网页制作软件 dreamweaver 边框的制作方法,尤其 是细线边框、粗线边框的制作应用,制作一个简单的网页。在教学过程中取得了较好的效果。同时在 教学过程中应该应用较多的实例来调动学习积极性 四、作业