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

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

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

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

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

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

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

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

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

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

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

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

12、 亍#+- 0生日*1- hiiEB*- hArj此i.毋* 亍#+- 0生日*1- hiiEB*- hAr曲于里巨厝爬康毫或機(jī)止 MBS iUi目S If不案歐圖6-49應(yīng)用段落（5）在文本域右側(cè)按“Ctrl+Shift+空格”組合鍵，插入一個全角空格，然后按回車鍵， 在新的行中再執(zhí)行【插入】|【表單】|【文本域】命令，插入一個ID為userPass的文本域， 并在【屬性】面板中設(shè)置其【類型】為【密碼】，如圖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”的重復(fù)輸入密碼域，并設(shè)置域的類型，如 圖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于取礎(chǔ)*% ill AH牌MW E3WOflni C#行后q: | tPTS?晚，0mg只g圖6-51插入重復(fù)輸入密碼域（7）在重復(fù)輸入密碼域的右側(cè)插入全角空格，再按回車，插入ID為emailAddress的文本域，在【屬性】面板中設(shè)置其初始值為“ ”，如圖文本域，在【屬性】面板中設(shè)置其初始值為“ ”，如

14、圖6-52所示。圖6-52設(shè)置文本域初始值（8）在電子郵件域右側(cè)插入全角空格，再按回車，執(zhí)行【插入】 菜單】命令，插入【（8）在電子郵件域右側(cè)插入全角空格，再按回車，執(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）在列表菜單右側(cè)輸入一個“年”字，然后用同樣的方法插入一個ID為bornMonth 的列表菜單，如圖6-55所示。 ETTFIj已酒亨毋齡、 卜用十亍祖t干甘、次、TSSi if W：A借*附A.K用的1地卜 吐 葡于快礎(chǔ)*% iMK牌可 襯止三昵可 iflmV. ib如曇佰幽日己.M不宴快或：圖6-55插入月份的列表菜單（11）在【屬性】面板中單擊【列表值】按鈕，在彈出的【列表值】對話框中輸入

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

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

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

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

20、輸入標(biāo)簽輔助功能屬性】對話框，在對話框中設(shè)置文本區(qū)域的ID和標(biāo)簽等屬性后，即可為網(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ū)域選中文本域后，用戶可以在【屬性】面板中方便地設(shè)置文本區(qū)域的屬性。文本區(qū)域的 【屬性】面板如圖6-66所示。r- 亡本散回 RDiwgt I r. WMil 心 口整用OU 口只滑中:*EMU元中年圖6-66文本區(qū)域的屬性在【屬性】面板中，文本區(qū)域比文本字段有3種屬性不同，如下

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