电子商务网页设计与制作 教案全套 电子 第1--27次课 网页设计初了解 --- 任务案例：生活垃圾现状调查（二）.docx

湖南商务职业技术学院教案授课章节及主题网页设计初了解课次1教学目标知识目标1. 了解有关网页制作的基本知识与网页的构成元素；2. 了解常见的网站类型；3. 理解网页设计配色方法；能力目标1.能够快速了解网页设计的基础知识；素养目标1 .培养学生清晰有序的逻辑思维；2 .培养学生数据分析与总结的意识；3 .培养学生系统分析与解决问题的能力。学情分析知识基础学生已经具备了一定的计算机操作能力和PhOtoShOP软件的基本操作技能，具有一定的图像处理能力，具有一定的审美能力。学生特点L学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难*2 .软件课程知识绝大部分同学掌握较好，少部分同学操作不太熟练。3 .解决复杂问题能力弱，缺乏知识迁移能力。教学重点1.课程认知2.网页框架3.网页元素教学难点网站分析教学方法讲授法案例演示法讨论法实践法线上线下混合式教学资源与平台教学平台超星学习通https:/Www.X参考书I.电子商务网页设计与制作，电子工业出版社2.HTML5+CSS3网页设计与制作，人民邮电出版社参考网络资源1 .菜鸟教程：httpsrwr%,2 .虎课网：https:/教学过程设计环节教学内容教师活动学生活动课程认知(15min)1 .课程定位2 .教学目标3 .教学内容4 .课程考核5 .支撑岗位1.【讲授】教师讲授课程基本情况，激发学生对课程学习的热情。1.学生了解本课程基本情况，确定学习的目标任务导入(2min)李小明是湖南商务职业技术学院2015级电子商务专业的学生,他在暑假社会实践中接触到了一些电子商务企业，这些电子商务企业除了在淘宝、京东等平台进行商品销售外，还需要在互联网上发布企业网站,从而促进企业品牌形象的推广，加强客户对企业的认知度。作为电子商务专业的学生，掌握企业网站的设计与制作是最基本的专业素养要求，对此，小明很困惑，因为他连什么是网页还不知道呢？如果你也跟小明一样有这样的困惑，那么就请跟我一起走进本次任务的学习吧。1.【任务导入】教师通过案例导入本次课的学习目标。1.学生了解本次课学习的目标。任务描述(5min)在百度搜索框中输入以表1所示的“关键词”，找到关键词所对应的宜方网站，访问这些网站的首页，并分析这5个网页的类型、结构、元素与配色等相关属性，填入表1中。表1网页类型及相关属性分析1.【任务描述】讲师讲解本次课需要完成的任务。1.学生了解本次课要完成的任务。关键词1天猫商城网站首页URL网站类型网页结构网页元素网页配色关键词2湖南花木篮网站首页URL网站类型网页结构网页元素网页配色关键词3顺丰快递网站首页URL网站类型网页结构网页元素网页配色关键词4艾瑞网网站首页URL网站类型网页结构网页元素网页配色关键词5知乎网站首页URL网站类型网页构成网页元素网页配色知识准备(35min)1、网页设计相关概念(1)网址(2)浏览器(3)网页(4)网站(5)首页2、常见网站类型按照网站功能的不同，常见的网站类型有以下几利I(1)资讯门户类网站(2)企业品牌类网站(3)交易类网站(4)功能类网站(5)交互类网站3、网页结构(1)网站Logo(2)网站名称(3)导航菜单L【知识讲授】教师讲解网页设计相关概念、网站类型知识点。2 .【案例讲解】教师打开某网站，讲解网页结构和网页元素。3 .【课堂活动】打开某网站，请学生讨论分析网页结构和网页元素。1 .听取教师讲解知识点；2 .积极参与课堂活动。（4）Banner（5）网页正文（6）网页页脚4、网页元素（1）文本（2）图像（3）超级链接（4）导航栏（5）动画（6）表格（7）框架（8）表单任务实施（40min）（1） 天猫商城网站的分析（2） 湖南花木篮网站的分析（3） 顺丰速递网站的分析（4） 艾瑞网网站的分析（5） 知乎网站的分析技雄训练作业1：网页类31与艮性分析（方法塞盘：任务1网页设计的7解任努实Jftpdf）1 .【案例分析】教师以天猫商城网站为例对该网站进行分析。2 .【发布任务】教师在学习通发布测试任务。3 .【实践指导】来回巡视，及时帮助学生解决问题。完成技能训练题。思考自测（5min）开展课堂活动网页初了解除随奥东习习1 .【发布任务】教师在学习通发布测试任务。2 .【归纳总结】来回巡视，及时帮助学生解决问题。完成知识检测。课堂小结（3min）通过对本次课的学习，让学生对于网页设计有一个初步的了解，并对WEB标准有一个基础性的认识。作业布置1 .继续完成技能训练任务，并提交至学习通2 .预学下一次课的内容教学反思湖南商务职业技术学院教案授课章节及主题DreamweaverCS6软件的使用课次2知识目标4 .熟悉DreamWeaVer软件的安装与工作环境；5 .掌握站点创建的方法以及基本操作；6 .能够在本地电脑端创建网站站点；7 .能够快速了解网页设计的基础知识；教学目标能力目标1 .能够创建网站站点以及进行站点目录规划；2 .能够利用Drcamweaver软件进行简单网页文档的制作。素养目标4 .培养学生清晰有序的逻辑思维；5 .培养学生数据分析与总结的意识；6 .培养学生系统分析与解决问题的能力。学情分析知识基础学生已经具备了一定的计算机操作能力和Photoshop的基本操作技能，对网页设计有一些基本的了解。学生特点L学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。2 .软件课程知识绝大部分同学掌握较好，少部分同学操作不太熟练。3 .解决复杂问题能力弱，缺乏知识迁移能力。教学重点1、网站站点创建2、网站目录规划教学难点网站目录规划教学方法讲授法案例演示法讨论法实践法线上线下混合式教学平台超星学习通https:/ww.X教学资源与平台参考书1 .电子商务网页设计与制作，电子工业出版社2 .HTML5+CSS3网页设计与制作，人民邮电出版社参考网络资源1 .菜鸟教程：https：/2 .虎课网：教学过程设计环节教学内容教师活动学生活动知识回顾(5min)1、选人回答：什么是网址URL?2、选人回答：常见网站不同类型有哪些？3、选人回答：B2B属于哪一类网站？4、抢答：淘宝的评论区属于网页中哪个元素？5、抢答：文本中的字体最佳是多大？1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点。1.学生积极参与课堂活动。任务导入(2min)通过任务1的学习与实施，小明对于网页设计的基础知识有了一个初步的了解，看到各种风格鲜明、色彩和谐的网页，小明给自己定了一个目标，一定要把网页设计学好，做出让客户满意的网页作品来。在了解了网页设计后，小明新的问题又出来了，他该用什么软件来编写网页文件呢？L【任务导入】教师通过案例导入本次课的学习目标。L学生了解本次课学习的目标。任务描述(5min)1、每个团队下载好DreannVeaVerCS6软件安装包，将软件安装到自己的电脑中；2、在本地电脑的E盘创建一个名为mySite的文件夹，作为自己网站根目录，在InySite文件夹中创建二级文件夹，分别保存网站首页、公司新闻、产品展示、公司荣誉、在线咨询等5个网页栏目的素材文件，每个栏目中创建下级文件夹images用来保存图片素材文件，StyIe用来保存样式文件；3打开DreanlWeaVer软件，创建网站站点“我的网站”,与E盘的mySite文件夹进行映射，对站点进行管理操作；4、利用DreamWeaVer创建一个简单网页，网页内容为“这是我的第一个网页！"，以index.html为文件名保存在mySite根目录下的index文件夹下。L【任务描述】讲师讲解本次课需要完成的任务。L学生了解本次课要完成的任务。知识准备(30min)1、网站站点Dreamweaver可以用于创建单个网页，但在大多数情况下，是将这些单独的网页组合起来成为站点。DreamweaverCS6不仅提供了网页编辑特性，而且带有强大的站点管理功能。2、什么是站点Dreamweaver中的站点包括本地站点、远程站点和测试站点3类。注意：静态网页是标准的HTML文件，采用HTML编写，是通过HTTP在服务器端和客户端之间传输的纯文本文件，其扩展名是htm或html。动态网页以.asp、jsp>php等形式为后缀，以数据库技术为基础，含有程序代码，是可以实现如用户注册、在线调查、订单管理等功能的网页文件。3、站点及目录的作用站点是用来存储一个网站的所有文件的，这些文件包括网页html文件、图片文件、服务器端处理程序、音频文件和视频文件等。4、合理建立目录站点的目录结构与站点的内容多少有关。1 .【知识讲授】教师讲解网站相关知识点。2 .【课堂讨论】为什么要建立网站站点呢？如果不建立网站站点，你有可能会在以后的学习中遇到什么困难呢？1.听取教师讲解知识点；2.积极参与课堂活动。在设计网站目录结构时，应该注意以下几点：(1)无论站点的大小，都应该创建一定规模的目录结构，不要把所有的文件都存放在站点的根目录中。如果把很多文件都放在根目录中，很容易造成文件管理的混舌L,影响工作效率，也容易发生错误。(2)按模块及其内容创建子目录。(3)目录层次不要太深，一般控制在5级以内。(4)不要使用中文目录名，防止因此而引起的链接和浏览错误。(5)为首页建立文件夹，用于存放网站首页中的各种文件，首页使用率最高，为它单独建一个文件夹很有必要。(6)目录名应能反映目录中的内容，方便管理维护。任务实施(40min)1、安装好Drecimweaver软件。因发给大家的软件是免安装版，大家只需要将文件夹中的绿色图标dreamweaver,以快捷方式发放到桌面，双击图标就可以正常使用了。囹Corelypes.dll1 .【实操演示】教师以学校官方网站为例讲解站点创建以及目录规划。2 .【发布任务】教师在学习通发布技能任务。3 .【实践指导】来回巡视，及时帮助学生解决问题。1 .观看实操演示，掌握站点创建方法。2 .完成技能训练题。EQDreamweavenexe¾jdvaadameve.dll,¾,dvacore.dll2打开"任务2任务实施之DreamweaverCS6软件的使用任务实施文档”。任务2任务实施之DreamWeaVerCS6软件的使用任务实施文档I任务2DreamweaverCS6的3、从第三步“创建文件夹”开始，逐步完成任务2。4、提交作业至章节测验处。令枝雄泄练/ftnam:r4思考自测(5min)除随堡东习【发布测试】教师在学习通发布随堂练习。学生完成本次课知识自测。课堂小结(3min)通过对本次课的学习，让学生掌握熟悉DreaInWeaVer软件的安装与工作环境，能够利用DreamWeaVer软件进行简单网页文档的制作。作业布置1 .继续完成技能训练任务，并提交至学习通2 .预学下一次课的内容教学反思湖南商务职业技术学院教案授课章节及主题HTML基础(一)课次3教学目标知识目标8 .掌握什么是HTML与XHTML以及区别9 .掌握标签、元素和属性的概念10 .掌握常用的HTML块级元素的语法及使用方法。能力目标3 .能够利用Dreamweaver软件进行简单网页文档的制作；4 .能够熟练使用常见HTML标签进行网页文档的编写。素养目标7 .培养学生清晰有序的逻辑思维；8 .培养学生数据分析与总结的意识；9 .培养学生系统分析与解决问题的能力。学情分析知识基础学生已经具备了一定的计算机操作能力和PhotOShop、Dreamweaver软件的基本操作技能，对网页设计有一些基本的了解。学生特点1 .学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。2 .软件课程知识绝大部分同学掌握较好，少部分同学操作不太熟练。3 .解决复杂问题能力弱，缺乏知识迁移能力。教学重点4 .内联元素和块状元素的区别5 .Html基本结构元素6 .标题元素和段落元素教学难点Html基本结构元素教学方法讲授法案例演示法讨论法实践法线上线下混合式教学资源与平台教学平台超星学习通https:Www.X参考书1 .电子商务网页设计与制作，电子工业出版社2 .HTML5+CSS3网页设计与制作，人民邮电出版社参考网络资源1 .菜鸟教程：https:/2 .虎课网：https教学过程设计环节教学内容教师活动学生活动知识回顾(IOmin)1、投票：下面哪款软件是集网页制作和管理网站于一身的所见即所得网页代码编辑器？:DreamweaverB:PhotoshopCiFlash2、抢答：什么是站点？为什么要建立网络站点？3、选人回答：什么是本地站点？4、抢答：什么是静态网页，它与动态网页有什么不同？5、抢答：如何合理的建立站点目录？1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点。L学生积极参与课堂活动。任务导入(2min)小明成功地安装了DreanlWeaVerCS6软件，创建了本地站点，生成了第一个网页文件。看到浏览器中显示出来的网页效果，小明高兴之余,想起在创建网页过程中在代码视图中看到的那些代码：head、body等,他一个都不认识，那是些什么呢？1.【任务导入】教师通过案例导入本次课的学习目标。L学生T解本次课学习的目标。知识准备(35min)1、HTMLWXHMTL(1) HTMLHTUL是HyPerTextMarkupLangUage的缩写，中文名称是超文本标记语言，超级文本标记语言是万维网(Web)编程的基础，也就是说万维网是建立在超文本基础之上的。(2) XHTMLXHTML是TheExtensibleHyperTextMarkupLanguage的缩写，中文名称是可扩展超文本标记语言，表现方式与HTML基本相同，但有一些细微的差别。XHTML相对HTML在语法要求上更加地严格，是一种加强版的HTML。此处不做过多解释，两者之间的不同区别在下一节中进行详细分析。(3) HTML标签、元素和属性标签HTML标签是由一对尖括号“”各“”以及标签名组成，如3段落标签，P为标签名。标签分为“开始标签”与“结束标签”两种，如图1-3-3所示，其中p为段落标签的开始标签，p为段落标签的结束标签。1 .【知识讲授】教师讲解Html相关知识点。2 .【课堂讨论】1：什么是HTML?HTML与XHTM的主要区别是什么？3.【课堂讨论】2：什么是HTML元素?HTML元素有哪两种分类形式?你能详细说说这两种分类形式吗？1.听取教师讲解知识点；2.积极参与课堂活动。标签名称/<P>这是一个段落<p>I1I开始标签元素内容结束标签元素按照有无元素内容来分，HTML元素可以分为有内容元素和空元素，其中有内容的元素是指元素内容不为空的元素，如3>、<body><html>等O元素内容为空内容的元素，称之为空元素，空元素没有明显的结束标签,在开始标签中进行关闭(以开始标签的结束而结束)，如<hr/>、<br/>、<img/>等。例如：<body><h2>html5的才既念<h2X!该h2元素为有内容的元素一<hr/><!该hr元素为空元素一)<p>万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。<p><!-该P元素为有内容的元素一><body>按照元素是否换行来分，HTML元素可以分为“块级元素"和“内联元素”。相反地，内联元素就是不会换行，内联元素就是紧贴着前面一个元素显示，内联元素也称之为行内元素。常见的内联元素有图像img、超链接a、SPan、加粗StrOng、斜体em等。属性HTML标签可以拥有属性。属性提供了有关HTML元素更多的信息。属性总是以名称/值对的形式出现，格式为name="value”(属性名=属性值)，属性总是在HTML元素的开始标签中规定。例如:<bodybgcolor="#FF6600"><h2aIign="center">htm15的概念<h2><hrcolor="#FF00FF'7><palign="right">万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。<p><body>上述代码中，body设置了属性bgcolor,表示背景颜色；h2与P设置了属性align,表示对齐方式；hr设置了COIOr属性，表示水平线的颜色。(4)HTML与XHTML的重要区别尽管所有浏览器都兼容HTML,但是为了使网页能够符合web4.【课堂讨论】3：HTML网页中的基本结构元素有几个？分别是什么？什么作用？5.【课堂讨论】4：网页中的段落是用什么标签来定义的？它的语法格式什么？标准,建议网页设计师应该尽量严格遵循XHTML规范来编写代码，需要注意以下几个方面：在XHTML中标签名称与属性名称必须小写。在XHTML中标签必须严格嵌套。在XHTML中属性值用双引号括起来。在XHTML中属性值必须使用完整形式。2、常见的HTML结构元素（1）DOCTYPe（文档类型）的含义与选择在DreamWeaVer中新建个网页文档时，默认情况下生成的基本网页代码如图卜3-6所示，可以看到最上面有1行关于“D0CTYPE（文档类型）”的声明，这行代码的作用就是告诉浏览器，使用哪种规范来解释这个文档中的代码。网页设计师可以在新建文档的时候选择使用哪种文档类型。在Dreamweaver的新建文档对话框中，在右下角有,个文档类型下拉框，如图1-3-7所示。注意:初学者建议使用XHTML1.0transitional（XHTMLLO过渡类型），这样在编写网页代码时，即可以按照XHTML的标准书写符合Web标准的网页代码，在一些特殊情况下，也可以使用HTML传统的不那么严谨的写法。（2）基本结构元素HTML网页中基本结构元素有3个，分别是html元素、head元素和body元素。这些元素一定出现在每个网页上，且仅出现次。html元素<html>与<html>标签决定了网页文档的开始点和结束点,在它们之间是文档的头部和主体，是网页文件最外围的一对标签，其作用是告诉浏览器整个文件是HTML格式。<htmI><head>这里是网页文档的头部<head><body>这里是网页文档的主体<body><htmI>head元素head元素的内容是网页的头部信息，这些信息不会显示在网页中，只是给浏览器提供信息。<hcad>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。head部分可以包含以下标签：<base>,<link>,<mcta>,<script>,<style>,以及title）等。<title>元素：定义网页文档的标题，标签内容会显示在浏览器的左上角，其目的是告知访问者网页的主题,title）元素是head部分中唯一必需的元素。<link>元素：用于链接外部样式CSS文件和javascript等外部文件；<style>元素：用来HTML文档定义样式信息。在StyIe中，可以规定在浏览器中如何呈现HTML文档，其中的type属性是必需的，用来定义style元素的内容。唯一可能的值是"text/CSs”。<script>元素：用于定义客户端脚本,比如JavaScript,script元素既可以包含脚本语句,也可以通过src属性指向外部脚本文件<meta>元素：用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。<base>元素：用来为页面上的所有链接规定默认地址或默认目标。注意：以上6个元素中只有title元素是必须出现的，其它元素根据实际需求来使用。body元素body元素是定义文档的主体。body元素包含文档的所有内容，比如文本、超链接、图像、表格和列表等等。body是用在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容。body元素中常用的属性有bgcolor（背景颜色）、background（背景图像）等。不过现在的Web标准不建议使用属性，建议使用CSS样式进行背景样式的定义，详见第三单元任务1。例如：<!DOCTYPEhtmlPUBLIC,-W3CDTDXHTML1.0TransitionaI/EN""http：/www.w3.org/TR/xhtml1/DTD/xhtmI!-transitional.dtd"><htmlxmlns="http:/www.w3.org1999xhtml,'><head><metahttp-equiv="Content-Type"content="texthtml；charset=utf-8"><title今天的主题:HTML5.O<title><metaname="keywords"COntent="HTML,HTML5,HTML5.0,超文本标记语言”/><metaname="description"content="HTML5是下一代的HTML,HTML5将成为HTML、XHTML以及HTMLDOM的新标准。"/><metahttp-equiv="refresh"content="10"><head><bodybgcolor="#FFFFFF">这里保存网页的各种内容信息！<body><htmI>以上就是一个基本的网页结构，<htd><html>是文档元素，里面包含两个元素，一个是网页头部元素<headXhead,一个是网页主体元素<bodyXbody>03、常见的HTML块级元素块级元素一般都从新行开始，它可以容纳内联元素和其他块级元素，常见块级元素有标题元素hn、段落元素p、块元素div、表格元素table等。如果没有CSS的作用，块级元素会按照顺序以每次另起一行的方式一直往下排。而有了CSS以后，我们可以改变这种html的默认布局模式,把块级元素摆放到想要的位置上去。常见的块级元素有标题元素hn、段落元素p、表格元素table.列表元素ul、滚动元素marqueeX水平线元素hr、大区块元素div等。(1)标题元素hn标题元素有'6种，分别为hl、h2、h3、h4、h5与h6,其中的h为heading(标题)的意思，数字6代表标题的级别，如hl代表一级标题，h2代表二级标题，h3代表三级标题，h4代表四级标题，h5代表五级标题，h6代表六级标题。(2)段落元素P网页中的段落是用<P>标签来定义的，它的语法为：<P>内容<p>,当需要在一个段落中进行换行时，使用<br/>标签来进行段落文本的换行。注意：使用空的段落标记<p><p>去插入一个空行是个坏习惯,建议使用<br/>标签代替它。常常使用段落标签，让文章条理段落上下分割清晰，同时也有利于搜索引擎优化(SEO),让搜索引擎感觉到你的网页内容段落更加友好清晰。段落标签在每个段落之间会生成-定距离，类似于一个P标签等于使用两个br标签换行。技能训练任务点HTML网页结构元素练习技能训练(40min)请同学们完成以下练习：第一步：在电脑新建文件夹mySite,在mySite中新建images与style两个子文件夹；第二步：打开DW软件，新建站点，与mySite映射；第三步：新建HTML文件，参考内容如下：RR*一MM*QBIt>,<amirf*>,Ij*Bu.raimr«m«scx;fmuMlINL.qrr<n>xtc<*u*Lttpxwv.v2.orTfcdtallDTaaduUl-trAltlea1.4c4>l<tAljmln>hl<>:/wv.«>.M>imahtal>Oaad><W(4ht<p-wMiv<M<-TfpgagctH/MaU&rd>l-tltl4-f>iB.MML5.O<tAtl>I*t4r*rOMttMRTNU<A14Mal$.0>snaae"scriptcnco«.t«ct-nmc.51T-ml<KM1J*M.>loahttp>quvrfrhgMMC“Qms"/RV.swvy.C9f><bMd><%oyb9color-KM44>l<r>avffnsie£B>*Rxctt*A9<vfle*VRRfleuBRxnftsamVlldIeaR!fti<brI道。*鼠丸w0网N£Mt,网XfI疑”保存舅n<。H*复&«!#网*«!4BftRxeQ*9R«8ta<WH9ffe.<2I"XIal19B-0ntr>Bl<hl>a>x3>卜”，j<ha<L4>4<4>l<5>WV<5>l<X4>We<Ol<M><htJ*AMaMl±3工三二O6tOJCQH««7e-17REI第四步：保存为PageLhtm1。第五步：通过不同浏览器查看网页效果。第六步：请同学完成以上练习题，提交作业：1截图dreamweaver软件中代码的“拆分视图”；2、截图网页在浏览器中的预览效果；3、压缩mySite文件夹;将以上三个内容上传提交。课堂小结(3min)作业布置教学反思1.【实操演示】教师讲解结构元素实1.观看操。实操演2.1发布任示，掌握务】教师在学Html网习通发布技页结构能任务。元素03.【实践指2.完成导】来回巡技能训视，及时帮助练题。学生解决问题。通过对本次课的学习，让学习者了解了HTML的各个常见元索。HTML是网页设计的核心基础，请学习者真正理解每一个标签的含义与使用方法。1 .继续完成技能训练任务，并提交至学习通2 .预学下一次课的内容湖南商务职业技术学院教案授课章节及主题HTML基础（二）课次4教学目标知识目标11 .掌握表格元素table；12 .掌握列表元素；13 .掌握表单元素；能力目标5 .能够进行简单的Html网页文档编辑；6 .能够制作表格、列表和表单元素；素养目标10 .培养学生清晰有序的逻辑思维；11 .培养学生数据分析与总结的意识：12 .培养学生系统分析与解决问题的能力。学情分析知识基础学生已经具备了一定的计算机操作能力和Photoshop>DreanWeaVer软件的基本操作技能，对网页设计有一些基本的了解，能够创建站点和网页文件。学生特点1 .学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。2 .软件课程知识绝大部分同学掌握较好，少部分同学操作不太熟练。3 .解决复杂问题能力弱，缺乏知识迁移能力。教学重点1、表格元素2、列表元素3、表单元素教学难点列表元素教学方法讲授法案例演示法讨论法实践法线上线下混合式教学资源与平台教学平台超星学习通https:Www.X参考书1 .电子商务网页设计与制作，电子工业出版社2 .HTML5+CSS3网页设计与制作，人民邮电出版社参考网络资源1 .菜鸟教程：https:WWW2 .虎课网：https教学过程设计环节教学内容教师活动学生活动1、选人回答：下图中有几个空元?2、选人回答：什么是内联元素。3、选人回答：什么是块级元素。4、选人回答：你是否真正的理解J区别呢，根据你的理解，从下图中可选3人同学来答)。从下图中找H3人同学来答。OKzIlm)-M:r*MWilMIIFfw*，WlHWfy聂?'块级元素和内联元素的I找出3个块级元素(此13个内联元素(此可选MMMlL【课堂活动】教师通过开展各种课堂活动回顾上次课知识点。1.学生积极参与课堂活动。IiIIiiMUiiimmniwm*,”44Cx*Mk*>3wk>w*>k一gi*,*"W-'2*：11、常见的HTML块级元素(1)表格元素tabletable)元素在HTML中用于呈现表格数据，如计划表、价格表、分数、成绩表、员工信息、财务数据和日历等。图1-3-10所示是一个表格的基本结构。L【知识讲授】教师讲解常见的Html块级元素相关知识点。2 .【课堂讨论】表格中常用的标签有哪些？分别表示什么含义？3 .【课堂讨论】:请大家上网找找网页上的表单，把它截下来回复老师，看看谁找的又快又准。表格标题/表头)ZX*/<th>QL三昆,781508880861601.听取教师讲解知识点；2.积极参与课堂活动。/行<tr>985790145l*z679069178Jl简单的HTML表格由table元素、c一个或多个tr、th或td元素组成。CaP格标题，tr元素定义表格行，th元素定义义表格单元格。(2)列表元素HTML列表元素(如ol,ul,dl)在W至J,比如导航栏、新闻列表、菜单、文字列表元素有无序列表Ul元素、有序列表(列表dl元素与列表项Ii元素。无序列表Ul元素无序列表在默认情况下使用“小圆点始，type属性可以将其设置为。或口。基本语法为：ultype=ValUe列表口type可以取三个值，分别为disc、Circl别代表小圆点、空心圆与小正方形。不管是无序列表，还是后面讲到的有都是由Ii元素进行定义。I濠以及流义表元素定口经常用常见的自定义表的开S其中ire,分列表项aption7tion兀歹.表头，tcJ页设计q排版等。)1兀素、”作为列勺容GUl)e与SqUW序列表，知识回顾(15min)知识准备(30min)有序列表ol元素有序列表可以指定项目的符号种类或编号种类。默认情况下使用数字作为列表的开始，type属性可以将其设置为英文或罗马数字。基本语法为:<oltype=value><ol>,其中type可以取5值，取“1”代表数字1、2、3，取“a”时表示小写字母a、b、c，取"A”时表示大写字母A、B、C,取"i”时代表小写罗马数字i、ii、iii,取“I”代表小写字母I、II、IIIO默认情况下有序列表从1开始计数，可以通过Start属性来调整这个值。基本语法:<olstart=value><ol>,start属性定义列表从哪个符号开始，ValUe值始终给出具体的值，始终是数字形式给出。自定义列表dl元素自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始，每个自定义列表项以<dt>标签开始，每个注释以Cdd>标签开始。如图1-3-16所示，dt是标题，dd是内容，dl是承载它们的容器。(3)表单元素form表单是网页与用户交互所不可缺少的元素，网页的访问者通过表单与网页进行交互。常见的表单元素有表单form、输入框input、单行文本框text、多行文本框textarea、单选项radio、复选框checkbox下拉菜单SeleCt、按钮button、密码输入框PaSSWOrd、表单控件名称label和表单控件组fieldset等。对应的html元素如表1-3-1所示。表1-3-1表单元素标签解释<form>定义表单元素<input>用于搜集用户信息。根据不同的type属性值，输入字段可以是文本域、复选框、密码域、单选按钮、按钮等。<label>为input元素定义标注。<