Dreamweaver8¸0网站与网页制作教程

第5章 表格和样式表
Chapter 5 Table and CSS

页面的布局对于网页制作来说很重要，在进行 布局时可使用表格、层和框架等网页布局工具， 使页面布局更合理、更美观。表格、层和框架 各有优点、缺点，在布局页面时应结合使用多 种布局工具，设计出理想的页面。



“亘”字型网页布局结构：适合内容较少、整个 站点页面内容相似的网站。 “目”字型布局结构：该结构页面信息量大，一 般应用于大型网站。 “匚”右框型布局结构：这种布局方式在网页制 作中较为广泛，初学者容易上手。
1. 选择整个表格 法一：单击表格的左上角或单击右边或 底部边缘的任意位置 法二：单击表格中的任意单元格，然后 在文档窗口左下角的标签选择器中选择 table标签 法三：单击单元格，选择“修改”菜单 下的“表格”子菜单中的“选择表格”

5.2 表格的选定
Selecting the table
典型案例——用CSS样式设置文本格式

下面练习用CSS样式为“银杏树”网页进行文 本格式设置。
最终效果图
让背景不跟随内容 滚动

背景图片是很多网页设计者经常添加的东西， 当网页内容超出一屏时，拖动滚动条，背景图 片会与内容相对静止的一起滚动，那么能否锁 定背景不跟随滚动呢？当然可以。下面就来试 一下。
4）列表
– “位置”下拉列表框：在其中可以选
择列表文本是否换行和缩进。其中 “内”选项表示当列表过长而自动换 行时不缩进；“外”选项表示当列表 过长而自动换行时以缩进方式显示。
设置“列表”样式对话框
3．应用CSS样式

自定义样式通常是针对网页中个别元素 进行设置时而用到的。其名称前必须以 “.”开始，在网页中自定义样式元素有 两种方法：
– “单词间距”下拉列表框：在其中可选择单
词的间距方式。选择“值”选项，可在该下 拉列表框中输入数值来确定单词的间距，此 时其右侧的下拉列表框将被激活，可在其中 设置数值的单位。 – “字母间距”下拉列表框：在其中可设置字 母间的间距。选择“值”选项，其右侧的下
3）区块
– “垂直对齐”下拉列表框：在其中可指定元素 – –
2）背景
– “附件”下拉列表框：在其中可选择
背景图像是固定在原始位置还是可以 滚动。 – “水平位置”下拉列表框：在其中可 以选择背景图像相对于应用样式元素 的水平位置。 – “垂直位置”下拉列表框：在其中可 以选择背景图像相对于应用样式元素 的垂直位置。
3）区块

在“CSS样式定义”对话框的“分类” 列表中选择“区块”选项，在其中可进 行“区块”样式的设置，其中各参数含 义如下。

5．3设置表格属性
setting the attribute of the table

选中表格后其“属性”面板，在其中可 进行表格的属性设置，各项参数的含义 如下。

制作如图所示的表格效果。其中行数和 列数都为2，表格宽度为600，单元格边 距和单元格间距都为30。
5.4设置单元格属性
setting the attribute of the cell
典型案例——利用表格对页面进行布局

本案例主要练习利用表格对页面进行布 局。顶部单元格来添加Banner（网页宣 传内容）和LOGO（网站标志），左侧 单元格用于添加导航条，中央单元格和 右侧单元格用于添加网页内容，底部单 元格用于添加底部信息。
最终效果图
用 于 添 加 Banner 和
LOGO
设置“区块”样式对话框
4）列表

在“CSS样式定义”对话框的“分类”列表 中选择“列表”选项，在其中可进行“列表” 样式的设置，各参数含义如下。 – “类型”下拉列表框：在其中可选择
无序列表的项目符号类型及有序列表 的编号类型。 – “项目符号图像”下拉列表框：在其 中可指定图像作为无序列表的项目符 号，可直接在其中输入图像的路径， 也可单击 “浏览”按钮在 打开的对 话框中选择图像。
2．编辑CSS样式

CSS样式有8个类别，其编辑方法类似， 这里主要讲解“类型”、“背景”、 “区块”和“列表”等4个类别。
CSS样式定义对话框
1）类型

在CSS样式定义对话框中可对文本进行各种设 置，其中各参数含义如下。
– “字体”下拉列表框：可在其中选择需要的字 – – –
–
体。 “大小”下拉列表框：可在其中选择文本的字 号，也可直接输入字号的大小。 “粗细”下拉列表框：可在其中选择文本的粗 细程度，也可直接输入粗细值。 “样式”下拉列表框：可在其中选择文本的特 殊格式。 “变量”下拉列表框：可在其中选择文本的变 形方式。
除了可以设置整个表格的属性外，还可 以对表格的单元格、行或列的属性进行 设置。选中要设置属性的单元格、行或 列。 其中的设置与表格属性的设置大致相同， 需要说明的是在“水平”下拉列表框中 可选择单元格文本在水平方向上的对齐 方式，在“垂直”下拉列表框中可选择 单元格中的文本在垂直方向上的对齐方 式。
– –
相对于其父级元素在垂直方向上的对齐方式。 “文本对齐”下拉列表框：在其中可指定文本 在应用该样式元素中的对齐方式。 “文本缩进”文本框：在该文本框中可输入首 行的缩进距离，并在右侧的下拉列表中选择数 值单位。 “空格”下拉列表框：可设置处理空格的方式。 “显示”下拉列表框：在其中可选择区块中要 显示的格式。
– 选中网页中需要定义CSS的文本，在“CSS
样式”面板中需要应用的CSS选项上单击鼠 标右键，在弹出的快捷菜单中选择“套用” 命令。 – 选中网页中定义的文本，单击鼠标右键，在 弹出的快捷菜单中选择“CSS样式”命令， 然后在其子菜单下选择要应用的自定义样式。
4．链接外部CSS样式

CSS样式通常只显示在创建该样式页面的 “CSS样式”面板中，通过链接可将其他页面 中的样式应用到当前页面中，创建链接外部样 式表的具体操作步骤如下：

把新浪网版式简化一下，是一个典型的三分栏结构， 第一行分两列，左边单元格放置LOGO图片，右边 单元格放入导航菜单，由于栏目比较多，所以分成 四行排放。第二行为网页主体部分，分成三栏，左 边一栏为特色栏目导航，右边两栏分别放置不同的 网页内容。下面一行放置版权信息。

个人网页由于内容较少，也可以采用二分 栏的结构，如右图所示。
5.4.1 知识讲解
1．创建CSS样式 2．编辑CSS样式 3．应用CSS样式 4．链接外部CSS样式

1．创建CSS样式 creating CSS

选择【窗口】→【CSS样式】命令打开“CSS 样式”面板，在其中可新建CSS样式，具体操 作步骤如下：
– 1）单击面板右上角的
按钮，在弹出的菜单中选 择“新建”命令，打开“新建CSS样式”对话框。 – 2）在“选择器类型”栏中选择所需定义的样式类 型，各类型的含义如下。 – “类（可应用任何标签)”单选按钮：自定义样式， 创建一个可以应用于完整文本块和部分文本块的 CSS样式，可在“名称”下拉列表框中输入一个易 理解的名称。
让背景不跟随内容 滚动
步骤一：设置网页背景 步骤二：新建背景的CSS样式 步骤三：设置固定背景

上机操作
目的：熟练掌握利用表格进行网页制作 的技巧，进一步熟悉面板组的使用。 新建一网页，建立一个5行2列的表格， 效果图如下。 使用CSS建立a:active 和a:hover设置 a:active 16px 隶书 #FFFF none a:hover 16px 仿宋_GB2312 #FF00FF
用于添加导航条
用于添加网页内容
用于添加网页内容
用于添加底部信息
上机练习
5.4 使用CSS样式 Using CSS

CSS是Cascading Style Sheet的缩写 “层叠样式表”的简称，通过CSS可以 精确定制网页中的文本格式，不仅可以 控制一个页面的文本格式，而且采用外 部链接的方式，可以控制多个页面的文 本格式。CSS样式表的创建，可以统一 定制网页字体、文字大小和链接状态等 效果。在Dreamweaver 中CSS样式的设 置方式有了很大的改进，更方便、实用 和快捷。
1）类型
– “行高”下拉列表框：可在其中选择文本的
行高，也可直接输入行高值。 – “大小写”下拉列表框：可在其中选择文本 的大小写方式。 – “修饰”栏：在该栏中可设置文本的修饰效 果。 – “颜色”栏：单击 按钮，可在打开的颜 色列表中选择需要的颜色，也可在文本框中 直接输入颜色的RGB值。
设置“背景”样式对话框
2.选择行或列 鼠标指向行的左边缘或列的上边缘时， 鼠标指针变为黑色选择箭头时，单击 3.选择单个单元格 法一：单击单元格，在文档窗口左下角 的标签选择器中选择td 法二：单击单元格，“编辑”的“全选”

5.2 表格的选定
Selecting the table
4.选择多个单元格 法一：从一个单元格拖动到另一个单元 格（shift） 法二：按ctrl单击要选择的单元格、行或 列
2）背景

在“CSS样式定义”对话框的“分类” 列表中选择“背景”选项，在其中可进 行“背景”样式的设置，其中各参数含 义如下。
2）背景
– “背景颜色”下拉列表框：单击 按钮可在
打开的颜色列表中选择需要的背景颜色，也 可在文本框中直接输入颜色的RGB值。 – “背景图像”下拉列表框：单击“浏览” 按钮，在打开的对话框中可选择背景图像， 也可在该文本框中直接输入背景图像的路径。 – “重复”下拉列表框：在其中可选择背景图 像的重复放置方式。

5.5表格的编辑与排版
the editing and typeset of table
调整行的高度和列的宽度 插入和删除行和列 拆分和合并单元格 表格的嵌套