《商务网页设计与制作》-教学教案
《电子商务网页设计与制作》教学教案
《电子商务网页设计与制作》教学教案第一章：电子商务网页设计基础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标签的学习与应用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>标签的使用，演示如何创建表格、添加表头和单元格，并讲解一些常用的表格属性和样式。
商业网站设计与制作教案
记
教案专用页
内容
标题
第4章网页表格的处理
4.1利用Dreamweaver MX处理网页表格
4.2利用HTML处理网页表格
课时
2
教
学
目
的
及
要
求
教学目的:
向学生传授网页的基本要素、制作网页的基本工具、美化网页的基本工具，网页制作的基本步骤。创建表格的方法；编辑表格的方法、表格的排序方法、表格的格式化方法、设置表格属性的方法、用表格设计页面布局的方法；
教学要求：
了解商务网页的基本要素、制作网页的基本工具、美化网页的基本工具，掌握网页制作的基本步骤。
重
点
难
点
及
其
处
理
重点：美化网页的基本工具、网页制作的基本步骤。
难点：网页的基本要素。
处理：通过实际案例结合相关知识点详细讲解。
教
学
方
法
多媒体教学和课堂讲解相结合
参
考
文
献
1.电子工业出版社《中文版Dreamweaver CS5完全自学一本通》
第3章网页文本的处理
3.1利用HTML处理文本
3.2利用Dreamweaver MX处理网页文本
课时
2
教
学
目
的
及
要
求
教学目的:
向学生传授构成HTML及其功能、利用HTML创建和测试Web页的方法、利用HTML设置标题和文字、利用HTML设置段落、利用HTML进行文本格式的处理、利用Dreamweaver MX处理文本；
多媒体教学和课堂讲解相结合电子工业出版社中文版dreamweavercs5完全自学一本通清华大学出版社基于web标准的网页设计与制作首先根据个人爱好规划一个名为myweb的个人站点然后在dreamweavermx中分别用站点定义向导和直接定义站点两种方法建立该站点并在创建好的站点中新建一个名为我的个人主页内容标题网页文本的处理31利用html处理文本课时32利用dreamweavermx处理网页文本教学目的向学生传授构成html及其功能利用html创建和测试web页的方法利html设置标题和文字利用html设置段落利用html进行文本格式的处理利用dreamweavermx处理文本
商务网页设计与制作教学 (5)
子任务1：规划布局首页
步骤2：规划确定页头区主要 放置网站的logo、导航菜单 以及flash广告。 步骤3：规划确定产品类别区 主要放置网站推广的所有产 品的大类别分类。
子任务1：规划布局首页
步骤4：规划确定新品推荐区主要放置最新推荐的产品图片及相应的文字说明。 步骤5：规划确定公司简介区放置公司形象图片及文字介绍。 步骤6：规划确定站点公告区放置公司新闻及产品方面信息的文字介绍。 步骤7：规划确定行业动态区放置行业发展动态信息的文字介绍。 步骤8：规划确定新品展示区放置公司新添加产品图片及文字介绍。 步骤9：规划确定页尾区放置公司的版权信息及次导航等方面的内容。
O(∩_∩) o
谢谢观看！
口令：RAPID708
项目三
商务网页制作
《商务网页设计与制作》课程开发组
子任务1：规划布局首页
步骤1：依据项目一所勾画朗声科贸首页设计草图（图1-11），结合项目二设计完成 的页面效果图（图2-1）。在规划布局首页时可对页头（logo、导航、flash），主体 （产品类别、新品推荐、公司简介、站内公告、行业动态、产品展示），页尾（版权 信息、次导航）等几大分区进行清晰地划分，确定内容布Байду номын сангаас图，如下图所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《商务网页设计与制作》
教学教案
授课教师：
授课班级：
课程学分：
总学时数：
周学时数：
上课周次：
教学进度计划
第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．意境美：用丰富的想象和联想力营造出优美的意境；
第5课（3.3-3.3.2）
实施步骤：
一、组织教学、课前提问（5ˊ）
二、教学引导（3ˊ）
三、进入本次课讲授内容（77ˊ）
四、小结巩固（重申教学目的、重点、难点）（5ˊ）
讲授内容：
第3章 HTML网页制作技术
3.3 图像设置方法
3.3.1 图像文件的存储管理
网站通常有很多图像文件，需要对这些图像文件进行有效的管理。
一是起好文件名称。
文件名称应当有助于理解图片内容，言简意赅。
二是规划好图像文件存储目录。
3.3.2 图像引用
1．相对路径引用
（1）引用当前目录下的文件（同级目录）
（2）引用下级目录下的图像文件
（3）引用上级目录下的图像文件
（4）引用上两级目录下的一个子目录中的文件
2．绝对路径引用教学提示：示例讲解
第6课（3.3.3-3.3.7）
第7课（3.4）
第8课（3.5-3.5.4）
3.5.3 单元格与表头的合并方法
1．多列单元格合并
2．多行单元格合并
3．多行多列单元格同时合并3.5.4 制作单元格内容
1．引用文本
2．引用图像
小结巩固回顾网页表格的概念、表格的代码结构，表格制作方法，单元格合并，以及单元格内容制作方法。
课堂练习练习：
1.制作一个含有5行3列表格的网页;
2.制作一个1行2列的表格，表格式样如下：
奔驰SUN
课后作业作业：
参考资料教材3章；
“互联网”及期刊杂志的相关内容。
第9课（3.5.5-3.5.6）
第10课（3.6-3.7）
第11课（3.8）
第12课（4.1-4.1.3）
实施步骤：
一、组织教学、课前提问（5ˊ）
二、教学引导（3ˊ）
三、进入本次课讲授内容（77ˊ）
四、小结巩固（重申教学目的、重点、难点）（5ˊ）
讲授内容：
第4章 CSS网页式样制作技术
CSS就是显示样式，专门用来设置各类网页元素的显示效果。
我们把元素的显示效果事先采用CSS技术封装成一个样式，在主HTML文档中调用这个样式，就能得到这个事先设定的显示效果。
4.1 CSS基础知识
CSS是增强网页显示效果的超文本标记语言，能够起到代替和增强标签属性的作用。
CSS的突出特点是：简洁、易用、高效，可以重复使用，也可以继承使用。
4.1.1 CSS的作用
CSS是增强网页显示效果的超文本标记语言，能够起到代替和增强标签属性的作用。
CSS的突出特点是：简洁、易用、高效，可以重复使用，也可以继承使用。
4.1.2 CSS的构成规则
4.1.3 CSS样式类别
CSS是配合HTML网页文件使用的，如果没有HTML，则CSS没有任何作用。
HTML使用CSS样式时主要分以下几种情况：内联样式、内部样式、外部样式（链接样式、导入样式）。
1．内联样式
内联样式，也称为“行内样式”，就是在HTML的标签中，直教学提示：示例讲解示例讲解
第13课（4.1.4-4.1.6）
第14课（4.2）
第15课（4.3）
第16课（4.4-4.4.3）
第17课（4.4.4）
第4章CSS网页式样制作技术 4.4.4 设置斑马纹表格综合范例课时2学时教学方法讲授、示例讲解进程第17次课教学目的1．掌握斑马纹表格式样的制作方法。
重点多媒体引用的方法、滚动字幕的制作方法
难点滚动字幕的属性设置
实施步骤：
一、组织教学、课前提问（5ˊ）
二、教学引导（3ˊ）
三、进入本次课讲授内容（77ˊ）
四、小结巩固（重申教学目的、重点、难点）（5ˊ）
讲授内容：
第4章 CSS网络式样制作技术
如果表格较宽、行数较多，很容易看错行。
采用斑马纹显示风格，每行一种颜色，可以很好地解决这个问题。
制作斑马纹表格，需要熟悉颜色搭配，才能产生较好的颜色交替效果。
4.4.4 设置斑马纹表格综合范例教学提示：示例讲解
第18课（4.5）
第19课（4.6）
第20课（4.7-4.7.3）。