北京軟件開發WEB的頁面框架是指構成完整頁面的組織結構。通常是由以下三部分構成：Head，Main，Foot，有些時候出於布局的需要，在“Head”下面還會加上用於頁面功能導航的“Menu”。

對於軟件開發公司WEB應用來說，頁面布局是和web應用的功能區相對應的，並且對於頁面中各個部分之間的切分比例也需要遵守一定的規則。

頁面布局的設計(jì)，首先需要考慮用戶(hù)在浏覽web頁面時視覺流向上的要求：

從視覺流向上看，用戶首先看到的是頁面“Head”部分的左面，通常那裏是标識這個WEB應用的Logo；然後是陳列WEB應用主要功能的“Menu”來用於頁面導航；接下來用戶将看的是處於頁面左側的“sidebar”，通常這裏也是用於頁面功能導航的，和“Menu”出的選擇相呼應，這裏的内容可以通過類似樹狀結構的方式展示更爲詳細的功能；接下來是處於頁面中心位置的内容部分，較後用戶的視線落在WEB頁面的底部。
 

l  在高度方向上，對(duì)上部1/3區域按照黃(huáng)金分割的方法分出head和menu的區域；

l  在寬度方向上，對(duì)中部左邊(biān)1/3區域按照黃金分割的方法分出sidebar的區域，剩下的空間留給content區域；

l  在高度方向上，對(duì)下部1/3區域按照黃(huáng)金分割的方法分出foot的區域；

在頁面布局中，對(duì)各個(gè)功能區域的切分是按照“像素”和“比例”方式來進行的，以1024*768的分辨率做爲基準，其中：

l  Head區域，寬度是按照比例方式設置的，寬度按照100%設置，高度採(cǎi)用所占的固定像素值來確(què)定的，一般占？px，如果有menu區，則調整爲？px；

l  Menu區域，和“head”的配置要求是一樣的，寬度按照100%設置，高度結(jié)合“head”的高度設置來確(què)定，一般占？px；

l  Sidebar區域，寬度是結合與“content”之間的黃(huáng)金切分比例，按照固定像素的方式確(què)定的，一般占？px；高度是按照比例方式來設置的；

l  Content區域，高度和寬(kuān)度方向布局都是按照比例方式來(lái)設置的；

l  Foot區域，寬度按照100%設置，高度採(cǎi)用所占的固定像素值來確(què)定的，一般占？px；

1.1.1.1    頁面展現

對於(yú)頁面布局來說，除瞭(le)上述要求外，還需要考慮如下要求：

l  能自适應(yīng)1024*768、800*600兩(liǎng)種分辨率；

l  界面層(céng)次不超過(guò)3層(céng)；

l  默認窗口設置下，不應出現水平、垂直滾(gǔn)動(dòng)條；

l  當(dāng)界面内容超出顯示區域時，以浮動層(céng)的形式顯示；

 

還有，對於(yú)用戶的感官而言，屏幕對角線相交的位置是用戶直視的地方，而頁面正上方四分之一處(chù)爲易吸引用戶注意力的位置，所以在放置頁面時要注意利用這兩個位置。

要求：

l  父頁面或主頁面的中心位置應該設計在對(duì)角線焦點(diǎn)附近；

l  子頁面的位置應該(gāi)靠近主窗體(tǐ)的左上角或正中；

l  需要多個子頁面彈(dàn)出時，應該(gāi)依次向右下方偏移，以顯示窗體出标題爲宜；

l  在頁面上方四分之一處(chù)放置用戶的logo、主要功能導(dǎo)航和一些系統操作功能；

 

1.1.1.2    頁面美化

界面應該大小适合美學觀點(diǎn)，感覺協調(diào)舒适，能在有效的範圍内吸引用戶的注意力。

建議和要求：

l  長(zhǎng)寬接近黃金點(diǎn)比例，切忌長(zhǎng)寬比例失調、或寬度超過長(zhǎng)度；

l  布局要合理，不宜過(guò)於(yú)密集，也不能過(guò)於(yú)空曠，合理的利用空間；

l  同一頁面上的按鈕大小應該一緻，不同頁面的按鈕大小盡量相近，按鈕上忌用太長(zhǎng)的名稱(chēng)；

l  按鈕的大小要與界面的大小和空間(jiān)要協調(diào)；

l  避免空曠(kuàng)的界面上放置很大的按鈕(niǔ)；

l  放置完控件後(hòu)界面不應(yīng)有很大的空缺位置；

l  字體(tǐ)的大小要與界面的大小比例協調(diào)， 通常使用的字體(tǐ)12px；

l  前景與背景色搭配合理協調(diào)，反差不宜太大，主色要柔和，較好少用深色，如大紅(hóng)、大綠等，可以借用Windows界面色調(diào)；

l  大型系統(tǒng)常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等；

l  界面風(fēng)格要保持一緻，字的大小、顔色、字體要相同，需要藝術處(chù)理或有特殊要求的地方建議使用圖片表現；

l  如果窗體支持較(jiào)大化或放大時，窗體上的控件也要随著(zhe)窗體而縮放；切忌隻放大窗體而忽略控件的縮放；

l  系統對(duì)話框頁面不應該支持縮放，即右上角隻有關閉(bì)功能；

l  通常父窗體支持縮放時(shí)，子窗體沒(méi)有必要縮放；

l  如果能給(gěi)用戶提供自定義界面風(fēng)格，則由用戶自己選擇顔色、字體等；

 

1.2    頁面字體

頁面字體屬性的設置在相應的CSS中進行定義，頁面文字編(biān)碼要求是UTF-8，在規定字體屬性時，需要設置：中文採(cǎi)用“宋體”，英文採(cǎi)用“Arial”或“verdana”，CSS文件中的font-family裏面必須保證有“宋體”。

對(duì)於(yú)頁面屬性中字體大小的設置，需要内容的不同級别來設置，通常：

n  “Head”中标題(tí)文字，20px；

n  “Menu”中的導(dǎo)航文字，14px；

n  “Sidebar”中的文字，12px；

n  “Content”中的正文，12px或14px，标題(tí)；

n  “foot”中的文字，12px或10px；

 

有關(guān)頁面字體屬性的具體設置參(cān)見附錄中的CSS示例。