边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 08.ppt

本章简介： 层叠样式表（CSS）是W3C组织批准的一个辅助HTML设计的新特性，能保持整个HTML的统一外观。CSS的功能强大、操作灵活，用CSS改变一个文件就可以改变数百个文件的外观，而且个性化的表现更能吸引访问者。 * 第8章　CSS样式 课堂学习目标 CSS样式的概念 CSS样式 样式的类型与创建 编辑样式 CSS的属性 过滤器 8.1　儿童教育网页 案例分析 设计理念 操作步骤 相关工具 8.1.1　案例分析 对儿童进行德育、智育、体育等方面的培养和训练，是提高人口素质的重要环节。本例将制作儿童教育网页，在设计上希望体现出活泼欢快、寓教于乐的气氛。 8.1.2　设计理念 在网页设计、制作过程中，背景采用嫩绿色，表现出儿童茁壮成长和积极向上的精神。画面中的树寓意着有了深厚的根基，才能勇往直前，前途光明。导航栏放置在页面的上方，方便用户浏览和切换。下方是智力开发菜单和相关信息，便于广大家长学习和掌握培养孩子、教育孩子的科学知识。 儿童教育网页效果图 8.1.3　操作步骤 1 2 3 8.1.4　相关工具 CSS样式概念 CSS是Cascading Style Sheet的缩写，一般译为“层叠样式表”或“级联样式表”。层叠样式表是对HTML3.2之前版本语法的变革，将某些HTML标签属性简化。 层叠样式表是HTML的一部分，它将对象引入到HTML中，可以通过脚本程序调用和改变对象的属性，从而产生动态效果。 2.“CSS样式”控制面板 使用“CSS样式”控制面板可以创建、编辑和删除CSS样式，并且可以将外部样式表附加到文档中。 打开“CSS样式”控制面板 样式表的功能 3.CSS样式的类型 层叠样式表是一系列格式规则，它们控制网页各元素的定位和外观，实现HTML无法实现的效果。在Deamweaver CS3中可以运用的样式分为重定义HTML标签样式、CSS选择器样式和自定义样式3类。 重定义HTML标签样式 CSS选择器样式 自定义样式 4.创建重定义HTML标签样式 当重新定义某HTML标签默认格式后，网页中的该HTML标签元素都会自动变化。因此，当需要修改网页中某HTML标签的所有样式时，只需重新定义该HTML标签样式即可。 打开“新建CSS规则”对话框 重新定义HTML标签样式 5.创建CSS选择器 若要为具体某个标签组合或所有包含特定Id属性的标签定义格式，只需创建CSS选择器而无须应用。一般情况下，利用创建CSS选择器的方式设置链接文本的4种状态，分别为鼠标指针点击时的状态“a:active”、鼠标指针经过时的状态“a:hover”、未点击时的状态“a:link”和已访问过的状态“a:visited”。 重定义链接文本的状态 某个特定的网页对象定义样式 6.创建和应用自定义样式 若要为不同网页元素设定相同的格式，可先创建一个自定义样式，然后将它应用到文档的网页元素上。 创建自定义样式 应用样式 7.创建和引用外部样式 如果不同网页的不同网页元素需要同一样式时，可通过引用外部样式来实现。首先创建一个外部样式，然后在不同网页的不同HTML元素中引用定义好的外部样式。 创建外部样式 引用外部样式 8.编辑样式 网站设计者有时需要修改应用于文档的内部样式和外部样式，如果修改内部样式，则会自动重新设置受它控制的所有HTML对象的格式；如果修改外部样式文件，则自动重新设置与它链接的所有HTML文档。 编辑样式有以下3种方法。 （1）先在“CSS样式”控制面板中单击选中某样式，然后单击位于面板底部的“编辑样式”按钮，弹出 “.aa的CSS规则定义（在xj.css中）”对话框。根据需要设置CSS属性，单击“确定”按钮完成设置。 （2）在“CSS样式”控制面板中用鼠标右键单击样式，然后从弹出的快捷菜单中选择“编辑”命令，弹出“.aa的CSS规则定义（在xj.css中）”对话框。根据需要设置CSS属性，单击“确定”按钮完成设置。 （3）在“CSS样式”控制面板中选择样式，然后在“CSS属性检查器”面板中编辑它的属性。 8.1.5 实战演练-女士香水网页 使用“CSS样式”命令改变文字的大小和行距，使用“项目列表”按钮制作文字列表效果，使用“属性”面板改变图像的对齐方式。 效果图 8.2　时尚彩妆网页 案例分析 设计理念 操作步骤 相关工具 8.2.1　案例分析