视觉

Vision

首页>视觉>品牌营销
网页设计师需要懂得如何编代码
更新时间:2015/6/2 16:21:07 浏览:788 关闭窗口 打印此页
要想成为一个真正优秀的设计师,你需要理解网页设计的工具。而在网页设计中最核心的工具,毫无疑问,是代码。
 
所以,对于像真正掌握网页设计的设计师而言,“网页设计师应该学习编程吗?”根本不是一个问题。他应该问“网页设计师应该懂多少编程知识?”
虽然网页设计师并不需要懂得如何编程,但了解基本的前端开技术却能让设计师具备如下优势:
· 为自己的设计创造更多可能
· 更为独立地建设自己的网站
· 更好地与开发者沟通。具备这些优势,也会为你赢得同行的更多尊重
对网页设计师来说,学习编程或许有些难度。但,绝对值得。

一个网页设计师并不需要成为一个HTML 或 CSS专家。但他起码应该具备最基本的代码知识,因为正是代码构成了整个网页设计的基础。
对于从没接触过编程的设计师来说,这个话题可能会让他们觉得晕头转向。HTML, CSS, JavaScript, PHP, Ruby, SQL……等等都是在编程中可能用到的语言。在这篇文章中,我们将对这些知识做一个简略的介绍,为有志于真正掌握网页设计艺术的设计师提供一个入门之阶。

前端开发vs后端开发
一个网站中能被访问者看到的部分被称为前端(front end)。而后端(back end)则包括各种储存的数据,图片,服务器即其他元素。网站开发与建造房屋有点类似---网页设计师像整个网站的建筑师一样画出蓝图。建筑工人用砖瓦,水管等搭建起建筑的“后端”,然后粉刷工,装修工来装饰房屋的外观,也就是“前端”。
用于实现前端的工具主要有HTML, CSS和JavaScript,后端开发者的常用工具有PHP, Ruby, Python, Java, SQL 及 .Net。一个全能的开发者应该对前端和后端的开发工具都很熟悉。
当然,作为一个网页设计师,你并不需要将这些语言全都学习一遍。你只需要你的设计是如何被转换为代码的即可。由于网站前端与设计师创造的视觉元素息息相关,我们就先从开端开始。

HTML(超文本标记语言)
将一个设计或模型转变为一个可用的网站涉及不同的编程步骤,或者如上面所说的,不同的语言。整个流程的第一步通常是将网站的组成部分标记为HTML元素,并写出基本的HTML代码。网站的每个组成部分都是一个元素(element),如果要详细标记它们就需要使用标签(tag)。文本,图像,动画等都可以成为HTML元素。每种元素都将被编入一个被称为DOM 结构(DOM tree)的分层中,以便按一定的次序被加载和显示。以下就是一段基本的HTML代码。

这段代码显示出来是这样的: 

看起来相当简陋对吧?除了文本之外,这张图几乎没有任何特殊样式,布局或其他视觉元素。这是因为添加风格要靠CSS实现。但在我们开始介绍CSS之前,我们为你提供了一些进一步学习HTML的资源:
· Introduction to HTML from Learnable
· HTML Introduction at W3Schools
· Intro to HTML by KhanAcademy

CSS

所有与风格样式相关的信息都存储在CSS表单(CSS sheet)中,与HTML独立地存在。开发者把网页内容与风格分离的目的主要是可以更方便地单独处理内容或单独处理风格,而不必把两者混在一起。在建设多页面的大型网站时,这种方式显得尤为必要。因为这样就无需为每个页面的布局或字体单独编写代码,只需一个通用的CSS样式表单即可处理所有页面的元素风格。
即便用户在网站完成前的最后一刻又要求对页面布局做出重大改动,也只需相应地改动与之有关的CSS样式即可,不需要重新编辑网站的每个页面。一般来说,开发者开始编程的时候,通常要在HTML 和CSS不停切换,直至完成最终的版本。
现在让我们为前面的例子增加一些样式。通过下面的代码,我们可以将标题设置为蓝色并居中显示。

显示效果如下:

当然,这也是CSS应用中一个非常基本的例子。你可以通过下面的资源进一步学习:
· Practical CSS from Learnable
· CSS Introduction by W3Schools
· Intro to CSS at KhanAcademy

JavaScript
JavaScript可以实现页面元素的互动和动态效果。绝大多数网站中的联系人表格,自动提示/填充等元素都基于JavaScript。当然实现网页元素的动态化也有别的方式。但目前为止最流行的依然是JavaScript。JavaScript也被用来更改HTML内容或加载不同的内容。你可以通过下面的资源进一步学习与JavaScript有关的知识:
· JavaScript for Designers by Rachel Nabors (and extra: Blend Conference 2013 Talk here)
· JavaScript Intro (with live examples) by W3School

组合运用
上面介绍了一些前端开发中常用的基本语言。正如我刚才说过的,在实际的编程中开发者根据网站功能的需要,经常要在不同的语言间切换。但各种不同的语言是如何组合在一起发挥作用的?下面的资源有助于你了解这一点:
· Build Your First Website with HTML & CSS from Learnable
· Intro to HTML and CSS from Udacity
· 30 Days to Learn HTML & CSS from Tut+
· Make a Website with HTML+CSS from CodeAcademy
· Introduction to Web development at Udemy
 
在线咨询
在线客服
在线客服
咨询热线
0755-82970589
135 7088 8589
top