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

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

一、什么是前端

首先,所谓的前端是指什么呢?前端(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标签,相应地作出显示。下面举几个栗子:

<h1>这是1级标题</h1>
<p>这是段落</p>
<a href=“这是链接地址”>这是链接的文字</a>
<img src=“这是图片的路径或链接地址”/>

2.3CSS

CSS中文名叫做「层叠样式表」,从名字里就可以看出,它是一种声明样式的文档。我们可以通过链接外部css文档,或者将样式写在HTML文档的<head></head>标签中,抑或在HTML标签中内嵌属性style=""来实现对样式的定义。举个例子,我们要让<p>这个段落</p>的背景变成灰色,就可以用以下三种方法实现:

/*方法一:直接用style属性*/
<p style=“background-color:grey;”>这是段落</p>

/*方法二:在HTML文档的<head>标签中声明(会应用于页面中所有的<p></p>段落)*/
<head>
  <style>
    p{
    background-color:grey;
    }
  </style>
</head>

/*方法三:通过外链实现*/
//另建一个css文档,在其中写上方法二中<style>标签间的内容,再在HTML文档中作如下声明
<head>
    <link href=“css文档的路径” rel=“stylesheet" type=“text/css” />
</head>

三、网页上的框

代码语言只是前端开发实现的基础工具,要还原一个网页视觉稿,你还需要掌握以下的方法,并且记住——网页上的所有东西都盛放在框中。

3.1Chrome开发者工具

Chrome开发者工具是对前端开发最有用的神器,对,没有之一。它不仅可以让你看到网页的源码,每个元素的样式、构成,还能让你编辑源码并且实时查看页面效果。

你可以在Chrome的菜单栏中,点击更多工具>开发者工具打开开发者工具,也可以在网页任意位置右击,点击检查打开。打开后,可以同时看到网页页面和开发者工具窗口。其中开发者工具左半边是HTML的源码,里面有各种各样的元素,右边显示的是你在左半边选择的元素的样式。

Chrome开发者工具

点击开发者工具左半边窗口中的各种标签,你可以看到页面上你所选择的元素周围出现了一个亮色的框(如上图所示)。这就是所谓的「任何一个页面元素都盛放在框中」。

3.2如何框化视觉稿

知道了网页元素都盛放在框中对于前端开发有啥用呢?用处可大了去了。现在,假设你是一个前端开发工程师,设计师给了你如下的设计稿,你该做的第一步是什么呢?

apple.cn

那就是把设计稿上你能看到的所有元素都放进框中,不光是那些天然已经是框状的图片,还有那些不呈现为方框状的文字等。实际上,一个HTML的标签(例如<p>123</p>)就是一个框。

框化视觉稿

还要注意的是,框是可以嵌套的。所以,要框化这个视觉稿,你首先应该找出一个包括整个页面的最大的框,然后再找出将页面明显分成几块的次大框,再找更小的框,一直找下去,直到无法再分下去。

3.3框化后的代码实现

等你把所有元素都框化以后,就可以着手开始写代码还原设计稿了。顺序是从最外面的框写起,不断往里面写。这里面有的框是并列关系,比如:

<p>我是段落一,也是框一,我和二是并列哒</p>
<p>我是段落二,也是框二,我和一是并列哒</p>

也可能是包含关系:

<div>
    <p>我是段落方框,我被外面的div层的框所包围</p> 
</div>

四、前端开发的流程

有了工具和方法,那网页设计稿的实现具体是怎样操作的呢?步骤可以概括如下:

  1. 从设计师那里(或者自己设计好)拿到网页的设计稿
  2. 分析设计稿,找到那些现成的框
  3. 找出那些样式重复的元素(或框)——如1级标题、2级标题、段落等
  4. 写HTML代码,把内容盛放进框中
  5. 写CSS代码,定义元素(或框)的样式(从大的样式特征——如框的宽度,到小的——如字体字重)
  6. 保存代码,在浏览器中打开,检查和设计稿的差距,调整代码
  7. 重复4-6步直到还原设计稿

原文地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容