什么是网页结构布局

大家好！今天让创意岭的小编来大家介绍下关于什么是网页结构布局的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解SEO相关业务请拨打电话175-8598-2043，或添加微信：1454722008

本文目录:

• 1、网站建设页面结构都有哪些

• 2、网页布局方法

• 3、常见的网站版面布局:T结构布局，口型布局，对称对比布局，POP布局，国型布局，标题正文型布局，变化

• 4、在网页制作中经常使用什么来讲行网页布局

一、网站建设页面结构都有哪些

最近看了好多关于网站运营以及网站结构布局的书籍，书里系统地介绍了网站结构的相关理论及方法，深受启发。今天，悟空将结合书里面的精华，再加上自己以往积累的经验，全方面的总结整理网站结构布局的相关知识，帮助一些小白快速掌握SEO基础知识。

做好网站布局，需要考虑五个方面，并按顺序依次实现。五个方面分别为：

• 为什么对网站结构进行布局呢？

• 网站导航以及目录结构

• 网站目录META标签

• 网站合理清晰的URL结构

• 网站地图以及标签布局

一、为什么对网站结构进行布局呢？

1.良好的网站结构有利于百度spider收录

对于新站来说，SEO很容易忽略网站结构布局，网站目录层级乱而深，导致百度爬取困难，产生大量死链。其实对于百度搜索引擎来说，只要结构合理、有逻辑性、内容有规律可循都可以，都是友好的。

2.良好的网站结构，防止产生重复内容URL非标准化，经常产生同一个内容页面，产生多个URL链接，促使百度爬取识别不出哪一个才是真正的页面。对于SEO而言，这是致命的错误。

3.良好的网站结构设计，有利于提高用户体验清晰的网站结构，可以让用户快速找到自己想要的内容，吸引用户浏览，增加页面停留时间，降低跳出率。



二、网站导航以及目录结构

一个清晰的导航会很大的提升用户的体验度，同时搜索引擎也更喜欢。导航尽可能用最简单的HTML导航，层级一目了然。面包屑导航可以使结构复杂庞大的大中型网站变得清晰轻盈，在spider进行页面解析时会着重查看面包屑导航内容，强烈建议使用。

网站目录结构：一说到网站结构，大家都会提到扁平结构和树型结构，言必称“结构扁平化”，这些指的是物理结构，即基于内容聚合的目录及文件位置决定的结构。

对于一个网站来说，网页仅仅可以通过首页——目录1——目录2一层一层follow到是远远不够的，一个优秀的链接结构应该是网状的。

1）首页链接应该链向重要的频道页，频道页再链向下面的节点页或普通页面。同时，频道页、节点页和普通页面都应该可以链回到首页

2）无论哪些页面之间互相链接，都需要一个描述恰当的锚文本

3）链接不要放在JS、FLASH等搜索引擎不可见的位置，使用图片做链接入口应该完善alt标签 *百度搜索引擎目前仅支持对部分JS和FLASH进行解析，绝大多数放在JS和FLASH里的链接都是获取不到的

4）为重要页面留更多入口。百度搜索引擎认为，获得更多内部投票的网页相对来说更加重要

5）“离首页越近”的网页，越容易受到百度重视。这个“近”指的是页面离首页的点击距离。即使URL所在目录层级较深，只要在首页有入口，百度也认为这是一个非常重要的页面。

6）不要产生可怕的孤岛页面。虽然百度在提交入口、社会化挖掘方面做了许多工作，但链接抓取依然是百度获得新页面的最重要渠道。

三、网站目录META标签

网站目录结构布局结束之后，要对每个目录进行meta标签布局，促进百度蜘蛛对这个目录层级的认知。

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。meta标签包含：“title、keywords、description”

举例说明：

<title>悟空笔记-|学运营推广，上悟空笔记！

</title><meta name=”keywords” content=”悟空笔记,运营推广,seo优化,运营笔记,运营知识”>

<meta name=”description” content=”悟空笔记，一个旨在运营知识经验分享的平台。网站分享运营推广、新媒体运营、seo优化、sem竞价等实战经验，同时为广大站长提供一个分享、交流、学习的平台。”>



请点击输入图片描述

四、网站合理清晰的URL结构

网站合理清晰的URL结构，不仅可以更好地组织网站结构，还有助于搜索引擎更有效地抓取文件。虽然搜索引擎能够抓取复杂的URL，但提供相对简单的URL，对于用户和搜索引擎来说都是有帮助的。

优化URL结构的主要方法：

1.网站自始至终都使用一个URL地址，不要来回变更地址，如果用带www的域名地址，则将不带www的域名使用301重定向技术重定向到主要地址，避免使用大小写字母的URL，网站的URL尽量使用静态URL，避免使用动态URL，URL越短越好，URL的内容使用拼音或者英文最好，方便记忆。

2.根据自己的网站，设置网站层级，比如想做一个标签页面，可以设置成http://www.wukongbiji.com/tag，要是更新网站内容在TAG页面时，可以直接设置标签。这样不管是对spider还是对用户都可以清楚的了解该页面是做什么的。

五、网站地图以及标签布局

1、Sitemap

Sitemap，可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页，现在可以直接在站长后台，直接提交自己的更新的内容链接，搜索引擎就再也不用派出那么多爬虫辛辛苦苦的到处乱窜了，任何一个站点，只要有更新，便会自动“通知”搜索引擎，方便搜索引擎进行索引。Sitemaps文件通常是XML格式的，制作方式，可以使用aizhan工具包，直接爬取网站链接。

2、301标签以及canonical标签

如果存在多个页面，比如主域名、www域名、m域名，建议可以直接使用301跳转或者canonical标注分类页，这样避免权重分散。

3、404页面

404页面是客户端在浏览网页时，服务器无法正常提供信息，或是服务器无法回应，且不知道原因所返回的页面。建议一定要制作404页面，避免出现死链，导致百度spider不再爬取网站。



关于网站目录的细节指南

1、各个目录的首页之间有互联，如：悟空诉说，悟空主站在各个网站页脚上都有互联。

2、每个目录下的内容页面，要以锚文本互联起来。

3、不同目录的内容页面，如果目录结构差很多，比如bbs结构和blog结构，那么他们之间的内容尽量不要互联，而是让他们独立分开。

4、不同目录的内容页面，如果内容差很多，也让他们独立隔开，不要过多的互串。

5、对于单目录(都在一级目录下)的网站，同样也要考虑目录的内容分类。比如，内容管理系统(CMS)每个内容进行认真分类。但这里每个内容页面可以互联起来，因为结构一致，内容相近。

6、如果网站要上新的内容，最好开一个新的二级目录。记住，内容的有序分类是很重要的。

二、网页布局方法

众所周知，屏幕的尺寸千差万别。在考虑网页布局时，主要考虑：

同时，网页布局还应该综合考虑设计和实现上的问题：

虽然屏幕宽度、高度、宽高比千差万别。但是网页的组织方式基本上是以宽度适配，高度延伸为主。

当然，也有部分网页是需要考虑高度适配的，如视频网站的全屏播放。

这里主要讨论的是宽度适配。高度适配可以做类似处理，在这里就不做赘述。

网页基础的布局主要有三种： 静态布局、流失布局、弹性布局 。

静态布局

静态布局采用像素（px）作为页面设计的单位。在不同的显示宽度下，页面元素大小都是固定的。

流式布局

流式布局以百分比设定页面宽度，当显示区域变化时，页面布局会等比的发生改变。

流式布局强调的是适应屏幕宽度的变化。在实际应用中，经常是设置成宽度适应，而高度不变。当页面变大时，页面布局相当于被横向拉宽了。

弹性布局

弹性布局采用rem/em等相对单位，rem/em是相对的单位会随着屏幕变化而变化。

弹性布局更强调的是在不同的条件下，显示内容除了大小不一样，其布局是一致的。也就是说，弹性布局会宽度和高度都等比放大。当页面变大时，整个页面等比放大了。

假设有两个屏幕尺寸，一个是640px，一个是1080px。有个元素在640px页面下的尺寸是64px。

如果是静态布局，在640px屏幕下，元素被设置为64px。到了1080px屏幕下，依然是64px。元素的大小不变。

如果是流式布局，页面元素会被设置成640px屏幕宽度的10%。在1080px屏幕下，10%的长度变成了1080px * 10% = 108px了。元素大小随着屏幕变大了。

如果是弹性布局，假设在640px的屏幕下，设置1rem = 16px，那么 64px即为4rem大小。在1080px的屏幕下，设置1rem = 27px，4rem的大小变成了 4 * 27 = 108px。元素大小也随着屏幕变大了。

静态布局

静态布局没办法响应页面的变化，这个是优点也是缺点。

缺点是当屏幕变大时，会出现空白区域。当屏幕变小时，需要通过滚动条来浏览页面内容。

优点则是因为静态页面可以在任何条件下都按页面的设计进行显示，其适配性的问题最少，实现工作量最小。

实际上，目前很多大型的网站都是采用静态布局的。就是看中了其广泛的适配性，几乎不存在什么适配性问题，任何用户在任何条件下打开页面都显示的都是一样的。

虽然说屏幕尺寸种类繁多，但是在一定程度上屏幕宽度大体还是在一个范围之内的。应用静态布局时，可以适当放弃适配一些市场占有率很少的小屏幕显示器。

流式布局

流式布局大部分都是采用宽度适配，固定高度的方式。也就是说，页面此次被横向拉长或缩小了。

这样做的优点是页面可以适配屏幕的宽度，可以充分利用屏幕的面积，不至于出现大量空白的情况。

其缺点是，当屏幕过于宽时，页面会被拉得宽，整体显得不太协调。当屏幕过于窄时，页面会被缩得很小，部分元素的显示会出现问题。

为了规避这个问题，在实际应该上。一般会设置一个最大和最小适配宽度。当屏幕超过了最大最小宽度时，页面将不再适配屏幕。

弹性布局

弹性布局采用的是宽度和高度同时放大的方式，力求让页面在不同屏幕下在布局上是一致的。

弹性布局兼顾了静态布局和流式布局的优点，一方面其可以适配屏幕的变化，另一方面不会导致页面被横向拉宽导致比例不协调，在一定程度上保证页面布局和原设计一致。

但是这么做也带来了新的问题，页面加大会导致部分元素被拉伸，特别是图片元素，会导致失真。

所以弹性布局经常也采用了和流式布局一样的方式，设置最大最小响应尺寸，超过这个尺寸则不继续响应。

同时，针对图片失真问题，可以通过上传多个尺寸的图片进行解决。不同的屏幕尺寸响应不同的图片。不过因此也会带来了大量的维护工作，需要权衡。

由于静态布局特点，一般下列情况下会采用静态布局：

流式布局比较适用于文字型的页面。在流式布局中，虽然文字大小不会变化，但是文字段落仅需要改变换行就可以跟着宽度变化而变化。

如果屏幕尺寸变化不大，则可以考虑采用弹性布局的方式。既可以适配，又不改变页面的布局。

事实上，也有一些页面采用了几种不同的布局方式。例如，采用静态布局的侧边栏，而采用流式布局的主区域。

上文也讨论了流式布局和弹性布局不适合对尺寸跨度过大的屏幕进行适配。所以，基本上也都采用了限制最大最小适配尺寸，在适配范围内则采用流式布局或弹性布局进行适配。超过了适配范围，则变成静态布局的方式，不再响应屏幕的变化。

上面讨论的几种网页的基础布局一定程度上解决了页面适配的问题。但是随着显示终端的发展，出现了平板电脑、移动设备等屏幕。这些设备出现加大了屏幕尺寸的跨度。而上面讨论的几种网页布局恰恰是不支持屏幕尺寸跨度太大的情况的。

相比之下，自适应布局和响应式布局更能解决屏幕跨度过大的问题。

自适应布局

自适应布局为不同尺寸的屏幕准备多套方案，根据不同的屏幕尺寸确定一套显示方案。具体到每一套方案，则可以用上述几种基础的网页布局进行适配。可以看成是一系列的基础布局组成的一套方案。

一般自适应布局会设计宽屏、窄屏、移动端等几套适配方案，然后设定屏幕适配的范围。具体显示时，会根据屏幕尺寸匹配适配范围，选定其中的一套方案进行显示。

但是自适应布局一般情况下不会改变页面的结构。当页面缩小时，会选择缩小、替换、隐藏掉一些横向的页面元素，以达到适配的目的。有一些常见的处理方法：

响应式布局

响应式布局则是设置一套方案，通过调整行列的显示进行适配。当屏幕较大时，各个元素显示成一行，当屏幕变小时，转换转化成以列进行显示。

响应式布局因为需要换行来适配屏幕。所以其在页面缩小的过程中，页面布局会做改变。当页面缩小时，页面会先以流式布局或弹性布局的方式进行缩小，直至页面宽度再也无法适配时，横向显示的元素换行成纵向显示。

自适应布局

自适应布局需要设计是一系列页面布局。所以，在设计和实现上需要更多时间。

但是，因为其可以针对不同屏幕设计不同方案，方案之间相对独立。其限制较少和自由度却是比较高的。

但是注意，自适应并非几套完全不同的方案的组合，一般情况下，其主体部分是一致的。只是对部分横向的元素进行独立设计。

响应式布局

响应式布局只需要一个页面布局即可完成屏幕适配，其实现工作量比较小。但是，因为需要用一套方案适配所有屏幕尺寸。所以，在设计上需要考虑的因素比较多。

总的来说，自适应布局适用于较为复杂的页面，而响应式布局适用于页面结构简单的页面。

因为移动端和PC端的巨大差异，包括屏幕尺寸和操作方式都不尽相同。还有一种解决方案将各个端的页面单独进行设计。

这种方案优点是各个显示端可以自由的根据自身情况进行设计，从而设计出专门针对各个显示端的方案。这无疑给设计师和用户体验带来了巨大的好处。

但是这种方案带来了成倍的设计和实现工作量。同时，在产品投入使用后需要两套人马分别维护其内容。

如果您有如下的情况，可以考虑使用移动端和PC端分离的设计：

写在最后

并没有十全十美的方案，根据自身情况进行选择才是硬道理。

作为设计者，千万不要忘记了后期技术的实现、测试，运营人员的维护等工作量。同时也不要忘记了项目后期的迭代的难度。一句话，选择适合的才是最重要的。

要知道，看似很土的静态布局到现在仍然有大量的应用。千万不要做过度的设计。

三、常见的网站版面布局:T结构布局，口型布局，对称对比布局，POP布局，国型布局，标题正文型布局，变化

T结构布局

上左右，左下，右下

口型布局

上下。

左，右，中。

对称对比布局

左右或者上下

POP布局

中

国型布局

上左右

左右中

标题正文型布局

上，下

变化布局

上框架，左框架，下框架

四、在网页制作中经常使用什么来讲行网页布局

网页制作中常使用的网页布局类型主要有：

1. “国”字型: 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种网页布局类型。

2. 拐角型: 这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的页面布局是最上面是标题及广告，左侧是导航链接。

3. 标题正文型: 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

4. 左右框架型: 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，很多企业网站的内页也常采用。这种类型结构非常清晰，一目了然。

5. 上下框架型: 与上面类似，区别仅仅在于是一种上下分为两页的框架。

6. 综合框架型: 上面两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

7. 封面型: 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在品牌企业网站和个人主页，如果说处理得好，能给人带来赏心悦目的感受。

8. Flash型: 其实这与封面型结构是类似的，只是这种类型采用了Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

总结：网页布局现在常用的布局和页面设计方法是DIV+CSS，DIV+CSS结构清晰，很容易被搜索引擎搜索到，天生就是适合优化seo，降低网页大小，让网页体积变得更小。

以上就是关于什么是网页结构布局相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

别墅景观设计的基本原则（别墅景观设计的基本原则是什么）

全网seo是什么意思

浙江省杭州市有什么厂（浙江省杭州市有什么厂子招工）

杭州函授本科大学有哪些（杭州函授本科大学有哪些专业）

婴儿d3品牌排行榜（d3的作用和功效与作用）