Dreamweaver CC 07章 掌握美化页面—CSS样式.pptVIP

本章简介： 层叠样式表（CSS）是W3C组织批准的一个辅助HTML设计的新特性，能保持整个HTML的统一外观。CSS的功能强大、操作灵活，用CSS改变一个文件就可以改变数百个文件的外观，而且个性化的表现更能吸引访问者。 项目7 掌握美化页面—CSS样式 学习引导 ? 知识目标 能力目标 情感目标 学习目标 1、了解CSS样式的概念。 2、了解CSS样式的创建。 1、熟练掌握CSS演示的创建及应用。 2、掌握CSS过渡效果面的使用方法。 培养对网页美化的兴趣。 实训项目 1、制作山地车网页 2、制作足球运动网页 任务7.1 制作山地车网页 任务引入 设计理念 任务知识 任务实施 扩展实践 7.1.1 任务引入 山地自行车是一家以“低碳减排 快乐骑行”为标语的生产和销售厂家，为消费者提供全方面的自行车选购、比价、车架查询、在线咨询等服务。网页设计要求体现出品牌特点和产品特色。 7.1.2　设计理念 在网页设计和制作过程中，使用实景照片作为底色，大幅的风景图片，使用户看了心旷神怡，产生向往之情；左侧导航设计具有新意，使文字内容突出显示让人一目了然；整体设计简单、大气，能够使人印象深刻。 效果图 7.1.3　任务知识：CSS设计器面板及样式 1．CSS样式的概念 CSS是Cascading Style Sheet的缩写，一般译为“层叠样式表”或“级联样式表”。CSS对HTML 3.2之前版本的语法进行了变革，将某些HTML标签属性简化。比如要将一段文字的大小变成36像素，在HTML 3.2中要写成“pfont size=36文字的大小/font/p”，标签的层层嵌套使HTML程序臃肿不堪；而用CSS写成“p style=font-size:36px文字的大小/p”即可。 CSS使用HTML格式的代码，浏览器处理起来速度比较快。可以说CSS是HTML的一部分，它将对象引入HTML中，可以通过脚本程序调用和改变对象的属性，从而产生动态效果。比如，当鼠标指针放到文字上时，文字的字号变大，用CSS可写成：p onMouseOver=className=aa动态文字/p。 7.1.3　任务知识：CSS设计器面板及样式 2．“CSS设计器”面板 使用“CSS设计器”面板可以创建、编辑和删除CSS样式，并且可以将外部样式表附加到文档中。 打开“CSS设计器”面板 CSS的功能 “CSS设计器”面板 7.1.3　任务知识：CSS设计器面板及样式 3．CSS样式的类型 CSS样式可分为类选择器、标签选择器、ID选择器、内联样式、复合选择器等几种形式。 类选择器 标签选择器 ID选择器 内联样式 复合选择器 7.1.3　任务知识：CSS设计器面板及样式 4．创建CSS样式 使用“CSS设计器”面板可以创建类选择器、标签选择器、ID选择器和复合选择器等CSS样式。新建或打开一个文档。选择“窗口 CSS设计器”命令，弹出“CSS设计器”面板。 “CSS设计器”面板 7.1.3　任务知识：CSS设计器面板及样式 5．应用CSS样式 创建自定义样式后，还要为不同的网页元素应用不同类型的样式，其具体操作步骤如下。 （1）在文档编辑窗口中选择网页元素。 （2）根据选择器类型的不同应用方法不同。 类选择器 ID选择器 7.1.3　任务知识：CSS设计器面板及样式 6．创建和附加外部样式 如果不同网页的不同网页元素需要同一样式时，可通过附加外部样式来实现。首先创建一个外部样式，然后在不同网页的不同HTML元素中附加定义好的外部样式即可。 创建外部样式 附加外部样式 7.1.3　任务知识：CSS设计器面板及样式 7．编辑样式 网站设计者有时需要修改应用于文档的内部样式和外部样式，如果修改内部样式，系统会自动重新设置受它控制的所有HTML对象的格式；如果修改外部样式文件，系统会自动重新设置与它链接的所有HTML文档。 7.1.3　任务知识：CSS设计器面板及样式 8．布局属性 “布局”选项组用于控制网页中块元素的大小、边距、填充和位置属性等。 7.1.3　任务知识：CSS设计器面板及样式 9．文本属性 “文本”选项组用于控制网页中文字的字体、字号、颜色、行距、首行缩进、对齐方式、文本阴影和列表属性等。 7.1.3　任务知识：CSS设计器面板及样式 10．边框属性 “边框”选项组用于控制块元素的边框粗细、样式、颜色及圆角。 7.1.3　任务知识：CSS设计器面板及样式 11．背景属性 “背景”选项组用于在网页元素后加入背景图像或背景颜色。 7.1.4　任务实施 1 2 3