四点网页版面设计(布局设计)的方法和技巧

  网站版面设计也可以理解为布局设计,版面就是在浏览器上显示的一个完整的页面,它是网站设计的重要内容。网站与用户的交互就是通过一个个页面来实现的,每个页面通常都包含了文字、表格、图像、动画、链接等诸多要素。

  从表面上看,网页版面设计是一种关于排版的学问,而实际上,它不仅是一种技能,更是技术与艺术的高度统一。

  网页版面设计的方法和技巧主要有以下几点:

  (1)简洁。简洁是网页版面设计的最重要的原则。网页设计的主要目的是为了进行信息的交流,因此使浏览者更方便使用信息是十分重要的,除此以外其他的都处于从属地位。尽管浏览者可能会被美丽的图片和精致的动画所吸引,但是只有当网页的内容易于访问且有一定的使用价值时,他们才会经常性地访问。例如,Google、百度等网站就非常简洁、高效。

  (2)要有主色调。一个网站应该有自己的主色调,并体现在每一个网页中。颜色过于繁多的网页会使浏览者感到厌烦。一般来说,网页的颜色搭配最好不超过5种,以其中一种为主色调,居主导地位,其他色彩只是作为衬托和点缀。常见的标准色彩有蓝色、黄/橙色、黑/灰/白色三大系列。

  (3)注意字体的设置。网页字体的设置一般不要超过3种,因为字体太多就会显得杂乱,没有主题。另外,尽量不要使用太大的文字,这样可以给浏览者提供更多的信息,不停闪烁的文字也最好不要使用,因为它会给浏览者带来不舒服的感觉。需要注意的是,标题的字体应尽可能地比正文大些,颜色上也应有所区别。

  (4)视觉效果要好。视觉效果对于网页来说是非常重要的成分,它主要体现在网页结构与排版上。好的设计者都追求良好的网页结构和排版,经过对许多成功网页的分析发现,除了网页上面的标题部分和下面的结尾部分外,网页中间的主体部分一般都采用1:2,2:1或1:2:1的结构,这是最流行、最常见的网页结构方式,因为它可以有条理地、方便地组织网页的信息。当然只要能够合理地组织信息、方便交流,也可以采用其他更为灵活多变的结构方式。

  我们通过网页版面布局设计,寻找最佳的浏览方式,将这些要素有机地整合和分布在页面上,给浏览者以最佳的视觉效果和使用效果,用户体验度也随之上升,当然网站的权重也就提高了。

  本文由李孝利服饰http://www.jlwei.com投稿于A5论坛,转载请保留链接!

时间: 2024-10-27 21:06:02

四点网页版面设计(布局设计)的方法和技巧的相关文章

DIV+CSS网页布局常用的方法与技巧

css|技巧|网页 CSS布局常用的方法 float:none|left|right 取值: none:默认值.对象不飘浮 left:文本流向对象的右边 right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml代码: Example Source Code <div id="wrap"> <div id="column1">这里是第一列</div> <div id="column2&qu

实例讲解:DIV CSS网页布局常用的方法和技巧

css|技巧|网页 CSS布局常用的方法float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边  它是怎样工作的,看个一行两列的例子 xhtml代码:<div id="wrap"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列</div>

JavaScript实现更改网页背景与字体颜色的方法_javascript技巧

本文实例讲述了JavaScript实现更改网页背景与字体颜色的方法.分享给大家供大家参考.具体分析如下: JavaScript,通过点击按钮更改网页背景与字体的颜色,网页中有N个改变颜色的按钮,点击不同的按钮,网页的字体与背景就会改变成不同的颜色.很简单的JavaScript小程序. 一.基本目标 一打开网页首先提示问候信息"你好" 网页中有N个改变颜色的按钮,其中返回是返回网页的默认颜色,背景是白的,字体是黑的 点击不同的按钮,网页的字体与背景就会改变成不同的颜色. 本来想做出彩虹起

JavaScript获取当前网页标题(title)的方法_javascript技巧

本文实例讲述了JavaScript获取当前网页标题(title)的方法.分享给大家供大家参考.具体如下: JS中的document.title可以获取当前网页的标题 <!DOCTYPE html> <html> <head> <title>jb51.net</title> </head> <body> current document's title is: <script> document.write(do

js获取及修改网页背景色和字体色的方法_javascript技巧

本文实例讲述了js获取及修改网页背景色和字体色的方法.分享给大家供大家参考,具体如下: 获得网页的背景色和字体颜色,方法如下: 思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 : 代码如下: 复制代码 代码如下: var rgb = document.getElementById('color').style.backgroundColor; 得到格式如下: rgb(225, 22, 23); 然后进行拆分: 代码如下

js实现网页随机切换背景图片的方法_javascript技巧

本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

JS实现在网页中弹出一个输入框的方法_javascript技巧

本文实例讲述了JS实现在网页中弹出一个输入框的方法.分享给大家供大家参考.具体分析如下: 习惯了使用早期给电脑文件夹设置密码的朋友一定还记得那种弹出一个输入框,然后让你输入密码在登录查看的效果吧,这个JS代码就是实现这个在当前页面中弹出一个输入框,当然你可以输入任何东西 <html> <head> <title>js输入对话框</title> </head> <body> <script language="javas

JavaScript获取网页支持表单字符集的方法_javascript技巧

本文实例讲述了JavaScript获取网页支持表单字符集的方法.分享给大家供大家参考.具体如下: JavaScript获取网页支持表单的字符集可通过表单的acceptCharset方法获得 <!DOCTYPE html> <html> <body> <form id="frm1" accept-charset="ISO-8859-1"> First name: <input type="text&quo

Js实现网页键盘控制翻页的方法_javascript技巧

本文实例讲述了Js实现网页键盘控制翻页的方法.分享给大家供大家参考.具体实现方法如下: 键盘控制翻页效果我想我们不少见了,经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了,原理很简单,只要利用js监测用户是否有按上下键即可实现. 举例如下: 复制代码 代码如下: <a id="last" href="<?=$lefturl?>">上一章</a> <a id="booklist" hre