页面制作也是一门艺术

开发 前端
网页制作要能充分吸引访问者的注意力,让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。本文作者阐述了他的观点,页面制作也是一门艺术。

当一个页面制作工程师将html页面呈现在你面前的时候,你看到的代码全是DIV,毫无章法可言,你作何感想?如果你看到的页面结构清晰、注释明朗、标签合理,你又作何感想?很明显,你更愿意看到的是第二类页面。

如果将页面比喻成一个女人,你更希望站在你面前的这个女人线条清晰、凸凹有致、精于打扮而又恰到好处,不是吗?好的页面总能让你体会到一种赏心悦目的快感,你会忍不住的看了再看,你会在查看的代码的同时想到《登徒子好色赋》中所言的东家之子。

我这样说可能有些过,但我相信你对好的代码所带来的美感一定有所体味。在许多人看来,页面制作是一项很简单的工作,不就是将设计图转换成html吗?如果页面制作就是这样一个简单的转换工作,那为何还要衍生出页面制作工程师这样的职位呢?一项工作如果被职业化,那么它就不那么简单了。在我看来,页面制作不仅仅是技术,更是一门艺术。

在UI设计师将一套设计稿交付到你(这里我假设你就是一名页面制作工程师)的手中之后,该如何去完成页面的制作?有经验的工程师从不急于动手,而是认真的查看每一张设计图,并进行对比分析。他们通常会从设计图中找出页面的基本框架,找出页面中相同或者相似的东西,并进行语义化分析,选择合适的标签。

在真正构建html的时候,他们会充分利用那些我们常见的技术,如滑动门技术、sprite技术、图像替代技术。他们会将灵活性考虑其中,并努力将维护成本降低到***程度。

他们并不是简单的切割设计图,而是分离其中的元素,这些分离的元素会被多次复用。有时候设计稿很多,可是他们很淡然,因为在他们看来,不过是几个元素合成叠加而已。他们会选择理想的图片格式,并在保证图片质量的基础上进行有效地压缩处理。在整个制作过程中,他们始终遵循结构与表现相分离的原则。

他们会使用语义化的标签来构建html,并充分利用这些标签来书写高效的的css文件。他们可能把大量的时间花在一个基本框架页的制作上,但这丝毫不影响他的效率。在他们眼中,一切都在的掌控之中。“运乎之妙,存乎一心”,他们理解各种常见技术,熟悉每个html标签,深刻领悟css语法。故而游刃有余,目无全牛。一张设计稿呈现在他们面前时,他们一眼就能看出基本骨架,很自然的想到用那些技术来实现,并能准确的表达出设计图中语义化的标签。

对于初学者来说,可能有所不同。他们很可能缺乏全局意识,为了切图而切图,全然不知标签语义化的重要性,以至于页面中全是DIV。他们会极尽所能的恢复设计稿的原貌(这在某种程度上来说是件好事),全然不知那些我们常见的技术技巧。

在项目向前推进的时候,问题接踵而来,原来的html结构难以重用,样式一塌糊涂。简单的修修补补已经很难解决出现的种种问题,如果遇上设计图些微改动的时候,更是叫苦不迭。每当这个时候,他们常常会一筹莫展,无所适从。

初学者往往缺乏以下东西:

1)没有足够的全局意识,对每一个细节把握不够;

2)对常见的技术技巧了解不深;

3)不理解标签语义化的重要性,或者知道标签的含义,却不知道如何用它。

而要真正掌握这些,也得费一番功夫才能练就。一旦掌握了这些东西,页面制作就变得很轻松。一旦你弄透了,在设计稿呈现给你的时候,你可以无视那些华丽的视觉效果,而是直指图中语义化的标签,直接构建html。那些华丽的效果不过是css的外衣。

【编辑推荐】

  1. 网页制作学习 关于门户网站设计(上)
  2. 网页制作学习:关于门户网站设计(下)
  3. 前端开发与网页制作 一直被混淆从未被厘清
  4. DIV CSS网页制作一般流程
  5. 专家提醒 小心DIV+CSS网页制作五大误区
责任编辑:于铁 来源: Denis的博客
相关推荐

2012-05-08 13:18:54

天玑科技数据中心迁移IT服务

2010-01-20 11:01:07

2015-05-18 13:28:09

中小企业IT云服务

2015-05-15 09:53:51

RackspaceIT业务

2015-07-29 09:58:29

快速学习

2015-07-28 15:35:48

学习语言

2022-02-27 14:45:16

编程语言JavaC#

2019-11-18 11:00:58

程序员编程语言

2012-09-04 11:20:31

2014-06-03 17:44:00

快速学习新技术

2022-11-04 11:11:15

语言入职项目

2012-03-28 09:40:40

JavaScript

2012-09-06 09:21:22

编程语言技术

2011-12-30 09:33:02

程序员语言

2023-02-08 07:35:43

Java语言面向对象

2020-09-27 15:52:02

编程语言C 语言Python

2014-12-03 09:48:36

编程语言

2021-07-09 06:48:30

语言Scala编程

2022-02-21 11:15:59

编程语言后端开发

2010-04-30 18:54:07

点赞
收藏

51CTO技术栈公众号