电子商务网页设计与制作精致版

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

清晰的图片展示
丰富的交易外功能
3 交通旅游类网站
设计要求
1导航清晰 2网站内容丰富 3网页配色亮丽
4 行业企业类网站
设计要求
1.网页布局合理
2.网页导航清晰
3.网页配色专业
任务1.2 网站鉴赏分析
LOGO 导航
页面头部
1 整体布局
• 1. LOGO、导航突出 • 2. 统一的平台风格 • 3. 链接布局合理
• 在Firefox 和IE 浏览器中，网页的标题显示在窗口的顶部或地址栏下方的标签页上。
• （2）URL ：
• URL 应当对网页的内容有所反映，比如本理财案
例对应的URL 路径money 目录。
• （3）路径导航：
• 对于用户来说，这些链接能够清楚表明他们正在网站的哪个层级，当前正在浏览什么页面。
信息优化
Title & Meta
2. 优化
Keywords
关键字
我们可以在网页中添加Name 为Keywords 属性的Meta 标签，其中Content 属性值即为关
键字内容，多个关键字间用逗号间隔，逗号
表示是逻辑“或”，空格表示逻辑“与”。 • 其代码如下：
代码：
• <meta name="keywords" content=" 冰箱, 冷柜, 洗衣机, 彩电, 热水器, 空调, 厨房电器, 整体厨房, 生活小家电, 电脑 , 手机数码, 商用空调, 商用冷柜, 商用电视, 商用电脑, 家居集成解决方案, 住居解决方案, 服务与安装, 产品注册, 在线客服, 延保服务, 设计体验中心, 营销活动, 服务与支持, 论坛, 说明书, 产品特性, 型号参数, 产品评论 " />
（4）网页和网站能提供用户额外价值，最终提高网站转化率，提高用户满意度。
2
网站主题优化
• 网站主题的确定 • （1）主题内容定位，做到小而精，主题定位小，内容精； • （2）主题明确，凸显重点，去除与主题无关的内容； • （3）专题内容丰富，展现高品质的产品和服务。
3
网站布局优化
1 页面定位的优化 • （1）网页标题：
<head> 标记 <title> 标记 <body> 标记
双格式标记，用来给出网页的标题，网页标题会显示在浏览器的标题栏中。
用来指明文档的主体区域，标签之间的文本是正文，是浏览器要显示的页面内容。其结束标记</body> 指明主体区域的结尾。
2. 标记的属性
大多数标签都有自己的一些属性, 属性要写在始标签内，属性是可选的，属性也可以省略而采用默认值，其格式如下： < 标签名字属性1 属性2 属性3 … > 内容</ 标签名字> 大多数属性值不用加双引号。但是包括空格、％号，＃号等特殊字符的属性值必须加入双引号。如： 字体设置
电子商务网页设计与制作
目录
项目一网站鉴赏与网站规划项目二网页设计基础
项目三网页设计的基本应用
项目一网站鉴赏与网站规划项目二网页设计基础
项目1 网络鉴赏与网站规划
一、不同类型网站的设计要求任务二、网站鉴赏分析三、SEO 网站优化四、网站规划
我们通常
在网上做什么？
000001000010000100@000010000000001000000001000@0000100000 000001011110000000 000010@000100000001 0001000100@00001000 000010000000 000@100001000010 00100 0001001000@10000 10000 0000110001000 0100100 0010001000@01000 000100000010000@0000001 000100001000010001000010010001000010000 00001100010000100000000100100001000000001000001000000001
家纺类上市企业，但进入网站后
用户容易无所适从，从图中，我们可以通过点击链接继续访问，但网站内容和主题不直观，营销用户体验以及Flash 动画也对搜索引擎的提取等问题都待改善。
4
网页
1. Title 信息优化
• （1）首页：网站名称或者网站名称_ 提供服务介绍或产品介绍 • （2）频道页：频道名称_ 网站名称 • （3）文章页：文章Title_ 频道名称 _ 网站名称 • （4）标题主题明确，应包含该网页中最重要的内容核心关键字 • （5）简明精练，不罗列与网页内容不相关的信息 • （6）遵循从左到右的阅读习惯，重要的内容应该放到Title 的靠前的位置
搜索引擎网页索引数据库
网络蜘蛛网页爬行，搜取数据，形成网页索引数据
网络蜘蛛网页爬行，搜取数据，形成网页索引数据
搜索引擎优化下网页设计目标
（1）让设计与制作的网页在搜索引擎结果中有一个较好的排名；（2）网页能够吸引用户的目光，增加被点击几率；
（3）用户进入网页后，网页能达到用户期望，从而减少跳失率；
任务2.1 HTML设计基础
1
HTML 简介
HTML 为超文本标记语言英文简称。 HTML 和一般文本的不同是，一个 HTML 文件不仅包含文本内容，还包含“标记”，即包含了一对打开和关闭的标记，并有属性和值。 HTML 标记分为双标记和单标记， HTML 文件的后缀名是“.htm”或者是“html”。
锚文字都能帮助提高关键字的密度
3. 网页内容优化
，从而加大网页相关性的权重，最终有利于搜索的排名。
（1）网页标题内容优化（2）内容结构优化（3）文章叙述要简洁（4）提高内容价值
任务1.4 网站规划
• 1.主题规划
• 在做网站主题规划时，可以参考企业竞争对手的网站，学习他人之长，挖掘自身优势，做出特色。
任务1.3 SEO网站优化搜索引擎工作原理 1
---------------------------------------------------------------------------------------------------------------
互联网网页
网络蜘蛛网页爬行，搜取数据，形成网页索引数据
（1）页面背景颜色设置bgcolor ：
<body bgcolor=" 颜色值">
（2）页面背景图像的设置：background
属性用于指定页面的背景图案，语法格式： <body background="URL">
• （3）文字属性：
• text 设置正文文本颜色；link 设置未被访问的链接文字颜色；alink 设置激活的链接文字颜色；vlink 设置已被访问的链接文字颜色，语法格式： • <body text="color" link="color" alink="color" vlink="color">
• （5）段落标题：
• 也能帮助用户确定网页位置。
• （6）标志和标语：
• 人们普遍认为能从网页的左上角得知自己正在访问的网站及位置。
• （7）分类导航按钮：
• 本案例没有体现，通常体现在左右侧边栏的分类导航按钮。
2 弹簧高跷浏览行为优化
optimize
（1）增加左侧导航栏，页面跳转时，不会出现明显的网站各层级之间跳转的用户感受；
产品形象展示
网站内容
网站内容页脚
2
网页配色技巧
90度邻近色 45度同类色 135度对比色
180度互补色
3
导航设计
（1）主导航结构和名称清晰。（2）网站导航采用文本链接。
（3）面包屑导航。
（4）导航阅读习惯。
4
网站图片设计
使用图片需要考虑与网站的总体设计协调、考虑放置位置，并预计浏览器是否支持该图像的显示、用户能接受其下载速度等。
1.HTML 的基本标记
<HEAD></HEAD> 是HTML 文档的头部标签, 出现在文档的起始部分，标明文档的头部信息，一般包括标题和主题信息，其结束标记 </head> 指明文档标题部分的结束。
<html> 标记
<html></html> 在文档的最外层，文档中的所有文本和html 标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。
3. HTML 中颜色的表示
例： 红色 
例： 红色
例： 红色
4. HTML 文件的基本结构
<html> 文件开始标记 <head> 文件头开始的标记
2
1 网页标题栏的设置
HTML 页面设置
HEAD—— 是HTML 文档的首要部分标记<head> 开始，标记</head> 结束，
<title> ——可以为网页指定标题栏。 TITLE 包含的内容将会被显示在浏览器窗口的标题栏中。
2.<body>.....</body> 的属性
… 文件头的内容
</head> 文件头结束的标记 <body> 文件主体开始的标记 … 文件主体的内容 </body> 文件主体结束的标记 </html> 文件结束标记
5. 记事本手工编写HTML页面
编写HTML 文件有两种方法，一种是利用记事本编写，另一种是在可视化网页制作软件中编写，如利用Dreamweaver 中制作网页时，HTML 代码可自动生成。
2. Description 签优化
在网页中添加Name 为
描述标
Description 属性的Meta
标签，其中Content 属性值即为网
页描述的内容，代码如下所示：
代码：
• <meta name="description" content=" 海尔家电家居官网- 专业权威的海尔家电家居产品官
机器人系列
学生活动作品
4.首页规划
2 首页首页描页关述标键︑题字 ︑ 首 . 1 LOGO 、导航首页版面布局规划 3
项目2 网页设计基础
任务
1、HTML基础 2、Dreamweaver
超文本标记语言?
是用于描述网页文档的一种标记语言。网页的本质就是超级文本标记语言，通过结合使用其他的网络技术，可以创造出功能强大的网页。因而，超级文本标记语言是网页设计编程的基础；下图是一个网页的效果图和程序代码。
• 2.域名设计
• 域名可以采用企业名称、品牌名称或产品名称的中文或英文字母
3.网站栏目规划
关于向日葵课程展示培训实况课堂风采成果展示搜索活动赛事活动科技资讯科技培训
教育理念
小建筑师系列
小牛顿系列
课堂成果
夏令营科技活动
野生动物园搜索
成Fra Baidu bibliotek历程
课堂发展
教师作品
获得荣誉
小工程师系列
• （4）留白属性：
• leftmargin 页面左侧距离窗口左边框的距离； topmargin 页面顶部距离窗口上边框的距离，语法格式： • <body leftmargin="value" topmargin="value">
（2）主栏目清晰并且全站统一。
3 冰山效应网页优化
在图中，有效地避免了网页冰
山效应，立即购买和加入购物车在网页的第一屏已醒目地显示出来，用户如需更多的信息可以转向第二屏。用户打开网页后，所
见到的信息能反映网页的全貌，
加强了用户继续阅读的信心。
4. Flash 网站优化
• 虽然能从搜索结果中了解梦洁为
搜索信息
是搜索某种信息，如新闻、空调选购信息、健康资讯等。
执行操作
执行某项操作，如网上支付、网上购物、网上预约、发布博客或发布论坛帖子等。
任务1.1 不同类型网站的设计要求
1 资讯门户类网站
统一的平台风格
设计要求
良好的导航体验
全面的内容频道
2 电子商务类网站
设计要求
清晰的导航结构
网，产品包括：消费类产品、商业类产品、整
体解决方案等，提供在线服务与支持，设计体验中心和论坛交流与互动等便捷服务。海尔，美好住居生活解决方案提供商" />
5
网页内容优化
• 1.原创内容
• 大量的，高质量的，自身独到见解的和主题相关的内容。
2. 关键词密度
网页定位中的LOGO 和标语位置通
常不会放置关键字，另外图片ALT 属性和页面导出链接、内部链接和