用表格为网页布局
网页的版面设计使用表格布局
任务二（结合自己的网站主题设计页面）
❖ 1.新建一个网页，标题为“*****”； ❖ 2.插入表格布局版面，行数、列数
根据自己的需要来设定； ❖ 3.写上网站名称、制作导航栏； ❖ 4.给“导航栏”填充颜色； ❖ 5.在表格里插入图像。 ❖ 6.保存。
自我评价，梳理小结
❖ 本节课主要内容： ❖ 网页版面设计的步骤是：首先确定大概的页
教学目标
❖ 知识与技能：
❖ 1、认识到网页版面设计的重要性。 ❖ 2、掌握在网页中用表格来布局页面的方法。
❖ 过程与方法：
❖ 能根据
❖ 通过实践创作的过程，形成主动学习和利用信息技术、参与 信息作品创作的态度。
欣赏作品
❖ 比一比 ❖ 设问：哪个页面你更喜欢？
面布局，接着根据需求用单元格在里面细分， 最后进行图文编排。
课后拓展：搜一搜
❖ 搜索自己感兴趣的素材，以丰富自己网页的 内容。
想一想，动一动
❖ Word里是怎样插入表格的呢？
使用表格布局
❖ 插入表格： ❖ 菜单栏上的“插入” →“表格” ❖ 工具栏上的“表格”的图标
任务一
❖ 1、打开dreamweaver 新建一个网页，标题 改为“一起听音乐”；
❖ 2、插入表格：行数为4，列数为5，边框为1； ❖ 3、将第一列的第三、四行合并单元格； ❖ 4、在第五列的后面插入一列。
第3章使用表格布局网页共23页PPT资料
框架的构件，使复杂的Spry框架建立变成了简单的可
视化操作。
14
3.4.1 Spry框架概念
•
Spry框架支持一组用标准HTML、CSS和
JavaScript编写的可重用构件。Spry构件是一个页面
者增加表格的行与列，以及合并或者拆分单元格来
实现。
9
3.2.4 复制及粘贴单元格
•
表格中的单元格就像文本、图片能够被复制与
粘贴一样，单元格也可以复制与粘贴，并且可以在
保留单元格格式化的情况下，复制并且粘贴多个单
元格。表格中的单元格既可以覆盖现有的单元格，
也可以生成新的表格。
10
3.3 布局表格
•
间距
用于设置表格内单元格之间的距离。
清除行高
按钮 ：对行高进行清除
使单元格宽度一致
按钮 ：表格内的单元格宽度自动随着单元格的内容宽 度变化。
删除所有间隔图像 按钮 ：清除表格中的所有间隔图像。
删除嵌套
按钮 ：清除嵌套表格，只有当存在嵌套表格时，该选 项才显示。
类
可以将CSS规则应用于对象
13
3.4 Spry框架
表格Id 行/列
宽
填充 间距
参数
对齐
边框 类 背景颜色 边框颜色 背景图像
含义 设置表格的名称，也就是表格的Id。 在文本框中分别输入表格中行和列的数目 在文本框中输入表格宽度，以像素为单位或按占浏览器窗口宽度的百 分比进行计算。 在文本框中输入单元格内容和单元格边框之间的像素数。 在文本框中输入相邻单元格之间的像素数。 用于确定表格相对于同一段落中其他元素（例如文本或图像）的显示 位置。包括左对齐、右对齐和居中对齐。当对齐方式为【默认】时， 其他内容不显示在表格的旁边。 用于指定表格边框的宽度（以像素为单位）。 可以将CSS规则应用于对象。 设置表格的背景颜色。 设置表格边框的颜色。 为表格添加背景图像。
(教案)浙教版_新教材_八上第12课_《 用表格为网页布局》
1.通过分析不同的页面布局，理解布局在版面设计中的重要性。
2.利用表格规划网页布局，掌握表格的插入、设置等操作方法。
重难点
重点：用表格布局网页。
难点：灵活掌握排列表格和设置表格属性的方法。
课前准备
网页
课时安排
1课时
教师活动
学生活动
设计意图
导
入
1、展示2张素材相同布局不同的网页。
提问①：哪张比较美观？对照课本图12-1至12-4常见网站主页构成图，它属于哪种类型？
一起学习“日积月累”。
学生读读“日积月累”，查找一下自己屏幕的分辨率。
三、插入及编辑表格并完成页面布局
任务②根据自己的网站主页设计，插入表格。
个别学生演示插入表格。
任务③对表格进行拆分，调整单元格。
教师演示，并作页面布局。
学生尝试，演示。
教师个别辅导。
提高任务
完成之前操作的学生确定标题栏目和分栏目，并在主页中插入图片和文字。
部分学生完成
提高任务让一部分学生体会整体网页制作的过程。
课堂展示
展示个别学生的成果，并分析成功和欠缺的地方。
学生分析，教师总结。
培养学生重视学习结果的质量，并从中让他们获得成功的体验。激发学习网页制作的兴趣。
相关资源
2013版初中信息技术八上第三单元教参，素材。
课题
第十二课用表格为网页布局
设计ቤተ መጻሕፍቲ ባይዱ
意图
如何将文字、图像和网页各元素合理、恰当的排放在网页中，使页面易读和美观，是初学者建设网站要考虑的问题。观察一些站点，不难发现，很多网页都是使用表格来组织的。利用表格来布局页面，对于初学者来说易上手，因为它以可视化的形式呈现信息，比较直观，对页面元素定位也比较方便。学生制作的网站最终效果如何，取决于页面布局的合理性，因此，本课对于网页制作有着十分重要的作用。
第三章 使用表格规划网页布局
第三章使用表格规划网页布局一、相关概念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列的表格，再在此表格中插入一表格，此时新插入的表格设置时宽度要小一些，另外最好不要设置边框。
DW网页布局[表格_布局表格]
![DW网页布局[表格_布局表格]](https://img.taocdn.com/s3/m/bdd8e244eef9aef8941ea76e58fafab068dc4460.png)
课堂练习2 制作细线表格在Dreamweaver中 ， 有多种方法可以制作细线 表格 ， 下面我们讲解一种最简单也是最常用的 方法 ， 就是通过设置表格的间距和背景颜色来 制作细线表格。
4. 1.4 合并与拆分单元格1． 合并单元格所谓合并单元格 ， 就是将相邻的几个单元格合 并成一个单元格。
课堂练习4 制作圆角表格在浏览网页时 ， 经常会看到圆角表格 ， 这使得 整个网页看起来更加柔和 、美观。制作圆角表格的方法有很多 ， 下面就以制作下 图左侧的表格为例 ， 具体讲解一下此类表格的 制作方法。
4.2使用布局表格布局网页4.2. 1.模式简介及注意事项在dw中使用表格有以下3种模式：•标准模式： 具体内容添加和显示的模式。•表格扩展模式： 使用表格对页面进行布局的模式 ， 也是 传统模式。•布局模式： 使用布局表格对页面进行布局的模式 ， 可以 在添加内容前使用布局单元格和表格来对页面进行布局；也可以在布局模式中将文本 、 图像和其他内容添加到布局 单元格中 ， 这和在标准模式中一样。布局模式同时具有表格和层的共同性质 ， 继承了层的准确 定位和可移动性 ， 还继承了表格的行列属性。
布局单元格只能添 加在布局表格中
可以在原有布局表格 的下方添加布局表格
绘制完布局表格后的代码：<table width= "250 " border= "0 " cellpadding= "0 "cellspacing= "0 " >< !--DWLayoutTable-- ><tr><td width= "250 " height= " 197 " > </td></tr></table><table width= " 70 " border= "0 " cellpadding= "0 "cellspacing= "0 " >< !--DWLayoutTable-- ><tr><td width= " 70 " height= " 146 " > </td></tr></table>布局表格和布局单元格本质上还是表格和单元格 ， 只是在添加布局表格和布局单元格时dw自动添加了其它空 白单元格。
用表格为网页布局
表格布局的优点
简单易用
01
表格布局简单直观，容易上手，适合初学者使用。
结构清晰
02
表格能够清晰地展示页面内容，使页面结构化，便于阅读和理
解。
兼容性好
03
表格布局在各种浏览器中都有较好的兼容性，不易出现排版问
用表格为网页布局
目录
CONTENTS
• 表格布局的基本概念 • 表格布局的常见应用场景 • 使用表格进行网页布局的技巧 • 表格布局的未来发展 • 表格布局的实例分析
01 表格布局的基本概念
CHAPTE种使用HTML表格元素 来创建网页布局的方法。它通过将页 面内容组织成表格形式，实现页面的 结构化和排版。
腾讯问卷表单制作
腾讯问卷表单制作使用表格来构建问卷的结构和问题选项。
表格布局使得问卷结构清晰，易于填写和提交，提高了问卷的完成率和准 确性。
腾讯问卷表单制作的表格布局还支持多种表单元素，如单选框、复选框、 文本框等，以满足不同问卷的需求。
谢谢
THANKS
数据展示
数据对比
表格是展示数据对比的理想方式，可以将不 同数据列进行比较，方便用户快速了解数据 之间的差异。
数据汇总
表格可以用于数据汇总，将大量数据按照一定规则 进行分类和整理，以表格形式呈现，方便用户查看 和分析。
数据可视化
通过使用颜色、字体、边框等样式属性，可 以将表格数据以可视化的方式呈现，提高数 据的可读性和易用性。
加载页面，提高用户体验。
淘宝网首页的表格布局还结合了CSS样式，实现了美观的页面效
03
果。
新浪微博数据展示页
利用表格布局网页教案
利用表格布局网页教案教案标题：利用表格布局网页教案教学目标：1. 了解表格布局的基本概念和原理。
2. 掌握使用HTML和CSS创建基本的表格布局。
3. 能够灵活运用表格布局设计网页。
教学准备：1. 计算机和互联网连接。
2. HTML和CSS编辑器软件。
3. 示例网页代码和相关图片素材。
4. 课堂展示设备。
教学过程：Step 1: 引入表格布局概念（5分钟）介绍表格布局的基本概念和原理，解释为什么表格布局在网页设计中非常有用。
Step 2: HTML表格结构（10分钟）解释HTML表格的基本结构，包括表格、行和单元格的标签及其属性。
演示如何创建一个简单的表格。
Step 3: CSS样式设置（15分钟）说明如何使用CSS样式设置表格的外观，包括表格边框、背景颜色、字体样式等。
演示如何应用样式到表格中。
Step 4: 表格布局设计（20分钟）展示一些常见的表格布局设计示例，如网站导航菜单、产品特性比较、课程时间表等。
解释如何将内容合理地安排在表格中。
Step 5: 实践操作（30分钟）让学生动手实践，在编辑器中创建自己的网页，并使用表格布局设计页面结构。
提供示例代码和图片素材供学生参考。
Step 6: 学生展示和讨论（15分钟）让学生展示他们设计的网页，并就设计选择、布局优化等方面进行讨论和反馈。
Step 7: 总结和拓展（5分钟）总结表格布局的优点和应用场景，并鼓励学生进一步探索其他网页布局方式。
教学评估：1. 学生在实践操作中的表现和成果。
2. 学生对表格布局的理解和应用能力。
3. 学生在展示和讨论环节的参与和表达能力。
教学延伸：1. 鼓励学生进一步研究和尝试其他网页布局方式，如Flexbox和Grid布局。
2. 引导学生学习响应式设计，掌握如何使用媒体查询和表格布局来适应不同屏幕尺寸。
教学反思：根据学生的实际情况和学习进度，灵活调整教学过程中的时间分配和内容讲解，确保学生能够理解和掌握表格布局的基本原理和应用技巧。
用表格规划布局
常见的网页布局形式： 常见的网页布局形式：
封面型
国字型
拐角型
标题正文型
常见的网页布局形式：其他布局类型 常见的网页布局形式：
任务：完成“我的家乡”主页的表格结 完成“我的家乡”
构
图片 网站导航
青岛概况 青岛旅游 青岛经济 青岛与奥运
网站标题
文字
内容标题
图片
文字
网站设计主页的布局
参 考 主 题
奥运冠军榜 校园风景线 宠物狗世界
班级主页 汽车之家 个人风采
总 结
表格在网页设计中的重要作用 利用表格可以使网页内容条理布局清晰 布局表格制作的技术要求并不高， 布局表格制作的技术要求并不高，网页的 布局结构来源于你的思想和创意。 布局结构来源于你的思想和创意。
多观察、多积累、多思考！ 多观察、多积累、多思考！
用表格布局网页教案
用表格布局网页教案第一章：表格布局网页概述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 课后作业学生完成一个表格布局的响应式网页设计，并在不同设备上测试其表现。
八：HTML之表格嵌套和用表格实现网页布局
⼋：HTML之表格嵌套和⽤表格实现⽹页布局⼀：表格嵌套嵌⼊表格说明 1.完整表格结构 2.放到td标签中⼆：⽤表格实现⽹页布局，⽤表格做⼀个页⾯框架页⾯结构实现布局<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!-- width="100%"充满屏幕 --><table width="100%" bgcolor="#f2f2f2"><!-- 页头start --><tr height="80px" bgcolor="14191e"><td>11111111111</td></tr><!-- 页头end --><!-- 上空⾏start --><tr height="10px"><td></td></tr><!-- 上空⾏end --><!-- 主体内容start --><tr><td><table align="center" width="1024px"><tr><!-- 左内容start --><td width="240px" valign="top"><table width="100%" bgcolor="#ffffff" ><tr><td align="center" height="60px">关于我们</td></tr><tr><td align="center" height="60px">团队介绍</td></tr><tr><td align="center" height="60px">⼈才招聘</td></tr><tr><td align="center" height="60px">联系我们</td></tr><tr><td align="center" height="60px">常见问题</td></tr><tr><td align="center" height="60px">意见反馈</td></tr><tr><td align="center" height="60px">友情链接</td></tr></table></td><!-- 左内容end --><!-- 空隙start --><td width="20px"></td><!-- 空隙end --><!-- 右内容start --><td width="764px" bgcolor="#ffffff"><pre>HTML称为超⽂本标记语⾔，是⼀种标识性的语⾔。
用表格布局页面的方法和技巧
选中表格，在工具栏中选择“平均分 布行高和列宽”选项，可以使表格中 的行高和列宽均匀分布。
添加和删除行或列
添加行或列
将光标放在需要插入行的位置， 选择“插入行”或“插入列”选 项；或者在选中行或列后，右键 选择“插入行”或“插入列”。
删除行或列
选中需要删除的行或列，选择“ 删除行”或“删除列”选项；或 者在选中行或列后，右键选择“ 删除行”或“删除列”。
数据展示
表格布局适用于展示大量数据，如销售数据、用户信息等，方便用户进行比较和分析。
信息列表
对于需要展示一系列信息的情况，如新闻报道、产品列表等，表格布局可以清晰地呈现各个项目 的相关信息。
导航菜单
在网页设计中，表格布局可以用于制作垂直或水平的导航菜单，使菜单结构更加清晰和易于使用 。
02
表格布局的创建方法
总结词
使用适当的图片和图表
详细描述
对于需要展示大量数据的表格，可以使用适当的图片和图 表来代替部分数据，以减少数据量和提高加载速度。但需 要注意图表的可读性和解释性。
总结词
异步加载和分页
详细描述
通过异步加载和分页的方式，可以将表格分成多个部分， 逐页或逐块加载数据，减少一次性加载的数据量，提高页 面加载速度。
表格布局的优点
1 2
3
结构清晰
表格布局通过行和列的划分，使页面内容结构化，便于用户 快速理解和获取信息。
信息展示直观
表格可以容纳多种类型的数据，如文字、数字、图片等，使 信息展示更加直观和丰富。
易于维护
表格布局具有较好的可维护性，可以通过添加、删除或修改 单元格来调整页面内容。
表格布局的适用场景
05
表格布局的常见问题和解决 方案
第15课 用表格为网页布局
第15课用表格为网页布局一、教学目标认知目标：让学生学会插入表格，修改表格属性过程与方法：用学生提问教师引导的互动方式，和学生探究结合情感态度和价值观：培养学生灵活运用所学的信息技术知识去创设新的用法二、重点难点教学重点：本课的教学重点是插入表格和更改表格属性。
教学难点：本课难点是让学生灵活掌握排列表格和设置表格属性的方法。
三、环境与素材1．教学环境：多媒体网络教室，学生计算机中安装IE5.0以上版本及Fron tpage2000以上中文版，要求最好能上因特网。
2．教学素材：准备好一些具有代表性的版面设计优美合理的网站主页面作为参考；四、教学过程（一）课前谈话：（在上课之前完成）该游戏结束后再喊上课！教师：同学们，你们好，我听说你们都很聪明，你们能不能回答老师几个问题呢？脑筋急转弯：两条腿的猫是什么猫？答：机器猫！问：两条腿的狗是什么狗？答：史怒比！问：两条腿的老鼠是什么鼠？答：米老鼠！问：两条腿的鸭是什么鸭答：唐老鸭？？？鸭都是两条腿？？）学生可能哈哈大笑。
教师总结：不要让以前的思维定势影响你对一个事物的判断，我们今天学习的frontpage中的表格正是这种情况，前面我们是在word学习表格，是用来规类信息的，今天这节课的表格是用来排版布局。
上节课我们已经了解了frontpage的一些常规操作，建立了我们的家――网站站点文件夹、图像文件夹。
那么，今天呢，我们就一起在frontpage中为我们的网站搭建框架。
（二）新授课：1、拼图游戏导入新课课件出示一幅还没有完成的拼图游戏。
师：这是我们小时候都玩过的拼图游戏，老师已经把图片都放在××目录下了，同学们能不能在网页里把这些图片碎片摆成完整的画面？请学生发言生：不能回答或者说：插入图片教师布置任务：给同学们3分钟时间，打开frontpage在里面试着完成，当老师的音乐停止的时候，请你们停下来好吗。
（播放音乐，可以选择比较紧张快节奏的音乐）根据学生回答，让学生尝试。
用表格实现页面布局案例_HTML CSS JavaScript网站开发实用技术_[共4页]
![用表格实现页面布局案例_HTML CSS JavaScript网站开发实用技术_[共4页]](https://img.taocdn.com/s3/m/6702380480eb6294dd886ce2.png)
83 <font size="2"><a href="#">特色美食</a></font>
</td>
<td align="center">
<font size="2"><a href="#">购物街区</a></font>
</td>
</tr>
</table>
</div>
<table width="800" border="1" cellspacing="0">
<!--此处省略表格定义语句，详见示例3-09表格定义部分-->
……
</table>
</body>
</html>
图3-10 示例3-8定义的图层效果
3.4 应用案例
3.4.1 用表格实现页面布局案例
示例3-9在网页中先后定义了1个表格和6个嵌套表格。
外层表格为3行2列，在第1行第1个单元格中嵌套了1个10行1列的表格，作为网站的导航目录；第1行第2个单元格跨3个横行，其中嵌套了5个2行2列的表格，制作了5个模块的内容简介。
图3-11和图3-12分别给出了初始的布局示意图和最终的布局示意图。
为了方便读者区分，下列代码中的每一对<table></table>
标记已使用不同的格式进行标识。
图3-11 初始的布局示意图。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1 2
网页的布局
表格定位
3
表格的修改
标题栏 导航栏
栏目内容
版权说明
导航栏型
半包围型
主题突出 型
居中型
页面布局的设计没有限定的规则， 只要配合网站内容，让访问者感觉网 页布局能烘托主题、简洁、美观、操 作方便就可以了。
网络拾贝 网络交流 网络安全 网络生活
标题栏
导航栏导航栏主题图源自导航栏 导航栏请你根据自己确定的主题， 设计主页布局图吧！
使用表格布局网页 表格能实现网页中元素的定位，排版 的功能，使页面布局整齐、美观。 使用表格布局网页是普遍使用的办法哦！
标题栏
网络拾贝 网络交流 主题图 网络安全 网络生活 版权说明
6行3列
根据自己设计好的网站主页布局草图，利用表格进行布局。
在网站主页中插入图片、输入文字。
做好后保存上传整个站点文件夹。