《《网页制作》模块4网页的样式设计》由会员分享，可在线阅读，更多相关《《网页制作》模块4网页的样式设计（43页珍藏版）》请在金锄头文库上搜索。
1、模块模块4 4目录目录模块模块4 网页的样式设计网页的样式设计模块模块4 4目录目录模块模块4 网页的样式设计网页的样式设计认识CSS样式表。掌握引用CSS样式表的方法。掌握CSS样式表的应用方法。知识目标知识目标模块模块4 4目录目录模块模块4 网页的样式设计网页的样式设计能理解CSS的作用。能恰当地应用CSS样式表修饰页面。能力目标能力目标模块模块4 4目录目录模块模块4 网页的样式设计网页的样式设计任务1：认识CSS样式表。任务2：使用CSS修饰页面。具体任务具体任务模块模块4 4目录目录CSS基础(1)(2)(3)(4)引用CSS样式表CSS规则CSS样式的类型4.1.1任务分析任务分
2、析任务任务1 认识认识CSS样式表样式表模块模块4 4目录目录4.1.2相关知识相关知识1.CSS基础基础通过使用CSS样式设置页面的格式，可将页面的内容与表示形式分离。除设置HTML元素样式外，还可以使用CSS控制Web页面中块级元素的格式和定位。对块级元素进行操作的方法实际上就是使用CSS进行页面布局设置的方法。任务任务1 认识认识CSS样式表样式表模块模块4 4目录目录2.CSS规则规则CSS规则由两个主要部分构成，即选择器和一条或多条声明。选择器是需要改变样式的元素，每条声明由一个属性和一个值组成，属性和值之间用冒号分开。任务任务1 认识认识CSS样式表样式表模块模块4 4目录目录3.
3、CSS样式的类型样式的类型在Dreamweaver中可以定义以下样式类型任务任务1 认识认识CSS样式表样式表 (1) (2) (3)类样式类样式HTML标签标签样式样式高级样式高级样式模块模块4 4目录目录4.引用引用CSS样式表样式表CSS规则可以位于以下位置任务任务1 认识认识CSS样式表样式表 (1) (2) (3)外部外部CSS样式表样式表内部或嵌入式内部或嵌入式CSS样式表样式表内联样式内联样式模块模块4 4目录目录任务任务1 认识认识CSS样式表样式表4.1.3任务小结任务小结CSS是网页设计中一项很重要的技术，了解CSS的特性、掌握CSS的类型和引用方式是正确使用CSS的基本要
4、求。模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面4.2.1任务分析任务分析要能正确、恰当地在页面中运用CSS样式，需要掌握以下内容(2)掌握掌握以下内容以下内容(1)(3)创建和管理CSS样式编辑CSS样式应用和删除CSS样式模块模块4 4目录目录4.2.2相关知识相关知识1.创建和管理CSS样式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录2.编辑CSS样式Dreamweaver中提供了8种CSS样式类别，即类型、背景、区块、方
5、框、边框、列表、定位和扩展。类型背景区块方框边框列表定位扩展CSS样式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录1）“类型”样式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“类型”样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面“ “类型类型” ”样式样式FontFont- -familyfamilyLineLine- -heightheightFontFont- -sizesizeText-decorationText-decorationFontFont- -stylestyleColorColorFont-weight
6、Font-weightFont-variantFont-variantText-transformText-transform模块模块4 4目录目录2）“背景”样式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“背景”样式下的各个选项进行详细介绍。任务任务2 使用使用CSS修饰页面修饰页面背景样式背景样式背景样式背景样式BBE EC CDDAABackground-color（背景颜色)Background-image（背景图像）Background-repeatBackground-position（X）和Background-position（Y）Backgroun
7、d-attachment模块模块4 4目录目录3）“区块”样式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“区块”样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面Word-spacing（单词间距）Letter-spacing（字母间距）Vertical-align（垂直对齐）Text-align（文本对齐）Text-indent（文字缩进）White-space（空格）Display（显示）区块样式模块模块4 4目录目录4）“方框”样式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“方框”样式下的各个选项进行详细介绍任务
8、任务2 使用使用CSS修饰页面修饰页面方框样式方框样式方框样式方框样式BBE EC CDDAAWidth（宽）和Height（高）Float（浮动）Clear（清除）Margin（边距）Padding（填充）模块模块4 4目录目录5）“边框”样式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“边框”样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面 (1) (2) (3)Style（类型）（类型）Width（宽度）（宽度）Color（颜色）（颜色）模块模块4 4目录目录6）“列表”样式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下
9、面对“列表”样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面 (1) (2) (3)List-style-typeList-style-imageList-style-Position模块模块4 4目录目录7）“定位”样式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“定位”样式下的主要选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面Placement（放置）Position（位置）Clip（剪辑）Z-Index（Z轴）Overflow（溢出）Visibility（可见性）“定位定位”样式样式模块模块4 4目录目录8）“扩展”样式任务任务
10、2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“扩展”样式下的主要选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面 (1) (2) (3)分页分页Cursor（光标）（光标）Filter（过滤器）（过滤器）模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面3.应用和删除应用和删除CSS样式样式应用应用CSS样式样式删除删除CSS样式样式模块模块4 4目录目录4.2.3任务实施任务实施任务任务2 使用使用CSS修饰页面修饰页面1.具体任务模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面2.实现步骤模块模块4 4目录目录任务任务2 使用使用C
11、SS修饰页面修饰页面模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面4.2.4任务小结任务小结通过本任务可以练习创建、应用样式规则，创建、链接外部样式表等操作，CSS样式文件作用强大，是网页设计中必不可少的知识，使用外部样式表文件可以极大地提高网页制作效率和质量，应熟练掌握。模块模块4 4目录目录思考与练习思考与练习1.如果要使一个网站的风格统一并便于更新，在使用CSS时最好使用（）样式。A.内部B.外部C.相对D.嵌入2.下列（）是定义样式表的正确格式。A.body:color=black(body）B.body:color=blackC.bodycolor：blackD.body;color:black模块模块4 4目录目录思考与练习思考与练习1.使用CSS样式表有什么好处？2.观察网络中的优秀页面，学习页面的CSS样式设计，总结CSS样式设计的经验。模块模块4 4目录目录
