Web前端系列技术之Web项目开发与上传（静态版）

静态Web项目开发与上传

经过四天的项目开发学习，终于开发出来了一套静态的电商pc网页平台，也顺利找到了能够将自己开发的网页免费上传到服务器的网站和软件。

所以今天主要介绍的就是这四天中所学到的知识：电商网站开发技术要点、个人项目优化 和 项目免费上传服务器 ；

这一节，干货满满，欢迎大家来踩~

---

---

一、网站制作流程

根据黑马课程的学习，所了解到，一个网站的开发制作流程主要分为以下八步：

①客户沟通，制定方案；
②签订合同；
③预付定金；
④初稿审核；
⑤前端页面设计 + 后端功能开发；
⑥测试验收（双方都需要测试）；
⑦上线培训（以开发方为导师）；
⑧后期维护（通常为半年到一年时间）；

但事实上，作为一个前端开发工程师，就只是负责前端页面开发设计就好了。介绍这个，主要就是为了方便大家了解项目开发的一整个流程，然后清楚个人的工作定位与方向。

---

二、项目开发——《品优购》

这是跟着黑马课程学习到的一个电商平台的项目，大家可以通过【点击这里】来查看其具体页面效果。当然，如果有需要源码的小伙伴们，也可以直接访问 我的GitHub 来免费获取源码。

1、品优购项目整体介绍与准备

项目名称：品优购
项目描述：模拟了电商平台的静态页面，主要完成了 PC 端首页、列表页、注册页面 和 登录页面的制作；

1.1 开发工具

VScode：下载免费版
Photoshop：破解免费下载   【破解码：chqj】
主流浏览器：以Chrome浏览器为主

1.2 技术栈

①利用 HTML5 + CSS3 手动布局，使用部分 HTML 5 新增标签和样式：
主要有：

1. <section></section>：语义化标签，定义文档中的节（区段）；
2. <header></header>：语义化标签，定义文档的头部区域；
3. <footer></footer>：语义化标签，定义section或document的页脚，也可定义为文档底部区域；
   ②采取结构与样式相分离，模块化开发，如图所示：

1.3 文件类型

名称	说明
项目文件夹	shoping
样式类图片文件夹	images
样式文件夹	css
产品类图片文件夹	upload
字体类文件夹	fonts
脚本文件夹（目前尚未开发）	js

其中字体类文件夹是在网上下载的图标UI文件，这里我推荐的图标网大家也可以 COPY一下MDUI；

1.4 CSS文档

项目开发过程中，CSS的代码复用情况一定要得到最佳，这样才能在减少样式代码的情况下，来优化网页的加载进程，所以CSS文档分类就极其重要，这也就是CSS文档的模块化开发模式。

名称	说明
首页	index.html(必须是这个名称，浏览器默认首运行的一页)
CSS初始化样式文件	base.css
CSS公共样式文件	common.css</