专栏首页Tech爬虫(公众号php_pachong)如何把设计稿还原成真实网页

如何把设计稿还原成真实网页

所谓的前端是指什么呢?前端(front-end)是相对后端(back-end)而言的

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

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

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

<h1>这是1级标题</h1>

<p>这是段落</p>

<ahref=“这是链接地址”>这是链接的文字</a>

<imgsrc=“这是图片的路径或链接地址”/>

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

记住:网页上的所有东西都盛放在框中

开发者工具

Chrome开发者工具是对前端开发最有用的神器; Firefox也可以。

框化视觉稿

把设计稿上你能看到的所有元素都放进框中,实际上,一个HTML的标签(例如<p>123</p>)就是一个框。

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

框化后的代码实现

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

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

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

也可能是包含关系:

<div>

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

</div>

前端开发的流程

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

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

本文分享自微信公众号 - Tech爬虫(php_pachong),作者:爬虫

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML是什么?

    html就是要告诉浏览器我的某个东西是什么,没错,这就是它的主要功能。html的实质,他就是一种标签,一种人和浏览器交流的标签,我们只有告诉浏览器这是什么,他才...

    公众号php_pachong
  • css优先级

    多重样式(MultipleStyles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。

    公众号php_pachong
  • MQTT协议通俗讲解

    基本概念 Basic Conception Session 会话 定义 定义:某个客户端(由ClientID作为标识)和某个服务器之间的逻辑层面的通信...

    公众号php_pachong
  • 第二篇 爬虫技术之HTML

    hello,大家好今天我们继续分享爬虫的相关技术,今天我们分享的是html的基础知识。

    还是牛6504957
  • 课时36:类与对象:给大家介绍对象

    大家之前已经听说过封装的概念,把乱七八糟的数据扔进列表里面,这是一种封装,是数据层面的封装;把常用的代码段打包成一个函数,这也是一种封装,是语句层面的封装;本章...

    py3study
  • 小程序Ticker倒计时最佳实践

    01 什么是ticker? tick本来的意思是钟表的滴答声。Ticker类为游戏开发提供了一个主要的定时类。它主要的目的就是把stage渲染的工作集中起来,...

    腾讯NEXT学位
  • 网页设计师和网页前端开发我该选择哪一个

    在互联网历史中,网页设计师和网页开发人员这两个不同的行业分工一直都扮演着不可或缺的角色。谁是主角,谁是配角的争论就如鸡和蛋谁先谁后的争论一样,喋喋不休却没有意...

    奔跑的小鹿
  • dataframe行变换为列

    使用 import org.apache.spark.sql.functions 里面的函数,具体的方式可以看 functions :

    机器学习和大数据挖掘
  • IDE小技巧:让Eclipse智能提示追上Visual Studio

      以前一直在.NET阵营里面学习,现在因为项目原因使用Java,并使用优秀的一款IDE—Eclipse,但一直都开心不起来。因为.NET中的IDE—Visua...

    Edison Zhou
  • 《Python基础教程》 读书笔记 第七章 更加抽象(下)

    定义类时,所有位于class语句中的代码都在特殊的命名空间中执行——类命名空间(class namespace)。这个命名空间可由类内所有成员访问。类的定义其实...

    统计学家

扫码关注云+社区

领取腾讯云代金券