photoshop图形图像处理项目6 使用CSS美化网页效果电子教案 中职 高教版 网页制作项目实训教程.doc

《photoshop图形图像处理项目6 使用CSS美化网页效果电子教案 中职 高教版 网页制作项目实训教程.doc》由会员分享，可在线阅读，更多相关《photoshop图形图像处理项目6 使用CSS美化网页效果电子教案 中职 高教版 网页制作项目实训教程.doc（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、学科教案本Teaching Plan20 年20年学年度学期The (1st/2na)Semester of the Academic Year from 20 to 20_网页制作项目实训教程 学校（School） 学科（Subject） _年级（Grade） _教师（Teacher） 网页制作项目实训教程目录注意：按住Ctrl键后单击每个任务即可跳转到对应的教案单击按钮可返回目录页面设置参数为：纸张：B5 页边距左：1.5页边距右：1.5项目6使用CSS美化网页效果任务1活动1 使用行内样式美化网页活动2 使用内嵌样式表美化网页任务2活动1 认识文本相关CSS属性活动2 使用CSS样式设置

2、网页背景任务3活动1 使用Div+CSS布局网页活动2 使用Div+CSS制作图片展示页任务4活动1 认识背景相关CSS属性活动2 制作淘宝登录页面教学课题任务1 活动1 使用行内样式美化网页课题类型理论+实作课时安排2上课时间教学目标1.了解CSS样式的分类2.掌握CSS样式规则设置教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.框架网页的创建与保存。2.框架网页的链接。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求对网页文件“task6-1.html”的主标题进行CSS样式的设置及应用，文件另存为task6-1-1.html，效果如下图所

3、示。二、师生讨论学习新知识1、CSS的设置启动Dreamweaver CS6，按【Shift+F11】组合键或【窗口】菜单的【CSS样式】可打“CSS样式”面板设置CSS样式表。2、CSS的分类CSS层叠样式表按可以分为三种：内联样式表（行内样式表）、嵌入样式表和外部样式表。l 内联式样式表：是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中。l 嵌入式样式表：通常包含在HTML，文档的头部，即head元素中，并且有一个专门的元素style来标记这种样式表。l 外部式样式表：是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展

4、名。样式在样式表文件中定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素。在Dreamweaver CS6中，内联样式表（行内样式表）可以直接通过属性面板的CSS样式属性中的“目标规则”“新内联样式”进行创建。内嵌样式表和外部样式表一般都通过点击“CSS样式”面板的新建按钮来创建。三、教师演示活动实施过程并让学生完成活动任务1、新建站点（1）把教程附送的素材文件夹“Chapter06”放在计算机D盘根目录下。（2）依次单击“站点”-“新建站点”菜单命令，打开“站点设置对象”对话框。在打开的“站点设置对象”对话框中设置站点名称为“项目6”，点击“本地站点文件夹”文本框后面的“浏览文

5、件夹”按钮，在打开的对话框中选择 “D:Chapter06素材文件”。（3）单击“保存”按钮，完成站点的创建操作。2、编辑主标题（1）在“文件”面板中双击打开网页文件 “任务1 task6-1.html”，然后在主标题“Amazon亚马逊案例分析”后单击插入光标。（2）在属性面板中选择CSS样式 ，下拉目标规则对话框（红色字部分改为：“目标规则”下拉框），选择“” 单击 打开CSS规则定义对话框进行属性设置。3、另存网页文件为“task6-1-1.html”并在浏览器中浏览网页效果。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果阅读知识窗：CSS的设置；CSS的分类演示：教师演示活动

6、实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务1 活动2 使用内嵌样式表美化网页课题类型理论+实作课时安排2上课时间教学目标1.掌握CSS规则的类型2.掌握如何应用CSS样式教学重点1、2教学难点1辅助资源课件、多媒体、网络复习引入1.CSS的分类。2.CSS的设置。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求对网页文件“task6-1-1.html”进行CSS样式的设置及应用，文件另存为task6-1-2.html，效果如下图所示。二、师生讨论学习新知识1、CSS规则类型l 类（可应用于任

7、何HTML元素）：CSS类选择器名称以英文句点（.）开头。l ID（仅应用于一个HTML元素）：ID选择器又可以称为标识选择器，它的名字以英文井号（#）开头，这种选择器样式一般在页面中只用在一个元素上。l 标签（重新定义HTML元素）： “标签（重新定义HTML元素）”，可以实现用CSS重新定义HTML标签的外观的功能。l 复合内容（基于选择的内容）：例如，针对标签、标签、标签同时进行了CSS规则定义。2、CSS样式的应用套用CSS样式表的方法主要有三种：（1）在“属性”面板中选择应用特定的样式打开“属性”面板，在“类”下拉列表框中列出了已经定义的一些类规则。在ID下拉列表框中列出了已经定义的

8、一些ID规则。（2）利用“标签选择器”选择样式首先需要在“标签选择器”上选定一个标签，在标签上右击，在弹出的快捷菜单中选择“设置类”“mycss1”命令，则可以快速把已经定义的mycss1样式指定给标签。 （3）使用快捷菜单可以从快捷菜单中直接给对象指定一个样式。首先选中对象，右击，在快捷菜单中指定样式。三、教师演示活动实施过程并让学生完成活动任务1、打开“活动1”完成的网页文件“task6-1-1.html”2、在“CSS样式”面板单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“标签”，选择器名称通过下拉列表选择为“h4”，规则定义为“仅限该文档”，然后单击“确定”进入“CS

9、S规则定义”对话框进行属性设置，完成后观看网页小标题自动套用样式后的变化。3、在“CSS样式”面板单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“标签”，选择器名称通过下拉列表选择为“body”，规则定义为“仅限该文档”，然后单击“确定”进入“CSS规则定义”对话框进行属性设置，完成后观看自动套用样式后网页背景、页边距等的变化。4、继续在“CSS样式”面板单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“类”，选择器名称为“aa”，规则定义为“仅限该文档”，然后单击“确定”进入“CSS规则定义”对话框进行属性设置。5、选中网页文档一个段落的内容，单击鼠标右键，选择

10、快捷菜单的“CSS样式”-“.aa”实现类样式的应用。6、再次选中网页文档另个段落的内容，打开“属性”面板，在“类”下拉列表框中选中已经定义的类规则“aa” 实现类样式的应用。9、网页文件另存为“task6-1-2.html”并在浏览器中浏览网页效果。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果阅读知识窗：CSS规则类型；CSS样式的应用演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务2 活动1 认识文本相关CSS属性课题类型理论+实作课时安排2上课时间教学目标1.了解CSS规则定义中的属性2.掌握文本

11、相关的CSS属性教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.CSS规则的类型。2.CSS样式的应用。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求对网页文件“task6-2.html”的文本进行CSS样式的设置及应用，文件另存为task6-2-1.html，效果如下图所示。二、师生讨论学习新知识1、CSS规则定义中的属性概述2、CSS规则定义中与文本相关属性详解（1）类型：类型选项主要是对文字的字体大小、颜色、效果等基本样式进行设置。可只对要改变的属性进行设置，不改变的属性就使之为空。这些属性包括：Font-family（字体）、Font

12、-size（字体大小）、Font-style（字体样式）、Line-height（行高）、Text-decoration（修饰）、Font-weight（字体粗细）、Font-variant（变体）、Text-transform（大小写）、Color（颜色）。（2）区块：区块选项是设置对象文本文字间距、对齐方式、上标、下标、排列方式、首行缩进等。属性包括：Word-spacing（单词间距）、Letter-spacing（字母间距）、Vertical-align（垂直对齐）、Text-align（文本对齐）、Text-indent（文字缩进）、White-space（空格）、Display（显

13、示）。三、教师演示活动实施过程并让学生完成活动任务1、导入“项目六”站点，在 “文件”面板中双击打开网页文件 “任务2 task6-2.html”，2、在“CSS样式”面板单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“类”，选择器名称设为“style1”，规则定义为“仅限该文档”，然后单击“确定”进入“CSS规则定义”对话框进行属性设置。3、选中网页文档的标题“独处的美丽”，然后单击鼠标右键，选择快捷菜单的“CSS样式”-“style1”实现类样式的应用。4、在“CSS样式”面板中单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“类”，选择器名称设为“style

14、2”，规则定义为“仅限该文档”，然后单击“确定”进入“CSS规则定义”对话框进行属性设置。5、鼠标单击网页正文部分，在“标签选择器”上选定标签，在标签上右击，在弹出的快捷菜单中选择“设置类”-“style2”命令，把已经定义的style2样式指定给标签。6、在“CSS样式”面板中单击“新建”按钮，打开“新建CSS规则”对话框，选择器类型选择“标签”，选择器名称设为“body”，规则定义为“仅限该文档”，然后单击“确定”进入“CSS规则定义”对话框进行属性设置.7、观看body样式自动套用效果，网页文件另存为“task6-2-1.html”并在浏览器中浏览网页效果。布置任务：让学生明确本次课的内

15、容讨论：如何实现该案例效果阅读知识窗：CSS规则定义中的属性概述；文本相关CSS属性演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务2 活动2 使用CSS样式设置网页背景课题类型理论+实作课时安排2上课时间教学目标1.了解CSS背景样式2.掌握使用CSS背景样式控制图像教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.CSS属性概述。2.文本相关CSS属性。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求打开“task6-2-1.html”文件，使用CSS样式设置网页

16、文档的背景图像，效果如下图所示。二、师生讨论学习新知识CSS规则定义中与背景相关属性详解：背景：背景选项主要是对元素背景进行设置，包括背景颜色、背景图像、背景图像控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。背景属性包括：Background-color（背景颜色）、Background-image（背景图像）、Background-repeat（重复）、Background-attachment（附件）、Background-position（水本位置）、Background-position（垂直位置）。三、教师演示活动实施过程并让学生完成活动任务1、在Drea

17、mweaver CS6打开“项目六”站点下的网页文件“task6-2-1.html”。2、在“CSS样式”面板中双击样式“style1”，进入“style1的CSS规则定义”对话框。3、选择“背景”进行属性设置，观看网页更新后的变化效果。4、在“CSS样式”面板单击选中样式“style2”，点击“编辑”按钮，进入“style2的CSS规则定义”对话框。5、选择“背景”进行属性设置。6、网页文件另存为“task6-2-2.html”并在浏览器中浏览网页效果。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果阅读知识窗：CSS背景相关属性演示：教师演示活动实施过程实训活动：学生练习及点评作业

18、布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务3 活动1 使用Div+CSS布局网页课题类型理论+实作课时安排2上课时间教学目标1.了解盒子模型的概念2.掌握盒子模型的相关属性教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.CSS背景样式。2.使用CSS控制图像显示效果。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求使用Div+CSS完成微信首页的布局与制作，如下图所示，完成后以“task6-3-1.html”为文件名保存到“task6-3”文件夹。二、师生讨论学习新知识1、盒子模型（Box Model）盒子模型，

19、又叫盒模型，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子，比如说，一张图片里并不能放东西，它自己就是自己的内容。2、盒子模型的属性一个盒子中主要的属性就5个：width、height、padding、border、margin。3、外边距（margin）用于控制元素与元素之间的距离，可设置盒子模型上、右、下、左4个方向的外边距值。4、内边距（padding）用于控制内容与边框之间的距离，可设置盒子模型上、右、下、左4个方向的内边距值，设置方式与margin属性相同。三、教师演示活动实施过程并让学生完成活动任务1、打开Dre

20、amweaver CS6并新建一个HTML文档，切换至“设计”视图，更改文档标题为“微信，是一个生活方式”，以“task6-3-1.html”为文件名保存到“task6-3”文件夹。2、在“属性”面板中单击“页面属性”按钮，打开“页面属性”对话框，在“外观”选项卡中设置相应属性。3、依次单击“插入”-“布局对象”- “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”下拉列表框中选择“在插入点”，在“ID”框中输入“nav”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框“规则定义”下拉列表框中选择“仅限该文档”，然后单击“确定”按钮，打开“#nav 的CSS规

21、则定义”对话框。5、在“#nav 的CSS规则定义”对话框中，按要求设置CSS样式，然后单击“确定”按钮，并将“此处显示 id nav 的内容”文字删除，插入“top.jpg”图片，完成顶部导航栏的布局制作。6、依次单击“插入”- “布局对象”- “Div标签”菜单命令，打开“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在标签之后”，在第2个下拉列表框中选择“”，在“ID”名框中输入“banner”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中单击“确定”按钮，打开“#banner 的CSS规则定义”对话框，按要求设置CSS样式，然后单击“确定”按钮，并将

22、“此处显示 id banner 的内容”文字删除，插入“banner.jpg”图片，完成banner部分的布局制作。7、参照第6步，完成“#main”与“#bottom”两个区域的布局操作，按要求完成相应CSS样式设置，并在“#bottom”中插入“bottom.jpg”图片。8、依次单击“插入”- “布局对象”- “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在开始标签之后”，在第2个下拉列表框中选择“”，在“ID”名框中输入“left”，然后单击“确定”按钮。9、选择“此处显示 id left 的内容”文字，在“CSS样式”面板中单击“新建 C

23、SS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#main #left 的CSS规则定义”对话框，按要求设置CSS样式，将“此处显示 id left 的内容”文字删除，并在其中插入图片“con-left.jpg”。10、依次单击“插入”- “布局对象”- “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”项第1个下拉列表框中选择“在结束标签之前”，在第2个下拉列表框中选择“”，在“ID”名框中输入“right”，然后单击“确定”按钮。11、选择“此处显示 id right 的内容”文字，在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开

24、的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#main #right 的CSS规则定义”对话框，按要求设置CSS样式，将“此处显示 id right 的内容”文字删除，并在其中插入图片“con-right.jpg”。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果阅读知识窗：盒子模型的属性；外边距；内边距演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务3 活动2 使用Div+CSS制作图片展示页课题类型理论+实作课时安排2上课时间教学目标1.了解什么是块级元素，什么是行内元素2.掌握与Div+C

25、SS布局网页相关CSS属性：display、float、clear、overflow。教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.盒子模型的相关属性。2.外边距（margin）与内边距（padding）。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求使用Div+CSS完成图片展示页的制作，如下图所示，完成后以“task6-3-2.html”为文件名保存到“task6-3”文件夹。二、师生讨论学习新知识1、标准文档流标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从

26、左至右的顺序排放元素。标准文档流分两类：l 块级元素（block level）：以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满，占有独立空间，如div标签就是一个通用的块级元素。l 行内元素（inline）：各个元素之间横向排列，到最右端自动折行，标签本身不占有独立的区域，仅仅在其他元素的基础上指定了一定的范围，如span标签就是一个通用的行内元素。2、display属性用于指定HTML标签的显示方式，常用的属性值有3个：block、inline、none。3、float属性用于定义元素的浮动方向，其属性值有3个：left、right、none。4、clear属性用于规定元素

27、的哪一侧不允许其他浮动元素，常用于清除浮动带来的影响和扩展盒子高度，其属性值有4个：left、right、both、none。5、overflow属性用于处理盒子中的内容溢出，overflow需要必须配合width属性使用，其属性值有4个：visible、hidden、scroll、auto。三、教师演示活动实施过程并让学生完成活动任务1、打开Dreamweaver CS6并新建一个HTML文档，切换至“设计”视图，更改文档标题为“2019最新主题样片”，以“task6-3-2.html”为文件名保存到“task6-3”文件夹。2、依次单击“插入”-“布局对象”- “Div标签”菜单命令，打开

28、的“插入Div标签”对话框，在“插入”下拉列表框中选择“在插入点”，在“ID”框中输入“content”，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框“规则定义”下拉列表框中选择“仅限该文档”，然后单击“确定”按钮，打开“# content 的CSS规则定义”对话框，按要求设置CSS样式。3、删除“此处显示 id content 的内容”文字，输入“最新主题样片”，并将其设置为“标题3”格式。4、将光标定位到“最新主题样片”文字中，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#content h3

29、的CSS规则定义”对话框，按要求设置CSS样式。5、切换到“代码”视图，在“最新主题样片”文字两端添加标签。再切换到“设计”视图，将光标定位到“最新主题样片”文字中，单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#content h3 span 的CSS规则定义”对话框，按要求设置CSS样式。6、在“最新主题样片”文字后面单击，然后按回车键另起一行，插入“pic-1.jpg”图片，并为图片添加空链接，按回车键另起一行，插入“pic-2.jpg”图片，并为图片添加空链接，重复上述操作，将其余10张图片插入到页面中。选择刚刚插入

30、的所有图片，在“属性”面板单击“项目列表”按钮将其转换为项目列表。7、选择任意一张图片，在“标签选择器”中单击“”按钮，在“CSS样式面板”中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#content ul 的CSS规则定义”对话框，按要求设置CSS样式。8、选择任意一张图片，在“标签选择器”中单击“”按钮，在“CSS样式面板”中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#content ul li 的CSS规则定义”对话框，按要求设置CSS样式。9、选择任意一张图片，在“标签选择器”中单击

31、“”按钮，在“CSS样式面板”中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框的“选择器名称”框中输入“#content ul li.first”，然后单击“确定”按钮，打开“#content ul li.first 的CSS规则定义”对话框，按要求设置CSS样式。10、选择第1张图，在“标签选择器”中单击“”按钮，在“属性”面板中“类”下拉列表框中选择“first”。参照同样的方法设置第5张图与第9张图。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果阅读知识窗：标准文档流；display属性；float属性；clear属性；overflow属性演示：教师演示活

32、动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务4 活动1 使用CSS设置背景课题类型理论+实作课时安排2上课时间教学目标1.掌握与背景与关的CSS样式2.灵活运用背景重复CSS属性控制网页效果教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.标准文档流：块级元素、行内元素。2.与Div+CSS布局网页相关的CSS属性：display、float、clear、overflow。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求结合背景相关CSS样式，完成“支付宝 - 我的应用”的制作，

33、如下图所示，完成后以“task6-4-1.html”为文件名保存到“task6-4”文件夹。二、师生讨论学习新知识1、CSS背景CSS 背景属性用于定义HTML元素的背景，可在Dreamweaver CS6的“CSS 规则定义”对话框的“背景”选项卡中进行CSS背景设置。CSS背景包含以下几个常用属性：l 背景颜色（background-color）：用于设置网页元素的背景颜色。l 背景图像（background-image）：用于设置网页元素的背景图像。l 背景重复（background-repeat）：用于控制图像平铺的方式和方向。l 背景定位（background-position）：用

34、于控制图像在背景中的位置。2、背景重复（background-repeat）用于控制图像平铺的方式和方向，属性值有4个：repeat、no-repeat、repeat-x、repeat-y。三、教师演示活动实施过程并让学生完成活动任务1、打开Dreamweaver CS6并新建一个HTML文档，切换至“设计”视图，更改文档标题为“支付宝 - 我的应用”，以“task6-4-1.html”为文件名保存到“task6-4”文件夹。2、依次单击“插入”-“布局对象”- “Div标签”菜单命令，打开的“插入Div标签”对话框，在“插入”下拉列表框中选择“在插入点”，在“ID”框中输入“content”

35、，然后单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框“规则定义”下拉列表框中选择“仅限该文档”，然后单击“确定”按钮，打开“# content 的CSS规则定义”对话框，按要求设置CSS样式。3、删除“此处显示 id content 的内容”文字，输入“我的应用（8）”与“占位”文字，选择输入的文字并将其设置为“标题3”格式，选择“占位”文字并为其添加空链接。4、将光标定位到“我的应用（8）”文字中，在“标签选择器”中单击“”按钮，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#content h3 的CS

36、S规则定义”对话框，按要求设置CSS样式。5、将光标定位到“占位”文字中，在“标签选择器”中单击“”按钮，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#content h3 a 的CSS规则定义”对话框，按要求设置CSS样式。6、将光标定位到“占位”文字中，在“标签选择器”中单击“”按钮，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#content h3 a:hover”，然后单击“确定”按钮，打开“#content h3 a:hover 的

37、CSS规则定义”对话框，按要求设置CSS样式。7、删除“占位”两个字。在“我的应用（8）”文字后面单击鼠标，然后按回车键另起一行，输入“转账到支付宝”并添加空链接。参照同样的方法输入其他文字并添加空链接。8、选择“转账到支付宝”“医院挂号”这8行文字，在“属性”面板中单击“项目列表”将其转换为项目列表。9、在“转账到支付宝”文字中单击鼠标，在“标签选择器”中单击“”按钮，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#content ul 的CSS规则定义”对话框，按要求设置CSS样式。10、在“转账到支付宝”文字中单击

38、鼠标，在“标签选择器”中单击“”按钮，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中单击“确定”按钮，打开“#content ul li a 的CSS规则定义”对话框，按要求设置CSS样式。11、在“CSS样式”面板中单击“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#content ul li a.list-1”，然后单击“确定”按钮，打开“#content ul li a.list-1 的CSS规则定义”对话框，按要求设置CSS样式。12、在“转账到支付宝”文字中单击鼠标，在“标签选择器”中单击

39、“”按钮，在“属性”面板中“类”下拉列表框中选择“list-1”。参照同样的方法设置其他7个应用列表的样式13、在“转账到支付宝”文字中单击鼠标，在“标签选择器”中单击“”按钮，然后单击“CSS样式”面板中的“新建 CSS 规则”按钮，在打开的“新建 CSS 规则”对话框中的“选择器名称”框中输入“#content ul li a:hover”，然后单击“确定”按钮，打开“#content ul li a:hover 的CSS规则定义”对话框，按要求设置CSS样式。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果阅读知识窗：CSS背景；背景重复演示：教师演示活动实施过程实训活动：学生练

40、习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记教学课题任务4 活动2 制作淘宝登录页面课题类型理论+实作课时安排2上课时间教学目标1.了解background属性的使用2.灵活运用背景CSS样式制作淘宝登录页面教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.CSS背景样式。2.背景重复（background-repeat）。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求结合背景相关CSS样式，完成淘宝登录页面制作，如下图所示，完成后以“task6-4-2.html”为文件名保存到“task6-4”文件夹。二、师生讨论学习新知识1、背景（background）如果需要同时设置多个背景属性，可以使用background简写背景样式，如