网页的排版布局和原则

一.网页排版布局的步骤:

1.构思,并且有多个草稿进行粗略布局

2.将粗略布局精细化,具体化

3.修改

二.网页排版布局的原则

1.平衡性
   (1)文字、图像等要素的空间占用上分布均匀
   (2)色彩的平衡,要给人一种协调的感觉。

2.对称性
  对称是一种美,我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉,因此要适当地打破对称,制造一点变化。

3.对比性
  让不同的形态、色彩等元素相互对比,来形成鲜明的视觉效果。例如黑白对比,圆形与方形对比等,它们往往能够创造出富有变化的效果。

4.疏密度
  网页要做到疏密有度,即平常所说的“密不透风,疏可跑马”。不要整个网页一种样式,要适当进行留白,运用空格,改变行间距、字间距等制造一些变化的效果。
  
5.比例
  比例适当,这在布局当中非常重要,虽然不一定都要做到黄金分割,但比例一定要协调。

三.常见的布局样式:

  1.T字型
  最上方是广告条,页面下方左面是菜单,右面显示页面内容,整体上类似英文字母“T”,
所以我们称之为T字型布局。这种布局条理清晰、主次分明,非常适合初学者学习,但略微有点呆板。

  2.口字型
  这种布局类似一个方框,上下是广告条,左面是菜单,右面是友情链接,中间是网页内容,页面布局紧凑、信息丰富,但四面封闭,给人一种压抑的感觉。

  3.对称型
  整个网页呈上下或左右对称布局,非常醒目,如果两部分搭配协调,网页的视觉效果非常好,很有冲击力。

  4.海报型
  这种布局就像我们平时见到的海报一样,中间是一幅很醒目、设计非常精美的图片,周围点缀着一些图片和文字链接。这种设计常用于一些时尚类和公司的首页,非常吸引人。但大量的运用图片导致网页下载速度很慢,而且提供的信息量较少。

四。 总体我们需要掌握的有以下几种:

风格:网页新建时,需要定一下初步风格,整个网站风络统一,
字体:网页中一般字体为9pt或者12px。
背景:背景不能过于突出,背景图尽量简洁,不要过于复杂,这样使页面显的太乱。
颜色:整个页面颜色统一,和谐
图片:要求图片首先美观,另外格式正确,优化合理,最重要的是图片名不能为中文名。
兼容:网页的兼容性是为了让更多的浏览者进行浏览,提高网站的知名度。站点越复杂
(在布局、动画、多媒体内容和交互方面),跨浏览器兼容的可能性就越小。

注:转载http://www.douban.com/note/334059432/

时间: 2024-11-06 12:21:38

网页的排版布局和原则的相关文章

网页设计致胜关键点:合理的排版布局

  "摘要:想要在当前众多的网页设计中突显出来,合理的排版与布局,是网站设计师不容忽视的要点之一." 任何一个具有创意的网页设计方案,都会把目光聚焦在布局和色彩搭配上.这个餐饮o2o网站独特的地方,就是在用户界面上推出了各种吸引眼球的甜点冰淇淋.网站的排版布局比较简约大气,适当的留白,再加上一些美观的字体设计,让整体看起来更加时尚有活力.  网站设计有一个终极目标,介绍鼓励用户去点击.去操作.这些操作行为包括注册或者查询内容等.这样就要求设计师能够把登录注册按钮突显出来,让用户一下子就

html万能排版布局插件,web视图定位布局创意技术演示页

html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>web视图定位布局创意技术演示页</title> <meta content="width=device-width,initial-scale=1.0,m

网站制作之网页文字排版技巧

一套巧妙的网站布局设计,一些漂亮的颜色搭配,或者一个合适的网页文字排版,都在给每一位浏览网页的人留下一份美好的印象和舒适的感官享受,在商业化气息越来越浓重的今天,提高一个网站的个性及审美体验也不失为一种网站建设及推广的方法. 很多中小企业在网站建设初期,不太注重网站的运营及打理,网站发布的文章或者内容未进行合理的布局及排版,造成文字大小不合适,颜色不搭配,行高过大过小等等直接影响浏览体验的问题,针对这些问题,巩义网站建设公司提出以下一些建议: 一.文字的字体及大小        经常上网的朋友,

精通CSS.DIV网页样式与布局系列学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式 精通CSS.DIV网页样式与布局(四) ——页面背景 精通CSS.DIV网页样式与布局(三)——中秋效果图 精通CSS.DIV网页样式与布局(二)—— 段落 精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究

精通CSS+DIV网页样式与布局--图片效果

提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:     精通CSS+DIV网页样式与布局--初探CSS 精通CSS+DIV网页样式与布局--CSS文字效果 精通CSS

精通CSS+DIV网页样式与布局--初探CSS

CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."DIV+CSS&q

CSS+DIV网页样式与布局——文字样式&amp;段落(一)

一个网页要说最多的还是文字,上篇博客说CSS样式是一个网页的精髓,那网页中最直接表现出来的就是文字和图片,还有一些所谓的表单,首先先说最为熟悉和常用的文字.让CSS控制网页中的文字,使它不再那么枯燥平淡,从此网页文字变得绚丽多彩. 一.文字样式 文字样式主要包括文字的大小.颜色.字体等,具体包括如下 写一个小例子,综合运用上述所有的文字效果样式: 代码: <html> <head> <title>文字字体</title> <style> body

移动端网页 rem 自适应布局

(function(doc , win){var DocElement = doc.documentElement;var RsizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';function ResetSize(){var deviceWidth = DocElement.clientWidth;if(!deviceWidth){return false;}DocElement.style.fo

Type.js – 帮助你更好的控制网页字体排版

Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就可以用新的 CSS 属性了,就像编写任何其他的样式一样. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果