初级网站建设--入门篇

最新推荐文章于 2019-05-30 13:16:33 发布

Sean_SJTU

最新推荐文章于 2019-05-30 13:16:33 发布

阅读量2.1k

点赞数 3

分类专栏： Web 文章标签：网站建设脚本语言数据库服务器 web开发

本文链接：https://blog.csdn.net/seanwang_25/article/details/18597827

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文适合初次想要尝试自己做一个网站而不知从何入手的朋友们。如果是有一定经验和基础的朋友建议去查阅更高级的教程。

就像当时我做第一个网站完全是因为自己的兴趣，觉得做一个网站放到互联网上能被其他人访问是一件非常cool的事情，于是就动手去做了，很多人也会有类似的想法。但是，如果没有经验的话，第一次尝试的话在各个方面都要探索着入手。打个比方，一个工作的人想读研究生了，那么他应该首先确定读哪所学校哪个方向乃至那个导师的研究生，然后按时提交网上申请，最后复习并准备参加全国研究生的选拔考试。这一套流程经历过一次就知道很简单，但是对一个初次接触的人，了解探索的过程中难免遇到磕绊。本文就是希望帮助初次建站的朋友了解下一些基本流程，少浪费一些不必要的时间。

Step1: 首先，做一个网站要明确它的基本功能，也就是说网站是做什么用的。有句俗话说的很在理，叫磨刀不误砍柴工。做一件事情首先应该在宏观上有所把握和了解，而后制定计划，最后才是落实的具体技术上的实施，效率会很高。对IT程序员可能更是如此，技术有各种各样学不完的，学一门技术首先应该是从宏观上了解和理解，而后才是投入到编程细节。学会从宏观上学习把握，才能够真正触类旁通。

初次尝试不宜定位在做一个功能过于复杂的网站，简单一些的比较好实现，比如个人介绍主页、网络小说、各种教程这类纯展示型的网站，不需要太多复杂的动态交互。此外，有一个参考性的指导法则：“普通网站的深度不宜过深，一般不要超过5”。网站深度是指从网站首页到其‘最内部’或者‘用户目标’页面需要的点击次数。这个法则的宗旨是让用户到达目标尽量快捷，如果到你的网站点击多次还到不了我想去的页面，那么我想没人会愿意继续访问了。当然，你可能会疑问，如果想网络小说这种章节非常多的怎么办？这种的话就需要有可点击的链接如‘上一章’、‘下一章’这种保证页面的跳转，更好的办法是要加入下文提到的网站的导航栏，相信你回顾下以前浏览过的类似网站就会清晰了。

Step2: 第二步，需要了解做一个网站的整体技术框架应该是什么样的。现在的web开发一般分为前端和后端两大块：前端是面向用户的，也就是决定呈现出来的网站是什么样的，最基本的技术3样--"html + javascript + css"；后端是指服务器端，主要用于处理前端提交的数据和向前端传递数据，基本的东西包括的也是3样--“php + mysql + apache”。有了这前端3种和后端3种一共6种“工具”，理论上说就可以做任何你想做的网站了。此外，后端主要是建设动态网站需要与用户进行数据交互的，如果仅仅是普通呈现型的网站的话，主要用到的仅仅是前端技术。下面来简单拆分下前端和后端这6种“工具”，你会发现其实都是很简单的。

前端： - html

html全名超文本标记语言，其实就是各种标签组成的解释型语言，其解释器就是浏览器。它是学做一个网站必须要了解的基本知识，构成的是网页的骨架。如果你已经了解了html而只是想知道如何架网站的话可以快速跳过这块；如果你不了解html的话，建议先去了解一下，其实很简单。这里郑重推荐一个学习web开发知识的入门网站：http://www.w3school.com.cn/，我的很多入门知识都是从这里学来的。下面是一段简单的html代码的例子：(随便打开个文本编辑器copy下面代码保存成“.html”文件，用任意浏览器打开看下效果吧)

<!DOCTYPE html>
<!--This is a comment-->
<html>
    <head>
        <title>FirstHTML</title>
    </head>
    <body>
        <p>This is my first web.</p>
    </body>
</html>

前端： -javascript

如果说前端技术中什么最重要，我想应该就属javascript了。javascript可以帮助网站在前端呈现上产生许多动态效果，让网站更加生动，所以javascript也被认为网页的血肉。入门的话javascript比较简单的是完成一些表单的验证，比如用户在表单年龄栏中输入了字母而非数字，这种明显的错误可以在客户端通过js验证反馈个用户令其重新输入，而非提交给服务器端后再发现其错误而反馈给用户。这样会减少用户的等待时间，而且减轻服务器的负荷（少做无意义的事情）。至于其它更绚丽的功能，我现在很多时候是直接用外部的库而不是自己去重新实现，难度较大。总之，javascript深入下去的话博大精深，然后作为入门的话了解些基本皮毛也就可以了，进阶留待以后。

前端： - css

前端技术中，css(级联样式表)甚至算不上一种技术，更谈不上一种语言，它只是对html元素呈现样式的定义，被认为是网页的皮肤，决定着网页的呈现样式。如果说它哪里比较难的话，那就得算是html元素的各种各样的属性了。比如你想改变<p></p>元素内的字体，你就需要知道该元素有个属性“font-family”，如果不知道那就没办法了。这种的话为了方便开发，可以使用如Dreamweaver的软件，会有自动提示可用属性的功能。当然，最好的情况还是尽量掌握一些基本的属性，然后在纯文本下面写更快捷一些。下面是一个简单的css文件内的样式定义：

p{
    font-family:Microsoft Yahei;
}

前端：总结

综上3样前端工具便可以开发出简单的网页呈现了，只学这三样便可以迅速入门。当然在进阶的开发中可能需要很多更漂亮的产品化的呈现样式和动态效果，这种情况下建议采用现有的各种模板库，我现在用过的比较熟悉的有 jquery 和YUI。此外，还有更加现成的框架可以直接拿来用，比如前面提到的网站的导航栏，这个东西网上有很多实现版本，很多都很漂亮，建议直接拿来用。不过，这些都是需要你对以上3样前端技术有所了解为基础，否则你可能不会改现成的东西变成你自己的。

针对前端技术，还有一点很重要，就是在实践过程中要逐渐养成表现与实现相分离。具体说来，就是html文件内的主体内容只含有各个标签元素及内容，而呈现样式尽量都放在css文件中在html开始导入，js文件也类似。总之，这样做是为了方便日后修改，且代码更为整洁。试想一下，假如一开始你在每个<p>标签内都定义了样式如下

<p style="font-family:楷体">Some content here.</p>

那么日后如果你想要改变字体为微软雅黑的话，你就不得不在每一处都做修改，非常麻烦。反之，如果统一规划好将<p>元素的样式定义放在css文件中，那日后改动时只需要在css文件中这一处调整即可。实践多了，就会越来越体会到这种表现与实现相分离的好处。

后端： -php

如果你要做的是一个功能稍微复杂一点的动态网站，就需要用户端与服务器端的数据交互了，这时就需要掌握后端的技术。现今网上的几乎所有网站都是动态网站，所以后端的基本技术了解也是必要的。举个例子，假如你的网站需要用户注册，那么首次登陆的用户需要填写注册信息，这个信息填写完后提交到服务器端是需要你记录到数据库的。所以，首先需要服务器端有一样工具，它能接收客户端传来的注册信息（数据），再连接数据库把这个信息保存下来（实际情况还需验证注册信息是否已存在），最终再把结果反馈给客户端。而这个工具就是--服务器端脚本语言php。实现类似功能的还有asp和jsp，但是php是现如今比较流行的开源脚本语言，简单易学，我自己是用php，所以这里着重推荐使用php。php需要到官网下载并做一些配置，在下面后端总结时小提一下，现在给几个php语言的样子有个感性认识。

例如上面举例提到用户注册信息验证：

前端register.html中代码如下

<html>
    <body>
        <form action='register.php' method='post'>
        username:<input name='username' type='text' />
        password:<input name='password' type='text' />
        <input type='submit' value='SUBMIT' />
        </form>
    </body>
</html>

后端register.php中代码如下

<?php
    $username = $_POST["username"];
    $password = $_POST["password"];
    //下面链接数据库
    $connect=mysql_connect("localhost","用户名","密码");
    //ToDo:中间执行一系列数据库操作
    mysql_close($connect);

    //反馈结果
    echo "<p><em>Register Done!</em></p>";
?>

上面只是介绍了php的一个简单例子，具体的里面链接数据库并操作的还有一些函数，建议自行去w3school网站查阅。php语言的有一个重要特点，就是可以和html混合使用，但是文件一定要是“.php”的。总之，后端的核心便是php脚本语言，不熟悉的朋友需要自行学习，这里只是介绍入个门。

后端： - mysql

后端的数据都要保存在数据库服务器里，推荐比较常用的mysql数据库服务器。这个东西入门的话没有太多需要学的，只需要了解些基本的操作命令即可，如建表命令create，查找命令select，更改命令update，增加命令insert，删除命令delete。

后端： - apache

最后，要想将电脑作为一台服务器，还需要服务器软件，apache即是最为流行的服务器软件。有了apache，就可以将自己电脑模拟成一台服务器，随时通过浏览器访问自己电脑上开发的网站，便于检阅。这个也是不需要学什么的，只需要了解有这么个工具即可。当然，它的配置还是略微麻烦一点，因为需要在apache的配置文件中为网站根目录、php做相应的配置。现如今有一款集成软件很不错--XAMPP，它将apache + mysql + php + perl集成在一起，省去了分别安装配置的麻烦。当然，如果想熟悉每一个软件及其配置的话，你也可以分别安装配置体验下。

后端：总结

服务器端的核心是php，这个是必须要熟悉的。php里面还有些比较有用的技术比如：通过 $_SESSION 变量使数据在浏览器中能够跨域传输。更重要的是，通过服务器端编程及设置，你会真正熟悉服务器端究竟是个怎么回事（本质很简单），会真正思考为了减少数据重复传递、加快网页浏览速度而如何设计数据库以及尽最大可能只传递用户需要的数据。试想下，如果你做的是个网络小说的网站，我只想查看某一章节的内容，可是一点击你的网站你却向我传递的是整篇小说的内容，这无疑会增加传输时间，浪费不必要的带宽和流量。我个人觉得，关注这些东西才是学习做网站的核心技术，让网站更有效率的展现。至于网站的前端呈现效果，其实技术性略弱些，当然给人的视觉体验是有用的。我的看法是，作为技术人员，更多的关注应该放在如何提高软件效率上，前端的话可以多用些现成的模板框架（毕竟我们不是专业的设计人员）。

Step3: 第三步，前面花了很大篇幅介绍写网站需要的“工具”，假如已经写好了自己的网站，那下一步就是如何让自己的网站上线，也就是能让所有互联网用户访问。这一步非常重要，但却也相对简单，我想很多人都像我当时一样，更关注这一步究竟是怎么做的。甚至于，在你只是仅仅写了一个helloworld版的html文件时，就会想知道怎么能把它放到网上让其他人访问？回答这个问题，我先给出一个简易版的建议（也是我推荐的），再给出个更重量级一点的解决方案。

轻量级方案：（推荐）

利用SAE（Sina App Engine）即新浪云计算平台，在这上面可以部署小型的web应用和移动端应用，它完全起到了云服务器的功能。而且，它采用的是按使用量付费的收费方式，比如注册送500个云豆，之后按网站访问量而扣云豆，用光了再去买。对于入门者来说，初级网站都不会有太大的访问量，所以说根本不费钱。而且还可以通过实名认证或开发者资质申请获得更多的云豆赠送，以我个人的感觉基本和免费没有区别。对于你的每个web应用（最多可放10个），SAE会分配给一个域名，虽然你可能不太喜欢，但毕竟是免费的吧。

如果你实在不喜欢它的域名就需要自己去买个域名。推荐去万网，买个新的.com或.net域名69元首年/129元买两年。买完域名后绑定到这个SAE上的应用即可，SAE很容易就学会如何操作。

重量级方案：（了解）

说它是重量级是因为这种方案应该更适合访问量较大的网站，比较常用的是租用阿里云服务器，拥有自己的操作系统、硬盘空间、服务器软件（一般式apache）、数据库服务器（一般式mysql）、带宽等，虽说是按需购买，但每年需要至少花掉1000元租用云服务器。假如你的网站访问量很小，那你就亏了，花钱租的资源却得不到最大利用。因此，建议入门者使用SAE部署你的网站，待网站初具规模或者你已经是建站高手后再考虑租用更重量级的云服务器。

全文总结：

以上三大步就是初学者入门建站必然要接触到的东西，如果熟悉了其中的某些部分后可以直接跳过。希望这篇博文能给同样有兴趣学习建站的朋友以帮助，祝愿早日进阶。欢迎交流，本人也同样仍在探索学习的道路上前进中。

Sean_SJTU

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
初级网站建设--入门篇

本文适合初次想要尝试自己做一个网站而不知从何入手的朋友们。如果是有一定经验和基础的朋友建议去查阅更高级的教程。就像当时我做第一个网站完全是因为自己的兴趣，觉得做一个网站放到互联网上能被其他人访问是一件非常cool的事情，于是就动手去做了，很多人也会有类似的想法。但是，如果没有经验的话，第一次尝试的话在各个方面都要探索着入手。打个比方，一个工作的人想读研究生了，那么他应该首先确定读哪所学校哪个方...
复制链接

扫一扫