电子商务网页制作课件
合集下载
电子商务网页制作概述 课件
定义
电子商务网页是指通过网络平台展示 商品或服务，并实现交易的网页。
功能
电子商务网页具有商品展示、购物功 能、支付功能、用户注册和登录、订 单管理等功能。
电子商务网页的类型与特点
类型
按照商品类型分类，电子商务网页可 分为综合类电商网页、垂直类电商网 页和平台类电商网页。
特点
电子商务网页的特点包括用户体验友 好、交互性强、信息展示全面、易于 推广等。
2023
电子商务网页制作概 述
REPORTING
2023
目录
• 电子商务网页制作基础 • 电子商务网页的设计要素 • 电子商务网页的前端技术 • 电子商务网页的后端技术 • 电子商务网页的优化与推广 • 电子商务网页制作案例分析
2023
PART 01
电子商务网页制作基础
REPORTING
电子商务网页的定义与功能
电子商务网页的制作流程
设计阶段
进行整体风格设计、页面布局 设计、交互设计等。
测试阶段
对网站进行功能测试、性能测 试和兼容性测试，确保网站稳 定运行。
需求分析
明确网站目标和定位，了解用 户需求和行为习惯。
开发阶段
根据设计稿完成网页制作，包 括前端页面和后端功能的实现 。
上线运营
发布网站并进行持续的运营和 维护，包括内容更新、推广营 销等。
案例三：某电商平台的商品详情页制作
总结词
信息全面、易于比较
详细描述
该电商平台的商品详情页制作注重信息全面性和比较功 能。页面顶部展示了商品图片和名称，中部则详细介绍 了商品规格、材质、价格等信息，并提供了用户评价和 问答区域，方便用户了解其他用户的购物体验。底部则 提供了购买按钮和多种支付方式选择，方便用户完成购 买操作。同时，页面还支持不同规格和颜色的商品比较 功能，方便用户进行选购。
电子商务网页是指通过网络平台展示 商品或服务，并实现交易的网页。
功能
电子商务网页具有商品展示、购物功 能、支付功能、用户注册和登录、订 单管理等功能。
电子商务网页的类型与特点
类型
按照商品类型分类，电子商务网页可 分为综合类电商网页、垂直类电商网 页和平台类电商网页。
特点
电子商务网页的特点包括用户体验友 好、交互性强、信息展示全面、易于 推广等。
2023
电子商务网页制作概 述
REPORTING
2023
目录
• 电子商务网页制作基础 • 电子商务网页的设计要素 • 电子商务网页的前端技术 • 电子商务网页的后端技术 • 电子商务网页的优化与推广 • 电子商务网页制作案例分析
2023
PART 01
电子商务网页制作基础
REPORTING
电子商务网页的定义与功能
电子商务网页的制作流程
设计阶段
进行整体风格设计、页面布局 设计、交互设计等。
测试阶段
对网站进行功能测试、性能测 试和兼容性测试，确保网站稳 定运行。
需求分析
明确网站目标和定位，了解用 户需求和行为习惯。
开发阶段
根据设计稿完成网页制作，包 括前端页面和后端功能的实现 。
上线运营
发布网站并进行持续的运营和 维护，包括内容更新、推广营 销等。
案例三：某电商平台的商品详情页制作
总结词
信息全面、易于比较
详细描述
该电商平台的商品详情页制作注重信息全面性和比较功 能。页面顶部展示了商品图片和名称，中部则详细介绍 了商品规格、材质、价格等信息，并提供了用户评价和 问答区域，方便用户了解其他用户的购物体验。底部则 提供了购买按钮和多种支付方式选择，方便用户完成购 买操作。同时，页面还支持不同规格和颜色的商品比较 功能，方便用户进行选购。
电子商务网页制作与设计公开课详细PPT
以德立身 以技立足
图3-1保存网页
放飞理想 激扬青春 展现自我
网页文件操作
温馨提示：
在“文件”菜单里有“保存”和“另存为”两个命令，首次保存网 页时，选择“保存”或“另存为”命令都会弹出“另存为”对话框，提 示设计者设置保存位置和文件名；对于已经保存过的网页进行再次编辑 时，选择“保存”命令直接将所作的修改保存到原网页文档，而选择 “另存为”命令则再次弹出“另存为”对话框，可以重新设置保存位置 和文件名。
以德立身 以技立足
放飞理想 激扬青春 展现自我
网页文件操作
（2）、保存网页
打开“文件”菜单，选择“保存”命令， 将弹出“另存为”对话框，选择保存的 位置并输入保存文件名，单击“保存” 按钮即可将网页保存。
快捷键：
保存：ctrl+S 另存为：ctrl+shift+S
谈一谈还有那些软件“保存与另存为” 跟DW软件一样快捷键。
以德立身 以技立足
图3-13保存网页
放飞理想 激扬青春 展现自我
修改网页属性
打开“修改”菜单，选择“页面属性”命令，或按快捷键（Ctrl+J）， 或者单击属性面板中的“页面属性”按钮，将弹出“页面属性”对话框。
在该对话框中可以设置网页的各种属性，如页面文字的设置、页面背景的 设置、页面边距的设置、链接文字的设置以及标题编码的设置等，根据属性 分类不同，分为六个类别。
以德立身 以技立足
图3-16设置“链接”（CSS)
放飞理想 激扬青春 展现自我
修改网页属性
（4）、标题（CSS）
在“（标题CSS）”分类中，可 以设置如下属性：
标题字体的格式、大小和颜 色，设置标题1至标题6后，在字 体属性面板中直接指定文字为某 号标题后，该文字直接套用该标 题的属性。
图3-1保存网页
放飞理想 激扬青春 展现自我
网页文件操作
温馨提示：
在“文件”菜单里有“保存”和“另存为”两个命令，首次保存网 页时，选择“保存”或“另存为”命令都会弹出“另存为”对话框，提 示设计者设置保存位置和文件名；对于已经保存过的网页进行再次编辑 时，选择“保存”命令直接将所作的修改保存到原网页文档，而选择 “另存为”命令则再次弹出“另存为”对话框，可以重新设置保存位置 和文件名。
以德立身 以技立足
放飞理想 激扬青春 展现自我
网页文件操作
（2）、保存网页
打开“文件”菜单，选择“保存”命令， 将弹出“另存为”对话框，选择保存的 位置并输入保存文件名，单击“保存” 按钮即可将网页保存。
快捷键：
保存：ctrl+S 另存为：ctrl+shift+S
谈一谈还有那些软件“保存与另存为” 跟DW软件一样快捷键。
以德立身 以技立足
图3-13保存网页
放飞理想 激扬青春 展现自我
修改网页属性
打开“修改”菜单，选择“页面属性”命令，或按快捷键（Ctrl+J）， 或者单击属性面板中的“页面属性”按钮，将弹出“页面属性”对话框。
在该对话框中可以设置网页的各种属性，如页面文字的设置、页面背景的 设置、页面边距的设置、链接文字的设置以及标题编码的设置等，根据属性 分类不同，分为六个类别。
以德立身 以技立足
图3-16设置“链接”（CSS)
放飞理想 激扬青春 展现自我
修改网页属性
（4）、标题（CSS）
在“（标题CSS）”分类中，可 以设置如下属性：
标题字体的格式、大小和颜 色，设置标题1至标题6后，在字 体属性面板中直接指定文字为某 号标题后，该文字直接套用该标 题的属性。
电子商务网页图像制作完整版教学课件全书电子讲义
5. PSD 格式
PSD 是图像处理软件 Adobe Photoshop 的专用格式。PSD 其实是 Photoshop 进行平面设计的一张“草稿图”，它里面包含有各种图层、通道、遮 罩等多种设计的样稿，以便于下次打开文件时可以修改上一次的设计。在 Photoshop 所支持的各种图像格式中，PSD 的存取速度比其他格式快很多，功能 也很强大。
RGB 图像使用红、绿、蓝三种颜 色，在屏幕上可以重现多达 1670 万 种颜色。RGB 图像为三通道图像，每 个像素包含 24 位（8×3）。新建 Photoshop 图像的默认模式为 RGB， 计算机显示器总是使用 RGB 模型显示 颜色。
RGB颜色模式
2. CMYK 模式
CMYK 颜色模式以打印在纸张上油墨的光线吸收特性为基础，当白光照射 到半透明的油墨上时，部分光线被吸收，部分被反射回眼睛。理论上，纯青色 （C）、品红（M）和黄色（Y）色素能够合成吸收所有颜色并产生黑色，因此， CMYK 模型也叫作减色模型。由于所有打印油墨都会包含一些杂质，这三种油墨 实际上产生的是一种土灰色，因此必须与黑色（K）油墨混合才能产生真正的黑 色。
标准色轮不同色相及其饱和度变化
基于颜色的色相（Hue）、饱和 度（Saturation）、明度（Brightness） 三要素，在Photoshop等计算机绘图 软件中，常用 HSB 模式来描述颜色。
使用 HSB 模式描述颜色
二、数字图像的色彩模式
除了 HSB 颜色表示模式，计算机图像处理软件通常还使用 RGB、CMYK 及 Lab 等色彩模式，以便在不同应用领域更好地表示颜色。其中 RGB 模式是一种 发光屏幕的加色模式；CMYK 模式是一种颜色反光的印刷减色模式；Lab 模式是 为了弥补 RGB 和 CMYK 两种色彩模式的不足，由 CIE 组织（国际照明委员会） 确定的一个理论上包括了人眼可以看见的所有色彩的色彩模式。
电子商务网页设计与制作完整版ppt课件全套教学教程(最新)
拓展练习 2.网页设计常用尺寸
网页设计因其载体的限制，要充分考虑到设备的尺寸，在设计页面的过程中， 设计师往往会根据屏幕大小来设计页面每个部分的宽窄，通常一个静态屏幕所展 示页面的宽高可以称之为一屏，一个完整的页面是由多屏组成的。
一屏的宽度由显示器宽度决定，再根据不同的浏览器进行微调。在显示器的 尺寸上减去20像素到30像素不会出现水平滚动条。但在实际操作中，我们通常只 会对网页中的主体部分进行设计，将主体放在屏幕中间，两边留白，或者插入大 的背景图。因此网页的宽度很大程度上会和版心尺寸保持一致。通常是920像素到 1400像素之间。而一屏的高度通常会在600像素到800像素之间，如果超过800像素， 那么该部分内容就不能在一个静态屏幕上完整显示，会进一步影响用户的体验。
知识分析
4.构成网页的基本元素 (1)logo。
网站logo,也叫网站标志,它是一个网站的象征。网站标志一般放在网页的左 上角。网站标志应体现该网站的特色、内容以及其内在的文化内涵和理念。通常 企业网站的logo也就是该企业的logo。常为代表性的人物、动物、物品等,如工 行的标志、搜狐的狐狸等。
知识分析
2. 竞品分析 竞品分析通常包括背景分析和定位分析两方面： 背景分析主要包括公司的资源、团队的背景，人员构成、组织架构、公司愿景、 成本构成。通过背景分析，可以深入了解公司的现状，公司的风格。
知识分析
3. 基于栅格化设计原理的网页布局 栅格系统应用于设计领域已经至少50年了。栅格化让眼睛浏览信息更加愉悦。
任务实施
01 电商企业网站的需求分析 02 电商企业网站的布局结构分析
03 电商企业网站的色彩应用
知识分析 1.网站规划的市场调研
网站的规划是指在网站建设前确定好网站的主题和功能目标后，对网站目标 定位，进行的内容规划和功能规划。其中直接的表现就是网站结构的规划，特别 对于网站前端部分而言，更为关注的是网站的栏目设计。
电子商务课件(网页制作)
1、是一种脚本编写语言
2、基于对象的语言。
JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。 这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚 本环境中对象的方法与脚本的相互作用。
3、简单性
JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控 制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。 其次它的变量类型是采用弱类型，并未使用严格的数据类型。
在网页上空格
二）显示效果
这段程序的源文件包括了很多行文字，但是会被浏览 器忽略，看到的仅仅是一行。
这段程序的源文件也包括了很多行文字， 但由于使用了<br>标记， 所以在浏览器中能显示出来。 居中对齐 左对齐
右对齐
三、说明
<p>和</p>标记用于为文本分段，位于<p>和
</p>之间的文本单独构成一个段落。 <br>标记用于文本换行。 参数align用与控制每段的对齐方式，center 为居中对齐，left为左对齐，right为右对齐， 默认状态为左对齐。 注意分段和换行的区别：两段之间间距较宽， 而两行之间间距较窄。
二）显示效果
<hr>标记用来定义一条水平线。
三）说明
1、<hr>标记用来一条定义水平线。 2、其中参数width用于控制线长，可以使用
百分比或像素两种表示方法。 3、size控制水平线的粗细；color控制水平线 的颜色。
五 超链接
一）源代码
<html> <head> <title>超链接</title> </head> <body> <p><a href="1.htm">第一个页面</a></p> <p><a href="2.htm" target="_blank">第二个页面</a></p> </body> </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 (9)[27页]
![电子商务网页设计与制作ppt (9)[27页]](https://img.taocdn.com/s3/m/35c846339b89680202d82520.png)
— 14 —
4.“历史记录”面板
在用Photoshop进行图像处理时,经常需要回到前一状态, 这时可以使用“历史记录”面板在当前工作会话期间跳转到所 创建图像的任意一种最近状态,每次对图像进行编辑更改时,图 像的新状态都会添加到该面板中。
— 15 —
第二节 制作图片分类区
一、创建图片分类区文件
按淘宝网店中常见的规格设置宽度为165像 素,高度一般可自由可调,本节设高度为220像素, 分辨率为72,背景为白色。
字符间距:更改字符与字符之间的距离,相当于对所有字距增加或减少一个 相同的数量。
间距微调:用来调整两个字符之间的距离,但只针对某两个字符之间的距离 有效。
竖向偏移:即基线偏移,作用是将字符上下调整,常用来制作上标和下标。
— 13 —
3.段落文字
当输入大量文字时,可通过段落文本框 来输入。输入的文字会基于定界框的尺寸 进行自动切换,也可调整定界框的大小并进 行旋转。定界框可以在选择文字工具后,用 鼠标在文本图层上拖选产生,“段落”面板可 以通过与“字符”面板同样的方法打开。
Bold(加粗)、Bold Italic(加粗并倾斜)。 • 字体大小:也称为字号,可通过下拉列表选择,也可手动自行设定字号。 • 抗锯齿:控制字体边缘是否带有羽化效果。 • 字体颜色:通过拾色器来改变文字的颜色,可以针对单个字符设置颜色。 • 变形:可以使文字产生变形效果。 • 字符调板:可以快速打开“字符”“段落”面板。
七、选区样式
• 正常情况下通过拖动确定选框比例。固定长宽比:可 设置创建选区的长宽比,输入长宽比的值。
八、移动选区
• 当用鼠标选择工具箱中的“选区工具”图标时,可用鼠 标和方向键移动选区。
— 10 —
电子商务网页设计与制作ppt (4)[16页]
![电子商务网页设计与制作ppt (4)[16页]](https://img.taocdn.com/s3/m/6cbe4923ba0d4a7303763a20.png)
ad. Image.onmouseover=function( ) { this.Parent.AutoMove= false; }
ad. Image.onmouseout=function( ) { this.Parent.AutoMove= true; }
— 5—
一、添加图片
首先在Default.css中注释掉banner块的背景颜色, 并在images文件夹下存入图9-2所示的4个用于广告 轮换播放的图片。
— 6—
二、添加图片轮换功能
如图9-3所示,4张图片都已全部显示在了页面上,但还没有实现动态自动轮换的功能。为了实现自动轮换,我们 需要为它们添加脚本语言,即经常用到的JavaScript语言。在前面添加的图片代码下面加入以下代码:
— 4—
第一节 广告图片自动轮换的制作
本节的目标是利用CSS实现个人网站首页的广告图片的 自动轮换特效功能。广告图片自动轮换通过图片的自动切 换来展示各种广告图片,如果要浏览某张图片,可以通过点击 图片跳转到相应的页面,在这个页面里除了浏览此图片之外 还可以浏览其他相关信息,这是一种形象生动的广告形式,制 作效果如图9-1所示。
— 7—
//让图片标记为start的图片显示 $ (ids[start]).filters.revealTrans.Transition= Math.floor(Math.random( )*23);
$ (ids[start]).filters.reveaITrans.apply( ); $ (ids[start]).filters.reveaITrans.play( ); $ (ids[start]).style.display= 'none'; setid=setTimeout(loop,speed); start++; if(start= =ids.length){ start=0; } }; loop( ); } } galleryplay('1,2,3,4',1,6000);//调用自动播放函数 </script>