編號：版本號：
受控狀態：
作者：分發號：
文件修改歷史記錄
文件修改記錄
文件審核記錄
目錄1 引言 5
1.1 目的 5
1.2 範圍 5
1.3 縮略術語 5
1.4 參考資料 5
2 web頁面框架內容 5
2.1 頁面框架 5
2.2 頁面布局 6
2.2.1 布局原則 6
2.2.2 布局要求 6
2.2.2.1 頁面分割 6
2.2.2.2 頁面結構 7
2.2.2.3 頁面展現 8
2.2.2.4 頁面美化 8
2.3 頁面字型 9
2.4 邊距 9
2.5 ** 9
2.6 段落排版 10
2.7 frame 10
2.8 其他頁面元素 11
3 頁面風格 11
3.1 風格分類 11
3.2 頁面風格應用 12
4 web頁面互動 12
4.1 頁面元素焦點切換 12
4.1.1 資訊填寫 12
4.1.2 滑鼠互動響應 12
4.2 頁面資訊互動 14
4.2.1 操作結果確認 14
4.2.2 其他規則 14
4.3 頁面資訊提示 14
4.4 鍵盤響應支援 16
5 web頁面通用規範 17
5.1 一般頁面功能 17
5.1.1 新增 17
5.1.2 修改 17
5.1.3 刪除 17
5.1.4 查詢 17
5.1.5 取消 18
5.1.6 儲存 18
5.1.7 重置 18
5.1.8 返回 18
5.1.9 分頁 18
5.1.10 全選 18
5.2 一般頁面規則 18
5.2.1 預設值 18
5.2.2 必填值 19
5.2.3 介面傳遞 19
5.2.4 視窗巢狀 19
5.2.5 輸入框操作 19
5.2.6 **幫助功能 19
5.2.7 選單功能要求 20
5.2.8 快捷鍵功能 20
5.2.9 快捷鍵的限制 21
5.2.10 頁面的規範性 21
5.2.11 系統易用性 22
5.2.12 輸入安全性要求 22
5.2.13 獨特性要求 23
5.2.14 多視窗的應用與系統資源 23
6 頁面程式設計技術使用規範 24
6.1 頁面元素命名 24
6.2 dhtmlx控制項 25
6.3 flex控制項 26
7 頁面資源規格說明 26
7.1 圖示 26
7.2 ** 26
7.3 多** 27
8 附錄 28
8.1 基於dhx的css規格示例 28
8.1.1 **css示例 28
8.2 典型應用的頁面示例 28
本文用於規範我公司所開發的商業軟體中對於web頁面的設計工作，明確在設計中所要遵循的準則和方法，web頁面中各個元素的規格要求，確保所實現的web頁面在風格、結構和功能上的統一，提公升商業軟體的外在品質。
本規範適用於公司所有的商業軟體產品。
dhmlx：web頁面的ui控制項
web的頁面框架是指構成完整頁面的組織結構。通常是由以下三部分構成：head，main，foot，有些時候出於布局的需要，在「head」下面還會加上用於頁面功能導航的「menu」。
如圖：圖 13 布局原則
對於web應用來說，頁面布局是和web應用的功能區相對應的，並且對於頁面中各個部分之間的切分比例也需要遵守一定的規則。
頁面布局的設計，首先需要考慮使用者在瀏覽web頁面時視覺流向上的要求：
圖 2從視覺流向上看，使用者首先看到的是頁面「head」部分的左面，通常那裡是標識這個web應用的logo；然後是陳列web應用主要功能的「menu」來用於頁面導航；接下來使用者將看的是處於頁面左側的「sidebar」，通常這裡也是用於頁面功能導航的，和「menu」出的選擇相呼應，這裡的內容可以通過類似樹狀結構的方式展示更為詳細的功能；接下來是處於頁面中心位置的內容部分，最後使用者的視線落在web頁面的底部。
4 布局要求
以上面圖示的布局方式為例，按照通常web頁面設計時所遵循的方法，並結合**分割比例的方法：
● 首先，將頁面按照3*3的方式進行分割，如下圖：
● 在高度方向上，對上部1/3區域按照**分割的方法分出head和menu的區域；
● 在寬度方向上，對中部左邊1/3區域按照**分割的方法分出sidebar的區域，剩下的空間留給content區域；
● 在高度方向上，對下部1/3區域按照**分割的方法分出foot的區域；
頁面的布局中，各個區域大小的定義方式是不同的，請見下圖：
圖 3在頁面布局中，對各個功能區域的切分是按照「畫素」和「比例」方式來進行的，以1024*768的解析度做為基準，其中：
● head區域，寬度是按照比例方式設定的，寬度按照100%設定，高度採用所佔的固定畫素值來確定的，一般佔？px，如果有menu區，則調整為？px；
● menu區域，和「head」的配置要求是一樣的，寬度按照100%設定，高度結合「head」的高度設定來確定，一般佔？px；
● sidebar區域，寬度是結合與「content」之間的**切分比例，按照固定畫素的方式確定的，一般佔？px；高度是按照比例方式來設定的；
● content區域，高度和寬度方向布局都是按照比例方式來設定的；
● foot區域，寬度按照100%設定，高度採用所佔的固定畫素值來確定的，一般佔？px；
對於頁面布局來說，除了上述要求外，還需要考慮如下要求：
● 能自適應1024*768、800*600兩種解析度；
● 介面層次不超過3層；
● 預設視窗設定下，不應出現水平、垂直滾動條；
● 當介面內容超出顯示區域時，以浮動層的形式顯示；
還有，對於使用者的感官而言，螢幕對角線相交的位置是使用者直視的地方，而頁面正上方四分之一處為易吸引使用者注意力的位置，所以在放置頁面時要注意利用這兩個位置。
要求：● 父頁面或主頁面的中心位置應該設計在對角線焦點附近；
Web頁面設計規範
編號 版本號 受控狀態 作者 分發號 文件修改歷史記錄 文件修改記錄 文件審核記錄 引言目的 本文用於規範我公司所開發的商業軟體中對於web頁面的設計工作，明確在設計中所要遵循的準則和方法，web頁面中各個元素的規格要求，確保所實現的web頁面在風格 結構和功能上的統一，提公升商業軟體的外在品質。範...
WEB頁面設計規範 整理ok
web頁面設計規範 目錄1 引言 2 2 web頁面框架內容 2 2.1 頁面框架 2 2.2 頁面布局 3 2.2.1 布局原則 3 2.2.2 布局要求 4 2.3 如果能給使用者提供自定義介面風格，則由使用者自己選擇顏色 字型等 6 2.4 頁面字型 6 2.5 邊距 6 2.6 6 2.7 ...
醫院設計規範
第一節一般規定 第3.1.1條主體建築的平面布置和結構形式，應為今後發展 改造和靈活分隔創造條件。第3.1.2條建築物出入口 一 門診 急診，住院應分別設定出入口。二 在門診 急診和住院主要入口處，必須有機動車停靠的平台及雨棚。如設坡道時，坡度不得大於1 10。第3.1.3條醫院的分割槽和醫療用房應...