下载文档原格式
应用表格布局网页响水县第一初级中学沈宇一、学习内容分析《应用表格布局网页》是苏教版初中8 年级信息技术第3章《主题网站设计与制作》第2 节《制作网站》中的内容。
目的是通过制作“多彩的生物”网页，了解表格在网页设计中的作用，掌握表格的制作方法和属性的设置方法。
本节以第1 节《创建网站，制作首页》为基础，第一节是网页设计中最基础的部分，侧重于网页设计中文字的编辑、修饰、图片的插入以及网页属性的设置、有了第一节的基础，同学们综合处理文字、图片等信息的能力会有很大的提高。
二、学者分析本节课的学习对象是八年级的学生，通过第一节的学习，学生已经掌握了站点的建立与删除，设计简单网页的基本方法，本节课主要是让学生在上一节的基础上，根据网页设计的内容，正确设计表达网格的结构，掌握修饰与编辑单元格的方法，创作属于自己个性化的网页。
从而培养学生运用信息技术，解决问题的能力，提高学生的学科素养。
三、学习目标1、了解网页设计中表格的作用。
2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。
3、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。
四、教学重点与难点教学重点：掌握插入、编辑表格的方法及表格的属性设置方法。
教学难点：表格的嵌套设计在网页设计中的应用五、教学策略1、问题激发策略：使用多媒体网络教室全屏演示系统全屏控制，提出操作环节中遇到的问题中，让同学们在自主实践环节，自己运用已有的知识去处理相关操作；2、示范-模仿教学策略：使用多媒体网络教室全屏演示系统窗口控制，让学生与教师同步跟学操作，增加实际操作效果；3、自主实践学习、同学间协作实践学习等策略，充分运用网络教室教师与学生电脑的互动特点，教学全屏演示、窗口演示、学生作品展示等过程，指导学生完成作品，并启发学生触类旁通，对网页中表格的基本操作有一定的发解六、教学过程（—）创设情景，引入新课通过前几课的学习，同学们对DW有了初步的了解，提问同学回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入，学生认真回顾，回答教师提问。
用表格布局网页教案第一章：表格布局网页概述1.1 教学目标了解表格布局网页的概念和作用掌握表格布局网页的基本方法1.2 教学内容表格布局网页的定义表格布局网页的优势表格布局网页的基本方法1.3 教学步骤引入表格布局网页的概念讲解表格布局网页的优势演示表格布局网页的基本方法1.4 课后作业学生自行设计一个简单的表格布局网页第二章：表格布局网页的基本操作2.1 教学目标掌握表格布局网页的基本操作2.2 教学内容插入表格调整表格大小合并单元格2.3 教学步骤插入表格并调整大小合并单元格和拆分单元格2.4 课后作业学生自行设计一个包含表格布局的网页第三章：表格布局网页的样式设置3.1 教学目标掌握表格布局网页的样式设置3.2 教学内容表格样式设置单元格样式设置3.3 教学步骤讲解表格样式设置的方法讲解单元格样式设置的方法3.4 课后作业学生自行设计一个包含表格布局和样式设置的网页第四章：表格布局网页的高级应用4.1 教学目标掌握表格布局网页的高级应用4.2 教学内容跨列单元格嵌套表格4.3 教学步骤讲解跨列单元格和跨行单元格的应用方法讲解嵌套表格的应用方法4.4 课后作业学生自行设计一个包含跨列单元格、跨行单元格和嵌套表格的网页第五章：表格布局网页的优化与调试5.1 教学目标掌握表格布局网页的优化与调试方法5.2 教学内容优化表格布局网页的性能调试表格布局网页的问题5.3 教学步骤讲解优化表格布局网页性能的方法讲解调试表格布局网页问题的方法5.4 课后作业学生自行设计一个包含优化与调试的表格布局网页第六章：响应式表格布局网页6.1 教学目标理解响应式网页设计的基本概念掌握使用表格进行响应式布局的方法6.2 教学内容响应式网页设计的基本原则使用CSS媒体查询调整表格布局实现表格的响应式布局6.3 教学步骤介绍响应式网页设计的基本原则演示如何使用CSS媒体查询调整表格布局示例实现一个表格的响应式布局6.4 课后作业学生完成一个表格布局的响应式网页设计，并在不同设备上测试其表现。
第三章使用表格规划网页布局
一、相关概念
1、表格功能：显示数据，定位网页元素（布局）
2、表格的组成：
表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。
单元格中的内容和边框之间的距离叫边距cellpadding。
单元格和单元格之间的距离叫间距cellspacing。
表格的边线叫做边框border。
tr：代表一行。
td：代表一个单元格。
3、占位符：
当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。
因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，Dreamweaver会在每个单元格中插入代码“ ”，用以撑起单元格的高度。
当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。
如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。
二、插入表格
两种方法：①“插入”→“表格”命令
②单击“插入”面板的“常用”类别中的“表格”按钮上，打开“表格”对话框。
1、宽度（百分比，像素）：相对显示，绝对显示
2、边距/填充：文本内容与边框之间距离
3、间距：单元格与单元格之间距离
4、标题：设置表格标题位置
【例4-1】：新建一个网页文档，在文档中插入表格（9行2列）并插入表格内容
【练习1】：制作下面表格
【练习2】：如何让文本与表格边框有一定空白区间，如下：
5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。
插入嵌套表格的方法与插入表格的方法相同。
【练习3】：利用表格制作下图样式：
说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的
外观，大表格的宽度一般使用像素值，而为了使嵌套表格的宽高不和总表格发生冲突，嵌套表格一般使用百分比来设置宽和高。
【思考】：利用嵌套表格留空白
操作方法：插入一个1行1列的表格，再在此表格中插入一表格，此时新插入的表格设置时宽度要小一些，另外最好不要设置边框。
要么将里面表格的宽度以“百分比”的形式设置，此值要小于100%，具体多少适情况而定。
三、编辑表格
（一）选择表格
1、选择整个表格：
左上角或底部边缘；任意单元格+<table>标签
2、选择表格中的行或列：
上边缘，左边缘；拖动鼠标
3、选择单个单元格：
单元格+<td>标签；单元格+Ctrl+A
4、选择单行或矩形单元格块：
鼠标拖动；首单元格+shift+尾单元格
5、选择不相邻的单元格
Ctrl+欲选单元格（再次单击则从选集中删除）
（二）编辑表格和单元格
1、调整表格大小：
三个控制点（水平、垂直、水平+垂直方向）
2、更改列宽和行高：
左右指针或上下指针位置拖动鼠标
3、添加和删除行、列：
当前单元格上面插入一行（修改-表格-插入行）
当前单元格左边插入一列
插入-布局：
插入多行多列（修改-表格-插入行或列）
删除行或列（选择，修改-表格-删除行/列；Del键）
4、拆分和合并单元格：
选择表格，修改-表格-合并/拆分单元格；属性面板中的按钮
【例4-2】：打开例3-1网页文档，编辑表格（边框1，背景灰，边框颜色深灰，合并第一行）5、复制、粘贴单元格
【练习4】：如何制作下图的细线边框表格？
【练习5】：制作简单导航栏
【练习6】：如何制作下图圆角表格？
四、使用表格规划网页布局
（一）在“布局模式”下规划网页布局
表格的三种布局模式：标准、扩展、布局
Dreamweaver CS3在“插入”栏的“布局”类别中提供了“标准”、“扩展”两种表格视图模式，注意在“查看-表格模式-布局模式”中切换：
●“标准”模式：标准模式是表格默认的视图模式，对于表格及其内容的绝大部分操作适
合在该模式下进行。
●“扩展”模式：在标准模式中，当图像填满整个单元格时，很难直接将光标定位在单元
格中，为了解决这个问题，可以切换到“扩展表格”模式。
在“扩展”模式下，Dreamweaver临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。
利用这种模式，可以方便地选择表格中的内容或者精确地定位插入点。
●“布局”模式：专门为方便网页布局而设计的模式，这种模式下的单元格边框是没有宽
度的。
“布局”模式的主要功能是绘制或编辑复杂的表格。
文档窗口的顶部显示“布局模式”，指示当前正处于“布局”模式中，原来页面上的每个表格都显示为布局表格。
1、认识布局单元格和布局表格
●创建布局表格，在布局表格中添加布局单元格
●直接创建布局单元格时，自动创建布局表格
2、绘制布局单元格和布局表格
“布局单元格”不能存在于布局表格之外，可以在“布局表格”中任意位置绘制“布局单元格”；按住Ctrl键拖拽鼠标，实现连续绘制多个“布局表格”或“布局单元格”。
3、选择布局单元格和表格
单元格：点击单元格边框，8个控制点
表格：单击灰色区域
4、移动和调整布局单元格和布局表格：在布局表格内，布局单元格可以任意移动。
鼠标拖动；方向键微调（Shift每次调10像素）
注意：
布局单元格不能在布局表格之外，同一个布局表格中可以放置多个布局单元格，在布局表格中还可以嵌套多个布局表格。
（二）布局的过程
1.设定页面尺寸
●分辨率800x600像素，页面显示尺寸为780x428像素；
●分辨率1024x768像素，页面显示尺寸为1007x600像素。
2.放置功能模块
3.布局细化与调整（选择、调整、移动、修改）
例4-3：在布局模式下规划“游戏网站”主页布局并设置单元格样式
1、新建文档，切换到【布局模式】
2、打开布局插入栏，绘制布局表格（800*600像素）
3、绘制布局单元格（若干）
4、选中布局单元格，属性面板中设置背景色
表格的应用技巧：
强调：如果要将某网页元素（例如一幅图像）放到特定位置，首先应想到使用表格！
1.使用表格还是单元格
2.使用百分比还是像素
3.使用一个大表格还是多个横向表格
练习1方法：在弹出的“表格”属性中设置2行3列，边框为1，单元格间距及边距为0，页眉中选择“Top”，将页眉标题设置为“联系方式”。
表格制作完成后，在第一栏中输入“姓名”、“电话”和“邮件地址”。
练习2方法：在弹出的“表格”属性中设置1行1列，边框为1，单元格间距及边距为0，无页眉。
此时文本和表格边框紧密地贴在一起，在“属性”面板将表格单元格填充值改为5或者更大，这时内容就会和表格分离开来。
练习3制作方法：首先插入一表格，然后将光标置于要插入嵌套表格的单元格中，再插入一表格即可
练习4方法1：利用单元格间距
插入1行1列表格，宽度为300像素，高度为100像素，选中表格：设置表格背景色为所要的边框线颜色，将表格单元格间距设为1，边框及单元格填充设为0；选中单元格：设置单元格背景颜色为网页的背景颜色；
方法2：利用单元格边距
插入1行1列表格，宽度为300像素，高度为100像素，选中表格：设置表格背景颜色为所要的边框线颜色，边框为0，单元格填充设为1，间距为0；在这个表格的单元格内再插入一个新表格，将新表格的背景颜色设为白色，宽度设为100%，单元格填充和单元格间距均高为0
二者区别是什么？
利用第1种方法制作的细线表格拆分成上下两行，此时可以发现表格中间又多了一条细线，而将第2种方法内部嵌套表格拆分成上下现行，表格中间不会出现细线。
练习5方法：插入1行6列的表格，表格宽度为700像素，边框和单元格边距为0，单元格间距为1，背景色设置为橙色（#FF9900），而每个单元格的背景色设置为淡黄色（#FFFFCC）。
在每个单元格中输入文字，观察下效果。
如果觉得字体过大，与表格边框太近，可修改字体大小。
练习6方法：插入一个一行三列的表格，CellPad、CellSpace和Border属性值都为0，在第一列插入图片1.gif，第三列插入图片2.gif，并设置单元格的高度和宽度与图片一致。
设置第二列的背景颜色为与圆角图片一致的颜色，设置宽度为整个表格的宽度减去两个图片的宽度，并打开源代码察看器，删除这列中的字符”   ”（Dreamweaver会自动在每个单元格中插入此字符，若不删除会撑大表格）。
依葫芦画瓢，做好下半部分的圆角。
在已插入的两个表格中间再插入一个一行三列同宽的表格，CellPad、CellSpace和Border 属性值都为0，宽度为100%。
设置第一列和第三列背景颜色为与圆角图片一致的颜色，宽度为1像素，并打开源代码察看器，删除这两列中的字符”  ”。
到这，一个圆角表格就做好了。
