Web 网站学习整理

我就是我 2021-09-24 01:26 338阅读 0赞

# 网站的构成 #

网站由前端+后端+域名三部分构成，前端就是各式各样的网页，后端是服务器、数据库一些后台处理的东西，域名就是需要购买租用的字符串（就像www.baidu.com）。  
我们来通过整套流程来介绍这三部分东西。

# 网站建设的整套流程 #

## 客户提出需求 ##

获取需求：获取资料、了解客户需求  
网站规划：页面整体规划（静态网页还是动态网页、网页主色调等等）、效果实现（要什么选中效果等等）、特殊需求

## 设计师设计 ##

设计师整理材料和客户的特殊需求，然后开始页面整体规划和效果实现。  
资料整理（文案、图片、需求）、市场调研（同行业产品对比调研）、界面设计（页面的流程图，如下图例）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70]![在这里插入图片描述][20200325100340917.png]  
如果客户看了觉得可以，就报价签约。签约就是为了客户不能反悔自己的决定，不然做到一半的东西，要人重新做就不好了。

## 前端代码编写 ##

前端html、css、js等代码来实现网页效果

## 后端 ##

php，数据库等等，Python的Django什么的也可以。  
在前面的东西都做好后，开始测试反馈bug，出个测试报告。最后bug都差不多了后，就可以部署在服务器上了，用户可以输入http://XXXX（IP地址，是一串数字和.组成的）来进入网站。

## 申请域名 ##

人记忆一串数字很不容易，相对的，如果记忆一段字母会很容易，就像`www.baidu.com`这些熟知的域名。

## 备案 ##

每个网站在底部都会有个东西  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 2]它的组成是Copyright+\[dates\] (审核时间-到期时间)+\[author/owner\]|公安局备案号  
©是版权所有的标志

备案需提交域名和持有者的相关资料以及所开网站的相关信息，工信部审核通过后，会发放备案/许可证编号。

## 后期维护 ##

维护网站的正常运行，这里就不细说了。

# 网页的组成 #

在互联网上有很多网页，网页是由导航、内容、页脚三大部分构成的。  
自己画了一个大致的框架（大部分网页是这样，当然也有很多例外）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 3]

# 相关软件的推荐 #

有关于前端的写代码软件有很多，Hbuilder X、vscode、sublime、Dreamweaver(简称DW)、WebStorm（简称WS）

## sublime ##

一个轻量级的代码编辑器（不多作介绍，也是个很好的选择，可以自行了解）

## DW ##

DW 是Adobe旗下的，Adobe在我印象中是个偏设计应用软件的公司，像PS，Pr，AI等等。DW 可以拿来写代码，但是它生态不是很强，有的时候可能会出一些问题，**不稳定**。  
![在这里插入图片描述][20200325112126552.png]

## vscode ##

vscode 是Microsoft（微软公司）开发的，是一款免费开源跨平台的现代化轻量级代码编辑器，有很强大的生态，有各种各样的插件，想用下载就好  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 4]vscode 的使用一开始可能会很不习惯，但用用就好很多，vscode支持C/C++、Python、Java、Go、html 等等接近**50种**编程语言（相关插件：Code Runner）；**而且vscode好像要出Web形式。。。**

## WS ##

WebStorm 是一个重量级网站开发软件，是jetbrains公司旗下一款JavaScript 开发工具，看百度百科，WS 声誉很高。  
不过，毕竟是重量级，高集成度，电脑可能带不起来。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 5]

## 综合来看 ##

综合来看，我觉得可以用vscode搞我们日常写写代码，搞搞小项目练手的前端工具。（sublime等工具也可）

PS：以上观点是个人整理，可能会含有自己的思想暗示，vscode的信息我是参考百度百科和 玩转VS Code公众号 整理的，其他的工具我就只参照了百度百科写的。大家如果想了解更多可以自行搜索相关信息。

# 怎么学习Web #

## 大体过程 ##

自己听了就业5年多的人的说法，整理成三个阶段：

1.  html+css（多练，很多的属性，多练才能记熟）
2.  js+Ts（JavaScript、TypeScript）
3.  看看Vue、React等js框架（前端的新兴技术很多，但深入学习js应该是不会错的，因为他们都是基于js的框架）

## 学习的方法 ##

*  html和css就是多练，用熟了总比死记硬背很多属性设置要强的多得多。
 *  js不光需要练，更需要深入学习，那些vue，node，React等等很多框架不光是要会用，还要学习它的机理和实现方法（面试时会问的问题）
 *  自己搞一些小项目练手的同时还需要通过看博客啊等等方法了解前端的发展

## 后端和域名怎么解决 ##

后端和域名都可以去买或者租，特别是后端，服务器需要的真实环境太严格，低温、恒湿、供电稳定（断电的时候需要很多电瓶来临时供电等待来电），还需要有一大块地来放东西，而且非常耗电  
国内有很多可以购买租用的平台，阿里云、腾讯云这些的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 6]点击搜索就可以了，剩下的大家应该都看到，不同域名价格不同。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 7]这些是云服务器，相对来说，挺便宜，毕竟是包年的= =  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 8]阿里云和腾讯云等等都是互通的，不会阿里云被注册了腾讯云没注册。

# 最后 #

文章就到这了，是自己最近对Web方面的了解整理出来的，肯定会有一些个人的主观因素在里面，大家了解了解就可以了，自己思考后再决定一些东西。  
文章也可能会有很多纰漏，希望大家指出。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200325094700987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4=,size_16,color_FFFFFF,t_70
[20200325100340917.png]: /images/20210923/424e9b4ad2fa49babe9d1510ddca0ec4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020032511321826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200325113311561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 3]: /images/20210923/418163a981344804bdc559dbf7e49a56.png
[20200325112126552.png]: /images/20210923/3461f271f7244b31965585256cfac3d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 4]: /images/20210923/cb5aab5d631148039cfef2d4e7527575.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 5]: /images/20210923/d1924c764b7946f9a90602369774863b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 6]: /images/20210923/817e55dafc6e4d0daf48ac028c4d1054.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 7]: /images/20210923/a882d08ca76f4ab79dbd756a684e9188.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 8]: /images/20210923/ecbc8b5683024c558ebed653ce0e7379.png