第8章 利用表格布局网页

合集下载

第08章_使用表格布局页面

第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(浅黄色),边框颜色为默认颜色 。

用表格为网页布局

用表格为网页布局

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

网页设计与制作_在Dreamweaver8中使用表格布置页面

网页设计与制作_在Dreamweaver8中使用表格布置页面

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

使用表格布局网页

使用表格布局网页
使用表格布局网页及嵌入表格
编辑超连接
书签的?
在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
果。
新浪微博数据展示页

利用表格布局网页教案

利用表格布局网页教案

利用表格布局网页教案教案标题:利用表格布局网页教案教学目标: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. 引导学生学习响应式设计,掌握如何使用媒体查询和表格布局来适应不同屏幕尺寸。

教学反思:根据学生的实际情况和学习进度,灵活调整教学过程中的时间分配和内容讲解,确保学生能够理解和掌握表格布局的基本原理和应用技巧。

《使用表格布局网页》课件

《使用表格布局网页》课件
《使用表格布局网页》 PPT课件
本课程将介绍如何使用表格布局创建网页。掌握表格布局技术,让你的网页 布局更加灵活、美观。
表格布局介绍
什么是表格布局
表格布局是一种使用HTML表格元素进行网页布 局的技术。
表格布局的特点
表格布局具有结构清晰、适用性强等特点,可 用于多种网页布局需求。
表格布局语法
表格元素
总结
表格布局的总结
表格布局是一种强大的网页布局技术,适用于多种布局需求。
今后如何学习表格布局技术
深入学习HTML和CSS知识,结合实践项目不断提升表格布局的技能。
使用<table>标签定义一个表格。
行元素
使用<tr>标签定义表格中的行。
单元格元素
使用<td>标签定义表格中的单 元格。
创建表格布局网页1美化表格布局2
通过添加样式和背景色以及调整单元格 大小和行高等方式,让表格布局更美观。
创建表格元素
使用<table>标签创建一个基本的表格元 素。
优缺点分析
1 表格布局的优点
结构清晰、适用性强,可以实现复杂的网页布局需求。
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 课后作业学生完成一个表格布局的响应式网页设计,并在不同设备上测试其表现。

使用表格讲义布局网页

使用表格讲义布局网页
•将鼠标光标移至表格外框线上,当鼠标光标变为 形状时, 单击鼠标左键。
•在表格内部任意单元格中单击鼠标左键,然后在标签选择器 中单击对应的“<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 表格布局的常见技巧

利用表格对页面进行布局_网页界面设计_[共4页]

利用表格对页面进行布局_网页界面设计_[共4页]

8.2 应用表格制作网站主页面 网页界面设计 149
【小技巧】图像文件夹通常命名为“images ”,且存放于站点根文件夹内。

站点定义完毕之后,就可以正式制作属于你自己的网页了。

8.2
应用表格制作网站主页面
8.2.1 利用表格对页面进行布局
表格是用于在HTML 页上显示表格式数据和对文本和图形进行排版的有力工具。

表格排版提供了在页面中增加垂直和水平结构的简便方法。

表格由一行或多行组成;每行又由一个或多个单元格组成,各表格间可嵌套。

图8-5是一个在Dreamweaver 中显示表
格布局的实例。

图8-6所示为IE 浏览器中的显示效果。

图8-5 在Dreamweaver 中显示表格布局的实例。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 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 在表格中输入数据
表格建立以后,就可以向表格中添加各 种元素了,如文本、图像等。在表格中 添加文本就同在文档中操作一样,除了 直接输入文本,还可以先利用其他文本 编辑器编辑文本,然后将文本拷贝到表 格中,这也是在文档中添加文本的一种 简捷而快速的方法
在单元格中插入图像时,如果单元格的 尺寸小于插入图像的尺寸,则插入图像 后单元格的尺寸会自动增高或者增宽。 操作
相关文档
最新文档