A. web表格怎樣做得美
下面我們以一個簡單的示例來體會體會一下表單。
最終效果如下：
如何用web表格控制項FineReport做web表格
2
新建表單
點擊文件>新建表單，如下圖
如何用web表格控制項FineReport做web表格
拖入組件
如上圖所示的效果圖，我們可以看到該表單需要有1個下拉框控制項以及對應的1個標簽控制項和一個查詢按鈕，還需要一個以表格形式顯示數據的報表塊和顯示圖表的圖表塊，此時，我們確定了需要在表單中添加一個報表塊，一個圖表塊，3個控制項。
註：在組件介紹中，我們知道控制項即可依附於參數面板組件存在，也可以單獨以組件的形式存在，在這里可隨意使用哪種形式，效果都一樣，那麼使用依附於參數面板組件存在的形式。
參數組件
從工具欄中將參數組件拖拽至表單主體中，並將相應的三個控制項：下拉框、文本控制項和查詢按鈕拖拽至參數組件中，並設置標簽控制項的控制項值為：客戶，如下圖：
如何用web表格控制項FineReport做web表格
報表塊組件
從工具欄中將報表組件也拖拽至表單主體中，如下圖：
如何用web表格控制項FineReport做web表格
註：如果組件數量過多，在web端展示的時候自適應在一頁內顯示會比較擁擠，那麼此時可以在右側下方選中整體框架body，在右側上方的屬性表中將組件縮放修改為自適應原樣縮放，如下圖：
如何用web表格控制項FineReport做web表格
充滿展現區域：是指在web端展示的時候，所有組件自適應充滿整個瀏覽器頁面顯示，不出現滾動條；
自適應原樣縮放：是指在web端展示的時候根據製作表單時候組件大小比例顯示，並不縮放充滿整個web頁面，如果超過頁面大小，會出現滾動條。
其詳細顯示樣式請查看錶單樣式
圖表組件
再從工具欄中將圖表組件拖曳至報表塊組件的下方，如下圖：
如何用web表格控制項FineReport做web表格
控制項綁定數據
定義數據集
效果圖中，新建數據集ds1：SELECT 產品名稱,庫存量,產品.成本價 ,產品.單價 FROM 訂單,訂單明細,產品 where 客戶ID='${company}'and 訂單.訂單ID=訂單明細.訂單ID and 訂單明細.產品ID=產品.產品ID，參數company的默認值為VINET,。
註：參數名字必須與客戶ID下拉框控制項名稱保持一致。
客戶下拉框控制項
選中下拉框控制項拖拽到適當位置，下拉框控制項名設為「company」，數據字典來自FRDemo資料庫的客戶表（數據類型選擇資料庫表，資料庫選擇FRDemo），實際值和顯示值分別為客戶ID和客戶名稱，控制項值為VINET：
如何用web表格控制項FineReport做web表格
報表塊
參數面板與控制項都已經設置好之後，點開報表塊裡面的觸筆按鈕，進行報表塊編輯界面，如下圖：
如何用web表格控制項FineReport做web表格
新建數據集
效果圖中，報表塊裡面要顯示訂單明細數據，根據客戶ID進行過濾，新建數據集ds2：select * from 訂單 where 客戶ID='${company}'，company默認值為VINET.
表樣設計
如下圖所示，設計表樣：
如何用web表格控制項FineReport做web表格
點擊左下角的表單按鈕回到表單的設計界面，選中報表塊，可在右側的屬性表中設置其報表塊工具欄是否可見，如下圖：
如何用web表格控制項FineReport做web表格
圖表塊
滑鼠選中圖表塊所在區域，為該圖表綁定數據，圖表數據源來源於數據集數據源，其分類系列設置如下：
如何用web表格控制項FineReport做web表格
條件屬性
由於該圖表塊類型為組合圖，即需要通過圖表條件屬性來修改不同系列的圖表類型，如下圖，新增一個條件屬性，設置當系列序號為3的時候，其坐標軸為次坐標軸，圖表類型為折線圖：
如何用web表格控制項FineReport做web表格
13
註：設置條件選擇系列序號的時候需要與數據綁定時的數據列順序相匹配，在上圖設置圖表數據時，庫存量、成本價和單價的系列序號依次為1、2、3，條件屬性主要是設置庫存量系列用柱形圖展示，成本價和單價用折線圖展示並使用次坐標軸。在添加一個組合圖時，會默認添加2個條件屬性，詳細請查看組合圖
到此為止，表單就已經製作好了。
B. Web表單設計—點石成金的藝術（一）
最近在讀《 Web表單設計—點石成金的藝術 》一書，頗受啟發。而且該書目前已經買不到了，好像二手書也買不到，特意找了pdf掃描版來讀，讀書過程中的一些感悟跟大家分享。
一、表單的設計
大多數人都不喜歡填寫表單，這也就說明了應該關注優秀表單設計。
而很多的特定數據來源都提供了衡量表單設計影響的方式：
（1） 可用性測試 （觀察人們與表單如何交互）
（2） 實地測試 （從人種學角度觀察人們在家中或辦公室中與表單互動的情況；）
（3） 客戶支持 （了解客戶填寫表單時遇到的問題）
（4） 網站追蹤
（5） 眼動跟蹤 （記錄人們如何理解表單的表現形式）
（6） Web慣例 （即查看該問題的通用解決模式，可理解為分析競爭對手的解決方案）
二、表單的組織
類似標簽後面是否要防止冒號的問題，用戶真的不關心。用戶關心的是問題內容和所問的原因。
有些欄位需要告訴用戶填寫的原因（ 為什麼問這些問題，能為用戶帶來的好處 ），如果不能回答，就要考慮是否真的需要這個欄位。
表單所提的問題即 標簽要盡量的簡潔清晰 。
如果簡潔的標簽容易引起用戶的誤會，應該 嘗試使用自然語言的方式 。
表單較長或較復雜時應 考慮對表單內容進行分組 ，有助於瀏覽和快速完成填寫。
有些時候很多問題需要按順序回答，否則回答就沒有意義。這時候人們需要看到所有問題，一個較長的網頁是好的解決方案。通常這些問題會和一個主題相關。
有些 可選問題在表單填寫完成後再問比較好 ，如「您如何知道我們」或者「您想進一步了解我們嗎」。這樣會比初始表單就提問能獲得更多的答案。
可以通過Web慣例調查， 比較相似網站的設計方案 ，引導發現網上已經形成的常見表單組織結構，但是也要結合自身情況不要只停留在簡單復制競爭對手。
對表單進行分組時， 每個內容組都從視覺上區別於表單的其餘部分 ，但是對比太多也可能造成視覺污染，阻礙人們瀏覽表單。
信息設計專家愛德華,托佛特認為，信息由產生作用的差異構成，任何無助於布局的頁面元素都會損壞布局。 採用最好的必要視覺信息來區分內容組 。
英文網站， 標簽首字母應當大寫 ，使內容組更容易瀏覽。
最後，祝大家六一兒童節快樂！永葆童心~
C. 關於Web表單設計的經驗分享
表單在UI設計中的出現場景還是比較多的，尤其是在一些To B的產品設計中。最近自己有做大量web 表單設計，就想把自己學到的一些關於表單設計的知識點分享給大家～
一、什麼是表單？
表單在網頁中的主要功能是負責採集數據以及向伺服器傳送數據的。表單是採集用戶信息數據重要的途徑。好的表單設計能提升信息採集的效率與成功率。不好的表單設計會影響用戶心情，體驗差，導致信息採集不成功甚至帶來利益的損失。
二、表單的構成
表單通常由標簽、輸入域、操作按鈕、這三部分構成。
標簽
標簽我們可以把它理解為標題，告訴用戶該表單需要填寫什麼信息、該表單需要採集什麼內容。標簽通常出現在輸入域的左邊、頂部、或者輸入域內。
標簽按所填信息的必要性分為必填項和非必填項，一般我們會在必填項的標簽內容加上＊號。＊號的的擺放位置有下面兩種情況：
1.當標簽與輸入域居中對齊時，建議把＊號放在標簽左側。
因為＊號比較顯目，用戶往往第一眼會先看到它，然後按照用戶從左往右的閱讀習慣，視覺落點分別為文字標簽、輸入域。考慮到表單的填寫效率，＊號位於左側的表單閱讀起來會更加順暢。所以當標簽與輸入域居中對齊時，把＊號放在標簽左側會更好。
2.當標簽與輸入域左對齊時，建議把＊號放在標簽右側。
由於人們縱向的閱讀習慣，視線會成F型。＊號在左側還是在右側並不會對用戶視覺落腳點造成太多困擾，另外考慮到對齊的形式，＊號放在標簽右側會更好。
輸入域
輸入域是錄入用戶各種類型信息的重要交互區域。輸入域包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框、和文件上傳框等等。
不知道這些輸入域的區別的小夥伴可以去ant design官網學習一下，傳送門：
https://ant.design/components/overview-cn/
因為輸入域是錄入信息很重要的交互區域，在設計時我們應該考慮用戶輸入的多種場景去設計。我們可以將用戶的輸入過程分為輸入前、輸入中、輸入後。根據每一種場景中細化我們的設計。比如在輸入中：我們要考慮游標的設計、輸入文字信息的設計，信息提示等，在輸入後：我們要考慮信息輸入錯誤應該給予怎樣的視覺反饋等。總之考慮得越細致，越能提高信息錄入的成功率。
操作按鈕
操作按鈕是在用戶填寫完表單各項內容後，所要進行的操作動作，來完成或者結束當前操作流程。操作按鈕分為全局操作按鈕與局部操作按鈕。全局操作按鈕控制整個表單，比如提交、發送等操作按鈕。局部操作按鈕是對某一范圍的內容起作用，比如編輯、刪除操作。
三、表單設計常見問題
1.標簽採用哪種對齊方式更好？
在我們的實際項目中，通常會因為文案的長短不一，導致我們不知道該採用哪種對齊方式。標簽的處理原則就是要要盡量對齊，採用哪種對齊方式應考慮具體的制約因素和目標來定。
左對齊
當標簽採用左對齊的方式的時，因為文字標簽的長度不統一，導致標簽與輸入框的間距是不可控的。這就會造成設計的通用性不強，以及橫向空間的浪費。
如果採用左對齊的形式，就要盡量去保持文字標簽的長度一致，比如通過字距的調整讓文字標簽的長度保持一致或者通過留足留白空間，這樣設計上會更統一。以為例，採取左對齊形式，但是它留足了文字標簽與輸入域之間的距離，讓表單看上去更統一和諧，不足的就是造成了部分空間的浪費。
頂對齊
採用頂對齊的形式，會讓標簽和輸入域垂直顯示，縱向布局的信息呈現效果會更好，從而提高用戶填寫的效率。頂對齊因為垂直排布，會造成縱向空間的浪費，但在橫空間上比較節省，比較適用於橫向寬度較窄的頁面。
▵頂對齊
右對齊
右對齊跟左對齊一樣會因為標簽長度不可控。導致設計的通用性不強，以及橫向空間的浪費，但節約了縱向空間。
▵右對齊
在這幾種對齊方式中，用戶瀏覽信息的速率頂對齊>右對齊>左對齊。頂對齊形式適合簡易表單、右對齊與左對齊表單適合復雜表單。
2.操作按鈕應該用哪種設計形式比較好？
對於全局的操作按鈕會用常規的按鈕樣式，全局按鈕分為主按鈕與次按鈕。
主按鈕
主按鈕是界面中比較重要的功能操作按鈕，比如提交、保存等一些正向的操作。主按鈕在視覺層級上最高，能夠引導用戶很快的找到核心的操作並點擊。主按鈕通常是純文本或圖文結合的面性形式。圖文結合的形式能吸引用戶注意，也幫助用戶理解該按鈕的操作含義。
次按鈕
次按鈕的層級相對於主按鈕層級要弱一些，通常採用線性形式。在一個頁面中可以出現多個次按鈕。
對於局部操作按鈕的設計形式可以是文字按鈕、圖標按鈕，也可以是圖標＋文字的形式。至於應該應用哪種形式就要結合具體端場景去考慮。
圖標按鈕
圖標按鈕就是用圖標來代表該操作的含義，能夠直觀的表達按鈕的功能。在設計的時候我們需要注意圖標是易於理解的、是用戶熟悉的。圖標按鈕的設計通常都會配上懸浮框設計，也就是當用戶滑鼠停留在該圖標按鈕上會出現對該按鈕的文字釋義的懸浮框。以微信公眾號為例，當滑鼠停留在編輯圖標那時會出現黑色的懸浮框對其進行解釋，讓用戶理解此按鈕的意義，讓用戶放心操作。
在web設計中，由於按鈕的種類與使用場景比較多，建議局部的操作按鈕使用線性圖標，讓它的層級相對其他按鈕要弱化一些。
文字按鈕
文字按鈕通常出現在列表的操作項中。文字的顏色通常是品牌色或者藍色，因為藍色在用戶的認知中通常是可點擊的。
圖標＋文字 按鈕
圖文結合的按鈕相對於純文字按鈕會更加直觀，也能更吸引用戶注意。
3.輸入框應該設計幾種狀態？
考慮的狀態越多，設計就會越細，能夠及時的反饋信息給用戶，從而提高表單填寫效率。在考慮輸入框的設計狀態時，遵循及時反饋的設計原則去考慮。
為了避免用戶填寫完所有信息後，才反饋有錯誤，會造成時間浪費，表單填寫效率低。通常會把輸入框線變成紅色，同時出現紅色的說明文案，來引起用戶的注意。
▵及時反饋錯誤信息
在設計中我們還需要考慮自動校驗的成功與警告狀態。顏色通常為綠色與橙色。
輸入框到底應該設計幾種狀態我們也需要根據我們表單的復雜情況去考慮，對於簡單的表單設計過於細化的狀態是沒有必要的。
寫在最後的話
表單設計看起來簡單，但實際在設計過程中還是有大量的點值得我們去學習與研究的。在這次做表單的過程中，覺得作為設計師我們不應該去挑活，不要覺得表單設計是一個很小的設計就不動腦的照著別人的設計規范抄一遍。像這種看似枯燥但又很重要的模塊設計，我們在前期開始設計之前可以從交互層去考慮，再從視覺層面去考慮怎樣的表單設計能讓用戶填得舒心又高效。在看別人的設計規范比如ant design的組件規范時，我們可以去留意他們的設計細節，比如表單上下之間的間距留的是多少？有什麼規律嗎？按鈕的上下邊距與左右邊距有什麼關系嗎？通過這些思考，然後去觀察總結，並轉化為自己的小技巧，到下一次設計表單的時候，我們就會做得很好了。
往期解析
UI設計－首頁解析
詳情頁設計技法解析
輕松get文字標簽設計技法
Get點9切圖方法（內附切圖神器）
D. 【網頁設計規范】網頁設計規范尺寸
摘 要
隨著網路的快速發展，慧巧老互聯網的應用越來越貼近生活，越來越多的人假如到了
製作網頁的工作中，各式各樣的網站如雨後春筍般出現在互聯網上。網路技術的發
展帶動了軟體業的發展，所以用於製作Web頁面的工具軟體也越來越豐富。從最基
本的HTML編輯器到現在非常流行的Flash互動網頁製作工具，各種各樣的Web頁
面製作工具，而吸引瀏覽用戶的則是視覺效果出色、信息量豐富、使用起來便捷的
網頁，所以網頁設計尤為重要。互聯網成為人們快速獲取、發布和傳遞信息的重要
渠道，它在人們政治、經濟、生活等各個方面發揮著重要的作用。網頁設計伴隨著
網路的快速發展而快速興起，作為上網的主要依託，由於人們使用網路的頻繁而變
得非常的重要。網頁講究的是排版布局，其功能主要就是提供一種形式給每個上網
者，讓他們能夠了解網站提供的信息。
關鍵字：網頁設計，基本寬埋構成，注意事項，FRONNPATE
Abstract
groups with the rapid development of the network, the application of the Internet
more and more close to the life, more and more people to make a web page work if,
various web sites springing up appeared on the Internet. The development of Internet
technology driven the development of the software instry, so used to make Web page
tool software is also more and more colorful. From the most basic HTML editor to now
very popular Flash interactive Web page creation tools, various Web page making tools,
and attract users powse the visual effect is excellent, rich information, use rise
convenient Web page, so Web design is especially important. The Internet become people
to quickly get, distribution and transfer information important channel, it people in
politics, economy, life and other aspects played an important role. Web design with the
rapid development of network and rapid rise, as the main rely on the Internet, because
people use the Internet frequent and become very important. Web cultured is typesetting
layout, its main function is to provide a form for each user, to let them know the
information provided on this site.
Keywords: SITE DESIGN，CONSIDERATIONS，BASIC FORM，FRONNPATE
目前升 錄
第一章 網頁的相關概念..................................................................................................1
1.1 什麼是網頁...................................................................................................1
1.2 網頁的構成...................................................................................................1
1.3 常見的網頁版式類型...................................................................................2
第二章 常用的製作工具..................................................................................................3
2.1 Macromedia公司出品的Flash互動網頁製作工具 ....................................3
2.2 Macromedia Dreamweaver 8 .........................................................................3
2.3 HTML編輯器 ...............................................................................................3
2.4 網頁編輯器...................................................................................................3
第三章 網頁設計的要素................................................................................................4
3.1 關於文字.......................................................................................................4
3.2 圖片要素.......................................................................................................4
3.3 排列方法要素...............................................................................................4
3.4 色彩要素.......................................................................................................5
第四章 網頁設計的技巧................................................................................................6
4.1 框架的使用...................................................................................................6
4.2 顏色的搭配...................................................................................................6
4.3 CSS樣式的使用 ...........................................................................................7
第五章 網頁的注意事項....................................................................................................8
5.1 網頁內容要新穎...........................................................................................8
5.2 網頁的布局...................................................................................................8
5.3 整體歸納.......................................................................................................9
第六章 總 結................................................................................................................10
致 謝................................................................................................................................ 11
參考文獻............................................................................................................................12
第一章 網頁的相關概念
1.1 什麼是網頁
網頁(Web Page)其實就是一個用來傳輸各種信息的文件，它能在網上傳輸並被瀏覽器識別和翻譯成頁面，然後顯示在計算機屏幕上。簡單的說，通過瀏覽器在WWW上所看到的每一幅畫面都是一個網頁。網頁是網路上的基本文檔。網頁中包含文字，圖片，聲音，動畫，影像以及鏈接等元素，通過對這些元素的有機組合，構成了包含各種信息的網頁。其中，文字是網頁中最常用的元素。圖片可以給人以生動直觀的視覺印象，適當運用圖片可以美化網頁。鏈接的設計，可以使我們進行選擇性的瀏覽。聲音，動畫等多媒體信息的加入，使網頁內容更加豐富多彩。
1.2 網頁的構成
不同性質的網站，構成網頁的基本元素是不同的，一般情況下，網頁的構成包括網頁標題，網頁標志，橫幅廣告，導航欄，主內容區，頁腳版權信息等。
1.網頁標題
網站中的每一個頁面都有標題，用來提示該頁面的主要內容。標題出現在瀏覽器的標題欄中，而不是出現在頁面布局中。它的一個比較重要的作用就是引導訪問者清楚的知道所要瀏覽的網頁的內容。
2.網頁標志
網頁標志是一個站點的象徵，也是一個站點是否正規的標志之一。一個好的標志可以很好的樹立形象。網頁標志一般放在網站的左上角，訪問者一眼就能看到它。
3.橫幅廣告
橫幅廣告（Banner）是互聯網廣告中最基本的廣告形式。Banner可以位於網頁頂部，中部或底部的任意一處，一般橫向貫穿整個或者大半個頁面。
4.網頁導航欄
導航欄既是網頁設計中的重要部分，又是整個網站設計中較為獨立的部分。一般來說，網站中的導航欄在各個頁面中出現的位置是比較固定，而且風格也較為一致。
5.主內容區
網頁的主內容區是網頁的主要內容顯示區域。
6.頁腳版權信息
頁腳是放置網站版權信息的地方，可以放置一些聯系方式或其他的導航欄目。
1.3 常見的網頁版式類型
網頁內容在頁面上有規則的排列布置，就稱為網頁的排版。網頁版式類型就是各種不同排版方式的組合。網頁的版式是可以隨心所欲設計的。一般可以分為滿版型，左中右型和上左中右型。
第二章 常用的製作工具
2.1 Macromedia公司出品的Flash互動網頁製作工具
這是是一款功能非常強大的互動式矢量多媒體網頁製作工具。能夠輕松輸出各種各樣的動畫網頁，它不需要特別繁雜的操作，也比JAVA小巧精悍！但它的動畫效果、互動效果、多媒體效果十分出色。並且由於Flash編制的網頁文件比普通網頁文件要小得多，所以加快了瀏覽速度。這是一款十分適合動態Web製作的工具。
2.2 Macromedia Dreamweaver 8
Macromedia Dreamweaver 8是一款專業的網頁設計軟體，它採用所見即所得的編輯方式，用於對Web站點，Web頁和Web應用程序進行設計，編碼和開發，利用它可以輕而易舉的製作出充滿動感的網頁。利用Dreamweaver 8的可視化編輯功能，用戶可以快速創建Web頁面而無需編寫任何代碼，用戶可以查看所有站點元素或資源並將它們從易於使用的面板直接拖到文檔中。
2.3 HTML編輯器
雖然HTML代碼復雜，編輯和調試要花費大量的時間，但因HTML的穩定性、廣泛支持性及可創建復雜的頁面效果，仍受高級網頁製作人員的青睞。就目前來說，有眾多的編輯器供選擇，這些編輯器廣泛支持復雜頁面創建及高級HTML規范。
2.4 網頁編輯器
其中以Microsoft Frontpage為代表，它具有如Word一樣的操作界面，熟知Word功能的操作者，只要稍加培訓就能輕松編制網頁。而且，Frontpage還能解析網頁的HTML源代碼，並提供了預覽支持。但Frontpage的一些特殊顯示功能並不能在其它非IE瀏覽器下實現。所以Frontpage是一款非常適合初、中級網頁製作人員使用的工具軟體。
第三章 網頁設計的要素
3.1 關於文字
文字是美好事物最基本的方式，在網頁中，文本內容也是最重要的組成部分，最美觀，最整齊的方式放入到網頁中，才能構成一個美觀的頁面。有的設計者想通過閃爍的文字來引起訪問者的注意是可以被人理解的，但一個頁面中最多不能有三處閃爍文字，太多了給用戶一種眼花繚亂的感覺，反而會影響用戶去訪問該網站的其他內容，正所謂「物極必反」也。
雖然你可以在你的HTML中使用特殊的字體，但是，你不可能預測你的訪問者在他們的計算機上將看到什麼。在你的計算機里看起來相當好的頁面，在另一個不同的平台上看起來可能非常糟糕。一些網站設計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的計算機上不能顯示。所以用普通的文字進行製作是最保險也是最方便的。
3.2 圖片要素
要設計出漂亮的主頁，首先要成為計算機圖形高手，僅這一點就可以讓初學者花上一年半載的時間。圖片的要求與頁面的內容有關，一些較隨意的主頁像股票、醫葯站點等，來訪者並不在乎你能否做出精彩的圖片，有些時候他們反而覺得放置圖象後影響了訪問速度，他們關心的只是頁面內容；相反像一些需要靠圖象來吸引訪客的主頁，如游戲介紹、影視介紹、風光名勝等站點，圖象是一個極為重要的要素，在這里缺少了恰當的圖象，整個頁面就會黯然失色、就是一個不完整的主頁。這需要去學習像photoshop這樣的圖形圖像處理軟體，還要有一定的美術基礎，如審美觀、創意技巧等。如果給每個圖形加上文字的說明，在出現之前就可以看到相關內容，尤其是導航按鈕和大圖片更應如此。這樣一來，用戶在訪問你的站點時就有一種親切感覺，認為你心細，比較善解人意，時時刻刻為他人著想，相信你的好心會有好報的。
3.3 排列方法要素
主頁的第二個要素是排列方法，即網頁布局。網頁作為一種版面，既有文字，
又有圖片；文字有大有小，還有標題和正文之分；圖片頁有大小而且有橫豎之別。圖片和文字都需要同時展示給觀眾，不能簡單地將其羅列在一個頁面上，否則會搞得雜亂無章。關於具體的網頁布局，常見的有「國」字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等，關於它們，在網頁設計的相關書籍中或者在網路上都可以看到詳細的敘述。比如如果內容非常多，就要考慮用「國字型」或拐角型；而如果內容不算太多而一些說明性的東西比較多，則可以考慮標題正文型；而如果是一個企業網站想展示一下企業形象或個人主頁想展示個人風采，封面性是首選；Flash型更靈活一些，好的Flash大大豐富了網頁，但是它不能表達過多的文字信息。還沒有提到的就是變化型了，只有不斷的變化才會提高，才會不斷豐富我們的網頁。
3.4 色彩要素
色彩在網頁所佔比重很大。有了合理清新的色調，會彌補主頁上的其它不足。頁面的色彩搭配是與網站的主題分不開的，一個網站必須有一種或兩種主題色。不至於讓瀏覽者迷失方向，也不至於單調乏味。一般來說，頁面的主體文字應盡量使用黑色等較深的顏色，與背景對比明顯，按鈕、邊框等使用彩色。例如教育類網站使用藍色為主題色，再用紅色和黑色作為配色，就能表達出嚴肅、穩重的效果。
第四章 網頁設計的技巧
4.1 框架的使用
框架（FRAME）是Web上經常會看到的頁面結構。框架的最常見用途就是導航。一組框架通常包括一個含有導航條的框架和另一個要顯示主要內容頁面的框架。
使用框架具有以下優點：訪問者的瀏覽器不需要為每個頁面重新載入與導航相關的圖形；每個框架都具有自己的滾動條(如果內容太大，在窗口中顯示不下)，因此訪問者可以獨立滾動這些框架。例如，當框架中的內容頁面較長時，如果導航條位於不同的框架中，那麼向下滾動到頁面底部的訪問者就不需要再滾動回頂部來使用導航條。
使用框架具有以下缺點：可能難以實現不同框架中各元素的精確圖形對齊；對導航進行測試可能很耗時間。
許多專業 Web 設計人員不喜歡使用框架，並且許多瀏覽 Web 的人也不喜歡框架。在大多數情況下，這種反感是因為遇到了那些使用框架效果不佳或不必要地使用框架的站點(例如，每當訪問者單擊導航按鈕時就重新載入導航框架內容的框架集)。如果框架使用得法(例如，在允許其他框架的內容發生更改的同時，使一個框架中的導航控制項保持靜態)，則這些框架對於某些站點可能非常有用。
4.2 顏色的搭配
做網頁的初學者可能習慣使用一些漂亮的圖片作為自己網頁的背景，但是瀏覽了一下大型的商業網站，你會發現他們更多運用的是白色，藍色，黃色等，使得網頁顯得很典雅溫馨。我們可以使用一些簡單的配色技巧來使我們的網頁看起來美觀大方。
1.用一種色彩
這就是指先選定某一種色彩，然後通過講色彩變淺或者加深的方法以產生新的色彩，這樣會讓人看起來比較統一。例如以咖啡色為基調，整體上的色彩都以咖啡色為主，給人的視覺效果是一種古樸的氣息迎面撲來。
2.用黑色和一種彩色
一般來說，網頁的背景色應該柔和、淡素一些，再配上深色的文字，使人看起
來自然、舒暢。而為了追求醒目的視覺效果，可以為標題使用較深的顏色。例如以黑色為底色，襯以亮黃色，這樣配出來的效果會讓人感覺別具一格。
3.用兩種色彩
可以先選擇一種色彩，然後再選擇其對比色，這樣選出的色彩豐富但不雜亂。例如以橙色和藍色相結合作為主色彩的網頁，通過橙色和藍色在網頁上的對比能迅速傳達網站主題內容，容易增添強烈的興奮度，多用於內容是食品、休閑娛樂、產品等的網站。
4.3 CSS樣式的使用
CSS(層疊樣式表)是一種製作網頁的新技術,它的全稱是級聯樣式表,即Cascading StyleSheets的縮寫，又稱之為風格樣式表單。CSS是在網頁製作過程中普遍用到的技術。採用了CSS技術控制的網頁，設計者會更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景以及同一頁面的不同部分、不同頁面的外觀和格式等效果實現更加精確地控制。
第五章 網頁的注意事項
5.1 網頁內容要新穎
1.網頁內容的選擇要不落俗套，要重點突出一個「新」字，這個原則要求我們在設計網站內容時不能照抄別人的內容，要結合自身的實際情況創作出一個獨一無二的網站。 放眼望去，網上的許多個人主頁簡直就是"雜貨店"，內容包羅萬象題材千篇一律，人人都是"軟體下載"個個都有"網路導航"，從頭到尾找不出一絲「鮮」意。所以，我們在設計網頁時，要把功夫下在選材上。選材要盡量做到「少」而「精」又必須突出「新」，如能堅持天天更新的話我相信這樣的網頁一定會受到大家的歡迎。
2.網頁製作好後，不能說萬事大吉了，其實事後的工作量更大。因為網頁製作是一時的，而維護更新的工作是每天都要做的。要及時把網頁上已經作廢的連接應該立即刪除掉，比如用戶無意中點擊了頁面中的一個連接，在苦苦的等待之後，換來的是無法訪問的結果，那麼他們會對你的網頁大失所望，可能以後再也不會光顧你的網頁了。若不能及時更新，也最好在主頁上發布信息，告訴前來訪問的朋友，因有特殊情況需要離開一段時間，未能及時更新主頁，希望各位見諒，這樣就能給人一種對別人負責的感覺，同時能得到網友的信任。
5.2 網頁的布局
1.善用表格布局。不要把一個網站的內容象作報告似的一二三四地羅列出來，要注意多用表格把網站內容的層次性和空間性突出顯示出來，使人一眼就能看出你的網站重點突出，結構分明。
2.注意視覺效果。設計Web頁面時，一定要用640×480和800×600的解析度來 分別觀察。許多瀏覽器使用640×480的解析度，盡管在800×600高解析度下一 些Web頁面看上去很具吸引力，但在640×480的模式下可能會黯然失色。作一點小小的努力，設計一個在不同解析度下都能正常顯示的網頁。
3.少放網站地圖。許多設計者把他們的網站地圖放在網站上，這種做法，卻是弊大於利。絕大部分的訪問者上網是尋找一些特別的信息，他們對於你的網站是如何工作的，並沒有興趣。如果你覺得你的網站需要地圖，那很可能是需要改進你的導航和工具條。
5.3 整體歸納
1.內容要通俗易懂。網站設計最重要的訣竅，恐怕就是你的網頁要易讀 。這就意味著&def你必須花點心思來規劃文字與背景顏色的搭配方案。 注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起來你的網頁來很費勁。一般來說，淺色背景下的深色文字為佳 。這個要點要求你最好別把文字的規格設得太小、也不能太大。文字太小，人家讀起來難受；文字太大，或者文字視覺效果變化頻繁，像是沖著人大喊大叫，看起來不舒服。另外，最好讓文本左對齊，而不是居中。按當代中文的閱讀習慣，文本大都居左的。當然，標題一般應該居中，因為這符合讀者的閱讀習慣。
2.多學習使用HTML。為了成功地設計網站，你必須理解HTML是如何工作的。大多數的網站設計者建議網路新手應從有關HTML的書中去尋找答案，用Notepad製作網頁。因為用HTML設計網站，可以控制設計的整個過程。但是，如果你僅僅是網站設計的新手，你應該尋找一個允許修改HTML的軟體包。HomeSite4是一個很好的Web設計工具。在設計過程中，HomeSite4能幫助你學習HTML。它還允許你切換到所見即所得的模式，以便你在把網站發送到Web之前，預覽你的網站。
3.少用Java程序。不要使用大幅面的Java程序&def能夠用javascript替代效果的則盡量不要使用java.因為目前來講java的運行速度實在慢的讓人無法忍受，往往使瀏覽者沒有耐心等頁面全部顯示出來，這樣你的精心設計便毫無效果啦。
第六章 總 結
網路技術的發展帶動了軟體業的發展，所以用於製作Web頁面的工具軟體也越來越豐富。從最基本的HTML編輯器到現在非常流行的Flash互動網頁製作工具，各種各樣的Web頁面製作工具。
當你在INTERNET這個信息的海洋中盡情遨遊時，會發現許許多多內容豐富、創意新穎、設計獨特的個人網頁，不知道你見到這樣漂亮可人的網頁是否有點心動。一旦你具備了上網的條件，又萌發了製作主頁的念頭，那麼就應該注意網頁設計時應考慮哪些方面的問題，包括網站功能和以及訪問者需要什麼。你的整個設計都應該圍繞這些方面來進行。
在一個網站中，最重要的頁面當屬主頁，所以在此以主頁為例，說明在網頁製作中版面設計的問題。從版面設計來講,一個有特色的主頁,必須包含有四個要素：文字，圖片，排列方式和主色調，這四者相輔相成，缺一不可。
致 謝
對於本次畢業設計，我付出了很大的努力才完成。同時也體會到了收獲的喜悅。 當然，設計的很大的一部分是得到了秦洪濤老師的大力支持與指導，秦老師認真負責的工作態度，嚴謹的治學精神和深厚的理論水平都使我受益匪淺。他無論在理論上還是在實踐中，都給予我很大的幫助，使我得到不少的提高，這對於我以後的工作和學習都有很大的幫助，感謝他耐心的輔導。
同時也感謝所有幫助我修改論文的同學們，感謝他們的幫助與支持。
參考文獻
[1]《中國 檔案管理精覽》，北京：中國檔案出版社，2009．
[2] 沈慶偉，張霖．基於隧道的IPV4/IPV6過渡技術分析[J]．計算機技術與發展，2008
[3]中文Access 2000 24學時教程 作者：Craig Eddy ，Timothy Buchanan出版社：機械工業出版社
[4]劉韜,駱娟等.Visual Basic 實效編程百例（第二版）.人民郵電出版社，2009.8
[5]李維.面向對象開發實踐之路（visual basic 6.0版）(BORLAND資深顧問著名visual basic 6.0專家李維最新力作).電子工業出版社，2009.4
[6]KAYEYAMA M. Incompatible displacement methods[A].SPRIET JA.Numerical anComputational Methods
[7]in Structural Mechanics[C].New York:Academic Press,2007.43-57.