静态网页表格与布局.

提示：可以用DW打开，先看看整体布局是什么，
再自己动手做。所用图片在images文件夹中。
2018/9/28 西南科技大学天府学院 25
2018/9/28
西南科技大学天府学院
16
表格应用实例

练习1(example3-1)：

练习2(example3-2)书上P169-171
2018/9/28
西南科技大学天府学院
17
四、页面布局

绘制布局单元格和表格
首先要将文档的视图模式设置成为布局视图
提示：布局单元格之间不能相互重叠，同样布局 表格之间也不能相互重叠。在绘制布局表格和单元格 时，会自动激活绘制区域的靠齐特性，默认状态下， 最小的靠齐网格是 8 像素，因此很容易绘制出排列整 齐的表格或单元格。如果希望在绘制表格或单元格时 精确到8像素以下，则可以在绘制时按住Alt键。
2018/9/28
西南科技大学天府学院
11
单元格的基本操作

选定单元格
选择一个单元格； 选择连续的单元格：按住
Shift键的同时单击鼠标；
选择多个不连续的单元格：
按住Ctrl键的同时单击鼠标；
2018/9/28
西南科技大学天府学院
12
单元格的基本操作

合并和拆分单元格
选取 选择
或
在DW中可以复制、粘贴与清除单元格内容跟Excel操作相同！
2018/9/28 西南科技大学天府学院 18
注意事项

一个嵌套表格不能大于存放它的表格。

如果希望往布局表格中添加布局单元格，只能添加
在灰色区域中，因为单元格是不能相互覆盖的。

如果您尝试在现有内容下面绘制布局表格但是出现
禁止绘制鼠标指针，请调整“文档”窗口的大小以 使现有内容底部和窗口底部之间产生更多的空白空 间。
解决方法

1、选择图象设置你需要的尺寸，强制图像按照此 尺寸显示。 2、根据具体情况，相对说来，最外面的表格宽度 采用惯常的标准： 755，以保证能适应800×600显 示模式的浏览。一般用%来做表格的都是内表格， 外表格一般都确定为一个数值，这样不管分辨率是 1024*768还是800*600都可以正常查看网页。
西南科技大学天府学院
2018/9/28
20
为布局表格添加内容

要往单元格输入数据时，可以采用如下的步 骤：
（1）将光标移动到要插入数据的单元格内 （2）输入数据
提示：在布局视图中，只能将内容插入到布 局单元格中。因此，如果仅仅是创建了布局表格， 而没有创建布局单元格，则无法在布局视图中直 接输入数据。
表格属性：填充:3、间距:5、边框:1
设置背景色、边框色
表格属性：填充:3、间距:0、边框:6
<table>中添加bordercolorlight=“#00ccff” (浅蓝色)、bordercolordark=“#3333ff” (深 蓝色)
2018/9/28 西南科技大学天府学院 9
三、编辑表格
2018/9/28 西南科技大学天府学院 24
小结

本节详细讲解了Dreamweaver 8中表格的操作，以及 布局视图的布局表格的操作。主要内容包括：表格的 创建、表格的基本操作、表格排序、绘制布局表格和 布局单元格、布局表格和单元格的调整、利用表格或
布局表格单元格对页面进行规划布局等。
课后练习：创建如example3.html所示的网页
增加行或列 同时增加多行或多列 删除行和列

在DW中跟Excel操作相同！
2018/9/28
西南科技大学天府学院
10
选择表格元素

选定整个表格(3种)
1、将光标放在表格的右
边和下边的外边框线上， 单击鼠标； 2、光标放在任一单元格， 鼠标单击视图窗口底部 的<table>标记； 3、光标放在任一单元格， 选择【修改】→【表格】 →【选择表格】菜单；
2018/9/28
西南科技大学天府学院
19
布局单元格和表格的基本操作

创建布局表格和单元格后，可以根据页面布 局的需要对它们进行各种操作。布局表格和 布局单元格的基本操作包括移动、修改其大 小和对其进行格式化。 1．移动布局单元格和布局表格 2．改变布局单元格和表格的大小
3．格式化布局单元格和布局表格
表格与布局

本章主要内容
创建表格 设置表格属性 编辑表格 页面布局
创建布局表格
创建布局单元格
2018/9/28
西南科技大学天府学院
1
表格是网页组成的框架，如图示例 表格进行数据的组织，数据的显示非常有条理性：
那么，是不是一个没有数据的网页就不会用到表格了呢？
2018/9/28 西南科技大学天府学院 2
在网页中，表格应用更多的是对网页的布局 进行规划！ 通过使用表格将图片、文本及动画等各种对 象在网页中的位置进行规划，从而使整个页 面的效果多而不乱，整齐有序！

2018/9/28
西南科技大学天府学院
3
如图：一幅将各种网页的组成对象集合的布局表格
可见，表格的布局作用就是对网页 的框架进行规划 ，然后便于在网页 中添加对象，实现预定义的效果。
2018/9/28 西南科技大学天府学院 13
表格的格式化

使用单元格属性面板 对整个表格的格式化，主要通过属性面板来完成。 如图：
2018/9/28
西南科技大学天府学院
14
表格的套用格式

对表格进行格式化，还可以应Dreamweaver 8中预置 的表格格式，其中包含右十几种非常实用的格式： 选择“命令”---“格式化表格”
注意：只有简单的 表格才能使用预先 设置的设计进行格 式设置。不能使用 这些设计对包含合 并单元格、列组或 任何其他表格的表 格进行格式设置。
2018/9/28 西南科技大学天府学院 15
排序表格

在Dreamweaver 8中可以对表格的数据进行排序。 具体步骤：选择菜单【命令】→【排序表格】，弹 出排序表格对话框，如图 ：
2018/9/28
西南科技大学天府学院
21
疑问

1、当图像或文字比规定的表格大时，
表格被撑大了，这显然不是我期望的，
怎样才能控制住呢？ 2、在定义表格和行的宽度时，是应该 用具体的数值还是用百分比，哪一种 更好控制表格，使表格不会随意的撑 大，而且更利于开发人员开发呢？
2018/9/28 西南科技大学天府学院 22
西南科技大学天府学院
Leabharlann Baidu
7
二、设置表格属性

提示：
若要确保浏览器不显示表格边框，请将“边框”设置为 0。
若要在边框设置为 0 时查看单元格和表格边框，请选择
“查看” →“可视化助理” →“表格边框”。
2018/9/28
西南科技大学天府学院
8
不同样式的表格
表格属性：填充:3、间距:0、边框:1
2018/9/28
西南科技大学天府学院
4
一、创建表格
1、选取 中选取 2、选择 或者“插入”菜单中选择 3、插入表格对话框 或者在“查看”菜单
2018/9/28
西南科技大学天府学院
5
单元格边距(填充)：确定单元格边框和单元格内容之间的像 素数。P163 单元格间距：确定相邻的单元格之间的像素数。
所以建议，外表格定义数值，内表格可以适当采 用%和数值。
提示：不设置表格宽度则表示表格的宽度取决于其内 容。 2018/9/28 西南科技大学天府学院
23
网页设计标准尺寸
1、800*600下，网页宽度保持在778以内，就不会出现水平滚
动条，高度则视版面和内容决定。 页面标准按800*600分辨率制作，实际尺寸为778*434 px 页面长度原则上不超过3屏，宽度不超过1屏 2、1024*768下，网页宽度保持在1002以内，如果满框显示的 话,高度是612-615之间。就不会出现水平滚动条和垂直滚动条。 (在dw里面有设定好的标准值, 1024*768页面的标准大小是 955*600,照着它的尺寸做就行了) 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下 方又不会出现滑动条，尺寸为740*560左右
页眉：表示设置表格内标题的四种形式。 注意：像素是相对于显示器的，而百分比是相对于浏览器的
2018/9/28 西南科技大学天府学院 6

在“辅助功能”部分指定以下选项：
标题：提供了一个显示在表格外的表格标题。 对齐标题：指定表格标题相对于表格的显示位置。 摘要：给出了表格的说明。
2018/9/28