第8章 CSS和模板.ppt

1、网页制作案例教程,第1章：网站与网页概述 第2章：HTML入门 第3章：网页基本编辑 第4章：表格 第5章：框架 第6章：AP Div 第7章：表单,第8章：CSS和模板 第9章：网页图形处理工具Fireworks CS5 第10章：图像处理工具Photoshop CS5 第11章：动画制作工具Flash CS5 第12章：网站制作综合应用,学习目标：,第8章 CSS和模板,了解CSS和模板的基本概念。 掌握创建和应用。 掌握模板的创建和应用。,8.1 了解CSS,了解什么是CSS样式，它与HTML的区别。 了解CSS样式的优势 。 了解CSS样式的基本语法。 了解CSS样式的运用方式。,8.

2、1.1 什么是CSS,CSS是“Cascading Styles Sheets”的缩写，中文 名称是层叠样式表。用于控制网页样式并允许将样式与 网页内容分离的一种标记性语言。 P137,CSS可将网页的内容与表现形式分开，要改变网页的外观时，只需更改CSS样式。,8.1.1 什么是CSS,以下是用传统的HTML方法来设置网页中的格式的代码：, 传统HTML设置格式 开始学习CSS 这是我的第一个网页,点击 这里 开始学习CSS ,8.1.1 什么是CSS,以下是用CSS方式设置网页中的格式的代码：, CSS设置格式 开始学习CSS 这是我的第一个网页,点击 这里 开始学习CSS ,/*段落样式

3、*/ p color: purple; font-size: 12px; /*标题样式*/ h1 color: olive; text-decoration: underline; /*链接样式*/ a:link color:#006486; a:visited color:#464646; a:hover color: #ffffff; background: #3080CB; a:active color:white; background: #3080CB ; ,文件名：sample.html,文件名：sample.css,8.1.1 什么是CSS,上面代码中，使用了CSS的方式同样设置

4、了链接的颜色，1号标题的颜色和下划线以及段落的文字颜色和大小。 在上面CSS的代码中，将网页分成了两个文件sample.html和sample.css，其中sample.html是网页文件，sample.css是网页格式的文件，专门定义css。,8.1.2 CSS的优势,一、CSS符合Web标准 二、提高页面浏览速度 三、缩短网页改版时间 四、强大的字体控制和排版能力 五、CSS非常容易编写Dreamweaver也提供了相应的 辅助工具 六、CSS有很好的兼容性，只要是可以识别CSS样式的 浏览器都可以应用它。 七、表现和内容相分离。,8.1.3 CSS的基本语法,一、CSS的样式规则由两部分

5、组成：选择器和声明。 选择器就是样式的名称 声明就是样式的具体定义，格式为： （1）.选择器 选择器总共有三种类型： 标签选择器、class选择器、高级选择器 标签选择器，即重新定义HTML标签的格式, 定以后所有该标签的样式都会立即自动更新。 class选择器和高级选择器可由用户命名。 高级选择器包括id选择器和其他复杂的选择器。,选择器 声明 ,8.1.3 CSS的基本语法,（2）声明 css的声明由属性和属性值构成，属性和属性值之间用冒号隔开，每一行声明的末尾加上一个分号，最后一行的分号可以省略。 如：color: red;,8.1.4 CSS的应用方式,CSS的应用方式有以下两种： 1

6、. 内部CSS样式表 2. 外部CSS样式表,内部CSS样式表：只存在于当前文档中，并只针对当前页进行样式应用的方法。一般存在于文档head部分的style标签内 。, ,8.1.4 CSS的应用方式,外部CSS样式表：以扩展名为.css的文件而存在，文件中内容即是所有样式的选择和声明。 该文件可做为共享文件，让多个文档共同引用并应用，达到站点文件样式的一致性。同时，如果修改该样式表文件，所有引用的文档都将改变其样式，达到网站迅速改版的目的。 网页文档引用css文件有两种方式：连接式和导入式。 P 139,8.1.4 CSS的应用方式,链接式样式表是最常用的css方法，在与标签之间加入标签链接

7、到所需的css文件。 例如： 其中href对应的属性值就是css文件的文件名。,8.1.4 CSS的应用方式,导入式通常在标签中使用import 将外部css文件导入。 例如： 导入式虽然也是将css文件分开，但其原理却是内部css的方式 。,导入式在网页文件初始化时就将文件的全部css样式装载到网页中，而连接式则是在网页需要格式时才以链接的方式引入。,8.2 使用CSS面板,利用“CSS”面板，可以轻松创建和管理CSS规则。P140 单击 “窗口”|“CSS样式”命令菜单:,8.2.1 “所有”模式与“当前”模式,3. “只显示设置属性”,一、CSS面板“所有”模式: 1.“类别视图” (默

8、认) 2. “显示列表视图”,二、在“当前”模式中，“CSS”面板显示当前所选内容的属性的摘要 。,8.2.1 “所有”模式与“当前”模式,8.2.2 基本操作,一、重命名类 二、移动CSS规则 三、删除CSS规则,在要进行设置的类上单击右键，可实现以下操作：,8.3 在Dreamweaver中创建与应用CSS,8.3.1 新建CSS文件,新建CSS文件的方法与新建HTML文件的方法类同。,“文件”/“新建” ：,8.3.2 新建CSS规则,一、新建自定义的类 二、新建HTML标签 三、新建CSS选择器（高级样式）,8.3.3 应用CSS,一、应用外部CSS样式表 需要先将css文件引入： “

9、格式”/“CSS样式”/“附加样式表”： 选中网页文档中要应用CSS样式的内容，单击“格式”| “CSS样式”命令菜单，在右拉菜单选择一个选择器名称。 二、应用内部CSS样式表 无需导入或链接，直接应用。,8.4 CSS属性,在“CSS规则定义”对话框的“分类”列表框中，共有类型、背景、区块、方框、边框、列表、定位、扩展等八大类。,8.4.1 类型属性,类型属性主要用来定义文字的字体、大小、样式、颜色等属性。,8.4.2 背景属性,背景属性主要用来定义页面的背景颜色或背景图像。,背景颜色,背景图片,8.4.3 区块属性,区块属性主要用来定义间距和对齐方式。,8.4.4 方框属性,方框属性主要用

10、来定义元素在页面上的位置。可以控制文本区域的大小、位置、与边界的距离等。,方框设置对话框,8.4.4 方框属性,理解并区别width、height、padding和margin,8.4.5 边框属性,边框属性用来定义元素周围的边框，例如边框的宽度、颜色和样式等。,边框设置对话框,8.4.6 列表属性,列表属性主要用来定义列表各种属性，如列表项目符号、位置等。,列表属性对话框,8.4.7 定位属性,定位属性主要用来定义层的大小、位置、可见性、溢出方式、剪辑等属性。 先将定位属性中的“position”属性设置为“absolute”，“属性检查器”中就会列出了相应的属性。 层宽300像素，高200

11、像素， 位置距离页面上边界100像素， 距离页面左边界50像素 ：,8.5 设计时间样式表,设计时间样式表可以在设计网页时将已有的CSS样式表隐藏，显示并应用其它样式表。利用设计时间样式表这一功能，可以在文档中查看同一网页内容应用不同外部样式表的效果。,“格式”|“CSS样式”|“设计时间”： 设计时显示 CSS 样式表 设计时藏某些 CSS 样式表,8.6 模板概述,8.6.1 什么是模板,模板的功能就是把网页布局和内容分离，在布局设计好之后将其存储为模板，这样相同布局的页面可以通过模板创建，能够极大的提高工作效率。它是一种特殊类型的文档，文件扩展名为“.dwt”。 P148,8.6.1 什

12、么是模板,8.6.2 模板的优点,一、制作方便，利用模板可以制作具有相同外观结构的 网页，提高了制作效率。 二、更改方便，更改模板就使得整个网站采用相同模板 的页面都得到更新。 三、模板与基于该模板的网页文件之间保持连接状态， 对于相同的内容可保证完全的一致。,8.7 创建模板,制作模板和制作一个普通的页面完全相同，只是不需把页面的所有部分都制作完成，仅仅需要制作出导航条、标题栏等各个页面的公共部分，中间区域用各个页面的具体内容来填充。 可直接创建空白的模板，也可以将已有文档转换为模板 模板中至少还要创建一个可编辑区域，否则基于该模板的页面是不可编辑的 为了便于管理，将模板存放在站点根目录下的

13、“Templates”文件夹中,8.7.1 直接创建模板,一、通过“资源”面板直接创建模板 二、利用“资源”面板可以查看已有模板、新建模板、修改模板和删除模板,8.7.2 将已有文档转换为模板,“文件“/”另存为模板“:,另存为模板,8.7.3 创建可编辑区域,设计者可以决定模板中的哪些部分是可编辑的，而哪些是不可编辑的，这就要通过创建可编辑区域来实现上述功能。 建好模板、定好光标位置，“插入”/“模板对象”/“可编辑区域” ：,新建可编辑区域对话框,8.7.3 创建可编辑区域,8.8 模板的应用,8.8.1 应用模板创建新文档,8.8.2 将模板应用于现有文档,一、打开已经保存好的网页，运用“选择模板”对话框设 置，将模板应用于网页。 二、把资源面板中要应用的新模板拖到文档中即可应用 新模板。 三、 打开模板，点击“应用”按钮，即可应用新模板。,8.8.3 更新应用模板的文档,当模板中的内容发生改变时，保存模板后会自动弹出更新页面的对话框，点击更新按钮即可更新所有应用该模板的文档。,8.8.4 将文档从模板中分离,先从模板创建页面，然后再从模板中分离出来成为了独立的页面，并且保留网页中原内容。 “修改”|“模板”|“从模板中分离” 分离之后的文档就是普通的网页文档了，和模板再也没有任何联