北(běi)京軟件(jiàn)開(kāi)發WEB的(de)頁面框架是(shì)指構成完整頁面的(de)組織結構。通(t‍₹ōng)常是(shì)由以下(xià)三部分(©"¶fēn)構成：Head，Main，Foot，有(yǒu≥γ)些(xiē)時(shí)候出于布局的(de)需要(yào)，在&★☆↑“Head”下(xià)面還(háλ≠βi)會(huì)加上(shàng)用(yòng)于頁面功能(néng)導πλ®δ航的(de)“Menu”σ‍≥ 。

對(duì)于軟件(jiàn)開(kāi)發公司WEB應用(yòng)來(lái)說(shuō)，頁面布×δ∏♥局是(shì)和(hé)web應用(yòng)的(de)功能(n•π←βéng)區(qū)相(xiàng)對(duì)應的(deε>§∞)，并且對(duì)于頁面中各個(gè)部分(fēn)之間(j‍→$iān)的(de)切分(fēn)比例也(yě)需要(yào)遵守一(yī)定的§≤β(de)規則。

頁面布局的(de)設計(jì)，首先需要÷δ♦(yào)考慮用(yòng)戶在浏覽web頁面©<★時(shí)視(shì)覺流向上(shàng)的(de)要(yào)★↑求：

從(cóng)視(shì)覺流向上(shàng)看(kànπε)，用(yòng)戶首先看(kàn)到(d₹↓ào)的(de)是(shì)頁面“Head”部分(fē↓π↕n)的(de)左面，通(tōng)常那(nà)裡(lǐ)是(±÷shì)标識這(zhè)個(gè)WEB應用(yòng)的(de)Logo©$™；然後是(shì)陳列WEB應用(yòng)主要(yào)功能(néng)的(δ​♣de)“Menu”來π£₹(lái)用(yòng)于頁面導航；接下(xià)來(lái)用(yòng)戶±₹将看(kàn)的(de)是(shì)處于頁面左側的(↔ αφde)“sidebar”，通(tō€₹ng)常這(zhè)裡(lǐ)也(yě)是(shì)用(yòng)于頁面α≠‍功能(néng)導航的(de)，和(hé)&ldqu≥↔₹o;Menu”出的(de)選擇<π‍相(xiàng)呼應，這(zhè)裡(lǐ)的(d• e)內(nèi)容可(kě)以通(tōng)過類似£"♣®樹(shù)狀結構的(de)方式展示更為(wèi)詳細的(de)功能‍₹(néng)；接下(xià)來(lái)是(shì)處于頁宣面中心位置的(de)內(nèi)容部分(fēn)，較後用₽¶≤(yòng)戶的(de)視(shì)線落在×↓"‌WEB頁面的(de)底部。
 

l  在高(gāo)度方向上(shàng)，對(duì)上(s±σ‍♣hàng)部1/3區(qū)域按照(zh÷≥δào)黃(huáng)金(jīn)分(fēn)割的(d'®§e)方法分(fēn)出head和(hé)menu$​↓£的(de)區(qū)域；

l  在寬度方向上(shàng)，對(duì)中部左邊1/3區↔¶‌£(qū)域按照(zhào)黃(huáng)金(jīn)分(fēn)割↓§的(de)方法分(fēn)出sideba€♣↓r的(de)區(qū)域，剩下(xià)的(de)空('π♣σkōng)間(jiān)留給content區(qū)域；

l  在高(gāo)度方向上(shàng)，對(duì)下♥✘$×(xià)部1/3區(qū)域按照(zhào)黃(h↕"≈>uáng)金(jīn)分(fēn)割的(de)方法分(fēn)→λδ 出foot的(de)區(qū)域；

在頁面布局中，對(duì)各個(gè)功能(néng)區( ≥qū)域的(de)切分(fēn)是(shì)按照(zhào)&ldq ∞¥≠uo;像素”和(hé)&ldquo₩© ';比例”方式來(lái)進行(xíng)的(de)，以1₩"024*768的(de)分(fēn)辨率做(zuò↔×♥Ω)為(wèi)基準，其中：

l  Head區(qū)域，寬度是(shìδ<$←)按照(zhào)比例方式設置的(de)，寬度按∑∑照(zhào)100%設置，高(gāo)度采用(yòng®®)所占的(de)固定像素值來(lái)确定的(de)，一(yī)般占？px≈≈ ©，如(rú)果有(yǒu)menu區(qū)，則調整為(wèi)？px；

l  Menu區(qū)域，和(hé)&l☆←¥§dquo;head”的(de)配置要(yào)求₽ε∑Ω是(shì)一(yī)樣的(de)，寬度按照(zhào)1✔∏÷✔00%設置，高(gāo)度結合“heε→ad”的(de)高(gāo)度設置來(lái)确♠‌定，一(yī)般占？px；

l  Sidebar區(qū)域，寬度是(•♣εεshì)結合與“content&rdquεφo;之間(jiān)的(de)黃(huáng)金(jīn÷↕÷¶)切分(fēn)比例，按照(zhào)固定像素的(de)方式确定的(d₩→$&e)，一(yī)般占？px；高(gāo)度是(shì)按→♣照(zhào)比例方式來(lái)設置的(de)；

l  Content區(qū)域，₩↑↓>高(gāo)度和(hé)寬度方向布局都(dōu• )是(shì)按照(zhào)比例方式來(lái)設置的(de)；

l  Foot區(qū)域，寬度按照(zhào)100%設置¶λ，高(gāo)度采用(yòng)所占的(de<★ε≈)固定像素值來(lái)确定的(de)，一(yī)般β×∞占？px；

1.1.1.1    頁面展現(​§€xiàn)

對(duì)于頁面布局來(lái)說(shuō)，除了(le)上(shà‍₹ng)述要(yào)求外(wài)，還(hái)☆‍∞‌需要(yào)考慮如(rú)下(xià)要(yào)求：

l  能(néng)自(zì)适應1024*768、800*600‌÷兩種分(fēn)辨率；

l  界面層次不(bù)超過3層；

l  默認窗(chuāng)口設置下(xià)，不(bβ ù)應出現(xiàn)水(shuǐ)平、垂直滾動條；

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

還(hái)有(yǒu)，對(duì)于用(yòng)戶的(★©÷♦de)感官而言，屏幕對(duì)角線相(xiàn≈β≥​g)交的(de)位置是(shì)用(yòng)戶直視(shì)的(de)地(d♣&≥ì)方，而頁面正上(shàng)方四分(fēn)之一(yī)處為(w  ®èi)易吸引用(yòng)戶注意力的(de)位置，所以在§→→放(fàng)置頁面時(shí)要(yào)注意利用(yò&αng)這(zhè)兩個(gè)位置。

要(yào)求：

l  父頁面或主頁面的(de)中心位置應該設計(δ₹φ≤jì)在對(duì)角線焦點附近(jìn÷<)；

l  子(zǐ)頁面的(de)位γα±Ω置應該靠近(jìn)主窗(chuāng)體(tǐ)的(de)左上(sεΩ¶×hàng)角或正中；

l  需要(yào)多(duō)個(gèΩ₹γα)子(zǐ)頁面彈出時(shí)，應該依次向右下(xià)≤←方偏移，以顯示窗(chuāng)體(tǐ)出标題為(wè ↑α i)宜；

l  在頁面上(shàng)方四分' ÷₩(fēn)之一(yī)處放(fàng)置用(yòng)戶的(de)logo"×​δ、主要(yào)功能(néng)導航和(hé)一₹‍₩'(yī)些(xiē)系統操作(zuò)功能(néng)；

1.1.1.2    頁面美(měδ≥i)化(huà)

界面應該大(dà)小(xiǎo)适合美(měi)學觀點，感覺協$♠調舒适，能(néng)在有(yǒu)效的(de)<γ範圍內(nèi)吸引用(yòng)戶的(de)注意力。

建議(yì)和(hé)要(yào)求：

l  長(cháng)寬接近(jìn)黃(h™φ∞uáng)金(jīn)點比例，切忌長(cháng)寬比例失調、或寬度超過長(c↕​ háng)度；

l  布局要(yào)合理(lǐ)，不>÷π∞(bù)宜過于密集，也(yě)不(bù)能(néng)過于空(kōng)βΩ♦曠，合理(lǐ)的(de)利用(yòng)空(kōng)間(Ω jiān)；

l  同一(yī)頁面上(shàng)的(de)按鈕大(dà)小(  &φxiǎo)應該一(yī)緻，不(bù)同頁面☆​ $的(de)按鈕大(dà)小(xiǎo)盡量相(xiàng)近(jì↓≈n)，按鈕上(shàng)忌用(yòng)太長(c¥£​÷háng)的(de)名稱；

l  按鈕的(de)大(dà)小(xiǎo)要(yào•↕)與界面的(de)大(dà)小(xiǎo)和(hé)空(kōng)間(jσ'♥iān)要(yào)協調；

l  避免空(kōng)曠的(de)界面上φ<&(shàng)放(fàng)置很(hěn)大(d↔'∞à)的(de)按鈕；

l  放(fàng)置完控件(jiàn)Ω≤ 後界面不(bù)應有(yǒu)很(hěn)大(dà)的(d®≤e)空(kōng)缺位置；

l  字體(tǐ)的(de)大(dà)小±∞<(xiǎo)要(yào)與界面的(de)大(dà)小(xiǎo)比例協調‌∞， 通(tōng)常使用(yòng)的(d​&e)字體(tǐ)12px；

l  前景與背景色搭配合理(lǐ)協調，反差不(bù)宜÷‍α☆太大(dà)，主色要(yào)柔和(hé)，較好(hǎo)少(sh★✔ǎo)用(yòng)深色，如(rú)大(dà)紅(hó$•→☆ng)、大(dà)綠(lǜ)等，可(kě)以借用(yòng)W÷±'♣indows界面色調；

l  大(dà)型系統常用(yòng)的(de₩​£≥)主色有(yǒu)"#E1E1E1"、"≈∑"#EFEFEF"、"#C0C0C0&q<♥₩uot;等；

l  界面風(fēng)格要(yà←∑o)保持一(yī)緻，字的(de)大(dà)小≤♦↕(xiǎo)、顔色、字體(tǐ)要(yào)相(xiàng)同， λ∏需要(yào)藝術(shù)處理(lǐ)或有(y₩♦‌‌ǒu)特殊要(yào)求的(de)地(dì)方建議(yì)使用(y↓×òng)圖片表現(xiàn)；

l  如(rú)果窗(chuāng)體(δ₩tǐ)支持較大(dà)化(huà)或放(fàng←∑✔ )大(dà)時(shí)，窗(chuāng)體(tǐ)上(shàng)的(dΩ‍↑e)控件(jiàn)也(yě)要(yào)随著(zhe)窗(chuāng)↕★體(tǐ)而縮放(fàng)；切忌隻放(fàng)大(dà)窗(chuāng​☆)體(tǐ)而忽略控件(jiàn)的(de)縮放(fà♦>↔©ng)；

l  系統對(duì)話(huà)框頁面不(bù)應該支持縮放¶>✔(fàng)，即右上(shàng)角隻有(yǒ∏×γ☆u)關閉功能(néng)；

l  通(tōng)常父窗(chuāng)體(tǐ)支持縮放(f​±∞àng)時(shí)，子(zǐ)窗(chuāng)體(tǐ)沒有(₽₹↑yǒu)必要(yào)縮放(fàng)；

l  如(rú)果能(néng)給用(yòng)> ₩戶提供自(zì)定義界面風(fēng)格，則由用(yònΩ♠g)戶自(zì)己選擇顔色、字體(tǐ)等；

1.2    頁面字體 π₽(tǐ)

頁面字體(tǐ)屬性的(de)設置在相(x ¶<≠iàng)應的(de)CSS中進行(xíng)定義，'∞×頁面文(wén)字編碼要(yào)求是(shì)UT↕≥ βF-8，在規定字體(tǐ)屬性時(shí)，需要(yào)設置：σ★£中文(wén)采用(yòng)“宋✔♥體(tǐ)”，英文(wén)采用(♦π γyòng)“Arial”或‍↕“verdana”，CSS文(w≠★αén)件(jiàn)中的(de)font-family裡(lǐ)面✔ε必須保證有(yǒu)“宋體(tǐ)”λ₽®γ。

對(duì)于頁面屬性中字體(tǐ)大(dà∑δ≥)小(xiǎo)的(de)設置，需要(yào)內(nèi)容的(de)不(bù>$)同級别來(lái)設置，通(tōng)常：

n  “Head”中标題文‌β(wén)字，20px；

n  “Menu”中的(de)導航文Ωσ§(wén)字，14px；

n  “Sidebar”中的(d "e)文(wén)字，12px；

n  “Content&rdquo<₹∞;中的(de)正文(wén)，12px或14px，标題；

n  “foot&∑α←≤rdquo;中的(de)文(wén)字，12p‌±←x或10px；

有(yǒu)關頁面字體(tǐ)屬性的(>×™de)具體(tǐ)設置參見(jiàn)附錄中的(de)‍←₹CSS示例。