《商务网页设计与制作》-教学教案

《电子商务网页设计与制作》教学教案第一章：电子商务网页设计基础1.1 教学目标1. 了解电子商务网页设计的概念与意义。

2. 掌握电子商务网页设计的基本原则与要求。

3. 熟悉常用的网页设计工具与技术。

1.2 教学内容1. 电子商务网页设计的概念与意义。

2. 电子商务网页设计的基本原则与要求。

3. 常用的网页设计工具与技术。

1.3 教学方法1. 讲授与案例分析相结合。

2. 实际操作演示与学生实践。

1.4 教学资源1. 教学PPT。

2. 网页设计案例素材。

3. 网页设计工具软件。

1.5 教学评估1. 课堂问答。

2. 学生实践作品展示。

第二章：网页布局与配色设计2.1 教学目标1. 掌握网页布局的设计方法与技巧。

2. 学习网页配色的基本原则与方法。

3. 了解色彩搭配对网页视觉效果的影响。

2.2 教学内容1. 网页布局的设计方法与技巧。

2. 网页配色的基本原则与方法。

3. 色彩搭配对网页视觉效果的影响。

2.3 教学方法1. 讲授与案例分析相结合。

2. 实际操作演示与学生实践。

2.4 教学资源1. 教学PPT。

2. 网页布局与配色案例素材。

3. 网页设计工具软件。

2.5 教学评估1. 课堂问答。

2. 学生实践作品展示。

第三章：网页图像处理与动画制作3.1 教学目标1. 掌握网页图像处理的基本方法与技巧。

2. 学习动画制作的基本方法与技术。

3. 了解动画在网页设计中的应用与效果。

3.2 教学内容1. 网页图像处理的基本方法与技巧。

2. 动画制作的基本方法与技术。

3. 动画在网页设计中的应用与效果。

3.3 教学方法1. 讲授与案例分析相结合。

2. 实际操作演示与学生实践。

3.4 教学资源1. 教学PPT。

2. 网页图像处理与动画案例素材。

3. 网页设计工具软件。

3.5 教学评估1. 课堂问答。

2. 学生实践作品展示。

第四章：网页文字处理与排版4.1 教学目标1. 掌握网页文字处理的基本方法与技巧。

2. 学习网页排版的设计方法与原则。

电子商务网页制作教案教案标题：电子商务网页制作教学目标：1. 了解电子商务网页制作的基本概念和原理。

2. 掌握电子商务网页制作的基本技能和工具。

3. 能够独立设计和制作简单的电子商务网页。

教学内容：1. 电子商务网页制作的概念和意义。

2. 电子商务网页的基本结构和布局。

3. HTML和CSS的基础知识和应用。

4. 图片和多媒体元素的添加和优化。

5. 网页导航和链接设计。

6. 用户界面和交互设计。

7. 网页的测试和发布。

教学步骤：引入活动：1. 向学生介绍电子商务网页制作的重要性和应用领域。

2. 引导学生思考自己在日常生活中遇到过的电子商务网页，并讨论其特点和功能。

知识讲解：1. 介绍电子商务网页制作的基本概念和原理。

2. 详细讲解HTML和CSS的基础知识和语法规则。

3. 演示如何使用HTML和CSS制作简单的网页结构和样式。

实践操作：1. 分发给学生一份简单的电子商务网页设计任务，并提供所需的素材和资源。

2. 指导学生使用HTML和CSS编写网页的基本结构和样式。

3. 引导学生添加图片和多媒体元素，并优化其加载速度和显示效果。

4. 指导学生设计网页的导航和链接，以提高用户体验。

5. 引导学生设计网页的用户界面和交互，使其更具吸引力和易用性。

6. 指导学生测试和调试网页，并解决可能出现的问题。

7. 引导学生将完成的网页发布到互联网上，并分享给同学和家人。

总结评价：1. 对学生进行网页制作的总结和评价，提供反馈和建议。

2. 鼓励学生展示自己制作的网页，并与同学分享经验和心得。

拓展延伸：1. 鼓励学生进一步学习和探索电子商务网页制作的高级技术和工具。

2. 推荐学生参与相关的网页设计比赛或项目，提升自己的实践能力和创造力。

教学资源：1. 教学用电脑和投影仪。

2. 电子商务网页设计任务。

3. HTML和CSS的教学材料和参考书籍。

4. 图片和多媒体素材。

5. 网络资源和工具。

教学评估：1. 观察学生在实践操作中的表现和技能掌握情况。

《电子商务网页设计与制作》教学教案一、教学目标1. 了解电子商务网页设计的基本概念与原则。

2. 掌握网页设计与制作的基本技术，如HTML、CSS、JavaScript等。

3. 能够运用网页设计软件（如Dreamweaver、Photoshop等）进行网页设计与制作。

4. 了解电子商务网页设计的趋势与创新。

二、教学内容1. 电子商务网页设计的基本概念与原则2. HTML与CSS基本语法与运用3. JavaScript基础与网页交互4. 网页设计软件的使用与技巧5. 电子商务网页设计案例分析与实践三、教学方法1. 讲授：讲解电子商务网页设计的基本概念、原则以及技术要点。

2. 示范：通过实际操作，展示HTML、CSS、JavaScript等技术的应用。

3. 练习：学生动手实践，运用网页设计软件进行网页设计与制作。

4. 讨论：分组讨论，分析电子商务网页设计的趋势与创新。

四、教学准备1. 教室环境：确保电脑、投影仪等设备齐全，网络畅通。

2. 教学材料：教案、PPT、案例素材、网页设计软件安装包等。

3. 学生分组：根据班级人数，合理分组，每组4-6人。

五、教学过程1. 导入：简要介绍电子商务网页设计的重要性，激发学生兴趣。

2. 讲解：讲解电子商务网页设计的基本概念与原则，重点讲解HTML、CSS、JavaScript等技术。

3. 示范：教师演示HTML、CSS、JavaScript等技术的实际应用。

4. 练习：学生动手实践，运用网页设计软件进行简单网页设计与制作。

5. 讨论：分组讨论，分析电子商务网页设计的趋势与创新，分享实践经验。

7. 作业布置：布置课后作业，巩固所学知识。

六、教学评估1. 课堂问答：通过提问方式检查学生对电子商务网页设计基本概念的理解。

2. 练习作品：评估学生网页设计作品的创意、技术运用和功能性。

3. 小组讨论：观察学生在小组讨论中的参与程度和问题解决能力。

4. 课后作业：检查学生对课堂所学知识的巩固情况。

电子商务网页制作教案教案标题：电子商务网页制作教案一、教学目标：1. 了解电子商务的定义、发展和重要性。

2. 掌握网页制作的基本概念和技能。

3. 学习使用HTML和CSS语言进行网页设计和布局。

4. 理解电子商务网页的特点和要求。

5. 能够制作一个简单的电子商务网页。

二、教学内容与步骤：1. 电子商务的概念和发展（15分钟）a. 介绍电子商务的定义和相关概念。

b. 分析电子商务的发展趋势和市场需求。

2. 网页制作基础知识（30分钟）a. 介绍网页制作的基本概念和技术要求。

b. 学习HTML语言的基本标签和语法规则。

c. 学习CSS语言的基本属性和样式定义。

3. 网页设计与布局（45分钟）a. 介绍网页设计的原则和注意事项。

b. 学习如何进行网页布局和元素排版。

c. 演示如何使用HTML和CSS语言进行网页设计。

4. 电子商务网页制作要点（30分钟）a. 分析电子商务网页的特点和要求。

b. 介绍电子商务网页的常用功能和交互设计。

c. 指导学生如何设计和制作一个符合电子商务要求的网页。

5. 实践操作与案例分析（60分钟）a. 学生进行实践操作，制作一个简单的电子商务网页。

b. 分析和讨论案例中的网页设计和布局要点。

c. 提供实时指导和建议，帮助学生解决问题和改进设计。

三、教学资源：1. 电子商务相关资料和案例分析。

2. 电脑、投影仪和互联网连接设备。

3. HTML和CSS的编辑器软件。

4. 学生用于实践操作的电脑设备。

四、教学评估：1. 学生实践操作的成果评估。

2. 学生对电子商务和网页制作相关知识的理解和掌握程度。

3. 学生对案例分析和讨论的参与程度和质量。

五、教学延伸：1. 鼓励学生进一步学习和探索电子商务和网页制作的高级技巧。

2. 提供更多电子商务网页制作案例和实践机会。

3. 组织学生参加相关的竞赛和实践活动，提升他们的实际操作能力。

六、教学反思：1. 教学目标是否清晰明确，是否符合学生的需求和水平。

《商务网页设计与制作》参考教案授课教师：授课班级：课程学分：总学时数：56周学时数：上课周次：教学进度计划目录第1课（1.1-1.2）（1）需求调查网站需求调查是网站策划的第一步，是确定项目建设必要性的重要工作步骤，由业务团队牵头负责。

①用户调查（业务调查）②市场调研（2）网站定位网站定位是最根本的业务需求，决定网站开发建设的方向，由业务团队牵头负责。

（3）编制需求概要需求概要是明确做什么、怎么做、做到什么程度的。

要求业务目标清晰、业务需求全面、业务边界清楚、业务规则严谨。

需求概要的编制工作应当由业务团队牵头负责，信息技术团队配合。

《项目需求概要》应当由业务团队所在单位签字盖章予以认可。

（4）需求分析与功能规划需求分析与功能规划将需求概要的内容进一步梳理、归纳、系统化，形成系统功能规划。

该项工作是以及技术为主的，由信息技术团队牵头负责，业务团队协助配合（5）工作步骤与工作进度（6）网站开发制作（7）网站发布与运维（8）网站运营模式运营模式运营说明搜索引擎+百科知识以百度为代表，采用竞价排名、广告和点击的运营模式。

百度为客户投放与网页内容相关联的广告，从而实现盈利。

它立足于搜索引擎，建立了一通过大学生运动鞋有用数量调查的意义，启示需求调查的重要性第2课（2.1-2.3）第3课（3.1-3.2.3）第4课（3.2.4-3.2.6）小结巩固本课程需要理解掌握文本段落、文本列表的设置方法，课堂练习重点概念：无序文本列表、有序文本列表。

练习：制作无序文本列表、有序文本列表网页。

课后作业作业：制作一个设置段落的网页，写出完整的HTML代码。

具体要求如下：（1）制作一个文本段落，内容为“诗歌是一种语言凝练而形象，结构自由而跳跃，富有节奏和韵律，饱含联想与想象，高度集中与概括地反映社会生活、表达思想感情的文学体裁。

诗歌的基本特点为：”。

字体为黑体，字号为5号，字的颜色为蓝色，段落中的文本居中显示；（2）制作一个文本段落，在其中再制作一个文本列表，文本列表的字体为楷体，字号为5号，字的颜色为紫色，文本列表的内容如下：A．生活美：对生活高度的提炼、集中、概括；B．思想美：饱含深切的思想感情；C．意境美：用丰富的想象和联想力营造出优美的意境；D．语言美：文字色彩鲜活、语言节奏分明；第5课（3.3-3.3.2）实施步骤：一、组织教学、课前提问（5ˊ）二、教学引导（3ˊ）三、进入本次课讲授内容（77ˊ）四、小结巩固（重申教学目的、重点、难点）（5ˊ）讲授内容：第3章 HTML网页制作技术3.3 图像设置方法3.3.1 图像文件的存储管理网站通常有很多图像文件，需要对这些图像文件进行有效的管理。

电子商务专业网页设计与制作课程的优秀教案范本基础HTML标签的学习与应用HTML（HyperText Markup Language）是构建网页的基础，掌握HTML标签的学习与应用对于网页设计与制作课程的学习非常重要。

本教案将帮助学生深入理解HTML标签的基本概念，并通过实践应用，提升学生的网页设计与制作能力。

第一部分：HTML基础概念的学习在开始学习HTML标签之前，首先介绍HTML的基础概念，帮助学生了解HTML的作用以及其在网页设计中的重要性。

本部分可以包括以下内容：1. 什么是HTML：介绍HTML的含义和作用，解释HTML的基本结构和组成部分。

2. HTML版本：简要介绍HTML的不同版本，重点说明当前主流的HTML5版本的特点和优势。

3. 基本标签：介绍HTML中常用的一些基础标签，如<html>、<head>、<body>等，解释它们的作用和用法。

第二部分：HTML标签的学习与应用本部分将重点介绍常用的HTML标签，并通过具体的实例演示其使用方法和效果。

建议将每种标签的学习分为小节，便于学生逐步掌握和应用。

1. 文本标签：介绍常用的文本相关标签，如<p>、<h1>-<h6>、<strong>、<em>等，演示其在网页排版和文本修饰中的应用。

2. 图像标签：介绍<img>标签的使用，说明如何在网页中插入图片，并讲解一些常用的图片属性，如src、alt等。

3. 超链接标签：介绍<a>标签的使用，讲解如何创建超链接，并讨论相对路径和绝对路径的区别及应用场景。

4. 列表标签：介绍有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）的使用方法，帮助学生创建有序、无序和自定义风格的列表。

5. 表格标签：介绍<table>标签的使用，演示如何创建表格、添加表头和单元格，并讲解一些常用的表格属性和样式。

《电子商务网页设计与制作》教学教案第一章：电子商务网页设计概述1.1 教学目标让学生了解电子商务网页设计的概念和意义。

让学生掌握电子商务网页设计的基本原则和流程。

1.2 教学内容电子商务网页设计的概念和意义。

电子商务网页设计的基本原则（如用户体验、界面设计等）。

电子商务网页设计的流程（如需求分析、设计稿制作等）。

1.3 教学方法讲授法：讲解电子商务网页设计的概念和意义，以及基本原则和流程。

案例分析法：分析电子商务网页设计的成功案例，让学生了解实际应用。

1.4 教学资源教材：电子商务网页设计相关书籍。

案例素材：电子商务网页设计成功案例。

1.5 教学评价学生能准确回答电子商务网页设计的概念和意义。

学生能理解并运用电子商务网页设计的基本原则和流程。

第二章：电子商务网页制作基础2.1 教学目标让学生掌握电子商务网页制作的基本技术。

让学生能够独立完成简单的电子商务网页制作。

HTML和CSS的基础知识。

电子商务网页制作的常用工具（如网页编辑器、图像处理软件等）。

电子商务网页制作的基本步骤。

2.3 教学方法讲授法：讲解HTML和CSS的基础知识，以及电子商务网页制作的常用工具和步骤。

实践操作法：让学生在电脑上进行实际操作，掌握电子商务网页制作技术。

2.4 教学资源教材：电子商务网页制作相关书籍。

实践素材：电子商务网页制作所需图片、样式文件等。

2.5 教学评价学生能掌握HTML和CSS的基础知识。

学生能够运用常用工具完成简单的电子商务网页制作。

第三章：电子商务网页布局与排版3.1 教学目标让学生掌握电子商务网页布局与排版的原则和方法。

让学生能够独立完成电子商务网页的布局与排版。

3.2 教学内容电子商务网页布局与排版的原则。

电子商务网页布局与排版的方法（如使用HTML和CSS进行布局和排版）。

电子商务网页布局与排版实例分析。

讲授法：讲解电子商务网页布局与排版的原则和方法。

实践操作法：让学生在电脑上进行实际操作，掌握电子商务网页布局与排版技术。

《电子商务网页设计与制作》课程设计课程名称：《电子商务网页设计与制作》课程设计授课对象：电子商务0405、0406、0407班一、教学目的：1.学习掌握INTERNET基础知识，掌握网页设计语言（HTML）基础2.熟练运用设计CSS控制网页风格，学习网页版面设计。

3.初步掌握动态网页设计基础，熟练掌握至少一种专业的可视化网页（站）设计软件（如DREAMWEA VER）。

4.了解后台网络数据库基础知识，具有设计制作网页和构架网站的基本技能。

二、设计内容与要求：1.每个课程设计小组设计制作一个浙江商业职业技术学院招生就业宣传网站，制作网站所需的相关文字资料、图片资料等可以到各个系的系网和学院网上进行采集或自行采集。

2.要求：根据上面指定的网站开发项目内容进行开发设计，网站栏目设置、网站要表达的具体内容和网站的风格根据小组确定的课题进行设计；要求根据网站设计规范和常用网制作页技术进行设计；设计的网站要求结构合理，版面美观大方，颜色合理，风格一致，并运用适当的动态网页技术进行修饰；三、设计组织形式以小组为单位进行网站开发。

网站开发是以个人独立完成网站小组栏目中网页设计的多人协作项目。

每小组人数最多4名，先以自由组合方式成组，并自行选出负责的小组长。

每小组设组长一名，负责小组统筹规划，并进行组员的日常工作管理。

未能组合成组的同学由指导教师统一安排。

组员应服从组长的安排，并积极完成规定的开发任务。

组长有义务对组员进行工作的安排和调度，并单独进行考评，作为教师对组员最后评分的参考依据之一。

对不服从分配工作和管理的组员，组长可以向指导教师反映，由教师另行单独安排相应内容，独立完成其他指定的网页内容设计，并单独考核其成绩。

小组网站能否按期完成，组员间能否协同工作将作为组长的综合成绩考评依据之一。

四、设计纪律与注意事项在开发网站期间，一般上午由教师巡回辅导答疑，下午或晚上由学生自行独立设计。

组长应每天记录相应的开发情况，以供教师参考。

《电子商务网页设计与制作》教学教案一、教学目标1. 了解电子商务网页设计的基本概念与原则。

2. 掌握网页设计与制作的基本技术，如HTML、CSS、JavaScript等。

3. 能够独立完成电子商务网页的设计与制作。

4. 理解电子商务网页设计的重要性，提高电子商务网站的吸引力和用户体验。

二、教学内容1. 电子商务网页设计基本概念与原则网页设计的定义与目的电子商务网页设计的特点与要求网页设计原则（如美观性、易用性、可访问性等）2. HTML与网页结构HTML基本语法常用HTML标签及其功能网页结构与布局3. CSS与网页样式CSS基本语法常用CSS选择器与属性网页样式设计（如字体、颜色、布局等）4. JavaScript与网页交互JavaScript基本语法常用JavaScript函数与对象网页交互设计（如动态效果、表单验证等）5. 电子商务网页设计实践网页设计流程与方法电子商务网页设计案例分析学生实践：独立完成一个简单的电子商务网页设计与制作三、教学方法1. 讲授法：讲解电子商务网页设计的基本概念、原则、技术与方法。

2. 案例分析法：分析电子商务网页设计案例，让学生了解实际应用。

3. 实践操作法：引导学生动手实践，提高网页设计与制作能力。

4. 讨论法：组织学生进行分组讨论，分享设计心得与经验。

四、教学资源1. 教材：《电子商务网页设计与制作》2. 课件：教师自制的PPT课件3. 案例素材：电子商务网页设计案例及相关素材4. 网络资源：在线教程、相关网站与素材库五、教学评价1. 课堂参与度：学生参与课堂讨论、提问与回答问题的积极性。

2. 实践操作能力：学生完成网页设计实践作业的质量与效率。

3. 作品展示：学生展示自己的电子商务网页设计作品，评价其设计思路与效果。

4. 期末考试：考查学生对电子商务网页设计基本概念、原则与技术的掌握程度。

六、教学安排1. 课时：共计32课时，每课时45分钟。

2. 授课方式：讲授+实践操作+讨论3. 教学计划：第1-4课时：讲解电子商务网页设计基本概念与原则第5-8课时：学习HTML与网页结构第9-12课时：学习CSS与网页样式第13-16课时：学习JavaScript与网页交互第17-20课时：实践电子商务网页设计案例第21-24课时：学生独立完成电子商务网页设计与制作第25-28课时：作品展示与评价第29-32课时：期末考试七、教学注意事项1. 关注学生的学习进度，针对不同学生的实际情况进行针对性指导。

《电子商务网页设计与制作）》配套教学教案第1章课时内容电子商务网页设计与网站建设基础授课时间45分钟课时 1教学目标A了解电子商务网站设计基础知识A认识Dreamweaver CS6工作界面。

A掌握创建电子商务网站的基本操作和流程。

教学重点A掌握电子商务网站设计的基础知识。

A掌握电子商务网站设计的基本流程。

A能够独立完成一个电子商务网站的规划。

教学难点掌握规划和设计电子商务网站的流程及方法。

教学设计1、教学思路：（1）了解网页设计的相关基础知识，如什么是网页、什么是电子商务网站、电子商务网站的主要内容和功能、网页的常见布局结构、网页中的常用术语、网页色彩搭配等，并浏览一些市场上非常好的网站进行赏析，从中学习经验；（2）了解网站设计的相关知识，并创建一个名为“宅家商城”的电子商务网站。

学员通过案例除了熟悉网站开发的基本流程外，还需要了解Dreamweaver网页制作软件、站点策划、创建本地站点、编辑站点、管理站点和站点文件等操作；（3）安排上机实训。

2、教学手段：（1））通过举例讲解网页设计的基础知识，讲解结束后进行上机练习和疑难提问；（2）对容易出错的误区进行提醒，并着重举例讲解。

3、教学资料及要求：除教材中的实例外，可浏览其他经典的网页，学习这类网站的设计思想。

教学内容讨论问题：1、网页设计师需要知道哪些网页设计内容？2、网页设计过程中需要遵循哪些原则？3、你所见的网页设计中哪些网站比较具有个性化，网页色彩给你带来了什么样的体验和感觉？内容大纲：具体可结合本章的PPT课件进行配合讲解。

1.1　电子商务网页设计基础知识1.1.1　认识网站与网页1.1.2　电子商务网站概述1.1.3　电子商务网站的主要内容和功能1.1.4　网页常见布局结构1.1.5　网页的基本构成元素1.1.6　网页常用术语1.1.7　网页色彩搭配1.1.8　HTML标记语言1.2　课堂案例：创建“宅家商城”网站1.2.1　电子商务网站开发流程1.2.2　网站制作流程1.2.3　Dreamweaver CS6工作界面1.2.4　创建本地站点1.2.5　编辑站点1.2.6　管理站点和站点文件夹1.3　项目实训1.3.1　赏析营销类电子商务网站1.3.2　规划并创建“婚纱网”站点1.4　课后练习1.5　技巧提升小结1、了解网页设计的基础知识。

本次课基本信息教学设计页教学内容页1.3网页标准化技术网页由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior），相应的技术标准由三个部分组成：结构化标准语言，CSS样式表和脚本语言。

一、结构化语言HTML（Hyper Text Markup Language，超文本标记语言）1．HTML的语法主要由标签（tag）和属性（attribute）组成。

所有标签都由一对尖括号<>括起来。

（1）一般标签一般标签由一个起始标签（Opening Tag）和一个结束标签（Ending Tag）组成，其语法格式为：<x>受控内容</x><html>…</html> <body>…</body><table>….</table>在标签之中可以附加一些属性，用来完成某些特殊效果或功能。

不同属性间用空格分隔，属性值要加双引号，其语法形式为：<标签名称属性1 属性2 属性3 …>受控内容</标签名称><table widt=”1000” height=”800”>…</table>（2）空标签大部分标签是成对出现的，但也有一些是单独存在的，这些单独存在的标签称为空标签。

<hr><br><hr align="center" width="80%" size="2">2．网页的HTML结构HTML文件的主体结构由<html>、<head>和<body>3对标签组成。

下面是一个典型的HTML文档结构：<html><head>头部信息：如<title>、<meta>等</head><body>文档主体</body></html>二、CSS样式三、脚本语言四、PHP技术本次课基本信息教学设计页教学内容页1.3网页标准化技术网页由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior），相应的技术标准由三个部分组成：结构化标准语言，CSS样式表和脚本语言。