第八讲 CSS 、模板和库项目. CSS 样式表是 Dreamweaver 中的重点和难点，通 过本章的学习，大家要理解 CSS 样式表的作用。 掌握如何建立 CSS 样式表，如何运用 CSS 样式表， 如何设置 CSS 样式表的各项属性。 在 Dreamweaver MX 中利用模板和库项目能够创.

Presentation on theme: "第八讲 CSS 、模板和库项目. CSS 样式表是 Dreamweaver 中的重点和难点，通 过本章的学习，大家要理解 CSS 样式表的作用。 掌握如何建立 CSS 样式表，如何运用 CSS 样式表， 如何设置 CSS 样式表的各项属性。 在 Dreamweaver MX 中利用模板和库项目能够创."— Presentation transcript:

1 第八讲 CSS 、模板和库项目

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

3 学习目标 利用 CSS 技术创建和应用 CSS 样式，对网页 进行格式设置和特殊处理。 掌握模板和库项目的创建方法； 掌握应用模板设计网页的方法； 掌握将库项目添加到网页中的方法； 掌握用模板和库更新页面的方法。

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

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

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

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

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

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

10

11

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

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

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

15

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

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

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

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

20

21

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

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

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

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

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

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

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

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

30 8.4 CSS 样式表概述 为什么用 CSS 样式 如今网页排版格式越来越来复杂，如 果要对多个网页的同样格式一一进行 设计，那么就会给制作人员带来很多 的工作量，所以解决办法是采用 CSS 样 式来一次性对若干个文档的格式进行 控制。

31 8.4 CSS 样式表概述 什么是 CSS 样式 CSS （ Cascading Style Sheet ，层叠样式 表 ）技术是一种格式化网页的标准方 式，它扩展了 HTML 的功能，使网页设 计者能够以更有效的方式设置网页格 式。

32 8.4 CSS 样式表概述 什么是 CSS 样式 CSS 样式存于样式表文件中，然后在多个 网页中同时应用该样式表中的样式 ， 就能确保多个网页具有一致的格式， 并且能够随时更新（只要更改样式表 文件就可以使所有网页自动更新）， 从而大大降低了网站的开发和维护工 作量。

33 8.4 CSS 样式表概述 认识 CSS 面板 显示所有样式 显示当前样式 内部样式表 样式名称 样式及属性值

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

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

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

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

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

39 如果是新建 CSS 文件, 有两种方法 : 方法一 : 可以通过菜单 ” 文件 / 新建 /CSS 样式 ” 方法二 : 通过进入 CSS 面板, 点击右下角的 ” 新建 CSS 样式 ” 接下来, 我们来看第二种方法 创建新的 CSS 样式

40 创建自定义样式 ( 也就是选择器类型中选择 ” 类 ”) ：名称须以. 开头， 并且可以包含任何字母和数字 组合。例如.myhead1 。如果您没有输入开头的句 点， Dreamweaver 将自动为您输入。 在 ” 定义在 :” 的选项中, 有两个选择, 第一个表示新建 CSS 文件, 这时, 你在刚才 的 ” 名称 :” 后面的文本框中输入的就是 CSS 文件名 ; 如果你选择 ” 仅对该文档 ”, 则是以形如 ”.myhead1” 方式出现在代码中.

41 重定义 HTML 标签：重定义特定 HTML 标签的默认格式。对文档中的任何标签 都可以应用 CSS 样式.

42 acronym 从字义上理解，是取首字母的缩 写词， abbr 是缩写，在应用过程中，两 个标签看起来差不多，但还是有区别的 。 Cascading Style Sheets photoshop 上面这两行代码是放在页面中 的. 然后再设置 abbr 或 acronym 标签 注意 :IE6 中可能不支持,IE7 支 持

43 更多的 HTML 标签的信息请浏览附录 :html 标 记大全

44 选择高级：重新定义一些标签的特定组 合格式。共有四种 :a:link, a:visited, a:hover,a:active a:link 当文字作为链接时, a:visited 当其链 接的网页已被浏览时, a:hover 表示光标移 向链接文字时,a:active 当超链接文字被选 中时 在网页中练习这四种的效果

45 外部：将以文件的形式存在。 仅对该文档：内嵌式样式。

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

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

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

49 课堂作业 对上海凯泉生物科技有限公司主页的 CSS 样 式导出为独立文件。

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