原创【html5+css3+js+bootstrap】响应式Web前端案例--科技商城网站(包含多个页面)

前言

最近在整理自己大学写过的demo，曾经，我也是一个设计并写页面的纯前端狗，学着学着渐入偏锋，专业的缘故，入坑了后端，已经很久没有这样纯写前端静态网页了，这个是我大二写的静态页面，实现的是一个科技企业网站，包含主页及二级页面多个页面，登录注册用了点php+mysql实现，UI页面效果图是自己原创设计，哈哈，曾经学过设计，有点设计功底残存。废话不多说，看图~

实现效果

实现的全部效果图如下：

我做的页面都比较长，只放部分浏览器截图

en~，直接看我之前做的ppt演示吧

一、网站需求分析

（一）网站功能结构
随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传以及商品销售的有利工具。
1、 用户对网站的要求是：简约大气风格，并且统一和谐的网页，网页操作合理、方便、友好。
2、 需要实现的功能和性能是：适当运用bootstrap基础组件进行布局设计网站:
3、技术要求：
1).页面使用十二栅格系统进行布局，并适当考虑布局的适应性，在不同分辨率下设计不同的布局模式。
2).在网页中使用基础布局组件进行页面设计，在表格、表单、按钮、图像、辅助样式这
些内容中自选 3 种或以上使用。
3).在网页中使用 CSS 组件进行页面设计，在列表组、缩略图、按钮下拉菜单、下拉
菜单、标签、导航、导航条、分页导航、输入框组、按钮组、媒体对象、面板等
的组件内容中自选 7 种或以上使用。
4).在网页中使用 Javascript 插件进行页面设计，在选项卡、折叠、提示框、过渡效果、
模态框、下拉菜单、滚动监听、轮播图等的 JavaScript 插件内容中自选 6 种或以
上使用。
5).主页或者子页需要包含表单元素（包括注册、搜索、登录或者评论上传等功能，需要 添加表单属性进行输入验证
设计出简约舒适风格统一和谐的网页；网站正常运行，功能达到设计要求，操作合理、方便、友好，界面具有美感或简约创意，还要符合网站管理的原则。

（二）网站设计功能概述
设计说明:致创为一个科技公司,网站页面主要有有首页、商城、产品展示、关于我们、设计研发、联系我们等二级页面。
1.需要遵循的规则和标准：网页命名要简洁、确保页面的导览性好、保持新鲜感、合理设计视觉效果、为图片添加文字说明、尽量减少拼写和语法错误、页面长度要适中、保持链接的有效性、整个页面风格要一致
2. 网页色彩搭配原理：主要以科技蓝和黑白色为主
1).使用十二栅格系统进行布局，并适当考虑布局的适应性，在不同分辨率下设计不同的布局模式。
2).在网页中实现了使用表格、表单、按钮、图像、基础布局组件以及列表组、缩略图、按钮下拉菜单、下拉菜单、标签、导航、导航条、分页导航输入框组、按钮组、媒体对象、面板等的组件进行页面设计;
3).在网页中使用了 Javascript 插件页面添加了选项卡、折叠、提示框、过渡效果、模态框、下拉菜单、轮播图等内容;
4).网站带有注册登录功能,并已实现连接数据库,可登录注册
5).订单页面使用Vue基础实现一个商品的添加

（三）网站开发环境‘
致创科技网站是在Windwos10环境下
前期用illustrator、Photoshop完成界面的设计,后期用记事本、IDEA、phpStorm、WampServer、mysql.log和等工具完成网站的开发

二、效果图设计

（一）效果图设计分析
网站项目的设计，需要经过前期的问卷调查，根据客户的需求特点，进行功能、特点特色的分析，并设计出网站项目的原型图，我们根据原型图即产品的功能需求进行ps的网页页面效果图的设计，并逐步完成了整个网站中首页和二级页面（包括首页,产品展示，研发团队，新闻中心等）的全部效果图。

三、网站详细设计

（一）搭建系统框架
界面设计：
网站的样图
主模块子页的样图：

（二）网站页面框架设计
主要运用前端框架bootstrap、CSS、JQ、JAVASCRIPT、PHP、MySQL等语言完成
（三）公共文件设计
（四）前台首页设计
网页页面整体的排版设计也是不可忽略的，要让读者在狭小的电脑屏幕上阅读，很重要的一个原则是合理地运用空间，让自己的网页井井有条，留下必要的空白，人觉得很轻松。不要把整个网页都填得密密实实的，没有一点空隙，这样会给人一种压抑感,或者中间空出大片空白页面
（五）登陆模块设计
php+mysql
（六）分页显示模块
（七）后台管理模块
Vue实现商品列表:

四、分工简介

进行网页设计功能需求调查和分析

1. 前期:
   进行网页设计功能需求调查和分析,并完成网页效果图色调主题风格的确定
2. 设计:
   根据前期网页设计功能需求调查和分析,使用Photoshop,Adobe illustrator等平面软件进行网站UI产品成品效果图整体设计;
3. 切图标注
   满足开发对效果图的高度还原和优化网站网页加载速率,优化用户体验,对完成的效果图进行标注和切图。

开发:

1. 前端静态页面实现;
2. 后期php+mysql实现注册登录对数据库的操作

五、总结与心得

致创科技网站设计理念及心得

一．关于设计理念及特点:
对于致创科技网站，我的初忠是设计一个带有科技简约风的网站,未来是智能时代,互联网时代,我们想要的是:智能时代,万物互联,智能创新,不断发展追求的时代精神!
二．心得体会:
明白了多动手胜过一切言语,光听不做,都是自废式学习! 每一次练习都能发现自己的诸多不足，不过这样也挺好的。因为在意识到自己的不足，才能不断地改进，…

这阵子忙于Android项目，时间不是很多，代码文件过多，后面整理再放上来~