《网页制作》模块4网页的样式设计ppt课件

1、目录目录模块模块4 网页的款式设计网页的款式设计目录目录模块模块4 网页的款式设计网页的款式设计认识CSS款式表。掌握援用CSS款式表的方法。掌握CSS款式表的运用方法。知识目的知识目的目录目录模块模块4 网页的款式设计网页的款式设计能了解CSS的作用。能恰当地运用CSS款式表修饰页面。才干目的才干目的目录目录模块模块4 网页的款式设计网页的款式设计义务1：认识CSS款式表。义务2：运用CSS修饰页面。详细义务详细义务目录目录CSS根底(1)(2)(3)(4)援用CSS款式表CSS规那么CSS款式的类型4.1.1义务分析义务分析义务义务1 认识认识CSS款式表款式表目录目录4.1.2相关知识相

2、关知识1.CSS根底根底经过运用经过运用CSS款式设置页面的格式，可将页面款式设置页面的格式，可将页面的内容与表示方式分别。的内容与表示方式分别。除设置除设置HTML元素款式外，还可以运用元素款式外，还可以运用CSS控控制制Web页面中块级元素的格式和定位。对块级元素页面中块级元素的格式和定位。对块级元素进展操作的方法实践上就是运用进展操作的方法实践上就是运用CSS进展页面规划进展页面规划设置的方法。设置的方法。义务义务1 认识认识CSS款式表款式表目录目录2.CSS规那么规那么CSS规那么由两个主要部分构成，即选择器和规那么由两个主要部分构成，即选择器和一条或多条声明。一条或多条声明。选择器

3、是需求改动款式的元素，每条声明由一选择器是需求改动款式的元素，每条声明由一个属性和一个值组成，属性和值之间用冒号分开。个属性和一个值组成，属性和值之间用冒号分开。义务义务1 认识认识CSS款式表款式表目录目录3.CSS款式的类型款式的类型在在Dreamweaver中可以定义以下款式类型中可以定义以下款式类型义务义务1 认识认识CSS款式表款式表 (1) (2) (3)类款式类款式HTML标签标签款式款式高级款式高级款式目录目录4.援用援用CSS款式表款式表CSS规那么可以位于以下位置规那么可以位于以下位置义务义务1 认识认识CSS款式表款式表 (1) (2) (3)外部外部CSS款式表款式表内

4、部或嵌入式内部或嵌入式CSS款式表款式表内联款式内联款式目录目录义务义务1 认识认识CSS款式表款式表4.1.3义务小结义务小结CSS是网页设计中一项很重要的技术，了解CSS的特性、掌握CSS的类型和援用方式是正确运用CSS的根本要求。目录目录义务义务2 运用运用CSS修饰页面修饰页面4.2.1义务分析义务分析要能正确、恰当地在页面中运用CSS款式，需求掌握以下内容(2)掌握掌握以下内容以下内容(1)(3)创建和管理CSS款式编辑CSS款式运用和删除CSS款式目录目录4.2.2相关知识相关知识1.创建和管理CSS款式义务义务2 运用运用CSS修饰页面修饰页面目录目录义务义务2 运用运用CSS修

5、饰页面修饰页面目录目录义务义务2 运用运用CSS修饰页面修饰页面目录目录2.编辑CSS款式Dreamweaver中提供了8种CSS款式类别，即类型、背景、区块、方框、边框、列表、定位和扩展。类型背景区块方框边框列表定位扩展CSS款式义务义务2 运用运用CSS修饰页面修饰页面目录目录1“类型款式义务义务2 运用运用CSS修饰页面修饰页面目录目录下面对“类型款式下的各个选项进展详细引见义务义务2 运用运用CSS修饰页面修饰页面目录目录2“背景款式义务义务2 运用运用CSS修饰页面修饰页面目录目录下面对“背景款式下的各个选项进展详细引见。义务义务2 运用运用CSS修饰页面修饰页面Background

6、-color背景颜色)Background-image背景图像Background-repeatBackground-positionX和Background-positionYBackground-attachment目录目录3“区块款式义务义务2 运用运用CSS修饰页面修饰页面目录目录下面对“区块款式下的各个选项进展详细引见义务义务2 运用运用CSS修饰页面修饰页面Word-spacing单词间距Letter-spacing字母间距Vertical-align垂直对齐Text-align文本对齐Text-indent文字缩进White-space空格Display显示区块款式目录目录4“方

7、框款式义务义务2 运用运用CSS修饰页面修饰页面目录目录下面对“方框款式下的各个选项进展详细引见义务义务2 运用运用CSS修饰页面修饰页面Width宽和Height高Float浮动Clear去除Margin边距Padding填充目录目录5“边框款式义务义务2 运用运用CSS修饰页面修饰页面目录目录下面对“边框款式下的各个选项进展详细引见义务义务2 运用运用CSS修饰页面修饰页面 (1) (2) (3)Style类型类型Width宽度宽度Color颜色颜色目录目录6“列表款式义务义务2 运用运用CSS修饰页面修饰页面目录目录下面对“列表款式下的各个选项进展详细引见义务义务2 运用运用CSS修饰页

8、面修饰页面 (1) (2) (3)List-style-typeList-style-imageList-style-Position目录目录7“定位款式义务义务2 运用运用CSS修饰页面修饰页面目录目录下面对“定位款式下的主要选项进展详细引见义务义务2 运用运用CSS修饰页面修饰页面Placement放置Position位置Clip剪辑Z-IndexZ轴Overflow溢出Visibility可见性“定位款式定位款式目录目录8“扩展款式义务义务2 运用运用CSS修饰页面修饰页面目录目录下面对“扩展款式下的主要选项进展详细引见义务义务2 运用运用CSS修饰页面修饰页面 (1) (2) (3)分

9、页分页Cursor光标光标Filter过滤器过滤器目录目录义务义务2 运用运用CSS修饰页面修饰页面3.运用和删除运用和删除CSS款式款式运用运用CSS款式款式删除删除CSS款式款式目录目录4.2.3义务虚施义务虚施义务义务2 运用运用CSS修饰页面修饰页面1.详细义务目录目录义务义务2 运用运用CSS修饰页面修饰页面2.实现步骤目录目录义务义务2 运用运用CSS修饰页面修饰页面目录目录义务义务2 运用运用CSS修饰页面修饰页面目录目录义务义务2 运用运用CSS修饰页面修饰页面目录目录义务义务2 运用运用CSS修饰页面修饰页面目录目录义务义务2 运用运用CSS修饰页面修饰页面目录目录义务义务2 运用运用CSS修饰页面修饰页面4.2.4义务小结义务小结经过本义务可以练习创建、运用款式规那么，创建、链接外部款式表等操作，CSS款式文件作用强大，是网页设计中必不可少的知识，运用外部款式表文件可以极大地提高网页制造效率和质量，应熟练掌握。目录目录思索与练习思索与练习1.假设要使一个网站的风格一致并便于更新，在运用CSS时最好运用款式。A.内部B.外部C.相对D.嵌入2.以下是定义款式表的正确