(刘桂江)网页制作之第5章CSS样式与模板的使用.pptVIP

第五章 CSS样式与模板的使用 一、层叠样式表概述 1、什么是CSS 层叠样式表(CSS)是一系列格式设置规则，它们控制网页内容的外观。 CSS样式规则由两部分组成：选择器和声明。 选择器是样式名称(如tr或p)，而声明则用于定义样式元素。声明由属性(如color)和值(如red)两部分组成。 如：p{ font-size：16px；color：red } 第五章 CSS样式与模板的使用 2、CSS的作用 CSS样式主要是实现网页中各种元素的准确定位。 CSS样式只需修改一个文件就可以改变一批网页的外观和格式，使用户设计的网站拥有更少的代码和更快的下载速度。 二、 CSS样式的创建与应用 1、“CSS样式”面板 窗口/CSS样式 2、创建CSS样式 格 式/CSS样式/新建 第五章 CSS样式与模板的使用 3、应用类样式 类样式是惟一可以应用于文档中任何文本(与控制文本的标签无关)的CSS样式类型。 1）应用自定义的CSS样式 属性面板的“样式”下拉列表框 2）删除自定义的CSS样式 “样式”下拉列表框中选择“无” 第五章 CSS样式与模板的使用 三、 CSS样式的导出与编辑 1、导出样式以创建CSS样式表 用户可以从文档中导出样式以创建新的CSS样式表文件。然后，再链接到其他文档以应用这些样式。 “CSS样式”面板?右击/移动CSS规则 2、链接和导入外部样式表 可以导入或链接到外部样式表以应用那里包含的样式。 格式/CSS样式/附加样式表 第五章 CSS样式与模板的使用 3、管理CSS样式 “CSS样式面板”中快捷菜单 改名、编辑、删除 对文档内的CSS样式进行编辑时，会立刻重新设置该CSS样式控制的所有文本的格式。 编辑外部样式表会影响与它链接的所有文档。 第五章 CSS样式与模板的使用 四、 CSS样式的优先顺序 (1) 如果将两种样式应用于同一文本，浏览器显示这两种样式的所有属性。 (2) 如果应用于同一文本的两种样式的属性发生冲突（如，一种样式可能将蓝色指定为文本颜色，而另一种样式可能指定红色作为文本颜色。），则浏览器显示最里面的样式(离文本本身最近的样式)的属性。 第五章 CSS样式与模板的使用 示例： h1举例:span class=Blue该段落受自定义样式.Blue和HTML标签样式h1的控制。 span class=Red但这个句子受.Red样式控制。 /span现在，我们返回到.Blue样式。 /span/h1 说明：为h1定义的样式可以指定所有h1段落的字体、大小和颜色，但应用于该段落的自定义CSS样式.Blue将取代h1样式中的颜色设置。另一个自定义CSS样式.Red将取代.Blue，因为它位于.Blue样式的内部。 第五章 CSS样式与模板的使用 五、利用模板（template） ●扩展名dwt，位于站点根文件夹下的templates文件夹 1. 创建自己的模板 1）模板面板 ●窗口 / 资源 / 模板 / 新建模板 2）菜单实现 ●文件 / 另存为模板 2. 给网页应用模板 1）通过菜单应用模板 ●文件 / 新建 / 模板中的页 第五章 CSS样式与模板的使用 2）通过模板面板 ●应用按钮 ●网页应用此模板后，就不能改变此网页上的任何部件。 3. 修改模板 1）定义模板的可编辑区域 ①打开要处理的模板 ②选中一块作为可编辑区域的网页元素 ③插入 / 模板对象 / 可编辑区域 第五章 CSS样式与模板的使用 2）删除可编辑区域的一般步骤 ①打开要处理的模板 ②修改 / 模板 / 删除模板标记 3）定义模板的可选区域 ●用于设置选定内容是否显示 ①打开要处理的模板 ②选中一块作为可选区域的网页元素 ③插入 / 模板对象 / 可选区域 ●在网页文件中（ 修改 / 模板属性 ） 第五章 CSS样式与模板的使用 4）定义模板的可编辑标签属性 ●用于修改应用了模板的网页文件的标签属性 ①打开要处理的模板 ②选中想要在网页文件中修改标签属性的网页元素（如表格的背景色bgcolor） ③修改 / 模板 / 令属性可编辑 ●在网页文件中（ 修改 / 模板属性 ） 4. 用模板来更新整个站点 ●修改 / 模板 / 更新页面 网页设计与制作—刘桂江 网页设计与制作 第一章 HTML语言基础 第二章 初识Dreamweaver 第三章 创建与应用表格 第四章 使用层和框架布局页面 第五章 CSS样式与模板的使用 第六章 行为和库部件的使用 网页设计与制作—刘桂江