資源描述：
《web頁(yè)面設(shè)計(jì)規(guī)范》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫(kù)。
1、Web頁(yè)面設(shè)計(jì)規(guī)范編號(hào)：版本號(hào)：受控狀態(tài)：作者：分發(fā)號(hào)：第28頁(yè)共28頁(yè)文檔修改歷史記錄文檔修改記錄日期版本號(hào)更改人更改內(nèi)容文檔審核記錄日期版本號(hào)審核人審核意見第28頁(yè)共28頁(yè)第28頁(yè)共28頁(yè)目錄1引言51.1目的51.2范圍51.3縮略術(shù)語(yǔ)51.4參考資料52WEB頁(yè)面框架內(nèi)容52.1頁(yè)面框架52.2頁(yè)面布局62.2.1布局原則62.2.2布局要求62.2.2.1頁(yè)面分割62.2.2.2頁(yè)面結(jié)構(gòu)72.2.2.3頁(yè)面展現(xiàn)82.2.2.4頁(yè)面美化82.3頁(yè)面字體92.4邊距92.5表格92.6段落排版102.7Frame102.8其他頁(yè)面元素113
2、頁(yè)面風(fēng)格113.1風(fēng)格分類113.2頁(yè)面風(fēng)格應(yīng)用124WEB頁(yè)面交互124.1頁(yè)面元素焦點(diǎn)切換124.1.1信息填寫124.1.2鼠標(biāo)交互響應(yīng)124.2頁(yè)面信息交互144.2.1操作結(jié)果確認(rèn)144.2.2其他規(guī)則144.3頁(yè)面信息提示144.4鍵盤響應(yīng)支持165WEB頁(yè)面通用規(guī)范175.1一般頁(yè)面功能175.1.1新增175.1.2修改175.1.3刪除17第28頁(yè)共28頁(yè)5.1.4查詢175.1.5取消185.1.6保存185.1.7重置185.1.8返回185.1.9分頁(yè)185.1.10全選185.2一般頁(yè)面規(guī)則185.2.1默認(rèn)值185.2
3、.2必填值195.2.3界面?zhèn)鬟f195.2.4窗口嵌套195.2.5輸入框操作195.2.6在線幫助功能195.2.7菜單功能要求205.2.8快捷鍵功能205.2.9快捷鍵的限制215.2.10頁(yè)面的規(guī)范性215.2.11系統(tǒng)易用性225.2.12輸入安全性要求225.2.13獨(dú)特性要求235.2.14多窗口的應(yīng)用與系統(tǒng)資源236頁(yè)面編程技術(shù)使用規(guī)范246.1頁(yè)面元素命名246.2DHTMLx控件256.3Flex控件267頁(yè)面資源規(guī)格說(shuō)明267.1圖標(biāo)267.2圖片267.3多媒體278附錄288.1基于DHX的CSS規(guī)格示例288.1.1表
4、格CSS示例288.2典型應(yīng)用的頁(yè)面示例28第28頁(yè)共28頁(yè)1引言1.1目的本文用于規(guī)范我公司所開發(fā)的商業(yè)軟件中對(duì)于web頁(yè)面的設(shè)計(jì)工作，明確在設(shè)計(jì)中所要遵循的準(zhǔn)則和方法，web頁(yè)面中各個(gè)元素的規(guī)格要求，確保所實(shí)現(xiàn)的web頁(yè)面在風(fēng)格、結(jié)構(gòu)和功能上的統(tǒng)一，提升商業(yè)軟件的外在品質(zhì)。1.2范圍本規(guī)范適用于公司所有的商業(yè)軟件產(chǎn)品。1.3縮略術(shù)語(yǔ)DHMLX：web頁(yè)面的UI控件1.4參考資料2WEB頁(yè)面框架內(nèi)容2.1頁(yè)面框架WEB的頁(yè)面框架是指構(gòu)成完整頁(yè)面的組織結(jié)構(gòu)。通常是由以下三部分構(gòu)成：Head，Main，F(xiàn)oot，有些時(shí)候出于布局的需要，在“Head
5、”下面還會(huì)加上用于頁(yè)面功能導(dǎo)航的“Menu”。如圖：圖1第28頁(yè)共28頁(yè)1.1頁(yè)面布局1.1.1布局原則對(duì)于WEB應(yīng)用來(lái)說(shuō)，頁(yè)面布局是和web應(yīng)用的功能區(qū)相對(duì)應(yīng)的，并且對(duì)于頁(yè)面中各個(gè)部分之間的切分比例也需要遵守一定的規(guī)則。頁(yè)面布局的設(shè)計(jì)，首先需要考慮用戶在瀏覽web頁(yè)面時(shí)視覺流向上的要求：圖2從視覺流向上看，用戶首先看到的是頁(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”出
6、的選擇相呼應(yīng)，這里的內(nèi)容可以通過(guò)類似樹狀結(jié)構(gòu)的方式展示更為詳細(xì)的功能；接下來(lái)是處于頁(yè)面中心位置的內(nèi)容部分，最后用戶的視線落在WEB頁(yè)面的底部。1.1.2布局要求1.1.2.1頁(yè)面分割以上面圖示的布局方式為例，按照通常web頁(yè)面設(shè)計(jì)時(shí)所遵循的方法，并結(jié)合黃金分割比例的方法：l首先，將頁(yè)面按照3*3的方式進(jìn)行分割，如下圖：第28頁(yè)共28頁(yè)l在高度方向上，對(duì)上部1/3區(qū)域按照黃金分割的方法分出head和menu的區(qū)域；l在寬度方向上，對(duì)中部左邊1/3區(qū)域按照黃金分割的方法分出sidebar的區(qū)域，剩下的空間留給content區(qū)域；l在高度方向上，對(duì)下部
7、1/3區(qū)域按照黃金分割的方法分出foot的區(qū)域；1.1.1.1頁(yè)面結(jié)構(gòu)頁(yè)面的布局中，各個(gè)區(qū)域大小的定義方式是不同的，請(qǐng)見下圖：圖3在頁(yè)面布局中，對(duì)各個(gè)功能區(qū)域的切分是按照“像素”和“比例”方式來(lái)進(jìn)行的，以1024*768的分辨率做為基準(zhǔn)，其中：lHead區(qū)域，寬度是按照比例方式設(shè)置的，寬度按照100%設(shè)置，高度采用所占的第28頁(yè)共28頁(yè)固定像素值來(lái)確定的，一般占？px，如果有menu區(qū)，則調(diào)整為？px；lMenu區(qū)域，和“head”的配置要求是一樣的，寬度按照100%設(shè)置，高度結(jié)合“head”的高度設(shè)置來(lái)確定，一般占？px；lSidebar區(qū)域，
8、寬度是結(jié)合與“content”之間的黃金切分比例，按照固定像素的方式確定的，一般占？px；高度是按照比例方式來(lái)設(shè)置的；lContent區(qū)
