做网站-如何将设计稿还原为网页

做网站开发的伙伴应该很清楚,一个网站从设计到开发完成,经过的步骤,除了需求功能这些不说以外,其余的就是展现给用户的视觉上的效果了。一般由美工或者说设计师设计出页面的效果图,然后再把这个设计稿通过网页的形式来展现,那么这个过程到底如何来做?今天网站站小编就和大家一同来探讨一下...

通常来说,一个设计稿都是通过一些设计软件设计出来的,比如常见的PhotoShop、FireWorks。所谓的设计图其实就是导出来设计好的图片,在确认好这些设计稿以后,我们需要通过"切片"的方式来还原网页,具体有以下几个步骤:

1、PhotoShop或fireworks进行图层切片

这个切片是啥意思呢?很简单,就是把设计稿中一些单独或者说独立的图片或者标志切出成相同尺寸的图片。比如说网站的Logo,一些装饰性的图标,无规律的线条。对于一些有规律的背景,可以切出那一个重复的图片单元即可。为了提高网站的图片加载速度,我们可以把一些切好的单独的图片汇聚在一个大的图片上,背景为透明,这样我们就可以通过CSS的背景X,Y轴偏移的方式对这一张图片来做到点缀整个网站的装饰图的效果。现在很多大型的网站也是这样做好,可以很好的提高网站对加载图片的速度。

2、根据设计稿编写DIV+CSS布局

一个设计稿出来后,我们可以通过观察分析出它的布局。比如说是上中下结构,还是左右结构,或者说两者的结合。可以先在纸上把大概的布局先画出来,然后再用DW或者其它的网页设计编辑工具,通过编辑div来布局好这些层次结构。这些定义好以后,再给这些DIV定义和编写好相应的样式。这样就能初步还原为网页的效果了。

3、CSS样式控制,调试。

这一步当然是比较繁锁同时也是特别花费时间的一步,尤其是针对不同浏览器的调试,这就要求我们在编写CSS代码的时候,要规范化。越是复杂的效果图还原其CSS样式也越是难写,因为可能会有多层的DIV嵌套,这时我们需要对DIV的浮动,相对定位,绝对定位,清除浮动,以及内边距,外边距都要设置合理,确保各个浏览器的展示效果一样。

4、对页面中的交互效果加入适当的JS

5、整理好目录结构,CSS,JS通过文件引入方式加入

一个静的网页,我们也需要规范好目录结构,比如使用image目录存放所有图片,js目录存放javascript脚本,css目录存放样式文件。外层的index.html就是网页入口文件,这样也更清晰明了。另外静态html代码中应该把一些样式代码和js脚本代码抽离出去,用文件的方式引入进来,这样做,一来可以使代码更加简洁,二来浏览器访问的时候会更快(浏览器会缓存)。

总结:

以上5点关于设计稿还原为网页的步骤是做网站小编经常使用的方法,静态网页做好以后我们就可以用它来套用我们的程序进而作成动态的网站。当然,如果不需要设计师设计效果图,为了省事,静态的网页模板我们也可以从一些专业的网站模板来下载。这就不在我们这篇文章的讨论范围了...

本文来自企鹅号 - 做网站媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开源项目

绝对想尝试的创意 Android 库,你关注了吗?| 码云周刊第 43 期

码云项目推荐 随着 Android 开发走向成熟,每天都会涌现出各种各样与 Android 相关的开发工具,但是我们每天使用的各类库总是不可或缺的。这里,小...

42690
来自专栏Java后端技术

CSS设置超出指定宽度自动换行

  最近项目中有用到在div中显示用户反馈的信息,是指定宽度的div,超出要自动换行,开始写好后感觉应该没什么问题,后来自己随便输入测试数据的时候发现:如果是纯...

12220
来自专栏Material Design组件

Human Interface Guidelines —— Popovers

376110
来自专栏编程

5个最好的开源Javascript图表库

在这篇文章中,我向大家介绍前5名最好的开源JavaScript图表库。每个站点的仪表板都是不完整的,因为他们缺少图表,所以为我们的站点找到正确的图表库是非常重要...

47580
来自专栏我和我大前端的故事

2018 我所了解的 Vue 知识大全(一)

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

11030
来自专栏大前端开发

从编程小白到全栈开发:操控浏览器

一个程序猿和普通电脑用户,当他们浏览到一个效果炫酷的网页的时候,他们的反应是不太相同的:

8430
来自专栏黑泽君的专栏

打造自己的博客园页面

刚接触博客园时,总有一种要定制打造自己博客页面的冲动,后来感觉原有的模板足够了(博客园提供了大量的模板),没有做这项工作。今天不太忙,稍微研究了下博客园的页面定...

22230
来自专栏liuchengxu

如何使用 Vim 的 help

实际上,无论是 Vim 的基础知识还是进阶知识,大都可以从 help 中找到指引。但是我想很多人并没有意识到这一点,或者并没有重视这一点。RTFM (read ...

7620
来自专栏思衍 Jax 专栏

企鹅辅导课程详情页毫秒开的秘密 - PWA 直出

随着近几年的前端技术的高速发展,越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例,从性能角度,其最重要的指标...

1K110
来自专栏angularejs学习篇

angularjs学习第五天笔记(第二篇:表单验证升级篇)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

11010

扫码关注云+社区

领取腾讯云代金券