css-模板和库项目.ppt

8.4 CSS 样式表概述 什么是 CSS 样式 ? CSS （ Cascading Style Sheet ，层叠样式 表 ）技术是一种格式化网页的标准方 式，它扩展了 HTML 的功能，使网页设 计者能够以更有效的方式设置网页格 式。 8.4 CSS 样式表概述 什么是 CSS 样式 CSS 样式存于样式表文件中，然后在多个 网页中同时应用该样式表中的样式 ， 就能确保多个网页具有一致的格式， 并且能够随时更新（只要更改样式表 文件就可以使所有网页自动更新）， 从而大大降低了网站的开发和维护工 作量。 8.4 CSS 样式表概述 认识 CSS 面板 显示所有样式 显示当前样式 内部样式表 样式名称 样式及属性值 8.5 CSS 的分类 ? 外部链接样式表 (External linking css): 实际上是一个 仅包含样式规则的外部文本文件，其后缀名为 “ CSS ”，当编辑此文件时，所有与此样式表链接 的文档将全被更新。 ? 内嵌式样式表 (Embedded CSS) ：嵌在 HTML 代码的 style 标记之间。 ? 内联式样式表 (Inlink CSS): 直接在某一 HTML 标记后 添加样式代码。 ? 优先程度：内联式 内嵌式 外部链接 （ 1 ）显示“ CSS 样式”面板的方式： 打开“窗口”菜单 —— “ CSS ”样式 （ 2 ）样式视图 CSS 样式面板 CSS 样式在网页中的三种存在方式 ? 外部文件方式： CSS 以文件的形式存 在，在 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: “宋体” ;font- size:13pt;color:red} -- 内嵌样式 第八讲 CSS 、模板和库项目 ? CSS 样式表是 Dreamweaver 中的重点和难点，通 过本章的学习，大家要理解 CSS 样式表的作用。 掌握如何建立 CSS 样式表，如何运用 CSS 样式表， 如何设置 CSS 样式表的各项属性。 ? 在 Dreamweaver MX 中利用模板和库项目能够创 建具有统一风格的网页，同时也能更方便地进行 网站的维护。本章介绍模板与库项目的基础知识 和应用：如何创建模板以及在网页设计中应用模 板，如何创建和设置库项目以及向网页添加库项 目等。 本章内容 学习目标 ? 利用 CSS 技术创建和应用 CSS 样式，对网页 进行格式设置和特殊处理。 ? 掌握模板和库项目的创建方法； ? 掌握应用模板设计网页的方法； ? 掌握将库项目添加到网页中的方法； ? 掌握用模板和库更新页面的方法。 ? 模板：实际上是一种特殊网页，可以通过模板页面产 生许多形式相似的网页。 ? 库项目：指网站上经常重复使用或更新的页面元素 （如图象、文本和其他对象），将它们存储在库中进 行管理和维护。 ? 在 Dreamweaver MX 中利用模板和库项目能够创建具 有统一风格的网页，同时也能更方便的进行网站的维 护。 8 ． 1 创建模板 1. 将现有文档存为模板 2. 定义模板的可编辑区 3. 修改模板 1. 将现有文档存为模板 ? 实例 1 创建模板 ① 建立站点 ② 新建网页 ③ 网页另存为模板： 选择菜单 → 文件 → 另存为 模板 ? 单击保存按钮。在站点根 目录下会自动增加一个文 件夹 Templates ，新保存 的模板就在该文件夹中。 模板文件扩展名为 .dwt 。 ? 打开资源面板并单击“模 板”按钮，可以看到新建 模板。 8.1.2 定义模板的可编辑区 ? 在模板中，有两种类型的区域： 可编辑区 域和锁定区域 。在应用了模板的网页中， 模板部分是锁定的，其中的内容都为不可 编辑，所以必须在模板中定义可以编辑的 区域以使用该模板来创建新的文档。 ? 可以像普通网页一样在文档窗口中打开模 板文件进行