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

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