网页设计首页布局（网页设计首页布局实例）

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

创意岭作为行业内优秀企业，服务客户遍布全国，相关业务请拨打175-8598-2043，或微信：1454722008

本文目录:

• 1、网页布局结构有哪些？

• 2、如何从SEO的角度优化网站首页结构布局

• 3、如何利用表格布局网页首页

• 4、网页常见的布局样式

一、网页布局结构有哪些？

一、简介：布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。

二、网页布局有以下几种常见结构：

【1】“国字”型布局：

“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。

【2】T型布局

T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。

【3】标题正文型

标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。

【4】左右框架型布局

左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容 .

【5】上下框架型

上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。

【6】综合框架型

综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术。

【7】POP布局

POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。

【7】FLASH布局

FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。

二、如何从SEO的角度优化网站首页结构布局

如何从SEO的角度优化网站首页结构布局

任何一个网站，不管是个人网站、企业网站还是门户网站，建站之时首先要确定的就是网站的整体结构布局，一个好的网站结构布局会让搜索引擎蜘蛛更好的爬行，从而使网站得到更好更多的收录，进而提升网站的排名。那么，如何从SEO的角度优化网站首页结构布局呢？答案我已经为大家整理好了，请细心阅读下文吧~

众所周知，网站首页的布局对网站优化有着至关重要的作用，作为一名SEO站长，你心里应该都明白，在分析网站优化情况的时候，我们一般都是从百度蜘蛛的爬行轨迹来看，基本上都是从首页开始，就算蜘蛛是通过其他网站上的外链来到你的网站，那么百度蜘蛛在打开这个这个外链内容页之后，下一个跳转的页面往往是通过首页进行抓取，所以从这点上来看，首页设计显然极为关键。

要想提升网站的SEO优化效果，增加对百度蜘蛛的吸引力，首页的科学设计显然是其核心环节，那么从SEO优化的角度来看，如何才能优化网站首页结构布局呢?对此，马海祥认为可以从下面几个方面来着手：

1、网站语言的选择

现在计算机语言很多，网站语言的选择影响蜘蛛对网站的兴趣，而且普遍做网站的语言很多，比如.net、asp、php、html等，其实真正蜘蛛喜欢的语言就其中一个，那就是HTML，对于蜘蛛而言HTML语言也就是静态语言。

首先选择静态语言对于蜘蛛来说很安全，而且对于蜘蛛来说静态网站的结构不会很复杂，所以蜘蛛很喜欢爬行，对于其他语言是动态语言的都是很畏惧的，比如动态网站有蜘蛛陷阱等方法影响蜘蛛爬行，所以说蜘蛛爬行动态网站的时候首先要判断网站是否可信是否可以爬行，有没有危险行为，所以蜘蛛对动态网站很畏惧。

因此，马海祥还是建议大家做静态网站是最好的，而且静态网站对于蜘蛛来说还是很喜欢的，虽然静态网站比较麻烦，但是我们可以在静态网站后面嵌入一些开源的插件进行更新修改，这样不就方便多了。

2、网站主导航的设置

从百度蜘蛛的抓取路径来看，首选之地是网站的首页，而在首页上的首选之地就是首页上的导航栏目，所以导航栏目的覆盖范围广不广，对于网站能否被百度蜘蛛深度抓取就起到非常关键性的作用，而百度蜘蛛的抓取深度越高，那么对于提升网站权重的效果就会越大，由此可见提升导航栏目的覆盖广度就显得极为关键。

另外，有很多站长为了网站的美观就会用一些动态的JS脚本进行编写导航，其实这样是错误的，当蜘蛛爬行网站的时候只能识别代码和文字，对于JS虽然是代码，但是蜘蛛却无法识别的，这样一来网站导航的写法是很重要的。

对此，马海祥建议网站导航的写法可以写成HTML的，虽然难看一些没有什么效果，但是不至于降低用户体验度，所以马海祥还是不建议使用JS来做导航，做了导航蜘蛛也没法爬到也是没有用处。

3、尽可能的增加网站的二级导航

我们可以借助于搜索页面的二级导航为例，一般来说二级导航能够提供一些热门的内容，这样方便用户能够及时的打开，同样，马海祥认为这些热门的内容对于百度蜘蛛来说显然也是极为需求的，也是提升百度服务水平的关键性内容，所以无论从用户体验还是百度蜘蛛的需求来看，提供二级导航非常必要。

4、首页的栏目要突出重点，增强和网站的相关性

由于随着百度算法的不断革新，相关性被赋予了更加重要的意义，如果网站的首页栏目和网站的核心关键词的相关性相差巨大，那么对于网站的优化将会起到明显的负面作用。

比如一个做医疗的网站，网站的众多栏目却涉及到各种娱乐信息，这样就会让网站显得不伦不类，体现不出网站核心内容，自然难以提升网站的优化效果。

另外，首页上的栏目需要尽可能的采用列表的形式来进行罗列，这有助于百度蜘蛛非常轻松的爬行，同时也有助于及时更新网站上的最新动态内容，而内容的不断更新又会进一步刺激百度蜘蛛增加对网站的访问频度，最终对提升网站的权重将会起到非常关键性的作用。

5、网站中的banner设计

所谓的banner也就是广告，有很多站长也是为了网站美观就在网站导航下面加入一大张图片，然后做出来一些效果供别人看，其实马海祥很不赞同网站首页出现这么大的banner广告。

首先，网站banner占据网站首页相当大的地方;其次，网站banner出现的大张图片蜘蛛是无法识别的，所以对于蜘蛛而言你的图片虽然大，但是没有信息，所以也就影响不到蜘蛛，所以说你做的banner广告业就是没有用处，多此一举，所以马海祥还是建议有banner的网站全部咔嚓掉，免得后患无穷。

6、首页图片要尽可能起到画龙点睛的作用

对于图片都要通过设置ALT属性来帮助搜索引擎抓取，而且ALT属性上的文字要放在图片的下方，这样也能够提升用户的体验效果，因为从用户的角度上来看，文字在图片的下方更有利于视觉体验。

现在有很多网站都会有图片展示的栏目，当然我不是不赞同有这个栏目，有这个栏目是好的'，但是首页出现的图片一定要少，蜘蛛对于图片我说过了就是一串代码，蜘蛛是无法识别的，所以传在多的图片，蜘蛛无法识别也是不行的。

因此，马海祥建议对于网站首页最好少出现点图片，就像大型门户网站学习是最好的，图片在整体网站首页也就占据了5%左右，这样的结构是很好的，既不浪费资源也不浪费时间去处理图片，所以说这样是很好的，对于图片的分布也要学大型门户网站，把图片集结到一个栏目里面，这样给想看的人看个够，所以说这样的结构是很好的。

7、网站文章出现的位置

网站文章大家都知道是蜘蛛爬行收录的重要部分，所以网站文章一定要摆在显眼的地方，虽然最显眼的地方是首页了，但是我们可以把最新的网站安排出现在首页，这样的功能不难实现，只要在网站首页出现一个模块，把最新的新闻和企业信息安排出现在首页就可以了，这样的行为是可以让蜘蛛更容易爬行到网站的站内信息，并且对于新的信息蜘蛛是很看好的。

有的网站的文章不出现在首页，有的时候最新新闻蜘蛛不爬行就是因为首页没有明确到，这是因为蜘蛛不可能把你的网站整个都爬行，所以说为了蜘蛛可以每天都爬行，办法就是让文章出现在首页，这样的结构也是现在比较流行的一种。

8、网站空间中文件夹的复杂程度

蜘蛛是不可能网站整体都会爬行的，说到这里我不得不说在网站空间里面都会有各种不同名称的文件夹，文件夹中都是一些网站的页面，所以当蜘蛛爬行的时候都是顺着这些文件夹爬行的，在爬行中蜘蛛见到打开比较慢的地方就回跳过，不会无限制爬行的，而且蜘蛛爬行的时候看网站空间文件夹太过于复杂，蜘蛛就会感觉到不安全，并且认为你的网站有可能会损害蜘蛛，所以说蜘蛛就很有可能直接跳出网站。

这样一来蜘蛛以后很难在对你的网站爬行了，所以马海祥还是建议大家不要把网站空间的文件夹设置的太过于复杂，只要简简单单的，蜘蛛也爬行的好，也不影响用户体验，岂不是乐哉。

9、网站友情链接的位置安排

友情链接的好处不在于可以给您的网站带来多少直接的访问量，而在于它会让搜索引擎更多的收录您的网页，据调查显示，全球80%的网站，他们的访问量 70%-90%都是来自搜索引擎，因此，让搜索引擎收录更多的网页，就是提高网站访问量的最有效办法。

说到友情链接大家已经不陌生了，说起来友情链接也是站内结构一个比较重要部分，有很多网站都会把友情链接放在首页，其实这样是不对的，如果你的友情链接过多，搜索引擎蜘蛛爬行的时候会感觉你的网站有作弊的可能，而且对于你的网站加入链接太多的话，很有可能直接被K掉，从SEO的角度来说，理想状态下，最好把友情链接放在页内，这样是很安全了，单独开一个页面放友情链接。

10、网站上的flash或者js特效要放在html的body之后

因为打开flash以及js特效的时间相对比较长，如果放在首页的body中间，那么打开一个首页的时间就会延长，不利于整个网页的打开速度的提升，所以要在首页的栏目上通常要尽可能的减少使用js特效或者flash特效，如果需要有，那也要放在body之后，这样就不会影响到网站的打开速度，从而提升网站的体验度。

我点评：总而言之，网站的首页布局极为关键，在提升网站优化效果方面能够起到画龙点睛的作用，所以在进行网站首页优化时，一定要紧密结合网站的核心关键词，然后进行进一步的优化布局，从而最终实现网站权重以及排名的提升。

扩展：网站seo优化学习总结

一：初探搜索引擎原理

很多站长朋友可能认为搜索引擎原理一定很神秘，很深奥，其实只要找一些相关的seo优化教程，比如在a5站长站，就有很多涉及到有关搜索引擎原理的教程，写的都是比较通俗易懂的，无非是通过机器人围绕互联网抓取内容，然后进行索引，再把内容收录到自己的数据库里面，通过内容的质量，和物以类聚人以群分的原则，对于搜索的结果进行排名，从而让用户通过关键词的搜索，就能够找到更加符合用户需求的内容，这就是大概的基本原理，从这些方面了解这些原理对于网站的seo优化来说就已经足够了!

二：开始分析自己的网站和竞争对手

做网站seo优化，一定要同时分析自己的优势和竞争对手的优势，因为seo优化说白了，就是一种竞争的方法，谁的seo优化水平高，其竞争力就高，所以我们可以通过建设网站的技术比拼，内容更新比拼，网站外链建设比拼等等方面，全方位的分析自己和竞争对手，从而实现快速的超越竞争对手，让自己的网站排名获得更高一点!

不过在这一项的研究中，一定要注意不能够误入歧途，因为现在互联网上有了太多的诱惑，比如黑链诱惑，比如黑帽诱惑，虽然这些方法对于某些类型的网站而言，非常的合适，但是如果你要做一个正规的网站的话，那么选择这样的黑帽优化方法，往往会让自己后悔的，因为现在百度对于黑帽的优化方法比较的反感，这是因为黑帽优化方法，妨碍了百度提供更好的内容给用户，从而影响到自己的权威性，所以一定会严厉的打击，所以如果要想正儿八经的运营网站，最好的方法还是走白帽优化方法!

三：要不断的总结观测

在分析之后，自然就要操作，操作的效果如何，只有通过观察监测才能够体现出来，比如我们可以通过了解百度快照时间，百度内容收录，以及网站的外链数量等等，这些数据来看看自己的工作成果，现在这些工具很多网站都有，直接在线就可以，比如站长们常上的a5网站就有各种各样的seo优化的检测工具，利用这些工具的检测，发现在优化过程中的错误之处，及时的调整，这样才能够让自己的优化技术不断的上升，也能够让自己的网站排名逐步的提升!

随后就是当自己的网站排名搞上去了之后，也不能够掉以轻心，因为在seo优化方面，竞争力是非常强劲的，如果没有保持时刻战斗的精神，那是很容易让自己的网站排名被别人超越，当然，你可以参加歪歪6359的seo系统课程，系统的学习一下，才能比同行更有优势只有让自己的网站排名长期占据百度的首页或者第二页，才能够算作成功，如果只是在首页，稍微的亮一下相，然后就沦落到爪哇国里面，这样的seo优化能力是不敢恭维的。

三、如何利用表格布局网页首页

用我做网页的经验给你讲讲吧。

网页设计现有两种布局方法，一种即是表格布局，另一种是现在W3C极力推荐的CSS布局。不过，就目前来说，由于xhtml并未完全占据主流，表格布局依然是大多数网页设计师的首选。

你所描述的问题属于表格的对齐问题，解决方式有以下几种：

如果两个表格的宽度不一致，那么选择默认的对齐方式，也即左对齐，在html中的标签和属性是：<table

align="left"></table>就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式，例如居中对齐，而第二个表格并没有设置对齐方式，所以默认为左对齐，这样就出现了上述问题。

我的一些表格布局的经验：

1、表格布局第一步：先插入一个表格，宽度是760-780px（记住，一定要用px，不要用百分比），高度不用设置，然后令这个表格居中。以后所有的内容都限制在这个表格中。

2、熟练使用表格嵌套。也就是说，在一个表格中再插入另一个表格。举个例子，把你要设计的页面分成大的几个部分，然后利用表格的行数和列数来控制它们的布局，如果某一个单元格中的内容又要分成几部分，可以继续在这个单元格中插入表格，方法同上。

3、补充：表格的边框一定要为0，即table中的border属性值为"0"。也就是让表格在网页预览中不可见，这样才能实现表格布局的目的。

还有什么，想起来的就这些。有什么问题可以再问。

四、网页常见的布局样式

网页常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。 1.“国”字形布局 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 2.“匡”字形布局 这种结构与上一种其实只是形式上的区别，它去掉了“国”字形布局的最右边的部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。 3.“三”字形布局 这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。如图所示即是一种三字形布局的网页。 4.“川”字形布局 整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。如图1-19所示的“Beijing 2008”网站就是一种川字形的布局。 5.海报型布局 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。 6.Flash布局 这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。 7.标题文本型布局 标题文本型布局是指页面内容以文本为主，这种类型页面最上面往往是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这一类。 8.框架型布局 采用框架布局结构，常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局目前专业设计人员采用的已不多，不过在一些大型论坛上还是比较受青睐的，有些企业网站也有应用。

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

推荐阅读：

网页编辑工具有哪些（网页编辑工具有哪些类型）

网页设计师学历要求（网页设计师学历要求多少）

快手怎么网页授权登录（快手怎么网页授权登录呢）

如何设置自定义图标（vivo手机如何设置自定义图标）

中国饺子云吞十大排名（饺子云吞品牌）