《网页制作-模块网页的样式设计优秀PPT.ppt》由会员分享，可在线阅读，更多相关《网页制作-模块网页的样式设计优秀PPT.ppt（44页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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目录目录Font-variant任务2 使用CSS修饰页面任务1 认识CSS样式表List-style-Position模块4 网页的样式设计任务2 使用CSS修饰页面任务1：认识CSS样式表。Background-image背景图像）Word-spacing单词间距）能恰当地应用CSS样式表修饰页面。Background-positionX和Background-positionY）模块4 网页的样式设计Background-image背景图像）下面对“定位样式下的主要选项进行详细介绍模块4 网页的样式设计除设置HTML元素样式外，还可以
3、使用CSS控制Web页面中块级元素的格式和定位。Position位置）4.1.2相关知识相关知识1.CSS基础基础通过使用通过使用CSS样式设置页面的格式，可将页面的样式设置页面的格式，可将页面的内容与表示形式分离。内容与表示形式分离。除设置除设置HTML元素样式外，还可以使用元素样式外，还可以使用CSS控控制制Web页面中块级元素的格式和定位。对块级元素页面中块级元素的格式和定位。对块级元素进行操作的方法实际上就是使用进行操作的方法实际上就是使用CSS进行页面布局进行页面布局设置的方法。设置的方法。任务任务1 认识认识CSS样式表样式表模块模块4 4目录目录2.CSS规则规则CSS规则由两个
4、主要部分构成，即选择器和一条规则由两个主要部分构成，即选择器和一条或多条声明。或多条声明。选择器是需要改变样式的元素，每条声明由一选择器是需要改变样式的元素，每条声明由一个属性和一个值组成，属性和值之间用冒号分开。个属性和一个值组成，属性和值之间用冒号分开。任务任务1 认识认识CSS样式表样式表模块模块4 4目录目录3.CSS样式的类型样式的类型在在Dreamweaver中可以定义以下样式类型中可以定义以下样式类型任务任务1 认识认识CSS样式表样式表 (1)(2)(3)类样式类样式HTML标签标签样式样式高级样式高级样式模块模块4 4目录目录4.引用引用CSS样式表样式表CSS规则可以位于以
5、下位置规则可以位于以下位置任务任务1 认识认识CSS样式表样式表 (1)(2)(3)外部外部CSS样式表样式表内部或嵌入式内部或嵌入式CSS样式表样式表内联样式内联样式模块模块4 4目录目录任务任务1 认识认识CSS样式表样式表4.1.3任务小结任务小结CSS是网页设计中一项很重要的技术，了解CSS的特性、掌握CSS的类型和引用方式是正确使用CSS的基本要求。模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面4.2.1任务分析任务分析要能正确、恰当地在页面中运用CSS样式，需要掌握以下内容(2)掌握掌握以下内容以下内容(1)(3)创建和管理CSS样式编辑CSS样式应用和删除CSS
6、样式模块模块4 4目录目录4.2.2相关知识相关知识1.创建和管理CSS样式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录2.编辑CSS样式Dreamweaver中提供了8种CSS样式类别，即类型、背景、区块、方框、边框、列表、定位和扩展。类型背景区块方框边框列表定位扩展CSS样式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录Placement放置）下面对“方框样式下的各个选项进行详细介绍Background-image背景图像）任
7、务2 使用CSS修饰页面如果要使一个网站的风格统一并便于更新，在使用CSS时最好使用（）款式。任务2 使用CSS修饰页面任务2 使用CSS修饰页面任务2 使用CSS修饰页面任务2 使用CSS修饰页面在Dreamweaver中可以定义以下样式类型任务2 使用CSS修饰页面Placement放置）Text-decoration模块4 网页的样式设计下面对“背景样式下的各个选项进行详细介绍。1）“类型款式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“类型样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面“类型款式类型款式Font-familyFont-f
8、amilyLine-heightLine-heightFont-sizeFont-sizeText-decorationText-decorationFont-styleFont-styleColorColorFont-weightFont-weightFont-variantFont-variantText-transformText-transform模块模块4 4目录目录2）“背景款式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“背景样式下的各个选项进行详细介绍。任务任务2 使用使用CSS修饰页面修饰页面背景样式背景样式背景样式背景样式BBE EC CDDAAB
9、ackground-color背景颜色)Background-image背景图像）Background-repeatBackground-positionX和Background-positionY）Background-attachment模块模块4 4目录目录3）“区块款式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“区块样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面Word-spacing单词间距）Letter-spacing字母间距）Vertical-align垂直对齐）Text-align文本对齐）Text-indent文字缩进）Wh
10、ite-space空格）Display显示）区块样式模块模块4 4目录目录4）“方框款式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“方框样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面方框样式方框样式方框样式方框样式BBE EC CDDAAWidth宽和Height高）Float浮动）Clear去除）Margin边距）Padding填充）模块模块4 4目录目录5）“边框款式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“边框样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面 (1)(2)(3)Styl
11、e类型）类型）Width宽度）宽度）Color颜色）颜色）模块模块4 4目录目录6）“列表款式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“列表样式下的各个选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面 (1)(2)(3)List-style-typeList-style-imageList-style-Position模块模块4 4目录目录7）“定位款式任务任务2 使用使用CSS修饰页面修饰页面模块模块4 4目录目录下面对“定位样式下的主要选项进行详细介绍任务任务2 使用使用CSS修饰页面修饰页面Placement放置）Position位置）Clip剪辑
12、）Z-IndexZ轴）Overflow溢出）Visibility可见性）“定位款式定位款式模块模块4 4目录目录8）“扩展款式任务任务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.具体任务
13、模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面2.实现步骤模块模块4 4目录目录任务任务2 使用使用CSS修饰页面修饰页面模块模块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目录目录谢谢谢谢