框架網頁

此外，一些框架型站點的模板在其頁面上方放置了公司的logo或圖片。不過這一塊也是位置固定的。而頁面的其它部分則可以上下左右移動。有的框架型站點模板還會在其固定區域中放入鏈接或導航按鈕。

在一些關於搜索引擎優化方面的文章中，基本上都認為網站用框架來設計是極不可取的。這是由於大多數的搜索引擎都無法識別網頁中的框架，或者無法對框架中的內容進行遍歷或搜索。

css框架通常只是一些css文件的集合，這些文件包括基本佈局、表單樣式、網格或簡單結構、以及樣式重置。比如：

* typography.css 基本排版規則

* grid.css 基於網格的佈局

* layout.css 通常的佈局

* form.css for 表單樣式

* general.css 更多通用規則

Elements CSS Frameworks

Elements 是一個實用的CSS框架。它是為了幫助設計師更快更高效的來寫CSS而建立。Elements 已經超越了僅僅作為一個框架，它有自己的項目工作流。它擁有你完成項目所需的所有東西，這也讓你和你的瀏覽者感到愉悦。閲讀 概述 瞭解更多。

基本的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是一個用於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。

五、單擊“框架網頁”按鈕，則彈出“網頁屬性”對話框。

六、在該對話框的“框架”選項卡中，在“框架間距”文本框中，可輸入以像素為單位的邊框寬度；若要使框架邊框消失，則不要選中“顯示邊框”複選框。

七、單擊“確定”按鈕，關閉“網頁屬性”對話框，再單擊“確定”按鈕，關閉“框架屬件”對話框，完成框架屬性設置。