第5章+CSS样式与模板的使用.ppt

1、网页设计与制作,第一章 HTML语言基础 2 第二章 初识Dreamweaver 4 第三章 创建与应用表格 3 第四章 使用层和框架布局页面 3 第五章 CSS样式与模板的使用 3 第六章 行为、库和资源管理 3 第七章 建立动态网站 3 第八章 Flash动画基础知识 3 第九章 创建动画 3 第十章 使用Fireworks编辑网页图像 3,1,第五章 CSS样式与模板的使用,一、层叠样式表概述 1、什么是CSS 层叠样式表(CSS)是一系列格式设置规则，它们控制网页内容的外观。使用层叠样式表可以为部分文件、整份文件乃至整个网站定义样式。 CSS样式规则由两部分组成：选择器和声明。 选择器

2、是样式名称(如tr或p)，而声明则用于定义样式元素。声明由属性(如color)和值(如red)两部分组成。 如：pfont-size：16px；color：red CSS样式表的主要优点是提供便利的更新功能。,第五章 CSS样式与模板的使用,2、 CSS的作用 CSS样式主要是实现网页中各种元素的准确定位，它可以帮助用户对网页的布局、字体、颜色、背景和其他图文效果实现更加精确的控制。 CSS样式只需修改一个文件就可以改变一批网页的外观和格式，并保证在所有浏览器和平台之间的兼容性，使用户设计的网站拥有更少的编码、更少的页数和更快的下载速度。 使用CSS样式可以控制许多使用HTML无法控制的属性。

3、如： 指定自定义列表项目符号； 指定不同的字体大小和单位(像素、点数等)； 设置HTML卷标、段落等的样式。,第五章 CSS样式与模板的使用,3、 CSS的基本语法 在代码视图模式中辨别CSS语法，最简单的方法就是寻找span标识符，凡是包含在标识符之间的部分，就是CSS语法。 CSS可将原有的HTML卷标定义成自己想要的效果，其基本语法是在卷标之后加上符号，在此符号内填入CSS所设置的HTML属性。 如：h2font-size：16px；color：red,第五章 CSS样式与模板的使用,二、 CSS样式的创建与应用 Dreamweaver MX 2004拥有自动创建样式的功能，如用户选定某

4、段文字后，为其设置字体、字号和颜色等属性后，系统自动创建以StyleX (X为数字序列)为名的样式，且自动显示在属性面板的“样式”下拉列表框中。 用户除了可以应用Dreamweaver创建的样式外，还可以定义自己需要的样式。 1、认识“CSS样式”面板 窗口/CSS样式 2、认识“相关CSS”面板 窗口/标签检查器/相关CSS(点击CSS属性标签),第五章 CSS样式与模板的使用,3、创建CSS样式 文本/CSS样式/新建 对话框中选项的说明（P120） 示例：创建一个名为“test1”的样式，要求此样式的字体为“宋体”，颜色为#FF0000，字号为24像素，背景颜色为#00FFFF。 4、应

5、用类样式 类样式是惟一可以应用于文档中任何文本(与控制文本的标签无关)的CSS样式类型。与当前文档关联的所有类样式都显示在“CSS样式”面板中(样式名称前有一个句点)和文本属性面板的“样式”下拉列表框中。,第五章 CSS样式与模板的使用,1）应用自定义的CSS样式 属性面板的“样式”下拉列表框 2）删除自定义的CSS样式 “样式”下拉列表框中选择“无” 三、 CSS样式的导出与编辑 1、导出样式以创建CSS样式表 用户可以从文档中导出样式以创建新的CSS样式表。然后，再链接到其他文档以应用这些样式。 文本/CSS样式/导出 2、管理CSS样式 文本/CSS样式/管理样式,第五章 CSS样式与模

6、板的使用,3、链接和导入外部样式表 可以导入或链接到外部样式表以应用那里包含的样式。 文本/CSS样式/管理样式/附加 示例：创建新文档，并为其链接一个外部样式表。 4、编辑CSS样式 CSS样式面板 对CSS样式表进行编辑时，会立刻重新设置该CSS样式表控制的所有文本的格式。 编辑外部样式表会影响与它链接的所有文档。,第五章 CSS样式与模板的使用,四、 CSS样式的优先顺序 (1) 如果将两种样式应用于同一文本，浏览器显示这两种样式的所有属性。 (2) 如果应用于同一文本的两种样式的属性发生冲突（如，一种样式可能将蓝色指定为文本颜色，而另一种样式可能指定红色作为文本颜色。），则浏览器显示最

7、里面的样式(离文本本身最近的样式)的属性。 (3) 如果有直接冲突，则CSS样式(使用class属性应用的样式)中的属性将取代HTML标签样式中的属性。,第五章 CSS样式与模板的使用,示例：编辑下述CSS样式代码，以了解CSS样式的优先顺序。 CSS样式代码： 举例该段落受自定义样式.Blue和HTML标签样式h1的控制。 但这个句子受.Red样式控制。 现在，我们返回到.Blue样式。 说明：为h1定义的样式可以指定所有h1段落的字体、大小和颜色，但应用于该段落的自定义CSS样式.Blue将取代h1样式中的颜色设置。另一个自定义CSS样式.Red将取代.Blue，因为它位于.Blue样式的

8、内部。,第五章 CSS样式与模板的使用,五、利用模板（template） 扩展名dwt，位于站点根文件夹下的templates文件夹 1. 创建自己的模板 1）模板面板 窗口 / 资源 / 模板 / 新建模板 2）菜单实现 文件 / 另存为模板 2. 给网页应用模板 1）通过菜单应用模板 文件 / 新建 / 模板,第五章 CSS样式与模板的使用,2）通过模板面板 应用按钮 网页应用此模板后，就不能改变此网页上的任何部件。 3. 修改模板 1）定义模板的可编辑区域 打开要处理的模板 选中一块作为可编辑区域的网页元素 插入 / 模板对象 / 可编辑区域,第五章 CSS样式与模板的使用,2）删除可编辑区域的一般步骤 打开要处理的模板 修改 / 模板 / 删除模板标记 3）定义模板的可选区域 用于设置选定内容是否显示 打开要处理的模板 选中一块作为可选区域的网页元素 插入 / 模板对象 / 可选区域 在网页文件中（ 修改 / 模板属性 ）,第五章 CSS样式与模板的使用,4）定义模板的可编辑标签属性