JSP下的簡單網(wǎng)頁設(shè)計(jì)研究范文

本站小編為你精心準(zhǔn)備了JSP下的簡單網(wǎng)頁設(shè)計(jì)研究參考范文，愿這些范文能點(diǎn)燃您思維的火花，激發(fā)您的寫作靈感。歡迎深入閱讀并收藏。

[摘要]所有網(wǎng)頁開發(fā)都是以靜態(tài)網(wǎng)頁為基礎(chǔ)，一個(gè)設(shè)計(jì)良好的網(wǎng)頁會(huì)給使用者留下良好的印象。靜態(tài)網(wǎng)頁通常以HTML中的標(biāo)記對(duì)網(wǎng)頁的界面樣式進(jìn)行設(shè)計(jì)；jsp技術(shù)則是基于JavaServlet和Java體系的Web服務(wù)器端開發(fā)技術(shù)，用來設(shè)計(jì)開發(fā)網(wǎng)頁的動(dòng)態(tài)內(nèi)容，使應(yīng)用程序能夠在各種服務(wù)器或?yàn)g覽器下運(yùn)行。利用HTML標(biāo)記與JSP技術(shù)設(shè)計(jì)簡單的網(wǎng)頁。

[關(guān)鍵詞]JSP；HTML；CSS；JavaScript

1網(wǎng)頁內(nèi)容分析

一個(gè)網(wǎng)頁的設(shè)計(jì)首先需要合適的頁面布局，其次是各個(gè)部分的內(nèi)容。提供信息瀏覽的網(wǎng)頁需要導(dǎo)航欄、功能菜單，部分菜單需要下拉子菜單；圖片展示區(qū)域滾動(dòng)放映圖片；熱門信息快速入口，可直接在首頁進(jìn)入文章或通知的閱讀；網(wǎng)頁一般還需要展示日期和時(shí)間，要與標(biāo)準(zhǔn)時(shí)間保持一致。瀏覽重要信息時(shí)需要用戶進(jìn)行注冊(cè)、登錄，首頁給出登錄入口，跳轉(zhuǎn)至登錄頁面。各個(gè)頁面的風(fēng)格一般需要保持一致。

2網(wǎng)頁設(shè)計(jì)與實(shí)現(xiàn)

2.1網(wǎng)頁布局

設(shè)計(jì)中使用HTML中的<div>標(biāo)記將網(wǎng)頁分塊，先將整個(gè)頁面分為上中下三個(gè)部分，給<div>的class屬性分別賦值為head、body、foot。其中在head區(qū)域插入網(wǎng)頁主題，foot區(qū)域給出版權(quán)聲明.body區(qū)域再進(jìn)行分割有up、left、right、bottom四塊，在CSS樣式中通過class屬性值調(diào)整各部分的長度，寬度，背景顏色等。

2.2導(dǎo)航欄

在class值為up的區(qū)域進(jìn)行導(dǎo)航欄的設(shè)置，使用列表<ul>標(biāo)記，每個(gè)<li>標(biāo)記對(duì)應(yīng)一欄，需要下拉菜單的欄目，在<li>標(biāo)記中嵌套使用<ul>標(biāo)記形成子菜單。CSS樣式中，設(shè)置float屬性值為left，使導(dǎo)航欄橫向。設(shè)置當(dāng)鼠標(biāo)放在欄目時(shí)子列表的display屬性值為block，實(shí)現(xiàn)鼠標(biāo)位于欄目時(shí)下拉菜單自動(dòng)出現(xiàn)，移走鼠標(biāo)，子菜單自動(dòng)隱藏。

2.3功能菜單

功能菜單放入left區(qū)域，與導(dǎo)航欄的設(shè)置相似，嵌套使用<ul>標(biāo)記。但不需要橫向顯示，且子菜單的出現(xiàn)和隱藏需要鼠標(biāo)點(diǎn)擊后執(zhí)行，即初始狀態(tài)為隱藏，與導(dǎo)航欄的設(shè)置有所不同：#d1{display:none;}這里利用的是id值進(jìn)行CSS樣式設(shè)置。

2.4圖片的輪換與滾動(dòng)

圖片輪換區(qū)域放置在right區(qū)域的上方，設(shè)置CSS樣式可調(diào)整位置，圖片輪換功能利用JavaScript來實(shí)現(xiàn)，使用setInterval()方法每隔一定時(shí)間重復(fù)調(diào)用改變圖片的函數(shù)。在另一頁面中，使用<marquee>標(biāo)記實(shí)現(xiàn)多張圖片滾動(dòng)播放，鼠標(biāo)置于圖片上時(shí)，圖片停止?jié)L動(dòng)，移走鼠標(biāo)繼續(xù)滾動(dòng)。

2.5熱門信息欄

熱門信息欄置于right區(qū)域的下方，放置若干文章超鏈接。設(shè)置鼠標(biāo)放在超鏈接上時(shí)，顏色發(fā)生改變，提示用戶此處可點(diǎn)擊。點(diǎn)擊鏈接后顏色改變，提示用戶，該內(nèi)容已讀，主要代碼如下：

2.6日期與時(shí)間

置于功能菜單的下方，為與系統(tǒng)標(biāo)準(zhǔn)時(shí)間保持一致，時(shí)間信息中的秒一直變化，利用JavaScript實(shí)現(xiàn)，使用setInterval()方法每隔一秒重復(fù)調(diào)用獲取系統(tǒng)時(shí)間的函數(shù)。

2.7用戶注冊(cè)與登錄

用戶注冊(cè)和登錄頁面的界面設(shè)計(jì)利用<form>表單標(biāo)記，給出文本框，密碼框和登錄、重置按鈕。添加JavaScript函數(shù)對(duì)用戶輸入數(shù)據(jù)的有效性進(jìn)行驗(yàn)證，當(dāng)賬號(hào)，密碼為空或超過一定限制長度時(shí)，系統(tǒng)界面彈出提示對(duì)話框。設(shè)置用戶提交后由驗(yàn)證頁面進(jìn)行處理。驗(yàn)證頁面需要插入Java程序段，與數(shù)據(jù)庫建立連接，由JSP中的請(qǐng)求對(duì)象request獲取表單信息，利用JDBC技術(shù)驗(yàn)證賬號(hào)密碼的合法性，驗(yàn)證成功，由<jsp:forward>動(dòng)作轉(zhuǎn)發(fā)至?xí)T頁面；密碼錯(cuò)誤彈出窗口提示；賬號(hào)不存在轉(zhuǎn)發(fā)至注冊(cè)頁面，用戶提交表單信息，將信息插入用戶表中，再次登錄，正確填寫賬號(hào)密碼即可登錄。

3網(wǎng)頁效果網(wǎng)頁部分效果圖如圖1：

4結(jié)語

在網(wǎng)頁的界面設(shè)計(jì)中，更多的是添加了大量css樣式使網(wǎng)站整體更加美觀，JavaScript編寫函數(shù)實(shí)現(xiàn)一些特殊的需求，它的使用與java語言大多一致。而涉及注冊(cè)登錄等業(yè)務(wù)邏輯處理時(shí)則需插入Java程序段實(shí)現(xiàn)。網(wǎng)頁的設(shè)計(jì)就是將JSP與HTML混合使用，HTM代碼和Java代碼分工協(xié)作，各負(fù)其責(zé)，共同構(gòu)建完整的網(wǎng)頁。

【參考文獻(xiàn)】

[1]宋英茹.靜態(tài)網(wǎng)頁設(shè)計(jì)與制作[J].當(dāng)代化工研究，2017(05)：164-165.

[2]杜黎強(qiáng).靜態(tài)網(wǎng)頁設(shè)計(jì)——使用CSS控制超鏈接文字樣式[J].電腦知識(shí)與技術(shù)，2016，12(01)：215-216.

[3]肖必武.用JSP構(gòu)建動(dòng)態(tài)網(wǎng)站[J].現(xiàn)代電子技術(shù)，2003(13)：12-17.

作者：李秋錦 單位：山東科技大學(xué)