网页制作模块网页的样式设计学习教案

会计学1网页网页(wn y)制作模块网页制作模块网页(wn y)的样的样式设计式设计第一页，共43页。模块模块(m kui)4 网页的样网页的样式设计式设计能理解CSS的作用。能恰当(qidng)地应用CSS样式表修饰页面。能力能力(nngl)目标目标第1页/共42页第二页，共43页。模块模块4 网页的样式网页的样式(yngsh)设计设计任务1：认识CSS样式表。任务2：使用(shyng)CSS修饰页面。具体任务具体任务第2页/共42页第三页，共43页。CSS基础(1)(2)(3)(4)引用CSS样式表CSS规则CSS样式的类型4.1.1任务分析任务分析任务任务(rn wu)1 认识认识CSS样式表样式表第3页/共42页第四页，共43页。4.1.2相关知识相关知识1.CSS基础基础通过使用CSS样式设置页面的格式，可将页面的内容与表示形式分离。除设置HTML元素样式外，还可以使用CSS控制Web页面中块级元素的格式和定位。对块级元素进行操作的方法实际上就是使用CSS进行页面布局设置的方法。任务任务(rn wu)1 认识认识CSS样式表样式表第4页/共42页第五页，共43页。2.CSS规则规则CSS规则由两个主要部分构成，即选择器和一条或多条声明。选择器是需要改变样式的元素，每条声明由一个属性和一个值组成，属性和值之间用冒号分开。任务任务(rn wu)1 认识认识CSS样式表样式表第5页/共42页第六页，共43页。3.CSS样式的类型样式的类型在Dreamweaver中可以定义以下样式类型任务任务(rn wu)1 认识认识CSS样式表样式表 (1) (2) (3)类样式类样式HTML标标签样式签样式高级样式高级样式第6页/共42页第七页，共43页。4.引用引用CSS样式表样式表CSS规则可以位于以下位置任务任务(rn wu)1 认识认识CSS样式表样式表 (1) (2) (3)外部外部CSS样式表样式表内部或嵌入内部或嵌入式式CSS样式样式表表内联样式内联样式第7页/共42页第八页，共43页。任务任务(rn wu)1 认识认识CSS样式表样式表4.1.3任务小结任务小结CSS是网页设计中一项很重要的技术，了解CSS的特性、掌握CSS的类型和引用方式是正确使用CSS的基本要求。第8页/共42页第九页，共43页。任务任务(rn wu)2 使用使用CSS修饰页面修饰页面4.2.1任务分析任务分析要能正确、恰当地在页面中运用CSS样式，需要掌握以下内容(2)掌握掌握以下内容以下内容(1)(3)创建和管理CSS样式编辑CSS样式应用和删除CSS样式第9页/共42页第十页，共43页。4.2.2相关知识相关知识1.创建(chungjin)和管理CSS样式任务任务2 使用使用CSS修饰修饰(xish)页面页面第10页/共42页第十一页，共43页。任务任务(rn wu)2 使用使用CSS修饰页面修饰页面第11页/共42页第十二页，共43页。任务任务2 使用使用CSS修饰修饰(xish)页面页面第12页/共42页第十三页，共43页。2.编辑CSS样式Dreamweaver中提供了8种CSS样式类别，即类型、背景、区块、方框、边框、列表、定位(dngwi)和扩展。类型背景区块方框边框列表定位扩展CSS样式任务任务(rn wu)2 使用使用CSS修修饰页面饰页面第13页/共42页第十四页，共43页。1）“类型(lixng)”样式任务任务(rn wu)2 使用使用CSS修修饰页面饰页面第14页/共42页第十五页，共43页。下面对“类型”样式(yngsh)下的各个选项进行详细介绍任务任务2 使用使用(shyng)CSS修修饰页面饰页面“类型”样式Font-familyLine-heightFont-sizeText-decorationFont-styleColorFont-weightFont-variantText-transform第15页/共42页第十六页，共43页。2）“背景(bijng)”样式任务任务2 使用使用CSS修饰修饰(xish)页面页面第16页/共42页第十七页，共43页。下面对“背景”样式(yngsh)下的各个选项进行详细介绍。任务任务(rn wu)2 使用使用CSS修饰页面修饰页面Background-color（背景颜色)Background-image（背景图像）Background-repeatBackground-position（X）和Background-position（Y）Background-attachment第17页/共42页第十八页，共43页。3）“区块”样式(yngsh)任务任务2 使用使用CSS修饰修饰(xish)页面页面第18页/共42页第十九页，共43页。下面对“区块”样式下的各个选项进行详细(xingx)介绍任务任务2 使用使用CSS修饰修饰(xish)页面页面Word-spacing（单词间距）Letter-spacing（字母间距）Vertical-align（垂直对齐）Text-align（文本对齐）Text-indent（文字缩进）White-space（空格）Display（显示）区块样式第19页/共42页第二十页，共43页。4）“方框(fn kun)”样式任务任务(rn wu)2 使用使用CSS修修饰页面饰页面第20页/共42页第二十一页，共43页。下面对“方框”样式下的各个选项进行详细(xingx)介绍任务任务2 使用使用(shyng)CSS修修饰页面饰页面Width（宽）和Height（高）Float（浮动）Clear（清除）Margin（边距）Padding（填充）第21页/共42页第二十二页，共43页。5）“边框(binkung)”样式任务任务2 使用使用CSS修饰修饰(xish)页面页面第22页/共42页第二十三页，共43页。下面对“边框(binkung)”样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰修饰(xish)页面页面 (1) (2) (3)Style（类型）（类型）Width（宽度）（宽度）Color（颜色（颜色）第23页/共42页第二十四页，共43页。6）“列表(li bio)”样式任务任务2 使用使用CSS修饰修饰(xish)页面页面第24页/共42页第二十五页，共43页。下面对“列表”样式下的各个选项进行详细(xingx)介绍任务任务2 使用使用CSS修饰修饰(xish)页面页面 (1) (2) (3)List-style-typeList-style-imageList-style-Position第25页/共42页第二十六页，共43页。7）“定位(dngwi)”样式任务任务2 使用使用CSS修饰修饰(xish)页面页面第26页/共42页第二十七页，共43页。下面对“定位”样式下的主要(zhyo)选项进行详细介绍任务任务2 使用使用CSS修饰修饰(xish)页面页面Placement（放置）Position（位置）Clip（剪辑）Z-Index（Z轴）Overflow（溢出）Visibility（可见性）“定位定位”样式样式第27页/共42页第二十八页，共43页。8）“扩展(kuzhn)”样式任务任务2 使用使用CSS修饰修饰(xish)页面页面第28页/共42页第二十九页，共43页。下面对“扩展”样式下的主要选项进行详细(xingx)介绍任务任务2 使用使用(shyng)CSS修饰页面修饰页面 (1) (2) (3)分页分页Cursor（光标（光标）Filter（过滤器）（过滤器）第29页/共42页第三十页，共43页。任务任务(rn wu)2 使用使用CSS修饰页面修饰页面3.应用和删除应用和删除CSS样式样式应用应用CSS样式样式删除删除CSS样式样式第30页/共42页第三十一页，共43页。4.2.3任务实施任务实施任务任务(rn wu)2 使用使用CSS修修饰页面饰页面1.具体任务第31页/共42页第三十二页，共43页。任务任务2 使用使用CSS修饰修饰(xish)页面页面2.实现(shxin)步骤第32页/共42页第三十三页，共43页。任务任务2 使用使用CSS修饰修饰(xish)页面页面第33页/共42页第三十四页，共43页。任务任务2 使用使用CSS修饰修饰(xish)页面页面第34页/共42页第三十五页，共43页。任务任务(rn wu)2 使用使用CSS修饰页面修饰页面第35页/共42页第三十六页，共43页。任务任务(rn wu)2 使用使用CSS修修饰页面饰页面第36页/共42页第三十七页，共43页。任务任务2 使用使用(shyng)CSS修修饰页面饰页面第37页/共42页第三十八页，共43页。任务任务2 使用使用(shyng)CSS修饰页面修饰页面4.2.4任务小结任务小结通过本任务可以练习创建、应用样式规则，创建、链接外部样式表等操作，CSS样式文件作用强大，是网页设计中必不可少的知识，使用外部样式表文件可以极大地提高网页制作效率和质量，应熟练掌握。第38页/共42页第三十九页，共43页。思考思考(sko)与练习与练习1.如果要使一个网站的风格统一并便于更新，在使用CSS时最好使用（）样式。A.内部B.外部C.相对D.嵌入2.下列（）是定义样式表的正确格式。A.body:color=black(body）B.body:color=blackC.bodycolor：blackD.body;color:black第39页/共42页第四十页，共43页。思考思考(sko)与练习与练习1.使用CSS样式表有什么好处？2.观察网络中的优秀页面，学习页面的CSS样式设计，总结CSS样式设计的经验。第40页/共42页第四十一页，共43页。第41页/共42页第四十二页，共43页。NoImage内容(nirng)总结会计学。网页制作模块网页的样式设计。模块4 网页的样式设计。任务1 认识CSS样式表。除设置HTML元素样式外，还可以使用CSS控制Web页面中块级元素的格式和定位。对块级元素进行操作的方法实际上就是使用CSS进行页面布局设置的方法。任务2 使用CSS修饰页面。Dreamweaver中提供了8种CSS样式类别，即类型、背景(bijng)、区块、方框、边框、列表、定位和扩展。Width（宽）和Height（高）。Thanks第四十三页，共43页。