xiebiji.com

难得国外有这样好的教程，我就用我仅有的英文水平翻译一下啦。建议将本博客的中栏和右栏隐藏后观看本文。

转载请注明：

译者：Joe

译文来源：http://xiebiji.com/2009/09/design_a_beautiful_website/

原文来自：Design a Beautiful Website From Scratch

引言

你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手？说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。 今天我可以这么做了，而且我将教你怎么做这样的设计！从根本上，对于这种设计你需要一点photoshop的操作技能和观察细节的能力。通过以下的教程，我将会指出其中极细微的细节之处，而这些细节讲使你的网页设计漂亮起来。打开photoshop,我...

与之前的步骤不同,这是实际操作的步骤.本文包括了大局的步骤和栏目,图片,小到一个图标的选取等等等等,可能会漏掉很多的东西.欢迎补充.我只是引导你去思考,本章绝对不是网页的标准制作步骤,我相信也没有什么标准的制作步骤.

本章的设计步骤是建立在网页设计进阶之一 (步骤和大局观)之上的.可能会涉及一些平面相关的知识.和网页与平面的比较.网页与平面的区别我会在以后在写.

本章所讲的基于PHOTOSHOP软件制作.

本章印证了网页90%是排版这句话.

遵循从整体到局部的顺序.

1:在定位的基础上,搞明白自己要做什么.

这句其实不用解释了.你要明白的是我要做的站大概有什么样的效果,并有例子在脑海里浮现.要做的这个站属于什么样的行业,这个行业...

一般网页设计也要遵循一些设计模式，诸如：黄金分割原理，今天要记下的是F型网页设计

现在比较流行的网站浏览的视觉原理，一般指的是尼尔森的F型网页浏览模式，这种流量模式宛如英文字母F的形状，并且包括以下三个方面：

1、读者的眼睛首先是水平移动的，常常是扫过网页内容的最上半部分，这样就形成了一条横向的运动轨迹，这是F的第一条横线。

2、读者的眼光稍微下移，很典型的扫描比第一范围较短的区域，这就画出了F字母中的第二条横线。

3、读者超网页左边的部分进行垂直扫描，有时候，这个举动很慢而且很有系统性，这样就画出来F字

帮同学做的网页设计，免费！！！！

测试地址：http://xiebiji.com/works/robocode

开学以来一直很忙，昨天刚去完春游。还没有坐定就又开始对着电脑狂画狂写代码，这种生活真不惬意。。。

人对代码对久了就不会说话了，感情也淡了。

因此最近又搞前台设计又编后台，但是却因为这样感觉自己的发展方向就是拿不定。

有时自己会想，到底以后能不能找到工作？又或许想，到底自己现在学的以后能不能用上。

搞网页创作最开始最基础的应该是弄明白网页设计的原则，那什么是网页设计的原则呢？其实就是创作网页的目的以及要求。具体可以分为：

1.了解分析客户需求

网页设计是一个感性与理性分析相结合的复杂过程。

它的方向取决于设计的任务，它的实现依赖于网页的制作。站点的设计是为了展现企业的形象,介绍产品和服务，体现企业发展战略的重要途径。因此总体设计方案主题要鲜明。在目标明确的基础上，完成网站的构思创意。对网站的整体风格和特色作出定位，规划网站的组织结构。

一件完美&完整的网站设计作品，是设计师与客户不断进行沟通而设计出的结果。

怎样符合客户要求具体可以作以下考虑：是建立信息门户网站还是企业网站？或...