第八讲 CSS 、摸板和库项目

内容简介： CSS 样式表是 Dreamweaver 中的 重点和难点，通过本章的学习，大家要理 解 CSS 样式表的作用。掌握如何建立 CSS 样 式表，如何运用 CSS 样式表，如何设置 CSS 样式表的各项属性。 在 Dreamweaver MX 中利用摸板和库项目 能够创建具有统一风格的网页，同时也能 更方便地进行网站的维护。本章介绍模板 与库项目的基础知识和应用：如何创建模 板以及在网页设计中应用模板，如何创建 和设置库项目以及向网页添加库项目等。

学习目标 1. 掌握模板和库项目的创建方法； 2. 掌握应用模板设计网页的方法； 3. 掌握将库项目添加到网页中的方法； 4. 掌握用模板和库更新页面的方法。

模板：实际上是一种特殊网页，可以通过模板页面产 生许多形式相似的网页。 库项目：指网站上经常重复使用或更新的页面元素 （如图象、文本和其他对象），将它们存储在库中进 行管理和维护。 在 Dreamweaver MX 中利用模板和库项目能够创建具有 统一风格的网页，同时也能更方便的进行网站的维护。

8 ． 1 创建模板 1. 将现有文档存为模板 2. 定义模板的可编辑区 3. 修改模板

1. 将现有文档存为模板 实例 1 创建模板 ① 建立站点 ② 新建网页

③ 网页另存为模板： 选择菜单 → 文件 → 另存为模板 单击保存按钮。在站点根目录 下会自动增加一个文件夹 Templates ，新保存的模板就在 该文件夹中。模板文件扩展名 为.dwt 。 打开资源面板并单击 “ 模板 ” 按 钮，可以看到新建模板。

8.1.2 定义模板的可编辑区 在模板中，有两种类型的区域：可编辑区 域和锁定区域。在应用了模板的网页中， 模板部分是锁定的，其中的内容都为不可 编辑，所以必须在模板中定义可以编辑的 区域以使用该模板来创建新的文档。 可以像普通网页一样在文档窗口中打开模 板文件进行修改和编辑。

实例 2 为模板 index.dwt 定义可编辑区域。 ① 打开 index.dwt 模板； ② 清理模板文档：只保留所有页面中都需要 的公共元素； ③ 定义可编辑区域：选择菜单命令 “ 插入 → 模 板对象 → 可编辑区域 ” ；或插入面板 → 选择 模板标签 → 可编辑区域。

④ 在模板页中，可编辑区域用下面的标记来表 示： ⑤ 在模板中，还有两个默认的可编辑区域：页 面标题和页面头部中的区域。因此，应用了 该模板的文档，可以更改文档的标题，可以 在页面插入客户端脚本及定义 CSS 样式表，而 其他区域均是不可编辑的。

8.2 使用模板 1. 使用模板创建新文档 2. 对现有文档应用模板 3. 使用模板更新文档

8.2.1 使用模板创建新文档 实例３ 利用模板 index.dwt 创建新文档。 ① 选择菜单命令 “ 文件 → 新建 ” ，打开新建文档 对话框，选择 “ 模板 ” 选项卡，选择站点模板， 在右边的预览视图中给出模板示意图。如 图所示：

② 选中 “ 当模板改变时更新页面 ” 选项，单击 “ 创建 ” 按钮，进入新文档设计视图。 ③ 在新文档中，光标只能移动到可编辑区。 ④ 在可编辑区 EditRegionMain 中插入相应的表 格、图象和文字。 ⑤ 可以更改文档标题。

8.2.2 对已有文档应用模板 实例 4 对下列表单 应用模板 index.dwt 。

① 打开表单网页文档； ② 展开资源面板的模板窗口，选中模板 index.dwt ，单击面板下面的 “ 应用 ” 按钮。 显示如下对话框：

其中提示当前页在模板中不存在相应的区 域： Document body 和 Document head 。这 是由于在当前文档的头部（ head ）中不存 在 JavaScript 函数，而在主体（ body ）中不 存在内容的原因。 选中对话框中间窗口 “ 名称 ” 列下的可编辑区 域 “Document body” ，在窗口下的 “ 将内容移 到新区域 ” 下拉列表中选择 “EditRegionMain” ， 其出现在窗口 “ 已解析 ” 列下对应行，即让当 前页面的 body 部分内容位于应用模板的可 编辑区域 EditRegionMain 中；再选 中 ”Document head” 将其移到 head 区域中， 如图所示：

④ 单击 “ 确定 ” ，得到如下所示页面设计视图。

8.2.3 使用模板更新文档 当需要对模板的某些方面进行 修改，此时可在 Dreamweaver MX 中打开模板文件，按照需要 进行相应的修改工作。在保存 模板时会弹出如下对话框，询 问是否需要更新使用该模板来 创建的文件；选择 “ 更新 ” ，则自 动对所有相关文件进行更新工 作。

8.3 库项目及其应用 创建库项目 向网页添加库项目 利用库项目更新网站

8.3.1 创建库项目 在一个库项目中，可以包含文本、表格、 表单、图象和多媒体等内容。创建库项目 时，先选中文档中的需要作为库项目的对 象，选择菜单命令 “ 修改 → 库 → 增加对象到 库 ” 来创建项目，也可以在资源面板库类窗 口中单击 “ 新建库项目 ” 按钮来创建。

实例 5 创建一个库项目，在项目中包含一 个表格。 ① 在 Dreamweaver MX 中，新建网页文件。 ② 向网页中插入一个 2 行 3 列的表，设定表格 边框为 5 ，间距为 2 ，边框颜色为蓝色。 ③ 选定页面上的表格，选择菜单命令 “ 修改 → 库 → 增加对象到库 ” ，在当前站点根目录下 自动增加一个 Library 文件夹和文件 “ 未命 名.lbi” 。在库类窗口中同时给出该库项目的 样式图。

④ 将新项目重命名为 table ， Library 目录中 的文件的名称也自动改变为 table.lbi

8.3.2 向网页添加库项目 实例 6 将库项目添加到 index.dwt 中。 打开文档； 确定插入位置； 打开资源面板并切换到库类别，选中库项 目 table ，单击面板底部的 “ 插入 ” 按钮，或者 直接将库项目拖动到目标位置释放，该项 目就插入到网页中。

8.3.3 利用库项目更新网站 在对库项目进行修改后，一般 在保存该库项目时，就会打开 如下对话框，询问是否更新添 加了该库项目的文件，如果选 择 “ 更新 ” 按钮，就会打开对话框 如图所示。 使用模板和库，极大地提高了 网站开发的速度和效率，也极 大改善了网站的维护工作。

8.4 CSS 样式表概述 什么是 CSS 样式 CSS 是 HTML 中用途最为广泛、功能最为强大的元 素，为站点设计节省了时间，同时可以让站点整体 风格保持一致。 层叠样式表 (CSS) 是一系列格式规则，它们控制 网页内容的外观。使用 CSS 样式可以非常灵活并 更好地控制确切的网页外观，从精确的布局定位到 特定的字体和样式。

8.4 CSS 样式表概述 什么是 CSS 样式 CSS （ Cascading Style Sheets ）样式可以用来 一次对若干个文档所有的样式进行控制而且当 CSS 样式有所更新或被修改之后，所有应用了该样式表 的文档都会被自动更新。 CSS 可以为文字创造出丰富多彩的效果；使用它的 filter 滤镜功能，可以为图形添加特效。 CSS 的不足在于只被 IE 和 Netscape4.0 以上版本的 浏览器支持。

8.5 CSS 的分类 外部链接样式表 (External linking css): 实际上是一个 仅包含样式规则的外部文本文件，其后缀名为 “CSS” ，当编辑此文件时，所有与此样式表链接的 文档将全被更新。 内嵌式样式表 (Embedded CSS) ：嵌在 HTML 代码的 标记之间。 内联式样式表 (Inlink CSS): 直接在某一 HTML 标记后 添加样式代码。 优先程度：内联式 > 内嵌式 > 外部链接

CSS 的语法 样式表的一般形式： HTML 标签 { 标签属性：属性值。标签属性：属性值 标签属性：属性值。 ……} 其中： HTML 标签不带尖括号。 标签属性：属性值 两全参数是一一对应的，每个属性与属性值之间 用分号隔开。风属性名由两个或两个以上的单词构成 时，单词之间以 “-” 隔开。

<!— P{font-family ： ” 宋体 ” ； font-size ： 9pt ； color ： #000000} Td{font-family ： ” 楷体 ” ； font-size ： 20pt ； font-style ； italic ； font-weigh ： 800 ； text-decoration ： blink ； color ： #000000}

（ 1 ）显示 “ CSS 样式 ” 面板的方式： 打开 “ 窗口 ” 菜单 ——“ CSS ” 样式 （ 2 ）样式视图 CSS 样式面板

CSS 样式在网页中的三种存在 方式 外部文件方式： CSS 以文件的形式存 在，在 HTML 文档头通过文件引用进 行控制。 CSS 文件的引用是在 标 签之间写下列语句 :

不以文件的形式存在, 仅作用于本文档, 直接 定义在 之间. <!— P{font-family:“ 宋体 ” font-size:9pt;color:blue} H2{font-family: “ 宋体 ” ;font-size:13pt;color:red} --> 内嵌样式

直接插入式 只需要在每个 HTML 标签后书写 CSS 属 性。作用范围只限于本标签。 在统一站点风格上，用第一方式， 在某个网页风格统一上，用第二种 方式，而在网页内部某个标签的具 体调整上，用第三种方式。

创建新的 CSS 样式的步骤如下： （ 1 ）将添加点放在文档中，然后执行以下操 作之一打开 “ 新建 CSS 样式 ” 对话框  （ 2 ）定义 CSS 样式的类型 （ 3 ）选择定义样式的位置  （ 4 ）单击 “ 确定 ” 。出现 “ CSS 样式定义 ” 对话 框。 （ 5 ）选择要为新 CSS 样式设置的样式选项。 （ 6 ）设置完样式属性后，单击 “ 确定 ” 。 创建新的 CSS 样式

创建自定义样式：名称须以. 开头， 并且可以包 含任何字母和数字组合。例如.myhead1 。如果您 没有输入开头的句点， Dreamweaver 将自动为您 输入。 重定义 HTML 标签：重定义特定 HTML 标签的默认格式。对文档中的任何标签 都可以应用 CSS 样式. 使用 CSS 选择器：重新定义一些标签的特 定组合格式。 外部：将以文件的形式存在。 仅对该文档：内嵌式样式。

3. 应用自定义 (Class) CSS 样式 4 ．将自定义样式从选定内容中删除 5 ．创建和链接到外部 CSS 样式表 6 ．编辑 CSS 样式 7 ．设置 CSS 样式参数

CSS 的属性 字体： font-family 大小： font-size 粗细： font-weight 样式： font-style 行高： line-height 修饰： text-decoration 颜色： color

定义层叠样式表 类型：定义 CSS 样式的基本类型设置。 背景：对 CSS 样式的背景设置进行定义，可以对网页 中的任何元素应用背景属性。例如，创建一个样式， 将背景颜色或背景图像添加到任何页面元素中，比如 在文本、表格、页面等的后面。还可以设置背景图像 的位置。 区块：精确定义整段文本中文字的字距、对齐方式等 属性。 盒子：可以定义特定元素的大小及其与周围元素的间 距等属性。 边框面板：可以对控制元素周围边界的样式属性进行 定义。 列表面板：定义列表的样式属性。 定位面板：定义层的样式属性。 扩展样式面板：主要是用来控制那些不被大多数浏览 器所支持的功能。

注意：那些在 样式定义对话框中以星号（ * ）标注的样式属性是不会在 文档窗口中 显示的，只有浏览器预览的时候才能看到 。 应用样式表

使用 CSS 制作与鼠标动作相关的动态效果 – A:active : 当超链接文字被选中时。 – A:hover: 当鼠标移至超链接文字时 – A:link: 当文字作为链接时 – A:visited: 当其链接的网页已被浏览时

样式表滤镜对于图象的应用 Blur （模糊）滤镜 – Blur(Add=true,Direction=90,Strength=120) – add 指定是否产生印象派的模糊效果； direction 指定模 糊的方向； strength 指定模糊半径。 FlipH/FlipH （水平 / 垂直方向颠倒）滤镜 Invert( 颜色翻转）滤镜 Gray( 黑白）滤镜

Alpha( 半透明 ) 滤镜 – Alpha(Opacity=70,FinishOpacity=70,Style=1,StartX =0,StartY=0,FinishX=150,FinishY=60) – Opacity 代表透明值从 0 到 100 ， 0 代表完全透明 ， 100 代表不透明； finishOpacity 在设置渐变透 明效果时指定结束的透明值。 startX 和 startY 代 表透明效果开始的 x,y 坐标， finishX 和 finishY 代 表透明效果结束的 x,y 坐标。

滤镜特效有时为什么看不到 有几种滤镜的效果对文字作用时，必须在 定义 “box” 中的 Width 参数之后，才能显示出 来。这类滤镜包括： dropshadow,blur,glow,alpha,wave 等.