web电商网页制作(用html怎么制作电商网页)
简述电子商务网站建设的设计过程是怎样的
电子商务网站的设计主要分为两大流程：首先设计网站结构，主要包括网站布局、颜色、内容、框架等；然后进行网站开发，根据设计结果，运用编程语言进行开发，最终形成一个完整的网站。
一、网站结构的设计。
电子商务网站的设计关乎着网站的受欢迎程度，也直接影响着网站的整体建设。因此，网站设计的系统性、完善性和全面性是网站建设成败的关键所在。
二、网站整体的开发。
网站的开发是指从开始按照网站设计要求建设网站到网站对外发布之间的一次处理过程。该过程与传统的软件开发流程相同，主要包括实现、测试、文档、发布四个步骤。
实现：使用网站开发工具及相关编程语言，编制页面及代码程序；实现Web数据库系统；根据信息结构的设计要求组织网站上需要展示的信息。
测试：对初始建立的网站进行多方面的测试。
文档：主要包括系统的开发文档，侧重功能描述及各模块间接口的描述。
发布：是指网站对外发布，用户可使用浏览器通过Internet访问电子商务网站。
电子商务网站的开发流程是怎样的？
第一步：需要客户提供一个完整的需求说明。
很多客户对自己的需求并不是很清楚，需要您不断引导和帮助分析。曾经有一次，我问客户：“您做网站的目的是什么?”他回答：“没有目的，只是因为别人都有，我没有!”。这样的客户就需要耐心说明，仔细分析，挖掘出他潜在的，真正的需求。
配合客户写一份详细的，完整的需求说明会花很多时间，但这样做是值得的，而且一定要让客户满意，签字认可。把好这一关，可以杜绝很多因为需求不明或理解偏差造成的失误和项目失败。糟糕的需求说明不可能有高质量的网站。
那么需求说明书要达到怎样的标准呢?简单说，包含下面几点：
1、正确性：每个功能必须清楚描写交付的功能;2、可行性：确保在当前的开发能力和系统环境下可以实现每个需求;3、必要性：功能是否必须交付，是否可以推迟实现，是否可以在削减开支情况发生时"砍"掉;4、简明性：不要使用专业的网络术语;5、检测性：如果开发完毕，客户可以根据需求检测。
第二步是做系统分析。
网站总体设计：在拿到客户的需求说明后，并不是直接开始网站制作，而是需要对项目进行总体设计，详细设计，出一份网站建设方案给客户。总体设计是非常关键的一步。它主要确定：1、网站需要实现哪些功能;
2、网站开发使用什么软件，在什么样的硬件环境;3、需要多少人，多少时间;4、需要遵循的规则和标准有哪些。
同时需要写一份总体规划说明书，包括：1、网站的栏目和版块;2、网站的功能和相应的程序;
3、网站的链接结构;4、如果有数据库，进行数据库的概念设计;5、网站的交互性和用户友好设计。 网站建设方案
在总体设计出来后，一般需要给客户一个网站建设方案。很多网页制作公司在接洽业务时就被客户要求提供方案。那时的方案一般比较笼统，而且在客户需求不是十分明确的情况下提交方案，往往和实际制作后的结果会有很大差异。所以应该尽量取得客户的理解，在明确需求并总体设计后提交方案，这样对双方都有益处。
网站建设方案的包括以下几个部分：1、客户情况分析;2、网站需要实现的目的和目标;3、网站形象说明;4、网站的栏目版块和结构;5、网站内容的安排，相互链接关系;6、使用软件，硬件和技术分析说明;7、开发时间进度表;8、宣传推广方案;9、维护方案;10、制作费用;11、本公司简介：成功作品，技术，人才说明等。
当方案通过客户的认可，就可以开始动手制作网站了。但还不是真正意义上的制作，你需要进行详细网站设计：总体设计阶段以比较抽象概括的方式提出了解决问题的办法;详细设计阶段的任务就是把解法具体化。详细设计主要是针对程序开发部分来说的。但这个阶段的不是真正编写程序，而是设计出程序的详细规格说明。这种规格说明的作用很类似于其他工程领域中工程师经常使用的工程蓝图，它们应该包含必要的细节，例如：程序界面，表单，需要的数据等。程序员可以根据它们写出实际的程序代码。
总体设计是非常关键的一步。它主要确定：
1、网站需要实现哪些功能;
2、网站开发使用什么软件，在什么样的硬件环境;
3、需要多少人，多少时间;
4、需要遵循的规则和标准有哪些。
同时需要写一份总体规划说明书，包括：
1、网站的栏目和版块;
2、网站的功能和相应的程序;
3、网站的链接结构;
4、如果有数据库，进行数据库的概念设计;
5、网站的交互性和用户友好设计。
第三步是做网站建设方案。
在总体设计出来后，一般需要给客户一个网站建设方案。很多网页制作公司在接洽业务时就被客户要求提供方案。那时的方案一般比较笼统，而且在客户需求不是十分明确的情况下提交方案，往往和实际制作后的结果会有很大差异。所以应该尽量取得客户的理解，在明确需求并总体设计后提交方案，这样对双方都有益处。
网站建设方案的包括以下几个部分：
1、客户情况分析;
2、网站需要实现的目的和目标;
3、网站形象说明;
4、网站的栏目版块和结构;
5、网站内容的安排，相互链接关系;
6、使用软件，硬件和技术分析说明;
7、开发时间进度表;
8、宣传推广方案;
9、维护方案;
10、制作费用;
11、本公司简介：成功作品，技术，人才说明等。
另：网页设计注册事项
1、框架结构(Frame Sets)
有些搜索引擎(如FAST)是不支持框架结构的，他们的“蜘蛛”程序无法阅读这样的网页。
2、图象区块(Image Maps)
除AltaVista、Google和Northern
Light(现已停止公共搜索服务)明确支持图像区块链接外，其他引擎是不支持它的。当“蜘蛛”程序遇到这种结构时，往往会感到茫然不知所措。因此尽量不要设置Image
Map链接。
3、特效链接
我们经常看到有些网站为导航链接加上了特效，如点击某个项目会展开下层链接等。这些效果一般通过Java
Script实现，视觉上非常新颖，但在“蜘蛛”程序的眼里则没那么诱人，相反它无法解读这种链接。为了让搜索引擎顺利检索到你的网页，建议还是牺牲掉一些花哨的东西。
4、FLASH
虽然FLASH网站制作的网页视觉效果较好，但搜索引擎对此却不太感冒，个案表明这一类的网站很难被百度搜索引擎索引。明智的做法是提供FLASH和非FLASH网页两种选择，这样即增加了网页的观赏性，又照顾到了搜索引擎的情绪。
5、动态网页(Dynamic Pages)
任何地址中带“?”号、“”号(及其他类似符号)的网页都会把“蜘蛛”程序挡在门外。这些网页通常由CGI、PHP、ASP等程序产生，技术上较先进，但不适合搜索引擎的“蜘蛛”程序。虽然目前有的大型搜索引擎(如Google)已具备检索动态网页的能力，但相当一部分数引擎还是不支持它的。而且即使是能够索引动态网页的Google，也在多个场合中明确表示不保证检索全部的动态网页。
因此，除非是超大型网站，为方便起见不得不采用动态网页生成技术，否则还是尽量使用静态网页为好。
6、加密网页
除非你不希望搜索引擎检索你的网页，否则不要给你的网页加密。
7、网页容量
包括图像在内的网页字节数最好不要超过50K。体型庞大的网页下载速度慢，不仅会让普通访问者等得心急如焚，有时也会使“蜘蛛”程序感到不耐烦。目前搜索引擎都不愿收录位于免费主页空间上的网站。其理由是，既然你认为自己的网站如此重要，以至于需要登录搜索引擎让天下人都知道，那么你没有理由还将它放在免费服务器上。更何况免费主页通常速度较慢，会影响大家搜索信息的效率。
自学web前端开发,请问从何入手呢？
学习前端，要从学习HTML和CSS开始着手。关于这部分的学习，网上可选择的资料就太多了，这里不一一列举，题主百度搜索栏搜索?HTML 教程，或者css 教程，就可找到相关资料。
接着是学习前端的一个难点、也是重点，就是JavaScript。
首先，初学一门语言，要秉承一个原则：“能动手的，尽量别吵吵”
另外，你需要一个能够从简到难的知识体系，一步一步跟下来。
下面是干货。
体系：上图。
说明一下这张图，题主提问如何有效学习JS，我这里理解为JS原生，所以关于框架、工作流的内容，没有具体展开，题主有兴趣可以自行搜索。
一、文档资料
红宝书(基础)：
蝴蝶书(进阶)：
阮一峰老师ES6:
权威官方文档MDN：
二、学习步骤
语法和基本类型
控制流
循环
表达式和操作符
日期对象
正则表达式
对象
上面这些搞定，就已经掌握了ES5的最基本的内容了，接着，我们就可以来操作页面了。毕竟这是一个看脸的社会，我们在搞页面的同时，还要注意一下页面的样式。
8.DOM操作
1DOM树的概念
2从DOM树取节点
3操作这个DOM树(节点的添加、删除、修改)
4访问节点(parentNode, children, 等等)
5属性操作(id, className)
9. 事件处理
1鼠标事件(mouseove)
2键盘事件(keyup)
3浏览器事件(load)
好，到这里，基本上静态页面，你就可以随意玩耍了。这里我们最好降上面思维导图提到的例子，都撸一遍。一是加深上面知识点印象，二是锻炼一下编程的逻辑思维能力。具体实现，网上有一堆堆的。（这里让题主自己搜索，是因为编码的一项重要能力，就是搜索）一定要谨记，多敲代码。
10. 面向对象：原型式继承、原型链
11. ES6：
ES6跟ES5还是有较大的区别，所以建议你能系统的过一遍，将上面的练习，改为使用ES6再来一遍
三、调试
1、JS编程的调试非常简单，打开浏览器控制台(我个人比较钟爱Chrome)。如图：
1 console标签：这个标签，可以打印我们开发时，JS引擎为我们抛出的异常。我们可以根据这个异常的信息，来分析错误原因。另外，我们也可以在代码中使用console.log() 输出程序运行时的环境变量信息。
2 右红框1：错误提示。说明当前页有一个error发生，点击他，可以跳转到console来查看错误具体信息
3右红框2：警告信息。提示了我们程序潜在的危险。
4 source，我们进行单步调试的地方。具体见下图
（四）、工作流(跟JS原生关系不大，不详细展开了)
webpack
gulp
上面的内容结束后，就可以进入前端框架的海洋中畅游了。
