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

《《 电子商务网页设计 》课程教案项目7.pdf》由会员分享，可在线阅读，更多相关《《 电子商务网页设计 》课程教案项目7.pdf（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、 CSS 样式表的含义、分类掌握利用样式面板创建及编辑CSS样式表的方法难点：根据实际需求创建及应用CSS样式表控制页面元素理论讲授 小组讨论 项目教学任务驱动 参观教学 模拟教学实验实训 演示教学 其他素素文本素材实物展示PPT 幻灯片材材音频素材视频素材动画素材资资图形/图像素材网络资源其他源源教学方法教学方法本章分 2 次进行授课，每次 90 分钟，具体:任务一任务一使用使用 CSSCSS 设置页面、文本、段落的格式设置页面、文本、段落的格式（1 1）课程内容回顾）课程内容回顾（2 2）宣布教学内容、目的）宣布教学内容、目的（3 3）新知导入）新知导入（1010分钟）分钟）参考说辞：参考

3、说辞：本项目主要介绍如何利用CSS 样式,对网页中的文本、段落、表格、表单、图像、超链教学设计教学设计接等各种元素的格式进行设置,使网页制作过程中内容的添加与格式设置分离开来,令网页更加美观,风格得到统一,并能减少工作量,便于站点维护和管理。任务分析任务分析(5(5 分钟分钟)：本任务是使用Dreamweaver 2020 中的样式面板,创建嵌入式 CSS 样式表,分别对网页的页面边距、文字、段落等格式进行控制,详细设置如下:(1)设置页面的边界为“0”,去掉网页上边缘与浏览器之间的空白;(2)设置超链接无下划线，还有其它状态下的颜色设置。(3)设置网页中间正文部分的文字效果:宋体、13 像素

4、、灰色、1.5 倍行高;添加 CSS 前后的网页效果,分别如图 71 和图 72 所示。图 71添加 CSS 前的网页效果图 72添加 CSS 后的网页效果互动讨论：互动讨论：通过观察，让学生看看图中添加通过观察，让学生看看图中添加CSSCSS前后的网页效果呈现。前后的网页效果呈现。2 2、教学内容、教学内容(30(30 分钟分钟)1.CSS1.CSS2.CSS2.CSS 设计器面板设计器面板3.CSS3.CSS 的创建及分类的创建及分类4.CSS4.CSS 规则的设置规则的设置5.CSS5.CSS 使用规则使用规则任务实施，实操（任务实施，实操（4040分钟）分钟）1.教师布置任务，发送网页

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

6、页效果(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

7、：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 5分钟）分钟）掌握使用 CSS 设置页面、文本、段落的格式任务二任务二使用使用 CSSCSS 设置表格元素外观设置

8、表格元素外观任务分析任务分析(5(5 分钟分钟)：本任务使用 Dreamweaver 2020中的样式面板,创建外部 CSS 样式表,对页面中的表格、单元格等元素的外观进行美化,详细设置如下:(1)商品详情单元格内的文字效果设置:华文新魏、20 像素，背景色#DCC0B4;(2)内容单元格文字效果设置:华文新魏、16 像素、颜色棕色（brown）;添加 CSS 前后的网页效果,分别如图 717 和图 718 所示。图 717添加 CSS 前的网页效果图 718添加 CSS 后的网页效果互动讨论：互动讨论：通过观察，通过观察，让学生看看图中添加让学生看看图中添加CSSCSS前后的网页效果呈现。前

9、后的网页效果呈现。指出哪个更好？指出哪个更好？为什么？为什么？任务实施（任务实施（3535 分钟）分钟）1.教师布置任务，发送网页素材和效果图，演示使用CSS 设置表格元素外观的操作方法。2学生按要求上机实践完成任务。3教师指导检查任务完成效果。(1)站点下单击菜单栏“文件”“新建”命令，在弹出的新建对话框中选择新建文档项，文档类型选择“CSS”,单击“创建”按钮,如图 7-19 所示。图 7-19 新建文档对话框（2）在 CSS 设计器面板中，单击选择器前的“+”，在文本框中输入.headertb 新建名字为 headertb 的 class，在属性组下设置字体：font-family 为华

10、文新魏，字体大小：font-size 为 20px，设置背景颜色：background-color:#DCC0B4，设置表头 CSS 样式。（3）在 CSS 设计器面板中，单击选择器前的“+”，在文本框中输入.contenttb 新建名字为 contenttb 的 class，在属性组下设置字体：font-family 为华文新魏，字体大小：font-size 为 16px，字体颜色：color:brown，设置表格内容 CSS 样式，如图 7-20 所示。图 7-20 CSS 文件提示：如果手写 CSS 可以借助 dreamweaver 简写和快捷键来提高编写效率，如输入“font-size

11、:16px;”，在输入时可根据 dreamweaver 的代码提示输入“fz16”再按 Tab 键就行了。（4）ctrl+s 保存文件名为 mycss.css。（5）打开站点下 index.html 文件，在“商品详情”前单击菜单栏“插入”“Table”插入表格，如图 7-21 所示。图 7-21 插入表格对话框（6）将文字分别复制到第一行单元格与第二行单元格中,如图 7-22 所示。图 7-22 插入表格效果图（7）单击菜单栏“文件”“附加样式表”命令，在弹出的使用现有的 CSS 文件对话框中浏览并选择刚刚新建的 mycss.css 文件，单击“确定”返回，如图 7-23 所示。在index

12、.html 代码中会添加这段引用。图 7-23 使用现有的 CSS 文件对话框（8）选择“商品详情”所在的单元格，在属性面板CSS 项中，目标规则下拉列表中选择.headertb，将其应用到表格单元格中，如图7-23 所示。图 7-23 属性面板（9）选择表格第二行的单元格，在属性面板CSS 项中，目标规则下拉列表中选择.contenttb，将其应用到表格单元格中,保存文件，按 F12 预览最后效果，如图 7-24 所示。图 7-24 最后效果教学小结（教学小结（5 5 分钟）分钟）本任务使用 Dreamweaver 2020中的样式面板,创建外部 CSS 样式表,对页面中的表格、单元格等元素

13、的外观进行美化。任务三任务三使用使用 CSSCSS 设置表单项目外观设置表单项目外观任务分析任务分析(5(5 分钟分钟)：表单是动态网页中常用的网页元素。表单元素的属性设置可以在表单属性中单独设置,但如果一个网页中存在多种不同的表单元素,每种表单元素都必须设置成各自统一的样式,采用单独设置每个表单元素的方法比较烦琐,并且很容易出现错误;如果结合 CSS 样式设置表单项目的外观,不仅能从烦琐的修改工作中解脱出来,还能保证修改的正确率。本任务使用 Dreamweaver 2020 中的 CSS 设计器,创建 CSS 样式表,对页面中各种表单项目的外观进行美化,详细设置如下:(1)在网页中插入表单与

14、控件;(2)设置按钮与数值表单控件的属性(3)表单中数值控件的大小设置:宽 20 像素、高 30 像素;(4)表单中按钮的边框宽度设置:0 像素，字体颜色：白色，字号为 36px，背景颜色：为红色;添加 CSS 后的网页效果,如图 733 所示。图 733添加 CSS 后的网页效果教学内容（教学内容（5 5 分钟）分钟）1.1.表单表单2.2.表单的组成表单的组成(1)(1)表单表单（2 2）文本）文本（3 3）复选框）复选框（4 4）单选按钮）单选按钮（5 5）单选按钮组）单选按钮组（6 6）按钮）按钮（7 7）标签）标签任务实施（任务实施（3030 分钟）分钟）1.教师布置任务，发送网页素

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

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

17、border 为 0px，背景颜色：background-color为 red，如图 7-33 所示。图 7-33 CSS 设计器（7）单击“提交按钮”，在属性面板的 class 中选择我们才建立的 mybutton，将 CSS效果应用到按钮上，如图7-34 所示。图 7-34 应用 CSS（8）在 CSS 面板中单击选择器前的“+”，在文本框中输入.shortnum 回车，在属性中设置宽度：width 为 20px，高度：height 为 30px，如图 7-35 所示。图 7-35 CSS 设计器（9）单击表单的“数字”，在属性面板的 class 中选择我们才建立的 shortnum，将

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