Dreamweaver网页制作基础教程项目九CSS+Div美化网页知识讲稿.pptVIP

王焕杰 电话 邮箱:cnsyjsj@163.com 沈阳市信息工程学校 项目九 CSS+Div美化网页 核心技术 ? 了解CSS样式的概念及作用 ? 掌握CSS样式在网页中的应用 ? 使用CSS和Div标签来美化网页 任务目标 ? 任务一：CSS样式表的创建及应用 ? 任务二：CSS+Div布局网页 能力目标 ?创建CSS样式表 ?CSS样式表的属性设置 ?链接外部样式表 ?CSS+Div布局网页 项目背景 基本网页构建完毕后，需要统一网站中所有网页的风格。一般来说，在同一个网站的所有页面中，相同类型的网页元素具有相同的属性，如正文的字体、字体大小、字体颜色、边框设置等。如何使网页变得更加绚丽多彩，如何更精确地对网页中的内容进行格式化控制，以达到整个网站的风格和谐统一，这就需要利用CSS样式了。 项目分析 CSS是一种制作网页的技术，已成为网页设计必不可少的工具之一。它可以更加灵活地控制网页中的文字字体、颜色、大小、间距等属性；可以灵活地控制网页中各个元素的位置；并能方便地为网页中的元素通过过滤器设置特效；可以与脚本语言结合，从而使网页中的元素产生各种动态效果；简化了代码，提高下载速度。 本项目包含： 创建新的CSS样式 设置CSS样式 运用CSS样式 利用CSS+Div布局美化网页 任务一 CSS样式表的创建及应用 任务描述 在网站的设计中，为使网站中页面风格统一，也便于后期对网页的风格进行更改，经常会用到CSS技术，要求网站管理员对学校网站中的一部分网页使用CSS技术进行修改。为构建好的“育才学校网站”中的“学校简介”网页设置统一样式，效果如图9.1.1所示。 图9.1.1 网页的浏览效果 知识准备 CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。 在设计网页时，常常需要对网页中各种元素的属性进行设置。一般来说，在同一个网站的所有页面中，相同类型的网页元素都具有相同的属性，如网页中正文的字体、字体大小和字体颜色，以及图片的边框及颜色等都是一样的。但在制作过程中若对各个网页进行格式设置会做许多重复工作，而且容易出错，当需要对属性进行修改时，也要逐一进行修改。 任务实施 图9.1.3 新建CSS规则 步骤1：单击“CSS样式”面板底部的“新建 CSS规则”按钮，在弹出的对话框中选择“高级（ID、伪类选择器等）”单选按钮，从“选择器”下拉列表中选择“a：link”，并将“a：link”改为“a”，“定义在”选择“新建样式表文件”，然后单击“确定”按钮，如图9.1.3至图9.1.5所示。 ?利用选择器样式设置导航栏 新建 CSS规则 图9.1.4 设置CSS规则类型 图9.1.5 设置选择器及保存位置 步骤2：在弹出的“保存样式表文件为”对话框中，将样式表文件以“ys”为文件名保存在站点文件夹中，如图9.1.6所示。 图9.1.6 “保存样式表文件”对话框 步骤3：在弹出的“a的CSS规则定义”对话框中，选择左侧的“类型”分类，在右侧的选项中设置相关属性，其中设置字体为“黑体”，大小为“10”点数（pt），颜色为“#FFFFFF”（白色），修饰为“无”，然后单击“确定”按钮，如图9.1.7所示。 图9.1.7 设置样式属性 步骤4：单击“CSS样式”面板底部的“新建CSS规则”按钮，在弹出的对话框中选择“高级（ID、伪类选择器等）”单选按钮，从“选择器”下拉列表中选择“a：hover”，“定义在”选择“ys.css”，然后单击“确定”按钮，如图9.1.8所示。 图9.1.8 新建CSS规则 步骤5：在弹出的“a：hover CSS规则定义”对话框中，选择左侧的“类型”分类，在右侧的选项中设置相关属性，其中设置字体为“黑体”，大小为“10”点数（pt），颜色为“#FFFFFF”（白色），修饰为“无”，然后单击“确定”按钮，如图9.1.9所示。 图9.1.9 设置CSS属性 步骤6：在“a：hover的CSS规则定义”对话框中，选择左侧的“扩展”分类，在右侧的“光标”下拉列表内选择“hand”，单击“确定”按钮，如图9.1.10所示。该选项将使鼠标悬停在超级链接文本上时，显示为手形。 图9.1.10 设置扩展属性 步骤7：选中导航栏的文字，在“属性”面板中设置超级链接，设置后的民航效果如图9.1.11所示。 图9.1.11 设置后的导航效果 步骤1：单击“CSS样式”面板底部的“新建CSS规则”按钮，在弹出的对话框中选择“标签（重新定义特定标签的外观）”单选按钮，从“标签”下拉列表中选择“body”，“定义在”选择“ys.css”，然后单击“确定”按钮，如图9.1.1