第8章 利用表格布局网页
合集下载
第08章_使用表格布局页面

中文版Dreamweaver 8基础与上机实训
使用间隔图像
间隔图像(也称为间隔GIF)是透明的图像,用来控制自动伸展表格中 的间距。间隔图像由一个单像素的透明 GIF 图像组成,向外伸展到指定 像素数的宽度。浏览器绘制的表格列不能窄于该列的单元格中所包含的 最宽图像,因此在表格列中放置间隔图像要求浏览器至少应该保持该列 与该图像一样的宽度。 当用户设置某列自动伸展时,Dreamweaver 8将自动添加间隔图像, 除非用户指定不使用任何间隔图像。此外,还可以在每个列中手动插入 和删除间隔图像。 要在布局模式中添加间隔图像,可在布局表格上单击标尺上的向下 箭头,从弹出的菜单中选择“添加间隔图像”命令。
中文版Dreamweaver 8基础与上机实训
8.2 设置布局单元格和表格的格式
在Dreamweaver 8中,可以使用属性检查器来改变布局模式中布局 单元格和布局表格的外观,如背景、元素对齐方式等。 设置布局单元格的格式 设置布局表格的格式 设置布局模式参数
中文版Dreamweaver 8基础与上机实训
中文版Dreamweaver 8基础与上机实训
8.3 表格布局综合实例
本节通过使用Dreamwerver 8的布局表格和布局单元格来创建一个 简单网页,通过该综合示例来复习布局模式的相关内容。
中文版Dreamweaver 8基础与上机实训
8.4 思考与练习
填空题
1.在Dreamweaver 8中,表格有3种使用模式,分别是 、 、 。 2.当在页面中创建布局单元格时,Dreamweaver 8会自动创建 局单元格增大时,会影响 ,原因是 。 ,用来放置布局单元格;布
中文版Dreamweaver 8基础与上机实训
设置布局宽度
《电子商务网页设计》 项目八 使用表格布局设置页面

8.单元格的拆分
• 方法一:选中要拆分的目标单元格,右键打开快捷菜单,选择 “表格”→“拆分单元格”对话框,选择“行”或“列”,并 在下面文本框中输入具体的行数或列数,点击“确定”即可。
• 方法二:选中要拆分的目标单元格,在属性面板左下角选择 “拆分单元格为行或列”按钮,即可拆分所选单元格。
任务实施
• (7)在第六行第一个单元格中输入文本“获奖情况”,并设置 该单元格水平对齐方式为居中对齐,垂直对齐方式为默认方式, 背景颜色为#FFFF99(黄色);相应的第二列单元格拆分为8行, 分别输入获奖情况的主要内容 。
• (8)在第七行至第九行的单元格中分别输入文本“爱好”、 “特长”、“性格特点”及其相应内容。选中第七行至第九 行的第一列单元格,设置居中显示,背景颜色设置为 #FFFF99(黄色) 。
页面的整体布局,创作出精美的网页。同时,表格也是 Dreamweaver CS5中常用的网页布局工具。 2.插入表格 • 单击“插入”→“表格”,在该对话框中,“行”、“列”和 “表格宽度”分别用于设置表格的行数、列数和宽度;“边框 精细”用于设置表格边框的宽度;“单元格边距”用于设置单 元格边框与单元格内容之间的距离;“单元格间距”用于设置 相邻单元格之间的距离;“页眉”用于设置表头的位置;“辅 助功能”可以输入表格的标题,以及选择标题的对齐位置。 3.设置表格属性 • 选中已插入的表格,在“属性”面板中就会显示该表格的相关 属性。
• (1)新建一个空白文档,标题栏内输入“个人简历”,保存为 “index.html”。
• (2)选择“插入”→“表格”菜单项,打开表格对话框,行数设置为10, 列数设置为2,表格宽度设置为75%,点击“确定”。选中该表格,在 属性面板里设置对齐为居中对齐,边框为4,间距为2,背景颜色为 #FFFFCC(浅黄色),边框颜色为默认颜色 。
• 方法一:选中要拆分的目标单元格,右键打开快捷菜单,选择 “表格”→“拆分单元格”对话框,选择“行”或“列”,并 在下面文本框中输入具体的行数或列数,点击“确定”即可。
• 方法二:选中要拆分的目标单元格,在属性面板左下角选择 “拆分单元格为行或列”按钮,即可拆分所选单元格。
任务实施
• (7)在第六行第一个单元格中输入文本“获奖情况”,并设置 该单元格水平对齐方式为居中对齐,垂直对齐方式为默认方式, 背景颜色为#FFFF99(黄色);相应的第二列单元格拆分为8行, 分别输入获奖情况的主要内容 。
• (8)在第七行至第九行的单元格中分别输入文本“爱好”、 “特长”、“性格特点”及其相应内容。选中第七行至第九 行的第一列单元格,设置居中显示,背景颜色设置为 #FFFF99(黄色) 。
页面的整体布局,创作出精美的网页。同时,表格也是 Dreamweaver CS5中常用的网页布局工具。 2.插入表格 • 单击“插入”→“表格”,在该对话框中,“行”、“列”和 “表格宽度”分别用于设置表格的行数、列数和宽度;“边框 精细”用于设置表格边框的宽度;“单元格边距”用于设置单 元格边框与单元格内容之间的距离;“单元格间距”用于设置 相邻单元格之间的距离;“页眉”用于设置表头的位置;“辅 助功能”可以输入表格的标题,以及选择标题的对齐位置。 3.设置表格属性 • 选中已插入的表格,在“属性”面板中就会显示该表格的相关 属性。
• (1)新建一个空白文档,标题栏内输入“个人简历”,保存为 “index.html”。
• (2)选择“插入”→“表格”菜单项,打开表格对话框,行数设置为10, 列数设置为2,表格宽度设置为75%,点击“确定”。选中该表格,在 属性面板里设置对齐为居中对齐,边框为4,间距为2,背景颜色为 #FFFFCC(浅黄色),边框颜色为默认颜色 。
用表格为网页布局

1 2
网页的布局
表格定位
3
表格的修改
标题栏 导航栏
栏目内容
版权说明
导航栏型
半包围型
主题突出 型
居中型
页面布局的设计没有限定的规则, 只要配合网站内容,让访问者感觉网 页布局能烘托主题、简洁、美观、操 作方便就可以了。
网络拾贝 网络交流 网络安全 网络生活
标题栏
导航栏导航栏主题图源自导航栏 导航栏请你根据自己确定的主题, 设计主页布局图吧!
使用表格布局网页 表格能实现网页中元素的定位,排版 的功能,使页面布局整齐、美观。 使用表格布局网页是普遍使用的办法哦!
标题栏
网络拾贝 网络交流 主题图 网络安全 网络生活 版权说明
6行3列
根据自己设计好的网站主页布局草图,利用表格进行布局。
在网站主页中插入图片、输入文字。
做好后保存上传整个站点文件夹。
网页设计与制作_在Dreamweaver8中使用表格布置页面

设置表格各项属性
设置单元格属性
• 和设置整体表格属性操作类似,单元格的属性设 置也是在“属性”检查器里完成的。在所要设置 属性的单元格内任意位置单击,即选中该单元格, “属性”检查器中显示该单元格的属性。 • 设置单元格“属性”检查器中各项参数。
选择表格
选择整个表格
执行以下操作之一可选择整个表格: • 移动鼠标至表格的左上角、左下角、右上角或右 下角,当鼠标指针变成 时,单击鼠标左键即可选 中整个表格。 • 移动鼠标至表格线条上的任意位置,当鼠标指针 变成时,单击鼠标左键即可选中整个表格。 • 在表格中任意一个单元格内单击,然后在“文档” 窗口左下角的“标签选择器”中选择<table>标签 即可。 • 在表格中任意一个单元格内单击,然后选择菜单 项“修改”→“表格”→“选择表格”。
编辑表格和单元格
合并单元格 • 在Dreamweaver8中,可以将相邻的两个或多个单元格合 并为一个单元格,进行合并的单元格不仅要连续,而且选 中的单元格区域必须为矩形,否则无法合并。 • 若要合并表格中的两个或多个单元格,请执行以下操作。 • (1)选择多个连续的单元格,并确保单元格区域为矩形。 • (2)执行下列操作之一。 • ① 选择菜单选项“修改”→“表格”→“合并单元格”。 • ② 在“属性”检查器(或选择菜单选项“窗口”→“属 性”)中,单击合并单元格按钮 。
选择表格
(2)若要选择一行或矩形的单元格块,请执行以下 操作之一。 • 在起始的单元格内单击鼠标左键,拖拽鼠标至最后 一个单元格。 • 在一个单元格内单击鼠标左键,在同一个单元格中 按住<Ctrl>键的同时单击以选中它,然后按住 <Shift>键单击另一个单元格。这两个单元格定义的 直线或矩形区域范围内的所有单元格都将被选中。 (3)若要选择不相邻的单元格,请执行以下操作。 • 在按住<Ctrl>键的同时单击要选择的单元格、行或 列,若要选择多个单元格,只要按住<Ctrl>键不放 就行了。 • 如果按住<Ctrl>键单击尚未选中的单元格、行或列, 则会将其选中。如果它已经被选中,则再次单击会 将其从选择中删除。
使用表格布局网页

使用表格布局网页及嵌入表格
编辑超连接
书签的?
在Web网页中,表单是用户向Web服务器提交数据的 常用方法。 表单在网页设计中,常应用于以下几个方面: ● 联系信息表单——是提交站点访问者联系信息的表 单。 ● 请求表单——是站点访问者联系信息的表单。 ● 反馈表单——是收集站点访问者反馈信息的表单, 常用于网上问卷调查。 ● 意见簿——是供站点访问者发表意见的表单。
编辑书签
操作步骤:单击右键选择“书签属性”命令。
首页 学校概况 系部设置 招生就业 教学管理 学生工作
编辑超连接
书签的?
在Web网页中,表单是用户向Web服务器提交数据的 常用方法。 表单在网页设计中,常应用于以下几个方面: ● 联系信息表单——是提交站点访问者联系信息的表 单。 ● 请求表单——是站点访问者联系信息的表单。 ● 反馈表单——是收集站点访问者反馈信息的表单, 常用于网上问卷调查。 ● 意见簿——是供站点访问者发表意见的表单。
编辑书签
操作步骤:单击右键选择“书签属性”命令。
首页 学校概况 系部设置 招生就业 教学管理 学生工作
《利用表格布局网》课件

最佳实践和技巧
合并单元格 控制单元格大小 细分行列 避免嵌套
CSS框架
使用表格布局网的CSS框架(如 Bootstrap)减少工作量。
表格布局网的优势和局限性
表格布局网有很多优势,例如更加直观明了的布局、兼容性强、可以细分行列等。但是它也有一些局限性, 如不易维护、不适用于跨设备适应。
1
优势
更加直观明了的布局
2
优势
兼容性强,适用于各种浏览器
3
优势
可以细分行列,进行网页布局及页面元素设计
总结和要点
通过本教程,您已经了解了表格布局网的优劣势、实际应用、最佳实践和技巧。表格布局网虽然有一些 限制,但在特定场景下仍是一种优势
更加直观明了的布局 兼容性强,适用于各种浏览器 可以细分行列,进行网页布局及页面元素设计
表格布局网的局限性
不易维护,需要多次调整单元格的大小和位置 不适用于跨设备适应,容易导致布局错乱
利用表格布局网
我们将介绍表格布局网的优势和特点,学习如何使用表格布局网,分享实际 应用案例以及最佳实践和技巧。
什么是表格布局网?
表格布局网是一种基于HTML表格元素实现的网格布局。它可以让你更加简单快捷地实现网页布 局,而且兼容性良好。
特点
表格布局网可以细分行列,进行网页布局及页面元素设计。
优势
相比传统布局方式,表格布局可以节约代码,布局更直观明了。
如何优化表格布局网?
如果你想让表格布局网的效果更加出色,可以参考以下最佳实践和技巧。
1 合并单元格
使用合并单元格的技巧,可以让布局更加美 观简洁。
2 控制单元格大小
通过控制单元格大小,可以让布局更加灵活 多变。
3 细分行列
使用表格布局网页

:::::21世纪职业教育数字艺术规划教材:::::
3.3设置表格属性
除了可以设置整个表格的属性外,还可以单独设 置某行、某列或某些单元格的属性。首先选择要 设置属性的单元格的组合,就会显示出单元格的 【属性】面板,如下图所示。
:::::21世纪职业教育数字艺术规划教材:::::
3.3设置表格属性
:::::21世纪职业教育数字艺术规划教材:::::
3.1表格概述
(3)利用表格合成尺寸较大的图像。网页中经常用到图像,若图像太大, 会影响用户的浏览速度,网页中的单个图像应该控制在15KB以内,不要超过 20KB;对于不得不使用的大幅图像,可以使用Fireworks 8 等一些图像处理 软件将其分割成几个小图像,然后在Dreamweaver CS3中借助表格把这些小 图像合成一个大图像
:::::21世纪职业教育数字艺术规划教材:::::
3.1表格概述
3.选中表格和表格元素 要对表格进行编辑,必须首先选中被操作的对象。选中表格操作包括下列情况 : (1)选择整个表格。 将光标移动到表格左边框之外,待其变成向右的箭头形式时,单击鼠标左键。 将光标移动到表格右边框之外(不在表格之内),向左拖动鼠标。 将光标置于某个单元格中,执行【修改】>【表格】>【选择表格】命令。 将光标置于某个单元格中,按两次【Ctrl+A】组合键。 将光标置于某个单元格中,单击状态栏中的【<table>】按钮。 按住【Shift】键的同时,在表格中任意位置单击鼠标左键。 将鼠标指针指向表格边框线,若出现红色外框线,则单击鼠标左键。 将鼠标指针置于表格的边框线上,当变成双向箭头时,单击鼠标左键。
:::::21世纪职业教育数字艺术规划教材:::::
用表格为网页布局

表格布局在早期的网页设计中被广泛 使用,但随着CSS技术的发展,它逐 渐被视为一种过时的布局方式。
表格布局的优点
简单易用
01
表格布局简单直观,容易上手,适合初学者使用。
结构清晰
02
表格能够清晰地展示页面内容,使页面结构化,便于阅读和理
解。
兼容性好
03
表格布局在各种浏览器中都有较好的兼容性,不易出现排版问
用表格为网页布局
目录
CONTENTS
• 表格布局的基本概念 • 表格布局的常见应用场景 • 使用表格进行网页布局的技巧 • 表格布局的未来发展 • 表格布局的实例分析
01 表格布局的基本概念
CHAPTE种使用HTML表格元素 来创建网页布局的方法。它通过将页 面内容组织成表格形式,实现页面的 结构化和排版。
腾讯问卷表单制作
腾讯问卷表单制作使用表格来构建问卷的结构和问题选项。
表格布局使得问卷结构清晰,易于填写和提交,提高了问卷的完成率和准 确性。
腾讯问卷表单制作的表格布局还支持多种表单元素,如单选框、复选框、 文本框等,以满足不同问卷的需求。
谢谢
THANKS
数据展示
数据对比
表格是展示数据对比的理想方式,可以将不 同数据列进行比较,方便用户快速了解数据 之间的差异。
数据汇总
表格可以用于数据汇总,将大量数据按照一定规则 进行分类和整理,以表格形式呈现,方便用户查看 和分析。
数据可视化
通过使用颜色、字体、边框等样式属性,可 以将表格数据以可视化的方式呈现,提高数 据的可读性和易用性。
加载页面,提高用户体验。
淘宝网首页的表格布局还结合了CSS样式,实现了美观的页面效
03
果。
新浪微博数据展示页
表格布局的优点
简单易用
01
表格布局简单直观,容易上手,适合初学者使用。
结构清晰
02
表格能够清晰地展示页面内容,使页面结构化,便于阅读和理
解。
兼容性好
03
表格布局在各种浏览器中都有较好的兼容性,不易出现排版问
用表格为网页布局
目录
CONTENTS
• 表格布局的基本概念 • 表格布局的常见应用场景 • 使用表格进行网页布局的技巧 • 表格布局的未来发展 • 表格布局的实例分析
01 表格布局的基本概念
CHAPTE种使用HTML表格元素 来创建网页布局的方法。它通过将页 面内容组织成表格形式,实现页面的 结构化和排版。
腾讯问卷表单制作
腾讯问卷表单制作使用表格来构建问卷的结构和问题选项。
表格布局使得问卷结构清晰,易于填写和提交,提高了问卷的完成率和准 确性。
腾讯问卷表单制作的表格布局还支持多种表单元素,如单选框、复选框、 文本框等,以满足不同问卷的需求。
谢谢
THANKS
数据展示
数据对比
表格是展示数据对比的理想方式,可以将不 同数据列进行比较,方便用户快速了解数据 之间的差异。
数据汇总
表格可以用于数据汇总,将大量数据按照一定规则 进行分类和整理,以表格形式呈现,方便用户查看 和分析。
数据可视化
通过使用颜色、字体、边框等样式属性,可 以将表格数据以可视化的方式呈现,提高数 据的可读性和易用性。
加载页面,提高用户体验。
淘宝网首页的表格布局还结合了CSS样式,实现了美观的页面效
03
果。
新浪微博数据展示页
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
表格对话框主要有以下选项:
行数:在该文本框中输入新表格的行数 列数:在该文本框中输入新表格的列数 表格宽度:用于设置表格的宽度,其中右边 的下拉列表中包含百分比和像素两个选项。 边框粗细:用于设置表格边框的高度,如果 设置为0,在浏览时看不到表格的边框
单元格边距:单元格内容与单元格之间的像 素数 单元格间距:单元格之间的像素数。 页眉:可以定义表头样式,4个样式可以任 意选取一种。 标题 :用来定义表格标题的对齐方式。 摘要:用来对表格进行注释。
7.3.1 利用表格布局主页 7.3.2 利用表格布局二级页面
将光标置于单元格中,然后在第个单元格输 入相应的文本。
7.2 编辑表格
插入表格以后就可以通过选择、拷贝、 增加、删除行,以及合、拆分单元格等 一系列操作实现对表格的编辑操作。
7.2.1 选择表格对象
要想对表格进行编辑,那么首先选择它,主要 有以下四种方法选取整个表格:
搬运鼠标从表格内的左上角至右下角,将所有的单 元格选择中,选择菜单“编辑》全选”命令。 单击表格线任意位置 将光标置于表格内任意位置,选择“修改》表格》 选择表格”命令 将光标置于表格内任意位置,单击文档窗口中左下 角的<table>标签。
7.2.2 设置表格属性
当选取整个表格后属性面板会显示表格 的属性,设置“背景颜色”为“#cccccc”, “填充”、“间距”都设置为1,“边框” 设置为0,“边框颜色”设置为 “#999999”,设置第1行第1列的“背景 颜色”为“#990000”
表格属性面板中各个选项如下:
对齐:设置表格的对齐方式 背景颜色:设置表格的背景颜色 背景图像:设置表格的背景图像 边框颜色:设置表格的边框颜色 填充:单元格内容和单元格边界之间的像素 数。 间距:相邻的表格单元格间的像素娄
7.2.3 添加行Байду номын сангаас列
在已创建的表格中添加行、列,要先将 光标置于欲插入行、列的单元格内,然 后通过如下方式添加行 选择“修改》表格》插入行”命令,则 在光标所在的单元格上增加了一行 选择“修改》表格》插入列”命令,则 在光标所在的单元格械侧增加了一列
7.2.4 删除行或列
将光标置于要删除行中的任意一个单元格,选 择“修改》表格》删除行”命令就可以删除当 前行。 将光标置于要删除列的任意一个单元格,选择 “修改》表格》删除列”命令可以删除当前列。 提示:
从表格的组成来看,它与文本处理软件 中的表格没有什么不同,实际上网页中 的表格与文本处理软件中的表格并不一 样。 利用表格可以排列数据,如例所示的域 名价格表就是使用了表格的效果。
插入表格的具体步骤如下:
1》打开文件夹8下面的index网页 2》将光标置于要插入表格的位置,选择 “插入》表格”命令,弹出“表格”对话框
3》在“行数”文本框中输入6,“列数” 文本框中输入3,“表格宽度”文本框中 输入95%,“边框粗细”文本框中输入0, “单元格边距”文本框中输入0,“单元 格间距”文本框中输入0,设置完毕后, 单击“确定”按钮,此时页面上会出现 一个6行3列的表格。
提示:
还可以通过以下方法向见面中插入表格: (1)单击“常用”插入栏的表格图标,从 弹出的对话框中设置表格 (2)拖曳“常用”插入栏的表格图标至所 需要的位置,在弹出的对话框中设置表格
还可以单击鼠标右键,在弹出的下拉菜单中添加行 和列,删除行或列。
7.2.5 拆分与合并单元格
拆分单元格是针对于一个单元格而言的。
如果要拆分单元格,选择“修改》表格》拆 分单元格”命令,弹出“拆分单元格”对话 框 在“拆分单元格”对话框中,如果把“单元 格拆分 ”选择“行”,下边将出现“行 数”,然后在文本框中输入要拆分的行数。 反之亦然。 如果要合并单元格需先选中要合并的单元格, 然后选择“修改》表格》合并单元格”命令
第八章 利用表格布局网页
2010.4.3
表格是网页中用途非常广泛的工具,除 了排列数据和图像外,在实际制作过程 中,表格更多的用在网面定位上,只需 通过表格宽度、高度、彼此之间的比例 大小等,就可以把不同的网页元素分别 框在不同的单元格之中以达到页面平衡。
对于网页的排版布局来说,表格是不可缺少的 工具,作为一名网页设计人员,表格运用的熟 练与否直接影响到网页外观的好坏。 本章着重介绍表格的基本功能及其操作,从创 建表格、编辑表格、修改表格等各个方向作了 详细的阐述,最后通过两个实例介绍了表格在 版面布局方面的应用。
提示
也可单击单元格属性面板中的“合并单元格” 按钮进行合并单元格,“拆分单元格”按钮 进行拆分单元格。 合并与拆分表格命令非常有用,它往往是创 建复杂表格最重要的步骤。
7.2.6 创建表格嵌套网页
说得简单点,表格的嵌套就是表格里再 放表格,当遇到怎么拆分和合并都无法 把表格做成想要的样子时,可以考虑表 格嵌套,在一个单元格里再插入一个表 格,再进行拆分和合并。 可以像对任何其他表格一样对嵌套表格 进行格式设置,但是,其宽度受它所在 单元格的宽度的限制
提示:
创建表格时,如果开始不能确定它的属性, 可以使用默认值,然后再通过属性面板进行 修改。 另外,关于宽的设定,一般来说,大表格往 往采用绝对尺寸,表格中所套的表格采用相 对尺寸,这样定位出来的网页才不会随着显 示器分辨率的差异而引起混乱。
7.3 实战演练
本章主要讲述了表格的基本操作,从创 建表格、编辑表格、创建嵌套表格等各 个方面进行了详细的阐述。下面就通过 两个例子讲述表格在整个网页排版布局 方面的综合运用。
7.1 利用表格制作价格表
无论在日常生活和工作中,还是在网页 设计中,使用表格都可以清晰地显示列 表数据,可以将各种数据排成行和列, 从而更容易查找和使用信息。
7.1.1 插入表格
在插入表格前,先来熟悉一下表格的概 念。表格主要有三个基本组成部分:
行:表格中的水平间隔 列:表格中的垂直间隔 单元格:表格中一行与一列相交所产生的区 域。
7.1.2 在表格中输入数据
表格建立以后,就可以向表格中添加各 种元素了,如文本、图像等。在表格中 添加文本就同在文档中操作一样,除了 直接输入文本,还可以先利用其他文本 编辑器编辑文本,然后将文本拷贝到表 格中,这也是在文档中添加文本的一种 简捷而快速的方法
在单元格中插入图像时,如果单元格的 尺寸小于插入图像的尺寸,则插入图像 后单元格的尺寸会自动增高或者增宽。 操作