畢業(yè)論文-設計用戶登錄界面

1、畢業(yè)論文 設計用戶注冊頁面在之前的章節(jié)中，已經介紹了用戶登錄界面的設計，事實上在用戶登錄網(wǎng)站之前，往往還 需要訪問用戶注冊的頁面，注冊為網(wǎng)站的會員。使用Dreamweaver的文本區(qū)域表單組件和菜 單/列表表單組件，以及之前介紹的文本字段組件和按鈕組件，可以方便地制作各種用戶注冊 的頁面，如圖6-36所示。圖6-36用戶注冊頁面1設計思路用戶注冊頁面也是互聯(lián)網(wǎng)中最常見的用戶交互頁面類型。其與用戶登錄網(wǎng)站類似，都是提 供一些表單供用戶填寫，通過網(wǎng)頁獲取用戶填入的信息，再把用戶信息寫入到網(wǎng)站的數(shù)據(jù)庫中。 用戶注冊往往是網(wǎng)站用戶系統(tǒng)中與用戶交互的第一步。具有十分重要的作用。1.用戶注冊頁面分析在設計

2、用戶注冊頁面時，首先需要設計具體的注冊填寫項目，包括各種必填項目、選填項 目等。設計項目時不能盲目的設計，而應參考以下一些規(guī)范。設計項目應目的明確設計注冊填寫項目時，應該有明確的目的。每一個需要用戶填寫的內容，都應該是網(wǎng)站經 營者需要獲得的信息，而不是無聊的玩笑。一些小網(wǎng)站往往要求用戶填寫數(shù)頁的注冊信息內容， 將其保存起來，卻從來不對這些信息進行分析和總結，這樣的注冊沒有任何意義，反而延長了 用戶在注冊網(wǎng)站時花費的時間，給用戶造成很壞的印象。為什么需要用戶注冊？通?；ヂ?lián)網(wǎng)中各種經營性的網(wǎng)站獲得用戶信息有許多種，例如，獲 得用戶的聯(lián)系方式（電話號碼，手機號碼，電子郵件，通信地址等）喜好和習慣（生

3、活規(guī)律， 業(yè)余愛好，擅長領域，工作習慣等）、個人信息（教育程度，社會階層，職業(yè)年齡，性別經歷 等）、真實身份（身份證號，學生證號，工號帳號，其他身份等）獲取的這些信息都應該與網(wǎng) 站的經營目的有關，如圖6-37所示。圖6-37網(wǎng)站注冊項目的作用在設計網(wǎng)站注冊的填寫項目時，應量體裁衣，根據(jù)網(wǎng)站用戶的性質歸化注冊項目，盡量避 免無意義的注冊項目，防止這些既浪費用戶時間，又占用數(shù)據(jù)庫的空間的項目產生，降低網(wǎng)站 系統(tǒng)的運營效率。設計項目應精簡易填網(wǎng)站的注冊項目還應該通俗易懂。網(wǎng)站所需要面對的并不只是局限于專業(yè)用戶。過于艱深 的詞匯可能造成用戶誤解，以致注冊無法進行。因此，能使用中文時盡量使用中文，能使用

4、簡 單的詞匯，盡量少使用術語。例如，大多數(shù)網(wǎng)民都了解Email代表電子郵件，因此在要求用戶填寫電子郵件時，可使用 Email，也可使用“電子郵件地址”等。然而，對于一些英語不是很熟悉的用戶而言，很少有 人知道“Zip code”的含義，因此應以“郵政編碼”作為代替。由于國內大多數(shù)用戶使用的是漢字而非26個拉丁字母，因此在填寫各種問題和答案時， 需要比歐美人多開啟一次輸入法。因此如果不是十分必要，在注冊時盡量少使用直接的問題， 而應提供盡量詳細的選項供用戶選擇，使用戶免于輸入的麻煩。在國內很多中年網(wǎng)民的打字速度很慢，甚至完全不會打字。因此，大量需要用戶輸入的注冊選項 “無疑會給這些用戶造成很大的

5、困難。而網(wǎng)站界面設計中，應盡量避免這種情況的發(fā)生。提示注冊項目應有詳細注釋即使已經使用非常簡單的語言編寫了設計的項目，仍然應該為用戶提供詳細的注釋內容， 幫助用理解項目的含義，以及填寫項目時所采用的格式等。例如，在用戶名的注冊項目中，應清晰地描述用戶名可使用的字符，包括是否允許使用中 文，是否允許使用數(shù)字，是否允許使用標點符號，以及允許多少位字符等。而在密碼的設置中， 也應注明密碼允許的位數(shù)和字符。同時，還應提供確認密碼的選項，強制用戶再次輸入一次密 碼，防止用戶在注冊時使用了錯誤的密碼，造成以后無法登錄。對于一些存在多種格式的信息，應提供一些示例范本。防止用戶輸入錯誤的格式導致無法 注冊。例

6、如，在填入日期時，提供注釋“1970/1/1 ”等。對于一些比較隱私的信息，例如，婚姻狀況、手機號碼、家庭地址、工作單位、真實姓名 等，應在注釋中強調，網(wǎng)站不會將其泄漏，以打消用戶的顧慮?；蛱峁氨Ｃ堋钡倪x項供用戶 選擇，再或者將其設置為選填，允許用戶不填。對于一些需要輸入大量文本內容的項目，應提供限制字數(shù)的提示信息，防止用戶輸入過多 的文本而導致無法注冊。同時，還應該將必填文本和選填文本作出區(qū)分，并提供說明。2.本實例分析本實例設計了一個古典文化網(wǎng)站的用戶注冊界面。在設計該網(wǎng)站時，運用了許多中國古典 風格的圖像（如各種寫意風格的繪畫元素以及中國古典特色的物品、修飾等），以突出中國古 典特色。

7、在設計網(wǎng)站的Logo時，使用了金文作為Logo文字的字體，為字體添加了深褐色的顏色 并設置金黃色的發(fā)光特效和灰色的投影特效，模擬金屬雕刻的風格。同時為Logo右側的小標 題添加了印章風格的背景，更增添古典意味，如圖6-38所示。圖6-38中國古典風格的Logo在設計網(wǎng)頁的導航條時，為了使導航條更具有中國古典風格，為字體應用了豎排的排版方 式，并為其應用了隸書字體，模仿古代竹簡的書寫方式。（由于很多用戶的計算機并未安裝這 一字體，因此在此使用了整幅的導航條圖像，同時為圖像添加了熱區(qū)，以實現(xiàn)分塊鏈接。）如圖6-39所示。圖6-39豎排隸書的導航條為體現(xiàn)整個網(wǎng)頁的中國古典風格，在導航條的右側添加了一

8、幅寫意風格的國畫，其內容為 河水、小島、漁船和飛鳥等，將導航條襯托得更加美觀，如圖6-40所示。圖6-40導航條右側的國畫為使網(wǎng)頁的Logo、導航條與網(wǎng)頁的主題部分之間有一個清晰的分界，在設計用戶注冊網(wǎng)頁時，為其添加了一行青銅色的中國風格磚瓦圖像分界線，既將Logo/導航條與網(wǎng)頁的主題部 致，如圖6-41所示。分分離開來，又可以與網(wǎng)頁的整體風格保持圖6-41青銅色磚瓦分界線分分離開來，又可以與網(wǎng)頁的整體風格保持為體現(xiàn)出網(wǎng)頁主題部分中的古典風格，在網(wǎng)頁的主題部分背景中分別添加了瀑布、遠處的 小船以及右側的山峰等寫意畫風格的圖像，如圖6-42所示。圖6-42主題部分背景在主題部分背景上可以添加一個

9、青色的雙線邊框，作為注冊表單與普通主題背景的分界 線。在該邊框中，可以添加一個半透明的白色背景，然后再插入注冊表單，如圖6-43所示。圖6-43插入的注冊表單在注冊表單的邊框右下方，可以添加一個芭蕉扇的圖標，然后在圖標上添加隸書書寫的用 戶注冊文本，作為主題部分的標題，如圖6-44所示。圖6-44設計表單的標題在設計網(wǎng)頁的版尾部分時，可以使用回紋作為主題部分與版尾部分的分隔線，將這兩部分隔開，然后，在版尾處添加墨跡的背景，以保持版尾與整個頁面的一致性，如圖6-45所示。c EtL叫rwisn MW - EDL 11 fictils rcsefRd 計庶普廈浦市兌揚屆n工化 SHiwr wsRf

10、trt siMWflr*圖6-45回紋分隔線和墨跡背景的版尾2設計過程設計用戶注冊頁面時，不僅需要使用之前章節(jié)介紹的文本字段和按鈕等表單組件，還 需要使用到項目列表選項，供用戶選擇項目填寫。同時，還需要使用文本域的組件，獲取 用戶輸入的大量文本，用于用戶的個人簡介。1.制作表單項目(1)在Dreamweaver中打開素材網(wǎng)頁，選中ID為container的div標簽，然后執(zhí)行【插 入】I【表單】I【表單】命令，為其插入一個表單容器，如圖6-46所示。k I砰奪古 戶 .州2曲;k I砰奪古 戶 .州2曲;圖6-46插入表單(2 )在【屬性】面板中設置表單的【表單ID】為regist，設置【動作

11、】為 “javascript:void(null); ”，將表單容器的動作設置為空，如圖6-47所示。圖6-47設置表單容器動作(3)將鼠標光標置于表單中，執(zhí)行【插入】|【表單】|【文本域】命令，在彈出的【輸 入標簽輔助功能屬性】對話框中設置【ID】為userName，并單擊確定，插入文本域，如圖 6-48所示。：&眨干司巴酒手號，k=f-戶a-：&眨干司巴酒手號，k=f-戶a-圖6-48插入用戶名文本域（4）選中用戶名的文本域，執(zhí)行【插入】|【HTML】|【文本對象】|【段落】命令， 為文本域應用段落，如圖6-49所示。二 Mm/.，#*- I和尸名 /扣I字而ea宇母 kt-saw to*

12、 亍#+- 0生日*1- hiiEB*- hArj此i.毋* 亍#+- 0生日*1- hiiEB*- hAr曲于里巨厝爬康毫或機止 MBS iUi目S If不案歐圖6-49應用段落（5）在文本域右側按“Ctrl+Shift+空格”組合鍵，插入一個全角空格，然后按回車鍵， 在新的行中再執(zhí)行【插入】|【表單】|【文本域】命令，插入一個ID為userPass的文本域， 并在【屬性】面板中設置其【類型】為【密碼】，如圖6-50所示。初i初i平司sr#. m=f- 捉心執(zhí)干母、*宇、TS國王既于哥廈H | 吏 口*行63 o事療朔匡總口心卜破5 命*字開鼻II N瞄0.1 sc用咽只雄即圖 6-50插入

13、密碼域圖 6-50插入密碼域（6）用同樣的方法，插入ID為“rePass”的重復輸入密碼域，并設置域的類型，如 圖6-51所示。咨Ej.亍可sr.齡、 t-frT-T T- S?Ts TJ站曰用_gg用岬辿咨Ej.亍可sr.齡、 t-frT-T T- S?Ts TJ站曰用_gg用岬辿J此U 2于取礎*% ill AH牌MW E3WOflni C#行后q: | tPTS?晚，0mg只g圖6-51插入重復輸入密碼域（7）在重復輸入密碼域的右側插入全角空格，再按回車，插入ID為emailAddress的文本域，在【屬性】面板中設置其初始值為“ ”，如圖文本域，在【屬性】面板中設置其初始值為“ ”，如

14、圖6-52所示。圖6-52設置文本域初始值（8）在電子郵件域右側插入全角空格，再按回車，執(zhí)行【插入】 菜單】命令，插入【（8）在電子郵件域右側插入全角空格，再按回車，執(zhí)行【插入】 菜單】命令，插入【ID】為bornYear的列表菜單，如圖6-53所示。圖6-53插入列表菜單|【表單】|【列表/（9）選中列表菜單，在【屬性】面板中單擊【列表值】按鈕，在彈出的【列表值】對 話框中輸入年份列表的值，如圖6-54所示。SS S3T!S6E HKI-9N1I HOI-a KI：IULliK WW1齡L9M3W1iq 用JB3S7蕓 I*- 血政I 電ISS S3T!S6E HKI-9N1I HOI-a

15、KI：IULliK WW1齡L9M3W1iq 用JB3S7蕓 I*- 血政I 電IL郵_1I-KOI做電Ias . H* iSH 1 番L _ I q 戲皆. F,日心. g叩圖6-54輸入列表值（10）在列表菜單右側輸入一個“年”字，然后用同樣的方法插入一個ID為bornMonth 的列表菜單，如圖6-55所示。 ETTFIj已酒亨毋齡、 卜用十亍祖t干甘、次、TSSi if W：A借*附A.K用的1地卜 吐 葡于快礎*% iMK牌可 襯止三昵可 iflmV. ib如曇佰幽日己.M不宴快或：圖6-55插入月份的列表菜單（11）在【屬性】面板中單擊【列表值】按鈕，在彈出的【列表值】對話框中輸入

16、月份以及月份的值等菜單內容，如圖6-56所示。I 喚 II早* Iffl?=IF.=H -A- I 喚 II早* Iffl?=IF.=H -A- .；、，圖6-56設置月份的列表（12）在列表菜單右側輸入一個“月”字，完成列表菜單的制作，并按回車鍵，在新 的行中插入ID為checkCode的驗證碼文本域，并在其右側插入一個全角空格，如圖6-57 所示。圖6-57插入驗證碼文本域（13）按回車鍵，在新的行中執(zhí)行【插入】I【表單】I【文本區(qū)域】命令，設置文本區(qū) 域的ID為introduction，然后設置字符寬度為0，行數(shù)為6，如圖6-58所示。圖6-58設置文本區(qū)域屬性（14）在文本區(qū)域右側按回

17、車鍵，在新的行中執(zhí)行【插入】I【表單】I【按鈕】命令， 插入ID為regBtn的按鈕，并設置按鈕的【值】為“注 冊”，如圖6-59所示。圖6-59插入按鈕并設置按鈕值（15）在注冊按鈕右側插入兩個全角空格，然后用同樣的方式再插入一個ID為resetBtn 的按鈕，在【屬性】面板中設置按鈕的值為“重 置”，【動作】為【重設表單】，即可完成 表單項目的制作，如圖6-60所示。圖6-60制作重置按鈕2.設置表單樣式(1)分別選中 ID 為 userName、userPass、rePass、emailAddress 和 instruction 的表單， 在【屬性】面板中設置其類為“ widField”

18、，將其寬度加大，如圖6-61所示。圖6-61增加表單寬度(2)分別選中bornYear、bornMonth以及checkCode等3個表單，在【屬性】面板中 設置其類為narrowField，將其寬度定義為80px，如圖6-62所示。圖6-62設置表單寬度(3)在驗證碼的表單右側插入12個全角空格，然后插入驗證碼的圖像，如圖6-63所件卜莘甬，包括宇母.B?.下iKt- ( Er, fW).ffi頷認蕓El件卜莘甬，包括宇母.B?.下iKt- ( Er, fW).ffi頷認蕓El旬子HUbis：W耳1 w目* 土堂*用bje皿tfiit i山更我ino 知于吊日答書.TflU宜與_h止乏尊連薊

19、.謂譚，弘死可用可刊g 倡桌:li昭以自己-濯不*歸近二咨圖6-63插入驗證碼圖像(4)單擊選擇注冊按鈕，然后在【標簽選擇器】欄中單擊按鈕所在的段落(p)標簽， 將其選中，然后在【屬性】面板中設置其ID為btnsParaph，應用預置的樣式，即可完成注 冊頁面的制作，如圖6-64所示。圖6-64應用段落樣式3知識點總結1 .文本區(qū)域在Dreamweaver中，即允許用戶為網(wǎng)頁插入普通的文本字段(文本域)，又允許用戶 為網(wǎng)頁插入更加復雜的文本區(qū)域，即多行的文本字段。插入文本區(qū)域的方式與插入文本域類似，執(zhí)行【插入】I【表單】I【文本區(qū)域】命令， 或在【插入】面板中單擊【文本區(qū)域】按鈕后，即可打開【

20、輸入標簽輔助功能屬性】對話框，在對話框中設置文本區(qū)域的ID和標簽等屬性后，即可為網(wǎng)頁插入文本區(qū) 域，如圖6-65所示。41密.E.1性.1.灣.昭.1. .1，.E.tf?A盲甚桔置株整航:解n因 11 唳 11 g 11蝴JB： pn.sTaH,林代： ffl行備行卸曜4 -t.r0無球拒尊藝S :圖6-65插入文本區(qū)域選中文本域后，用戶可以在【屬性】面板中方便地設置文本區(qū)域的屬性。文本區(qū)域的 【屬性】面板如圖6-66所示。r- 亡本散回 RDiwgt I r. WMil 心 口整用OU 口只滑中:*EMU元中年圖6-66文本區(qū)域的屬性在【屬性】面板中，文本區(qū)域比文本字段有3種屬性不同，如下

21、。文本域 該項目主要用于定義文本區(qū)域的ID屬性，供各種CSS樣式和腳本調用。字符寬度定義文本域中同一行容許的最大字符數(shù)量。行數(shù) 定義文本域中允許同時顯示的行數(shù)。文本區(qū)域與文本域可以相互轉化。在文本區(qū)域中設置【類型】為【單行】后，即可將 文本區(qū)域轉化為普通的文本域。在文本域中設置【類型】為【多行】，同樣也可以將文本域 轉換為文本區(qū)域。2.列表/菜單列表/菜單是一種選擇性的表單。其允許設置多項選項，并為每個選項設定一個值，供 用戶進行選擇。用戶可以通過VBScript或JavaScript等腳本語言讀取列表/菜單的值。在建立列表/菜單類型的表單時，可以執(zhí)行【插入】I【表單】I【列表/菜單】命令，也 可以在【插入】面板中單擊【列表/菜單】按鈕”=打 ，與插入文本域類似，都會打開 【輸入標簽輔助功能屬性】的對話框。用戶在設置了列表菜單的【ID】與【標簽】等屬性 后，即可單擊【確定】按鈕，插入列表/菜單的表單，如圖6-67所示。 I|m頃1常hn J浩牌碧暗|5.悴楠入特置利的盛司:膨性區(qū)f1 照 |i *l祐敏iID -yliw