现代化网站应用领域非常广泛,从个人形象网站展示、企业商业网站运作、到政府公益等服务网站,各行各业都需要网站建设。大体上可以归结四类:宣传型网站设计、产品型网站制作、电子商务型网站建设、定制型功能网站开发。
如何做好网站建设呢?无论你是网站建设新手、网络爱好者、网页设计师、还是开发工程师、网站策划者、企业管理人员,都能从本文中受益。
网站建设基本流程
首先我们来看看专业的网站建设步骤,以Qomla网站制作工作流为例。
也就是说,要做好一个网站,从需求分析、网站规划、网站设计到前后端开发,再到后期优化用户体验等一系列专业化制作要求。不过你不必一下子成为网站建设专家,跟随Qomla多年的丰富的网站设计开发经验,教你网站建设从入门到高手。
网站建设新手入门
网络基础知识
我们在浏览一个网页或者使用APP时,这些直接面向用户交互媒介都可以称为前端或客户端(C端),网页都是通过浏览器渲染后呈现给用户的,渲染使用的技术即下述的HTML、CSS、JavaScript等前端技术;相应的为用户提供内容或服务的一端称为后端或服务端(B端),为用户提供传输数据服务,即下述后端开发部分。
用户浏览信息或与网站进行交互时,会发出一个请求(Request)给服务器。相应地,服务器接收到请求后做出响应(Respond)。互联网大多都是以这种“我喊一下”,你“应一声的”的CtoB模式交流着。
另外要区分一个概念就是:静态网站和动态网站不是网页的动与静的效果,而是网站建设中有没有数据库作为支撑。有数据库的网站才叫动态网站,反之就叫静态网站。
继续学习充电:
MDN:《什么是网络服务器?》
菜鸟教程《网站建设指南》
网站建设前端
HTML
学习网站建设,最简单的是从静态页面开始,即HTML(超文本标记语言)开始。
你也许之前不知道HTML是什么东西,但想必有听过火爆朋友圈H5。所谓的H5即是HTML5,是HTML4升级版。
HTML的语法简单易学,跟我们平时使用word排版有点类似,HTML如其名,是基于开合标签的语法,也是一种文档形式(每个HTML文件头部有条!DOCTYPEhtml语句标记文档形式)。
举个简单例子,如编辑文档使用大标题(H1):
在HTML文档是也是用h1(大小写都可以,推荐小写)来表示,只不过是解析后的结果,使用浏览器右键查看源码,可以看到类似形式:
假设我们想给其中的部分文本增加链接,怎么做呢?这就是给标签加属性了,在开标签里增加属性名:“属性值”,如下href为属性名,网址为属性值,标签之间可以嵌套:
那怎么编辑HTML文件呢,其实只要任何能编辑文本存储文件后缀名为.html的都可以。不过我们还是建议使用些比较智能的编辑器:VisualStudioCode(免费)、Atom(免费)、Sublime(收费)、WebStorm(收费)等提升效率。或者你在学校学习的Dreamweaver。这些编辑器也适用底下的CSS、Javascript等开发。
HTML只是标注文档结构,那我们怎么设置样式,比如改颜色,变大小,改字体等等呢。这正是CSS的用武之地。
推荐继续学习HTML教程:
MDN:《HTML基础》
菜鸟教程:《HTML教程》
freecodecamp:《免费学习编程》
当然,你也通过在线诸如Codecademy、Coursera或相关APP的方式学习,但我们依然推荐你在本地安装编辑器敲代码。
CSS
CSS(层叠样式表),如其名是用来格式化样式和风格的,目前版本是CSS3。CSS的语法有点接近真正的编程语言的面向对象了。不过是以选择器为开头,即选择HTML页面中的哪些元素来样式,然后是大括号{},里面包含属性名:属性值对(是不是有点像HTML中的属性了,不过值不要插入引号了)。好比你在Excel中做表格,颜色是什么,大小是什么...,一个属性,一个值。
CSS是怎么作用到HTML上的呢?还是以上文Word中把上面的标题改为蓝色,大小28号为例。
对应的CSS有3种形式:
第一种:直接写到HTML标签里,成为“内嵌式CSS”。
第二种:写到HTML文件头部,用style/style开合标签包含。
第三种:外链到单独的.css文件
如果只有HTML和CSS,网页世界就很乏味了,虽然HTML5和CSS3提供了众多交互形式,但更强大复杂的交互效果还得JavaSctipt来实现。
推荐继续学习CSS教程:
MDN:《学习CSS第一步》
CSS-Tricks
JavaSctipt
如果你能阅读到此处,恭喜你步入网站建设开发工程师行列了。
做PPT的时候,我想你不会满足只输入文字和图片,也想想弄点动画效果,及点按一下能动态切换幻灯片。在JavaScript中,这种交互形式称为事件,也就是你触发什么事件干什么事,常见的如系统的弹出窗口。
JavaScript的语法也不难,既然是编程语言,最基本的就是变量了,也就是值可变的。其实,只要把JavaScript的变量完全搞明白了,也就是掌握JavaScript了。因为在JavaScript中任何东西都能赋予变量。
同时JavaScript又是门面向对象编程语言,所有数据类型都是面向对象,连函数也是。还是以上文的弹出框为例,只要执行alert()内部函数就能出现弹出框。
JavaScript的强大不限于此,既可写前端,也可写后端。诞生出了很多前后端库,如jQuery、Vue、React、Angular、Node.js等,以简化JavaScript的操作和开发。
但我们还是建议你好好学习JavaScript,好比懂了拼音,任何汉字都不在话下。
推荐继续学习JavaScript教程:
MDN:《JavaScript指南》
javascript.info:《现代JavaScript教程》
你不知道的JavaScript(上卷、中卷、下卷)PDF版
JavaScript秘密花园
ES6入门教程
网站建设后端
为什么要用后端语言呢?想象如果你的网站有个新闻栏目,每天要发布文章,你总不能每次复制一下静态文件做链接吧,这种方式不仅低效,而且不容易保持数据,所以我们需要后端语言开发动态网站。
前面所介绍的HTML、CSS、JavaScript都是前端语言,就是你在浏览器中直接能查看到源码的。而后端语言你是无法查看的源码的,有些可以根据网址后缀识别。
网站建设开发可选的语言较多,常用的如PHP、Node.js、Java、.net等。要编写后端语言,首先要搭建本地环境,我们以“PHP是世界上最好的开发语言”为例。Windows可以使用类似XAMPP的集成开发环境,Mac和Linux已经内置了Apache服务器环境,可以搜索相关教程进行部署。
PHP的语法也很简单,如同我们提到的HTML开合标签,PHP也是基于开合标签,标签形式略不同?php?。类似JavaScript的变量,PHP的变量以$开头。
想象上面提到的新闻栏目更新,我们只要改变变量就可以轻易变化内容,扩展到页面,是不是同样的道理?当然,网站建设的实现中,往往把这些数据存储数据库,比如基于表格形式的Mysql、基于文档型MongoDB等。
推荐继续学习:
MDN:《安装基础软件》
PHP