框架網頁

如果一個網頁的左邊導航選單是固定的，而頁面中間的信息可以上下移動，這一般就可以認為是一個框架型網頁。

基本介紹

• 中文名：框架網頁
• 釋義：放置了公司的LOGO或圖片
• 例如：typography.css 基本排版規則
• 類型：Elements CSS Frameworks

釋義

此外，一些框架型站點的模板在其頁面上方放置了公司的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。

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

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

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