(完整版)电子商务网页设计与制作精致版

《电子商务网页设计与制作》教学大纲一、课程信息课程名称：电子商务网页设计与制作课程类别：素质选修课/专业基础课课程性质：选修/必修计划学时：23计划学分：2先修课程：无选用教材：《电子商务网页设计与制作》适用专业：课程负责人：二、课程简介随着网上购物的不断流行，电子商务成为了互联网时代的新兴商务模式，电子商务网页设计也应运而生。

电子商务网页设计通常分为两个部分，即先使用Photoshop设计出网页效果图，再使用Dreamweaver来合成网页页面。

本课程即以Photoshop CS6和Dreamweaver CS6为蓝本，讲解使用这两个软件进行电子商务网页设计与制作的相关知识。

本课程由浅入深、循序渐进，采用情景导入案例的方式讲解软件知识，然后通过“项目实训”和“课后练习”加强对学习内容的训练，最后通过“技巧提升”来提升学生的综合学习能力。

全书通过大量的案例和练习，着重对学生实际应用能力的培养，并将职业场景引入课堂教学，让学生提前进入工作角色。

三、课程教学要求注：“课程教学要求”栏中内容为针对该课程适用专业的专业毕业要求与相关教学要求的具体描述。

“关联程度”栏中字母表示二者关联程度。

关联程度按高关联、中关联、低关联三档分别表示为“H”“M”或“L”。

“课程教学要求”及“关联程度”中的空白栏表示该课程与所对应的专业毕业要求条目不相关。

四、课程教学内容五、考核要求及成绩评定注：此表中内容为该课程的全部考核方式及其相关信息。

六、学生学习建议（一）学习方法建议1. 理论配合实战训练进行学习，提高学生的实战动手能力；2.设计不同类型的作品，进行深入学习； 3. 提高学生的设计感和审美能力。

（二）学生课外阅读参考资料七、课程改革与建设该课程为高等院校O2O 新形态立体化系列规划教材，教学形式为“情景导入→课堂案例→项目实训→课后练习→技巧提升”5段教学法，将职业场景、软件知识、行业知识进行有机整合，各个环节环环相扣，浑然一体。

《电子商务网页设计与制作》教学教案第一章：电子商务网页设计基础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. 学习网页排版的设计方法与原则。

学校名称《电子商务网页设计与制作》课程标准课程代码适用专业电子商务编制审核制定日期一,课程定位《电子商务网页设计与制作》是电子商务专业地理实一体课程,是电子商务专业地核心课,本门课程对于网站维护岗,网站编辑岗,美工面设计岗,网页设计岗岗位而言都是从业员需要掌握地最核心地专业技能。

通过本门课地学,学生应该掌握一种网站设计工具,熟悉网站设计地整个流程,并培养完成静态网站设计任务地职业素养与职业能力,提高学生地就业竞争能力。

本课程是理实一体化课程,课程地实验实践环节学时数大约占该门课程总学时地五零%,本课程在第二学年第一学期开设,本课程地先行课程为《图像处理技术》与《电子商务概论》,学生已经具备扎实地理论知识与一定地计算机网络知识与操作技能;其后续课程为《网上经营实务》与《电子商务综合应用实训》。

二,课程目地《电子商务网页设计与制作》课面向技术岗位群设立,通过课程学,学生能树立良好地世界观,生观与价值观,具备坚持走特色社会主义道路地信念与决心,能在遇到困难时不轻言放弃而是努力攻克困难,能具备信息收集与筛选能力,制定工作计划,独立决策与实施能力,能利用网站制作工具,完成电商静态网站地网页策划与制作。

具体课程目地如下:知识目地:一.了解简单地网站地规划设计能力,能阅读需求说明书,明确客户需求;二.知道建立站点,管理站点地有关步聚与方法;三.熟悉常用HTML代码地语法结构与使用方法四.理解使用DW工具行网页地设计与制作地方法与步骤;五.熟悉CSS样式地设置方法;六.了解移动端网站自动生成工具地使用方法与步骤。

七.熟悉测试,发布,维护站点地方法。

能力目地:1.具备阅读并正确理解网站需求分析报告与设计方案地能力。

2.能从"色彩搭配地视觉效果","正确地传达"与"网页布局方式"三个方面对内外知名电商网站行简单地赏析;3.会分析电商网站地栏目,并能使用WORD软件绘制电商网站地栏目结构图;4.能使用"记事本"编写最简单地HTML代码实现简单地网页;五.熟练使用网页设计工具与图像美化工具制作电子商务网页。

《网页设计与制作》课程标准一、课程说明课程名称网页设计与制作标准简称网页设计与制作适用专业电子商务修读学期第一学期制订时间2018.08课程代码1351610课程学时72课程学分4课程类型B类课程性质必修课课程类别专业基础课先修课程平面设计基础与应用后续课程品牌运营、平台运营对应职业资格证或内容CEAC网店运营师、网页制作员合作开发企业无执笔人合作者无审核人制（修）定2018-08日期注：1.课程类型（单一选项）：A类（纯理论课）/B类（理论＋实践）/C类（纯实践课）2.课程性质（单一选项）：必修课/专业选修课/公共选修课3.课程类别（单一选项）：公共基础课/专业基础课/专业核心课4.合作者：须是行业企业人员，如果没有，则填无二、课程定位《网页设计与制作》是为满足行业企业对静态网页设计和制作人员的用人需求而开设的一门面向电子商务专业的必修课。

涉及网页基础、HTML标记、CSS样式、网页布局等内容。

本课程的前期课程主要有《平面设计》等，平行的专业课程主要有《市场营销》等，后续的专业课程主要有《网店设计》等。

通过本课程学习让学生在已掌握平面设计等基本技能的基础上，进一步掌握网页设计开发技能，同时培养了学生网站建设与运营能力，使其具备从事网站编辑相关岗位的职业能力。

三、设计思路《网页设计与制作》课程设计的基本理念是遵循行动导向的教学理念，按照网站编辑的实际工作过程，设计教学的过程。

充分发挥学生的主体性作用，使学生积极主动参与工作过程。

在教学中体现学生主体、过程导向的理念，按照“项目教学法”设计和实际工作过程一致的学习任务单，分阶段实现不同任务，达到79“做中学”目的。

以电子商务专业学生的就业为导向，根据行业专家对电子商务专业所涵盖的岗位群进行的任务和职业能力分析，紧紧围绕完成工作任务的需要来选择课程内容，设定职业能力培养目标；以“工作项目”为主线，创设工作情景；以书本知识的传授变为动手能力的培养为重点，强化学生实践动手能力的培养，以实现职业能力的培养目标。

《电子商务网页设计与制作》教学教案第一章：电子商务网页设计概述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进行布局和排版）。

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

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

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

电子商务专业《网页设计与制作》第一章通过本章的学习，应该了解互联网的基本功能、服务、原理，对网页浏览服务的体系结构、技术名词、浏览器有基本的了解。

对于网页的设计原则和所使用的工具应有一定的认识。

从而为继续深入学习网页制作技术打下知识基础。

知识点：1. 互联网主要提供的几种服务：Web、FTP、Telnet等的概念与功能；Web浏览器服务的基本原理；URL、HTTP、超级链接、域名系统等的概念。

2. 网页与主页之间的关系；网页的基本概念。

3. HTML的概念与功能;HTML的基本构成单位、标记。

4. Web浏览器的作用和工作原理。

5. 网页设计的基本目标。

6. 网页制作工具的分类及标准。

7. 如何快速地掌握网页的制作第一节关于互联网互联网(Internet)是由世界上各种各样的网络互联所形成的"网络的网络"，是一个网际网，有时音译为“因特网"。

一、什么是协议网络协议 (Protocol)是一系列通信规则的总称，主要包括用户数据与控制信息的结构和格式、需要发出的控制信息以及相应要完成的操作与响应、对事件实现顺序的详细说明等三部分内容。

协议的实质就是进行通信所使用的语言。

从大体上来说，网络协议可以分为硬件协议和软件协议两大类：1.硬件协议：定义了硬件设备如何运作以及如何协同工作。

2.软件协议：程序之间的通信是通过软件协议完成的。

二、互联网协议1. OSI七层模型OSI（Open System Interconnection，开放式系统互联）是由国际标准化组织 (International Organization for Standardization，ISO)发起制定的计算机网络通信标准。

OSI定义了网络功能的七层模型，分别是：应用层、表示层、会话层、传输层、网络层、数据链路层、物理层，称为OSI七层模型。

2. TCP/IP协议TCP/IP(Transmission Control Protocol/Internet Protocol)是为连接不同的网络而设计的一个协议集，主要由TCP和IP两套协议组成，互联网就是以此为基础建立的。

电子商务网页设计与制作在当今数字化的商业世界中，电子商务网页已经成为企业展示产品、服务以及与客户互动的重要窗口。

一个设计精美、功能齐全且易于使用的电子商务网页，对于吸引潜在客户、促进销售以及提升品牌形象都起着至关重要的作用。

接下来，让我们深入探讨一下电子商务网页设计与制作的各个关键方面。

首先，我们来谈谈网页的布局设计。

一个清晰、直观的布局能够引导用户轻松浏览网页，快速找到他们所需的信息。

页面的顶部通常应放置网站的标志、导航栏以及搜索框。

导航栏要简洁明了，包含首页、产品分类、购物车、用户登录/注册等关键链接。

在页面的主体部分，要突出展示热门产品、新品推荐以及促销活动。

产品图片要清晰、吸引人，并且配有简洁准确的文字描述和价格信息。

页面的底部则可以放置版权信息、联系我们、常见问题解答等内容。

色彩搭配也是网页设计中不可忽视的一环。

选择适合品牌形象和目标受众的颜色非常重要。

例如，对于高端时尚品牌，可能会选择低调奢华的黑、白、金配色；而对于面向儿童的产品，鲜艳活泼的色彩如红、黄、蓝会更合适。

同时，要注意色彩的对比度和协调性，以确保文字清晰可读，页面整体美观舒适。

接下来是图片和视频的运用。

高质量的产品图片和生动的视频能够极大地提升用户的购物体验。

图片要多角度展示产品的细节，让用户能够全面了解产品的外观和特点。

视频可以用来展示产品的使用方法、功能演示或者品牌故事，增强用户对产品的信任和兴趣。

在网页的交互设计方面，要确保用户操作简单便捷。

购物车功能要易于使用，用户能够方便地添加、删除商品，查看商品总价和优惠信息。

注册和登录流程要简洁，尽量减少用户输入的信息，同时提供第三方登录选项，如微信、支付宝等。

支付环节要安全可靠，提供多种支付方式供用户选择。

对于电子商务网页来说，响应式设计至关重要。

随着移动设备的广泛使用，网页必须能够在不同尺寸的屏幕上（如手机、平板电脑、台式电脑）完美显示，并且保持良好的用户体验。

页面加载速度也是影响用户满意度的关键因素之一。

《电子商务网页设计与制作》课程设计课程名称：《电子商务网页设计与制作》课程设计授课对象：电子商务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. 关注学生的学习进度，针对不同学生的实际情况进行针对性指导。