第5章 使用表格排版网页
合集下载
第5章 网页布局
图5-11 单元格间距为8
返回本节
第5章 网页布局
5.2.1 在页面中插入表格
5．页眉设置 页眉设置其实就是为表格选择一个加粗文字的标题栏，这样对于 要求标题以默认粗体显示的表格，省去了每次手工执行加粗动作，提 高了工作效率。可将页眉设置为无、左部、顶部，或者左部和顶部同 时设置。如图5-12和图5-13就是分别将页眉设置在左部和顶部时的效 果。
5.2.3 表格标签
第5章 网页布局
5.2.4 在普通模式下用表格布局网页
表格是最常用的网页布局实现方式。在表格中，很容易实现表格行和 列的大小操作，从而方便地实现网页布局。本节通过实例介绍利用表格进 行网页布局的方法。 网页布局实例效果如图5-20。这个页面是由4个表格组成的，某些单 元格中又嵌套有表格。布局示意图如图5-21示。表1为网页的顶部，包括 网站的Logo及Banner；表2是网站导航条；表3是页面的主体区，包括左侧 的文章列表，右侧的其他链接和下部的搜索条，其中分别嵌套有小表格； 表4是网站的底部，是网站的版权栏。
第5章 网页布局
第5章 网页布局
网站的设计，不仅体现在具体内容与细节的设计制作上， 也需要对框架进行整体的把握。在进行网站设计时，需要对网 站的版面与布局进行一个整体性的规划。
本章主要内容：
网页布局类型 用表格进行网页布局
框架
用CSS进行网页布局
开 始
第5章 网页布局
5.1
网页布局类型述
5.2.2 设置表格属性
在页面中插入表格以后，可以在“属性”面板中对表格进行设置，除 了某些属性和“表格”对话框中的设置一样外，还可以设置表格的背景 颜色、边框颜色和对齐方式等属性。
图5-14 表格属性面板
第5章 表格布局
3． 表格细线的制作。
5.4 应用表格布局页面―――布局案例
5.5.2
网 页 制 作 基 础 教 程
案例分析
页眉区 导航栏区 信息区为 三个嵌套 的表格
左信息 区
中信息区
右信息 区
其他区均 为宽度一 致的独立 表格
版权区
5.4 应用表格布局页面―――布局案例
网 页 制 作 基 础 教 程
5.5.3 实现步骤 一、设计页眉区
181 411 156
5.4 应用表格布局页面―――布局案例
三、设计信息区
网 页 制 作 基 础 教 程 2.设计主内容区 T32：2×3表，宽100%，边框为0，边距为0， 间距为0 第一行：设置各单元格背景图像，输入栏目 名称 第二行：合并第二行 T321：在第二行插入1×1表，宽100%， 边框为1，白色，单元格边框为1，绿色。 拆分T321为2列，第一列输入具体内容， 第二列设置132×145的图像占位符。 复制和T32表，更名，并添加内容
网 页 制 作 基 础 教 程
页面布局理论
5.2.2
网页布局类型
拐角型
5.3
网 页 制 作 基 础 教 程
页面布局理论
5.2.2
网页布局类型
标题正文型
5.3
网 页 制 作 基 础 教 程
页面布局理论
5.2.2
网页布局类型
左右框架型
5.3
网 页 制 作 基 础 教 程
页面布局理论
5.2.2
网页布局类型
应用表格布局页面——足球明星
5.1.2 案例分析
“足球明星”页面Photo.htm是采用表格布局， 将图片的排列在表格的单元格中，再加上图片说 明。从中可使读者掌握：
5.4 应用表格布局页面―――布局案例
5.5.2
网 页 制 作 基 础 教 程
案例分析
页眉区 导航栏区 信息区为 三个嵌套 的表格
左信息 区
中信息区
右信息 区
其他区均 为宽度一 致的独立 表格
版权区
5.4 应用表格布局页面―――布局案例
网 页 制 作 基 础 教 程
5.5.3 实现步骤 一、设计页眉区
181 411 156
5.4 应用表格布局页面―――布局案例
三、设计信息区
网 页 制 作 基 础 教 程 2.设计主内容区 T32：2×3表，宽100%，边框为0，边距为0， 间距为0 第一行：设置各单元格背景图像，输入栏目 名称 第二行：合并第二行 T321：在第二行插入1×1表，宽100%， 边框为1，白色，单元格边框为1，绿色。 拆分T321为2列，第一列输入具体内容， 第二列设置132×145的图像占位符。 复制和T32表，更名，并添加内容
网 页 制 作 基 础 教 程
页面布局理论
5.2.2
网页布局类型
拐角型
5.3
网 页 制 作 基 础 教 程
页面布局理论
5.2.2
网页布局类型
标题正文型
5.3
网 页 制 作 基 础 教 程
页面布局理论
5.2.2
网页布局类型
左右框架型
5.3
网 页 制 作 基 础 教 程
页面布局理论
5.2.2
网页布局类型
应用表格布局页面——足球明星
5.1.2 案例分析
“足球明星”页面Photo.htm是采用表格布局， 将图片的排列在表格的单元格中，再加上图片说 明。从中可使读者掌握：
表格布局网页
表格布局网页教学目标：1．知识与技能（1）理解网页设计中表格的作用。
（2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中准确插入文字和图片。
（3）能够根据网页设计内容，准确布局表格的结构，掌握表格嵌套的设计方法。
（1）掌握软件学习中的比照学习法，培养学生迁移学习的水平。
（2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维水平。
（3）通过自主探究，使学生掌握软件的使用规则，由摸索、探究性学习到形成性学习，培养学生学会学习，驾御学习的水平。
3．情感态度与价值观（1）通过比照学习使学生体验软件学习的一般方法及规律，提升学生自主学习信息技术的水平。
（2）通过使用表格布局网页对象活动（各人根据网站主题，设计网页），进一步掌握各种不同对象的属性设置方法和规律，体验创造的快乐。
（3）通过“动物——人类的朋友”表格页的设计与制作，再次激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。
教学重点、难点：1．教学重点：（1）理解表格在网页设计中的重要作用和功能。
（2）掌握插入、编辑表格的方法及表格的属性设置方法。
（3）掌握单元格的修饰与属性设置。
2．教学难点：表格的嵌套设计在网页设计中的应用。
教学方法：比照教学法、探究学习法、模仿学习法。
教学准备：各自制作的站点文件夹，整理、归类相关素材并按要求摆放。
教学过程：1．复习以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入，学生认真回顾，回答教师提问。
为本节课教学做一定铺垫。
2．引入（1）观看两个页面并实行比较：一个使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定规律；另一个页面凌乱，图文混杂，摆放杂乱。
你更喜欢怎样的页面布局？提出问题：有什么办法能够达到第一个页面的效果？（2）观察第三个页面，内容与第一个页面相同，显现页面的表格边框。
Dreamweaver CC实用教程 第5章 使用表格进行网页布局
表格排序
第5章 使用表格进行网页 布局
在Dreamweaver中，允许对表格的内容以字母和数字进行排序，对表格内容进行排序可按如下
操作步骤进行。 第1步：选定需要排序的表格。 第2步：执行“命令>排序表格”菜单命令，打开对话框。
第3步：在“排序按”下拉列表中列出了选定表格的所有列。这里选择第3列“数学”。
5.6.1 导入表格数据
Dreamweaver能与其他文字编辑软件进行数据交换，在其他软件创建的表格数据可以导入Dreamweaver
中转化为表格，同样也能将Dreamweaver中的表格数据导出。
14
5.6.2 导出表格数据
导出表格数据的操作步骤如下。 第1步：将光标放置到要导出数据的表格中。 第2步：执行“文件>导出>表格”菜单命令，打开如图所示的对话框。 第3步：在“定界符”下拉列表中选择分隔符，这里包括“空白键”、“逗号”、“ 分号”、“冒号”。 第4步：在“换行符”下拉列表中选择将要导出文件的操作系统，这里包括Windows 、Mac和UNIX。 第5步：单击 按钮，打开“表格导出为”对话框，如图所示。 第6步：在“文件名”文本框中输入导出文件的名称。 第7步：单击 按钮，表格数据文件即被导出了。
第5章 使用表格进行网页 布局
5.3.3 单元格的合并及拆分
在制作网页的过程中，有时需要合并或拆分单元格，下面将分别介绍合并或拆分单元 格的操作方法。 1.单元格的合并 2.单元格的拆分
8
即学即用：制作商品促销网页
学习使用单元格的合并及拆分来制作网页的方法。
第5章 使用表格进行网页 布局
9
5.4
第4步：在“顺序”下拉列表中选择“按字母顺序”或“按数字顺序”。当列的内容是数字时， 选择“按字母排序”可能会产生这样的顺序：2、20、3、30、4，因此这种排序方式不一定按照数字 的大小来排序。 第5步：在“升序”下拉列表框中选择按“升序”或“降序”排列。 第6步：在“再按”下拉列表中，可以选择作为第二排序依据的列。同样，也可以在“顺序”下 拉列表中排序。 第7步：在“选项”区域中，可以选择“排序包含第一行”、“排序标题行”、“排序脚注行” 和“完成排序后所有行颜色保持不变”复选框，可根据需要进行设置。 第8步：设置完成后，单击 按钮，表格即被排序，如图所示，是一个把第3列（也就是“数学”列） 按升序排列后的表格。
第五章.网页布局(表格处理)
第五章：表格的处理
1、表格的作用：
1>存放数据2>布局页面
2、插入表格
步骤：
1)单击网页需要插入表格的地方
2)在菜单栏选择“插入记录>>表格命令，或者单击“常用“或者单击“常用“工具栏里的
“表格“按钮ctrl+Alt+T
3、设置表格大小
行数和列数:
表格宽度:表示表格在页面中宽度的大小。
像素设置的是表哥宽度的实际值，百分比设置的是表格与页面宽度的相对比值。
边框粗细:设置表格边框的粗细效果。
单元格边距:是指单元格中填充内容距离边框的距离大小。
单元格间距:是指相邻单元格之间的距离。
概念:单元格，指的是表格里的每一一个格子，就叫做单元格。
4、页眉与辅助功能
页眉:用于设置表格的行或列的标题
无:表示不设置表格的行或列的标题
左:表示- -行归为一-类，可以为每行在第一-栏设置一-个标题顶部:表示一列归为一类，可以为每列在头一栏设置一个标题
两者:表示可以同时输入“左”端和“顶部"的标题标题:设置表格的标题名称，默认会出现在表格的上方。
摘要:为表格的备注，不会在网页中显示。
用表格为网页布局
表格布局在早期的网页设计中被广泛 使用，但随着CSS技术的发展，它逐 渐被视为一种过时的布局方式。
表格布局的优点
简单易用
01
表格布局简单直观，容易上手，适合初学者使用。
结构清晰
02
表格能够清晰地展示页面内容，使页面结构化，便于阅读和理
解。
兼容性好
03
表格布局在各种浏览器中都有较好的兼容性，不易出现排版问
用表格为网页布局
目录
CONTENTS
• 表格布局的基本概念 • 表格布局的常见应用场景 • 使用表格进行网页布局的技巧 • 表格布局的未来发展 • 表格布局的实例分析
01 表格布局的基本概念
CHAPTE种使用HTML表格元素 来创建网页布局的方法。它通过将页 面内容组织成表格形式，实现页面的 结构化和排版。
腾讯问卷表单制作
腾讯问卷表单制作使用表格来构建问卷的结构和问题选项。
表格布局使得问卷结构清晰，易于填写和提交，提高了问卷的完成率和准 确性。
腾讯问卷表单制作的表格布局还支持多种表单元素，如单选框、复选框、 文本框等，以满足不同问卷的需求。
谢谢
THANKS
数据展示
数据对比
表格是展示数据对比的理想方式，可以将不 同数据列进行比较，方便用户快速了解数据 之间的差异。
数据汇总
表格可以用于数据汇总，将大量数据按照一定规则 进行分类和整理，以表格形式呈现，方便用户查看 和分析。
数据可视化
通过使用颜色、字体、边框等样式属性，可 以将表格数据以可视化的方式呈现，提高数 据的可读性和易用性。
加载页面，提高用户体验。
淘宝网首页的表格布局还结合了CSS样式，实现了美观的页面效
03
果。
新浪微博数据展示页
表格布局的优点
简单易用
01
表格布局简单直观，容易上手，适合初学者使用。
结构清晰
02
表格能够清晰地展示页面内容，使页面结构化，便于阅读和理
解。
兼容性好
03
表格布局在各种浏览器中都有较好的兼容性，不易出现排版问
用表格为网页布局
目录
CONTENTS
• 表格布局的基本概念 • 表格布局的常见应用场景 • 使用表格进行网页布局的技巧 • 表格布局的未来发展 • 表格布局的实例分析
01 表格布局的基本概念
CHAPTE种使用HTML表格元素 来创建网页布局的方法。它通过将页 面内容组织成表格形式，实现页面的 结构化和排版。
腾讯问卷表单制作
腾讯问卷表单制作使用表格来构建问卷的结构和问题选项。
表格布局使得问卷结构清晰，易于填写和提交，提高了问卷的完成率和准 确性。
腾讯问卷表单制作的表格布局还支持多种表单元素，如单选框、复选框、 文本框等，以满足不同问卷的需求。
谢谢
THANKS
数据展示
数据对比
表格是展示数据对比的理想方式，可以将不 同数据列进行比较，方便用户快速了解数据 之间的差异。
数据汇总
表格可以用于数据汇总，将大量数据按照一定规则 进行分类和整理，以表格形式呈现，方便用户查看 和分析。
数据可视化
通过使用颜色、字体、边框等样式属性，可 以将表格数据以可视化的方式呈现，提高数 据的可读性和易用性。
加载页面，提高用户体验。
淘宝网首页的表格布局还结合了CSS样式，实现了美观的页面效
03
果。
新浪微博数据展示页
中文版DreamweaverCS6网页制作实用教程第五章使用表格布局网页
(1) 单击【表格】按钮
(2)【表格】对话框
图 5-4 打开【表格】对话框
【表格】对话框中比较重要的选项功能如下。
-93-
中文版 Dreamweaver CS6 网页制作实用教程
【行数】文本框：可以在文本框中输入表格的行数。 【列数】文本框：可以在文本框中输入表格的列数。 【表格宽度】文本框：可以在文本框中输入表格的宽度，在右边的下拉列表中可以选 择度量单位，包括【百分比】和【像素】两个选项。 【边框粗细】文本框：可以在文本框中输入表格边框的粗细。 【单元格边距】文本框：可以在文本框中输入单元格中的内容与单元格边框之间的距 离值。 【单元格间距】文本框：可以在文本框中输入单元格与单元格之间的距离值。
5 .2 在 Dreamweaver 中使用表格
在 Dreamweaver 中，表格可以用于制作简单的图表，使用表格来显示数据，可以更加方便 地进行查看、修改或分析。表格不仅可以为网页页面进行宏观布局，还能够使页面中的文本、 图像等元素更有条理。在网页中插入表格后，还可以在表格中插入嵌套表格。
5 .2.1 在网页文档中插入表格
(1) 打开表格
图 5-5 插入嵌套表格
(2) 嵌套表格
5 .2.2 选择表格与单元格
选择表格是对表格进行编辑操作的前提。在 Dreamweaver 中，用户可以一次选择整个表、 行或列，也可以选择连续的单元格。
1. 选择整个表格 在 Dreamweaver 中，要选择整个表格对象，用户可以使用以下几种方法：
5 .1.1 表格简介
表格是用于在 HTML 页面上显示表格式数据以及对文本和图形进行布局的工具。表格由一 行或多行组成，每行又由一个或多个单元格组成。
当选定栏表格或表格中有插入点时，Dreamweaver 将显示表格宽度和每个表格列的列宽，
表格布局网页
96%
194
193
95% 94%
1*154
700*33
193*22
96%*34
96%
194
193
95% 94%
1
100%
96%
700*20
小结
利用表格布局网页 （1）插入表格 设置表格属性（table） （2）设置表格属性（table） 设置单元格属性（td） （3）设置单元格属性（td） 设置行属性（tr） （4）设置行属性（tr）
Flash型 型
网页布局常用技术
–表格 最常用的技术，简单可靠、兼容性好 –DIV标签 目前比较流行的技术，设计难度较大 –框架 适合将多个页面组合在一起
网页布局分析
个 格 组
表格的基本操作
• 表格的基本操作 –插入表格（table） –合并单元格(td) –修改行(tr)数、列数 • 表格属性的设置 –宽(width)、高(height)、对齐方式(align) –边框(border)、填充(cellPadding)、间距(cellSp acing) –背景颜色(bgColor)、边框颜色(bordercolor)、背 景图像(background)
网页布局
网页版面的布局
• 网页的版面布局主要指网站主页的版面布局， 其他网页的版面与主页风格基本一致。为了达到 最佳的视觉表现效果，应讲究整体布局的合理性， 使浏览者有一个流畅的视觉体验。常见的版面布 局有“国”字型、“厂”字型、“框架”型、 “封面”型和Flash型。
国字型
厂字型
框架型
封面型
作业
下面的两个页面任选其一 注意： 注意：第一个页面的颜色必须修改
作业
作业
预习
利用表格布局网页
网页设计与制作
第五讲 利用表格布局网页
芜湖职业技术学院 信息工程系
本讲要点：
• 表格的基本操作 插入表格、选择表格、设置表格、调整大小 • 利用表格进行布局的方法
插入表格
在网页制作中， 对页面进行布局是非 常重要的，表格就是 页面布局中常用的方 式。Dreamweaver 不仅支持在表格中有 序地排列数据，还可 用表格对网页中的文 本、图像及其他元素 进行定位。
* 尺寸选择：
目前一般800X600的分辨率为约定俗成的浏览模式。 所以为了照顾大多数访问者，你页面的尺寸以800X600的 分辨率为准。 * 造型的选择： 先在白纸上画出象征浏览器窗口的矩形，这个矩形就 是你布局的范围了。
2. 软件布局法 如果你不喜欢用纸来画出你的布局意图，那 么你还可以利用软件来完成这些工作。这个软件 就是Photoshop。Photoshop所具有的对图像的编 辑功能用到设计网页布局上更显得心应手。不像 用纸来设计布局，利用Photoshop可以方便的使用 颜色，使用图形，并且可以利用层的功能设计出 用纸张无法实现的布局意念。
在Dreamweaver 中提供了多个表格模板供用户选择使用， 还可以通过设置模板的参数来调整表格的外观。
表格嵌套
嵌套表格是表格布局中一个十分重要的环 节，它是指在一个表格的单元格中再插入一 个表格，嵌套表格的宽度受所在单元格的宽 度限制，其编辑方法与表格相同。
利用表格进行简单页面布局
表格的高级应用技巧
3. 框架布局 从布局上考虑，框架结构不失为一个好的布局方法。它如同表格 布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消 边框，所以一般来说不影响整体美观。
表格数据的导出
因为语言原因，导出的文件只能用写字板 打开才能正确显示其中的数据，在其他程 序中打开会乱码。
第五讲 利用表格布局网页
芜湖职业技术学院 信息工程系
本讲要点：
• 表格的基本操作 插入表格、选择表格、设置表格、调整大小 • 利用表格进行布局的方法
插入表格
在网页制作中， 对页面进行布局是非 常重要的，表格就是 页面布局中常用的方 式。Dreamweaver 不仅支持在表格中有 序地排列数据，还可 用表格对网页中的文 本、图像及其他元素 进行定位。
* 尺寸选择：
目前一般800X600的分辨率为约定俗成的浏览模式。 所以为了照顾大多数访问者，你页面的尺寸以800X600的 分辨率为准。 * 造型的选择： 先在白纸上画出象征浏览器窗口的矩形，这个矩形就 是你布局的范围了。
2. 软件布局法 如果你不喜欢用纸来画出你的布局意图，那 么你还可以利用软件来完成这些工作。这个软件 就是Photoshop。Photoshop所具有的对图像的编 辑功能用到设计网页布局上更显得心应手。不像 用纸来设计布局，利用Photoshop可以方便的使用 颜色，使用图形，并且可以利用层的功能设计出 用纸张无法实现的布局意念。
在Dreamweaver 中提供了多个表格模板供用户选择使用， 还可以通过设置模板的参数来调整表格的外观。
表格嵌套
嵌套表格是表格布局中一个十分重要的环 节，它是指在一个表格的单元格中再插入一 个表格，嵌套表格的宽度受所在单元格的宽 度限制，其编辑方法与表格相同。
利用表格进行简单页面布局
表格的高级应用技巧
3. 框架布局 从布局上考虑，框架结构不失为一个好的布局方法。它如同表格 布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消 边框，所以一般来说不影响整体美观。
表格数据的导出
因为语言原因，导出的文件只能用写字板 打开才能正确显示其中的数据，在其他程 序中打开会乱码。
用表格布局网页教案
用表格布局网页教案第一章：表格布局网页概述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 课后作业学生完成一个表格布局的响应式网页设计，并在不同设备上测试其表现。
使用表格讲义布局网页
•将鼠标光标移至表格外框线上，当鼠标光标变为 形状时， 单击鼠标左键。
•在表格内部任意单元格中单击鼠标左键，然后在标签选择器 中单击对应的“<table>”标签 。
•将插入点置于表格的任意单元格中，表格上方或下方将显示 绿线标志，单击最上方或最下方标有表格宽度的绿线中的 ， 在弹出的下拉菜单中选择“选择表格”命令。
2．合并单元格
所谓合并单元格，就是将相邻的两个或多个单元 格合并成一个单元格。 拖动鼠标选中要合并的连续单元格（此处为第1行 中间的2个单元格），然后单击属性检查器上的 “合并所选单元格，使用跨度”按钮 ，则2个单 元格合并为1个单元格
4.2.2 插入、删除行和列
在使用表格组织大量信息时，往往需要在创建好的 表格中添加或删除行与列，以增加或减少记录。
此处表示未
明确设置单
元格宽度
列
行
此处显示了表格 的宽度。如果只 显示一个“▼”
单元格
符号，表示未明 确设置表格宽度
4.1.1 创建表格
Dreamweaver CS4拥有非常完善的表格编辑 功能，本节我们首先来看一下如何在网页文档中 创建表格。
4.1.2 选择表格和单元格
1．选择表格
•将鼠标光标移至单元格边框线上，当鼠标光标变为 或 形 状时单击鼠标左键。
精品jing
使用表格布局网页
4.1 表格基本操作
表格（Table）是由一个或多个单元格构成的集合， 表格中横向的多个单元格称为行（在HTML语言中 以<tr>标签开始，</tr>标签结束），垂直的多个 单元格称为列（以<td>标签开始，</td>标签结
束），行与列的交叉区域称为单元格，网页中的元 素就放置在这些单元格中 。
•在表格内部任意单元格中单击鼠标左键，然后在标签选择器 中单击对应的“<table>”标签 。
•将插入点置于表格的任意单元格中，表格上方或下方将显示 绿线标志，单击最上方或最下方标有表格宽度的绿线中的 ， 在弹出的下拉菜单中选择“选择表格”命令。
2．合并单元格
所谓合并单元格，就是将相邻的两个或多个单元 格合并成一个单元格。 拖动鼠标选中要合并的连续单元格（此处为第1行 中间的2个单元格），然后单击属性检查器上的 “合并所选单元格，使用跨度”按钮 ，则2个单 元格合并为1个单元格
4.2.2 插入、删除行和列
在使用表格组织大量信息时，往往需要在创建好的 表格中添加或删除行与列，以增加或减少记录。
此处表示未
明确设置单
元格宽度
列
行
此处显示了表格 的宽度。如果只 显示一个“▼”
单元格
符号，表示未明 确设置表格宽度
4.1.1 创建表格
Dreamweaver CS4拥有非常完善的表格编辑 功能，本节我们首先来看一下如何在网页文档中 创建表格。
4.1.2 选择表格和单元格
1．选择表格
•将鼠标光标移至单元格边框线上，当鼠标光标变为 或 形 状时单击鼠标左键。
精品jing
使用表格布局网页
4.1 表格基本操作
表格（Table）是由一个或多个单元格构成的集合， 表格中横向的多个单元格称为行（在HTML语言中 以<tr>标签开始，</tr>标签结束），垂直的多个 单元格称为列（以<td>标签开始，</td>标签结
束），行与列的交叉区域称为单元格，网页中的元 素就放置在这些单元格中 。
用表格为网页布局课件
Grid
CSS Grid是一种二维布局系统，适用于创建复杂的网页布局。它提供了 强大的对齐和定位控制，使得设计复杂的网页布局变得更加容易。
03
CSS框架
Bootstrap、Foundation等CSS框架提供了丰富的布局和样式选项，可
以快速构建美观、响应式的网页布局，减少了对传统表格布局的依赖。
HTML5和CSS3的新特性
可以通过CSS样式来设置表格 的宽度和高度，常用的单位是 像素（px）和百分比（%）。
也可以使用CSS的min-width 和max-width属性来限制表格 的最小和最大宽度。
表格边框和背景设置
表格边框是用来分隔单元格和表 格边缘的线条，可以通过CSS样 式来设置边框的颜色、宽度和样
式。
背景设置包括背景颜色、背景图 片等，可以用来美化表格的外观。
支持。
谢谢
THANKS
CHAPTER
简单的表格布局实例
总结词：基础布局
详细描述：使用表格进行简单的网页布局，如将标题、段落和图片等元素分别放 在不同的单元格中，实现基本的页面结构。
复杂的表格布局实例
总结词：复杂布局
详细描述：通过嵌套表格、合并单元格等技术，实现复杂的网页布局，如导航菜单、产品展示等。
响应式表格布局实例
使用边框和背景设置时，需要注 意保持整体风格的协调和一致。
表格对齐方式设置
表格对齐方式是指表格中单元格 内容的排列方式，常用的对齐方 式有左对齐、右对齐、居中对齐
等。
通过CSS样式可以设置表格的对 齐方式，也可以单独设置单元格
的对齐方式。
对齐方式的合理使用可以提高网 页的可读性和美观度。
04 表格布局的实例分析
03 表格布局的常见技巧
CSS Grid是一种二维布局系统，适用于创建复杂的网页布局。它提供了 强大的对齐和定位控制，使得设计复杂的网页布局变得更加容易。
03
CSS框架
Bootstrap、Foundation等CSS框架提供了丰富的布局和样式选项，可
以快速构建美观、响应式的网页布局，减少了对传统表格布局的依赖。
HTML5和CSS3的新特性
可以通过CSS样式来设置表格 的宽度和高度，常用的单位是 像素（px）和百分比（%）。
也可以使用CSS的min-width 和max-width属性来限制表格 的最小和最大宽度。
表格边框和背景设置
表格边框是用来分隔单元格和表 格边缘的线条，可以通过CSS样 式来设置边框的颜色、宽度和样
式。
背景设置包括背景颜色、背景图 片等，可以用来美化表格的外观。
支持。
谢谢
THANKS
CHAPTER
简单的表格布局实例
总结词：基础布局
详细描述：使用表格进行简单的网页布局，如将标题、段落和图片等元素分别放 在不同的单元格中，实现基本的页面结构。
复杂的表格布局实例
总结词：复杂布局
详细描述：通过嵌套表格、合并单元格等技术，实现复杂的网页布局，如导航菜单、产品展示等。
响应式表格布局实例
使用边框和背景设置时，需要注 意保持整体风格的协调和一致。
表格对齐方式设置
表格对齐方式是指表格中单元格 内容的排列方式，常用的对齐方 式有左对齐、右对齐、居中对齐
等。
通过CSS样式可以设置表格的对 齐方式，也可以单独设置单元格
的对齐方式。
对齐方式的合理使用可以提高网 页的可读性和美观度。
04 表格布局的实例分析
03 表格布局的常见技巧
使用表格排版网页.
– 定界符； – 换行符：选择打开导出文件的操作系统。
布局Байду номын сангаас图
• 插入栏/布局/布局： • 绘制表格和单元格：
– 表格与表格或表格与窗口间距离小于8个像素， 会发生吸附，按alt可暂时取消吸附。单元格同。
• 调整：
– 选择；调整大小；移动； – 方向键每次1个像素；加shift每次10个像素；
• 设置属性：
• • • • • •
合并、拆分： 水平、垂直对齐：单元格内容。 宽高： 不换行： 标题： 背景；背景颜色；边框；
调整表格结构
• 插入行或列：
– 选择位置，右键-表格/插入…
• 删除行或列： • 单元格的复制、粘贴：
– 在单元格内粘贴，则粘贴内容，覆盖； – 在表格外粘贴，则粘贴为新表格。
• 嵌套表格：
使用表格排版网页
• 插入并编辑表格
– – – – 插入表格 设置表格属性 设置单元格属性 调整表格结构
• • • •
表格的格式化 表格数据的导入导出 使用表格排版网页、 使用表格的其他视图
– 在布局视图下绘制 – 在布局视图下调整 – 设置属性
• 在HTML代码中插入表格
– 表格：
• 自动伸展：表格最右侧的列将自动延伸。 • 选择占位符图像：
– 创建、使用现存图像、不使用图像。
– 单元格：
• 自动伸展：
表格结构
• 为了在源代码中清楚地区分表格结构，HTML语言中规定了 <THEAD>,<TBODY><TFOOT>3个标记，分别对应于表格的表首、 表主体和表尾。 • <table> • <thead>
– <tr><td></td></tr>
布局Байду номын сангаас图
• 插入栏/布局/布局： • 绘制表格和单元格：
– 表格与表格或表格与窗口间距离小于8个像素， 会发生吸附，按alt可暂时取消吸附。单元格同。
• 调整：
– 选择；调整大小；移动； – 方向键每次1个像素；加shift每次10个像素；
• 设置属性：
• • • • • •
合并、拆分： 水平、垂直对齐：单元格内容。 宽高： 不换行： 标题： 背景；背景颜色；边框；
调整表格结构
• 插入行或列：
– 选择位置，右键-表格/插入…
• 删除行或列： • 单元格的复制、粘贴：
– 在单元格内粘贴，则粘贴内容，覆盖； – 在表格外粘贴，则粘贴为新表格。
• 嵌套表格：
使用表格排版网页
• 插入并编辑表格
– – – – 插入表格 设置表格属性 设置单元格属性 调整表格结构
• • • •
表格的格式化 表格数据的导入导出 使用表格排版网页、 使用表格的其他视图
– 在布局视图下绘制 – 在布局视图下调整 – 设置属性
• 在HTML代码中插入表格
– 表格：
• 自动伸展：表格最右侧的列将自动延伸。 • 选择占位符图像：
– 创建、使用现存图像、不使用图像。
– 单元格：
• 自动伸展：
表格结构
• 为了在源代码中清楚地区分表格结构，HTML语言中规定了 <THEAD>,<TBODY><TFOOT>3个标记，分别对应于表格的表首、 表主体和表尾。 • <table> • <thead>
– <tr><td></td></tr>
第5章 利用表格设计和制作网页
网页设计与制作
设置表格的背景图像和背景颜色
（1）选中表格，此时属性面板为表格的属性面板。 （2）在表格的属性面板上单击“背景（bg image）” 后面的文件夹图标，选择背景图片；背景颜色的设 置操作也在属性面板上，“bg color(背景颜色)” 在颜色框选择背景色。
网页设计与制作
设置表格的边框线颜色
网页设计与制作
利用表格进行页面布局
使用表格进行布局时，首先应分析对表 对表 格的布局和拆分。关于页面布局尽量在设 格的布局和拆分 计时考虑周全，不全面时仍可以用拆分和 合并来弥补 弥补。 弥补
网页设计与制作
基本步骤
新建(ctrl+n)一个网页文档，设置页面相关属性。 页面相关属性。 新建 页面相关属性 例如， 例如，上边距值为10，网页标题为“多媒体班级 网页”，并保存到本地站点。 （1）通过绘制表格来设计页面布局 1 （2）在表格中插入页面元素，如文本、图像等 （3）设置表格属性，如表格对齐方式、背景图 像和背景色等
网页设计与制作
去掉单元格中的半个空格还可以插入一个像素 的GIF图片。如:
网页设计与制作
步骤:
(1) (2) (3) (4) (5) 在菜单栏中选择“编辑” “参数选择”，打开对话框 选中布局视图 单击创造，将spacer.gif保存到本地站点内 确定 在需要制作细线的单元格中插入spacer.gif图片
网页设计与制作
Align(对齐 ：设置对齐方式 对齐)： 对齐 Border(边框 ：设置表格的边框线 边框)： 边框 表格属性面板下半部是表格的高级属性 清除各行的高度 清除各列的宽度 将当前表格的宽度尺寸从百分比转换到相应的像素值 将当前表格的宽度尺寸从像素值转换到相应的百分比 背景颜色： 背景颜色：背景色 背景图像 边框颜色： 边框颜色：表格边框的颜色
设置表格的背景图像和背景颜色
（1）选中表格，此时属性面板为表格的属性面板。 （2）在表格的属性面板上单击“背景（bg image）” 后面的文件夹图标，选择背景图片；背景颜色的设 置操作也在属性面板上，“bg color(背景颜色)” 在颜色框选择背景色。
网页设计与制作
设置表格的边框线颜色
网页设计与制作
利用表格进行页面布局
使用表格进行布局时，首先应分析对表 对表 格的布局和拆分。关于页面布局尽量在设 格的布局和拆分 计时考虑周全，不全面时仍可以用拆分和 合并来弥补 弥补。 弥补
网页设计与制作
基本步骤
新建(ctrl+n)一个网页文档，设置页面相关属性。 页面相关属性。 新建 页面相关属性 例如， 例如，上边距值为10，网页标题为“多媒体班级 网页”，并保存到本地站点。 （1）通过绘制表格来设计页面布局 1 （2）在表格中插入页面元素，如文本、图像等 （3）设置表格属性，如表格对齐方式、背景图 像和背景色等
网页设计与制作
去掉单元格中的半个空格还可以插入一个像素 的GIF图片。如:
网页设计与制作
步骤:
(1) (2) (3) (4) (5) 在菜单栏中选择“编辑” “参数选择”，打开对话框 选中布局视图 单击创造，将spacer.gif保存到本地站点内 确定 在需要制作细线的单元格中插入spacer.gif图片
网页设计与制作
Align(对齐 ：设置对齐方式 对齐)： 对齐 Border(边框 ：设置表格的边框线 边框)： 边框 表格属性面板下半部是表格的高级属性 清除各行的高度 清除各列的宽度 将当前表格的宽度尺寸从百分比转换到相应的像素值 将当前表格的宽度尺寸从像素值转换到相应的百分比 背景颜色： 背景颜色：背景色 背景图像 边框颜色： 边框颜色：表格边框的颜色
第五章使用表格和Div布局网页
第五章 使用表格和Div布局网页
5、显示-隐藏层 显示-隐藏层行为对象一般是超链接 标记或图像标记。显示-隐藏层行为是利 用鼠标移到对象之上或从对象上移开的事 件来触发对层“可见性”属性的修改，从 而形成层内容的动态显示效果。
• 例如：制作一图像浏览网页，当选 择“1”时打开第一幅图像，当选择 “2”时打开第二幅图像。
第五章 使用表格和Div布局网页
1. 插入层
第五章 使用表格和Div布局网页
• 在网页中插入一个层以后生成的代码为： <div id="Layer1"> …… </div>
第五章 使用表格和Div布局网页
2.选择层 在网页中选择一个层有两种方法： 在设计窗口中选择一个层 在代码窗口中选中层的代码 （<div>）后，则在设计窗口会 选中相应的层
第五章 使用表格和Div布局网页
3.设置层的属性
第五章 使用表格和Div布局网页
• “可见性”属性一般选择default和 hidden。 hidden为隐藏的。该属性也 可以在“层”面板中单击层名称中的“可 见性”列来设置。
第五章 使用表格和Div布局网页
• “溢出”属性设置层内的内容超出了层 的大小时的出来方式，其中选项如下所 示： • visible：自动向右下方扩展以显示所 有的内容。 • hidden：不显示溢出部分内容。 • scroll：为层加上滚动条用于溢出浏 览。 • auto：在产生溢出时，自动添加滚动 条用于溢出浏览。
第五章 使用表格和Div布局网页
• 习题：制作一网页，打开该网页时在该 页面中只显示3个超链接，分别是蜘蛛侠、 后天、北极熊三个电影名称，当鼠标放 在其中一个链接上时，则在某一位置显 示该链接对应的电影图片。
【全版】使用表格排版网页推荐PPT
使用表格排版网页
当使用表格进行页面的排版后， 浏览器对网页的下载时间会延 长，解决的方法是： 拆分表格。 下图是利用表格排版的网页
练习思考
如果将表格的“单元格边距” 练习对表格的属性进行设置
对表格进行排序时，不能有合并单元格或拆分单元格的情况。
练习对表格的属性进行设置
设置为0，浏览器中的表现是 表格的“单元格间距”用于设置（表格相邻的单元格之间的像素数）。
表格的“单元格边距”用于设置（单元格边框和单元格内容之间的像素数）。
合并单元格或拆分单元格的 将文本、图片、表单等有序的显示在网页中
表格的属性中，关于“表格的宽度”有两种单位
表格是网页设计中非常重要的元素。
练习对表格的属性进行设置 第5章 使用表格排版网页
情况。
第5章 使用表格排版网页
表格的“单元格间距”用于设置（表格相邻的单元格之间的像素数）。
插入并设置表格
表格中可以嵌套表格，层 层嵌套更便于设计。
插入并设置表格
表格的属性中，关于“表 格的宽度”有两种单位 像素 百分比
处理表格
使用表格排版网页，关注下列各项
练习对表格的属性进行设置
表格的“单元格边距”用于设置（单元格边框和单元格内容之间的像素数）。
对表格进行排序时，不能有 第5章 使用表格排版网页
表格的“单元格边距”用于设置（单元格边框和单元格内容之间的像素数）。 练习对表格的属性进行设置 表格的“单元格边距”用于设置（单元格边框和单元格内容之间的像素数）。
练习对表格的属性进行设置 表格的属性中，关于“表格的宽度”有两种单位
练习对表格的属性进行设置
第5章 使用表格排版网页
练习对表格的格式化 使用表格排版网页，关注下列各项
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第5章 使用表格排版网页
本章内容பைடு நூலகம் 练习思考 实验操作
本章内容
插入并设置表格 对表格进行格式化 排序表格数据 使用表格排版网页
插入并设置表格
表格是网页设计中非常重 要的元素。它的作用包括： 将文本、图片、表单等有 序的显示在网页中 进行网页的排版
插入并设置表格
表格包括： 行 列 单元格
插入并设置表格
表格中可以嵌套表格，层 层嵌套更便于设计。
插入并设置表格
表格的属性中，关于“表 格的宽度”有两种单位 像素 百分比
处理表格
对表格进行排序时，不能有 合并单元格或拆分单元格的 情况。
使用表格排版网页
当使用表格进行页面的排版后， 浏览器对网页的下载时间会延 长，解决的方法是： 拆分表格。 下图是利用表格排版的网页
练习思考
如果将表格的“单元格边距” 设置为0，浏览器中的表现是 （看不到单元格）。
练习思考
表格的“单元格边距”用于设置 （单元格边框和单元格内容之间 的像素数）。 表格的“单元格间距”用于设置 （表格相邻的单元格之间的像素 数）。
练习思考
如果想选中表格，可以将鼠标 指针指在（ ACD ）。 A 表格的左上角 B 表格的右上角 C 表格的上边框 D 表格的下边框
实训操作一
练习对表格的属性进行设置 练习对表格的格式化 练习对表格的排序
实训操作二
使用表格排版网页，关注下列各项 按照教材上的操作步骤进行操作 注意表格中如何嵌套表格 注意背景色的设置 注意居中的设置 注意如何选择表格的不同部分
本章内容பைடு நூலகம் 练习思考 实验操作
本章内容
插入并设置表格 对表格进行格式化 排序表格数据 使用表格排版网页
插入并设置表格
表格是网页设计中非常重 要的元素。它的作用包括： 将文本、图片、表单等有 序的显示在网页中 进行网页的排版
插入并设置表格
表格包括： 行 列 单元格
插入并设置表格
表格中可以嵌套表格，层 层嵌套更便于设计。
插入并设置表格
表格的属性中，关于“表 格的宽度”有两种单位 像素 百分比
处理表格
对表格进行排序时，不能有 合并单元格或拆分单元格的 情况。
使用表格排版网页
当使用表格进行页面的排版后， 浏览器对网页的下载时间会延 长，解决的方法是： 拆分表格。 下图是利用表格排版的网页
练习思考
如果将表格的“单元格边距” 设置为0，浏览器中的表现是 （看不到单元格）。
练习思考
表格的“单元格边距”用于设置 （单元格边框和单元格内容之间 的像素数）。 表格的“单元格间距”用于设置 （表格相邻的单元格之间的像素 数）。
练习思考
如果想选中表格，可以将鼠标 指针指在（ ACD ）。 A 表格的左上角 B 表格的右上角 C 表格的上边框 D 表格的下边框
实训操作一
练习对表格的属性进行设置 练习对表格的格式化 练习对表格的排序
实训操作二
使用表格排版网页，关注下列各项 按照教材上的操作步骤进行操作 注意表格中如何嵌套表格 注意背景色的设置 注意居中的设置 注意如何选择表格的不同部分