文档章节

Web开发设计的五大准则

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

如果仓促而为,设计一个专题或者网站一定会成为恶梦。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 ⋅ 0

BlinkOn9 - Layered APIs

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

rogeryi ⋅ 05/18 ⋅ 0

#legoo内核# (1)设计准则

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

边缘行者 ⋅ 2013/12/22 ⋅ 0

5个主流的HTML5开发工具分享

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

Miss_Hello_World ⋅ 2015/09/14 ⋅ 0

关于WebWind一点想法

关于WebWind这一REST风格的Java MVC框架,首先学习下什么是REST,表象化状态转变(英文:Representational State Transfer,简称REST)是Roy Fielding博士在2000年他的博士论文中提出来的一种...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

分享5个主流的HTML5开发工具

概述:HTML5被看做是web开发者创建流行web应用的利器,增加了对视频和Canvas 2D的支持。用HTML5的优点主要在于,这个技术可以进行跨平台的使用。今天,小编将为大家推荐几个主流的HTML5开发工...

Emilypz ⋅ 2015/09/21 ⋅ 0

分享5个主流的HTML5开发工具

概述:HTML5被看做是web开发者创建流行web应用的利器,增加了对视频和Canvas 2D的支持。用HTML5的优点主要在于,这个技术可以进行跨平台的使用。今天,小编将为大家推荐几个主流的HTML5开发工...

momosunny ⋅ 2015/09/16 ⋅ 1

ASP.NET Web API 应用教程(一) ——数据流使用

相信已经有很多文章来介绍ASP.Net Web API 技术,本系列文章主要介绍如何使用数据流,HTTPS,以及可扩展的Web API 方面的技术,系列文章主要有三篇内容。 主要内容如下: I 数据流 II 使用H...

葡萄城控件技术团队 ⋅ 2015/12/09 ⋅ 0

Rest风格WEB服务(Rest Style Web Service)的真相

写这篇文章是目的不是介绍Web-Service, 而是从Restful Web Service说起来剖析一下 什么才是真正的Restful Style的架构与协议,从而更好的理解web服务的设计理念与架 构本质。 一:Web Servi...

mysky221 ⋅ 2014/10/14 ⋅ 0

编写跨浏览器兼容的 CSS 代码的金科玉律

作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,...

鉴客 ⋅ 2010/06/09 ⋅ 6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

服务网关过滤器

过滤器作用 我们的微服务应用提供的接口就可以通过统一的API网关入口被客户端访问到了。但是,每个客户端用户请求微服务应用提供的接口时,它们的访问权限往往都需要有一定的限制,系统并不会...

明理萝 ⋅ 5分钟前 ⋅ 1

【2018.06.21学习笔记】【linux高级知识 14.1-14.3】

14.1 NFS介绍 14.2 NFS服务端安装配置 14.3 NFS配置选项

lgsxp ⋅ 14分钟前 ⋅ 0

Day18 vim编辑模式、命令模式与练习

编辑模式 命令模式 :nohl 不高亮显示 :x与:wq类似,如果在更改文件之后操作,两者效果一样;如果打开文件,没有任何操作; :wq会更改mtime,但是:x不会。 练习题 扩展 vim的特殊用法 ht...

杉下 ⋅ 17分钟前 ⋅ 0

Enum、EnumMap、EnumSet

1、Enum 不带参数 public enum Car { AUDI { @Override public int getPrice() { return 25000; } }, MERCEDES { ......

职业搬砖20年 ⋅ 18分钟前 ⋅ 0

Java中的锁使用与实现

1.Lock接口 锁是用来控制多个线程访问共享资源的方式,一般来说,一个锁能够防止多个线程同时访问共享资源。 在Lock出现之前,java程序是靠synchronized关键字实现锁功能的,而Java SE5之后,...

ZH-JSON ⋅ 19分钟前 ⋅ 0

线程组和 ThreadLocal

前言 在上面文章中,我们从源码的角度上解析了一下线程池,并且从其 execute 方法开始把线程池中的相关执行流程过了一遍。那么接下来,我们来看一个新的关于线程的知识点:线程组。 线程组 ...

猴亮屏 ⋅ 20分钟前 ⋅ 0

相对路径和绝对路径

基本概念   文件路径就是文件在电脑中的位置,表示文件路径的方式有两种,相对路径和绝对路径。在网页设计中通过路径可以表示链接,插入图像、Flash、CSS文件的位置。   物理路径:物理路...

临江仙卜算子 ⋅ 24分钟前 ⋅ 0

消息队列属性及常见消息队列介绍

什么是消息队列? 消息队列是在消息的传输过程中保存消息的容器,用于接收消息并以文件的方式存储,一个队列的消息可以同时被多个消息消费者消费。分布式消息服务DMS则是分布式的队列系统,消...

中间件小哥 ⋅ 27分钟前 ⋅ 0

java程序员使用web3j进行以太坊开发详解

如何使用web3j为Java应用或Android App增加以太坊区块链支持,教程内容即涉及以太坊中的核心概念,例如账户管理包括账户的创建、钱包创建、交易转账,交易与状态、智能合约开发与交互、过滤器...

笔阁 ⋅ 27分钟前 ⋅ 0

vim编辑模式、vim命令模式

vim编辑模式 使用vim filename 进入的界面是一般模式,在这个模式下虽然我们能够查看,复制,剪切,粘贴,但是不能编辑新的内容,如何能直接写入东西呢?这就需要进入编辑模式了,从一般模式...

李超小牛子 ⋅ 30分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部