(完整版)电子商务网页设计与制作精致版
《电子商务网页设计与制作》教学大纲
《电子商务网页设计与制作》教学大纲一、课程信息课程名称：电子商务网页设计与制作课程类别：素质选修课/专业基础课课程性质：选修/必修计划学时：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、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 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.