网站页面布局结构该怎么写

这一步很多时候可以省略掉，因为很多站都是设计好以后再去做SEO的

不过很多程序员或美工不太懂SEO，因此SEOer接手网站后还得去修改代码

典型的就是企业站大量使用表格的问题，往往也是非常头疼

除非你比较精通DIV+CSS，不然还是找专业人士修改代码吧，值得注意的是SEO部门如何与技术部门配合好

第二步，了解行业和产品(选择好关键词)不少SEOer为了SEO而SEO，殊不知在不了解某一行业和产品的情况下，即便你的网站SEO做的很牛

但是没有转化率，无法卖掉产品

导致网站没有盈利，这样SEO做的再好也是枉然

对于英文站来说，推荐使用GoogleAdWordsKeywordTool关键词工具

不过也不能完全依赖于工具

这些关键词选择好后要整理成excel文件，方便记录

第三步，做好内容和关键词布局(包括站内内链建设)内容是网站的基石，虽然说原创的内容有助于提高网站的权重，但是不一定就是用户喜欢的

有时候即便是伪原创的文章，只要是用户喜欢的，就是好内容

产品网站最根本的是用户体验和转化率

关于关键词的布局，我一直遵循“四处一词”的原则：1、当前页面的标题上出现这个关键词

2、当前页面关键词标签、描述标签里出现这个关键词

3、当前页面的内容里，多次出现这个关键词，并在第一次出现时，加粗

4、其他页面的锚文本里，出现这个关键词

第四步，有计划的做好网站外链建设我建议用最简单有效的方式：换外链资源，多认识几个同行，然后去和他们换些资源，当然都是纯手工发的外链资源

国外的博客资源比较丰富，比如：wordpress、ELGG等

1）像<span>这样的行内标记，定义它的margin-top和margin-bottom是无效的，除非你把它设置为块状元素才可以。Display:block
2）对于块状元素，你可以自由的使用外边距来定义版式和元素之间的距离。类似 DIV 等等，
3）无论什么元素，一旦设置为是浮动显示，就拥有了完整的盒模型结构，我们就可以使用外边距，内边距，边框，高和宽来控制的大小以及与其他对象之间的位置关系。
4）浮动是从网页布局的角度来定义元素的显示，而行内和块状属性主要是从元素自身的性质来定其显示的。
5）当元素没有定义边框时，可以把内边距作为外边距使用。有时候外边距会有重叠现象的。
6）当为元素定义背景图像时，内边距区域内可以显示背景图像，而对外边距区域来说，背景图像是达不到的，他永远都是透明状态
7）用div+css设计网页结构时，设计师满脑子都是网页内容，而非内容所呈现的效果。
8）块状元素：不管块状元素宽度是多少，他总会自动占据一行，因为在他末尾附加了一个换行符，而行内元素没有这个特点。块状元素有完整的盒模型结构，可以定义宽度和高度，而行内元素没有这个特性，无法通过高度来改变文本行的行高。
块元素的代表标记 div
行内元素的代表标记 span ，行内标记不具备组织结构框架
9）网页布局分为：自然布局，浮动布局， 定位布局
10）当一个元素被定义为浮动显示时，即定义为块状元素。并且该元素就会收缩自身体积为最小状态。所以，应该有个好的习惯即把浮动元素设置高和宽。如果没有设置，则元素会按照它所包含的内容大小来确定它的大小。
11）当元素浮动后，周边的对象会自动环绕浮动元素周围，形成一种环绕关系。
12）块状元素之间的外边距会有重叠现象，但是浮动元素之间的外边距不会发声重叠现象。
13）浮动元素移动，上移：margin-top:-; 下移：margin-botom:-px,其他以此类推。
14）一般定位元素（绝对或是相对元素）都会覆盖在文档流对象之上。但是，select元素的窗口控件还不完全支持z-index
15）在css定位布局中，一般遵循“外部相对定位，内部绝对定位”
16）在body中设置min-width:760px,可以避免布局重叠现象。

在前一课中，我们阐述了何为布局表格以及布局表格与常规表格的区别。完成这一过程需要执行五个步骤，本课将详细介绍各个步骤。本课还介绍了可简化设计过程的网页设置提示。在开始绘制布局表格和单元格之前，需要完成一些网页准备工作。请利用“视图”菜单完成下列设置：显示标尺 确保标尺已经显示，如此处所示。标尺可帮助你度量布局的宽度与高度（单位为像素）。清除默认边距 虽然该图中未予显示，但在网页顶端和左侧的确有默认边距。清除默认边距后,使用标尺将更加方便。显示网格 虽然并不必要，但网格可为绘制 *** 作提供参考。创建布局的第一步是创建布局表格。通过“绘制”或者将表格拖至所需的尺寸可以完成这一步。下面是一些关于绘制布局表格的提示：开始之前的准备工作 首先构思布局的宽度。请记住，某些人的显示器分辨率可能比较低，如果你的布局过宽，该布局可能无法全部显示。使用标尺、描摹图像或网格作为参考 无论使用哪个工具，你都将发现使用这些功能可以大大简化布局的安置。第二步是绘制布局单元格。它们是布局中将包含内容的部分。下面是一些有关绘制单元格的提示：不必担心单元格的绘制是否完美 请大胆绘制布局单元格，然后再根据需要对其进行位置移动和大小调整处理。宽度和高度只能以像素为单位 这是因为布局单元格功能仅可用于固定的、基于像素的表格设计。（自动伸缩是一种例外情况，在这种情况下，可以将宽度或高度设置为 100%，从而使宽度或高度与可用空间匹配。这是一种在布局表格与单元格设计完成之后使用的常用技巧。若要调整布局单元格的大小，请单击大小调整控点，然后在调整大小时按 Alt。步骤三：调整布局单元格你不可避免需要对布局单元格进行细微调整：某些单元格可能需要进行细微的大小调整，而某些单元格则需要移动或稍微移动至正确位置。可使用鼠标指针拖动大小调整控点来调整布局单元格的大小。另外，如上一课所述，还可拖动整个单元格以将其移动到相应位置。重要 在拖动以调整单元格大小或移动单元格时，对于任何移动或大小调整，FrontPage 都将采用 10 像素步进增量。某些时候，该功能十分有用，而某些时候则无须使用该功能。若要忽略该步进移动功能，请在调整单元格大小或移动单元格时按住 Alt 键。注意 另外，还有其他一些调整布局单元格大小和移动布局单元格的方法。在随后的练习单元中将介绍这些方法。步骤四：单元格的填充和格式设置在绘制完布局表格和单元格之后，你自然希望在其中填充内容。可以采用多种方法来完成该任务。你可以键入文本、使用“插入”菜单中的各种选项，或者你可以拖放图像，如该图所示。另外，你可能会希望使用背景色、衬距、边框等来设置布局表格和单元格的格式。这些设置都可以在页面右方的”布局表格和单元格“选项卡里进行，方法与普通表格的设置类似。这里不再赘述。完成布局的填充与格式设置后，请务必使用“文件”菜单中的“在浏览器中预览”命令确保网页没有问题。

网站建设中网页设计布局大致可分为：“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型这九种。

1、国字类型：也被称为同字型，顶部是网站的标题、横幅广告条，然后是网站的主体内容条，而左右分别是一些比较小的内容条，中间就是主要内容，最底部是网站的一些基本信息、、版权声明等。这也是现在网上见到的差不多最多的一种结构类型。

2、拐角型：这种类型其实与国字型很相近的，只是在形式上不一样，最上面的部分是网站的标题以及网站的横幅广告条，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3、标题正文类型：上面是网站的标题，或者是类似的东西，接着就是网站的正文内容，例如是一些文章或者是注册登录页面。

4、左右框架类型：这是一种左右分别为两页的框架结构，一般布局是：左边是导航链接，最上面有时是一个小的标题或标志，而右面就是主要内容，最常使用是论坛网站，企业网站中的内页有很多是采用这种布局方式的；这种类型的布局的特点是结构清晰明了。

5、上下框架类型：与左右框架类型类似，只是这种类型是上下两页的框架。

6、综合框架类型：其实就是左右框架类型和上下框架类型的结合体。

7、封面型：这种类型基本上是出现在一些网站的首页，多是精美平面结合小动画，再加几个简单链接或仅是一个“进入”链接或无任何提示。

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

9、变化型：即上面几种类型的结合与变化，但所实现的功能的实质是那种上、左、右结构的综合框架型。

网页布局一般有七个步骤如下：

1页面尺寸：页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下的页面范围就变得越来越小。一般，分辨率在1024×768的情况下，页面的显示尺寸为1007×600；分辨率在800×600的情况下，页面的显示尺寸为780×428个象素；分辨率在640×480的情况下，页面的显示尺寸则为620×311个象素。从以上数据可以看出，分辨率越高页面尺寸越

大。浏览器的工具栏也是影响页面尺寸的原因，目前的浏览器的工具栏都可以取消或者增加，那么当显示全部的工具栏和关闭全部工具栏时，页面的尺寸是不一样的。

在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。要提醒家。除非能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么最好能在上面做上页面内部连接，以方便访者浏览。

2整体造型：什么是造型，造型就是创造出来的物体形象。页面的整体形象，应该是一个整体，图形与文本的接合应该层叠有序，有机统一。虽然，显示器和浏览器都是矩形，但对于页面的造型，可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。

对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，注意到很多ICP和政府网页都是以矩形为整体造型；圆形代表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形则代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是结合多个形状加以设计，其中又以某种形状为主。

3页头：页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将涉及到下面的更多设计和整个页面的协调性。页头常放置站点名字的或公司标志以及旗帜广告等。

4文本：文本在页面中多数以“行”或者“块”(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

5页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚则是放置制作者或者公司信息的地方。能看到，许多此类信息都是放置在页脚的。

6：和文本是网页的两大构成元素，却一不可。如何处理好和文本的位置成了整个页面布局的关键。而布局思维也将体现在这里。

7多媒体：除了文本和，还有声音，动画，视频等等其它媒体。虽然不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也变得更重要起来。

1网站的内容页。网站的内容页是网站建设者没有太多注意的，网站建设者认为内容页根本不重要或是不是很重要，只要在后台把文章内容上传上去让其显示就可以了。

2网站的频道列表页。网站的频道列表页就是我们所熟悉的新闻列表，列表，在这些列表页中，根据笔者多年的经验建议最好的布局就是常规列表，我们可以在左侧或者右侧建立一个这样的大频道导航。

3网站的单页。网站的单页这个是存在于很多企业网站的内容，单页优化有着一定的好处，首先网站的单页是用HTML书写，并且完全静态化，这个是符合搜索引擎的，有利于优化，对搜索引擎友好，这种页面的布局往往需要的是大气，简洁，直入主题。布局上很大一部是跟网站美工的技术相关的。

零基础小白应该怎么学习SEO技术？

现在很多小伙伴喜欢在互联网上找视频资料学习SEO，但是光看视频却没有人指导你，你是不可能学好SEO这门技术的，而且很多视频已经过时了，并没有什么用!

如果你想成为一个SEO技术大牛，学到真正的SEO干货，你可以来这个裙：前面是192，中间是五八六，最后是795！

在这里有最新的SEO优化课程免费学习也有很多人和你一起交流进步，不需要你付出什么，只要你是真心想学习的，随便看看的就不要加了，加了也是浪费大家的时间。

1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。

2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。

3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。

4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。

注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。

---