网页设计应该如何布局

网站结构与优化很重要，页面布局也是非常重要的，让客户第一眼看到网站的感觉是怎么样，如果第一感觉不好，相信下一次就不一定来了，所以网页的内容除了用户的需求之外，还要注重用户体验。下面的内容，就以两个方面来讲，一个是搜索引擎的识别，一个是用户体验：

工具：电脑、网站

步骤：

一、搜索引擎的识别1、网站具有清晰的导航

根据网站的导航去制定需求。一个清晰明了的用户导航可以让游客在网站中自由的访问，并且根据需要选择合适的内容，而网站导航的加入也可以加大网友的访问深度。

2、页面整洁，栏目之间合理布局

之前看过一个做服装的网站，一进入这个网站就感觉到了皇宫一样，很华丽也很唯美，但是就找不到一点文字介绍，全部都是， *** 作起来很不方便，由于偶然进入了一个较深的页面(该网站没有面包屑导航)，找不到回去的路就只好关掉了页面，无形中就会这个网站的跳出率做出了贡献。

3、设置用户评论板块，增加网站互动性

不可否认的是，现在很多网站都过于独立，和用户之间的互动性不够，其实网站互动性的上升能大大提升网站自身的可信程度，尤其对于一个新站来说，知名度不够，号召力不强，用户是无法相信的。而这时用户的参与无疑就让网站自身的可信力大大上升，而且一个网站最成功莫过于有众多用户的参与，而评论无疑会让网站生命力更强。

二、以用户体验为前提1、页面元素的丰富性。

什么叫做页面元素的丰富性呢，就是网站有、有视频、有评论、有加粗、有分段这样可以说是一个优质的页面。当然要在适当的情况下出现、视频、或者其它的元素。这样也会增加页面的价值。

2、页面的文字大小要符合一般用户的阅读习惯。

不要太大，也不要太小，一般13号的字体就可以了。字体的颜色，也要和网页的风格协调，一般都是黑色或者深灰色。文章排版要鲜明，段落得当，这样更容易让客户阅读。还有文章内尽量少用锚文本，文章内的锚文本一般都是以用户的需求性和相关性来增加锚文本。尽量不要影响用户阅读。

3、页面要合适。

过多或者过大，过多或者过大，很直接的就影响了网页的加载速度，导致用户长时间打不开网页，那就悲剧了，所以，网页的大小和尽量少用围标，如果不可避免，那就把压缩到最小再上传吧。

总结：其实网页的布局，重要的就是细心，包括各个方面都要细心对待，页面上存在的每一个东西，都要有实际意义。

1
、纠正行高
最常见的网页布局错误之一是定义了不正确的行高。
行高是定义一行文本的高度，
所以
我们必须按照文本字体大小来设定行高。
一般来说，
在设置文本行高的时候，
我经常在字体大小的基础上加上
7
个像素
（对
12-17
像素的字体而言）
body{
font-size:14px;
line-height:21px; / 14px + 7px /
}
2
、纠正标题
margin
值
另外一个常见的错误是标题周围不正确的
margin
值。标题其实是与它下面的段落是相
关联的，
而不仅仅是两个段落的分
割符。
这就是为什么标题的
margin-top
比
margin-bottom
要宽。
3
、不要使用过多的字体
为了确保可读性和专业性，
你的网页上不应该使用超过
3
种字体。
使用过多的字体会干
扰你的用户而且让你的网站看起
来很乱。相反，较少的字体让你的网站显得干净易读。你
可以标题使用一种字体，正文使用一种字体，最后
logo
或副标题使用另外的字体。
4
、代码部分使用等宽字体
如果你是一位开发者
(
就像大部分读这篇博客的人
)
你可能想贴一些代码在你的博客里。
如果是这样，请使用等宽字体。
那么，什么是等宽字体？它就是字母和字符占相同水平宽
度的字体。
那么在网站的代码段你应该使用哪种字体呢？
到目前为止
Courier
字体是最流行的，
那么尝试一下最新的一些字体像
Consolas
或
Monaco
怎么样呢？
5
、关注对比
即使你的网站有很好的排版了，
另一个需要注意的是对比。
如果你的页面背景是中灰色

（
#999999
），那么不要使用深灰色（
#333333
）的文本，否则你的内容很难看清，尤其是对
一些年纪比较大的或视力差的人。
总之，
除非你的网站是关于黑客、
黑帽
seo
或哥特摇滚的，
不然你应该使用浅色背景和
深色字体来保证清晰的对比度增加你网站的可读性。
6
、只给链接的文本加下划线
在我上网的
12
年中，浏览器用在链接的默认样式一直是蓝色文本加下划线。虽然这个
蓝色经常被改成另外的颜色，
但下划线一直被当做是链接的常规样式。
这就是为什么除了链
接你不要给其他的东西加上下划线的原因。否则，这可能对你的用户造成很大的困惑。
7
、创建样式库
让你的网站产生视觉震撼的一个简单高效的方法是给特殊的页面创建特殊的样式。例
如，创建一个
warning
的
CSS
类来向
你的用户显示“警告”。
8
、按级别来排列标题和文本
为了增加可读性，
给标题、
介绍段落和常规文本创建标签层级是很重要的，
这样你的用
户可以看清你的文章结构并能很
快的找到他们感兴趣的部分。
9
、大胆留白
我认为最重要的排版技巧之一是
“大胆留白”。
留白是指空白区或没有使用的空间，它
会使你的设计整齐而专业。许多人
喜欢苹果网站的原因是：它尽管简单但很精致，而且有
很多留白。
10
、正确使用标点符号
如果你想提升你的排版水平不容忽视的一点是正确使用标点符号。
例如，
引号经常用双
撇符号代替
（译者注：
我想作者要表达的意思应该是全角符号和半角符号的区别，
就像中文
的引号和英文的引号不同一样）。

网站页面版式设计主要素主要有两个方面：一个是网站程序结构排版，一个是网站文章内容排版。

1、网站程序结构排版

以搜索引擎方便性和用户体验舒适性为中心!网站程序结构版子首要即是网站主页和网站内页。

网站主页，应当是悉数网站一切页面的毕竟导向。什么样的网站搜索引擎最爱？搜索引擎抓取页面是从左到右的，用户阅读习气亦是如此，所以主页的各个板块应当依照优先级从左上到右下排，一般我们用的网站开源程序大多数也是这么，帮我们排好了，我们要做的是设置优先级板块以及留意修改它的细节排版。

搜索引擎不收录新网站有哪些原因？首先主页中flash和图画尽量少，图画能alt注释就注释，现在很多公司做网站主页都是flash图画堆积，弄的漂漂亮亮。我们懂SEO的都知道，他们都白搭，这么的主页搜索引擎很不喜欢，不录入，录入了权重也低，关键字没排行，而且这么的站影响网站翻开速度，占用服务器本钱。哎~多少这种公司站还等着我们SEO去解救。

网站内页，有必要可以指向回主页，有导航，有其他板块文章调用模块，有最新文章等模块。一般现在的开源程序也都做了些这方面的工作，当然很多还是缺少，需要我们依据自己站的情况去调整。

2、网站文章内容排版

优化还需自身硬，网站SEO文章优化关键点，网站文章内容的排版也是要方便搜索引擎，方便用户。

标题，现在在网站建设中程序都直接加标签了，不用我们 *** 心，直接往编辑框里填。

文章正文内容，首要是合理使用加粗标签B以及合理期间，正文中心关键字首次出现加粗，期间总起的说明文字加粗，内容合理期间，从用户的阅读领会考虑。文章中的关键字合理均匀排布，遇到有关性内容可加内部连接指向有关页面。

反差

浅蓝色背景上的淡粉色文字，可能与你的T恤相配，但读起来不太好。文本存在以供阅读;确保它与实现这一目标的背景有足够的对比。如果你一直对对比度不确定，那就对你的页面进行屏幕转储，打开你的图像编辑软件，并将图像降到灰度。你很快就会看到你是否有足够的对比。

层次性

更改类型大小是区分内容的最佳方法之一。颜色和漂亮的方框可能会有帮助，但不同大小的字体，在整个页面中一致使用，会向读者发出响亮而清晰的信号，告诉读者页面元素的相对重要性。这也意味着，如果你的读者很匆忙，他们可以迅速挑选出重要的部分--这可能意味着他们停留更长时间并继续阅读。

空间

让你的类型呼吸。不要害怕在页面中留下空白。这负或白色空间将有助于将注意力集中在文本上--而这是最响亮的文本，所以让它被听到。接下来，请记住线高属性;一个好的经验法则是行间距，即至少140%的文本大小。好的类型设计师将大量的精力投入到位于字体内部的微型白色空间中。他们花了数不清的时间试图在黑色和它所包围的负面或空白之间取得平衡。同样，我们应该花时间考虑宏空白，即形成文本块的“空白”。

关于网页web设计应该如何排版，青藤小编就和您分享到这里了。如果您对页面排版、网站设计、图像处理等有浓厚的兴趣，希望这篇文章可以对您有所帮助。如果您还想了解更多关于平面设计的素材及技巧等内容，可以点击本站的其他文章进行学习。

以上是小编为大家分享的关于网页web设计应该如何排版的相关内容，更多信息可以关注环球青藤分享更多干货

---