CSS-模板和库项目

8.4CSS样式表概述
什么是CSS样式
CSS样式存于样式表文件中，然后在多个 网页中同时应用该样式表中的样式 ， 就能确保多个网页具有一致的格式， 并且能够随时更新（只要更改样式表 文件就可以使所有网页自动更新）， 从而大大降低了网站的开发和维护工 作量。
8.4CSS样式表概述
认识CSS面板
显示所有样式
① 打开表单网页文档；
② 展开资源面板的模板窗口，选中模板 index.dwt，单击面板下面的“应用”按 钮。显示如下对话框：
其中提示当前页在模板中不存在相应的区 域：Document body和Document head。这 是由于在当前文档的头部（head）中不存 在JavaScript函数，而在主体（body）中不 存在内容的原因。
? 在网页中练习这四种的效果
? 外部：将以文件的形式存在。 ? 仅对该文档：内嵌式样式。
CSS的属性
? 字体：font-family ? 大小：font-size ? 粗细：font-weight ? 样式：font-style ? 行高：line-height ? 修饰：text-decoration ? 颜色：color
? 实例 5 创建一个库项目，在项目中包含一 个表格。
① 在Dreamweaver MX中，新建网页文件。
② 向网页中插入一个2行3列的表，设定表格 边框为5，间距为2，边框颜色为蓝色。
③ 选定页面上的表格，选择菜单命令“修改 →库→增加对象到库”，在当前站点根目 录下自动增加一个Library文件夹和文件 “未命名.lbi”。在库类窗口中同时给出该 库项目的样式图。
在”定义在:”的选项中,有两个选择,第一个表示新建CSS文件,这时,你在刚 才的”名称:”后面的文本框中输入的就是CSS文件名;如果你选择”仅对该 文档”,则是以形如”.myhead1”方式出现在代码中.
? 重定义HTML标签：重定义特定 HTML
标签的默认格式。对文档中的任何标签 都可以应用 CSS 样式 .
直接插入式
? 只需要在每个HTML标签后书写CSS属 性。作用范围只限于本标签。
? <table style=“color:red;fontsize:10pt”>
在统一站点风格上，用第一方式， 在某个网页风格统一上，用第二种 方式，而在网页内部某个标签的具 体调整上，用第三种方式。
创建新的 CSS 样式
定义层叠样式表
? 类型：定义 CSS 样式的基本类型设置。 ? 背景：对 CSS 样式的背景设置进行定义，可以对网页
中的任何元素应用背景属性。例如，创建一个样式， 将背景颜色或背景图像添加到任何页面元素中，比如 在文本、表格、页面等的后面。还可以设置背景图像 的位置。
? 区块：精确定义整段文本中文字的字距、对齐方式等 属性。
8.3.3 利用库项目更新网站
? 在对库项目进行修改后，一般 在保存该库项目时，就会打开 如下对话框，询问是否更新添 加了该库项目的文件，如果选 择“更新”按钮，就会打开对 话框如图所示。
? 使用模板和库，极大地提高了 网站开发的速度和效率，也极 大改善了网站的维护工作。
8.4CSS样式表概述
为什么用CSS样式
? 更多的HTML标签的信息请浏览附录:html标 记大全
? 选择高级：重新定义一些标签的特定组 合格式。共有四种:a:link, a:visited, a:hover,a:active
? a:link当文字作为链接时, a:visited当其链 接的网页已被浏览时, a:hover表示光标移 向链接文字时,a:active当超链接文字被选 中时
④ 在模板页中，可编辑区域用下面的标记来表 示：
<!-- TemplateBeginEditable name=EditRegionMain -->
<!-- TemplateEndEditable -->
⑤ 在模板中，还有两个默认的可编辑区域：页 面标题和页面头部中的区域。因此，应用了 该模板的文档，可以更改文档的标题，可以 在页面插入客户端脚本及定义CSS样式表，而 其他区域均是不可编辑的。
? 选中对话框中间窗口“名称”列下的可编 辑区域“Document body”，在窗口下的 “将内容移到新区域”下拉列表中选择 “EditRegionMain”，其出现在窗口“已解 析”列下对应行，即让当前页面的body部
分内容位于应用模板的可编辑区域 EditRegionMain中；再选中”Document head”将其移到head区域中，如图所示：
④ 将新项目重命名为table，Library目录中 的文件的名称也自动改变为table.lbi
8.3.2 向网页添加库项目
? 实例 6 将库项目添加到index.dwt中。 ? 打开文档； ? 确定插入位置； ? 打开资源面板并切换到库类别，选中库项
目table，单击面板底部的“插入”按钮， 或者直接将库项目拖动到目标位置释放， 该项目就插入到网页中。
8.2 使用模板
1. 使用模板创建新文档 2. 对现有文档应用模板 3. 使用模板更新文档
8.2.1 使用模板创建新文档
? 实例３ 利用模板index.dwt创建新文档。 ① 选择菜单命令“文件→新建”，打开新建
文档对话框，选择“模板”选项卡，选择 站点模板，在右边的预览视图中给出模板 示意图。如图所示：
? 盒子：可以定义特定元素的大小及其与周围元素的间 距等属性。
? 边框面板：可以对控制元素周围边界的样式属性进行 定义。
? 列表面板：定义列表的样式属性。
? 定位面板：定义层的样式属性。
? 扩展样式面板：主要是用来控制那些不被大多数浏览 器所支持的功能。
? 注意：那些在 样式定义对话框中以星号（ *）标注的样式属性是不会在 文档窗口中 显示的，只有浏览器预览的时候才能看到。
? 内联式样式表 (Inlink CSS): 直接在某一 HTML标记后 添加样式代码。
? 优先程度：内联式 >内嵌式>外部链接
CSS样式面板
（1）显示“CSS 样式”面板的方式： 打开“窗口”菜单——“CSS”样式
（2）样式视图
CSS样式在网页中的三种存在方式
? 外部文件方式：CSS以文件的形式存 在，在HTML文档头通过文件引用进 行控制。
如果是新建CSS文件,有两种方法: 方法一:可以通过菜单”文件/新建/CSS样式” 方法二 :通过进入 CSS 面板,点击右下角的”新建
CSS样式”
接下来,我们来看第二种方法
? 创建自定义样式 (也就是选择器类型中选择”类 ”)：名称须以 .开头，并且可以包含任何字母和数
字组合。例如 .myhead1 。如果您没有输入开头的 句点，Dreamweaver 将自动为您输入。
? acronym从字义上理解，是取首字母的缩 写词，abbr是缩写，在应用过程中，两 个标签看起来差不多，但还是有区别的 。
<acronym title=css>Cascading Style Sheets</acronym>
<abbr title=ps>photoshop</abbr> 上面这两行代码是放在页面中 的.然后再设置 abbr或 acronym标签 注意:IE6中可能不支持,IE7支
? 在Dreamweaver MX 中利用模板和库项目能够创建具 有统一风格的网页，同时也能更方便的进行网站的维 护。
8．1 创建模板
1. 将现有文档存为模板 2. 定义模板的可编辑区 3. 修改模板
1. 将现有文档存为模板
? 实例1 创建模板 ① 建立站点 ② 新建网页
③ 网页另存为模板：
选择菜单→文件→另存为 模板
? 单击保存按钮。在站点根 目录下会自动增加一个文 件夹Templates ，新保存 的模板就在该文件夹中。 模板文件扩展名为 .dwt。
? 打开资源面板并单击“模 板”按钮，可以看到新建 模板。
8.1.2 定义模板的可编辑区
? 在模板中，有两种类型的区域：可编辑区 域和锁定区域。在应用了模板的网页中， 模板部分是锁定的，其中的内容都为不可 编辑，所以必须在模板中定义可以编辑的 区域以使用该模板来创建新的文档。
来自百度文库第八讲 CSS、模板和库项目
本章内容
? CSS样式表是Dreamweaver 中的重点和难点，通 过本章的学习，大家要理解 CSS样式表的作用。 掌握如何建立 CSS样式表，如何运用 CSS样式表， 如何设置 CSS样式表的各项属性。
? 在Dreamweaver MX 中利用模板和库项目能够创 建具有统一风格的网页，同时也能更方便地进行 网站的维护。本章介绍模板与库项目的基础知识 和应用：如何创建模板以及在网页设计中应用模 板，如何创建和设置库项目以及向网页添加库项 目等。
② 选中“当模板改变时更新页面”选项，单 击“创建”按钮，进入新文档设计视图。
③ 在新文档中，光标只能移动到可编辑区。
④ 在可编辑区EditRegionMain中插入相应的表 格、图象和文字。
⑤ 可以更改文档标题。
8.2.2 对已有文档应用模板
? 实例 4 对下列表单 应用模板index.dwt。
显示当前样式
内部样式表 样式名称
样式及属性值
8.5 CSS的分类
? 外部链接样式表 (External linking css): 实际上是一个 仅包含样式规则的外部文本文件，其后缀名为 “CSS”，当编辑此文件时，所有与此样式表链接 的文档将全被更新。
? 内嵌式样式表 (Embedded CSS) ：嵌在HTML代码的 <style>标记之间。
8.3 库项目及其应用
? 创建库项目 ? 向网页添加库项目 ? 利用库项目更新网站
8.3.1 创建库项目
? 在一个库项目中，可以包含文本、表格、 表单、图象和多媒体等内容。创建库项目 时，先选中文档中的需要作为库项目的对 象，选择菜单命令“修改→库→增加对象到 库”来创建项目，也可以在资源面板库类 窗口中单击“新建库项目”按钮来创建。
? 可以像普通网页一样在文档窗口中打开模 板文件进行修改和编辑。
? 实例2 为模板index.dwt定义可编辑区域。
① 打开index.dwt模板；
② 清理模板文档：只保留所有页面中都需要 的公共元素；
③ 定义可编辑区域：选择菜单命令“插入→ 模板对象→可编辑区域”；或插入面板→ 选择模板标签→可编辑区域。
④ 单击“确定”，得到如下所示页面设计视 图。
8.2.3 使用模板更新文档
? 当需要对模板的某些方面进行 修改，此时可在Dreamweaver MX中打开模板文件，按照需要 进行相应的修改工作。在保存 模板时会弹出如下对话框，询 问是否需要更新使用该模板来 创建的文件；选择“更新”， 则自动对所有相关文件进行更 新工作。
学习目标
? 利用CSS技术创建和应用CSS样式，对网页 进行格式设置和特殊处理。
? 掌握模板和库项目的创建方法； ? 掌握应用模板设计网页的方法； ? 掌握将库项目添加到网页中的方法； ? 掌握用模板和库更新页面的方法。
? 模板：实际上是一种特殊网页，可以通过模板页面产 生许多形式相似的网页。
? 库项目：指网站上经常重复使用或更新的页面元素 （如图象、文本和其他对象），将它们存储在库中进 行管理和维护。
? 如今网页排版格式越来越来复杂，如 果要对多个网页的同样格式一一进行 设计，那么就会给制作人员带来很多 的工作量，所以解决办法是采用CSS样 式来一次性对若干个文档的格式进行 控制。
8.4CSS样式表概述
什么是CSS样式
? CSS（Cascading Style Sheet ，层叠样式 表 ）技术是一种格式化网页的标准方 式，它扩展了HTML的功能，使网页设 计者能够以更有效的方式设置网页格 式。
CSS文件的引用是在<head></head>标 签之间写下列语句:
<link rel=“stylesheet” href=“文件名 .CSS” type=“text/css”>
内嵌样式
不以文件的形式存在,仅作用于本文档,直接 定义在 <head></head> 之间. <Style type=“text/css”> <!— P{font-family:“宋体” font-size:9pt;color:blue} H2{font-family: “宋体” ;fontsize:13pt;color:red} -->