`

国际:Web开发设计的五大准则

    博客分类:
  • css
阅读更多
  【CSDN 12月13日消息】国际 如果仓促而为,设计一个专题或者网站一定会成为恶梦。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设计进程 <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` 进行...

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

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

    web前端开发规范参考文档

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

    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 目标和问题 ...

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

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

    用友NC二次开发指导手册

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

    NativeApp开发与webapp开发.pdf

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

    webui2重构规范

    **WebUI2重构规范** 在前端开发中,重构是一个至关重要的环节,它旨在提升代码质量、可维护性和可扩展性。WebUI2重构规范旨在为开发者提供一套清晰、一致的指导原则,确保项目的稳定性和效率。以下是根据标题、描述...

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

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

    网站开发规范

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

    简单的记账系统:使用Maven作为项目管理,SSM(Spring,SpringMVC,MyBatis)开发框架。.zip

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

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

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

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

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

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

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

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

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

Global site tag (gtag.js) - Google Analytics