金龟子”电子商城网站开发
【摘要】 本次网站设计实现的一个现代化的电商网站，将实体工厂与电商网站相结合，这样能够让用户更直观的感受到网站的组成和商品的信息。本网站为静态网站，只有前台，不包含后台。主要模块有网站首页、产品详情、新闻资讯、购物中心、关于我们、联系我们等等，模块设计简单而清晰。本网站的设计技术语言是HTML+CSS，通过这种最常见的前端语言编写出清晰明了的前台框架，没有冗余代码而分块明确。通过使用JavaScript来实现网页上的各种特效，增加网站的趣味性。本论文介绍的是“金龟子”电子商城开发的背景和环境，开发过程中所使用的工具以及开发过程。论文中将会讲解网站的组成架构，介绍网站的主要功能，并展示出必要的图片和代码。最后文末将做出总结，道谢辞，贴出参考文献。
目录
一、 绪论 1
（一）开发背景 1
（二）选题内容 1
1．网站总介绍 1
2．网站技术简介 1
3．待解决问题 1
二、开发技术介绍 1
（一）Javascript技术介绍 1
（二）HTML技术介绍 1
（三）CSS介绍 2
三、系统需求分析 2
（一）功能需求分析 2
1．用户模块 2
2．网站结构图 3
（二）开发环境要求 3
1．硬件环境 3
2．软件环境 3
四、系统设计与实现 4
（一）网页实现 4
（二）特效实现 6
五、总结 18
致谢 19
参考文献 20
一、绪论
（一）开发背景
在如此大数据时代的背景下，一个公司的发展必然不能满足于单纯的实体经济，所以必须增加电商形式来填补网络部分的空白，因此本网站应运而生，将公司实体与网络电商经济相结合。
网站的主要功能分为两方面，一方面是在网上销售商品，履行电商网站的职责；另一方面是向浏览网站的用户介绍公司的实体，譬如介绍公司近况、管理人员组成、最新网站活动等等。双管齐下，公司的运营业绩一定会蒸蒸日上。
（二）选题内容
*好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
1．网站总介绍
“金龟子”电子商城是集电商和公司网站于一体的网站。电商部分销售的是电池和压电元件一类的电子产品，公司网站部分主要介绍了公司的组成和现状。用户可以在商城中任意购买喜欢的商品。
2．网站技术简介
“金龟子”电子商城是使用HTML+CSS编写的框架结构，使用Javascript编写添加页面的各种特效，增加网站的趣味性和美观性，使用了photoshop编辑logo和商品图片，使之更加精美，更复合本网站的设计风格。
3．待解决问题
对于本网站来说，最难解决的其实不是网站的设计与美观问题，而是各种特效。想要网站更加美观精美就需要大量的特效，每一个javascript程序的编写都是不能够出错的，而很多个js特效重叠在一起，就更需要引起注意。
二、开发设计介绍
（一）Javascript技术介绍
Javascript是一种脚本语言，主要被用来编写各种各样html网页的动态效果，增加网站的美观性，就目前来说，这是一种使用非常多，同时也是使用非常方便的特效语言，非常适合各种类型各种环境的网站，不容易出现冗余，而且能够在绝大多数浏览器和所有平台下运行。
（二）HTML技术介绍
HTML不外乎是一种超文本标记语言，其是编写网站的最基础代码，程序员可以通过HTML语言非常轻松并且清晰的编写出网站的构架，再辅以CSS样式和js、jq特效，就能够编写出非常精美的网页。HTML最大的优势就是通用性，不管是在哪一种平台上，也不管是在哪一种浏览器中，用HTML语言编写的网站总是能够完美运行，因此本语言收到了无数前端工程师的喜爱。
（三）CSS介绍
CSS是用用来辅助HTML语言编写网站的，但是却也是必不可少的，因为网站的样式均是由CSS调配，它可以从字体到排版的增加网站的美观性，并且对于网页元素的排版精确度之高是以像素作为单位的，这为程序员编写网站提供了非常大的方便，其对元素的容纳性也非常高。
三、系统需求分析
（一）功能需求分析
“金龟子”电子商城是集电商网站和公司网站与一体的综合性网站，因此需要统一风格而功能齐全。具体要求如下：
1．用户模块
本网站是面向用户的网站，主要功能有电子商城，主要页面有网站首页、产品详情、购物中心等，可以让用户在网站中选择自己喜欢的商品并购买。另一功能是向用户介绍公司，主要页面有新闻资讯、联系我们、关于我们，用户能够通过这些页面了解公司，如果有合作意向也可以联系公司。
2．网站结构图
见图31：
图31 网站结构图
（二）开发环境要求
1．硬件要求
分辨率： 1366×768
硬盘：1GB以上
配置：高于CORE i3、4G
2．软件要求
操作系统：Windows 系统
四、系统设计与实现
（一）网页实现
1.网站首页
网站无论功能多少，是否强劲，其首页都必须做到最好，必须符合简洁大方的要求，将网站最好的一面最直接的展现在用户面前，通过网站首页来影响或者说吸引用户的注意，让用户能够更多的关注网站，进而消费，再进关注产品背后的公司，达到长久运营的目的。
网站首页效果图如图41所示：
图41网站首页效果图
首页架构代码如下所示：
产品展示
产品展示这一页面是电商网站中非常重要的组成部分，电商网站必须将商品展现在用户的眼前，并表达出尽可能多的信息，让用户信服网站中的商品，并最后购买，因此本页面除了精美之外，也必须考虑到商品信息的丰富。
产品展示效果图如图42所示：
图42产品展示效果图
产品展示构架主要代码如下所示：
新闻资讯
新闻资讯界面最主要的功能是向用户传递公司的近况或是商品的促销信息，目的是向用户展现公司的实力，让用户更加放心的购买本网站的商品。展现实力的另一目的是为了吸引更多有识之士或财力雄厚的财团来和公司合作，让公司在资本或技术的积累上更上一层楼，相信量变引起质变。
新闻资讯效果图如图43所示：
图43新闻资讯效果图
新闻资讯页面构架代码如下：
关于我们
关于我们页面也是向用户介绍公司的页面，页面的中部是一个地图定位，能够非常直观的向用户展示公司的地址所在，增加公司的可信度。地图下方是一段介绍公司的文字，从地址、经营范围、品牌理念等方面全面而简洁的介绍了公司，这样可以让用户更加的了解公司，从而产生购买商品或加盟公司的想法。
目录
一、 绪论 1
（一）开发背景 1
（二）选题内容 1
1．网站总介绍 1
2．网站技术简介 1
3．待解决问题 1
二、开发技术介绍 1
（一）Javascript技术介绍 1
（二）HTML技术介绍 1
（三）CSS介绍 2
三、系统需求分析 2
（一）功能需求分析 2
1．用户模块 2
2．网站结构图 3
（二）开发环境要求 3
1．硬件环境 3
2．软件环境 3
四、系统设计与实现 4
（一）网页实现 4
（二）特效实现 6
五、总结 18
致谢 19
参考文献 20
一、绪论
（一）开发背景
在如此大数据时代的背景下，一个公司的发展必然不能满足于单纯的实体经济，所以必须增加电商形式来填补网络部分的空白，因此本网站应运而生，将公司实体与网络电商经济相结合。
网站的主要功能分为两方面，一方面是在网上销售商品，履行电商网站的职责；另一方面是向浏览网站的用户介绍公司的实体，譬如介绍公司近况、管理人员组成、最新网站活动等等。双管齐下，公司的运营业绩一定会蒸蒸日上。
（二）选题内容
*好棒文|www.hbsrm.com +Q: %3^5`1^9`1^6^0`7^2#
1．网站总介绍
“金龟子”电子商城是集电商和公司网站于一体的网站。电商部分销售的是电池和压电元件一类的电子产品，公司网站部分主要介绍了公司的组成和现状。用户可以在商城中任意购买喜欢的商品。
2．网站技术简介
“金龟子”电子商城是使用HTML+CSS编写的框架结构，使用Javascript编写添加页面的各种特效，增加网站的趣味性和美观性，使用了photoshop编辑logo和商品图片，使之更加精美，更复合本网站的设计风格。
3．待解决问题
对于本网站来说，最难解决的其实不是网站的设计与美观问题，而是各种特效。想要网站更加美观精美就需要大量的特效，每一个javascript程序的编写都是不能够出错的，而很多个js特效重叠在一起，就更需要引起注意。
二、开发设计介绍
（一）Javascript技术介绍
Javascript是一种脚本语言，主要被用来编写各种各样html网页的动态效果，增加网站的美观性，就目前来说，这是一种使用非常多，同时也是使用非常方便的特效语言，非常适合各种类型各种环境的网站，不容易出现冗余，而且能够在绝大多数浏览器和所有平台下运行。
（二）HTML技术介绍
HTML不外乎是一种超文本标记语言，其是编写网站的最基础代码，程序员可以通过HTML语言非常轻松并且清晰的编写出网站的构架，再辅以CSS样式和js、jq特效，就能够编写出非常精美的网页。HTML最大的优势就是通用性，不管是在哪一种平台上，也不管是在哪一种浏览器中，用HTML语言编写的网站总是能够完美运行，因此本语言收到了无数前端工程师的喜爱。
（三）CSS介绍
CSS是用用来辅助HTML语言编写网站的，但是却也是必不可少的，因为网站的样式均是由CSS调配，它可以从字体到排版的增加网站的美观性，并且对于网页元素的排版精确度之高是以像素作为单位的，这为程序员编写网站提供了非常大的方便，其对元素的容纳性也非常高。
三、系统需求分析
（一）功能需求分析
“金龟子”电子商城是集电商网站和公司网站与一体的综合性网站，因此需要统一风格而功能齐全。具体要求如下：
1．用户模块
本网站是面向用户的网站，主要功能有电子商城，主要页面有网站首页、产品详情、购物中心等，可以让用户在网站中选择自己喜欢的商品并购买。另一功能是向用户介绍公司，主要页面有新闻资讯、联系我们、关于我们，用户能够通过这些页面了解公司，如果有合作意向也可以联系公司。
2．网站结构图
见图31：
图31 网站结构图
（二）开发环境要求
1．硬件要求
分辨率： 1366×768
硬盘：1GB以上
配置：高于CORE i3、4G
2．软件要求
操作系统：Windows 系统
四、系统设计与实现
（一）网页实现
1.网站首页
网站无论功能多少，是否强劲，其首页都必须做到最好，必须符合简洁大方的要求，将网站最好的一面最直接的展现在用户面前，通过网站首页来影响或者说吸引用户的注意，让用户能够更多的关注网站，进而消费，再进关注产品背后的公司，达到长久运营的目的。
网站首页效果图如图41所示：
图41网站首页效果图
首页架构代码如下所示：
产品展示
产品展示这一页面是电商网站中非常重要的组成部分，电商网站必须将商品展现在用户的眼前，并表达出尽可能多的信息，让用户信服网站中的商品，并最后购买，因此本页面除了精美之外，也必须考虑到商品信息的丰富。
产品展示效果图如图42所示：
图42产品展示效果图
产品展示构架主要代码如下所示：
新闻资讯
新闻资讯界面最主要的功能是向用户传递公司的近况或是商品的促销信息，目的是向用户展现公司的实力，让用户更加放心的购买本网站的商品。展现实力的另一目的是为了吸引更多有识之士或财力雄厚的财团来和公司合作，让公司在资本或技术的积累上更上一层楼，相信量变引起质变。
新闻资讯效果图如图43所示：
图43新闻资讯效果图
新闻资讯页面构架代码如下：
关于我们
关于我们页面也是向用户介绍公司的页面，页面的中部是一个地图定位，能够非常直观的向用户展示公司的地址所在，增加公司的可信度。地图下方是一段介绍公司的文字，从地址、经营范围、品牌理念等方面全面而简洁的介绍了公司，这样可以让用户更加的了解公司，从而产生购买商品或加盟公司的想法。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/wljs/609.html
