《-电子商务网页设计-》课程教案项目7.doc

1、电子商务网页设计课程教案项目七授课教师班级学时2授课日期主题或任务使用CSS控制页面元素课型专业课授课地点多媒体教室企业专业教室实训室教学目标1、知识目标：理解CSS样式表的含义、分类2、技能目标：掌握利用样式面板创建及编辑CSS样式表的方法、根据实际需求创建及应用CSS样式表控制页面元素3、素质目标：树立学生创新设计电商网站的意识学习内容 理解CSS样式表的含义、分类 掌握利用样式面板创建及编辑CSS样式表的方法 根据实际需求创建及应用CSS样式表控制页面元素重点难点 重点：理解CSS样式表的含义、分类 掌握利用样式面板创建及编辑CSS样式表的方法 难点：根据实际需求创建及应用CSS样式表控

2、制页面元素教学方法理论讲授 小组讨论 项目教学任务驱动 参观教学 模拟教学实验实训 演示教学 其他 素材资源文本素材实物展示PPT幻灯片音频素材视频素材动画素材图形/图像素材网络资源其他教学设计本章分2次进行授课，每次90分钟，具体:任务一 使用CSS设置页面、文本、段落的格式（1）课程内容回顾（2）宣布教学内容、目的 （3）新知导入（10分钟）参考说辞：本项目主要介绍如何利用CSS样式,对网页中的文本、段落、表格、表单、图像、超链接等各种元素的格式进行设置,使网页制作过程中内容的添加与格式设置分离开来,令网页更加美观,风格得到统一,并能减少工作量,便于站点维护和管理。任务分析(5分钟)：本任

3、务是使用Dreamweaver 2020中的样式面板,创建嵌入式CSS样式表,分别对网页的页面边距、文字、段落等格式进行控制,详细设置如下:(1)设置页面的边界为“0”,去掉网页上边缘与浏览器之间的空白;(2) 设置超链接无下划线，还有其它状态下的颜色设置。(3)设置网页中间正文部分的文字效果:宋体、13像素、灰色、1.5倍行高;添加CSS前后的网页效果,分别如图71和图72所示。图71添加CSS前的网页效果图72添加CSS后的网页效果互动讨论：通过观察，让学生看看图中添加CSS前后的网页效果呈现。2、教学内容(30分钟)1.CSS2.CSS设计器面板3.CSS的创建及分类4.CSS规则的设置

4、5.CSS使用规则任务实施，实操（40分钟）1. 教师布置任务，发送网页素材和效果图，演示使用CS设置页面、文本、段落的格式的操作方法。2学生按要求上机实践完成任务。3教师指导检查任务完成效果。(1)打开上次站点下的index.html文件。(2)在CSS设计器面板的选择器组中,单击“+”按钮,在出现的文本框中输入body回车重新定义body标签，在属性组中找到margin输入0回车，如图7-10所示。图710重新定义“body”标签(3)由于上述操作是对HTML中的标签“body”进行了重新定义,因此属性会自动被运用到网页中去。浏览网页,即可以看到网页上端的空白区消失了,如图711所示。图7

5、11重新定义body标签后的网页效果(4)先给导航栏的文字加上链接，选择首页文字，在属性面板的“html”项中的链接文本框中输入“#”链接到当前页面并跳转到页面顶部，如图7-12所示。图7-12属性面板（5）根据上面的方法，依次给其它文字加上链接，如图7-13所示。图7-13链接文字（6）在CSS设计器面板的选择器组中,单击“+”按钮,在出现的文本框中输入a:link回车重新定义a:link标签，在属性组中找到text-decoration项，单击项，取消链接下划线，如图7-14所示。图7-14重新定义“a:link”标签（7）超链接有主要有四种状态分别是a：link 未访问过的链接的样式；a

6、：hover 是鼠标经过链接的样式；a：active 是鼠标点击链接的样式；a：visited 是访问过的链接的样式，我们刚才设置了a:link状态，为了使链接更有交互性一些，下面我们按上面的方法将a:hover的文本中的color的值输入“red”,如图7-15所示。a:visited设为green。7-15重新定义“a:hover”标签（8）完成设置之后，保存网页按F12键在浏览器中预览结果，如图7-16所示。图7-16网页效果教师小结（5分钟） 掌握使用CSS设置页面、文本、段落的格式任务二 使用CSS设置表格元素外观任务分析(5分钟)：本任务使用Dreamweaver 2020中的样式

7、面板,创建外部CSS样式表,对页面中的表格、单元格等元素的外观进行美化,详细设置如下:(1)商品详情单元格内的文字效果设置:华文新魏、20像素，背景色#DCC0B4;(2)内容单元格文字效果设置:华文新魏、16像素、颜色棕色（brown）;添加CSS前后的网页效果,分别如图717和图718所示。图717添加CSS前的网页效果图718添加CSS后的网页效果互动讨论：通过观察，让学生看看图中添加CSS前后的网页效果呈现。指出哪个更好？为什么？任务实施（35分钟）1. 教师布置任务，发送网页素材和效果图，演示使用CSS设置表格元素外观的操作方法。2学生按要求上机实践完成任务。3教师指导检查任务完成效

8、果。(1)站点下单击菜单栏“文件”“新建”命令，在弹出的新建对话框中选择新建文档项，文档类型选择“ CSS”,单击“创建”按钮,如图7-19所示。图7-19新建文档对话框（2）在CSS设计器面板中，单击选择器前的“+”，在文本框中输入.headertb新建名字为headertb的class，在属性组下设置字体：font-family为华文新魏，字体大小：font-size为 20px，设置背景颜色：background-color: #DCC0B4，设置表头CSS样式。（3）在CSS设计器面板中，单击选择器前的“+”，在文本框中输入.contenttb新建名字为contenttb的class，

9、在属性组下设置字体：font-family为华文新魏，字体大小：font-size为 16px，字体颜色：color: brown，设置表格内容CSS样式，如图7-20所示。 图7-20 CSS文件提示：如果手写CSS可以借助dreamweaver简写和快捷键来提高编写效率，如输入“font-size:16px;”，在输入时可根据dreamweaver的代码提示输入“fz16”再按Tab键就行了。（4）ctrl+s保存文件名为mycss.css。（5）打开站点下index.html文件，在“商品详情”前单击菜单栏“插入”“Table”插入表格，如图7-21所示。图7-21插入表格对话框（6）将

10、文字分别复制到第一行单元格与第二行单元格中,如图7-22所示。图7-22插入表格效果图（7）单击菜单栏“文件”“附加样式表”命令，在弹出的使用现有的CSS文件对话框中浏览并选择刚刚新建的mycss.css文件，单击“确定”返回，如图7-23所示。在index.html代码中会添加这段引用。图7-23使用现有的CSS文件对话框（8）选择“商品详情”所在的单元格，在属性面板CSS项中，目标规则下拉列表中选择.headertb，将其应用到表格单元格中，如图7-23所示。图7-23属性面板（9）选择表格第二行的单元格，在属性面板CSS项中，目标规则下拉列表中选择.contenttb，将其应用到表格单元

11、格中,保存文件，按F12预览最后效果，如图7-24所示。图7-24最后效果教学小结（5分钟）本任务使用Dreamweaver 2020中的样式面板,创建外部CSS样式表,对页面中的表格、单元格等元素的外观进行美化。任务三 使用CSS设置表单项目外观任务分析(5分钟)：表单是动态网页中常用的网页元素。表单元素的属性设置可以在表单属性中单独设置,但如果一个网页中存在多种不同的表单元素,每种表单元素都必须设置成各自统一的样式,采用单独设置每个表单元素的方法比较烦琐,并且很容易出现错误;如果结合CSS样式设置表单项目的外观,不仅能从烦琐的修改工作中解脱出来,还能保证修改的正确率。本任务使用Dreamw

12、eaver 2020中的CSS设计器,创建CSS样式表,对页面中各种表单项目的外观进行美化,详细设置如下:(1)在网页中插入表单与控件;(2)设置按钮与数值表单控件的属性(3)表单中数值控件的大小设置:宽20像素、高30像素;(4)表单中按钮的边框宽度设置:0像素，字体颜色：白色，字号为36px，背景颜色：为红色;添加CSS后的网页效果,如图733所示。 图733添加CSS后的网页效果教学内容（5分钟）1.表单2.表单的组成 (1)表单（2）文本（3）复选框（4）单选按钮（5）单选按钮组（6）按钮（7）标签任务实施（30分钟）1. 教师布置任务，发送网页素材和效果图，演示使用CSS设置表单项目

13、外观的操作方法。2学生按要求上机实践完成任务。3教师指导检查任务完成效果。(1) 打开站点下的index.html文件，在“商品详情”下面选择“插入”“表单”“表单”，在网里插入一个红色的表单区域用于后期收集与处理数据，如图7-28所示。 图7-28插入表单（2）在表单中插入一个4行2列的表格，并在表格中输入相关文字，如图7-29所示。图7-29表格文字（3）通过属性面板设置的CSS项，设置表格中的文字为宋体，大小为12px，第一行，第二列价格数字用36px红色显示,背景颜色为#ddc185突出价格优势，如图7-30所示。 图7-30设置表格CSS（4）在第三行，第二列的表格中选择菜单栏的“插

14、入”“表单”“数字”，在第四行，第二列选择菜单栏“插入”“表单”“按钮”。删除“数字”区前面的字符，如图7-31所示。图7-31插入表单元件（5）选择表单的数字，删除前面的字母，在属性面板的value中输入1，设置默认数量为1。再选择按钮在属性面板的value中输入“加入购物车”，如图7-32所示。图7-32设置表单（6）在CSS面板中单击选择器前的“+”，在文本框中输入.mybutton回车，在属性中设置字体颜色：color为#ffffff，字号：font-size为36px，边框：border为0px，背景颜色：background-color为 red，如图7-33所示。图7-33 CS

15、S设计器（7）单击“提交按钮”，在属性面板的class中选择我们才建立的mybutton，将CSS效果应用到按钮上，如图7-34所示。图7-34 应用CSS（8）在CSS面板中单击选择器前的“+”，在文本框中输入.shortnum回车，在属性中设置宽度：width为20px，高度：height为 30px，如图7-35所示。图7-35 CSS设计器（9）单击表单的“数字”，在属性面板的class中选择我们才建立的shortnum，将CSS效果应用到“数字”控件上，最后保存文件，按F12在浏览器的预览效果，如图7-36所示。图7-36最后效果项目总结（5分钟）本项目是利用CSS对网页中的文本、段落、表格、表单、图像、超链接等各种元素的格式进行设置,使网页制作过程中内容的添加与格式设置分离开来,令网页更加美观,风格得到统一,并能减少工作量,便于站点维护和管理。经验交流:同学们将学习过程中的疑难问题记录下来,相互交流。带领学生总结本节课程的重点和难点，请各组总结本章知识的思维导图学习评价行为表现 课堂作业 测验测试 制作作品 其他 作业题目课后习题：选择题、填空题、操作题（制作购物车内网页，如图7-37所示）本章知识的思维导图双语教学系（部）： 教研室： 教研室主任签字： 年 月