电子商务网页设计与制作 教案全套 电子 第1--27次课 网页设计初了解 --- 任务案例:生活垃圾现状调查(二).docx
《电子商务网页设计与制作 教案全套 电子 第1--27次课 网页设计初了解 --- 任务案例:生活垃圾现状调查(二).docx》由会员分享,可在线阅读,更多相关《电子商务网页设计与制作 教案全套 电子 第1--27次课 网页设计初了解 --- 任务案例:生活垃圾现状调查(二).docx(145页珍藏版)》请在课桌文档上搜索。
1、湖南商务职业技术学院教案授课章节及主题网页设计初了解课次1教学目标知识目标1. 了解有关网页制作的基本知识与网页的构成元素;2. 了解常见的网站类型;3. 理解网页设计配色方法;能力目标1.能够快速了解网页设计的基础知识;素养目标1 .培养学生清晰有序的逻辑思维;2 .培养学生数据分析与总结的意识;3 .培养学生系统分析与解决问题的能力。学情分析知识基础学生已经具备了一定的计算机操作能力和PhOtoShOP软件的基本操作技能,具有一定的图像处理能力,具有一定的审美能力。学生特点L学生爱学习爱思考爱表达,喜欢动手实践,但学生自律性不强,遇到困难时畏难*2 .软件课程知识绝大部分同学掌握较好,少部
2、分同学操作不太熟练。3 .解决复杂问题能力弱,缺乏知识迁移能力。教学重点1.课程认知2.网页框架3.网页元素教学难点网站分析教学方法讲授法案例演示法讨论法实践法线上线下混合式教学资源与平台教学平台超星学习通https:/Www.X参考书I.电子商务网页设计与制作,电子工业出版社2.HTML5+CSS3网页设计与制作,人民邮电出版社参考网络资源1 .菜鸟教程:httpsrwr%,2 .虎课网:https:/教学过程设计环节教学内容教师活动学生活动课程认知(15min)1 .课程定位2 .教学目标3 .教学内容4 .课程考核5 .支撑岗位1.【讲授】教师讲授课程基本情况,激发学生对课程学习的热情。
3、1.学生了解本课程基本情况,确定学习的目标任务导入(2min)李小明是湖南商务职业技术学院2015级电子商务专业的学生,他在暑假社会实践中接触到了一些电子商务企业,这些电子商务企业除了在淘宝、京东等平台进行商品销售外,还需要在互联网上发布企业网站,从而促进企业品牌形象的推广,加强客户对企业的认知度。作为电子商务专业的学生,掌握企业网站的设计与制作是最基本的专业素养要求,对此,小明很困惑,因为他连什么是网页还不知道呢?如果你也跟小明一样有这样的困惑,那么就请跟我一起走进本次任务的学习吧。1.【任务导入】教师通过案例导入本次课的学习目标。1.学生了解本次课学习的目标。任务描述(5min)在百度搜索
4、框中输入以表1所示的“关键词”,找到关键词所对应的宜方网站,访问这些网站的首页,并分析这5个网页的类型、结构、元素与配色等相关属性,填入表1中。表1网页类型及相关属性分析1.【任务描述】讲师讲解本次课需要完成的任务。1.学生了解本次课要完成的任务。关键词1天猫商城网站首页URL网站类型网页结构网页元素网页配色关键词2湖南花木篮网站首页URL网站类型网页结构网页元素网页配色关键词3顺丰快递网站首页URL网站类型网页结构网页元素网页配色关键词4艾瑞网网站首页URL网站类型网页结构网页元素网页配色关键词5知乎网站首页URL网站类型网页构成网页元素网页配色知识准备(35min)1、网页设计相关概念(1
5、)网址(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、6)表格(7)框架(8)表单任务实施(40min)(1) 天猫商城网站的分析(2) 湖南花木篮网站的分析(3) 顺丰速递网站的分析(4) 艾瑞网网站的分析(5) 知乎网站的分析技雄训练作业1:网页类31与艮性分析(方法塞盘:任务1网页设计的7解任努实Jftpdf)1 .【案例分析】教师以天猫商城网站为例对该网站进行分析。2 .【发布任务】教师在学习通发布测试任务。3 .【实践指导】来回巡视,及时帮助学生解决问题。完成技能训练题。思考自测(5min)开展课堂活动网页初了解除随奥东习习1 .【发布任务】教师在学习通发布测试任务。2 .【归纳总结】来回巡视,及时帮助学生解决问题。完成知识检测。课堂小
7、结(3min)通过对本次课的学习,让学生对于网页设计有一个初步的了解,并对WEB标准有一个基础性的认识。作业布置1 .继续完成技能训练任务,并提交至学习通2 .预学下一次课的内容教学反思湖南商务职业技术学院教案授课章节及主题DreamweaverCS6软件的使用课次2知识目标4 .熟悉DreamWeaVer软件的安装与工作环境;5 .掌握站点创建的方法以及基本操作;6 .能够在本地电脑端创建网站站点;7 .能够快速了解网页设计的基础知识;教学目标能力目标1 .能够创建网站站点以及进行站点目录规划;2 .能够利用Drcamweaver软件进行简单网页文档的制作。素养目标4 .培养学生清晰有序的逻
8、辑思维;5 .培养学生数据分析与总结的意识;6 .培养学生系统分析与解决问题的能力。学情分析知识基础学生已经具备了一定的计算机操作能力和Photoshop的基本操作技能,对网页设计有一些基本的了解。学生特点L学生爱学习爱思考爱表达,喜欢动手实践,但学生自律性不强,遇到困难时畏难。2 .软件课程知识绝大部分同学掌握较好,少部分同学操作不太熟练。3 .解决复杂问题能力弱,缺乏知识迁移能力。教学重点1、网站站点创建2、网站目录规划教学难点网站目录规划教学方法讲授法案例演示法讨论法实践法线上线下混合式教学平台超星学习通https:/ww.X教学资源与平台参考书1 .电子商务网页设计与制作,电子工业出版
9、社2 .HTML5+CSS3网页设计与制作,人民邮电出版社参考网络资源1 .菜鸟教程:https:/2 .虎课网:教学过程设计环节教学内容教师活动学生活动知识回顾(5min)1、选人回答:什么是网址URL?2、选人回答:常见网站不同类型有哪些?3、选人回答:B2B属于哪一类网站?4、抢答:淘宝的评论区属于网页中哪个元素?5、抢答:文本中的字体最佳是多大?1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点。1.学生积极参与课堂活动。任务导入(2min)通过任务1的学习与实施,小明对于网页设计的基础知识有了一个初步的了解,看到各种风格鲜明、色彩和谐的网页,小明给自己定了一个目标,一定要把网页
10、设计学好,做出让客户满意的网页作品来。在了解了网页设计后,小明新的问题又出来了,他该用什么软件来编写网页文件呢?L【任务导入】教师通过案例导入本次课的学习目标。L学生了解本次课学习的目标。任务描述(5min)1、每个团队下载好DreannVeaVerCS6软件安装包,将软件安装到自己的电脑中;2、在本地电脑的E盘创建一个名为mySite的文件夹,作为自己网站根目录,在InySite文件夹中创建二级文件夹,分别保存网站首页、公司新闻、产品展示、公司荣誉、在线咨询等5个网页栏目的素材文件,每个栏目中创建下级文件夹images用来保存图片素材文件,StyIe用来保存样式文件;3打开DreanlWea
11、Ver软件,创建网站站点“我的网站”,与E盘的mySite文件夹进行映射,对站点进行管理操作;4、利用DreamWeaVer创建一个简单网页,网页内容为“这是我的第一个网页!,以index.html为文件名保存在mySite根目录下的index文件夹下。L【任务描述】讲师讲解本次课需要完成的任务。L学生了解本次课要完成的任务。知识准备(30min)1、网站站点Dreamweaver可以用于创建单个网页,但在大多数情况下,是将这些单独的网页组合起来成为站点。DreamweaverCS6不仅提供了网页编辑特性,而且带有强大的站点管理功能。2、什么是站点Dreamweaver中的站点包括本地站点、远
12、程站点和测试站点3类。注意:静态网页是标准的HTML文件,采用HTML编写,是通过HTTP在服务器端和客户端之间传输的纯文本文件,其扩展名是htm或html。动态网页以.asp、jspphp等形式为后缀,以数据库技术为基础,含有程序代码,是可以实现如用户注册、在线调查、订单管理等功能的网页文件。3、站点及目录的作用站点是用来存储一个网站的所有文件的,这些文件包括网页html文件、图片文件、服务器端处理程序、音频文件和视频文件等。4、合理建立目录站点的目录结构与站点的内容多少有关。1 .【知识讲授】教师讲解网站相关知识点。2 .【课堂讨论】为什么要建立网站站点呢?如果不建立网站站点,你有可能会在
13、以后的学习中遇到什么困难呢?1.听取教师讲解知识点;2.积极参与课堂活动。在设计网站目录结构时,应该注意以下几点:(1)无论站点的大小,都应该创建一定规模的目录结构,不要把所有的文件都存放在站点的根目录中。如果把很多文件都放在根目录中,很容易造成文件管理的混舌L,影响工作效率,也容易发生错误。(2)按模块及其内容创建子目录。(3)目录层次不要太深,一般控制在5级以内。(4)不要使用中文目录名,防止因此而引起的链接和浏览错误。(5)为首页建立文件夹,用于存放网站首页中的各种文件,首页使用率最高,为它单独建一个文件夹很有必要。(6)目录名应能反映目录中的内容,方便管理维护。任务实施(40min)1
14、、安装好Drecimweaver软件。因发给大家的软件是免安装版,大家只需要将文件夹中的绿色图标dreamweaver,以快捷方式发放到桌面,双击图标就可以正常使用了。囹Corelypes.dll1 .【实操演示】教师以学校官方网站为例讲解站点创建以及目录规划。2 .【发布任务】教师在学习通发布技能任务。3 .【实践指导】来回巡视,及时帮助学生解决问题。1 .观看实操演示,掌握站点创建方法。2 .完成技能训练题。EQDreamweavenexejdvaadameve.dll,dvacore.dll2打开任务2任务实施之DreamweaverCS6软件的使用任务实施文档”。任务2任务实施之Dre
15、amWeaVerCS6软件的使用任务实施文档I任务2DreamweaverCS6的3、从第三步“创建文件夹”开始,逐步完成任务2。4、提交作业至章节测验处。令枝雄泄练/ftnam:r4思考自测(5min)除随堡东习【发布测试】教师在学习通发布随堂练习。学生完成本次课知识自测。课堂小结(3min)通过对本次课的学习,让学生掌握熟悉DreaInWeaVer软件的安装与工作环境,能够利用DreamWeaVer软件进行简单网页文档的制作。作业布置1 .继续完成技能训练任务,并提交至学习通2 .预学下一次课的内容教学反思湖南商务职业技术学院教案授课章节及主题HTML基础(一)课次3教学目标知识目标8 .
16、掌握什么是HTML与XHTML以及区别9 .掌握标签、元素和属性的概念10 .掌握常用的HTML块级元素的语法及使用方法。能力目标3 .能够利用Dreamweaver软件进行简单网页文档的制作;4 .能够熟练使用常见HTML标签进行网页文档的编写。素养目标7 .培养学生清晰有序的逻辑思维;8 .培养学生数据分析与总结的意识;9 .培养学生系统分析与解决问题的能力。学情分析知识基础学生已经具备了一定的计算机操作能力和PhotOShop、Dreamweaver软件的基本操作技能,对网页设计有一些基本的了解。学生特点1 .学生爱学习爱思考爱表达,喜欢动手实践,但学生自律性不强,遇到困难时畏难。2 .
17、软件课程知识绝大部分同学掌握较好,少部分同学操作不太熟练。3 .解决复杂问题能力弱,缺乏知识迁移能力。教学重点4 .内联元素和块状元素的区别5 .Html基本结构元素6 .标题元素和段落元素教学难点Html基本结构元素教学方法讲授法案例演示法讨论法实践法线上线下混合式教学资源与平台教学平台超星学习通https:Www.X参考书1 .电子商务网页设计与制作,电子工业出版社2 .HTML5+CSS3网页设计与制作,人民邮电出版社参考网络资源1 .菜鸟教程:https:/2 .虎课网:https教学过程设计环节教学内容教师活动学生活动知识回顾(IOmin)1、投票:下面哪款软件是集网页制作和管理网站
18、于一身的所见即所得网页代码编辑器?:DreamweaverB:PhotoshopCiFlash2、抢答:什么是站点?为什么要建立网络站点?3、选人回答:什么是本地站点?4、抢答:什么是静态网页,它与动态网页有什么不同?5、抢答:如何合理的建立站点目录?1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点。L学生积极参与课堂活动。任务导入(2min)小明成功地安装了DreanlWeaVerCS6软件,创建了本地站点,生成了第一个网页文件。看到浏览器中显示出来的网页效果,小明高兴之余,想起在创建网页过程中在代码视图中看到的那些代码:head、body等,他一个都不认识,那是些什么呢?1.【任务
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 电子商务网页设计与制作 教案全套 电子 第1-27次课 网页设计初了解 - 任务案例:生活垃圾现状调查二 电子商务 网页 设计 制作 教案 全套 27 了解 任务 案例 生活 垃圾 现状 调查

链接地址:https://www.desk33.com/p-395118.html