静态Web项目开发与上传
经过四天的项目开发学习，终于开发出来了一套静态的电商pc网页平台，也顺利找到了能够将自己开发的网页免费上传到服务器的网站和软件。
所以今天主要介绍的就是这四天中所学到的知识：电商网站开发技术要点、个人项目优化 和 项目免费上传服务器 ；
这一节，干货满满，欢迎大家来踩~
文章目录
一、网站制作流程
根据黑马课程的学习，所了解到，一个网站的开发制作流程主要分为以下八步：
①客户沟通，制定方案；
②签订合同；
③预付定金；
④初稿审核；
⑤前端页面设计 + 后端功能开发；
⑥测试验收（双方都需要测试）；
⑦上线培训（以开发方为导师）；
⑧后期维护（通常为半年到一年时间）；
但事实上，作为一个前端开发工程师，就只是负责前端页面开发设计就好了。介绍这个，主要就是为了方便大家了解项目开发的一整个流程，然后清楚个人的工作定位与方向。
二、项目开发——《品优购》
这是跟着黑马课程学习到的一个电商平台的项目，大家可以通过【点击这里】来查看其具体页面效果。当然，如果有需要源码的小伙伴们，也可以直接访问 我的GitHub 来免费获取源码。
1、品优购项目整体介绍与准备
项目名称：品优购
项目描述：模拟了电商平台的静态页面，主要完成了 PC 端首页、列表页、注册页面 和 登录页面的制作；
1.1 开发工具
VScode：下载免费版
Photoshop：破解免费下载 【破解码：chqj】
主流浏览器：以Chrome浏览器为主
1.2 技术栈
①利用 HTML5 + CSS3 手动布局，使用部分 HTML 5 新增标签和样式：
主要有：
<section></section>：语义化标签，定义文档中的节（区段）；<header></header>：语义化标签，定义文档的头部区域；<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 |
在网页样式定义之前，往往都会清除网页初始样式，其具体代码可参考Java系列技术之CSS基础（从入门开始）⑥ 第二十三章第2小节。
注意：
有些网站初始化的不太提倡 * { margin: 0; padding: 0; }
原因：因为通配符需要处理每一个标签，导致效率变低；所以一般大型网站会标明具体标签来清除内外边距；
1.5 网站 favicon 图标
favicon图标，就是网站LoGo标志，往往放在一级目录中，引入方式：
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
其他也没啥好说的，直接给大家推荐一个免费制作favicon图标的网站吧！
链接：点我一下，开始作图
当然，制作一个网站仅仅有制作图标的软件是不够的，所以再送大家一个我经常使用的免费一键抠图的网站！
链接：点我一下，开始抠图
1.6 TDK三大标签SEO优化
title 网站标题：
title 具有不可替代性，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
常用格式：网站名（产品名）- 网站的介绍；description 网站说明：
作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：………”之类语句；keywords 关键字：
搜索引擎的关注点之一，常限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式；
2、首页开发
电商网站往往具有大量的标签，命名方式也极度繁琐，目前主流的电商网站样式类名多采用元素含义的英语直译，可借鉴以下就 品优购 总结约定的样式类名：
| 名称 | 说明 |
|---|---|
| 快捷导航栏 | shortcut |
| 头部 | header |
| 标志 | logo |
| 购物车 | shopcar |
| 搜索 | search |
| 焦点图 | focus |
| 楼层区 | floor |
| 热点词 | hotwrods |
| 新闻快报 | newsflash |
| 导航 | nav |
| 导航左侧 | dropdown 包含 .dd .dt |
| 导航右侧 | navitems |
| 页面底部 | footer |
| 页面底部服务模块 | mod_service |
| 页面底部帮助模块 | mod_help |
| 页面底部版权模块 | mod_copyright |
主页部分样式展示：
2.1 LOGO SEO 优化
- logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要；
- h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可；
- 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来；
- 方法1：text-indent 移到盒子外面（
text-indent: -9999px) ，然后overflow:hidden； - 方法2：直接给
font-size: 0；
- 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了；
在这里，提及一个知识点：
1. display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint（重排一定重绘，重绘不一定重排）;
2. visibility：hidden指的是元素不可见但是存在，保留空间，不影响结构，故只产生repaint，但是不可触发绑定事件;
3.opacity=0：指的是元素不可见，但是存在，保留空间，不影响结构，并且，如果该元素绑定事件，那么点击该区域，也能触发事件；
2.2 CSS模块化
类似品优购这种电商平台，往往都会存在一个公共的头部样式和底部样式，与其他页面不同的就是首页的中部内容区域，因此：
头部和底部的公共样式需要写到 common.css样式表中，而其特有的内容区域需要写到 index.css 中
2.3 tab栏切换需求
tab栏的布局是ul > li > a- 有多少个
tab选项卡，那么对应就有多少个内容 - 但是每一次只会显示一个内容块，其他内容进行的隐藏
- 配合js实现
tab栏的切换
3、公共结构引入
以列表页为例：
- 列表页面是新的页面，我们需要新建页面文件 list.html 。
- 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来。
- 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css 。
- 需要新的 list.css 样式文件，这是列表页专门的样式文件。
列表页部分样式展示：
4、登录注册页
登录注册页为用户信息录入的页面，该页面以保护用户信息为主，使用并不需要SEO优化处理。
常用的命名方式：
| 名称 | 说明 |
|---|---|
| 注册专区 | registerarea |
| 注册内容 | regform |
| 错误的 | error |
| 正确的 | success |
| 默认的 | default |
登录注册页样式展示：
三、上传服务器
一个项目选择上传服务器的目的就是为了方便他人进行访问，那么该怎么上传？，上传到哪里的服务器，就成了最重要的问题；
其实，服务器（我们也会称之为主机）就是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等；
Web 服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web 客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载；
根据Web服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器；
本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器；
远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了；
1. 免费注册域名网站
在这里，给大家推荐一个非常好用的免费注册域名的网站，可以通过它申请web服务器的免费空间，从而为我们的项目提供空间存储运行。
链接：点我一下，免费开域
2. 注册流程
- 注册域名
- 填写个人信息
- 查看主机地址，用户名和密码（牢记，等会连接服务器要用）
3. 上传到服务器
这里推荐一个上传软件，简单方便，关键是速度还快！【点我一下，即可下载】【破解码：chqj】
优点：
当项目有所修改的时候，只需要上传被修改的文件即可，不用再次重新上传。
具体步骤：
双击点开
软件界面
连接服务器
点击
进入弹窗，并填写刚刚获取的信息，点击连接
上传文件
选中左边侧栏想要上传的项目文件，全部选中后，整体拖到右边的大栏目框中，等待状态区域中提示目录列表已完成，此时说明已经上传完毕！
查看网站
复制自己申请的域名地址，粘贴到网页URL栏目中进行搜索查看
点我、点我、点我！！！感兴趣的朋友也可以访问哟
总结
这也算是对于整个 HTML+CSS 的总结了，以下便是我对于前端最基础部分的理解，和我一样在学习前端的小伙伴们也可以参考一下啦！
对了，后面还会介绍一节CSS的进阶部分，欢迎来访啊！
HTML就是常用标签， 是最基本的盒子；
CSS 就是用来美化布局网页的；
HTML+CSS是没有逻辑可言的，基本就是搭积木摆放盒子的过程，所以它所需要的并不是什么高超的编写技术，而是真正愿意去写好它的耐心，耐心 ——【!important】；
可能对于正在学习前端开发的人来说，最困难的是 布局结构 ，其实这就是因为缺乏了分析页面布局的能力，多多锻炼熟悉网页编写就好了；
同一个模块，有很多布局方式，能做出来就是好的，在前期，通过模仿他人的网页布局，是最有帮助的。
错误总是在所难免，一定要学会利用chrome 调试工具， 他们能快速帮我们排查错误，你还需要细心。
学好定位，对后面学习JavaScript 有很大的帮助。
以上就是所要介绍的CSS的第五节内容，后续即将更新CSS的学习目标。感谢关注和支持，让我们一起成长！
有兴趣可回顾一下CSS基础学习的文章内容，再结合之前所介绍的HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！