当前位置：文档之家 › 第三章 网页的排版和布局(一)使用表格布局网页

第三章 网页的排版和布局(一)使用表格布局网页

  • 格式：ppt
  • 大小：3.61 MB
  • 文档页数：40

下载文档原格式

  / 40

合集下载

第3章 使用表格控制网页布局重点内容： 在页面中使用表格

第3章 使用表格控制网页布局重点内容： 在页面中使用表格

要添加行或列选择修改表格插入行或列命令在出现的对话框中设置插入行数和位置等参三编辑表格和单元格3拆分与合并单元格用户可以选择修改表格菜单中的子命令来拆分和合并单元格
第3章 使用表格控制网页布局
重点内容：
• 在页面中使用表格
• 设置表格和单元格格式
• 编辑表格和单元格
一、 在页面中使用单元格
1、在页面中插入表格 在Dreamweaver 8中， 用户可以选择“插 入”|“表格”命令，或在 “常用”工具栏中单击 “插入表格”按钮，使用 打开的“表格”对话框来 插入表格。
本章小结：
•掌握在页面中插入表格和添加表格内容的方法。 •掌握更改表格属性的方法。 •熟练进行表格的拆分与合并等操作。
三、编辑表格和单元格
3、拆分与合并单元格 用户可以选择“修改”|“表格”菜单中的子命令来拆分和 合并单元格。若要拆分某个单元格，可先选择需要拆分的单 元格，然后选择“修改”|“表格”|“拆分单元格”命令。 4、剪切、拷贝和粘贴单元格 若用户要剪切或拷贝单元格， 可选择一组连续的且形状为矩形的 单元格，然后选择“编辑”|“剪切” 命令或“编辑”|“拷贝”命令，剪 切或复制单元格。
二、设置表格和单元格格式
3、使用预制表格 在Dreamweaver 8中， 除了可以自行设计表格外， 还可以利用默认的表格格 式。用户可以通过选择 “命令”|“格式化表格” 命令，在打开的的“格式 化表格”对话框中，进行 相应的设置。
三、编辑表格和单元格
1、调整表格大小 用户在选择表格后表格上会出现3个控制点，并会显示表 格的宽度信息。用户可以通过调整这几个控制点来调整表格 的大小。 2、添加及删除行或列 用户可以使用“修改”|“表 格”菜单中的子命令来添加或 删除行和列。要添加行或列， 选择“修改”|“表格”|“插入行 或列”命令，在出现的对话框 中设置插入、行数和位置等参 数。
DreamweaverCS5网页制作第3章 使用表格布局页面PPT课件

DreamweaverCS5网页制作第3章 使用表格布局页面PPT课件


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组对阵表
电子商务网页设计及网站建设第三章d利用表格布局网页

电子商务网页设计及网站建设第三章d利用表格布局网页

• 将光标置于表格3的第1列单元格，将“宽” 设置为241，“高”设置为647，插入背景 图像
电子商务网页设计及网站建设第三 章d利用表格布局网页
• 在此单元格上插入一个10行1列的表格（表 格4），“表格宽度”为90%，“填充”为 5，“间距”为2，“对齐”为居中对齐
• 将光标置于表格4的第1行单元格中，插入 图像
电子商务网页设计及网站建设第三 章d利用表格布局网页
电子商务网页设计及网站建设第三 章d利用表格布局网页
电子商务网页设计及网站建设第三 章d利用表格布局网页
电子商务网页设计及网站建三 章d利用表格布局网页
电子商务网页设计及网站建设第三 章d利用表格布局网页
• 将光标置于表格4的第2行单元格中，将单 元格拆分为2列，在第1列中输入文字，在 第2列中输入文本域（执行“插入记录”中 “表单”的“文本域”命令）
• 按上一个步骤的方法，完成表格4的第3行
电子商务网页设计及网站建设第三 章d利用表格布局网页
• 在表格4的第4行插入图像 • 在表格4的第5行插入图像和文字 • 在表格4的第6行执行“插入记录”中“表
电子商务网页设计及网站建设第三 章d利用表格布局网页
电子商务网页设计及网站建设第三 章d利用表格布局网页
电子商务网页设计及网站建设第三 章d利用表格布局网页
电子商务网页设计及网站建设第三 章d利用表格布局网页
电子商务网页设计及网站建设第三 章d利用表格布局网页
电子商务网页设计及网站建设第三 章d利用表格布局网页
• 在表格1下再插入一个1行10列的表格（表 格2），“表格宽度”为1022像素
• 设置表格2的属性，在“属性”面板中设置 背景图像、将“高”设置为25像素
• 在单元格中输入文字，将“大小”设置为 12，“文本颜色”设置为#FFFFFF
网页设计与制作基础教程 第3版 第03章-使用表格布局页面

网页设计与制作基础教程 第3版 第03章-使用表格布局页面

导入表格式数据 导出表格式数据
::::::::::
::::::::::
3.2.8 导入与导出表格式数据
使用Dreamweaver CC，用户不仅可以将另一个应用程序，例如Excel中 创建并以分隔文本格式(其中的项以制表符、逗号、冒号、分号或其他分隔 符隔开)保存的表格式数据导入到网页文档中并设置为表格的格式，而且还 可以将Dreamweaver CC中的表格导出。
::::::::::
3.2.6 复制与粘贴单元格
用户在Dreamweaver CC中插入表格并选中表格中一个单元格后，选择 “编辑”命令，在弹出的的菜单中可以对表格执行“剪切”、“拷贝”、“ 粘贴”等操作。
::::::::::以根据单个列的内容对表格中的行进行 排序或者根据两个列的内容执行更加复杂的表格排序。
《 网页设计与制作基础教程(第3版)》
第三章
使用表格布局页面
学习目标
在网页中插入的文本和图像会随着浏览器窗口的放大与缩 小发生变化，这使得网页处于不稳定的显示状态。要解决这种 状态，最简单的方法就是使用表格，表格不仅能够控制网页在 浏览器窗口中的位置，还可以控制网页元素在网页中的显示位 置。
::::::::::
本章重点
创建基本表格 插入表格元素 调整表格大小 导入与导出表格数据 使用表格制作网页
::::::::::
3.1 使用表格
网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视 频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不 仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。 表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地 表达设计者的思想。
网页中表格的用途 创建表格 插入表格元素 设置表格属性
第三章 使用表格规划网页布局

第三章 使用表格规划网页布局

第三章使用表格规划网页布局一、相关概念1、表格功能：显示数据，定位网页元素（布局）2、表格的组成：表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。

单元格中的内容和边框之间的距离叫边距cellpadding。

单元格和单元格之间的距离叫间距cellspacing。

表格的边线叫做边框border。

tr：代表一行。

td：代表一个单元格。

3、占位符：当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。

因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，Dreamweaver会在每个单元格中插入代码“ ”，用以撑起单元格的高度。

当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。

如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。

二、插入表格两种方法：①“插入”→“表格”命令②单击“插入”面板的“常用”类别中的“表格”按钮上，打开“表格”对话框。

1、宽度（百分比，像素）：相对显示，绝对显示2、边距/填充：文本内容与边框之间距离3、间距：单元格与单元格之间距离4、标题：设置表格标题位置【例4-1】：新建一个网页文档，在文档中插入表格（9行2列）并插入表格内容【练习1】：制作下面表格【练习2】：如何让文本与表格边框有一定空白区间，如下：5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。

插入嵌套表格的方法与插入表格的方法相同。

【练习3】：利用表格制作下图样式：说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的外观，大表格的宽度一般使用像素值，而为了使嵌套表格的宽高不和总表格发生冲突，嵌套表格一般使用百分比来设置宽和高。

【思考】：利用嵌套表格留空白操作方法：插入一个1行1列的表格，再在此表格中插入一表格，此时新插入的表格设置时宽度要小一些，另外最好不要设置边框。

第三节、网页的排版布局

第三节、网页的排版布局


4.单元格的属性 4.单元格的属性 合并、 水平、 合并、拆分 水平、垂直 二、布局表格 “Ctrl键”连续绘制单元格 Ctrl键 Ctrl 三、使用表格布局的注意事项 1.不要出现横向滚动条 不要出现横向滚动条
分辨率为： 800×600时 分辨率为：1024×768时 表格宽度为：760像素 表格宽度为：995像素
四、表格的高级应用 1.水平 垂直边框、间距、填充均为0的表格， 表格的高度或宽度设为1px,加背景颜色 删除单元格多余的 （空格）。
2.单像素表格 2.单像素表格 单像素表 1).边框为0，
<table Style=“border:1px solid #ffff00”>
左右页边距为0 左右页边距为
表格“居中” 表格“居中”
2.尽量不要将整个页面都套在一个表格里 尽量不要将整个页面都套在一个表格里 3.利用表格的嵌套灵活布局 利用表格的嵌套灵活布局 4.表格的嵌套层次不能过深 4.表格的嵌套层次不能过深 控制在3 控制在3-4层以内 5.单一表格结构要整齐 5.单一表格结构要整齐
2).设置表格第一行的背景颜色
3、制作圆角表格 制作圆角表格 制作半透明的图片 表格填充、间距和边框都设为0 表格填充、间距和边框都设为0
链接
设置最上面单元格的背景颜色, 设置最上面单元格的背景颜色,插入图片 （左对齐；顶端） 左对齐；顶端） .在下面的单元格的
<td Style=“border:1px solid #ffff00” >
五、图层 1.插入图层 1.插入图层 布局/标准/ 布局/标准/图层 图层的嵌套（ Alt键 图层的嵌套（按Alt键） 2.层属性面板 2.层属性面板 3.层面板 层面板 4.利用层来布局页面 4.利用层来布局页面
第3章使用表格布局排版网页

第3章使用表格布局排版网页

将光标置于要删除行或列的位置，可以在【属性 】面板中的【行】或【列】。
3.4.3小案例——拆分单元格
在使用表格的过程中，有时需要拆分单元格以 达到自己所需的效果。拆分单元格就是将选中的单 元格拆分为多行或多列。
3.4.4 合并单元格
合并单元格就是将选中的单元格合并为一个单元 格，合并单元格有以下几种方法。
调整表格的高度和宽度时，表格中所有单元格
将按比例相应改变大小 。选中表格，此时会出 现3个控制点，将鼠标指针分别放在3个不同的控
制点上 ，按住鼠标左键拖动即可改变表格的高度和 宽度 。
3.4.2 小案例—添加或删除行或列
将光标置于要插入行的位置，选择菜单中的【 修改】|【表格】|【插入行】命令，即可插入一行。
3.6 综合案例
本章主要讲述了表格的基本概念、创建表格和表 格的编辑等，下面将通过本章所讲述的知识创建实例 。掌握表格的使用技巧就可以设计出很多富有创意、 风格独特的网页 。
综合案例1—创建细线表格
表格无疑是网页制作中最为重要的一个对象，因 为通常网页都是依靠表格来排列数据的，它直接决定 了网页是否美观、内容组织是否清晰。合理地利用表 格可以方便地美化页面。本例将讲述如何制作细线表 格，从而使网页更加美观精细。
选中要合并的单元格，选择菜单中的【修改】| 【表格】|【合并单元格】命令，即可将多个单元格合 并成一个单元格。
选中要合并的单元格，在【属性】面板中单击【 合并所选单元格，使用跨度】按钮 ，即可合并单元格 。
选中要合并的单元格，单击鼠标右键，在弹出的 菜单中选择【表格】|【合并单元格】命令，即可合并 单元格。
将光标置于要删除列的位置，选择菜单中的【修 改】|【表格】|【删除列】命令，即可删除列。
第3章 网页的布局

第3章 网页的布局


3.1.2 网页布局实例3
第 章 规 划 网 页 的 布 局 3
标题正文型结构的顶端是网站标识和标题，下 面是网页正文。内容非常简单。
3.1.2 网页布局实例4
第 章 规 划 网 页 的 布 局 3
分栏型结构，这种结构一般分为左右（或上下） 两栏，也有的分为多栏。一般将导航链接与正文 放在不同的栏中。这样打开新的网页，导航链接 栏的内容不会发生变化。
3
第 章 规 划 网 页 的 布 局
使光标出现在表格中。然后单击菜单栏上的 “ 表格” ，打开“表格”菜单，再单击“表格” 菜单中的“插入” ，在下一级菜单中单击“行 或列”，打开“插入行或列”对话框。 在“插入行或列” 对话框选中“行” ，在“行数”右端 的栏位中输入1， 然后选中“所选区 域之上”。单击“ 确定” ，在第二行 的上面将插入一行 。
3
3.1.1 网页的风格1
第 章 规 划 网 页 的 布 局 3
“搜狐”的主页的内容很丰富，色彩鲜艳并有 许多大幅广告和浮动广告栏。
3.1.1 网页的风格2
第 章 规 划 网 页 的 布 局 3
微软中国的主页，内容比较专一，内容非常 有条理，栏目突出，没有凌乱的感觉。
3.1.1 网页的风格3
第 章 规 划 网 页 的 布 局 3
3
3.1.2 网页布局实例1
第 章 规 划 网 页 的 布 局 3
“厂”字型结构的特点是内容清晰，一目了然 。网页最顶端是徽标和图片（广告）栏，下半 部分的左边是导航链接，右边是信息发布区。 这种结构非常常见。
3.1.2 网页布局实例2
第 章 规 划 网 页 的 布 局 3
“同”字型结构的特点是超链接多、信息量大。 网站的顶端是徽标和图片（广告）栏，下部分分 为三列，或者更多。两边的两列区域比较小，一 般是导航超链接和小型图片广告等，中间是网站 的主要内容，最下面是网站的版权信息等。
《使用表格布局网页》课件

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

《使用表格布局网页》 PPT课件
本课程将介绍如何使用表格布局创建网页。掌握表格布局技术，让你的网页 布局更加灵活、美观。
表格布局介绍
什么是表格布局
表格布局是一种使用HTML表格元素进行网页布 局的技术。
表格布局的特点
表格布局具有结构清晰、适用性强等特点，可 用于多种网页布局需求。
表格布局语法
表格元素
总结
表格布局的总结
表格布局是一种强大的网页布局技术，适用于多种布局需求。
今后如何学习表格布局技术
深入学习HTML和CSS知识，结合实践项目不断提升表格布局的技能。
使用<table>标签定义一个表格。
行元素
使用<tr>标签定义表格中的行。
单元格元素
使用<td>标签定义表格中的单 元格。
创建表格布局网页1美化表格布局2
通过添加样式和背景色以及调整单元格 大小和行高等方式，让表格布局更美观。
创建表格元素
使用<table>标签创建一个基本的表格元 素。
优缺点分析
1 表格布局的优点
结构清晰、适用性强，可以实现复杂的网页布局需求。
2 表格布局的缺点
不适用于响应式设计，较难实现某些现代化布局效果。
应用场景
电子商务网站
表格布局适用于展示商品列表和 购物车等功能。
仪表盘界面
表格布局可用于显示数据统计和 信息概览等。
新闻网站布局
表格布局容易呈现多列文章列表 和分类导航等。
电子课件-《电子商务网页设计(第三版)》-A24-3264 第 3 章 表格在网页中的应用

电子课件-《电子商务网页设计(第三版)》-A24-3264 第 3 章 表格在网页中的应用

12
二、利用表格布局网页的简单实例
第3章
13
1. 创建表格
第3章
14
2. 表格参数设置
第3章
15
3. 表格标签检查器的设置
第3章
16
4. 输入表格内容
第3章
17
5. 表格的HTML 表示
第3章
18
第3章
三、用表格布局易买网商品列表页（product-list.htm）
1. 插入表格
（1）打开Dreamweaver CS5，新建页面命名为“product-list.htm”，并 保存。
2
2. 表格的组成元素
表格由三个主要元素构成：行、列以 及单元格。单元格是行和列相交的部分。 单元格和单元格之间的距离叫单元格间距。 单元格内容和单元格边界的距离叫单元格 边距。整张表格的边缘叫作边框。表格也 可以带一标题，标题在表格的顶端，表格 也以有背景色，可以单独对表格、行、单 元格设置不同的背景色。
3
第3章
二、表格的基本操作
1. 新建表格
4
第3章
2. 选择表格元素
第3章
5
3. 调整表格、列和行的大小
第3章
6
第3章
4. 添加/ 删除行和列
当行被选中时，单击键盘上的“Delete”键可以删除一行； 当列被选中时，单击键盘上的“Delete”键可以删除一列； 单击选中任意一个单元格时，按“Ctrl+M”快捷键可以在当前单元格下方 插入一行； 单击选中任意一个单元格时，按“Ctrl+Shift+A”快捷键可以在当前单元格 左边插入一列。
第3章Байду номын сангаас
第 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 课后作业学生完成一个表格布局的响应式网页设计，并在不同设备上测试其表现。

第三节网页的排版布局精品PPT课件

5.单一表格结构要整齐
四、表格的高级应用ຫໍສະໝຸດ 1.水平、垂直细线链接
插入一个一行一列边框、间距、填充均为0的表格， 表格的高度或宽度设为1px,加背景颜色 删除单元格多余的&nbsp;（空格）。
2.单像素表格
1).边框为0，
<table Style=“border:1px solid #ffff00”>
3. 一、标准表格
表格的标记 表格：<table></table> 表格行：<tr></tr> 单元格：<td></td>
1.插入表格 边距、间距、边框均设为0
2.选择整个表格的方法： ➢单击表格边框 ➢单击状态栏上<table>
3.表格的属性
4.单元格的属性 合并、拆分 水平、垂直 二、布局表格
“Ctrl键”连续绘制单元格 三、使用表格布局的注意事项 1.不要出现横向滚动条
分辨率为： 800×600时 表格宽度为：760像素 分辨率为：1024×768时 表格宽度为：995像素
左右页边距为0 表格“居中”
2.尽量不要将整个页面都套在一个表格里 3.利用表格的嵌套灵活布局
4.表格的嵌套层次不能过深 控制在3-4层以内
2).设置表格第一行的背景颜色
3、制作圆角表格
制作半透明的图片
链接
表格填充、间距和边框都设为0
设置最上面单元格的背景颜色,插入图片 （左对齐；顶端）
.在下面的单元格的
<td Style=“border:1px solid #ffff00” >
五、图层 1.插入图层 布局/标准/图层 图层的嵌套（按Alt键） 2.层属性面板 3.层面板

使用表格讲义布局网页

•将鼠标光标移至表格外框线上，当鼠标光标变为 形状时， 单击鼠标左键。
•在表格内部任意单元格中单击鼠标左键，然后在标签选择器 中单击对应的“<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>标签结
束），行与列的交叉区域称为单元格，网页中的元 素就放置在这些单元格中 。

dreamweaver8网页设计 第三章 使用表格布局网页PPT课件

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
添加

第3章 使用表格布局网页


3.2 任务9制作细线表格 任务9
细线表格是网页上常见的表格形式， 细线表格是网页上常见的表格形式 ， 细线表格 看起来更加精致美观。 看起来更加精致美观。读者可能会说 ， 这不就是加了边框颜色的 表格，把边框宽度设成最小的值1 表格，把边框宽度设成最小的值1嘛，有什么新鲜的 。
步骤3 在“表 格”对话框中，将 “行数”设置为6 ，“列数”设置为 7，“表格宽度” 设置为500像素， 单击“确定”按钮 ，插入表格。
步骤4 打开“ 属性”面板，将“ 边框”设置为1，“ 填充”设置为3，“ 间距”设置为2，“ 对齐”设置为“居 中对齐” 。
步骤5 在单元格 中输入相应的文字 。
3．判断题 （1）表格由行、列和单元格三部分组成。（ ） （2）在导入表格式数据前，首先要将表格数据文件 转换成.html格式。（ ） （3）把边框宽度设成最小的值1就可以制作出细线 表格。（ ）
4．问答题
（1）怎样设置表格属性？ （2）怎样导入表格式数据？ （3）怎样利用表格布局网页？
1．填空题 （1）表格是设计和制作网页时必不可少的元素 ，它在网页中有两个作用：一是________，二是 __________。 （2）当需要把其他应用程序（如Excel、 Access）建立的表格数据导入到网页中时，可以利 用Dreamweaver中的___________命令来实现。 （3）如果在设计时未能充分进行页面布局规划 ，很可能出现表格的行、列不够或太多的情况，此 时可以根据需要__________，如果是单元格过多或 不够，这时可以_________。
3.1 任务8利用表格制作学生成绩表 任务8
使用表格都可以清晰地显示列表数据，可 以将各种数据排成行和列，从而更容易阅读 信息。
3.1.1 简单讲评
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

实例7 利用表格布局网页
实例7 利用表格布局网页
操作设计要点： 1.在相应位置插入3行1列表格，宽度为669像素； 2.在第1行单元格中，插入图像banner.jpg；第2 行单元格插入图像button.jpg；第3行单元格中 插入2行1列的表格； 3.在第1行单元格中插入1行1列表格，宽度550 像素，居中对齐，填充0，间距0，输入文字， 设置大小13像素，颜色#3a7c7c,加粗 4.在第2行单元格中插入图像cor.jpg，水平方向 居中对齐。
实例8 利用表格布局网页 根据提供素材，完成如下网页。
实例8 参考步骤
1.新建空白文档，设置页面属性，背景图像为bj.gif 2.插入1行3列，宽为750像素，居中对齐，边框为0， 背景颜色为#FFFFFF（白色） 3.选中左侧单元格，输入“千卉花店”，设置文本为 华文行楷，大小36像素，颜色为#FF0000，单元 格水平居中对齐，垂直居中对齐 4.在中间单元格插入图片banner.gif 5.在右侧单元格插入3行1列表格，宽度为100像素， 边框为0，输入相应文字，设置字体为隶书，颜色 为#FF0000，水平居中对齐。 ※至此完成头部
实例9 利用表格布局网页2
实例9 利用表格布局网页 参考步骤 1.设置index.html页面属性：字体为宋体，大 小14px，颜色#000，背景颜色#FFF“关于 我们” 2.插入3行2列表格，宽为974px，其他设置为 0。 3.合并第1行第1列第2列单元格，插入图像 index_r1_c1.gif；合并第1列第2行第3行单 元格，插入图像index_r2_c1.gif；
3.2.2 新建表格 2、创建嵌套表格 嵌套表格：在表格的某个单元格中再插入 一个表格，宽度受到所在单元格的宽度限 制。 嵌套表格常用于控制表格内部的文字或图 像的位置。
3.2.2 新建表格 3、导入表格式数据 表格式数据：以制表符、逗号、冒号、分 号或者其他分隔符隔开的数据。 导出表格式数据时，必须导出整个表格， 不能选择导出部分表格。 操作步骤：文件/导入/表格式数据 或 插入/表格对象/导入表格式数据
Marquee的各个参数
align：是设定活动字幕的位置，除了居左、居中、居右三种位置外，又增加 靠上（top）和靠下（bottom）两种位置。 Bgcolor：用于设定活动字幕的背景颜色，可以使用英文的单词也可以是十六 进制数的。 Direction：用于设定活动字幕的滚动方向是向左（left）、向右（right）、向 上（up）、向下（down）。 Behavior：用于设定滚动的方式，主要由三种方式： behavior="scroll"表示由一端滚动到另一端； behavior="slide":表示由一端快速滑动到另一端，且不再重复； behavior="alternate"表示在两端之间来回滚动。 Height：用于设定滚动字幕的高度。 Width：则设定滚动字幕的宽度。 Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。 Scrollamount：用于设定活动字幕的滚动距离。数值越小，滚动的速度就越 快。 scrolldelay：用于设定滚动两次之间的延迟时间，数值越小，间隔就越小。 Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。 其中默认情况是向左滚动无限次，字幕高度是文本高度；滚动范围：水平滚 动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。
3.2.3 表格基本操作 8、格式化表格（CS5已取消） 选中需要进行格式化的表格，命令/格式化 表格
实例2 套用表格
实例 2 套用表格 步骤1： 新建文档，文档标题为旅游日程表。 步骤2：在文档窗口输入“旅游日程表”作为 表头。插入6行3列表格，宽度480像素。在 属性中设置，对齐方式为居中对齐，间距 设为0. 步骤3：选中表格，命令/格式化表格，套用 设计方案。交错颜色，第一行居中对齐， 粗体，最左列居中对齐。 步骤4：输入文字，设置单元格水平居中对齐。 步骤5：保存页面，预览效果。
实例6 制作圆角表格
实例6 制作圆角表格 操作涉及要点 1.新建空白文档，插入4行1列表格，宽度778 像素 2.第1行插入home_34.gif，第2、3行依次插入 相应图像996.gif,home_36_01.gif 3.第4行单元格中插入3行3列表格 4.根据图式插入相应图像，其中第2行第1、２、 ３列为背景图像home_01.gif、 home_02、 gif home_03.gif
3.2.1 三种表格视图模式 视图模式：标准模式、扩展模式、布局模式。
标准模式：按浏览器预览的结果来显示网页， 用虚线来显示表格，较不易选择。（移动改变 单元格可选用该模式）
扩展模式：其显示效果与预览效果不一致，表 格以双实线形式显示（布局完成后可使用该模 式添加各种网页元素）。
3.2.2 新建表格 1、插入表格 菜单栏：常用\表格 工具栏：布局\表格 快捷键：Ctrl+Alt+T
实例1 导入表格式数据 操作要求：导入 daoru.txt
3.2.3 表格基本操作 添加内容到单元格 ----输入文字：选中任意单元格，在表格中键 入文字。单元格在键入文本时会自动扩展。 ----插入图像：选中任意单元格，用插入图像 的方法，直接插入即可。
3.2.3 表格基本操作 表格结构的修改是指添加表格的行和列， 以及合并和拆分单元格。 1、选择表格元素 选择整个表格：单击表格的任一单元格， 然后在“文档”窗口状态栏的标签选择器 中点击HTML表格标签 <table>。 选择行或列：同Word、Excel中选择行或列 的方法。
实例8 参考步骤
6.下一行插入1行8列表格，设置其属性，宽750像素， 高25像素，居中对齐，边框为0，背景图像为 B_bg1.gif 7.输入相应文字，设置文字大小12像素，颜色 #FF0000，居中对齐 ※至此完成导航部分 8.下一行插入2行2列表格，设置其宽度750像素，边 框为0，背景颜色为#FFFFFF,居中对齐 9.选择表格第1行，合并单元格，输入“当前位置： 千卉花店>>首页>>”，大小12像素 10.在下一行左侧单元格中，插入6行1列表格，设置 其宽度150像素，边框为0
3.2 表格的应用
表格：由行、列、单元格构成。<table></table>， 由多个tr、th或td元素组成； 行：水平空间；<tr></tr>,一般包含多个th或td元素 列：垂直空间； 单元格：行和列相交获得的空间。分为th、td两类。 ----<th></th>：表头单元，包含头部信息； ----<td></td>：标准单元 ，包含数据，td 元素中 的文本一般正常字体且左对齐 ----更复杂的 HTML 表格也可能包括 caption、 thead、tfoot 以及 tbody 元素。
3.2.2 新建表格
表格对话框参数含义： 行数、列数：新建表格的行列数； 表格宽度：设置表格的宽度(像素、百分比)； 边框粗细：边框为0即为无边框； 单元格边距：内容和边界的距离； 单元格间距：单元格之间的距离； 标题：表的标题； 对齐标题：标题相对于表格的显示位置。
3.2.2 新建表格
3.2.3 表格基本操作 选择单元格：相邻、不相邻 ① 单击单元格，然后在“文档”窗口状态栏 的标签选择器中单击单元格标签<td>； ② 按住 Ctrl 键单击单元格； ③Shift键可选择多个单元格； ④直接拖曳
3.2.3 表格基本操作 2、添加表格的行或列： ①插入/表格对象 ②选择对象，单击右键 ③修改/表格 ④表格属性面板 3、删除表格的行或列：同上 4、拆分和合并单元格：同上 5、剪切与粘贴单元格：剪切的单元格必须与 选定单元格兼容；若在表格外粘贴，则另成 一个新表
3.2.3 表格基本操作
6、设置表格属性
填充：单元格边界与单元格内容之间的距离 间距：相邻单元格之间的距离 对齐：同一段落中的其他元素的位置
3.2.3 表格基本操作 7、设置单元格、行和列属性
水平：通常单元格采用左对齐，标题单元格采用居中 对齐 垂直：通常采用居中对齐 不换行：设置单元格内文本是否换行。 标题：将所选单元格的格式设置为表格标题单元格。 默认时，单元格为粗体，居中对齐。
实例 5 制作双线表格
实例 5 制作双线表格 操作涉及要点 1.新建文档，文档标题为四月考勤表。 2.插入9行5列表格，宽度500像素 3.表格属性：间距2、边框1，对齐方式为居 中对齐。选中表格，设置边框颜色 3.输入文字，设置第一行单元格水平居中对 齐，加粗。第一列单元格水平方式为居中 对齐。 比较实例4、5，注意单线、双线中边框的 设计。
实例8 参考步骤
11.在第一行单元格中，输入“最新消息”，设置文 本为12像素，单元格高25像素，水平为居中对齐， 背景图像为B_bg1.gif 12.在第二行单元格输入相应文字，设置大小12像素， 颜色为#FF0000。在代码视图下，添加如下代码： <marquee scrollamount="2" height="100" direction="up">为迎接情人节的到来，本店特推出 “爱你在心中”系列鲜花，数量有限，望广大新老 客户莫失良机。订购电话： 139****0544</marquee> 13.同步骤11设置“客户服务”50像素，边框为0，字体为12像素，颜色为 #FF0000，文本框高25，水平居中对齐。 15.同步骤11设置“友情链接” 16.同步骤14，插入表格，进行设置。
3.1 页面布局概述 例如：可以把网站标志放在左上角的位置， 把导航栏放置在网站标志的右边或下方， 版权声明和联系信息通常出现在网页的底 部居中位置等。 网页的具体布局还与网页内容、网页风格、 网页大小等因素有关。 在Dreamweaver可以使用表格、布局表格 和布局单元格、框架、层等方法来实现网 页布局。