网页设计与制作课件第5章CSS样式与模板的使用.ppt

网页设计与制作网页设计与制作第一章第一章 HTML语言基础语言基础 2第二章第二章 初识初识Dreamweaver 4第三章第三章 创建与应用表格创建与应用表格 3第四章第四章 使用层和框架布局页面使用层和框架布局页面 3第五章第五章 CSS样式与模板的使用样式与模板的使用 3第六章第六章 行为、库和资源管理行为、库和资源管理 3第七章第七章 建立动态网站建立动态网站 3 第八章第八章 Flash动画基础知识动画基础知识 3第九章第九章 创建动画创建动画 3第十章第十章 使用使用Fireworks编辑网页图像编辑网页图像 31第五章第五章 CSS样式与模板的使用样式与模板的使用一、层叠样式表概述一、层叠样式表概述1 1、什么是、什么是CSSCSS 层层叠叠样样式式表表(CSS)CSS)是是一一系系列列格格式式设设置置规规则则，它它们们控控制制网网页页内内容容的的外外观观。使使用用层层叠叠样样式式表表可可以以为为部部分文件、整份文件乃至整个网站定义样式。分文件、整份文件乃至整个网站定义样式。CSSCSS样式规则由两部分组成：样式规则由两部分组成：选择器选择器和和声明声明。选选择择器器是是样样式式名名称称(如如trtr或或p)p)，而而声声明明则则用用于于定定义义样样式式元元素素。声声明明由由属属性性(如如color)color)和和值值(如如red)red)两部分组成。两部分组成。如：如：pfont-sizepfont-size：16px16px；colorcolor：redred 第五章第五章 CSS样式与模板的使用样式与模板的使用2 2、CSSCSS的作用的作用 CSSCSS样式主要是实现网页中各种元素的准确定位。样式主要是实现网页中各种元素的准确定位。CSSCSS样式只需修改一个文件就可以改变一批网页的样式只需修改一个文件就可以改变一批网页的外观和格式，并保证在所有浏览器和平台之间的兼外观和格式，并保证在所有浏览器和平台之间的兼容性，使用户设计的网站拥有更少的编码、更少的容性，使用户设计的网站拥有更少的编码、更少的页数和更快的下载速度。页数和更快的下载速度。使使用用CSSCSS样样式式可可以以控控制制许许多多使使用用HTMLHTML无无法法控控制制的的属属性。如：性。如：指定自定义列表项目符号；指定自定义列表项目符号；指定不同的字体大小和单位指定不同的字体大小和单位(像素、点数等像素、点数等)；设置设置HTMLHTML卷标、段落等的样式。卷标、段落等的样式。第五章第五章 CSS样式与模板的使用样式与模板的使用3 3、CSSCSS的基本语法的基本语法 在代码视图模式中，寻找在代码视图模式中，寻找spanspan标识符，就可知道标识符，就可知道是否应用了是否应用了CSSCSS。CSSCSS可将原有的可将原有的HTMLHTML卷标定义成自己想要的效果，卷标定义成自己想要的效果，其基本语法是在卷标之后加上符号，在此符其基本语法是在卷标之后加上符号，在此符号内填入号内填入CSSCSS所设置的所设置的HTMLHTML属性。属性。如：如：h2font-sizeh2font-size：16px16px；colorcolor：redred第五章第五章 CSS样式与模板的使用样式与模板的使用二、二、CSSCSS样式的创建与应用样式的创建与应用DreamweaverDreamweaver拥有自动创建样式的功能，如用户选拥有自动创建样式的功能，如用户选定某段文字后，为其设置字体、字号和颜色等属定某段文字后，为其设置字体、字号和颜色等属性后，系统自动创建以性后，系统自动创建以StyleX(XStyleX(X为数字序列为数字序列)为为名的样式，且自动显示在属性面板的名的样式，且自动显示在属性面板的“样式样式”下下拉列表框中。拉列表框中。用户除了可以应用用户除了可以应用DreamweaverDreamweaver创建的样式外，还创建的样式外，还可以定义自己需要的样式。可以定义自己需要的样式。1 1、认识认识“CSSCSS样式样式”面板面板 窗口窗口/CSSCSS样式样式2 2、认识、认识“相关相关CSS”CSS”面板面板 窗口窗口/标签检查器标签检查器/相关相关CSS(CSS(点击点击CSSCSS属性标签属性标签)第五章第五章 CSS样式与模板的使用样式与模板的使用3 3、创建、创建CSSCSS样式样式 文本文本/CSSCSS样式样式/新建新建对话框中选项的说明（对话框中选项的说明（P120P120）示例：创建一个名为示例：创建一个名为“test1”test1”的样式，要求此样的样式，要求此样式的字体为式的字体为“宋体宋体”，颜色为，颜色为#FF0000FF0000，字号为字号为2424像素，背景颜色为像素，背景颜色为#00#00FFFFFFFF。4 4、应用类样式、应用类样式 类样式是惟一可以应用于文档中任何文本类样式是惟一可以应用于文档中任何文本(与控制与控制文本的标签无关文本的标签无关)的的CSSCSS样式类型。与当前文档关样式类型。与当前文档关联的所有类样式都显示在联的所有类样式都显示在“CSSCSS样式样式”面板中面板中(样样式名称前有一个句点式名称前有一个句点)和文本属性面板的和文本属性面板的“样式样式”下拉列表框中。下拉列表框中。第五章第五章 CSS样式与模板的使用样式与模板的使用1 1）应用自定义的）应用自定义的CSSCSS样式样式 属性面板的属性面板的“样式样式”下拉列表框下拉列表框2 2）删除自定义的）删除自定义的CSSCSS样式样式 “样式样式”下拉列表框中选择下拉列表框中选择“无无”三、三、CSSCSS样式的导出与编辑样式的导出与编辑1、导出样式以创建导出样式以创建CSSCSS样式表样式表 用户可以从文档中导出样式以创建新的用户可以从文档中导出样式以创建新的CSSCSS样式表。样式表。然后，再链接到其他文档以应用这些样式。然后，再链接到其他文档以应用这些样式。文本文本/CSSCSS样式样式/导出导出2 2、管理、管理CSSCSS样式样式文本文本/CSSCSS样式样式/管理样式管理样式第五章第五章 CSS样式与模板的使用样式与模板的使用3 3、链接和导入外部样式表、链接和导入外部样式表 可以导入或链接到外部样式表以应用那里包含的可以导入或链接到外部样式表以应用那里包含的样式。样式。文本文本/CSSCSS样式样式/管理样式管理样式/附加附加示例：创建新文档，并为其链接一个外部样式示例：创建新文档，并为其链接一个外部样式表。表。4 4、编辑编辑CSSCSS样式样式 CSSCSS样式面板样式面板对对文文档档内内的的CSSCSS样样式式进进行行编编辑辑时时，会会立立刻刻重重新新设置该设置该CSSCSS样式控制的所有文本的格式。样式控制的所有文本的格式。编辑外部样式表会影响与它链接的所有文档。编辑外部样式表会影响与它链接的所有文档。第五章第五章 CSS样式与模板的使用样式与模板的使用四、四、CSSCSS样式的优先顺序样式的优先顺序(1)(1)如如果果将将两两种种样样式式应应用用于于同同一一文文本本，浏浏览览器器显显示示这两种样式的所有属性。这两种样式的所有属性。(2)(2)如如果果应应用用于于同同一一文文本本的的两两种种样样式式的的属属性性发发生生冲冲突突（如如，一一种种样样式式可可能能将将蓝蓝色色指指定定为为文文本本颜颜色色，而而另另一一种种样样式式可可能能指指定定红红色色作作为为文文本本颜颜色色。），则则浏浏览览器器显显示示最最里里面面的的样样式式(离离文文本本本本身身最最近近的的样式样式)的属性。的属性。第五章第五章 CSS样式与模板的使用样式与模板的使用示例：示例：h1举举例例:span:class=Blue该该段段落落受受自自定定义义样样式式.BlueBlue和和HTMLHTML标签样式标签样式h1h1的控制。的控制。span class=Red但这个句子受但这个句子受.RedRed样式控制。样式控制。/span现在，我们返回到现在，我们返回到.BlueBlue样式。样式。/span说说明明：为为h1h1定定义义的的样样式式可可以以指指定定所所有有h1h1段段落落的的字字体体、大大小小和和颜颜色色，但但应应用用于于该该段段落落的的自自定定义义CSSCSS样样式式.BlueBlue将将取取代代h1h1样样式式中中的的颜颜色色设设置置。另另一一个个自自定定义义CSSCSS样样式式.RedRed将将取取代代.BlueBlue，因因为为它它位位于于.BlueBlue样式的内部。样式的内部。第五章第五章 CSS样式与模板的使用样式与模板的使用五、利用模板（五、利用模板（template）扩扩展展名名dwtdwt，位位于于站站点点根根文文件件夹夹下下的的templatestemplates文件夹文件夹1.创建自己的模板创建自己的模板1 1）模板面板）模板面板窗口窗口/资源资源/模板模板/新建模板新建模板2）菜单实现）菜单实现文件文件/另存为模板另存为模板2.给网页应用模板给网页应用模板1）通过菜单应用模板）通过菜单应用模板文件文件/新建新建/模板模板第五章第五章 CSS样式与模板的使用样式与模板的使用2）通过模板面板通过模板面板应用应用按钮按钮网网页页应应用用此此模模板板后后，就就不不能能改改变变此此网网页页上上的的任任何部件。何部件。3.修改模板修改模板1）定义模板的可编辑区域）定义模板的可编辑区域打开要处理的模板打开要处理的模板选中一块作为可编辑区域的网页元素选中一块作为可编辑区域的网页元素插入插入/模板对象模板对象/可编辑区域可编辑区域第五章第五章 CSS样式与模板的使用样式与模板的使用2 2）删除可编辑区域的一般步骤）删除可编辑区域的一般步骤 打开要处理的模板打开要处理的模板修改修改/模板模板/删除模板标记删除模板标记 3）定义模板的可选区域）定义模板的可选区域用于设置选定内容是否显示用于设置选定内容是否显示打开要处理的模板打开要处理的模板选中一块作为可选区域的网页元素选中一块作为可选区域的网页元素插入插入/模板对象模板对象/可选区域可选区域在网页文件中（在网页文件中（修改修改/模板属性模板属性 ）第五章第五章 CSS样式与模板的使用样式与模板的使用4）定义模板的可编辑标签属性）定义模板的可编辑标签属性用于修改应用了模板的网页文件的标签属性用于修改应用了模板的网页文件的标签属性打开要处理的模板打开要处理的模板选选中中想想要要在在网网页页文文件件中中修修改改标标签签属属性性的的网网页页元素（如表格的背景色元素（如表格的背景色bgcolorbgcolor）修改修改/模板模板/令属性可编辑令属性可编辑在网页文件中（在网页文件中（修改修改/模板属性模板属性 ）4.用模板来更新整个站点用模板来更新整个站点修改修改/模板模板/更新页面更新页面