DW网页布局(表格、布局表格)(精选)

图 3-1-5 通过标签选取表格
（2）选取单元格 将鼠标指针移动到某个单元格上，按住 Ctrl 键不放，再单击，就可以选中这个单元格。 按住 Ctrl 键，再逐个单击要选取的单元格，就可以选中不连续的多个单元格。 通过鼠标拖动的方式可以选取连续的多个单元格。
（3）选取行或列 将鼠标指针移动到选取行的左边或者列的上面，光标变成箭头形状时单击鼠标左键就可以
z
：表格的对齐方式，可以将表格居左、居中或居右。
z
：代表表格边框的粗细，如果设“0”则代表没有边框，注意网页中表格的
内边框和外边框粗细是一样的。
z
：设置表格的背景颜色。
z
：设置表格边框的颜色。
z
：设置表格的背景图像，如果设置了背景图像，背景
颜色就失效。 z ：消除列的宽度设置。 z ：消除行的高度设置。 z ：将表格宽度的设置由百分比转换为像素。
z ：合并单元格（操作之前要先选择需要合并的单元格）。
z ：拆分单元格，拆分为多行或多列。
z
：单元格内部的水平对齐方式，作用与
类似。
z
：单元格内部的垂直对齐方式。
z
：设置单元格的背景图像。
z
：设置单元格的背景颜色。
z
：设置单元格的边框颜色。
3.1 表格布局技术章8章1章
表格的操作
（1）选取整个表格 在 Dreamweaver 8 中选取表格方法有很多种，最简单的就是将鼠标指针移动到表格的边框
选中一整行或整列。按住鼠标左键不放上下拖动还可以选取多行或多列。 错误！
提示 将光标移至单元格中，可用键盘上的方向键和 Tab 键在单元格之间移动，如果在表格 最后一个单元格按下 Tab 键，表格会自动添加一行。

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设计的时 候，再说到“表格”，那么它就是一个普通的由单元格组 成的表格。

<th>…</th>设置表格头：通常是黑体居中文字
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、表格的基本操作 选择表格整体、行、列、单元格 调整整个表格、行、列大小 插入/删除行和列 合并/拆分单元格 复制及粘贴单元格

3.1 表格的建立和编辑
3.1.4 实战演练：网站“行星大观”页眉导航部分制作
操作步骤： 6）光标移到第2行第1个单元格，在属性面板中设单元格的“宽”为270，“高”为24。鼠标 选中该行其它所有单元格，在属性面板中设单元格设为“宽”为100，水平、垂直方向均为 居中对齐。输入对应文字，如图所示。
（3）选取行或列 从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元 格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行 或列的图标出现时，单击鼠标即可选择行或列。
3.1 表格的建立和编辑
3. 设定表格和单元格属性 （1）表格属性
当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板 修改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、 宽、高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。
3.1 表格的建立和编辑
2. 选取表格元素 （1）选取整个表格 将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表
格。或光标放在表格中时，点击菜单“修改”→“表格”→“选择表格”命令。也可以 将光标放在单元格中，在文档窗口的左下角的标签选择器中选择“Table”标签，选取 整个表格。
（2）选取单元格 将鼠标指针移动到某个单元格上，按住Ctrl键不放，再单击， 就可以选中这个单元格。按住Ctrl键，再逐个单击要选取的单元格，就可以选中不连 续的多个单元格。光标移到某个单元格中，按住Shift键鼠标点击另外一个单元格，则 这两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标 拖拽的方法可以选取连续的一片单元格。
3.1 表格的建立和编辑
3.1.1 案例制作：2006世界杯E组对阵表

表格排序
第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列（也就是“数学”列） 按升序排列后的表格。

布 建两个网页。一个网页的标题为
置
“金水桥”，文件名为 任
务
“jinshuqiao.htm”；另一个网页标题
为“故宫简介”，文件名为
“gugongjianjie.htm”。
学 习
师 教师巡视检查，并及时解答学
生 生提出的问题，纠正操作出现的问
互 题。遇普遍问题时，统一讲解。
动
对全部高中资料试卷电气设备，在安装过程中以及安装结束后进行高中资料试卷调整试验；通电检查所有设备高中资料电试力卷保相护互装作置用调与试相技互术通关，1系电过，力管根保线据护敷生高设产中技工资术艺料0不高试仅中卷可资配以料置解试技决卷术吊要是顶求指层，机配对组置电在不气进规设行范备继高进电中行保资空护料载高试与中卷带资问负料题荷试2下卷2，高总而中体且资配可料置保试时障卷，各调需类控要管试在路验最习；大题对限到设度位备内。进来在行确管调保路整机敷使组设其高过在中程正资1常料中工试，况卷要下安加与全强过，看度并22工且22作尽22下可22都能22可地护以缩1关正小于常故管工障路作高高；中中对资资于料料继试试电卷卷保破连护坏接进范管行围口整，处核或理对者高定对中值某资，些料审异试核常卷与高弯校中扁对资度图料固纸试定，卷盒编工位写况置复进.杂行保设自护备动层与处防装理腐置，跨高尤接中其地资要线料避弯试免曲卷错半调误径试高标方中高案资等，料，编试要5写、卷求重电保技要气护术设设装交备备置底4高调、动。中试电作管资高气，线料中课并敷3试资件且、设卷料中拒管技试试调绝路术验卷试动敷中方技作设包案术，技含以来术线及避槽系免、统不管启必架动要等方高多案中项；资方对料式整试，套卷为启突解动然决过停高程机中中。语高因文中此电资，气料电课试力件卷高中电中管气资壁设料薄备试、进卷接行保口调护不试装严工置等作调问并试题且技，进术合行，理过要利关求用运电管行力线高保敷中护设资装技料置术试做。卷到线技准缆术确敷指灵设导活原。。则对对：于于在调差分试动线过保盒程护处中装，高置当中高不资中同料资电试料压卷试回技卷路术调交问试叉题技时，术，作是应为指采调发用试电金人机属员一隔，变板需压进要器行在组隔事在开前发处掌生理握内；图部同纸故一资障线料时槽、，内设需，备要强制进电造行回厂外路家部须出电同具源时高高切中中断资资习料料题试试电卷卷源试切，验除线报从缆告而敷与采设相用完关高毕技中，术资要资料进料试行，卷检并主查且要和了保检解护测现装处场置理设。备高中资料试卷布置情况与有关高中资料试卷电气系统接线等情况，然后根据规范与规程规定，制定设备调试高中资料试卷方案。

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

3.2.6表格合并单元格
如图所示：
3.2.7表格拆分单元格
• 将一个单元格拆分为几个连续的单元格
• 将光标定位在要拆分的单元格中。
• 【修改】>【表格】>【拆分单元格】
• 单击【属性】面板中的 元格】对话框
按钮，则弹出【拆分单
• 【右键鼠标】>【表格】>【拆分单元格】
3.2.7表格的拆编 分辑单元-拆格分单元格
页脚版权信息
导航栏 主内容区
3.3文件】文本框右侧的【浏览】按 钮，选择要导入的文件
• 设置相应选项>确定 • 预览效果
3.2.10导出表格数据
• 选中要导出数据的表格 • 执行【文件】>【导出】>【表格】命令
• 设置相应选项>导出>输入文件名>保存
3.3页面布局
企业网站 电子商务网站 个人网站 门户网站
其中的
按钮；
弹出【表格】对话框（如图）
3.2.2表格的选项设置
• 【行数】和【列】：用于设置插入表格的行数和列数。 • 【表格宽度】：用于设置表格的宽度，选择“像素”为单位时，表格的
宽度为固定像素的宽度；选择“百分比”为单位时，表格的宽度与浏览 器窗口的宽度将保持相同的百分比。 • 【边框粗细】：用于设置表格的边框宽度 • 【单元格边距】：用于设置表格中单元格内的元素距离单元格边框的距 离。 • 【单元格间距】：用于设置表格中单元格之间的间距。 • 【标题】：用于设置表头的位置，分别为无、左、顶部、两者。 • 辅助功能中的【标题】：用于设置表格标题，该标题在表格的外侧。 • 【摘要】：用于描述表格的相关信息。
3.1.2表格的组成元素
• 行：表格中的水平间隔 • 列：表格中的垂直间隔 • 单元格：表格中一行与一列相交所产

6
3．选择单元格
可以选择单个单元格，也可以选择连续的多个单 元格或不连续的多个单元格。
•要选择某个单元格，可首先将插入点置于该单元格内， 然后按【Ctrl＋A】组合键或单击“标签选择器”中对应 的“<td>”标签。
•要选择连续的单元格区域。应首先在要选择的单元格区 域的左上角单元格中单击，然后按住鼠标左键向右下角 单元格方向拖动鼠标，最后松开鼠标左键。
9
综合实例1——用表格布局“SM”网站主 页
本例将在第2章综合实例创建的文档“index.html” 的基础上，使用表格布局文档，以巩固3.1节所 学知识。
10
3.2 表格高级操作
3.2.1 拆分与合并单元格
在网页制作中，经常会用到一些特殊结构的表 格，此时就需要拆分或合并单元格。
11
1．拆分单元格
•如果希望选择一组不相邻的单元格，可按住【Ctrl】键 单击选择各单元格。
7
3.1.3 设置表格属性
选中表格后，可利用“属性”面板查看或修改表 格的行、列、宽，以及填充、间距、背景颜色、 背景图像等属性。
8
3.1.4 设置单元格属性
在表格的某个单元格中单击，“属性”面板中 将显示水平、垂直、宽、高等单元格属性，此 时可通过“属性”面板设置其属性。
拆分单元格就是将一个单元格拆分成多个单元格。
12
2．合并单元格
所谓合并单元格，就是将相邻的几个单元格合并 成一个单元格。 拖动鼠标选中要合并的连续单元格（此处为第1 行中间的3个单元格），然后单击“属性”面板 上的“合并所选单元格，使用跨度”按钮 ，则3 个单元格合并为1个单元格。
13
3.2.2 插入、删除行和列
17
添加