前端入门篇(一):如何把设计稿还原成真实网页

如果你对网页设计及开发感兴趣,但是对标题里出现的第一个名词就摸不着头脑,先不要方。本文对小白友好,零基础可读,保证你读完能了解网页开发的基本思路和流程,明白网页设计稿是怎样被开发实现的。

一、什么是前端

首先,所谓的前端是指什么呢?前端(front-end)是相对后端(back-end)而言的,是描述进程开始和结束的通用词汇。在计算机程序中,前端作用于采集输入信息,后端进行处理。

而我们通常所说的「前端」,一般是指web前端,可以理解为网页的界面样式和视觉呈现。所以,前端设计一般视作网站的视觉设计,前端开发则是视觉设计的代码实现。

二、前端开发语言

HTML、CSS和JavaScript是前端开发中三种最基础的代码语言。看到代码你先别急着关网页,先来欣赏下使用不同程序语言的程序员之间的鄙视链(笑)。

汇编 >C >C++ >Python >Java 及 C# 及 PHP(这三者相互撕) >VB >那些坚持把HTML称为程序语言的人

所以你大概明白了,对于完全零基础的人来说,前端开发所用的语言(除了JavaScript),是相对比较容易学习和上手的。

2.1HTML/CSS/JavaScipt

你可以把网页想象成一间房子。HTML决定了网页的框架结构——有几间房间、作什么用途、里面摆放什么东西,CSS决定了网页的样式——房间是如何装潢的(如墙壁是什么颜色的),JavaScript则决定了网页上的用户交互和数据处理——用遥控器遥控电视。

下面简单介绍一下HTML和CSS语言的用处和用法,如果想继续学习,可以参考翁恺老师的两门公开课程——HTML5入门和CSS3。

2.2HTML

HTML是一种网页标记语言。它主要是利用标签来告诉浏览器,标签之间的东西是什么——是标题、段落、图片还是链接等。浏览器则会根据HTML标签,相应地作出显示。下面举几个栗子:

这是1级标题

这是段落

这是链接的文字

2.3CSS

CSS中文名叫做「层叠样式表」,从名字里就可以看出,它是一种声明样式的文档。我们可以通过链接外部css文档,或者将样式写在HTML文档的标签中,抑或在HTML标签中内嵌属性style=""来实现对样式的定义。举个例子,我们要让

这个段落

的背景变成灰色,就可以用以下三种方法实现:

/*方法一:直接用style属性*/

这是段落

/*方法二:在HTML文档的标签中声明(会应用于页面中所有的

段落)*/ /*方法三:通过外链实现*/ //另建一个css文档,在其中写上方法二中