dw教学课件-第四讲----表格布局
2024版DW网页布局表格布局表格学习教案
媒体查询技术运用在表格布局中
01
媒体查询定义
媒体查询是CSS3的一项新特性，允许根据设备的特定条件（如宽度、
高度和色彩等）应用不同的CSS样式。
02
媒体查询在表格布局中应用
通过媒体查询，可以根据不同设备的屏幕大小和方向，为表格设置不同
的布局和样式，实现响应式表格布局。
03
媒体查询语法及示例
媒体查询的语法包括媒体类型和条件表达式，例如`@media screen
02
使用有序列表
如果需要展示带有顺序的列表项，可以使用HTML的有序列 表（`<ol>`标签）。
03
自定义列表样式
通过CSS样式来自定义列表项的样式，如列表项符号、文字 颜色、行高等，以达到更好的视觉效果和布局效果。同时， 可以考虑使用CSS的伪元素来进一步美化列表项的样式。
05
响应式表格布局设计思路与实现方法
表格布局作用
表格布局可以实现网页中复杂数据的 展示和整理，同时也可以用于实现网 页的基本结构和布局。在一些早期的 网页设计中，表格布局被广泛使用。
常见网页布局方式比较
流式布局
流式布局是一种基于CSS的布局方式，它可以让网页元素根据屏幕大小和分辨率自动调整位 置和大小，实现响应式设计。流式布局具有灵活性和适应性强的特点。
讲解面板组的概念、分类和作用，以及如何 打开、关闭和调整面板组。
基本文档操作：新建、保存、打开和关闭
保存文档
讲解如何保存文档，包括保存位置、文件 名和文件类型等设置，以及保存时可能出
现的错误和解决方法。
新建文档
介绍如何创建新的HTML、CSS、 JavaScript等类型的文档，以及设置
文档的基本属性和参数。
DW网页设计--表格 ppt课件
ppt课件
19
8.2.6 设置表格的列
• 虽然HTML页面中表格是按照一行一行这样的概念建立起 来的，但是可以使用<colgroup>定义表格列的分组。这个 标签常和其他2个标签配合用，一个是<col>标签，一个是 <span>标签。<col>标签表示为表格中一个或多个列定义 属性值，是仅包含属性的空元素，只能在表格或colgroup 中使用此元素。
ppt课件
15
8.2.3 合并单元格
• 合并同行单元格使用colsplan属性。在需要修改的那一行 中，先删除多余的单元格，这是重要的一步，如果删错了 单元格，很可能最后呈现的表格会面目全非。这之后再定 义合并的单元格。合并同列的单元格使用rowspan属性， 这里介绍一种合并单元格的方法。
ppt课件
ppt课件
9
8.2.1 制作普通表格
• <table> • <tr> • <th>Head1</th> • <th>HEAD1</th> • </tr> • <tr> • <th>Head2</th> • <td>row 1, cell 2</td> • </tr> • <tr> • <th>Head3</th> • <td>row23, cell 2</td> • </tr> • </table>
第8章 表格
• 没有CSS之前，表格是最流行的布局页面的方式。它表示 一种布局页面的方法，而不仅仅只是指单元格组成的表格， 不过那已经是很久以前的事情了。现在谈论Web设计的时 候，再说到“表格”，那么它就是一个普通的由单元格组 成的表格。
DreamweaverCS3网页制作案例教程电子教案04第4章制作表格布局的网页
Dreamweaver CS3 网页制作案例教程电子教案04第4章制作表格布局的网页第4章制作表格布局的网页表格是常用的页面元素之一，制作网页时经常借助表格进行布局，通过设置表格及单元格的属性，对页面中的元素进行准确定位，灵活地使用表格的背景、边框等属性可以得到更加美观的效果，表格还能有序地排列数据。
【教学导航】(1)学会正确地插入表格，并合理地设置表格的属性(2)学会正确地在表格中插入嵌套表格，并合理地设置嵌套表格的属性(3)掌握单元格的合并、拆分、插入和删除的操作方法(4)学会正确地设置表格中行和列的属性(5)学会正确设置表格、单元格的背景图像和背景颜色教学目标 (6)学会正确地在表格中输入文字并定位(7)学会正确地在表格中插入图像并定位(8)学会正确地在表格中插入flash动画并定位(9)了解设置滚动文本效果的方法(10)了解网页文件头内容的设置方法(1)插入表格、设置表格的属性(2)合并或拆分单元格本章重点 (3)设置表格、单元格的背景图像和背景颜色(4)在表格中输入文字、插入图像和flash动画(1)在表格中插入嵌套表格，并设置嵌套表格的属性本章难点 (2)设置滚动文本效果(3)设置网页文件头内容教学方法任务驱动法、分组讨论法、三步训练法课时建议 6课时(含课堂同步训练)4.1 课前准备(1)在本地硬盘创建文件夹(2)启动Dreamweaver CS3通过Windows的【开始】菜单或桌面的快捷方式启动Dreamweaver CS3。
(3)创建名称为“江湖游”的本地站点(4)新建一个网页文档应用【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“index0401.html”的网页文档。
(5)设置网页标题Dreamweaver CS3网页制作案例教程(6)保存该网页。
4.2 课堂引导训练及评价【课堂引导训练任务描述】1、网页制作任务卡网页制作任务卡如表4-1所示。
表4-1 网页制作任务卡任务编号任务名称制作表格布局的网页 04-1网页主题江湖游计划工时 120min(1)利用表格对网页进行布局(2)在网格中插入多个表格:表格1、表格2、表格3、表格4和表格5(3)设置表格、行、列和单元格的属性(4)在表格的单元格中插入Flash动画及Flash动画的属性设置网页制作任务描述 (5)在表格的单元格中输入文字及文字的属性设置(6)插入嵌套表格:表格2-1和表格4-1，设置嵌套表格的属性设置(7)单元格的合并与拆分(8)设置滚动文本效果(9)插入Meta和关键字(1)表格和多层嵌套表格布局方式，如图4-2所示。
DW网页布局(表格、布局表格)PPT课件
使用表格 使用布局表格
精选PPT课件
4.1 使用表格
所谓表格就是由一个或多个单元格构成的集合，
表格中横向的多个单元格称为行，垂直的多个单
元格称为列。行与列的交叉区域称为单元格，网
页中的元素通常都被放置在这些单元格中，以使
其“各安其位”。
此处表示未 明确设置单 元格的宽度
此处显示了表格的宽 度。如果只显示一个 “▼”符号，表示未
布布局局单单元元格格只只能能添添 加加在在布布局局表表格格中中
可以在原有布局表格 的下方添加布局表格
不不能能在在原原有有内内 容容的的右右侧侧，，添添 加加布布局局表表格格了了
布布局局表表格格不不能能互互相相 重重叠叠，，只只能能嵌嵌套套
精选PPT课件
绘制完布局表格后的代码：
<table width="250" border="0" cellpadding="0" cellspacing="0">
精选PPT课件
4.使用间隔图像： 间隔图像是不可见的、单像素的、透明 GIF图像，用于控 制自动伸展表格中的间距，以维持表格和单元格的宽度。 若不在自动伸展表格中使用间隔图像，则表格列的大小将 发生改变或消失（如果表格不包括内容）。若要将列的最 小宽度限制到某一特定值，可在该列中插入一个间隔图像 。单击列标题菜单，然后选择“添加间隔图像”（也可同 法 “删除间隔图像 ）。 5.网格线：从任何新布局单元格的边缘向外延伸到包含该 单元格的布局表格的边缘，这些线可以方便将新单元格和 以前的单元格对齐，并显现基础 HTML 表格的结构。 Dreamweaver 网格已设置，并且这种网格不会根据单元格 的位置发生更改，因此可以用它来设计页面的布局。
网页设计与制作_在Dreamweaver8中使用表格布置页面
设置表格各项属性
设置单元格属性
• 和设置整体表格属性操作类似，单元格的属性设 置也是在“属性”检查器里完成的。在所要设置 属性的单元格内任意位置单击，即选中该单元格， “属性”检查器中显示该单元格的属性。 • 设置单元格“属性”检查器中各项参数。
选择表格
选择整个表格
执行以下操作之一可选择整个表格： • 移动鼠标至表格的左上角、左下角、右上角或右 下角，当鼠标指针变成 时，单击鼠标左键即可选 中整个表格。 • 移动鼠标至表格线条上的任意位置，当鼠标指针 变成时，单击鼠标左键即可选中整个表格。 • 在表格中任意一个单元格内单击，然后在“文档” 窗口左下角的“标签选择器”中选择<table>标签 即可。 • 在表格中任意一个单元格内单击，然后选择菜单 项“修改”→“表格”→“选择表格”。
编辑表格和单元格
合并单元格 • 在Dreamweaver8中，可以将相邻的两个或多个单元格合 并为一个单元格，进行合并的单元格不仅要连续，而且选 中的单元格区域必须为矩形，否则无法合并。 • 若要合并表格中的两个或多个单元格，请执行以下操作。 • （1）选择多个连续的单元格，并确保单元格区域为矩形。 • （2）执行下列操作之一。 • ① 选择菜单选项“修改”→“表格”→“合并单元格”。 • ② 在“属性”检查器（或选择菜单选项“窗口”→“属 性”）中，单击合并单元格按钮 。
选择表格
（2）若要选择一行或矩形的单元格块，请执行以下 操作之一。 • 在起始的单元格内单击鼠标左键，拖拽鼠标至最后 一个单元格。 • 在一个单元格内单击鼠标左键，在同一个单元格中 按住<Ctrl>键的同时单击以选中它，然后按住 <Shift>键单击另一个单元格。这两个单元格定义的 直线或矩形区域范围内的所有单元格都将被选中。 （3）若要选择不相邻的单元格，请执行以下操作。 • 在按住<Ctrl>键的同时单击要选择的单元格、行或 列，若要选择多个单元格，只要按住<Ctrl>键不放 就行了。 • 如果按住<Ctrl>键单击尚未选中的单元格、行或列， 则会将其选中。如果它已经被选中，则再次单击会 将其从选择中删除。
《表格和页面布局》PPT课件
精选课件ppt
15
注意事项
2
创建表格
❖ 在网页中插入表格 （1）新建一个HTML文档。 （2）将光标空位在需要插入表格的位置，在 “插入”栏的“常用”选项卡中单击“插入 表格”按钮。（也可用菜单实现，或用快捷 键Ctrl+Alt+T） （3）在弹出的对话框中作相关设置。 （4）单击确定即可。
精选课件ppt
3
插入表格对话框
❖ 对脚文件进行排序：在默认情况下，Dreamweaver不对脚 行进行排序，如要对脚行进行排序，可选择“对TFOOT行 （如果存在）进行排序”复选框。
精选课件ppt
16
将表格转化为层
❖ 网页设计者可以调整页面布局。如是是表格布局， 调整比较麻烦，此时，我们可以将表格转化成层， 然后通过移动层来调整布局，方便又快捷。
❖ 边框（border）:输入表格线的像素宽度。如果不需要显示 表格线。则输入为0。
❖ 单元格填充（Cell Padding）:它表示输入单元格的内容与 单元格边线之间的像素数。单元格的上、下、左、右都是一 个值。
❖ 单元格间距（Cell Spacing）：它单元格之间的距离的像素 数。
精选课件ppt
精选课件ppt
26
设置布局单元格和表格的属性
❖ 在表格属性中，有四个小按钮要清楚它们的 功能。 一个是清除表格的行高； 一个是单元格的宽度和单元格的内容一致； 一个是可移除所有分隔符图像； 一个可以清除嵌套表格，它只清除嵌套表格， 而不会清除其中的内容。
表格布局的使用
4.1插入表格 4.1插入表格
在Dreamweaver中插入表格的方法如下： Dreamweaver中插入表格的方法如下 中插入表格的方法如下： 1、将光标定位到要插入表格的位置。 将光标定位到要插入表格的位置。 2、执行“插入”→“表格”命令或单击“常用”面板 执行“插入” 表格”命令或单击“常用” 上的表格按钮或单击“布局”面板上的表格按钮， 上的表格按钮或单击“布局”面板上的表格按钮，打开 表格”对话框。 “表格”对话框。 3、在“行数”文本框中输入表格的行数；在“列数” 行数”文本框中输入表格的行数； 列数” 文本框中输入表格的列数； 表格宽度” 文本框中输入表格的列数；在“表格宽度”文本框中输入 表格在网页中的宽度(可用像素和百分数表示) 表格在网页中的宽度(可用像素和百分数表示)；在“边框 粗细”框中输入表格边框的宽度，值为0 粗细”框中输入表格边框的宽度，值为0时，表格线将隐 藏起来； 页眉”中指定表格标题的位置， 藏起来；在“页眉”中指定表格标题的位置，一般选择 “无”。 4、单击【确定】按钮，即可在光标位置插入一个表格。 单击【确定】按钮，即可在光标位置插入一个表格。
第5章 AP Div的使用 Div的使用
5.1 创建AP Div 创建AP 5.2 AP Div的基本操作 Div的基本操作 5.3 制作Spry效果 制作Spry效果
第5章 AP Div的使用 Div的使用
5.1.1.创建 5.1.1.创建AP Div 创建AP Dreamweaver中 创建AP Div有两种方法 有两种方法： 在Dreamweaver中，创建AP Div有两种方法： • 1.使用插入菜单 1.使用插入菜单
4. 4设置表格属性 4设置 设置表格属性
表格属性设置主要有三个方面： 表格属性设置主要有三个方面： 1．设置表格属性 2．设置单元格属性 3．查看和设置表格或表格元素的属性 在属性设置时要注意其优先顺序： 在属性设置时要注意其优先顺序：单元格属性设置优 先于行属性设置，行属性设置优先于表格整体属性设置。 先于行属性设置，行属性设置优先于表格整体属性设置。
《DW基础教程》课件
ETL是指将数据从源系统抽取（Extract）、转换 （Transform）并加载（Load）到数据仓库中的 过程。
Transform的操作
Transform操作包括数据清洗、转换和整合，使 数据适应数据仓库的要求。
Extract的操作
Extract操作包括读取源系统的数据、验证数据的 完整性和一致性等。
章节四：DW的设计
DW的数据仓库设计
数据仓库的设计包括定义维度和事实表、确定数据仓库的模式和粒度。
维度和事实表的设计
维度表用于描述业务维度，事实表用于存储业务指标，两者之间通过关联关系建立连接。
关联关系的建立
在DW中，可以通过定义和维护外键关系来建立维度表和事实表的关联关系。
章节五：DW的ETL
章节三：DW的数据源
数据的概念
数据是指记录事实和描述属 性的信息，可以分为结构化 数据、半结构化数据和非结 构化数据。
数据源的类型
数据源包括关系型数据库、 文件系统、Web服务、传感 器数据等，用于提供数据仓 库的输入。
创建数据源
在DW中，可以通过配置连接 参数、选择数据源类型和指 定数据源位置来创建数据源。
子查询
子查询是指嵌套在其他查询中的查询语句，用 于在查询中使用查询结果。
章节七：DW的应用实例
薪酬管理系统
薪酬管理系统利用数据仓库分析员工薪酬情况，为企业的薪酬决策提供支持。
客户关系管理系统
客户关系管理系统利用数据仓库分析客户的购买行为和需求，为企业的营销策略提供指导。
营销分析系统
营销分析系统利用数据仓库分析市场趋势、产品销售和竞争对手，为企业的营销决策提供支 持。
DW的安装
学习和使用DW前，需要安装适合的DW软件，如Oracle Data Warehouse或Microsoft SQL Server。
DW表格的制作课件PTT
以德立身 以技立足
放飞理想 激扬青春 展现自我
选取单元格、行与列、表格
一、选择单元格 方法一：单击单元格内部，在标签选择器中选择<td>标签。
以德立身 以技立足
放飞理想 激扬青春 展现自我
选取单元格、行与列、表格
一、选择单元格
方法二：按住Ctrl键同时选中单元格
以德立身 以技立足
放飞理想 激扬青春 展现自我
设置表格和单元格属性
二、设置单元格属性 选中要设置的单元格，属性面板中将显示该单元格的属性
1、水平：单元格内容的水平对齐方式。 2、垂直：单元格内容的垂直对齐方式。 3、宽、高：单元格的宽度和高度，单位默认为像素，也可设置为百分比。 4、不换行：设置单元格的内容全部都在一行内。 5、标题：默认表格标题单元格格式粗体并居中。 6、背景颜色：设置单元格背景的颜色。 7、合并单元格：将所选择的两个或多个单元格合并。 8、拆分单元格：将所选择的单元格拆分为两个或更多单元格。
以德立身 以技立足
放飞理想 激扬青春 展现自我
选取单元格、行与列、表格
二、选择行或列
方法一：拖放鼠标，选择一行的 所有单元格或一列的所 有单元格。
方法二：当鼠标在行的左边缘或者列 的上边缘变成箭头时候，单 击鼠标选择行或者列。
以德立身 以技立足
放飞理想 激扬青春 展现自我
选取单元格、行与列、表格
表格嵌套
表格嵌套是指在一个单元格中再插入一个表格。
将光标定位在被嵌套的单元格内，打开“插入”菜单，选择“表格”命令，打开“插入表格”对话
框，和插入表格一样的操作，在弹出的对话框中设置需要创建的表格属性即可。
布局表格和布局单元格技巧ppt课件
2．规划表格高级格式 在【属性检查器】中，在高级选项中右侧有几个按钮，在按钮上停留
一定的时间后，鼠标附近就会出现一条文字，显示按钮的称号，从称号中可 以了解其大致的用途。
3．规划单元格整体格式 设置表格的整体格式，执行以下操作： 选中单元格，执行【窗口】|【属性】命令，翻开【规划单元格属性检
查器】，如下图。
2．退出规划方式
假设要退出“规划〞方式，请执 行以下操作之一：
• 在【文档】窗口的顶部，单击标有“规划方式〞的彩色边框条中 的【退出】按钮。
• 执行【查看】|【表格方式】|【规范方式】命令。 • 单击【插入】栏上的【规划】选项卡中的【规范方式】按钮。
3．运用网格辅助线
在规划视图中，为了更好的显示文本、图象等元素的详细位置，规 划页面规划，可以运用网格辅助。
• 挪动鼠标至规划表格右边缘，当鼠标光标变为 外形时，在编 辑区内拖动鼠标更改规划表格的宽度。
• 挪动鼠标至规划表格边缘，当鼠标光标变为 外形时，在编辑区 内拖动鼠标更改规划表格的宽度或高度。
3．新建规划单元格
1、 在“规划方式〞下新建规划表格。 2、 新建一个规划单元格： • 在【插入】工具栏的【规划】选项卡中单击【绘制规划单元格】按钮 。 • 单击【绘制规划单元格】按钮，鼠标光标变为 + 外形，在编辑区拖动 鼠标绘制一个规划单元格。 3、绘制完成后，在默许形状下，规划单元格边框是蓝色，背风光 是白色，规划单元格被选中时以红色显示。假设需求，也可以在用户参 数设置中对上述有关颜色进展更改。
规划表格和规划单元格
在Dreamweaver MX中，不仅可以导入外部的数据文件， 还可以将网页中的数据表格导出为纯文本的数据文件。最初， 运用表格只是为了以更方便阅读的格式显示数据。而如今， 表格的格式控制才干可以用来构造网页的框架。先运用较大 的表格对网页的版面进展大致的排布，再运用嵌套的表格对 细节时行描写。表格曾经不仅仅是一种简单对象，而是一种 版面控制和制造模板的强有力的工具。
adobe Dreamweaver cs5第4章ppt
第 4章 表格的应用
本章习题答案 1. 选择题 （1）A （2）C 2. 填空题 （1）填充 （2）间距 （3）百分比 像素
• • • • • •
•
•
水平：指定单元格、行或列内容的水平对齐方式。您可以将内容对齐到单元格的左侧、右侧或使之居中对 齐，也可以指示浏览器使用其默认的对齐方式（通常常规单元格为左对齐，标题单元格为居中对齐）。 垂直：指定单元格、行或列内容的垂直对齐方式。您可以将内容对齐到单元格的顶端、中间、底部或基线， 或者指示浏览器使用其默认的对齐方式（通常是中间）。 宽和高：所选单元格的宽度和高度，以像素为单位或按整个表格宽度或高度的百分比指定。若要指定百分 比，请在值后面使用百分比符号 (%)。 背景颜色：单元格、列或行的背景颜色（使用颜色选择器选择）。 合并单元格：将所选的单元格、行或列合并为一个单元格。只有当单元格形成矩形或直线的块时才可以合 并这些单元格。 拆分单元格：将一个单元格分成两个或更多个单元格。一次只能拆分一个单元格；如果选择的单元格多于 一个，则此按钮将禁用。 不换行：防止换行，从而使给定单元格中的所有文本都在一行上。如果启用了“不换行”，则当键入数据 或将数据粘贴到单元格时单元格会加宽来容纳所有数据。 标题：将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。
第 4章 表格的应用
4.1 表格的基本操作
表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强 有力的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。 当选定了表格或表格中有插入点时，Dreamweaver CS5 会显示表格宽度和 每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用这些 菜单可以快速访问与表格相关的常用命令。在Dreamweaver CS5 中还可以根据 实际需求启用或禁用宽度和菜单。
DW教程--四、插入媒体和制作链接
第四节制作多媒体页面通过前面三课的学习，相信你已经能制作出一个简单的网页了，很有成就感吧^_^ 不过，一个优秀的网站应该不仅仅是由文字和图片组成的，而是动态的、多媒体。
为了增强网页的表现力，丰富文档的显示效果，我们可以向其Flash 动画、Java小程序、音频播放插件等多媒体内容。
一、插入Flash动画1、插入Flash为了合理的安排这一课的页面元素，在插入Flash动画之前，让我们先来复习一下表格布局吧^_^打开03.html，设置页面属性，在弹出的“页面属性”对话框中，“外观”项设置字体为“宋体”，字号为16px，文本颜色为#F282A8，背景图像为img/008.JPG，上边距为50px、下、左、右的边距都为0。
“链接”项选择始终无下划线，链接颜色为#F282A8，已访问链接为#F5E458。
现在我们开始布局～^_^～（1）插入一个1行1列的表格（表格1），表格的宽度为726px，边框粗细为0，单元格边距为0、单元格间距为1，背景颜色为#892321，将表格居中对齐。
（2）插入一个3行2列的表格（表格2），表格的宽度为100％，边框粗细为0，单元格边距和单元格间距都为0，背景颜色#6DCFF6。
设置第一行左边单元格的宽为173px，高为137px，设置第二行的高为238px，将第三行的两个单元格合并，高度为50px。
在第一行左侧单元格插入图片img/102.gif,在右侧单元格插入图片img/101.jpg。
在第三行将光标水平居中，输入文字“版权所有©闪客启航”（3）在表格2第二行左侧单元格插入一个6行一列的表格（表格3），表格宽度为95％，边框和单元格边距为0，单元格间距为5，将表格居中对齐。
第一行高度为15，其余各行高度都为40。
(4) 在表格2右侧单元格插入一个1行2列的表格（表格4），表格宽度为550px。
边框、单元格边距和间距都为0。
好啦～我们完成了页面的布局，开始插入页面元素。
Dreamweaver制作表格表单
Dreamweaver制作表格和表单表格当初主要用于数据的格式化显示，现在表格更多地用于排列网页中的内容，今天我们就一起来看看在Dreamweaver CS3里如何创建表格，以及如何使用表格对网页中的图文进行布局。
一、什么是表格布局表格布局就是为了精确定位、合理安排网页中的文字、图片等元素，它就像网页的脸面，是在一个限定的面积范围内合理安排、布置图像、文字等元素的位置，从而设计出版式漂亮的页面。
如图1所示，就是一个使用表格布局的页面。
图1 表格布局文字和图片二、表格的使用如果我们要实现如图1所示的表格布局页面，该怎么办？不急！下面就一步一步地实现如图1所示的表格布局页面。
请执行以下步骤：(1) 新建空白文档，然后选择“插入”一“表格”命令，以显示“表格”对话框，如图2所示。
图2 “表格”对话框(2) 输入所需的行数为7和列数为4，选择“百分比”或“像素”为单位的表格宽度。
(3) 在“边框粗细”后的文本框中输入边框宽度，如果不需要显示边框，请将值设为"0"。
(4) 设置“单元格边距”和“单元格间距”。
(5) 设置的相关值如图2所示，然后单击“确定”按钮。
(6) 选中第1行所有单元格，然后右击鼠标选择“表格”一“合并单元格”命令，高度设为34。
同理，合并第3行所有单元格，合并第7行所有单元格，合并第1列第 4行、第1列第5行、第1列第6行这3个单元格，合并第2列第4行、第2列第5行、第2列第6行这3个单元格，合并第4列第4行、第4列第5行、第4列第 6行这3个单元格，合并后的效果如图3所示。
(7) 按图1添加相关文字内容。
(8) 光标定位到第4行第1个单元格里，然后依次选择“插入”一“表单”一“复选框”命令。
(9) 在第1行单元格里插入图片“commodity_tablehead.gif'’。
同理，在相应位置插入图片commodity_huaping.jpg、online_pic.gif和list_tool_favl.gif。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
9
3、创建表格
单击插入常用工具栏上的按钮 将光标停放在选定的位置，执行插入→表格 将插入面板中的按钮从插入面板中拖到页面的相应
位置。
10
4、设置表格属性
Table id(表格名） Rows设置表格的行数，Cols设置表格的列数 Width：设置表格的宽度，以像素或百分比为单位 Height：设置表格的高度，以像素或百分比为单位
任务一、网页布局
在页面设计中，页面布局是一个很重要的部分， DW中提供了表格、布局表格、布局单元格、层、 框架来设计网页布局的方法。 布局的辅助功能 1、使用标尺： 单位： 坐标原点：可以移动，也可以重设原点. 显示：查看－标尺－显示 2、使用网格：查看－网格－网格设置
6
3、跟踪图像 页面属性－跟踪图像－透明度。它可以更好地帮助 进行网页的设置，完成初步的布局绘制布局表格和 布局单元格）。预览时，追踪图像是无图象显示的 仅仅作为辅助功能。
11Βιβλιοθήκη Cellpad(填充)：单元格填充值 Cellspace（间距）:单元格间距 Align（对齐）：表格的对齐方式 Border（边框）：表格的边框宽度 Bordcolor（边框颜色）:表格边框色 Bgcolor：表格背景色 Bgimage：表格背景图像
12
5、设置单元格属性
前提：选中单元格或光标定位到单元格中 Horz(水平):设置单元格内容的水平对齐方式． Vert（垂直）：设置单元格的垂直对齐方式． W和H：以像素表示的单位设置单元格的宽度和高
情况下，标题单元格中的内容被设为粗体并且居中对 齐
14
6、表格的基本操作 选择表格整体、行、列、单元格 调整整个表格、行、列大小 插入/删除行和列 合并/拆分单元格 复制及粘贴单元格
15
①在表格中选定一个或多个单元格，单元格连续可 以被剪切或复制，不连续则不能。
②选择edit/cut（copy）命令或用快捷键。 粘贴单元格的操作如下： 若要在表格内粘贴单元格,则单击想要粘贴的位置, 若要生成一新的表格,则将光标置于表格外。 选择edit/paste命令或用快捷键。
排序的列。 Order(顺序):选择一字母还是数字排序
alphabetically/numberically右侧 ascending升序descending降序 Then by(再按):设置在另外一列中进行下级的排序 Sort includes first row（排序包括第一行），如果表格第一
行是标题，则不需要选中该复选框。
21
data file(数据文件)输入要导入的文件名称。 文件－导入－Excell文档或者word文档
delimiter(定界符)分割表格数据的分割符如果选择 other右侧会出现新的文本框,在其中输入新的分隔符。
fit to data适应数据set设置，以指定表格的宽度。 注意：在记事本中输入数字再按Tab键可做表格
16
注意：
①如何让插入的表格自动居中？ 在属性面板中的“对齐”中选择“居中对齐” ②如何让表格中的文字居中？ （默认下文字是垂直居左对齐） 方法：光标放在文字的位置，在属性面板中“水平”中
选择“居中对齐”，“垂直”选择“居中”．
17
7、表格排序
A 选定表格，执行command/sort table命令 B 在弹出的对话框中sort by（排序按）在此下拉列表中选定
18
8、格式化表格 选定表格，执行command/formatable
在弹出的对话框中选择一种设计格式。 9、表格的嵌套
表格嵌套是把一个新的表格插入到原有的单元格 中，嵌套表格受外面单元格大小限制。
19
10、导入与导出表格
①导出表格
要把DW中创建的表格数据导出必须把数据存为一种可 分隔数据的文件格式，可以使用逗号、冒号、分号、空 格等作为分隔符。在DW中不允许导出表格的一部分。 A、将光标定位在表格的任一单元格中 B、选择 文件/导出/导出表格 命令 delimiter(分隔符)选择一种分隔符。如‘逗号’ Linebreaks(换行符)选择一种操作系统，如“windows”。 单击“导出”并保存即可。
22
任务三、布局表格
1、布局的三种模式
注意： “标尺、网格、跟踪图象”则是对网页中的元素进行
精确的定位。 表格是将网页中的内容进行定位，完成网页布局
7
任务二、表格
1、表格概述
①在网页文档中,表格对整理所有内容的布局操作 起着重要作用。 ②通过表格可以将页面划分为不同的部分，实现 对元素的准确定位。 ③利用表格可控制文本和图形在页面上出现的位置， 方便地设计出水平或垂直结构。 ④表格是对文本和图形进行布局的重要工具。
20
②导入表格（在数据庞大时常用）
向DW中导入表格数据应将源表格数据保存为以某种分 隔符作为数据间隔的纯文本文件。如果有已经制作好 的Excel工作表，打开这个工作表执行“文件－另存为” 命令，保存类型选择“文本文件”。 选择file/import/tabular data命令 或insert/table objects/import tabular data命令 或在insert/command面板中选择tabular data按钮
8
2、HTML表格标记
表格标签： <table>…</table>创建一个表格 <table border=“”>设置表格边框的宽度 <table width=“” height=“”>设置表格的宽度。用
绝对象素或总宽度的百分比表示 行标签：
<tr>…</tr>表格中的每一行 单元格标签：
<td>…</td>表格中的一行中的每一格 表格头标签：
度．如果要使用百分比为单位，刚在数值后加百分 比符号（％）
13
Bg(背景):设置单元格的背景图案（上方） 设置单元格的背景颜色（下方）
Boder(边框):设置单元格的颜色（边框） Merge(合并):合并单元格 Split(拆分):拆分单元格 No wrap:禁止换行复选框 Header(标题)：将选中的单元格设置为表格标题，默认