`
liyiye
  • 浏览: 424951 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Web开发设计的五大准则

阅读更多
国际 如果仓促而为,设计一个专题或者网站一定会成为恶梦。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文档来满足所有浏览器是不可能的。

分享到:
评论

相关推荐

    中国大学生计算机设计大赛软件应用与开发类评比标准.docx

    参赛作品主要分为四类:Web应用与开发、管理信息系统、移动应用开发和算法设计与应用。每类作品需满足特定的功能需求和应用场景,能够提供信息管理、信息服务、移动便捷操作或创新算法解决方案。 二、作品基本要求 ...

    WEB设计大全

    Web设计进程 <br>2.1 进程需求 <br>2.2 特别的Web进程 <br>2.3 基本的Web进程模型 <br>2.3.1 修正瀑布模型 <br>2.3.2 联合应用开发模型 <br>2.4 Web站点项目的途径 <br>2.5 目标和问题 ...

    WEB前端开发规范文档

    ### WEB前端开发规范文档知识点详解 #### 一、概述 WEB前端开发规范文档旨在通过制定一系列标准化的操作流程和规范,提升开发效率与质量,确保项目的可持续性和可维护性。该文档详细介绍了WEB前端开发的基本准则、...

    Java开发者需坚守的十大基本准则

    例如,Struts 是一个流行的开源Web框架,适用于基于Web的应用程序。在没有特殊需求的情况下,使用此类现有框架可以节省大量时间和精力。 #### 六、合理使用调试工具 在开发过程中,使用 `System.out.println` 进行...

    高质量软件开发人员的五大习惯

    【高质量软件开发人员的五大习惯】是提升软件开发团队效率和产品质量的重要指南。在现代商业环境中,软件开发团队面临着来自业务团队的多重挑战。业务团队需要软件开发团队以最低的成本快速开发新功能,并确保这些...

    QTP自动化化测试框架设计参考准则

    ### QTP自动化测试框架设计参考准则详解 #### 一、引言 自动化测试框架的设计是软件测试中的一个重要组成部分,尤其在QTP(Quick Test Professional)这样的自动化测试工具中更是如此。一个良好的自动化测试框架...

    WEB设计大全(part2)

    Web设计进程 <br>2.1 进程需求 <br>2.2 特别的Web进程 <br>2.3 基本的Web进程模型 <br>2.3.1 修正瀑布模型 <br>2.3.2 联合应用开发模型 <br>2.4 Web站点项目的途径 <br>2.5 目标和问题 ...

    web前端开发规范参考文档

    ### Web前端开发规范知识点 #### 一、规范目的概述 本文档的核心目的是为了提升团队协作效率,确保代码质量,以及建立一套统一的编码风格规范。规范文档一经确认,所有前端开发人员都应按照该规范执行前台页面开发...

    互联网软件应用与开发综述.doc

    首先,我们从Web开发的五个阶段开始: 1. **规划**:此阶段旨在确定项目的基本框架,包括设定时间表、确定项目目标、Web应用的目标、开发方法以及分配任务。规划还涉及风险评估,确保项目在启动前有明确的方向。 2...

    NativeApp开发与webapp开发.pdf

    Native App和Web App开发是移动应用开发的两个主要方向,它们分别代表了原生应用程序和基于Web技术的应用程序。原生应用程序(Native App)通常是指为特定平台(如iOS或Android)专门设计的应用程序,它们可以直接访问...

    用友NC二次开发指导手册

    - **详细说明**:NC支持多种开发模型,其中面向服务的架构(SOA)是一种常用的设计模式,它强调将复杂系统分解为多个独立的服务单元。此外,随着技术发展,越来越多的应用场景开始采用微服务架构来提升系统的灵活性和...

    shiro与web项目整合 技术架构基于SSM.zip

    本系列资料将带您从零基础开始,逐步掌握SSM的核心技术和最佳实践,助您在Java Web开发领域更上一层楼。 二、资料亮点 基础教程与练习项目:从基础知识讲起,结合实际练习项目,让您轻松上手SSM开发。 进阶技术与...

    一个基于SSM的模仿天猫商城的web项目.zip

    本系列资料将带您从零基础开始,逐步掌握SSM的核心技术和最佳实践,助您在Java Web开发领域更上一层楼。 二、资料亮点 基础教程与练习项目:从基础知识讲起,结合实际练习项目,让您轻松上手SSM开发。 进阶技术与...

    微信开发完整java项目基于SSM微信公众号项目开发SpringMyBatisSpringMVC.zip

    本系列资料将带您从零基础开始,逐步掌握SSM的核心技术和最佳实践,助您在Java Web开发领域更上一层楼。 二、资料亮点 基础教程与练习项目:从基础知识讲起,结合实际练习项目,让您轻松上手SSM开发。 进阶技术与...

    基于PHP的网上商城系统分析与设计.doc

    第五章“系统测试”描述了系统上线前的测试流程,包括测试目的、准则和方法,如单元测试和综合测试,确保每个功能模块都能正常运行。系统的维护主要包括数据备份、性能优化、安全防护和故障排查等方面。 总的来说,...

    基于SSM+Maven实现的web项目,并且集成了editor.md编辑器.zip

    本系列资料将带您从零基础开始,逐步掌握SSM的核心技术和最佳实践,助您在Java Web开发领域更上一层楼。 二、资料亮点 基础教程与练习项目:从基础知识讲起,结合实际练习项目,让您轻松上手SSM开发。 进阶技术与...

    webui2重构规范

    一、**基本准则** 1. **保持简洁**:重构应尽量减少冗余代码,避免复杂逻辑,使代码易于理解和修改。 2. **遵循DRY(Don't Repeat Yourself)原则**:尽量避免重复的代码,通过抽象和模块化提高代码复用性。 3. **...

    网站开发规范

    网站开发规范是一套指导网站开发过程中的实践标准和准则,旨在提高代码质量、简化维护工作并确保项目的可扩展性。该规范主要涵盖以下几个方面:.NET框架使用、C#编程、数据库设计与管理以及网站的前端开发。 ### 二...

Global site tag (gtag.js) - Google Analytics