文档章节

Web开发设计的五大准则

有些服务器
 有些服务器
发布于 2015/12/09 13:33
字数 755
阅读 41
收藏 3

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


Rule #1 : 先出设计图


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


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


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


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


Rule #2 :配色


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


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


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


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


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


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


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


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


Rule #4 : 理清CSS


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


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


Rule #5 : 制订多重 CSS 文档


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


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


© 著作权归作者所有

共有 人打赏支持
有些服务器
粉丝 4
博文 49
码字总数 86607
作品 0
南昌
基于WEB的嵌入式监控系统--xhttpd

基于WEB的嵌入式监控系统 “基于WEB的嵌入式控制系统”软件是在传统意义下的远程监控的基础上,融合了WEB和嵌入式技术,从而提供比传统远程监控更为强大的功能。 该系统以嵌入式Linux为目标系...

匿名
2011/03/22
3.2K
0
BlinkOn9 - Layered APIs

作者在 4 月 18~19 期间和同事一起在湾区参加了为其两天的 BlinkOn 9 会议。每次 BlinkOn 都是了解当前 Blink & Chrome 和 Web 技术演进现状和发展方向的一个不错机会,两天的会议下来大概听...

rogeryi
05/18
0
0
web前端进阶之js设计模式之设计原则篇

何为设计? 按照一种思路或者标准来实现功能 功能相同,可以有不同设计方案来实现 伴随着需求增加,设计的作用才能体现出来 设计准则(根据UNIX/LINUX设计哲学整理而得) 1、小即是美(一个功...

jia林
07/31
0
0
#legoo内核# (1)设计准则

编程N年,积累下来的一些方法论,映射到目前自己维护 Legoo内核,需要自己给自己一个归纳与抽象,在正式介绍设计架构之前,我先从更为抽象的角度来看待他,他的设计坚持了什么原则,这些原则...

边缘行者
2013/12/22
0
0
5个主流的HTML5开发工具分享

HTML5被看做是web开发者创建流行web应用的利器,增加了对视频和Canvas 2D的支持。用HTML5的优点主要在于,这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏,你可以很轻易地移植到...

Miss_Hello_World
2015/09/14
275
0

没有更多内容

加载失败,请刷新页面

加载更多

白话SpringCloud | 第十章:路由网关(Zuul)进阶:过滤器、异常处理

前言 简单介绍了关于Zuul的一些简单使用以及一些路由规则的简单说明。而对于一个统一网关而言,需要处理各种各类的请求,对不同的url进行拦截,或者对调用服务的异常进行二次处理等等。今天,...

oKong
18分钟前
1
0
详解nohup和& 区别

详解nohup和& 区别 2017年11月29日 16:57:38 King-Long 阅读数:7266 版权声明:本文为博主原创文章,欢迎转载。 https://blog.csdn.net/u011095110/article/details/78666833 nohup 一、【解...

linjin200
30分钟前
3
0
Character的static方法

基本类型char的包装类是Character,使用的比较多,大家是比较熟悉的。 我只是觉得里面有很多static方法,平时不怎么用,学习一下怎么实现的,或许日后就用到了。 static int compare(char x,...

woshixin
30分钟前
1
0
正则介绍_sed

10月17日任务 9.4/9.5 sed sed工具 匹配打印 -n 只打印匹配行,不然其他行也会打印出来 p 打印(配合-n使用) [root@centos7 tmp]# sed -n '/root/'p passwd root:x:0:0:root:/root:/bin/ba...

robertt15
30分钟前
2
0
轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码

轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码 2013年05月22日 15:18:05 秋实先生 阅读数:14826 这里解码百度访问统计代码构造函数为示例: 百度访问统计代码JavaScript源码:...

_纵横捭阖_
39分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部