时间: 2008-04-26 / 分类: WEB后端编程 - 开发与实践 / 浏览次数: / 0 个评论 发表评论
Web开发设计的五大准则(5 Rules For A Good Web Design)
WEB前端开发中的一些编程风格和书...
12条经典摄影技巧
CSS Hack浏览器兼容IE6+IE7+IE8+IE9+FF
项目前端开发的架构

如果仓促而为,设计一个专题或者网站一定会成为恶梦。Web设计需要遵循一些准则并有计划地去做。

规则 #1 : 先出设计图

这是必须的。不要假设设计图在你的头脑中就开始设计web,必须要放到纸上。可以这样做:

1,  拿尺子、笔和纸,按照具体的尺寸一行一行地画下来;

2,  记得考虑分界线的长度等,这样才能符合CSS的像素;

3,  记下设计的每一个细节免得忘记,如果把所有细节都累积到最后将是巨大的麻烦。

规则 #2 :配色

这是设计的核心部分,只有颜色搭配合适才能使你的网页看起来不错。首先要决定的是主色,也即你在网页中多数使用的颜色;然后选择跟主色调搭配的第二颜色;不要选择超过三种颜色不然你的设计看起来会很乱。如果你想要更多的颜色,可以使用浅色或者深色的阴影来搭配主色调。

1,  浏览十个跟你网页有同样主色调的网页;

2,  给几个人看你的配色方案并取得反馈;

3,  从浏览的网页和反馈你将更好地完善你的颜色搭配。

规则 #3 : 从基本的版块开始构建

定下配色和设计图之后,从最基本的框架开始构建——我的意思是说不添加任何文本。因为在版面中加入文本会使得架构混乱。方法如下:

1,  每一个版块设定边界线,这样能够看到具体的尺寸和位置;

2,  对不同的版块使用不同的颜色,在完成版块后再改成你想要的颜色。

规则 #4 : 理清CSS

不要在你的HTML文件中将styling元素搞得太复杂,不然等到你修改的时候你就不得不到处搜索。所以将所有styling元素归置在一个单独的CSS文档中。

在styling之前理清你的CSS免得太过杂乱导致你多次重复同一件事。CSS支持继承,也即parent block的style可以用于child block.,充分利用这条特性。命名CSS分类名也要易懂易记。比如使用“main_content”而不是“div_1”。

规则 #5 : 制订多重 CSS 文档

我们都知道,使用浏览器可以轻易地看到网页的输出,但使用另一浏览器的时候则可能发现输出不正常。这不是什么稀奇事儿,因为每个浏览器对HTML和CSS的处理方式都不一样。

为避免这种情况,每个浏览器准备一个CSS文档,这样所有浏览器都可以正常浏览。虽然这有一定的难度,但是记着指望一个CSS文档来满足所有浏览器是不可能的。

 

Designing a theme or a website can be a nightmare if done in a haste. I am currently trying to develop a good theme for Techtracer and found out that designing is typing in some HTML and CSS to bring out what you are visualizing. Design should follow some rules and it requires proper planning to do so. I have taken down some rules that I realized they should have been followed while I began designing the new theme. I would like to share those with you.

Rule #1 : Lay out the Blueprint First

This is a must. Do not start your web design just on the assumption of a that you have a design in mind and you would want to see it in reality. Believe me, it never happens this way and if it doesn’t then you would just get frustrated at the failure and give up on the design in the mid way. What you must do is plan the design on paper. Some tips to follow,

  1. Take a ruler, pen and paper and draw the design line by line properly with specific measurements.
  2. Make it a point to consider even the length of the divisions in the layout. The length can then be easily mapped to the pixel length in your CSS
  3. Describe your divisions so that you don’t forget any thing. This will be helpful because last minute additions to the design might be disastrous.

Rule #2 : Finalize your Color Scheme

This is the second and will form the heart for your design. Your web design will turn out good only if the color scheme is good else it will look boring. To decide on your color schemes first chose what the main color will be. The main color means the color which you will be using maximum in your design. Choose 2 secondary colors which suit with the main color. Do not choose more than 3 in total or your design will look messy. If you want more colors go for the lighter and darker shades to compliment your main color. To finalize upon your color scheme,

  1. Surf the internet for 10 designs which have the same color scheme.
  2. Show those designs to a few people and take their feedback. This is because ultimately you do not your first impression to be negative in your case.
  3. From the feedback and websites you will be in a good position to finally prepare filling the colors in your blueprint. You will be more confident this time.

Rule #3 : Start With The Basic Building Blocks

Once your color scheme and layout is finalized its time to implement it. Start building the basic layout structure. By basic layout structure, I mean to say is no text should be put in to the layout. Remember, having any text in the layout will not give you a proper idea because text itself might change the structure which might be misleading. Think about a situation if you don’t have the text but have only images. Your design will behave differently in such a case. Basic blocks can be made further easier by,

  1. Putting a border around each of your divisions so as to visualize it perfectly to the point.
  2. Initially having a different color for each block and on completion replacing it with the desired color scheme

Rule #4 : Know your CSS and Handle it with Care

Never hard code your styling elements in your HTML files because at a later point of time you won’t have to keep searching which HTML file to correct in case you have to make any change. So it is always beneficial to have all the styling elements in a separate CSS file.

Also, before styling study your CSS so that you don’t get too messy by repeating the same thing over and over again. CSS supports inheritance. This means that the style given to a parent block will also be applicable to the child block. Use this feature to its full effect. Plan your CSS class names so they are understandable.

For example use the name “main_content” instead of something lile “div_1” because your CSS file will outgrow in its length quickly and you would be lost in trying out to recall which element points out to which block in the layout.

Rule #5 : Make Multiple CSS files

The nightmare which I had mentioned in the beginning starts here. It is very much easier to check the output of your design right at the moment in the browser. Do not use any tools for viewing the output because they cant be trusted always. Even if you use a browser for viewing the output it is possible that the design crashes in another browser. Do not panic. It is a normal thing because every browser renders the HTML and CSS differently.

It is for this case you should have one CSS file per browser so as to be sure that your design looks proper in all browsers. Of course this is not easy. But you MUST NOT try to make all the browsers happy with a single CSS file. This wont happen. If you try too much then you would be compromising more on the design. Having one CSS file will give you the flexibility to change a style for one browser without thinking of what effect it might have in another browser.

These 5 basic rules are the ground rules which will lead to a well executed design. If you want your design to be fool proof and reduce your headaches, then these rules will definitely convert your effort to success. Web designing can be a painful job if you do it in haste, so put these simple rules into practice and ease out your work.

原文作者:nitinpai
原文链接:5 Rules For A Good Web Design
译者:小猪哥

      站点地图 | 关于我 | 返回顶部
    Copyright © 2001-2013 { amiku.cn | zhangshunjin.com }. Powered by 

    阿米酷

    张顺金


    浙ICP备11002820号-1