【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文档来满足所有浏览器是不可能的。【呐不喊】
分享到:
相关推荐
中国大学生计算机设计大赛软件应用与开发类的评比标准旨在激励大学生提升计算机专业技能,培养他们的创新创业能力。比赛的公平性和规范性是确保活动顺利进行的关键,因此制定了详细的评分准则。 一、作品分类 参赛...
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设计进程 <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 目标和问题 ...
例如,Struts 是一个流行的开源Web框架,适用于基于Web的应用程序。在没有特殊需求的情况下,使用此类现有框架可以节省大量时间和精力。 #### 六、合理使用调试工具 在开发过程中,使用 `System.out.println` 进行...
5. **遵循视觉设计原理**:包括页面外观、页面结构等方面的设计准则。 #### 二、页面外观与结构 **页面类型**:包括普通页面、宽带页面、自适应页面和其他页面。 - **普通页面**:宽度为750px,背景白色,适用于...
### Web前端开发规范知识点 #### 一、规范目的概述 本文档的核心目的是为了提升团队协作效率,确保代码质量,以及建立一套统一的编码风格规范。规范文档一经确认,所有前端开发人员都应按照该规范执行前台页面开发...
### QTP自动化测试框架设计参考准则详解 #### 一、引言 自动化测试框架的设计是软件测试中的一个重要组成部分,尤其在QTP(Quick Test Professional)这样的自动化测试工具中更是如此。一个良好的自动化测试框架...
- **详细说明**:NC支持多种开发模型,其中面向服务的架构(SOA)是一种常用的设计模式,它强调将复杂系统分解为多个独立的服务单元。此外,随着技术发展,越来越多的应用场景开始采用微服务架构来提升系统的灵活性和...
Native App和Web App开发是移动应用开发的两个主要方向,它们分别代表了原生应用程序和基于Web技术的应用程序。原生应用程序(Native App)通常是指为特定平台(如iOS或Android)专门设计的应用程序,它们可以直接访问...
**WebUI2重构规范** 在前端开发中,重构是一个至关重要的环节,它旨在提升代码质量、可维护性和可扩展性。WebUI2重构规范旨在为开发者提供一套清晰、一致的指导原则,确保项目的稳定性和效率。以下是根据标题、描述...
首先,我们从Web开发的五个阶段开始: 1. **规划**:此阶段旨在确定项目的基本框架,包括设定时间表、确定项目目标、Web应用的目标、开发方法以及分配任务。规划还涉及风险评估,确保项目在启动前有明确的方向。 2...
网站开发规范是一套指导网站开发过程中的实践标准和准则,旨在提高代码质量、简化维护工作并确保项目的可扩展性。该规范主要涵盖以下几个方面:.NET框架使用、C#编程、数据库设计与管理以及网站的前端开发。 ### 二...
本系列资料将带您从零基础开始,逐步掌握SSM的核心技术和最佳实践,助您在Java Web开发领域更上一层楼。 二、资料亮点 基础教程与练习项目:从基础知识讲起,结合实际练习项目,让您轻松上手SSM开发。 进阶技术与...
本系列资料将带您从零基础开始,逐步掌握SSM的核心技术和最佳实践,助您在Java Web开发领域更上一层楼。 二、资料亮点 基础教程与练习项目:从基础知识讲起,结合实际练习项目,让您轻松上手SSM开发。 进阶技术与...
本系列资料将带您从零基础开始,逐步掌握SSM的核心技术和最佳实践,助您在Java Web开发领域更上一层楼。 二、资料亮点 基础教程与练习项目:从基础知识讲起,结合实际练习项目,让您轻松上手SSM开发。 进阶技术与...
本系列资料将带您从零基础开始,逐步掌握SSM的核心技术和最佳实践,助您在Java Web开发领域更上一层楼。 二、资料亮点 基础教程与练习项目:从基础知识讲起,结合实际练习项目,让您轻松上手SSM开发。 进阶技术与...
本系列资料将带您从零基础开始,逐步掌握SSM的核心技术和最佳实践,助您在Java Web开发领域更上一层楼。 二、资料亮点 基础教程与练习项目:从基础知识讲起,结合实际练习项目,让您轻松上手SSM开发。 进阶技术与...
本系列资料将带您从零基础开始,逐步掌握SSM的核心技术和最佳实践,助您在Java Web开发领域更上一层楼。 二、资料亮点 基础教程与练习项目:从基础知识讲起,结合实际练习项目,让您轻松上手SSM开发。 进阶技术与...