北京軟件開(kāi)發(fā)WEB的頁(yè)面框架是指構(gòu)成完整頁(yè)面的組織結(jié)構(gòu)。通常是由以下三部分構(gòu)成：Head，Main，F(xiàn)oot，有些時(shí)候出于布局的需要，在“Head”下面還會(huì)加上用于頁(yè)面功能導(dǎo)航的“Menu”。

對(duì)于軟件開(kāi)發(fā)公司WEB應(yīng)用來(lái)說(shuō)，頁(yè)面布局是和web應(yīng)用的功能區(qū)相對(duì)應(yīng)的，并且對(duì)于頁(yè)面中各個(gè)部分之間的切分比例也需要遵守一定的規(guī)則。

頁(yè)面布局的設(shè)計(jì)，首先需要考慮用戶在瀏覽web頁(yè)面時(shí)視覺(jué)流向上的要求：

從視覺(jué)流向上看，用戶首先看到的是頁(yè)面“Head”部分的左面，通常那里是標(biāo)識(shí)這個(gè)WEB應(yīng)用的Logo；然后是陳列WEB應(yīng)用主要功能的“Menu”來(lái)用于頁(yè)面導(dǎo)航；接下來(lái)用戶將看的是處于頁(yè)面左側(cè)的“sidebar”，通常這里也是用于頁(yè)面功能導(dǎo)航的，和“Menu”出的選擇相呼應(yīng)，這里的內(nèi)容可以通過(guò)類似樹(shù)狀結(jié)構(gòu)的方式展示更為詳細(xì)的功能；接下來(lái)是處于頁(yè)面中心位置的內(nèi)容部分，較后用戶的視線落在WEB頁(yè)面的底部。
 

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

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

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

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

l  Head區(qū)域，寬度是按照比例方式設(shè)置的，寬度按照100%設(shè)置，高度采用所占的固定像素值來(lái)確定的，一般占？px，如果有menu區(qū)，則調(diào)整為？px；

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

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

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

l  Foot區(qū)域，寬度按照100%設(shè)置，高度采用所占的固定像素值來(lái)確定的，一般占？px；

1.1.1.1    頁(yè)面展現(xiàn)

對(duì)于頁(yè)面布局來(lái)說(shuō)，除了上述要求外，還需要考慮如下要求：

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

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

l  默認(rèn)窗口設(shè)置下，不應(yīng)出現(xiàn)水平、垂直滾動(dòng)條；

l  當(dāng)界面內(nèi)容超出顯示區(qū)域時(shí)，以浮動(dòng)層的形式顯示；

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

要求：

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

l  子頁(yè)面的位置應(yīng)該靠近主窗體的左上角或正中；

l  需要多個(gè)子頁(yè)面彈出時(shí)，應(yīng)該依次向右下方偏移，以顯示窗體出標(biāo)題為宜；

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

1.1.1.2    頁(yè)面美化

界面應(yīng)該大小適合美學(xué)觀點(diǎn)，感覺(jué)協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。

建議和要求：

l  長(zhǎng)寬接近黃金點(diǎn)比例，切忌長(zhǎng)寬比例失調(diào)、或?qū)挾瘸^(guò)長(zhǎng)度；

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

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

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

l  避免空曠的界面上放置很大的按鈕；

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

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

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

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

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

l  如果窗體支持較大化或放大時(shí)，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放；

l  系統(tǒng)對(duì)話框頁(yè)面不應(yīng)該支持縮放，即右上角只有關(guān)閉功能；

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

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

1.2    頁(yè)面字體

頁(yè)面字體屬性的設(shè)置在相應(yīng)的CSS中進(jìn)行定義，頁(yè)面文字編碼要求是UTF-8，在規(guī)定字體屬性時(shí)，需要設(shè)置：中文采用“宋體”，英文采用“Arial”或“verdana”，CSS文件中的font-family里面必須保證有“宋體”。

對(duì)于頁(yè)面屬性中字體大小的設(shè)置，需要內(nèi)容的不同級(jí)別來(lái)設(shè)置，通常：

n  “Head”中標(biāo)題文字，20px；

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

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

n  “Content”中的正文，12px或14px，標(biāo)題；

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

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