制作电商网站首页html(制作电商网站首页)
实战开发制作电商网站首页报告怎么写
1、填写报告表头：课程名称、项目名称制作电商网站首页、实验者、学号、班级、实验日期。
2、填写实验目的：通过实验，对电商网站的首页进行整体设计于功能实现，进一步掌握dreamweaver的使用方法。
3、填写实验内容、主要设备、仪器、基本原理、实验步骤等。
html, 制作电商网站的一般流程问题
我们公司就是做网络商城的，商品添加购物车实际就是添加到数据库了。
正常情况下，前端做的数据处理本质只是让用户看的，你F12改一下就可能会导致传到后台的数据出问题。
我们公司的做法是后台也进行判断，当提交给后台的时候，后台要判断商品的单价和数量，例如库存是否足够，价格是否正确，防止出现问题。
一个好的电商类网站要如何制作？
我不是复制粘贴，我是纯手打，我来告诉你做电商网站的步骤。
首先，思考一下你要以什么样的方式来做电商，我之所以这么问，涉及到的就是深层次的网站功能规划的问题。拼多多的网站、淘宝的网站、阿里巴巴的网站都是电商网站，但是他们的经营模式是不同的，那么在整个电商系统的宏观规划中投入必然不一样。
其次，你需要做多大的规模？这个涉及到网站的制作架构，单机版本的电商系统和支持分布式布局的电商系统有着很大的区别。包括可扩展性，安全性，并发数等方面。甚至还需要涉及到网站安全部门提供的专业网站分析报告。这些东西，无论其中一个涉及到的费用可能是数10万元。可能你会说这么贵啊？但是当你客户量数万，网站资料上亿，日均交易量骤增的时候，一次重大的技术事故可能让你的电商平台倾家荡产。
第三，微观层次的网站规划设计。因为我们知道了要怎么做，还有可能需要投入多少资金的时候，我们才可以确定一个适合企业自身的电商平台解决方案。中小企业不是土地主，大平台做不了，就要从小平台开始规划设计。大型的电商平台，实际上都是由功能不同的网站组成站群来实现整体功能，因此，需要逐一的设计和规划。
第四，设计网站开发原型，无论是APP还是网站系统，必须要经历这个过程。模拟所有的用户操作及后台炒作，虽然这个比较浪费时间，但是总比后期花很长时间去维护修补网站的漏洞，调整用户体验来的划算。
第五，开始网站的正式制作，从前端设计，到程序语言编程，各个系统的并发开发，直至网站制作完成，并进行功能测试。
第六，给网站做一个全面的专业的第三方测试。这个主要是以防万一，实际上需要在平台搭建前就和第三方检测机构和网站建设公司之间建立合作协议。由第三方做监督，对整个网站的系统安全性，功能稳定性，可用性，做一个综合的性能评测，合格则验收支付尾款，不合格则要求退款。
现在很多企业都不懂这些，尤其是网站建设公司甚至对这些没有概念，最终坑害的还是企业本身，而且浪费人力物力，甚至错过平台上线的最好时机，导致项目破产。而搭建一个合规的电商平台网站，按照这个操作方式，必然不会有报价几万的网站公司，没有技术实力的公司更会避而远之，因为“赔不起”，企业的网站平台搭建风险将下降。
本问题由成都“锐美网络”解答，建议企业如果不上规模，没有成熟的运营体系，千万别做电商平台，大多数入不敷出。
怎么做好电商网站的页面设计
电商平台的首页该如何设计？
一、电商首页的设计思路，从上往下思路是：
1、形象展示
产品品牌是区别产品的重要标志之一，当顾客进入首页感受到这些差异并能够与其他首页有所区别，从而形成认知上的区分和对品牌的信任感。
2、搜索
用户使用搜索栏快速找到心仪的商品，快速定位目标。顾客从某一款商品页面进入首页时，意味着顾客可能有其他商品的消费需求，当顾客有明确的购买目的时，首页需要有搜索导购功能，帮助顾客快速方便地找到所需的商品。
3、推荐和活动
当顾客无明确购买需求时，需要一些推荐和活动来激发顾客的潜在购买需求，例如：新商品的推荐、促销打折、搭配减价。如果店铺正在做这些活动，就需要在首页的明显位置进行展示，以吸引客户下单。
二、一些电商首页设计的方法
1、模拟
在设计中，模拟指的是模仿熟悉的物体、有机体或者环境的特性，增加产品的适用性、喜爱度或者物品功能。设计有三种基本模拟：表面、行为和功能。
2、7±2法则
由于我们头脑处理信息的局限，我们在处理信息内容最好的区间是5-9范围内，而一旦信息块超出人脑接收的范围时，记忆将会自动将超出部分信息过滤、弱化，为了用户提供明确的信息网站导向，导航栏目最多不超过9个，栏目过多会对用户造成混乱难以抉择。
3、曲线偏见
“曲线偏见”法则表示，它是指与带有尖锐边角的物品相比，人们更喜欢曲线造型的物品。从心理角度分析，尖锐的物品具备的是侵略、攻击和伤害，因此对于首页设计上我们绝大部分使用的曲线设计，对于直角等造型设计很少看到，一旦页面的尖锐设计过多时用户会自然而然的产生防御型心理，从而对软件使用产生抵触或者不适应等心理情绪。
4、推荐系统
推荐系统是一种信息过滤系统，如果说之前的模块都属于商品直接推荐的交易型电商，那么现在另一种新的电商形态内容电商，正在逐步崛起。这是一个感性的消费心理。这个商品推荐模块就是一个内容形态模块的快速入口。根据你最近的浏览记录，推荐了一些相关的帖子或者达人。因为每个人关注的商品都不一样。所以呈现的界面模块可能也不一样。在越来越多的软件中可以见到推荐系统。挖掘用户偏好，推荐用户喜欢的内容，提高用户的使用时间和留存率，从而到达市场目标。
三、设计总结
衡量一个电商网站首页不能只看视觉体验。设计的本质是解决问题，而不是只停留在满足“好看”、“有格调”、“上档次”的视觉层面。你的关注点不只是颜色、字体、图片，还有业务的流程。电商本身就是一个购买流程。选购、意向、推荐都需要关注。电商首页是企业需求与用户需求融合的结果，一个首页的好坏直接影响到用户对于产品的第一感官。闻峥文化设计团队注重深度调研、个性定制、创意设计的每个环节，达到商家的流量转化效果，提升商家产品销售。
电商网站，如何动态生成仿京东首页导航？
DIV+CSS实现仿京东商城导航条功能代码，鼠标滑过导航条选项即可弹出对应的子菜单列表，界面简洁大方。
具体代码如下：
代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf8" /
title京东商城导航条/title
style type="text/css"
.my_left_category{
width:150px;
font-size:12px;
font-family:arial,sans-serif;
letter-spacing:2px;
}
.my_left_category h1{
background-image:url(images/spring_06.gif);
height:20px;
background-repeat:no-repeat;
font-size:14px;
font-weight:bold;
padding-left:15px;
padding-top:8px;
margin:0px;
color:#FFF;
}
.my_left_category .my_left_cat_list{
width:148px;
border-color:#b60134;
border-style:solid;
border-width:0px 1px 1px 1px;
line-height:13.5pt;
}
.my_left_category .my_left_cat_list h2 {
margin:0px;
padding:3px 5px 0px 9px;
}
.my_left_category .my_left_cat_list h2 a {
color:#d6290b;
font-weight:bold;
font-size:14px;
line-height:22px;
}
.my_left_category .my_left_cat_list h2 a:hover {
color:#d6290b;
font-weight:bold;
font-size:14px;
line-height:22px;
}
.my_left_category .h2_cat{
width:148px;
height:26px;
background-image:url(images/my_menubg.gif);
background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category .h2_cat_1{
width:148px;
height:26px;
background-image:url(images/my_menubg_1.gif);
background-repeat:no-repeat;
line-height:26px;
font-weight:normal;
color:#333333;
position:relative;
}
.my_left_category a{
font:12px;
text-decoration:none;
color:#333333;
}
.my_left_category a:hover{
text-decoration:underline;
color:#ff3333;
}
.my_left_category h3{
margin:0px;
padding:0px;
height:26px;
font-size:12px;
font-weight:normal;
display:block;
padding-left:8px;
}
.my_left_category h3 span{color:#999999; width:145px; float:right;}
.my_left_category h3 a{ line-height:26px;}
.my_left_category .h3_cat{
display:none;
width:204px;
position:absolute;
left:123px;
margin-top:-26px;
cursor:auto;
}
.my_left_category .shadow{
position:inherit;
background:url(images/shadow_04.gif) left top;
width:204px;
}
.my_left_category .shadow_border{
position:inherit;
width:200px;
border:1px solid #959595; margin-top:1px;
border-left-width:0px;
background:url(images/shadow_border.gif) no-repeat 0px 21px;
background-color:#ffffff;
margin-bottom:3px
}
.my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}
.my_left_category .shadow_border ul li {
list-style:none;
padding-left:10px;
background-image:url(images/my_cat_sub_menu_dot.gif);
background-repeat:no-repeat;
background-position:0px 8px;
float:left;
width:75px;
height:26px;
overflow:hidden;
letter-spacing:0px;
}
.my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}
.my_left_category .active_cat h3 { font-weight:bold}
.my_left_category .active_cat h3 span{ display:none;}
.my_left_category .active_cat div{display:block;}
/style
/head
body
div class="my_left_category"
h1分类导航/h1
div class="my_left_cat_list"
h2a href="#"按网站类别/a/h2
div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"
h3a href="#"企业建站/a/h3
div class="h3_cat"
div class="shadow"
div class="shadow_border"
ul
lia href="#"LOGO设计/a/li
lia href="#"网站设计/a/li
lia href="#"网站广告/a/li
lia href="#"推广/a/li
lia href="#"建网站/a/li
lia href="#"网站推广/a/li
lia href="#"网站建设/a/li
lia href="#"SEO/a/li
/ul
/div
/div
/div
/div
div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"
h3a href="#"韩国男装/a/h3
div class="h3_cat"
div class="shadow"
div class="shadow_border"
ul
lia href="#"LOGO设计/a/li
lia href="#"网站设计/a/li
lia href="#"网站广告/a/li
lia href="#"推广/a/li
lia href="#"建网站/a/li
lia href="#"网站推广/a/li
lia href="#"网站建设/a/li
lia href="#"SEO/a/li
/ul
/div
/div
/div
/div
div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"
h3a href="#"脚本之家/a/h3
div class="h3_cat"
div class="shadow"
div class="shadow_border"
ul
lia href="#"LOGO设计/a/li
lia href="#"源码下载/a/li
lia href="#"最新更新/a/li
lia href="#"下载排行/a/li
lia href="#"ASP/a/li
lia href="#"PHP/a/li
lia href="#"AJAX/a/li
lia href="#"DELPHI/a/li
/ul
/div
/div
/div
/div
!-- again --
h2a href="#"按品牌选货/a/h2
div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"
h3a href="#" style="color:#ff3333;"热销推荐/a/h3
div class="h3_cat"
div class="shadow"
div class="shadow_border"
ul
lia href="#"LOGO设计/a/li
lia href="#"网站设计/a/li
lia href="#"网站广告/a/li
lia href="#"推广/a/li
lia href="#"建网站/a/li
lia href="#"网站推广/a/li
lia href="#"网站建设/a/li
lia href="#"SEO/a/li
/ul
/div
/div
/div
/div
div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"
h3a href="#"网站建设/a/h3
div class="h3_cat"
div class="shadow"
div class="shadow_border"
ul
lia href="#"LOGO设计/a/li
lia href="#"网站设计/a/li
lia href="#"推广/a/li
lia href="#"建网站/a/li
lia href="#"网站推广/a/li
lia href="#"推广/a/li
lia href="#"LOGO设计/a/li
lia href="#"网站设计/a/li
lia href="#"网站广告/a/li
lia href="#"推广/a/li
lia href="#"建网站/a/li
lia href="#"网站推广/a/li
lia href="#"网站建设/a/li
lia href="#"LOGO设计/a/li
lia href="#"网站设计/a/li
lia href="#"网站建设/a/li
lia href="#"SEO/a/li
/ul
/div
/div
/div
/div
div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"
h3a href="#"网站程序/a/h3
div class="h3_cat"
div class="shadow"
div class="shadow_border"
ul
lia href="#"PHP/a/li
lia href="#"ASP/a/li
lia href="#"JSP/a/li
lia href="#"ASP.Net/a/li
/ul
/div
/div
/div
/div
div class="h2_cat_1" onmouseover="this.className='h2_cat_1 active_cat'" onmouseout="this.className='h2_cat_1'"
h3a href="#"其他网站/a/h3
/div
!-- again --
h2a href="#"按价格选货/a/h2
div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"
h3a href="#"低端价位/a/h3
div class="h3_cat"
div class="shadow"
div class="shadow_border"
ul
lia href="#"50元以下/a/li
lia href="#"50-100元/a/li
/ul
/div
/div
/div
/div
div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"
h3a href="#"中高端价位/a/h3
div class="h3_cat"
div class="shadow"
div class="shadow_border"
ul
lia href="#"100-150元/a/li
lia href="#"150-200元/a/li
lia href="#"200-300元/a/li
lia href="#"300元以上/a/li
/ul
/div
/div
/div
/div
!-- again --
h2a href="#"超值特价区/a/h2
h2a href="#"现货区/a/h2
!--测试复制end--
/div
/div
/body
/html
资料来源：