情境八 使用CSS美化网页（教案）-《网页设计与制作》同步教学（电子工业版）

情境八 使用CSS美化网页 课程名称 网页设计与制作 学时 授课时间 授课章节 情境八 使用CSS美化网页 授课班级 授课教师 网页设计与制作课程组 教学目的 专业理论知识 1、 掌握CSS基础语法和选择器、CSS引用方式 2、 掌握CSS常见属性 3、 掌握盒子模型及布局 实际操作技能 1、 掌握CSS基础语法和选择器、CSS引用方式 2、 掌握并能应用CSS背景色 、背景图、字体、文字、列表、表格、内容 3、 掌握盒子模型简介、块级元素和行内元素、盒子模型属性、定位属性 4、 掌握并能应用布局 思政元素目标 1、 引导学生传承并弘扬中国航天精神 2、 培养学生的爱国情操 3、 引导学生发扬无私奉献的精神，增强学生的社会责任感 知识、技能重点 1、 掌握CSS基础语法和选择器、CSS引用方式 2、 掌握盒子模型简介、块级元素和行内元素、盒子模型属性、定位属性 3、 掌握盒子模型及布局 知识、技能难点 1、 掌握CSS基础语法和选择器、CSS引用方式 2、 掌握盒子模型简介、块级元素和行内元素、盒子模型属性、定位属性 3、 掌握盒子模型及布局 教学方法 课前、课中、课后“三课一体”螺旋渗透教学法 教具 学习通APP、腾讯会议、学习强国APP 教学过程设计 8.1 CSS的概念 8.2 模仿型任务讲解 定义样式表 创建样式表 定义 CSS 类型属性 定义 CSS 样式背景属性 定义 CSS 样式区块属性 定义 CSS 样式方框属性 定义 CSS 样式边框属性 定义 CSS 样式列表属性 定义 CSS 样式定位属性 在网页中应用样式表 8.3开放型任务制作 教学过程 【组织教学】 1、准备教学设备、软件等； 2、点名检查学生出勤情况，填写教学情况记录表； 3、发布教学资料 【复习旧课、导入新课】 1、提问：网站中的每个网页都应有统一个风格，如何实现？ 2、展示多个使用CSS设置样式的网页； 3、教学目的：掌握在网页中创建、保存、设置CSS的方法，能够熟练CSS中各项参数的属性，并能够熟练地将CSS应用到网页中。了解CSS扩展设置的使用。 【讲授新课】 知识储备 1.1学习路线，如图8.1 图8.1 CSS学习路线 1.2 知识小天地 什么是CSS CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页面不同的网页的外观和格式。 CSS是一种表现语言，是对网页结构语言的补充，在HTML网页中加入CSS，可以是网页展现更丰富的内容。 CSS的引入方式 CSS样式单的引入方式，通常有以下四种： （1）内联样式（行内样式）：即将style样式直接写在html的标签中，这种方式只对单个元素有效，不会影响整个文件，语法格式如下： <p style="color：red;"> 这是行内样式 </p> （2）嵌入式（内部样式）：即在head标签中间增加style标签，并在style标签中写CSS样式，一般放在head标签中，最后在body中引用。这种写法重用性差，有时还会导致HTML文档过大，在希望某些CSS仅对某个页面有效时，可以采用，语法格式如下： <style type="text/css"> p{ color: red; } </style> （3）引入外部样式（链接式）：将CSS样式写到外部文件中，在html页面中使用link标签链接，一般放在head标签中。这种方法的优点是样式文件与HTML文档分离，一份样式表可以用于多个HTML文档，重用性好，语法格式如下： <link rel="stylesheet" type="text/css" href="css/box.css" /> （4）使用@import引入（导入外部样式）：和链接式的用法相似，但必须放在<style>...</style> 中，语法格式如下： <style type="text/css"> @import url("css/box.css"); </style> CSS的两个特性 第一个特性是“层叠”，所谓的层叠性是指多种CSS样式的叠加,也就是说一个HTML文档可能会使用多CSS样式单，细化到某元素来说，会层叠多层样式单，但生效的总会有一个顺序，即样式生效优先级如下： 内联样式>内部样式>外部样式>浏览器效果 样式冲突遵循的原则是就近原则。将执行离结构最近的样式。样式不冲突，就不会层叠。例如： <style> div{ color:red; } div{ color:blue; } </style> 则后面的颜色会覆盖前面的颜色。 第二个特性是"继承"，继承指的是特定的CSS属性可以从父元素向下传递到子元素。例如： <head> <style> div{ color:red; } </style> </head> <body> <div> <p>继承div的颜色</p> </div> </body> 文字样式属性中color、text-开头的、line-开头的、font-开头的、word-space等都能够，所有的表格属性样式都可以继承；所有关于盒子模型的、定位的、布局的属性都不能继承。 CSS的基本语法 CSS规则集（rule-set）由选择器和声明块组成。 在下列基本语法中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。语法格式如下： 图8.2 css语法 一般来说，一行定义一条样式，每条声明末尾都要加上分号。 CSS对大小写不敏感，但在实际编写中，推荐属性名和和属性值都使用小写字母。例如： p{ line-height: 30px; font-size: 15px; text-indent: 2em; } CSS选择器 CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。可以将 CSS 选择器分为五类： · 简单选择器（根据标签名称、id、类来选取元素） · 组合器选择器（根据它们之间的特定关系来选取元素） · 伪类选择器（根据特定状态选取元素） · 伪元素选择器（选取元素的一部分并设置其样式） · 属性选择器（根据属性或属性值来选取元素） 1.简单选择器 （1）元素选择器 元素选择器是最简单的选择器，通常是HTML的某个标签元素，如p、div、a等，甚至可以是HTML本身，其语法格式如下： 标签名{ 属性名：属性值； … } 如下示例，页面上的所有p标签元素都将居中对齐，并带有红色文本颜色： p { text-align: center; color: red; } （2）id选择器 id 选择器使用HTML元素的 id 属性来选择特定元素。因为元素的id在页面中是唯一的，因此id选择器用于选择一个唯一的元素。 注意，要选择具有特定 id 的元素，请写一个＃号，后跟该元素的 id。语法格式如下： #id{ 属性名：属性值； … } 如下示例，该CSS规则将应用于 id="para1" 的 HTML元素： #para1 { text-align: center; color: red; } （3）类选择器 类选择器选择有特定class属性的HTML元素。 注意，在写类选择器的时候，以.字符开头，后面跟类名。语法格式如下： .类名{ 属性名：属性值； … } 如下示例，所有带有class="center" 的HTML元素将为红色且居中对齐： .center{ text-align: center; color: red; } （4）CSS通用选择器 通用选择器（*）选择页面上的所有的HTML元素，通常用于页面的初始化。语法格式如下： *{ 属性名：属性值； … } 如下示例，下面的 CSS 规则会影响页面上的每个 HTML 元素： * { text-align: center; color: blue; } 2.组合器选择器 CSS 中有四种不同的组合器：后代选择器（空格）、子选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）。 （1）后代选择器 后代选择器匹配属于指定元素后代的所有元素。语法格式如下： 选择器1 选择器2{ 属性名：属性值； … } 如下示例，选择 <div> 元素内的所有 <p> 元素： div p{ background-color: yellow; } （2）子选择器 子选择器匹配属于指定元素子元素的所有元素。语法格式如下： 选择器1>选择器2{ 属性名：属性值； … } 如下示例，选择属于<div>元素子元素的所有<p>元素： div>p{ background-color: yellow; } （3）相邻兄弟选择器 相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。语法格式如下： 选择器1+选择器2{ 属性名：属性值； … } 如下示例，选择紧随<div>元素之后的所有<p>元素： div+p{ background-color: yellow; } （4）通用兄弟选择器 通用兄弟选择器匹配属于指定元素的同级元素后面的所有元素。语法格式如下： 选择器1~选择器2{ 属性名：属性值； … } 如下示例，选择属于 <div> 元素的同级元素后面的所有 <p> 元素： div~p{ background-color: yellow; } 3.伪类选择器 伪类用于定义元素的特殊状态。例如，它可以用于设置鼠标悬停在元素上时的样式、为已访问和未访问链接设置不同的样式、设置元素获得焦点时的样式。 （1）超链接的四种状态 a标签有4种伪类（即对应四种状态）。如下： :link -------“链接”：超链接点击之前 :visited -----“访问过的”：链接被访问过之后 :hover -------“悬停”：鼠标放到标签上的时候 :active ------“激活”： 鼠标点击标签，但是不松手时。 如下示例，设置a标签的状态： /* 未访问的链接 */ a:link { color: #FF0000; } /* 已访问的链接 */ a:visited { color: #00FF00; } /* 鼠标悬停链接 */ a:hover { color: #FF00FF; } /* 已选择的链接 */ a:active { color: #0000FF; } 注意：a:hover必须在CSS定义中的a:link和a:visited之后，才能生效！a:active必须在 CSS 定义中的a:hover之后才能生效，伪类名称对大小写不敏感。 4.伪元素选择器 CSS 伪元素用于设置元素指定部分的样式，它可用于设置元素的首字母、首行的样式，在元素的内容之前或之后插入内容。 选择器 例子 描述 ::after p::after 在每个 <p> 元素之后插入内容。 ::before p::before 在每个 <p> 元素之前插入内容。 ::first-letter p::first-letter 选择每个 <p> 元素的首字母。 ::first-line p::first-line 选择每个 <p> 元素的首行。 ::selection p::selection 选择用户选择的元素部分。 5.属性选择器 为带有特定属性或属性值的HTML元素设置样式。CSS的属性选择器如下表所示： 选择器 例子 描述 [attribute] [target] 选择带有 target 属性的所有元素。 [attribute=value] [target=_blank] 选择带有 target="_blank" 属性的所有元素。 [attribute~=value] [title~=flower] 选择带有包含 "flower" 一词的 title 属性的所有元素。 [attribute|=value] [lang|=en] 选择带有以 "en" 开头的 lang 属性的所有元素。 [attribute^=value] a[href^="https"] 选择其 href 属性值以 "https" 开头的每个 <a> 元素。 [attribute$=value] a[href$=".pdf"] 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。 [attribute*=value] a[href*="hello"] 选择其 href 属性值包含子串 "hello" 的每个 <a> 元素。 6.分组选择器 分组选择器选取所有具有相同样式定义的HTML元素，各个选择器以逗号隔开。语法格式如下： 选择器1,选择器2,选择器3…{ 属性名：属性值； … } 如下示例，h1、h2 和 p 元素采用相同的样式： h1, h2, p { text-align: center; color: red; } 【练一练】id选择器和class选择器 图8.3 代码图 图8.4 效果图 CSS的属性 1.CSS字体属性 常用的CSS字体属性如下表所示： 属性 描述 font 简写（综合）属性。在一条声明中设置所有字体属性。 font-family 规定文本的字体系列（字体族）。 font-size 规定文本的字体大小。 font-style 规定文本的字体样式。 font-variant 规定是否以小型大写字母的字体显示文本。 font-weight 规定字体的粗细。 （1）font-family 该属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。一般以需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。注意，如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"，如下所示。 .p1 { font-family: "Times New Roman", Times, serif; } （2）font-style 该属性主要用于指定斜体文本，此属性可设置三个值： · normal - 文字正常显示 · italic - 文本以斜体显示 · oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少） （3）font-weight 该属性指定字体的粗细，例如： .p1{ font-weight: normal; } .p2{ font-weight: bold; } （4）font-variant 该属性指定是否以small-caps字体（小型大写字母）显示文本。 在small-caps字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。 （5）font-size  该属性设置文本的大小。font-size值可以是绝对或相对大小。 绝对尺寸： · 将文本设置为指定大小，如20px； · 不允许用户在所有浏览器中更改文本大小（可访问性不佳）； · 当输出的物理尺寸已知时，绝对尺寸很有用。 相对尺寸： · 设置相对于周围元素的大小 · 允许用户在浏览器中更改文本大小 注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。 （6）font 为了缩短代码，可以在一个属性中指定所有单个字体属性。font属性是以下属性的简写属性： · font-style · font-variant · font-weight · font-size/line-height · font-family 例如： p{ font: italic small-caps bold 12px/30px Georgia, serif; } 2.CSS文本属性 常用的CSS文本属性如下表所示： 属性 描述 color 设置文本颜色。 direction 指定文本的方向 / 书写方向。 letter-spacing 设置字符间距。 line-height 设置行高。 text-align 指定文本的水平对齐方式。 text-decoration 指定添加到文本的装饰效果。 text-indent 指定文本块中首行的缩进。 text-shadow 指定添加到文本的阴影效果。 text-transform 控制文本的大小写。 text-overflow 指定应如何向用户示意未显示的溢出内容。 unicode-bidi 与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。 vertical-align 指定文本的垂直对齐方式。 white-space 指定如何处理元素内的空白。 word-spacing 设置单词间距。 （1）color 该属性用于设置文本的颜色。颜色由以下值指定： · 颜色名 - 比如 "red" · 十六进制值 - 比如 "#ff0000" · RGB 值 - 比如 "rgb(255,0,0)" 例如： h1 { color: green; } （2）text-align 该属性用于设置文本的水平对齐方式。文本可以左对齐或右对齐，或居中对齐。例如： h1 { text-align: center; } （3）text-decoration 该属性用于设置或删除文本装饰，text-decoration: none;通常用于从链接上删除下划线。例如： a{ text-decoration: none; } （4）text-indent 该属性用于指定文本第一行的缩进，例如： p{ text-indent: 2em; } （5）line-height 该属性用于指定行之间的间距，例如： p.small { line-height: 0.8; } 3.CSS背景属性 常用的背景属性如下表： 属性 描述 background 综合属性，在一条声明中设置所有背景属性的简写属性。 background-attachment 设置背景图像是固定的还是与页面的其余部分一起滚动。 background-clip 规定背景的绘制区域。 background-color 设置元素的背景色。 background-image 设置元素的背景图像。 background-origin 规定在何处放置背景图像。 background-position 设置背景图像的开始位置。 background-repeat 设置背景图像是否及如何重复。 background-size 规定背景图像的尺寸。 【练一练】css的背景颜色 图8.5 css背景颜色代码图 （1）background-image 该属性描述了元素的背景图像。 默认情况下，背景图像会进行水平和垂直方向上的重复显示，以覆盖整个元素实体，且背景图片上可以添加文字，注意区别插入图片。 【练一练】css的背景图片 图8.6 css背景图片代码图 图8.7 运行效果图 思考：如何设置背景图片只在水平（或者垂直）方向重复，如何设置背景图片不重复显示，如何设置背景图片完全覆盖整个页面？ 4.盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 · Margin(外边距)：清除边框外的区域，外边距是透明的。 · Border(边框)： 围绕在内边距和内容外的边框。 · Padding(内边距)：清除内容周围的区域，内边距是透明的。 · Content(内容)： 盒子的内容，显示文本和图像。 盒子模型演示案例代码如下： 图8.8 盒子模型案例演示代码图 图8.9 盒子模型案例演示效果图 5.CSS内边距 元素的内边距是指边框和内容之间的距离，如图8.9中的绿框里面的文字距离绿色边框有25px。CSS内边距属性如下： · padding-top · padding-right · padding-bottom · padding-left 所有内边距属性都可以设置以下值： · length：以 px、pt、cm 等单位指定内边距 · % ：指定以包含元素宽度的百分比计的内边距 · inherit ：指定应从父元素继承内边距 padding取值个数不同，代表的含义也不同。 如果 padding 属性有四个值（padding: 10px 20px 30px 40px;），则代表的是上内边距是10px、右内边距是20px、下内边距是30px、左内边距是40px。 如果 padding 属性有三个值（padding: 10px 20px 30px;），则代表的是上内边距是10px、右左内边距是20px、下内边距是30px。 如果 padding 属性有两个值（padding: 10px 20px;），则代表的是上下内边距是10px、右左内边距是20px。 如果 padding 属性有一个值（padding: 10px;），则代表的是所有四个内边距都是10px。 CSS的外边距（margin）和内边距取值方式是一样的，请大家自己尝试编写代码运行。 6.CSS边框属性 边框是围绕在内容和内边距之间的一条或多条线。内容的内边距和外间距之间的间隙是留给边框的，CSS可以用边框属性来定义它的样式、颜色和宽度等。 边框分为上边框、右边框、下边框、左边框。每个边框有3个属性：样式（或外观）、颜色、以及其宽度（粗细）。 （1）上边框 · border-top-style:样式 · border-top-width:宽度 · border-top-color:颜色 上边框的综合属性为border-top:宽度，样式，颜色；可同时设置所有上边框的样式。 （2）下边框 · border-bottom-style:样式 · border-bottom-width:宽度 · border-bottom-color:颜色 下边框的综合属性为border-bottom:宽度，样式，颜色；可同时设置所有下边框的样式。 （3）左边框 · border-left-style：样式 · border-left-width:宽度 · border-left-color:颜色 左边框的综合属性为border-left:宽度，样式，颜色；可同时设置所有左边框的样式。 （4）右边框 · border-right-style:样式 · border-right-width:宽度 · border-right-color:颜色 右边框的综合属性为border-right：样式，宽度，颜色；可同时设置所有右边框的样式。 其中border：样式，宽度，颜色；为边框的综合属性，可同时设置所有边框的样式。 （5）样式取值如下： · none: 无样式 · hidden: 同样是无样式，主要用于解决和表格的边框冲突 · dotted: 点划线 · dashed: 虚线 · solid: 实线 · double: 双线,两条线加上中间的空白等于border-width的取值； · groove: 槽状 · ridge: 脊状,和groove相反 · inset: 凹陷 · outset:凸出,和inset相反 【练一练】制作不同的边框样式 图8.10 代码图 图8.11 效果图 7．布局、浮动和清除 CSS的float属性规定元素如何浮动。 CSS的clear属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。 float属性用于定位和格式化内容，当某元素通过该属性设置浮动后，不论该元素是行内元素还是块级元素，都会被当作块级元素处理，且该元素会脱离普通流，它后面的元素会网上移动，占有它的位置。float属性可以设置以下值之一： · left：元素浮动到其容器的左侧 · right：元素浮动在其容器的右侧 · none：元素不会浮动（将显示在文本中刚出现的位置）。默认值。 · inherit：元素继承其父级的 float 值 最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。 如下三个盒子，图8.12没有设置浮动的位置，当设置第一个盒子向右浮动的时候，下面的盒子会往上移动，效果如图8.13； 图8.12未添加浮动 图8.13右浮动图 8. clear 和 clearfix clear 属性 clear属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。 clear属性可设置以下值之一： · none：允许两侧都有浮动元素。默认值 · left：左侧不允许浮动元素 · right：右侧不允许浮动元素 · both：左侧或右侧均不允许浮动元素 · inherit：元素继承其父级的 clear 值 使用clear属性的最常见用法是在元素上使用了float属性之后。 在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。 下例将清除向左的浮动。表示在（div的）左侧不允许出现浮动元素： 图8.14清除浮动css代码图 图8.15清除浮动html代码 图8.16清除浮动效果图 9.CSS overflow 属性 overflow 属性规定当内容溢出元素框时发生的事情。 图8.17 overflow代码图 图8.18效果 10.CSS 定位属性 position用于设置元素的定位方式，它的属性值可以设置以下几种： · static：默认值，默认定位方式 · relative：相对定位，让元素相对于自己原来的位置，进行位置调整。 · absolute：绝对定位，相对于上级元素（一般是父元素）进行偏移，且父元素本身必须要有定位（注意不能是static定位），如果父元素没有定位，则继续找上一级祖先元素，一级一级找，直到找到最近的有定位的祖先为参照去偏移，如果都没找到，就会相对根元素html偏移。absolute脱出文档流，不占据本身的位置，类似于浮动。 · fixed：固定定位，就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。 定位的偏移量主要依靠top、right、bottom、left四个属性控制位置，需要注意的是如果水平方向同时设置了left和right，则以left属性值为准，同样，垂直方向同时设置了top和bottom，则以top为准。 【练一练】制作霓虹灯效果 代码提示：给最外层的盒子设置相对定位，则第二个盒子可以使用绝对定位来定位，依次第三个第四个第五个盒子均可以使用绝对定位，且相对上一级的盒子去偏移，想想为什么。 可以尝试为每个盒子添加属性border-radius：50%；看看会出现什么情况。 图8.19 html代码图 图8.20 CSS代码图 图8.21 效果图 z-index用于设置目标对象的定位层序，数值越大，越往上，该属性仅在绝对定位时有效。 【练一练】设置盒子的上下层级关系 图8.23 html代码图 图8.24 CSS代码图 图8.25 效果图 二、模仿型任务讲解 分析案例效果，根据案例需求，通过相应的工具及渠道收集符合要求的素材，并完成资讯表。 表8-1 资讯单 中国航天成就网页设计与制作资讯单 学习情景 制作中国航天成就网页 学习任务 学时 6学时 案例描述 搜集渠道 素材要求 小组成员 参考资料 完成时间 案例分析 2.1中国航天成就网页案例分析 案例学习目标 · 能够熟练建立站点 · 能够熟练使用CSS盒子模型。 · 能够正确的使用浮动和定位进行网页布局。 案例知识要点 · 文字的样式，盒子的浮动 · 定位属性的应用 · 路径的正确表示方法 中国航天不断创造世界奇迹，中国航天在新型火箭首飞、卫星导航系统、月球与深空探测与商业航天等领域取得了重大成就。 本次中国航天成就网页的设计与制作，主旨在通过对中国航天成就的学习，引导传承和弘扬航天精神，激发学生奋发图强。 实现探究 2.2 案例设计思路 在具体实现过程中，选择有代表性的航天成就作为素材，引起学生的学习兴趣，使学生更加有动力去完成网页的设计与制作；同时，网页整体设计主题要突出，内容要丰富，能给人留下深刻印象。 具体页面设计思路如下： 素材整理 页面设计 编码实现 测试运行 【思考】 （1）如何使用图片标签在网页中正确的插入图片？ （2）如何合理的使用定位属性？ （3）如何设置盒子的浮动？ 三、实操示范 操作步骤 Step01 打开开发工具“HBuilder X”，选择“文件”------> “新建”------>“项目”，打开如下图所示对话框： 图8.26 新建项目 写好相应的项目名称后，选择基本的HTML项目，点击创建，即可完成项目的创建。 Step02 将课前搜集好的图片素材，复制粘贴到新建项目的“img”文件夹中，如下图所示 图8.27 图片存放 Step03 分析案例效果图，首先添加一级标题；其次添加盒子，上面左右两个子盒子，第二行三个盒子，并给每个盒子添加class属性。代码如下图所示： 图8.28 代码 Step04 　给网页添加背景图片，并给每个盒子设置白色背景色和宽高，注意，每一行的盒子的样式是一样的，所以使用共有的class名设置样式（如.top，.middle），在单独给第一行的两个盒子设置左外边距（如.top01，.top02），代码如图： 图8.29 CSS代码图 图8.30 效果图 Step05 第一行最左边的盒子，需要添加一个图片div和一段文字的div。代码如下图所示： 图8.31代码图 其中，这两个div的样式代码如下图所示，注意，因文字div使用了绝对定位，且后面所有文字盒子的定位都是绝对定位，为方便定位，给其父元素共有的类名（class=“.top”）添加一个相对定位属性（position：relative），就可以让文字盒子相对自己的父元素去偏移定位。 图8.32 CSS代码图 图8.33 效果图 Step06 第一行左右两个盒子的图片div和文字div可以共用相同的代码（见图8.32），大家想想为什么，第二行三个盒子的图片div和文字div可以也共用相同的代码，只需要把图8.32代码中的数值修改即可，注意有文字溢出，需要设置溢出属性。最终效果图如下图所示： 图8.34 案例最终效果图 四、学生完成开放型任务，教师巡回指导 开放型任务的任务卡如表8-2所示 表8-2 开放型任务卡 任务编号 08-2 任务名称 使用CSS美化网页 网页主题 中国航天成就网 开放型任务描述 本次任务要求使用CSS来美化网页，任务如下： 1. 创建一个命名为“中国航天成就网”的站点 2. 设置好站点目录 3. 使用“文件”面板在站点根目录下创建一个介绍泰山的网页“index.html” 4. 将网页标题设置为“中国航天成就网” 5. 创建并设置CSS 6. 将CSS应用到网页中美化网页 【课堂小结】 本次任务介绍了 CSS 样式的概念、特点，并介绍了定义样式、编辑样式以及修改样式的方法。 CSS 样式表与“仅对该文档”的CSS 样式有较大区别，前者被创建后将保存为一个独立的文件，当需要使用时可以向网页里导入CSS 样式表，从而达到应用CSS 样式的目的。熟悉CSS的各种属性，将使用户编辑页面时更加得心应手。 【布置作业】 1. 什么是CSS？使用CSS 定义网页的风格有什么好处？ 2. 在Adobe Dreamweaver CS6 中有几种方法可以设置CSS 属性? 3. 怎样创建并应用CSS 样式？ 4. CSS 样式表有何特点？ 【创新型任务】 分小组选择制作科技强国、红色之旅、绿水青山为主题的CSS布局与美化网页。通过推送学习强国学习视频的绿水青山栏目、看科技栏目、看党史的红色故事栏目，搜集相关模板和库素材，分小组设计科技强国、红色之旅、绿水青山的使用模板和库制作网页，渗透革命文化和社会主义先进文化教育、生态文明教育多个“思政元素线”。培养学生不断自我完善的工匠精神和创新精神。 教学评价 考核要点 考核内容 标准分 计分 知识考核 (1)课前观看学习通微视频及完成微课下方进阶练习题 20   (2)学会设计页面的布局结构 (3)学会创建页面布局样式 (4)学会创建美化页面元素的样式 能力考核 (5)学会插入Div标签对网页的页面进行布局 30   (6)学会在使用Div+CSS布局的网页中输入文字和插入各种页面元素 思政考核 (7)考查学生的态度端正、时间观念强等方面综合评价 20   (8)搜索科技强国、红色之旅、绿水青山的素材，制作对应的网页，体现革命文化、社会主义先进文化、生态文明等方面进行评价分析 30   总计 100   评价方式 自我评价 小组评价 教师评价 考核得分       学科网（北京）股份有限公司 $$