框架网页

框架型网页

如果一个网页的左边导航菜单是固定的，而页面中间的信息可以上下移动，这一般就可以认为是一个框架型网页。

释义

此外，一些框架型站点的模板在其页面上方放置了公司的logo或图片。不过这一块也是位置固定的。而页面的其它部分则可以上下左右移动。有的框架型站点模板还会在其固定区域中放入链接或导航按钮。

在一些关于搜索引擎优化方面的文章中，基本上都认为网站用框架来设计是极不可取的。这是由于大多数的搜索引擎都无法识别网页中的框架，或者无法对框架中的内容进行遍历或搜索。

css框架通常只是一些css文件的集合，这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如：

* typography.css 基本排版规则

* grid.css 基于网格的布局

* layout.css 通常的布局

* form.css for 表单样式

* general.css 更多通用规则

类型

Elements CSS Frameworks

Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架，它有自己的项目工作流。它拥有你完成项目所需的所有东西，这也让你和你的浏览者感到愉悦。阅读概述了解更多。

YUI Grids CSS

基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。这个4KB的文件可提供超过1000种页面布局组合。更多信息…

YAML CSS Framework

Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。

Blueprint CSS

Blueprint 是一个 CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。

Schema Web Design Framework

Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。与为每一个新的网站项目从零开始创建HTMl/CSS不同，Schema提供必要的基础来开始并立马让你的设计跑起来。

CleverCSS

CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比 CSS2整洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。

Tripoli CSS Framework

Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准，Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

ESWAT Web Project Framework

ESWAT正在重新整理。如果你是冲着我的网站框架来的，那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

Boilerplate CSS Framework

作为BluePrint CSS的原作者之一，我决定把我的思想重新整理到一个赤裸裸的框架，它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。

WYMstyle CSS Framework

这个项目的目的是提供一组经过良好测试的模块化的CSS文件，能够用于网站的快速设计。WYMstyle是一组CSS文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

Content with style Framework

下一个逻辑步骤就是将这个扩展为CSS框架，允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板…

Logicss Framework

Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset 文件或是用“*”)，排版支持文本字体大小调整(使用EMs) 和垂直居中，符合可定义的灵活的布局网格利用css代码生成工具。

That Standards Guy CSS Framework

* 只能调用单个样式文件

* 主样式需要取得CSS认证(WCAG 1.0)；

* 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac；

* IE Hacks使用独立文件；

* 快速创建模板；

* 少量注释/实例演示，可以节省时间来理解。

960 Grid System

960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。

Emastic CSS Framework

Emastic 是一个CSS框架，它有连续的任务：探索陌生的新世界，寻找新生活和新的网站空间，大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化，在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。

作用

使用框架的网页无法被使用网络蜘蛛(spiders)或网络爬虫(crawlers) 的搜索引擎(如Google)正确索引。

在一个框架网页的后台代码中，一般能够看到的是网页的标题标记(Meta Title)、描述标记(Meta Description)、关键字标记(Meta Keywords)及其它原标记(Meta Tags)，同时还会看到一个框架集标记(Frameset Tag)。框架中的内容在后台代码中是无法被体现的，而对于那些主要搜索引擎的搜索程序来说，如Google的GoogleBot和Freshbot，其设计思路都是完全忽略某些HTML代码，转而直接锁定网页上的实际内容进行索引。这样一来，网络蜘蛛在那些一般性的框架网页上根本找不到要搜索的内容。这是由于那些具体内容都被放到我们称之为“内部网页”中去了。

优化

使用了框架型网页并不意味着就完全无法对其网页进行优化。实际上在HTML标记中，有一个叫做NOFRAME的标记，如果使用得当的话我们就可以有效地对页面进行优化了，从而使得搜索引擎能够正确索引你框架网页上的内容信息。也有网站这样使用NOFRAMES标记：他们在NOFRAMES标记里放上这么一段话：“本网页使用了框架，但您的浏览器不支持框架。请下载新的浏览器观看。”

让我们看看那些专业的搜索引擎优化公司是怎么做的吧。他们在使用了框架的网页中，有效的提供含有丰富关键字和关键短语的重要文字和内容，从而有效帮助网站在SERP(搜索引擎搜索结果页)中取得较高的排名(页面等级)。

这样优化的结果，其实就是让主要搜索引擎不但读取了你的网页后台代码中的标题和其它原标记，而且对那些不支持框架的浏览器所无法显示的页面内容信息，也进行了索引。如果你出于某种原因非要使用框架结构，那么请紧记：在你的后台代码中一定要正确的使用NOFRAMES标记，这一点非常重要。

很显然，我们所说的这些优化措施，只有对那些网页内容经过精心撰写，并且在内容中充分使用了重要关键字和关键短语的网站才起作用。

综上所述，不管是使用框架技术的网站还是非框架技术的网站，只要你采用的是恰当的技术和正确的技巧，都可以进行完美的优化从而取得理想的页面等级。

改变框架网页属性

在设置好框架的整体布局后，我们还可以对每一框架的具体属性进行设置，操作如下：

一、单击需设置属性的框架，选择“框架”菜单中的“框架属性”，则弹出“框架属性”对活框。

二、在对话框的“名称”文本框中可输入框架名，这样便于识别不同的框架；在“选项”区域中，若选中“在浏览器中可以调大小”复选框，则客户在浏览站点时，可重新定义框架尺寸，通过在“显示滚动条”下拉列表框中选择不同的描述项，可设置让滚动条是否出现。

三、在“框架大小”区域中，可设置框架大小，可以定义一个绝对像素值或相对于浏览器窗口的百分比，若要用浏览器来设置相对于该页面中框架的尺寸，可选“相对”；在“边距”区域中，可设置内容页面与框架边框分隔的像素数值。

四、要改变开始页面，可以在“初始网页”文本框中输入一个新的页面名字或URL。

五、单击“框架网页”按钮，则弹出“网页属性”对话框。

六、在该对话框的“框架”选项卡中，在“框架间距”文本框中，可输入以像素为单位的边框宽度；若要使框架边框消失，则不要选中“显示边框”复选框。