网页设计与制作案例教案—Dreamweaver cs6电子教案-第7章.pptx

网页设计与制作案例教程

电子教案

本章学习目标了解CSS样式表创建、编辑CSS样式掌握对文字、表格单元格等设置CSS样式的方法第七章CSS样式表的使用

教学案例1：“冬至的由来”案例描述分析为了使网页具有统一的风格，通常使用CSS样式表来设置网页。一般来说，CSS样式的设置放置在制作网页的第一步，边制作边设置CSS样式也是可以的，然后将CSS样式应用到网页中。

实现步骤1.?创建“冬至的由来”站点并新建网页创建站点新建index.html网页

2.?对网页进行布局

3.?设置网页的CSS样式设置body的CSS样式设置div的CSS样式

教学案例2：热销汽车专场实现步骤1.?创建“冬至的由来”站点并新建网页2.?对网页进行布局3.?设置网页主体的CSS样式4.?设置导航栏的CSS样式5.?设置Banner图像下方导航的CSS样式6.?设置“爆款汽车”等栏目标题CSS样式7.?设置“爆款汽车”栏目图像的CSS样式8.?设置“汽车关注排行榜”和“汽车销售排行榜”项目中文字CSS样式9.?保存所有设置

知识准备一、初识CSS简介层叠样式表（CSS）是网页格式设置规则，Web页面内容的外观由它们控制。样式可以定义HTML网页元素如何显示，通常被保存在HTML文档之外的文件中。1.使用CSS的优势其特点可以归结为以下几点：（1）内容与表现分离。有了CSS，网页的内容与表现就可以分开了（2）表现的统一。可以使网页的表现非常统一，并且容易修改（3）CSS可以支持多种设备，如手机、PDA、打印机、电视机、游戏机等（4）使用CSS可以减少网页的代码量，增加网页的浏览速度，减少硬盘容量

知识准备2.CSS类型样式表允许以多种方式设置样式信息。样式可以规定在单个的HTML元素中，或在HTML页的头元素中，或在一个外部的CSS文件中，甚至可以在同一个HTML文档内部引用多个外部样式表。(1)外部样式表样式可以应用于很多页面，并且外部样式表可以在任何文本编辑器中进行编辑。样式表以.css扩展名进行保存。(2)内部样式表当单个文档需要特殊的样式时，可以使用内部样式表。(3)内联样式样式在一个元素上单独应用，但会将表现和内容混杂在一起，因此不推荐使用。

知识准备3.CSS的基本语法CSS规则集由选择器和声明块组成。选择器指向需要设置样式的HTML元素，声明块包含一条或多条用分号分隔的声明，每条声明都包含一个CSS属性名称和一个值，以冒号分隔。CSS规则集组成部分

知识准备二、CSS样式的创建与应用1.CSS样式面板CSS样式面板可用于跟踪影响当前所选页面元素的CSS规则和属性，或影响整个文档的规则和属性，还可以在不打开外部样式表的情况下修改CSS属性。CSS样式面板可以使用户从复杂的多种CSS样式中解脱出来，从而轻松地完成一个网页的内容格式化。(1)打开CSS面板的方法方法1:选择主菜单“窗口”“CSS样式”命令。方法2:按【Shift+F11】组合键。方法3:单击“属性”面板的CSS分类中的CSS面板按钮。

知识准备(2)CSS面板的结构CSS样式面板如图所示，分为上、下两部分，上半部显示规则列表，下半部显示所选定规则的属性。规则又有“全部”和“当前”两种查看方式，单击CSS面板中的“当前”按钮，可以显示当前所选中内容的CSS摘要，而与所选内容无关的属性会以删除线的形式出现，这个功能对快速确认应用于当前选定元素的CSS属性十分有帮助，在列表中可以方便地查看哪种样式中的哪种属性被应用到当前选中的元素。

知识准备2.创建CSS样式方法1:选择“格式”→“CSS样式”→“新建”命令。方法2:在“CSS样式”面板中，单击面板右下侧的“新建CSS规则”按钮。方法3:在“文档”窗口中选择文本，从CSS属性检查器的“目标规则”弹出菜单中选择“新建CSS规则”，然后单击“编辑规则”按钮，或从属性检查器中选择一个选项(例如单击“粗体”按钮)，以启动一个新规则。

知识准备3.设置CSS属性在分类的菜单栏下，共有8种CSS样式类型:类型、背景、区块、方框、边框、列表、定位、扩展。每种类型的含义如下:类型:对文本的属性进行设置，如文字的字体、大小、颜色等。背景:对网页背景进行设置，如修改网页背景颜色，设置背景图像等。区块:对文本对齐和文字缩进等属性进行设置。方框:调整文本边距等。边框:对边框的属性进行设置。列表:对列表项目进行设置。定位:对网页中的元素的定位进行设置。扩展:对鼠标形状等视觉效果进行设置。

知识准备三、CSS布局在CSS布局时，需要针对不同的元素使用不同的“块”元素进行包含，通过CSS定义这些“块”元素的位置就能快速组合成页面画面。而“块”元素的使用频度最高的就是“DIV”标签。通过“