电子商务网页设计与制作（微课版）教学教案

电子商务网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号14授课日期月日月日月日月日授课班级课内教学内容：项目1：赏析和规划电子商务网站——了解电子商务网站知识链接课程思政设计：（1）通过对比国内外电子商务网站的形式和规模，引导并培育学生更加自觉地增强文化自信，让中华民族的文化理念走出国门。（2）通过小组合作探究，培养学生团结协作的工作作风，分析电子商务模式以及供应链的创新与更迭，培养学生的创新意识。（3）利用案例激发和培养学生的爱国情怀，将个人命运与国家、民族和社会命运融合在一起。（4）注重社会主义精神文件建设，反对不良思想和作风。课外学习任务：（1）课前：以小组为单位，浏览国内各类网站，观察电子商务网站与其他网站的区别并以文字的形式总结电子商务网站的特点。（2）课后：=1\*GB3①分析天猫电子商务网站页面中包含那些元素。=2\*GB3②分析京东电子商务网站页面中包含了那些视觉营销手段。教学目标：知识目标了解网页的构成要素；掌握电子商务网站的概念和特点；了解电子商务网站的分类；掌握电子商务网站视觉营销的原则；熟悉电子商务网站的开发流程。能力目标正确区分电子商务网站的特点；理解电子商务网站视觉营销原则。素质目标强烈的事业型和责任心；忠于职守，热爱本职工作，配合团队其他人员完成工作；自觉履行电子商务网页设计师的各项职责。重点难点及解决方法：（1）重点：电子商务网站的特点与分类。解决方法：采用“问题引导教学”，先让学生观察知名电商网站页面，然后让学生们讨论分析得出结论，再由老师引导总结得出电子商务网站的不同分类及不同页面的内容和特点。（2）难点：电子商务网站视觉营销原则。解决方法：通过案例演示+教师对比分析讲解的方式，对现有成功电子商务网站页面进行分析，帮助学生掌握电子商务视觉营销的原则。学会分辨一个成功的电子商务页面应具备的条件，将这种理解持续融入到以后的学习过程中。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段课前调研成果展示与汇报【课前调研成果展示与汇报】教师向学生展示多种网站页面效果，引导学生说出网站页面中包含的主要元素。教师注意对这些组成元素进行讲解，帮助学生理解各元素功能的同时，了解不同元素在页面中的作用。德育教育：培育学生独立思考、认真聆听他人展示与汇报的优良品质；【根据调研结果引出新课】在讲解网站元素时，着重引出电子商务网站的概念。通过图片演示分析其独有的特点，并与学生一起总结出一个电子商务网站需要具备的功能。德育教育：培育学生文化自信、道路自信。2.布置任务【教师展示教学载体，创设学习情境】提出电子商务网站类别的概念，让学生对号入座，将找到的多个电子商务网站归类为信息服务类、广告类、交易类、管理类和综合类。3.任务分析【分析综合类电子商务网站的特点】提出综合类电子商务网站B2B、C2C和B2C三种模式，以小组为单位，讨论三种模式的功能，并分别举例说明。4.知识准备（教学难点）【分析页面案例，掌握电子商务网站视觉营销原则】主题突出原则整体设计原则内容与形式统一原则准确表达与良好体验原则【知识点学习情况检测，教学策略调整】教师通过课堂提问，了解学生对知识的掌握情况，对共同的错误点或存在的问题，进一步有针对性地讲解。【学生实践，找出视觉营销手段】通过向学生展示运用视觉营销的电子商务网站页面，引导学生深度理解视觉营销对电子商务网站的作用及重要性。【通过案例分析，进一步加深学生对视觉营销原则的理解】教师展示多个电子商务网站页面，带领学生共同分析视觉营销给电子商务页面带来的不同效果。5.任务实施（教学重点）【教师讲解网站的开发流程，做好学生未来的就业定位】教师引导学生说出参与电子商务网站开发的职位教师展示电子商务网站招聘信息，帮助学生理解【了解各职业的工作内容，】教师讲解电子商务网站开发流程，并对每一过程中的职业要求进行分析。帮助学生了解整个网站的开发过程，以及开发团队中各个职位的前后因果关系，以便应对未来工作中遇到的各种问题。思想、素质教育：贯穿学生实践过程中（1）培养学生在规定时间内完成特定任务的时间观念意识；（2）教育学生自觉遵守《中华人民共和国电子商务法》，不虚假宣传，诚信经营；（3）培养学生踏实认真、精益求精的工作作风6、技能提升【新媒体对电子商务网站的影响】以小组为单位，学生浏览移动端电子商务网站，找出同一个电子商务网站PC端页面与移动端页面的区别，并试着阐明原因。思想、素质教育：贯穿学生实践过程中（1）通过理解PC端与移动端的不同，培养学生精益求精的工匠精神；（2）教育学生自觉遵守《中华人民共和国电子商务法》，不虚假宣传，诚信经营；（3）展示我国在“互联网+”的时代下，电子商务蓬勃发展的成果。【展示汇报】随机抽选1~3个小组进行展示汇报。7.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。8．小结与作业（课外学习）小结：本节课在教师的带领下，学生们从课前调研到课程实施，通过教师讲解、课堂互动等环节充分学习了电子商务网站的概念和特点，又通过案例的分析解读，与理论知识相结合，全面细致的学习了电子商务网站的视觉营销原则和开发流程。作业：学生课后可通过网络查找关于电子商务网站的相关信息，开拓视野并加深理解。9.板书设计了解电子商务网站知识链接分析任务：网页的构成元素知识准备：电子商务网站的概念和特点任务实施：电子商务网站的分类技能提升：电子商务网站的视觉营销和开发流程教学评价小结、作业课外学习任务及学习指导课前：【教师布置调研任务】调研主题：《电子商务网站页面与其他类型网站页面的区别》要求：以小组为单位，对比分析国内电商网站页面与其他类型网站要么存在的差异，制作汇报PPT（至少调研3个国内电商网站；梳理出差异、PPT不得不于8页，图文并茂），提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【教师对各组调研成果进行评价】教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：【学生分析天猫电子商务网站页面中包含那些元素】小组成员团结协作，共同分析天猫电子商务网站页面的主要构成元素。并能准确说出各元素的特点以及对电子商务活动的影响和作用。在此过程中，教师使用“微信群”对学生进行指导。【学生分析京东电子商务网站页面中包含了那些视觉营销手段】学生浏览京东电子商务网站，模拟普通用户浏览整个购买转化过程，总结在整个购买过程中都接收到了那些视觉营销方式，并阐明那种营销方式更吸引人，更能促进用户浏览并提升转化率。教师设置“电子商务网站开发过程中各部门合作关系”主题讨论题目，学生均可参与讨论，分享心得。填表说明：1.本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等；3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。

电子商务网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号14授课日期月日月日月日月日授课班级课内教学内容：项目1：赏析和规划电子商务网站——了解电子商务网站任务一赏析电子商务网站课程思政设计：（1）通过浏览国内各大电子商务网站，增强学生的民族自信心和自豪感，为实现中华民族伟大复兴的中国梦不懈奋斗。（2）通过小组合作探究，引导学生未来就业创业选择电商领域，实现自我价值和社会价值，用自己的聪明才智为中国的电商事业发展贡献力量。（3）让学生参与讨论和发言，适当地引导学生遵守电子合同法、电子签名法、电子商务法等相关法律，增强法律意识和法律素养，坚定中国特色社会主义法治信念，积极维护电子商务活动安全。（4）注重社会主义精神文件建设，反对不良思想和作风。课外学习任务：（1）课前：以小组为单位，浏览国内各大电子商务网站，分析各个网站页面的必要组成和布局要点，同时找出页面中包含的颜色并以PPT的形式记录下来。（2）课后：=1\*GB3①分析当当电子商务网站页面元素和页面布局方式。=2\*GB3②分析网易严选电子商务网站页面色彩搭配方案。教学目标：知识目标了解网页页面结构分类；掌握页面导航工具；理解颜色在网页设计中的重要性；掌握提高用户体验的要素；掌握赏析电子商务网站页面的要点。能力目标能够正确区分不同页面结构的页面；能够理解不同位置导航的作用；能够理解色彩搭配在网页设计中的作用。素质目标较强的审美能力和观察能力；把握沟通技巧，善于聆听的能力；自觉履行电子商务网页设计师的各项职责。重点难点及解决方法：（1）重点：分析页面结构和配色。解决方法：通过案例演示+启发式教学的方法，教师分析知名电商网站页面，引导学生积极思考，理解页面结构和页面色彩搭配对电子商务网站效果的影响，培养学生的思维能力和分析问题解决问题的能力。（2）难点：提高电商网站用户体验的要素。解决方法：通过案例演示+教师对比分析讲解的方式，对现有成功电子商务网站页面进行分析，帮助学生掌握确定正确的网页尺寸和创建合理页面布局的方法和技巧。从实用的角度帮助学生理解提高用户体验的重要性。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段课前调研成果展示与汇报【课前调研成果展示与汇报】教师向学生展示多种电子商务网站页面，引导学生说出有那些要素会影响用户浏览。教师注意着重从页面结构和色彩搭配方面引导学生，让学生掌握影响网页效果的视觉要素。德育教育：培育学生独立思考、发现问题和提出问题的优良品质；【根据调研结果引出新课】从网站的功能栏目、色彩和页面布局进行讲解，帮助学生快速了解电子商务网站与普通网站在页面上的不同。同时，通过深度剖析，学生能够了解电子商务网站的必要组成和布局要点，为后面制作综合电子商务网站打下基础。德育教育：培育学生遵纪守法的意识和个人的社会信誉意识。2.布置任务【教师展示教学载体，创设学习情境】教师通过分析一家电子商务网站的各项功能，帮助学生了解设计制作电子商务网站的一些要点。本任务针对电子商务网站的首页面进行分析。从网站的功能栏目、色彩和页面布局进行讲解，帮助学生快速了解电子商务网站与普通网站在页面上的不同。同时，通过深度剖析，读者能够了解电子商务网站的必要组成和布局要点，为后面制作一个综合电子商务网站打下基础。该网站是一家B2C类型的、综合性的电子商务网站，主要经营数码产品、日用百货、服装服饰等产品。与天猫、京东、亚马逊等电子商务平台相似，该网站主要为普通用户提供服务。3.任务分析【分析电子商务网站首页】教师分析网站的类型、主要经营产品、竞争对手和目标用户，引导学生深入理解网页设计的核心。4.知识准备（教学难点）【分析电子商务网站页面结构种类和色彩】常见页面结构分类页面导航设置色彩独有的色彩意向页面色彩搭配技巧【知识点学习情况检测，教学策略调整】教师通过课堂提问，了解学生对知识的掌握情况，对共同的错误点或存在的问题，进一步有针对性地讲解。【学生实践，加深对页面结构和色彩的理解】通过向学生展示不同的电子商务网站页面，引导学生说出页面的布局方式及色彩搭配方案。【通过模拟练习，进一步加深学生掌控页面色彩搭配的能力】教师提出一种主色，让学生说出三种色彩搭配方案。即页面的主色、辅色和背景色。5.任务实施（教学重点）网页的用户体验是由很多因素决定的，既由一些操作是否方便决定，也由页面美观性决定。总之，网页设计至少要符合目标用户的审美习惯，并具有一定的引导性。【确定网页的尺寸】网页尺寸的设定和书本不同，书本的开本基本是固定的，作者和读者看到的尺寸都是一样的。而网页的尺寸受限于两个因素：显示器的尺寸和浏览器软件。用户在不同的显示器上或使用不同的浏览器浏览同一个网页都会产生不同的体验。显示器的尺寸：显示器的品牌很多，尺寸也不尽相同。常见的有23in、24in、27in和29in等。虽然“曲面屏”和“带鱼屏”等特殊尺寸的显示器也比较常见，但由于其主要应用于特殊需求的行业（例如“曲面屏”常应用于电子竞技行业，“带鱼屏”常应用与视频剪辑行业），此处不作为主要讨论对象。浏览器：时下浏览器很多，常用的浏览器包括Edge、Firefox、Google和Safari。不同的页面设计在不同尺寸的显示器上或不同浏览器上的显示效果可能完全不同。所以在设计页面时，一定要考虑到显示器和浏览器等因素的影响。过去，网页的尺寸以分辨率800dpi×600dpi为主，慢慢过渡到1024dpi×768dpi甚至是1280dpi×1024dpi。而且现在大部分的显示器都是大屏幕宽屏，所以在网站设计时要将这部分用户的体验考虑进来。网站页面宽度对于网站的页面效果尤为重要。在确定网页宽度之前，先看一下现在国内较为著名网站的页面宽度常见网站页面宽度站点页面宽度/dpi站点页面宽度/dpi新浪1000网易960淘宝1190腾讯1000搜狐950优酷1190以上6个网站都属于页面结构复杂的门户型网站。新浪和腾讯的页面宽度都选择了1000dpi，搜狐和网易的页面宽度分别为950dpi和960dpi。淘宝和优酷的页面宽度都为1190dpi。由于当前网站类型日益丰富，浏览器种类众多，就造成了页面宽度也不一致的情况。设计师在设定页面宽度时，除了要考虑网站本身的特性以外，还要考虑一些浏览器本身特性对页面宽度的影响。浏览器影响页面宽度的因素有滚动条和边界。【合理的页面布局】用户在浏览网页的时候，总是希望可以快速找到自己需要的内容，否则用户通常会选择马上离开。合理的页面布局可以使用户快速发现网站的核心内容和服务，本节将针对页面的合理布局进行学习。无论设计师想怎样布局页面，都要遵循用户的浏览习惯，将网站内容合理有序地呈现在用户面前，把重要的信息放置在页面的醒目位置，使其更易被用户发现。同时，网站的界面布局也在一定程度上反映出网站的运营思路，并影响最终的网站营销效果。（1）从上到下，从左到右，按照内容重要性的优先级有序放置对于用户来说，设计美观、操作简单的页面更受欢迎。根据人的阅读习惯，可以将页面内容分栏摆放。采用简单的单栏或双栏布局，用户只需要从左到右、从上到下浏览页面即可。可以将重要的内容（如新闻更新、会员注册等内容）放置在页面的左侧或上部，其他内容根据重要的程度依次摆放。（2）重要的内容一定要放在页面显眼的位置人视觉的浏览顺序通常是从左上角滑向右下角，然后回到中心再滑向右上，最后滑向左下。根据这个习惯，将页面中的不同内容依次放置在不同位置，将重要内容放置在左上角位置。也可以放置在页面中间位置，以便被用户反复查看。（3）建立清晰的视觉层次感用户浏览页面时通常都会对视觉层次进行分解，筛选出需要的东西。好的视觉层次通过预先处理，用一种用户能快速理解的方式对页面进行组织并区分优先级，从而减少了用户的工作。假如一个页面没有清楚的视觉层次，所有内容都看起来一样重要，势必会降低用户的浏览速度。（4）同级页面布局要统一作为同一站点中的同级页面，例如网站的所有二级页面或网站用户注册页面，都要尽量保持一致的设计风格和布局，不要为了追求新奇而改变设计。如果用户每打开一个页面都要重新熟悉布局，则会严重影响体验，会造成网站整体感觉凌乱，毫无章法。网站如果没有了统一风格，就很难被用户记住。（5）合理的应用嵌套网页中的内容很多，要一一罗列出来会占用大量的页面空间。对于页面的同级别或同类的内容，可以通过嵌套的方式展示，既可以节省空间，又方便用户快速查找。（6）合理地体现视觉关联网站中的内容具有一定的关联性，用户浏览完一项内容后，可能会浏览与该内容相关的其他内容。设计页面时，要巧妙地利用图像和图标关联内容，方便用户快速找到具有连贯性的内容。思想、素质教育：贯穿学生实践过程中（1）培养学生在规定时间内完成特定任务的时间观念意识；（2）培养学生的社会责任感和良好的社会道德习惯，在参与社会活动中学做文明人、学做社会人；（3）培养学生踏实认真、精益求精的工作作风。6、技能提升【学生学会如何赏析一个电子商务网站页面】以小组为单位，学生浏览D1优尚网站，教师从页面布局和页面配色多个方面分析网站首页、商品列表页和产品详情页。深刻体会合理的页面布局和准确的色彩搭配对提升网站浏览用户体验起到的作用。思想、素质教育：贯穿学生实践过程中（1）通过掌握赏析网站页面的方法，培养学生的创新精神和学习习惯；（2）提高知识和能力的迁移能力，做到“知其然”，还要“知其所以然”；（3）教育学生自觉遵守《中华人民共和国电子商务法》，不虚假宣传，诚信经营。【展示汇报】随机抽选1~3个小组进行展示汇报。7.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。8．小结与作业（课外学习）小结：本节课在教师的带领下，学生们从课前调研到课程实施，通过教师讲解、课堂互动等环节充分学习了如何提高页面用户体验，与理论知识相结合，帮助学生掌握从页面结构和色彩搭配等多个方面赏析网站页面，做到知己知彼，有的放矢。为后面课程中学生独立完成网页设计工作铺平道路。作业：学生课后可通过网络查找各个综合性电子商务网站，从页面结构和色彩搭配两个方向对页面进行分析，开拓视野的同时并加深理解。9.板书设计了解电子商务网站任务一赏析电子商务网站分析任务：分析电子商务网站首页知识准备：分析页面结构与色彩任务实施：提高用户体验的要素技能提升：赏析电子商务网站页面教学评价小结、作业课外学习任务及学习指导课前：【教师布置调研任务】调研主题：《如何判断一个电子商务网站页面是否成功》要求：以小组为单位，分析国内电商网站页面，总结页面中的那些因素会影响自己的浏览进度和购买欲望，制作汇报PPT（至少调研3个国内电商网站；梳理出差异、PPT不得不于8页，图文并茂），提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【教师对各组调研成果进行评价】教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：【学生分析当当电子商务网站页面尺寸和页面结构】小组成员团结协作，共同分析当当电子商务网站页面的最近浏览尺寸，分析其页面的页面布局是否合理，是否符合用户的浏览习惯，有无需要改进的地方。在此过程中，教师使用“微信群”对学生进行指导。【学生分析网易严选电子商务网站页面的色彩搭配方案】学生浏览网易严选电子商务网站页面，说出页面色彩搭配方案及对应的目标用户。并我改页面提供2套以上正确的页面配色方案，教师使用“微信群”对学生进行指导。教师设置“电子商务双11购物节页面布局和配色”主题讨论题目，学生均可参与讨论，分享心得。填表说明：1.本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等；3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。

电子商务网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号14授课日期月日月日月日月日授课班级课内教学内容：项目1：赏析和规划电子商务网站——了解电子商务网站任务二规划“学设计”电子商务网站课程思政设计：（1）通过设计电子商务网站页面，增强学生的民族自信心和自豪感，为实现中华民族伟大复兴的中国梦不懈奋斗。（2）通过小组合作探究，引导学生未来就业创业选择电商领域，实现自我价值和社会价值。（3）引导学生热爱专业、热爱科学、热爱学习、热爱国家，激发民族、国家、社会和家庭责任感，培养学生良好的思想道德素质和健全的人格，促进学生的健康成长，达到立德与树人、育人与育才的有机统一。（4）注重社会主义精神文件建设，反对不良思想和作风。课外学习任务：（1）课前：以小组为单位，浏览国内各大电子商务网站，分析电子商务网站的结构，同时采用手绘的方式绘制电子商务网站页面的线框图。（2）课后：=1\*GB3①完成新能源科技公司电子商务网站的策划。=2\*GB3②设计新能源科技公司电子商务网站首页设计稿。教学目标：知识目标了解电子商务网站的结构；掌握完成电子商务网站线框图；掌握确定页面配色方案的方法；了解绘制线框图的常用软件；掌握设计电子商务网站页面的方法。能力目标能够准确理解电子商务网站的结构；能够完成电子商务网站页面线框图的绘制；能够设计出符合要求的电子商务网站页面。素质目标较强的审美能力和观察能力；掌握设计电子商务网站的步骤；自觉履行电子商务网页设计师的各项职责。重点难点及解决方法：（1）重点：电子商务网站页面线框图绘制。解决方法：通过案例演示+启发式教学的方法，教师分析“学设计”电子商务网站页面，引导学生积极思考，能够准确掌握“学设计”电子商务网站的结构，培养学生的思维能力和分析问题解决问题的能力。（2）难点：设计“学设计”电子商务网站。解决方法：通过案例演示+教师对比分析讲解的方式，对“学设计”电子商务网站进行分析，帮助学生掌握“学设计”电子商务网站的结构，可以准确的完成“学设计”电子商务网站的线框图。同时完成正确的设计图稿。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段课前调研成果展示与汇报【课前调研成果展示与汇报】教师向学生分析“学设计”电子商务网站的结构，引导学生说出按照网站内容，可规划哪些栏目。教师注意着重应从网站的结构方面引导学生，让学生掌握规划“学设计”电子商务网站的结构。德育教育：培育学生独立思考、发现问题和提出问题的优良品质。【根据调研结果引出新课】从网站的结构、页面布局以及确定页面色调进行讲解，帮助学生能够准确完成“学设计”电子商务网站的线框图。同时，通过深度剖析，使学生能够了解“学设计”电子商务网站的设计步骤，为后面设计电子商务网站图稿打下基础。德育教育：引导学生热爱专业，热爱学习；促进学生的健康成长。2.布置任务【教师展示教学载体，创设学习情境】该项目为视频教程网站，用户注册为会员后，通过付费的方式购买单节课程或成为网站VIP会员观看全部视频。按照网站内容，将网站分为首页、在线课程、书籍光盘和图文教程4个栏目。1．首页首页中主要用来显示最新发布的或指定的视频、书籍和教程，让用户第一时间看到网站的最新产品和最想推广的产品。同时，用户可以通过首页中的各种链接，快速到达想要了解的内容页面。2．在线课程该页面采用罗列的方式展示网站中的各类在线课程。建立分类链接能方便用户查找想要观看的课程视频。3．书籍光盘该页面与在线课程的表现形式一致，采用罗列的方式将图书展示给用户。为了便于查找，书籍按照行业和软件进行了分类。4．图文教程该页面主要以图像和文本的形式向用户展示设计相关知识。同样对相关内容进行了分类，用户可以根据行业和软件进行查找。确定了二级页面以后，可以根据需求进一步联想和扩展，得到整个网站的页面结构，绘制出页面结构图，如图1-31所示。确定了页面结构的最大好处就是可以清晰地知道页面之间的关系，在设计和制作页面时可以更加地精准快速。除了以上功能外，网站还有一个重要的功能模块，即会员系统。一个合理的操作流程设计常会提高网站访问的便捷性，同时也是将用户划分为不同用户群的最好方式。3．任务分析【分析“学设计”电子商务网站】教师分析电子商务网站页面的结构，同时按照网站内容可以将网站分为哪些栏目。每个栏目中包含的内容及想要向用户传达的信息是什么。4.知识准备（教学难点）【分析线框图的作用，线框图的构成】线框的作用线框图的主要构成网站页面线框图的作用与绘制线框图与设计稿的关系【知识点学习情况检测，教学策略调整】教师通过课堂提问，了解学生对知识的掌握情况，对共同的错误点或存在的问题，进一步有针对性地讲解。【学生实践，加深对电子商务网站结构的理解】通过分析“学设计”电子商务网站的页面结构，引导学生完成电子商务网站页面线框图的绘制。【通过模拟练习，使学生可以正确的设计电子商务网站】通过讲解“学设计”电子商务网站的结构以及线框图的绘制。使学生可以正确的设计出“学设计”电子商务网站。5.任务实施（教学重点）通过绘制网站的线框图，网站的基本结构和交互效果确定下来了，接下来就可以开始页面的设计工作了。在设计页面之前，要将整个页面的色调确定下来。【确定主色】该页面是一个培训类网站，故可以选择代表科技的蓝色和代表教育的绿色作为主色。科技蓝（#2f5496）教育绿（#538135）但考虑到网站中的视频教程多为互联网类的教材，所以排除了绿色，选择了蓝色作为主色。但蓝色颜色过于深沉，与设计行业多姿多彩的寓意相违背，所以提高蓝色的明度，选择较为活泼清新的青色作为网站的主色。青色（#0997eb）【确定辅色】主色确定后，接下来确定辅色。通常可以选择同色搭配、临色搭配和补色搭配三种方式。同色搭配可以实现整体风格一致的效果，但对比不强烈。临色搭配可以实现丰富的层次感，但对于需要突出的内容表现不足。补色搭配对比强烈，但不适宜大面积地使用。结合本项目的特点，可以采用小面积补色搭配法。主色－数码蓝（#00b0f0）辅色－中国红（#ff0000）辅色－活力橙（#fa9632）【文本颜色】页面中的文本通常选择黑色或者白色。标题文本或重点突出的文本使用辅色。纯黑的文本过于生硬，故页面中使用深灰色作为文本的颜色。文本色（#7f7f7f）【完成设计】确定配色方案后，即可按照线框图的规划开始页面的设计了。常用的设计软件有Photoshop、Illustrator和AdobeXD等。设计完成的部分页面如图。主页设计稿二级页设计稿项目页设计稿详情页设计稿【完成电子商务网站线框图】教师讲解绘制线框图的重要性，以及线框图的版块构成。使学生可以掌握准确的绘制线框图，并可以理解绘制线框图的重要性。【设计电子商务网站】教师首先讲解常用的设计软件，使学生了解有哪些常用软件可以使用。接下来讲解如何确定页面的配色方案，包括确定主色、辅色以及文本颜色；通过以上的讲解进行“学设计”电子商务网站的设计。思想、素质教育：贯穿学生实践过程中（1）培养学生在规定时间内完成特定任务的时间观念意识；（2）培养学生良好的思想道德素质和健全的人格，促进学生的健康成长，达到立德与树人、育人与育才的有机统一；（3）培养学生踏实认真、精益求精的工作作风。6、技能提升【电子商务网站会员页面设计】以小组为单位，学生进行电子商务网站会员页面的设计，教师从页面布局和页面配色进行分析，使学生可以正确的设计出会员系统页面。思想、素质教育：贯穿学生实践过程中（1）通过对“学设计”电子商务网站的设计，培养学生的创新精神和设计能力；（2）提高学生举一反三的学习能力，合理的进行规划设计；【展示汇报】随机抽选1~3个小组进行展示汇报。7.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。8．小结与作业（课外学习）小结：本节课在教师的带领下，学生们从课前调研到课程实施，通过教师讲解、课堂互动等环节充分学习了如何规划“学设计”电子商务网站的体验，与理论知识相结合，帮助学生掌握完成电子商务网站线框图以及设计电子商务网站页面的方法和技巧。系统的掌握电子商务网站页面的规划与设计方法。作业：学生课后可通过网络查找各类电子商务网站，完成电子商务网站会员线框图的绘制，然后再根据页面的配色方案，完成会员页面的设计。9.板书设计了解电子商务网站任务二规划“学设计”电子商务网站分析任务：分析“学设计”电子商务网站知识准备：电子商务网站线框图任务实施：设计电子商务网站页面技能提升：设计电子商务网站会员页面教学评价小结、作业课外学习任务及学习指导课前：【教师布置调研任务】调研主题：《通过线框图快速展示电子商务网站结构》要求：以小组为单位，分析国内外电子商务网站的结构，并通过手绘的方式，将网站的线框图绘制出来，制作汇报PPT（至少调研1个国内外电商网站；阐述页面结构和配色方案、PPT不得不于8页，图文并茂），提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【教师对各组调研成果进行评价】教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：【完成新能源电子商务网站页面策划及线框图绘制】小组成员团结协作，共同分析新能源电子商务网站的结构，分析每个栏目中所包含的内容，完成网站页面线框图的绘制。在此过程中，教师使用“微信群”对学生进行指导。【学生设计新能源电子商务网站首页设计稿】根据任务二所学内容，学生完成新能源科技公司电子商务网站的策划并完成首页的设计工作。教师使用“微信群”对学生进行指导。教师设置“线框图与设计稿的关系”主题讨论题目，学生均可参与讨论，分享心得。填表说明：1.本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等；3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。

电子商务网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号14授课日期月日月日月日月日授课班级课内教学内容：项目2：创建并管理电子商务网站站点——掌握网站搭建基础知识链接课程思政设计：（1）在系统讲解专业知识的过程中注重专业知识的价值引领作用，同时必须具备正确的道德认知和良好的道德情操。（2）通过小组合作探讨，培养学生团结协作的工作作风，掌握网站搭建基础，培养学生的创新意识。（3）培养学生良好的思想道德素质和健全的人格，促进学生的健康成长。（4）注重社会主义精神文明建设，反对不良思想和作风。课外学习任务：（1）课前：以小组为单位，探讨电子商务网站制作的相关术语，充分理解理解相关术语有利于用户网站站点的建立以及相关的学习。（2）课后：=1\*GB3①分析远程站点和本地站点的内容以及两者之间有何相同点和不同点。=2\*GB3②分析如要要使站点的结构清晰，需要考虑哪些方面。教学目标：知识目标掌握电子商务网站制作相关术语；理解远程站点的特点；理解本地站点的特点；掌握统一资源定位符（URL）；熟悉站点规划。能力目标熟悉电子商务网站制作相关术语；正确区分远程站点与本地站点的特点。素质目标在掌握网站搭建基础上，理解并应用专业知识；丰富知识结构，提升专业技能；自觉履行电子商务网页设计师的各项职责。重点难点及解决方法：（1）重点：电子商务网站制作相关术语。解决方法：采用“视频教学法”，为学生播放电子商务网站制作相关术语的视频，让学生深入掌握具体的相关术语，同时培养学生的自学能力。（2）难点：统一资源定位符（URL）。解决方法：通过“视频教学法+讨论式教学法”，为学生播放统一资源定位符的相关知识，帮助学生掌握统一资源定位符。同时与学生共同讨论统一资源定位符按照其位置不同可划分为哪些类型，以及各类型的特点。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段课前调研成果展示与汇报【课前调研成果展示与汇报】教师向学生展示电子商务网站文件，引导学生说出自己所了解的电子商务网站制作的相关术语。教师注意讲解站点规划工作的优势，帮助学生理解站点规划的好处以及作用。德育教育：培育学生独立思考、认真聆听他人展示与汇报的优良品质。【根据调研结果引出新课】在讲解电子商务网站制作的相关术语时，着重引出远程站点与和本地站点的特点。通过视频演示讲解统一资源定位符，并与学生一起总结如果要使站点的结构清晰，需要考虑哪些方面。德育教育：培养学生良好的思想道德素质和健全的人格，促进学生的健康成长。2.布置任务【教师展示教学载体，创设学习情境】教师通过播放电子商务网站相关术语的视频，通过视频的播放使学生充分理解相关术语有利于用户网站站点的建立以及后续相关知识的学习。3.任务分析【分析远程站点和本地站点的特点】教师讲解站点的内容，同时按照其功能的不同，可以分为远程站点和本地站点。教师着重讲解远程站点和本地站点的特点。4.知识准备（教学难点）【电子商务网站制作相关术语】协议超文本传输协议（HypertextTransferProtocol，HTTP）是访问Web上资源必须遵循的规范。地址统一资源定位符（UniformResourceLocator，URL）用来标识Web页面中的资源，WWW按统一命名方案访问Web页面资源。HTML使用超文本标记语言（HypertextMarkupLanguage，HTML）创建的文档称为HTML文档，扩展名为.htm或.html，可以在Web上直接访问。HTML文档使用HTML标记和元素建立页面并将其保存到服务器上，与互联网连接。服务器服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求并进行处理，因此一般来说，服务器应具备承担服务并且保障服务的能力。浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。主页用户进入某个电子商务网站后首先看到的网页称为“主页”，也称为“首页”。首页承载了一个网站的所有主要内容，顾客可以按照首页中的分类来精确、快速地找到自己想要的商品或服务。【知识点学习情况检测，教学策略调整】教师通过课堂提问，了解学生对知识的掌握情况，对共同的错误点或存在的问题，进一步有针对性地讲解。【学生实践，加深电子商务网站相关术语】通过向学生展示相关视频图片，引导学生深度理解各个相关术语的具体内容。【通过案例分析，进一步加深学生对电子商务网站网页元素的理解】教师展示企业电子商务网站页面，带领学生共同分析网站网页的元素组合。5.任务实施（教学重点）【教师讲解统一资源定位符（URL）】URL是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。基本URL包含协议、服务器名称（或IP地址）、路径和文件名。例如：协议://授权/路径/查询协议用来告诉浏览器如何处理将要打开的文件。最常用模式就是超文本传输协议（HTTP），这个协议可以用来访问网络。除了HTTP外，其他URL协议如表所示。文件所在的服务器的名称或IP地址，后面是到达这个文件的路径和文件本身的名称。服务器的名称或IP地址后面有时还跟一个冒号和一个端口号。路径部分包含等级结构的路径定义，一般来说，不同部分之间以斜杠（/）分隔。询问部分一般用来传送对服务器上的数据库进行动态询问时所需要的参数。统一资源定位符按照其位置的不同可以分为绝对URL和相对URL。1．绝对URL绝对URL显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。例如：www.******.com就是一个绝对URL。2．相对URL相对URL以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。如果目标文件与当前页面（也就是包含URL的页面）在同一个目录，那么这个文件的相对URL仅仅是文件名和扩展名；如果目标文件在当前目录的子目录中，那么它的相对URL是“子目录名/目标文件的文件名.扩展名”，例如：images/back.jpg就是一个相对URL。如果要引用文件层次结构中更高层目录中的文件，那么使用两个句点和一条斜杠。可以组合和重复使用两个句点和一条斜杠，从而引用当前文件所在的硬盘上的任何文件，例如：../images/back.jpg思想、素质教育：贯穿学生实践过程中（1）培养学生在规定时间内完成特定任务的时间观念意识；（2）培养学生的社会责任感和良好的社会道德习惯；（3）培养学生踏实认真、精益求精的工作作风。6、技能提升【教师讲解站点规划】以小组为单位，学生讨论如果要使站点的结构清晰，需要从哪些方面进行考虑。划分站点目录；不同种类的文件放在不同的文件夹中；本地站点和远程服务器站点使用统一的目录结构。思想、素质教育：贯穿学生实践过程中（1）通过讨论相关知识，使学生加深掌握所学知识，培养学生自学能力；（2）引导学生热爱专业、热爱学习；促使学生健康发展；（3）引导学生成为创新型、复合型电子商务高级专业人才。【展示汇报】随机抽选1~3个小组进行展示汇报。7.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。8．小结与作业（课外学习）小结：本节课在教师的带领下，学生们从课前调研到课程实施，通过教师讲解、课堂互动等环节充分学习了电子商务网站制作相关术语以及远程站点和本地站点的特点，又通过视频图片与理论知识相结合，全面细致的学习了统一资源定位符和站点规划。作业：学生课后可通过网络查找关于站点规划的相关信息，开拓视野并加深理解。9.板书设计掌握网站搭建基础知识链接分析任务：远程站点和本地站点特点知识准备：电子商务网站制作相关术语任务实施：统一资源定位符（URL）技能提升：站点规划教学评价小结、作业课外学习任务及学习指导课前：【教师布置调研任务】调研主题：《电子商务网站制作相关术语》要求：以小组为单位，探讨电子网站制作相关术语，制作汇报PPT（至少罗列3个相关术语；梳理主要内容以及相关用途、PPT不得少于8页，图文并茂），提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【教师对各组调研成果进行评价】教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：【学生分析远程站点和本地站点的内容以及两者之间有何相同点和不同点】小组成员团结协作，共同分析远程站点和本地站点的内容以及两者之间的相同点和不同点。在此过程中，教师使用“微信群”对学生进行指导。【学生分析如要使站点的结构清晰，需要考虑哪些方面】根据本节课的学习内容，学生阐述如果要使站点的结构清晰，需要考虑的各方面内容。通过此次分析，加深学生掌握所学内容。教师使用“微信群”对学生进行指导。教师设置“如何进行站点规划”主题讨论题目，学生均可参与讨论，分享心得。填表说明：1.本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等；3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。

电子商务网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号14授课日期月日月日月日月日授课班级课内教学内容：项目2：创建并管理电子商务网站站点——掌握网站搭建基础任务一创建网站文件结构课程思政设计：（1）通过教师讲解创建并管理电子商务网站站点的知识，增强学生的民族自信心和自豪感。（2）通过小组合作讨论，引导学生未来就业创业选择电商领域，实现自我价值和社会价值。（3）引导学生热爱专业、热爱科学、热爱学习、热爱国家，激发民族、国家、社会和家庭责任感。（4）注重社会主义精神文明建设，反对不良思想和作风。课外学习任务：（1）课前：以小组为单位，观察国内各大电子商务网站的构建站点，分析各个网站结构与脉络，同时梳理出构建完善的网站结构与脉络对网站建设的重要意义并以PPT的形式记录下来。（2）课后：=1\*GB3①创建静态站点，并在“代码”视图中编写HTML页面。=2\*GB3②创建小型电子商务网站站点。教学目标：知识目标理解创建本地静态站点；了解“站点设置对象”对话框；掌握在“代码”视图中编写HTML页面；掌握在站点中创建文件结构；掌握站点文化的优化与管理；掌握创建小型电子商务网站站点；能力目标能够正确创建本地静态站点；能够掌握站点文件的优化与管理；能够准确创建小型电子商务网站站点。素质目标较强的专业知识和技术能力；丰富知识结构，提升专业能力；自觉履行电子商务网页设计师的各项职责。重点难点及解决方法：（1）重点：了解“站点设置对象”对话框解决方法：通过课堂练习+启发式教学的方法，教师讲解“站点设置对象”对话框，引导学生积极思考，掌握相应知识；同时通过课堂练习，使学生加深掌握在“代码”视图中编写HTML页面以及在站点中创建文件结构；培养学生的思维能力和分析问题解决问题的能力。（2）难点：站点文化的优化与管理解决方法：通过案例演示+启发式教学讲解的方式，细致讲解站点文化的优化与管理。帮助学生理解通过站点管理完成对站点文化的优化与管理的重要性。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交创建网站文件结构作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段1.课前调研成果展示与汇报【课前调研成果展示与汇报】教师向学生展示网站文件结构图，使学生理解建立完善的站点对梳理网站的结构与脉络对网站的建设具有重要的意义。教师注意通过本章之前所学到的知识引导学生，让学生在学习的过程中有承上启下的感觉，使学生可以更加容量理解所学到的新知识。德育教育：培育学生自学能力、培养发现问题和提出问题的优良品质。【根据调研结果引出新课】从创建本地静态站点进行讲解，帮助学生快速掌握如何创建本地静态站点。同时，通过课堂练习，使学生可以深入了解“站点设置对象”对话框以及掌握站点文化的优化与管理。使学生可以学会如何创建小型电子商务网站站点。德育教育：引导学生热爱专业、热爱科学、热爱学习、热爱国家。2.布置任务【教师展示教学载体，创设学习情境】站点的类型有很多，包括本地静态站点和远程动态站点等。对于网页初学者来说，创建本地静态站点是很关键的，使用Dreamweaver可以轻松创建本地静态站点。本任务将在Dreamweaver中使用“新建站点”的功能创建一个静态站点，使用“管理站点”优化站点结构，帮助读者在掌握创建本地站点的方法的同时，理解本地站点的基本结构。在创建站点之前，需要对站点的结构进行规划，特别是大型网站的站点，更需要对站点有好的规划。好的站点规划可以使网站的结构目录更加清晰。完成站点的创建后，可以在站点中进行新建文件夹、新建页面等基本操作，以及在站点中复制文件和调整文件的位置等。通过Dreamweaver中的站点功能可以更好地管理整个网站中的所有文件。3.任务分析【分析电子商务网站结构与脉络】教师讲解使用“新建站点”的功能创建一个静态站点，使用管理站点优化站点结构，帮助学生在掌握创建本地站点的同时，可以深入理解本地站点的基本结构。4.知识准备（教学难点）【了解“站点设置对象”对话框】要创建本地静态站点，首先需要打开“站点设置对象”对话框，执行“站点”→“新建站点”命令，即可弹出“站点设置对象”对话框。或者执行“站点”→“管理站点”命令，在弹出的“管理站点”对话框中单击“新建站点”按钮，同样可以弹出“站点设置对象”对话框。【知识点学习情况检测，教学策略调整】教师通过课堂提问，了解学生对知识的掌握情况，对共同的错误点或存在的问题，进一步有针对性地讲解。【学生实践，加深对站点设置对象的理解】通过向学生展示不同电子商务网站的结构与脉络，使学生加深所学知识。【通过课堂练习，进一步加深学生掌握创建本地站点】练一练—在“代码”视图中编写HTML页面练一练—在站点中创建文件结构5.任务实施（教学重点）【讲解站点文化的优化与管理】操作视频：视频\项目二\站点文件的优化与管理01执行“站点”→“管理站点”命令。弹出的“管理站点”对话框如图所示。02设计人员可以在“您的站点”列表中看到在Dreamweaver中创建的所有站点。单击“删除当前选定的站点”按钮，弹出提示对话框，单击“是”按钮，即可删除当前选中的站点。03单击“编辑当前选定的站点”按钮，即弹出“站点设置对象”对话框，可以在该对话框中修改站点信息。04单击“复制当前选定的站点”按钮，即可复制选中的站点并得到该站点的副本。05单击“导出当前选定的站点”按钮，可以在“导出站点”对话框中选择导出站点的位置。单击“保存”按钮即可将当前站点导出。06单击“导入站点”按钮，可以在任何一台设备上导入站点。如果对于设置站点有疑问，可以单击“帮助”按钮，弹出“如何使用”页面。思想、素质教育：贯穿学生实践过程中（1）培养学生的专业知识和技能能力；（2）培养学生的社会责任感和良好的社会道德习惯，在参与社会活动中学做文明人、学做社会人；（3）注重社会主义精神文明建设，反对不良思想和作风。6、技能提升【学生学会如何创建小型电子商务网站站点】以小组为单位，学生创建小型电子商务网站站点，教师通过之前所讲的案例制作，使学生掌握基本的页面布局制作方法；深刻理解创建网站文件结构。思想、素质教育：贯穿学生实践过程中（1）通过掌握创建网站文件结构的方法，培养学生的创新精神和学习习惯；（2）提高知识和能力的迁移能力；（3）引导学生未来就业创业选择电商领域，实现自我价值和社会价值。【展示汇报】随机抽选1~3个小组进行展示汇报。7.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。8．小结与作业（课外学习）小结：本节课在教师的带领下，学生们从课前调研到课程实施，通过教师讲解、课堂互动等环节充分学习了如何提高页面用户体验，与理论知识相结合，帮助学生掌握从创建本地静态站点到站点文化的优势与管理的相关知识，做到知己知彼，有的放矢。为后面课程中学生独立完成网页设计工作铺平道路。作业：学生课后可通过网络查找国内电子商务网站页面的结构与脉络，开拓视野的同时并加深理解。9.板书设计掌握网站搭建基础任务一创建网站文件结构分析任务：创建本地静态站点知识准备：了解“站点设置对象”对话框任务实施：站点文件的优化与管理技能提升：创建小型电子商务网站站点教学评价小结、作业课外学习任务及学习指导课前：【教师布置调研任务】调研主题：《观察国内各大电子商务网站的构建站点并分析各个网站结构与脉络》要求：以小组为单位，观察国内各大电子商务网站的构建站点，分析各个网站结构与脉络，制作汇报PPT（至少调研3个国内电商网站；梳理出各网站结构与脉络的特点、PPT不得不于8页，图文并茂），提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【教师对各组调研成果进行评价】教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：【学生创建静态站点，并在“代码”视图中编写HTML页面】小组成员团结协作，练习创建静态站点，并在“代码”视图中编写HTML页面。使学生掌握不同的网站有不同的结构，功能也不一样，需要按照需求创建适合的站点结构。在此过程中，教师使用“微信群”对学生进行指导。【学生创建小型电子商务网站站点】学生通过之前所学的知识，创建小型电子商务网站站点，使学生深刻掌握基本的页面布局和制作方法。教师使用“微信群”对学生进行。教师设置“创建小型电子商务网站”主题讨论题目，学生均可参与讨论，分享心得。填表说明：1.本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等；3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。

电子商务网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号14授课日期月日月日月日月日授课班级课内教学内容：项目2：创建并管理电子商务网站站点——掌握网站搭建基础任务二设置远程站点服务器信息课程思政设计：（1）通过教师讲解设置远程站点服务器信息的知识，增强学生热爱专业、热爱科学、热爱学习。（2）通过小组合作讨论，引导学生未来就业创业选择电商领域，实现自我价值和社会价值。（3）培养学生良好的思想道德素质和健全的人格，促进学生的健康成长。（4）在系统讲解专业知识的过程中注重专业知识的价值引领作用，同时必须具备正确的道德认知和良好的道德情操。课外学习任务：（1）课前：以小组为单位，讨论“站点设置对象”对话框中“基本”选项卡中包含哪些选项，以及各选项的作用；同时以PPT的形式记录下来。（2）课后：=1\*GB3①试练站点中的操作。=2\*GB3②创建新能源电子商务网站站点。教学目标：知识目标了解设置“服务器”选项；熟悉设置“站点设置对象”对话框；掌握“基本”选项卡；掌握“高级”选项卡；掌握设置远程服务器；掌握站点中的操作；能力目标能够掌握设置“站点设置对象”对话框；能够掌握设置远程服务器；能够正确设置站点中的操作。素质目标较强的专业知识和技术能力；丰富知识结构，提升专业能力；在掌握网站搭建基础上，理解并应用专业知识。重点难点及解决方法：（1）重点：设置“站点设置对象”对话框解决方法：通过视频教学+启发式教学的方法，教师讲解设置“站点设置对象”对话框，引导学生积极思考，掌握相应知识；同时通过播放视频，使学生加深掌握“基本”选项卡和“高级”选项卡；培养学生的思维能力和分析问题解决问题的能力。（2）难点：设置远程服务器解决方法：通过案例演示+启发式教学讲解的方式，细致讲解如何设置远程服务器。帮助学生理解设置远程服务器的重要性。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交站点中的操作作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段1.课前调研成果展示与汇报【课前调研成果展示与汇报】教师向学生展示设置远程服务器参数图，使学生了解如何通过设置“服务器”选项卡中的相关选项，将站点中的文件上传到远程服务器。教师注意通过本章之前所学到的知识引导学生，让学生在学习的过程中有承上启下的感觉，使学生可以更加容量理解如何设置远程站点服务器信息。德育教育：引导学生未来就业创业选择电商领域，实现自我价值和社会价值。【根据调研结果引出新课】从设置“服务器”选项进行讲解，帮助学生快速掌握如何通过在“站点设置对象”对话框中设置远程服务器的各项参数，可以直接在“文件”面板中实现本地站点和远程站点之间的数据交换。同时，通过课堂案例，使学生可以深入了解设置“站点设置对象”对话框并掌握设置远程服务器。使学生可以学会如何设置站点中的操作。德育教育：培养学生良好的思想道德素质和健全的人格，促进学生的健康成长。2.布置任务【教师展示教学载体，创设学习情境】在Dreamweaver中完成本地站点的创建后，可以通过FTP上传站点文件到远程服务器。通过在“站点设置对象”对话框中设置远程服务器的各项参数，可以直接在“文件”面板中实现本地站点和远程站点之间的数据交换。3.任务分析【分析设置远程服务器的重要性】教师讲解设置远程服务器的作用以及重要性，使学生可以深入理解本章所学习的内容。这样有利于为网站的建设提供良好的结构和布局，同时为以后知识的学习打下良好的基础4.知识准备（教学难点）【设置“站点设置对象”对话框】设计人员需要将站点中的Dreamweaver上传到远程服务器，首先要使用Dreamweaver连接远程服务器。执行“站点”→“新建站点”命令，在弹出的“站点设置对象”对话框中单击左侧的“服务器”选项，即可进入“服务器”选项卡。单击“添加新服务器”按钮，弹出服务器设置对话框。“基本”选项卡服务器名称/连接方式/FTP地址/端口/用户名和密码/根目录/WebURL/使用被动式FTP/使用IPv6传输模式/使用以下位置中定义的代理/使用FTP性能优化/使用其他的FTP一定方法。“高级”选项卡维护同步信息/保存时自动将文件上传到服务器/启用文件取出功能/服务器类型/将文件自动推送到测试服务器/始终自动保存相关文件。【知识点学习情况检测，教学策略调整】教师通过课堂提问，了解学生对知识的掌握情况，对共同的错误点或存在的问题，进一步有针对性地讲解。【学生实践，加深对设置远程服务器的理解】通过向学生讲解设置“站点设置对象”对话框的知识，对后续设置远程服务器的学习做出铺垫。【通过对选项卡的学习，进一步加深学生掌握设置远程服务器】教师通过“基本”选项卡和“高级”选项卡的讲解，带领同学共同分析如何对服务器的基本选项进行设计。5.任务实施（教学重点）【讲解设置远程服务器】01执行“站点”→“新建站点”命令，弹出“站点设置对象”对话框，输入站点名称，指定“本地站点文件夹”。02单击“站点设置对象”对话框左侧的“服务器”选项，切换到“服务器”选项卡。03单击“添加新服务器”按钮，弹出“添加新服务器”窗口，对远程服务器的相关信息进行设置。04单击“测试”按钮，弹出“后台文件活动”对话框，显示出正在与设置的远程服务器连接。05连接成功后，弹出提示对话框，提示Dreamweaver已成功连接Web服务器。06在“文件”面板中单击“连接到远程服务器”按钮，与远程服务器连接，设计人员可以在当前面板中进行各种操作。思想、素质教育：贯穿学生实践过程中（1）培养学生的专业知识和技能能力；（2）培养学生在规定时间内完成特定任务的时间观念意识；（3）注重社会主义精神文明建设，反对不良思想和作风。6、技能提升【学生学会如何制作站点中的操作】以小组为单位，学生制作站点中的操作，教师通过之前所讲的案例制作，使学生掌握站点中的操作；加深掌握如何对站点中的文件夹和文件进行操作。思想、素质教育：贯穿学生实践过程中（1）通过掌握设置远程站点服务器信息的方法，培养学生的创新精神和自学能力；（2）提高知识和能力的迁移能力；（3）引导学生成为创新型、复合型电子商务高级专业人才。【展示汇报】随机抽选1~3个小组进行展示汇报。7.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。8．小结与作业（课外学习）小结：本节课在教师的带领下，学生们从课前调研到课程实施，通过教师讲解、课堂互动等环节充分学习了如何提高页面用户体验，与理论知识相结合，帮助学生掌握从设置“服务器”选项到设置远程服务器的相关知识，做到知己知彼，有的放矢。为后面课程中学生独立完成网页设计工作铺平道路。作业：学生课后可通过网络查找网站搭建基础的相关知识，开拓视野的同时并加深理解。9.板书设计掌握网站搭建基础任务二设置远程站点服务器信息分析任务：设置“服务器”选项知识准备：设置“站点设置对象”对话框任务实施：设置远程服务器技能提升：站点中的操作教学评价小结、作业课外学习任务及学习指导课前：【教师布置调研任务】调研主题：《讨论设置“站点设置对象”对话框中选项卡中包含的内容》要求：以小组为单位，讨论设置“站点设置对象”对话框中“基本”和“高级”两个选项卡中包含的内容，需要罗列包含内容，制作汇报PPT（至少罗列5个包含内容；PPT不得不于8页，图文并茂），提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【教师对各组调研成果进行评价】教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：【学生制作站点中的操作】小组成员团结协作，练习如何对站点中的文件夹和文件进行操作，通过此练习使学生加深掌握本章所学知识。在此过程中，教师使用“微信群”对学生进行指导。【学生制作新能源电子商务网站站点】学生根据本章所学内容，在Dremweaver中创建新能源电子商务网站的站点，并在站点中创建对应的图像文件夹、样式文件夹和index.html文件。教师使用“微信群”对学生进行。教师设置“制作新能源电子商务网站站点”主题讨论题目，学生均可参与讨论，分享心得。填表说明：1.本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等；3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。

电子商务网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号14授课日期月日月日月日月日授课班级课内教学内容：项目3：使用HTML编写页面——搭建页面底层的基础知识链接课程思政设计：（1）在系统讲解专业知识的过程中注重专业知识的价值引领作用，同时必须具备正确的道德认知和良好的道德情操。（2）通过小组合作探讨，培养学生团结协作的工作作风，掌握搭建页面底层的基础，培养学生的自学能力。（3）引导学生积极投身科技事业的发展，为实现科技强国目标贡献力量。（4）引导学生遵守电子合同法、电子签名法、电子商务法等相关法律，增强法律意识和法律素养，坚定中国特色社会主义法治信念，积极维护电子商务活动安全。课外学习任务：（1）课前：以小组为单位，观察国内任意一个电子商务网站的整体属性，了解其整体属性的设置，以及对页面的整体属性的设置。使学生在课前充分理解提前设置网页整体属性的重要性。（2）课后：=1\*GB3①分析电子商务网站页面布局有哪些原则，以及各原则的必要性。=2\*GB3②分析HTML中有哪些常用标签，以及各标签的语法格式。教学目标：知识目标熟悉电子商务网站建设原则；熟悉电子商务网站页面布局原则；了解HTML5；掌握HTML的基本结构；掌握HTML的标签。能力目标熟悉电子商务网站页面布局原则；能够掌握HTML的基本结构；能够掌握HTML的标签。素质目标在掌握搭建页面底层的基础上，理解并应用专业知识；丰富知识结构，提升专业技能；自觉履行电子商务网页设计师的各项职责。重点难点及解决方法：（1）重点：HTML的基本结构。解决方法：采用“视频教学法+启发式教学法”，为学生讲解HTML语言的主要功能以及HTML的基本结构，让学生深入掌握HTML的基本结构和代码的组成部分，同时培养学生的自学能力。（2）难点：HTML的标签。解决方法：通过“视频教学法+讨论式教学法”，为学生播放HTML标签的相关知识，帮助学生掌握常用标签的语法格式。同时与学生共同讨论常用标签的显示方式，使学生可以深入掌握所学知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段课前调研成果展示与汇报【课前调研成果展示与汇报】教师向学生展示“关于我们”页面效果，使学生了解网站页面底层搭建的基础和应用技巧。教师注意讲解电子商务网站的建设原则，帮助学生了解电子商务网站与传统网站的差别。德育教育