网页设计用布局视图和表格布局网页
网页的排版表格篇
⽹页的排版表格篇⽹页的排版表格篇⽹页离不开表格，决⼤多数的表格都是以表格为主体制作的表格是⽹页的⼀个⾮常重要元素，因为HTML本⾝并没有提供更多的排版⼿段，我们往往就要借助表格实现⽹页的精细排版。
可以说表格是⽹页制作中最为重要的⼀个技巧，表格运⽤得好坏，直接反映了了⽹页设计师的⽔平。
使⽤表格能使你的⽹页变得更加的清楚，使⼈看起来更有条理、更加直观，但它的使⽤有⼀个⼩⼩的缺陷：它会使你的⽹页显⽰的速度变慢⼀点。
我们知道⼀般的⽂字显⽰是逐⾏显⽰的，即⽂字从服务器上传了过来，尽管不全，但它还是会将传到的部分先显⽰出来，以⽅便浏览，⽽⽤了表格就不同了，表格⼀定要等到整个表格的内容全部传过来了之后，才能在客户端的屏幕上显⽰出来，即表格是整个⼀块⼉出现的。
因此我们在使⽤表格的同时要注意，如果表格包含的内容不是很多，就可以利⽤表格来更好的⼯作，但如果表格中包含的内容很多，此时最好别⽤表格结构，否则它会使你的⽹页出来的速度奇慢⽆⽐。
表格是现代⽹页制作的⼀个重要组成部分。
表格之所以重要是因为表格可以实现⽹页的精确排版和定位。
⾸先看表格操作的⼀个实例。
然后来看⼀些表格操作的基本⽅法。
在开始制作表格之前，我们⾸先对表格的各部分的名称做⼀个介绍。
下⾯看看我们使⽤表格制作的页⾯的实例这幅页⾯的排版格式，如果⽤以前我们所讲的对齐⽅式是⽆法实现的。
因此我们需要⽤到表格来做。
实际上是⽤两⾏两列的表格来制作。
1、在插⼊栏中选择按钮或“插⼊”菜单>选“表格”。
系统弹出表格对话框。
⾏：2。
列：2。
其余的参数都保留其默认值。
2、在编辑视图界⾯中⽣成了⼀个表格。
表格右、下及右下⾓的⿊⾊点是调整表格的⾼和宽的调整柄。
当光标移到点上就可以分别调整表格的⾼和宽。
移到表格的边框线上也可以调整。
3、在表格的第⼀格按住左键不放，向下拖拽选中⼆格单元格。
然后在展开的属性⾯板中选择合并单元格按钮（如下图红框所⽰）。
将表格的单元格合并。
如果要分割单元格，则可以⽤合并单元格按钮右边的按钮。
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组对阵表
网页设计与制作基础教程 第3版 第03章-使用表格布局页面
::::::::::
::::::::::
3.2.8 导入与导出表格式数据
使用Dreamweaver CC，用户不仅可以将另一个应用程序，例如Excel中 创建并以分隔文本格式(其中的项以制表符、逗号、冒号、分号或其他分隔 符隔开)保存的表格式数据导入到网页文档中并设置为表格的格式，而且还 可以将Dreamweaver CC中的表格导出。
::::::::::
3.2.6 复制与粘贴单元格
用户在Dreamweaver CC中插入表格并选中表格中一个单元格后，选择 “编辑”命令，在弹出的的菜单中可以对表格执行“剪切”、“拷贝”、“ 粘贴”等操作。
::::::::::以根据单个列的内容对表格中的行进行 排序或者根据两个列的内容执行更加复杂的表格排序。
《 网页设计与制作基础教程(第3版)》
第三章
使用表格布局页面
学习目标
在网页中插入的文本和图像会随着浏览器窗口的放大与缩 小发生变化，这使得网页处于不稳定的显示状态。要解决这种 状态，最简单的方法就是使用表格，表格不仅能够控制网页在 浏览器窗口中的位置，还可以控制网页元素在网页中的显示位 置。
::::::::::
本章重点
创建基本表格 插入表格元素 调整表格大小 导入与导出表格数据 使用表格制作网页
::::::::::
3.1 使用表格
网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视 频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不 仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。 表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地 表达设计者的思想。
网页中表格的用途 创建表格 插入表格元素 设置表格属性
《网页设计与制作》操作题
《网页设计与制作》操作题（一）题目一：根据图例要求，编辑给定网页，index.htm,jianli.htm,zuoping.htm,zuoyouming.htm，为指定网页添加文字，图片，超链接（导航超链接、邮件超链接），效果图如下。
（素材在“操作题（一）/题目一”文件夹下，简历文字在“简历.txt”、座右铭文字在“座右铭.doc”中），完成后上传教师机，文件名姓名+学号。
首页我的简历我的作品座右铭题目二：使用表格构造布局网页，效果图如下：(素材在“操作题（一）/题目二”中，文字在“表格布局.txt”中)，完成后上传教师机，文件名姓名+学号。
题目三：制作图片翻转的导航菜单，效果图如下：(素材在“操作题（一）/题目三”中) 完成后上传教师机，文件名姓名+学号。
《网页设计与制作》操作题（二）题目一：根据范例图片的效果，制作鼠标拖动图片到不同位置，实现拼图效果网页制作。
效果图如下，素材图片在“操作题（二）/题目一/images”目录下, 完成后上传教师机，文件名姓名+学号。
题目二：使用表格、布局视图设计、制作网站《我的相册》，效果图如下，素材在“操作题（二）/题目二”目录下, 完成后上传教师机，文件名姓名+学号。
《我的相册》首页效果图“四季”效果图“万物”效果图“外面的世界”链接网址：/《网页设计与制作》操作题（三）题目一：使用表格、布局视图设计、制作购物网站首页，效果图如下，素材在操作题（三）目录中, 完成后上传教师机，文件名姓名+学号。
题目二：1、熟练使用搜索引擎查找所需素材并能够进行图片、文字、声音等素材的下载。
2、.学会分门别类地收集和整理素材。
3、学会图片格式转换和一般效果的处理。
Photoshop简单处理图片、软件"格式工厂”转换图片格式。
4、学会声音和视频的简单截取和格式转换等操作。
软件“视频编辑专家”对视频进行截取、分割、合并、格式转换等操作。
利用软件“GoldWAVE”对声音进行录制、截取、拼接、转换。
网页设计第9章Dreamweaver的表格和网页版面设计PPT课件
9.1 网页中的表格
9.1.4.5 调整表格大小和外观 ▪ 调整表格宽度或高度：选择表格，拖动选择框右边
或底边的控制点。 ▪ 同时调整表格的高度和宽度：选择表格拖动选择框
右下角的控制点。 ▪ 若要精确指定表格大小：选定表格，在属性检查器
的“宽”和“高”文本框输入数值，在其后的下拉 列表框选择值的单位。 ▪ 在表格的属性检查器中可以设置表格的背景颜色、 背景图像、边框颜色等等属性。
进入布局模式。如图。 ▪ 在布局模式里，“插入”栏的“布局”中有两个可
用的按钮,它们是“布局表格”按钮和“绘制布局单 元格”按钮。此时，标准模式下的“表格”按钮和 “绘制层”按钮均呈不可用状态。（在标准模式下， “布局表格”按钮和“绘制布局单元格”按钮是不 可用的）。
16
9.2 用表格布局网页
17
9.2.3 绘制布局表格 ▪ 在布局模式下单击“插入”工具栏“布局”类别中的“布局
表格”按钮，然后将十字形指针移至工作区，按住鼠标左键 拖动，即可绘制出一个布局表格。按住Ctrl键可连续绘制出 多个布局表格。
18
9.2 用表格布局网页
9.2.4 更改布局表格和布局单元格的属性 设置布局表格的属性——使用布局表格的属性检查器。 如图:
dreamweaverdreamweaver的表格和网页版面设计的表格和网页版面设计表格在网页中的作用表格在网页中的作用表格的创建与编辑表格的创建与编辑利用表格对页面进行布局利用表格对页面进行布局利用布局试图对页面进行布局利用布局试图对页面进行布局dreamweaverdreamweaver中框架的创建方法中框架的创建方法超链接框架目标的指定超链接框架目标的指定框架和框架页的基本操作框架和框架页的基本操作9191网页中的表格网页中的表格表格是现代网页制作的一个重要组成部分
DW网页局(表格、布局表格)
6. 固定宽度列 ： 具有特定的宽度值。7. 自动伸展列 ： 就是表格可以按照屏幕比例来自动调整 宽度 ， 相当于将表格的宽度定义为百分比； 如果布局中包 括自动伸展列 ， 则该布局会始终填充访问者浏览器窗口的 整个宽度 。常见的布局是让页上包含主要内容的列自动伸 展 ， 这会将所有其它列自动设置为固定宽度 。例如 ， 假设 您的布局在页的左边有一个较宽的图像 ， 在右边有一列文 本 。您可能将左边的列设置为固定宽度 ， 让侧栏区域自动 伸展。8.设置“布局 ”模式的首选参数 ， 打开对话框首选参数， 然后从左侧的类别列表中选择“布局模式 ”。在其中可以设置自动插入间隔图像 、单元格外框、单元 格高亮、表格外框、表格背景 。
第4章 构建网页布局
• 使使用用表表格格• 使使用用布布局局表表格格
4. 1 使用表格所谓表格就是由一个或多个单元格构成的集合 ， 表格中横向的多个单元格称为行 ， 垂直的多个单 元格称为列 。行与列的交叉区域称为单元格 ， 网 页中的元素通常都被放置在这些单元格中 ， 以使
其“各安其位 ”。
4.2.3绘制布局单元格：按住ctrl键拖动可以连续绘制多个布局单元格。注意要点：■ 如果页面已包含内容 ， 则只能在现有内容的下方空白 区绘制新的布局表格。■ 在一个布局表格中可创建多个布局单元格 ;布局单元 格不能存在于布局表格之外 ;更不能在一个布局单元 格中创建布局表格 。 也可以仅在准备添加内容时绘 制每一个单元格。■ 当绘制的布局单元格不在布局表格中 ， 则自动创建一 个布局表格作为该单元格的容器 ， 这时表格与页边距 相差8个像素。■ 表格不能互相重叠 ， 可以嵌套 。一个表格可以完全包 含在另一个表格当中 。将插入点放置到一个布局表格 中 ， 即可绘制嵌套布局表格 。嵌套布局表格的大小 不能超过包含它的表格。
网页制作与设计5
14
5.1 表格与布局表格
5.1.2 使用布局模式对页进行布局
6．布局表格应用1 布局表格应用1
15
5.1 表格与布局表格
5.1.2 使用布局模式对页进行布局
6．布局表格应用2 布局表格应用2
16
5.2 层
5.2.1 层的概念
图层是被分配了绝对位置的HTML页面元素， 图层是被分配了绝对位置的HTML 页面元素 ， 可以包含文 HTML页面元素 图像或其他任何可在HTML文档正文中放入的内容。 HTML文档正文中放入的内容 本、图像或其他任何可在HTML文档正文中放入的内容。通过 Dreamweaver， 用户不仅可以使用层来设计页面的布局， Dreamweaver ， 用户不仅可以使用层来设计页面的布局 ， 还 可以利用层灵活地放置内容。 可以利用层灵活地放置内容。 在设计网页时，必须对页面元素进行定位， 在设计网页时， 必须对页面元素进行定位， 使页面布局 整齐、美观。图层可以放置在页面的任意位置， 整齐、美观。图层可以放置在页面的任意位置，使用图层可 以以像素为单位来精确定位页面元素。 以以像素为单位来精确定位页面元素。把页面元素置入图层 可以控制某个图层显示在前面还是后面，显示还是隐藏。 中，可以控制某个图层显示在前面还是后面，显示还是隐藏。 配合时间轴的使用，可同时移动一个或多个图层， 配合时间轴的使用，可同时移动一个或多个图层，从而轻松 制作出动态效果。 制作出动态效果。
9
5.1 表格与布局表格
5.1.2 使用布局模式对页进行布局
2．标准模式与布局模式的切换 在绘制布局表格或布局单元格之前，必须从“标准” 在绘制布局表格或布局单元格之前， 必须从“ 标准 ” 模式切 换到“布局”模式。如果在“布局”模式中创建布局表格， 换到 “ 布局 ”模式 。 如果在 “ 布局” 模式中创建布局表格 ， 则在向表格中添加内容或对表格进行编辑之前最好切换回 标准”模式。 “标准”模式。
FRONTPAGE2003 教程(设计网站部分)
FRONTPAGE2003 教程（设计网站部分）FrontPage2003 教程轻松布局网页用FrontPage2003的“布局表格和单元格”功能布局网页时，需要通过两部分来完成。
首先通过“布局表格”功能来为网页布局创建一个框架，然后通过“布局单元格”功能为该框架填充包含有网页内容(包括文本、图像、Web部件和其他元素)的区域，也就是单元格。
下面我们就以设置一个单位网站首页为例来了解一下用布局表格给网页布局的过程。
一、创建布局表格1.创建布局表格打开一个空白网页，并切换到“设计”视图下，单击“表格”菜单中的“布局表格和单元格”命令，随后在右侧弹出一个任务窗口(图1)，在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。
2.绘制布局表格如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。
创建时首先在“新建表格和单元格”项中单击“绘制布局表格”，随后将指针移到操作窗口最下。
3.设置表格属性插入表格后，还需对表格属性进行设置。
在“表格属性”项中设置该表格所需的属性。
提示:在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为0。
在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。
在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标- 1 -签。
每个标签都包括一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，选择“更改行高”命令，在弹出的“行属性”对话框中重新输入该行高度值即可。
FrontPage2003还提供了一个表格自动功能，它可以按照比例自动伸缩，调整表格的宽度和高度，使用时在边距标签下拉菜单中选择“自动伸缩”命令即可快速地对表格的尺寸进行调整，非常方便。
二、单元格的添加和设置1.添加单元格布局表格创建了网页框架后，还要向表格中添加单元格。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图4 在插入面板调出“布局”模式 在图3中，按[退出]则切换到“标准”模式。
2)布局表格的操作 在“布局”工具中，单击“布局表格”按钮，鼠标指 针变为加号。
3)、在“布局”工具中，单击“绘制布局单元格”按钮。 鼠标指针变为加号。
图6 “绘制布局单元格”工 具 指向现有布局表格中的空白（灰色）区域，然后拖动指针 以创建布局单元格。
教学内容
练习用布局模式和表格布局网页
教学目的
1.掌握用表格布局网页基本操作 2.掌握用布局模式布局网页基本操作 3.比较表格和布局模式的优劣
教学重点
1.用表格布局网页 2.用布局模式布局网页
教学难点
布局模式布局网页
一、表格
1、表格元素 表格是除文字、图片外重要的网页元素。
2、用表格布局网页 要点：“水平”、“垂直”、“宽”、“高”、 “标 题”、 “背景”、 “背景颜色”、 “边框”、 “拆分单元格”、“合并单元格”等等。
范例1：仔细观察一组图片，将它们合并为一个完整的图片。 表的设计如下： 列=3，行=6，宽=780，填充=0，间距=0，对齐=居中对齐，边 框粗细=0，单元格边距=0，间距=0。
范例1效果
二、布局模式
1、 什么是布局模式 在此模式下，只有2个工具，即布局表格和绘制布局单元 格。 2、 用布局模式布局网页 1)在“插入”面板的“布局”工具组中,按“布局”,出现 “布局”模式，见图3，图4
范例2： 图7 用布局模式制作的网页（效果）
【作业】
思考题：用表格布Βιβλιοθήκη 和用布局模式布局网页有何优劣？