(完整版)电子商务网页设计与制作精致版
《电子商务网页设计与制作》教学大纲
《电子商务网页设计与制作》教学大纲一、课程信息课程名称：电子商务网页设计与制作课程类别：素质选修课/专业基础课课程性质：选修/必修计划学时：23计划学分：2先修课程：无选用教材：《电子商务网页设计与制作》适用专业：课程负责人：二、课程简介随着网上购物的不断流行，电子商务成为了互联网时代的新兴商务模式，电子商务网页设计也应运而生。
电子商务网页设计通常分为两个部分，即先使用Photoshop设计出网页效果图，再使用Dreamweaver来合成网页页面。
本课程即以Photoshop CS6和Dreamweaver CS6为蓝本，讲解使用这两个软件进行电子商务网页设计与制作的相关知识。
本课程由浅入深、循序渐进，采用情景导入案例的方式讲解软件知识，然后通过“项目实训”和“课后练习”加强对学习内容的训练，最后通过“技巧提升”来提升学生的综合学习能力。
全书通过大量的案例和练习，着重对学生实际应用能力的培养，并将职业场景引入课堂教学，让学生提前进入工作角色。
三、课程教学要求注：“课程教学要求”栏中内容为针对该课程适用专业的专业毕业要求与相关教学要求的具体描述。
“关联程度”栏中字母表示二者关联程度。
关联程度按高关联、中关联、低关联三档分别表示为“H”“M”或“L”。
“课程教学要求”及“关联程度”中的空白栏表示该课程与所对应的专业毕业要求条目不相关。
四、课程教学内容五、考核要求及成绩评定注：此表中内容为该课程的全部考核方式及其相关信息。
六、学生学习建议（一）学习方法建议1. 理论配合实战训练进行学习，提高学生的实战动手能力；2.设计不同类型的作品，进行深入学习； 3. 提高学生的设计感和审美能力。
（二）学生课外阅读参考资料七、课程改革与建设该课程为高等院校O2O 新形态立体化系列规划教材，教学形式为“情景导入→课堂案例→项目实训→课后练习→技巧提升”5段教学法，将职业场景、软件知识、行业知识进行有机整合，各个环节环环相扣，浑然一体。
电子商务网页设计与制作 (1)[14页]
![电子商务网页设计与制作 (1)[14页]](https://img.taocdn.com/s3/m/a5457b51ec3a87c24128c419.png)
任务二 赏析电子商务商城网站
该网站的布局结构和京东商城类似，便于消费者查找的搜索栏也放在页面顶部导航栏上方或者下方的 显著位置，“购物车”也会放置在右侧顶部显著的位置。主体部分从左到右依次为分类列表区、相关信息 动态区，促销宣传区、橱窗展示区等。在主页底部，有常见的“购物资讯”、“支付方式”、“帮助和购 物指南”等栏目。二级页面包括主商品的介绍、规格、用户评价等。
任务一 赏析企业形象网站
logo 导航栏 banner
内容栏
版尾
任务一 赏析企业形象网站
电子商务网页的风格和布局
（1）网页的风格：在对网页插入各种元素、修饰效果之前，要先确定网页的风格。网页的 风格是指网站给浏览者的整体形象，包括站点的CI(标志、色彩和字体)、版面布局、浏览方 式、交互性、文字、内容及网站荣誉等诸多因素。 （2）根据不同的网页风格，可以将网页分成商业网页和个人网页。商业网页内容丰富、信 息量大，一般都有统一的布局设计。个人网页风格多样、内容专一、形式灵活，更容易创 造出美感。 （3）国字型布局模式：这是一个形象的说法，就是指页面上下各有一个广告条，左侧是主 菜单，右侧是友情链接等，中间是主要内容。这种布局的优点是页面充实、内容丰富、信 息量大，是综合性网站常用的版式。 （4）“T”结构布局。所谓“T”结构，就是指网页上边和下边相结合，页面顶部为横条 网站标志和广告条，下方的左侧为主菜单，右侧显示内容的布局。这是网页设计中应用最 广泛的一种布局方式。
任务二 赏析电子商务商城网站
（1）淘宝网和传统网上商城不一样，它更像个平台，为商品在线交易的平台，但整体结构还是和商 城相近。淘宝网由于商品众多，分类工作是重中之重，除了左侧分类列表区进行初步分类外，更为详细的 商品分类列表占据了页面主体的主要部分，取代了其他商城站常见的橱窗展示区。
《电子商务网页设计与制作》教学教案
《电子商务网页设计与制作》教学教案第一章：电子商务网页设计基础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. 学习网页排版的设计方法与原则。
电子商务网页设计与制作完整版ppt课件全套教学教程(最新)
拓展练习 2.网页设计常用尺寸
网页设计因其载体的限制，要充分考虑到设备的尺寸，在设计页面的过程中， 设计师往往会根据屏幕大小来设计页面每个部分的宽窄，通常一个静态屏幕所展 示页面的宽高可以称之为一屏，一个完整的页面是由多屏组成的。
一屏的宽度由显示器宽度决定，再根据不同的浏览器进行微调。在显示器的 尺寸上减去20像素到30像素不会出现水平滚动条。但在实际操作中，我们通常只 会对网页中的主体部分进行设计，将主体放在屏幕中间，两边留白，或者插入大 的背景图。因此网页的宽度很大程度上会和版心尺寸保持一致。通常是920像素到 1400像素之间。而一屏的高度通常会在600像素到800像素之间，如果超过800像素， 那么该部分内容就不能在一个静态屏幕上完整显示，会进一步影响用户的体验。
知识分析
4.构成网页的基本元素 (1)logo。
网站logo,也叫网站标志,它是一个网站的象征。网站标志一般放在网页的左 上角。网站标志应体现该网站的特色、内容以及其内在的文化内涵和理念。通常 企业网站的logo也就是该企业的logo。常为代表性的人物、动物、物品等,如工 行的标志、搜狐的狐狸等。
知识分析
2. 竞品分析 竞品分析通常包括背景分析和定位分析两方面： 背景分析主要包括公司的资源、团队的背景，人员构成、组织架构、公司愿景、 成本构成。通过背景分析，可以深入了解公司的现状，公司的风格。
知识分析
3. 基于栅格化设计原理的网页布局 栅格系统应用于设计领域已经至少50年了。栅格化让眼睛浏览信息更加愉悦。
任务实施
01 电商企业网站的需求分析 02 电商企业网站的布局结构分析
03 电商企业网站的色彩应用
知识分析 1.网站规划的市场调研
网站的规划是指在网站建设前确定好网站的主题和功能目标后，对网站目标 定位，进行的内容规划和功能规划。其中直接的表现就是网站结构的规划，特别 对于网站前端部分而言，更为关注的是网站的栏目设计。
电子商务网页设计与制作课程标准.doc
学校名称《电子商务网页设计与制作》课程标准课程代码适用专业电子商务编制审核制定日期一,课程定位《电子商务网页设计与制作》是电子商务专业地理实一体课程,是电子商务专业地核心课,本门课程对于网站维护岗,网站编辑岗,美工面设计岗,网页设计岗岗位而言都是从业员需要掌握地最核心地专业技能。
通过本门课地学,学生应该掌握一种网站设计工具,熟悉网站设计地整个流程,并培养完成静态网站设计任务地职业素养与职业能力,提高学生地就业竞争能力。
本课程是理实一体化课程,课程地实验实践环节学时数大约占该门课程总学时地五零%,本课程在第二学年第一学期开设,本课程地先行课程为《图像处理技术》与《电子商务概论》,学生已经具备扎实地理论知识与一定地计算机网络知识与操作技能;其后续课程为《网上经营实务》与《电子商务综合应用实训》。
二,课程目地《电子商务网页设计与制作》课面向技术岗位群设立,通过课程学,学生能树立良好地世界观,生观与价值观,具备坚持走特色社会主义道路地信念与决心,能在遇到困难时不轻言放弃而是努力攻克困难,能具备信息收集与筛选能力,制定工作计划,独立决策与实施能力,能利用网站制作工具,完成电商静态网站地网页策划与制作。
具体课程目地如下:知识目地:一.了解简单地网站地规划设计能力,能阅读需求说明书,明确客户需求;二.知道建立站点,管理站点地有关步聚与方法;三.熟悉常用HTML代码地语法结构与使用方法四.理解使用DW工具行网页地设计与制作地方法与步骤;五.熟悉CSS样式地设置方法;六.了解移动端网站自动生成工具地使用方法与步骤。
七.熟悉测试,发布,维护站点地方法。
能力目地:1.具备阅读并正确理解网站需求分析报告与设计方案地能力。
2.能从"色彩搭配地视觉效果","正确地传达"与"网页布局方式"三个方面对内外知名电商网站行简单地赏析;3.会分析电商网站地栏目,并能使用WORD软件绘制电商网站地栏目结构图;4.能使用"记事本"编写最简单地HTML代码实现简单地网页;五.熟练使用网页设计工具与图像美化工具制作电子商务网页。
电子商务网页设计与制作完整版ppt课件全套教学教程(最新)
任务实施
01 电商企业网站的需求分析 02 电商企业网站的布局结构分析
03 电商企业网站的色彩应用
知识分析 1.网站规划的市场调研
网站的规划是指在网站建设前确定好网站的主题和功能目标后，对网站目标 定位，进行的内容规划和功能规划。其中直接的表现就是网站结构的规划，特别 对于网站前端部分而言，更为关注的是网站的栏目设计。
度，通过划分具有规律的分割，来提高网页开发效率。如下图所示： 将960像素的页面平均分成12分，间隔10像素。
960像素12栅格分割示意图
知识分析 3. 基于栅格化设计原理的网页布局
（1）960栅格化系统 960栅格化系统系统（或者说适应型css构架）早期主要用来进行快速原型制
作，减少重复单调的工作，但是目前，它在网页设计开发项目中开始扮演非常重 要的角色。它为我们的设计提供一个坚实的坐标基础。
拓展练习 2.网页设计常用尺寸
网页设计因其载体的限制，要充分考虑到设备的尺寸，在设计页面的过程中， 设计师往往会根据屏幕大小来设计页面每个部分的宽窄，通常一个静态屏幕所展 示页面的宽高可以称之为一屏，一个完整的页面是由多屏组成的。
一屏的宽度由显示器宽度决定，再根据不同的浏览器进行微调。在显示器的 尺寸上减去20像素到30像素不会出现水平滚动条。但在实际操作中，我们通常只 会对网页中的主体部分进行设计，将主体放在屏幕中间，两边留白，或者插入大 的背景图。因此网页的宽度很大程度上会和版心尺寸保持一致。通常是920像素到 1400像素之间。而一屏的高度通常会在600像素到800像素之间，如果超过800像素， 那么该部分内容就不能在一个静态屏幕上完整显示，会进一步影响用户的体验。
知识分析
2. 竞品分析 竞品分析通常包括背景分析和定位分析两方面： 背景分析主要包括公司的资源、团队的背景，人员构成、组织架构、公司愿景、 成本构成。通过背景分析，可以深入了解公司的现状，公司的风格。
电子商务网页设计与制作ppt (7)[31页]
![电子商务网页设计与制作ppt (7)[31页]](https://img.taocdn.com/s3/m/edb68c5d680203d8cf2f2420.png)
— 3—
能力目标
学完本章后,学生应当能够依据项目要求完成产品图片素材的采集和处理,包括: (1)书写商品拍摄计划。 (2)搭建拍摄环境。 (3)拍摄相关主题商品。 (4)对采集的图片进行处理以适应电子商务网店。 (5)对图片进行色调、色泽的美化和调整。 (6)给图片加上水印。
— 4—
第一节 拍摄主推商品图片
本节以拍摄罐装手剥小核桃为例来说明网 店商品主要图片素材的收集。
一、待拍摄商品的分类整理
首先,按照网店经营分类的设置将所有商品分 类整理完毕。然后,将每一类商品按商品名称、规 格分出每组样式,只要包装不同,同一组样式就要 进行区分。每组一般准备两份以上商品以备用,如 拆包拍摄等。
— 5—
二、制订基本拍摄计划
➢ 光圈,通常是在镜头内用来控制光线透过镜头进入机身感光元件光量的装置。
— 12 —
六、实景操作
1.若没有摄影台等设备,如何构建简易环境
可以借助普通桌面靠墙或者在地面用纸箱 堆放可靠放背景布的斜面,若没有植绒无纺布做 背景布,可以用绘画的白卡纸等做背景纸替代, 背景纸应自然弯曲靠在摄影区域上,在斜面位置 不要折出棱角。简易的拍摄环境。
好的闪光灯应该输出稳定并可调、回电速度快、色温标准(一般为5500K左右,与 日光相同)、可转向、可改变光照范围等。
持续照明常用的是荧光灯、卤素灯、钨丝灯等,它们可以持续、稳定地提供补充光源。
— 11 —
4.商品拍摄的镜头选择
➢ 最常用于商品拍摄的DSLR相机是可以更换镜头的。常用于室内拍摄的镜头一般是 最小景深大于50mm的镜头。
— 9—
2.直射光和间接光
直射光是指光源直接打在被拍摄物体上,往往会产生浓 重阴影,比较适合于拍摄风格对比强烈的照片,但无法体现被
电子商务《网页设计与制作》课程标准
《网页设计与制作》课程标准一、课程说明课程名称网页设计与制作标准简称网页设计与制作适用专业电子商务修读学期第一学期制订时间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. 关注学生的学习进度，针对不同学生的实际情况进行针对性指导。
电子商务网页设计与制作 (2)[30页]
![电子商务网页设计与制作 (2)[30页]](https://img.taocdn.com/s3/m/8d57e6c5f18583d048645931.png)
p{
padding:5px 10px 15px 20px; /*段落标签盒子模型的上内边距为5个像素，右内边距为10个像素，下内边距为15个像素，左内 边距为20个像素*/
}
p{
padding-top: 5px;
/*上内边距为5个10个像素*/
p{ border-top-width: 5px; border-right-width: 10px; border-bottom-width: 15px; border-left-width: 20px; border-top-style: solid; border-right-style: dotted; border-bottom-style: dashed; border-left-style: double; border-top-color: #F00; border-right-color: #000; border-bottom-color: #00F; border-left-color: #FF0;
任务一 认识DIV标签
CSS盒子模型的内边距
内边距（padding）在盒子模型中位置，用于设置内容与边框之间的距离。可以通过padding-left， padding-right，padding-top和padding-bottom来分别设置左、右、上、下的内边距。也可以通过 padding：1、2、3、4来直接设置四个方向的内边距，顺序按照顺时针方向，依次为上、右、下、左。 代码如下：
能力目标：
(1)能够运用盒子模型和标准流进行页面布局 (2)能够独立使用DIV+CSS进行简单的页面布局设计
知识目标： (1)盒子模型 (2)标准流 (3)使用DIV+CSS进行布局网页的方法
电子商务网页设计与制作精致版
任务1.4 网站规划
• 1.主题规划
• 在做网站主题规划时，可以参考企业竞争对手的网 站，学习他人之长，挖掘自身优势，做出特色。
• 2.域名设计
• 域名可以采用企业名称、品牌名称或产品名称的 中文或英文字母
3.网站栏目规划
关于向日葵 课程展示 培训实况 成果展示 搜索活动 赛事活动 科技资讯 科技培训
4 行业企业类网站
设计要求
1.网页布局合理 2.网页导航清晰 3.网页配色专业
任务1.2 网站鉴赏分析
1 整体布局
• 1. LOGO、导航突出 • 2. 统一的平台风格 • 3. 链接布局合理
LOGO
导航
页面头部
产品形象展示
网站内容
网站内容 页脚
2 网页配色技巧
45度同类色
90度邻近色
135度对比色
超文本标记语言?
是用于描述网页文档的一种标 记语言。网页的本质就是超级文本标 记语言，通过结合使用其他的网络技 术，可以创造出功能强大的网页。因 而，超级文本标记语言是网页设计编 程的基础；下图是一个网页的效果图 和程序代码。
任务2.1 HTML设计基础
1 HTML 简介
HTML 为超文本标记语言英文简称。 HTML 和一般文本的不同是，一个 HTML 文件不仅包含文本内容，还包 含“标记”，即包含了一对打开和关 闭的标记，并有属性和值。 HTML 标记分为双标记和单标记， HTML 文件的后缀名是“.htm”或者 是“html”。
• （6）遵循从左到右的阅读习惯，重要的内容应该放到Title 的靠 前的位置
信 息 优 化
❖2. Keywords 关键字优化
❖ 我们可以在网页中添加Name 为Keywords 属 性的Meta 标签，其中Content 属性值即为关 键字内容，多个关键字间用逗号间隔，逗号 表示是逻辑“或”，空格表示逻辑“与”。
电子商务网页设计与制作 (8)[7页]
![电子商务网页设计与制作 (8)[7页]](https://img.taocdn.com/s3/m/8914e995783e0912a3162a2b.png)
任务一 网站建设规划
首页设计
任务一 网站建设规划
子页设计
任务一 前期制作准备
1. 准备图片素材 2网站 所需图片
Css
主要存放网站的 CSS文件
Page
主要存放网站的页 面
Index.html
能力目标： (1)利用photoshop制作网站素材。 (2)综合利用所学知识完成案例制作。
知识目标： (1)掌握规划网站的方法。 (2)掌握HTML+CSS的网页布局方法。
任务一 网站建设规划
网站总体设计 1．网站功能结构分析 商城主要有以下功能模块：男装、女装、童装、装备/配件、畅销排行榜，页面结构如图10-1所示。
网站架构
首页
男装
女装
童装
鞋类
装备/配件 畅销排行榜
每日特价
上装
上装
上装
运动鞋
箱包
用户登陆
下装
下装
下装
休闲鞋
袜子
产品分类
内衣
护具
2．网站创意分析 本网站的主要功能是向消费者传递信息，因此在页面设计结构上无须太过花哨，标新立异的设计和布局未必 适合，更应该注重商务性与实用性。在设计时，要采用统一的风格和结构把各页面组织在一起。由于本网站 销售的主要商品是运动用品，所以在选择颜色、字体、图形即页面布局时应传达给用户一种阳光、健康、积 极向上的主题，并引导他们去关注站点的内容。企业LOGO。以蓝色为主基调色配合红色正好符合网站的主 题，在页面设计过程中也将以蓝色为主基调色配合红色使用。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
4 行业企业类网站
设计要求
1.网页布局合理 2.网页导航清晰 3.网页配色专业
任务1.2 网站鉴赏分析
1 整体布局
• 1. LOGO、导航突出 • 2. 统一的平台风格 • 3. 链接布局合理
LOGO
导航
页面头部
产品形象展示
网站内容
网站内容 页脚
2 网页配色技巧
45度同类色
90度邻近色
135度对比色
搜索引擎 网页索引数据库
网络蜘蛛网页爬行 ，搜取数据，形成 网页索引数据
网络蜘蛛网页爬行 ，搜取数据，形成 网页索引数据
搜索引擎优化下网页设计目标
➢（1）让设计与制作的网页在搜索引擎结 果中有一个较好的排名；
➢（2）网页能够吸引用户的目光，增加被 点击几率；
➢（3）用户进入网页后，网页能达到用户 期望，从而减少跳失率；
000001000010000100@000010000000001000000001000@0000100000
000001011110000000
000010@000100000001
0001000100@00001000
000010000000
000@100001000010
00100
电子商务网页 0001001000@10000
搜 索 引 擎 工 作 原 理
1
---------------------------------------------------------------------------------------------------------------
互联网网页
网络蜘蛛网页爬行， 搜取数据，形成网页 索引数据
（2）主栏目清晰并且全站统一。
❖ 3 冰山效应网页优化
在图中，有效地避免了网页冰 山效应，立即购买和加入购物车 在网页的第一屏已醒目地显示出 来，用户如需更多的信息可以转 向第二屏。用户打开网页后，所 见到的信息能反映网页的全貌， 加强了用户继续阅读的信心。
❖ 4. Flash 网站优化
• 虽然能从搜索结果中了解梦洁为 家纺类上市企业，但进入网站后 用户容易无所适从，从图中，我 们可以通过点击链接继续访问， 但网站内容和主题不直观，营销 用户体验以及Flash 动画也对搜 索引擎的提取等问题都待改善。
执行操作
执行某项操作，如网上支付、网上购物、网上 预约、发布博客或发布论坛帖子等。
任务1.1 不同类型网站的设计要求 1 资讯门户类网站
设
计
统一的平台风格
要
求
全面的内容频道
良好的导航体验
2 电子商务类网站
设计要求
清晰的导航结构 清晰的图片展示
丰富的交易外功能
3 交通旅游类网站
设计要求
1导航清晰 2网站内容丰富 3网页配色亮丽
10000
0000110001000 0100100
设计与制作
0010001000@01000
000100000010000@0000001
000100001000010001000010010001000010000
00001100010000100000000100100001000000001000001000000001
目录
项目一 网站鉴赏与网站规划 项目二 网页设计基础 项目三 网页设计的基本应用 项目一 网站鉴赏与网站规划 项目二 网页设计基础
项目1 网络鉴赏与 网站规划
➢一、不同类型网站的设计要求
任
➢二、网站鉴赏分析
务 ➢三、SEO 网站优化
➢四、网站规划
我们通常 在 网 上 做什么？
搜索信息
是搜索某种信息，如新闻、空调选购信息、健康资 讯等。
➢（4）网页和网站能提供用户额外价值， 最终提高网站转化率，提高用户满意度 。
2 网站主题优化
• 网站主题的确定 • （1）主题内容定位，做到小而精，主题定位小，内容精； • （2）主题明确，凸显重点，去除与主题无关的内容； • （3）专题内容丰富，展现高品质的产品和服务。
3 网站布局优化
❖ 1 页面定位的优化 • （1）网页标题：
• 其代码如下：
代码：
• <meta name="keywords" content=" 冰箱, 冷柜, 洗衣机, 彩电, 热水器, 空调, 厨房电器, 整体厨房, 生活小家电, 电脑 , 手机数码, 商用空调, 商用冷柜, 商用电视, 商用电脑, 家居 集成解决方案, 住居解决方案, 服务与安装, 产品注册, 在线 客服, 延保服务, 设计体验中心, 营销活动, 服务与支持, 论 坛, 说明书, 产品特性, 型号参数, 产品评论 " />
Title & Meta
4 ❖ 1. Title 信息优化 网 • （1）首页：网站名称或者网站名称_ 提供服务介绍或产品介绍 页 • （2）频道页：频道名称_ 网站名称
• （3）文章页：文章Title_ 频道名称 _ 网站名称
• （4）标题主题明确，应包含该网页中最重要的内容核心关键字
• （5）简明精练，不罗列与网页内容不相关的信息
• （6）遵循从左到右的阅读习惯，重要的内容应该放到Title 的靠 前的位置
信 息 优 化
❖2. Keywords 关键字优化
❖ 我们可以在网页中添加Name 为Keywords 属 性的Meta 标签，其中Content 属性值即为关 键字内容，多个关键字间用逗号间隔，逗号 表示是逻辑“或”，空格表示逻辑“与”。
• 在Firefox 和IE 浏览器中，网页的标题显示在窗口 的顶部或地址栏下方的标签页上。
• （2）URL ：
• URL 应当对网页的内容有所反映，比如本理财案 例对应的URL 路径money 目录。
• （3）路径导航：
• 对于用户来说，这些链接能够清楚表明他们正在 网站的哪个层级，当前正在浏览什么页面。
• （5）段落标题：
• 也能帮助用户确定网页位置。
• （6）标志和标语：
• 人们普遍认为能从网页的左上角得知自己正在访 问的网站及位置。
• （7）分类导航按钮：
• 本案例没有体现，通常体现在左右侧边栏的分类 导航按钮。
❖ 2 弹簧高跷浏览行为优化
optimize
（1）增加左侧导航栏，页面跳转时，不 会出现明显的网站各层级之间跳转的用 户感受；
180度互补色
3 导航设计
（1）主导航结构和名称清晰。 （2）网站导航采用文本链接。 （3）面包屑导航 。 （4）导航阅读习惯。
4 网站图片设计
使用图片需 要考虑与网 站的总体设 计协调、考 虑放置位置 ，并预计浏 览器是否支 持该图像的 显示、用户 能接受其下 载速度等。
任务1.