本站小編為你精心準備了JSP下的簡單網頁設計研究參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

[摘要]所有網頁開發都是以靜態網頁為基礎，一個設計良好的網頁會給使用者留下良好的印象。靜態網頁通常以HTML中的標記對網頁的界面樣式進行設計；jsp技術則是基于JavaServlet和Java體系的Web服務器端開發技術，用來設計開發網頁的動態內容，使應用程序能夠在各種服務器或瀏覽器下運行。利用HTML標記與JSP技術設計簡單的網頁。

[關鍵詞]JSP；HTML；CSS；JavaScript

1網頁內容分析

一個網頁的設計首先需要合適的頁面布局，其次是各個部分的內容。提供信息瀏覽的網頁需要導航欄、功能菜單，部分菜單需要下拉子菜單；圖片展示區域滾動放映圖片；熱門信息快速入口，可直接在首頁進入文章或通知的閱讀；網頁一般還需要展示日期和時間，要與標準時間保持一致。瀏覽重要信息時需要用戶進行注冊、登錄，首頁給出登錄入口，跳轉至登錄頁面。各個頁面的風格一般需要保持一致。

2網頁設計與實現

2.1網頁布局

設計中使用HTML中的<div>標記將網頁分塊，先將整個頁面分為上中下三個部分，給<div>的class屬性分別賦值為head、body、foot。其中在head區域插入網頁主題，foot區域給出版權聲明.body區域再進行分割有up、left、right、bottom四塊，在CSS樣式中通過class屬性值調整各部分的長度，寬度，背景顏色等。

2.2導航欄

在class值為up的區域進行導航欄的設置，使用列表<ul>標記，每個<li>標記對應一欄，需要下拉菜單的欄目，在<li>標記中嵌套使用<ul>標記形成子菜單。CSS樣式中，設置float屬性值為left，使導航欄橫向。設置當鼠標放在欄目時子列表的display屬性值為block，實現鼠標位于欄目時下拉菜單自動出現，移走鼠標，子菜單自動隱藏。

2.3功能菜單

功能菜單放入left區域，與導航欄的設置相似，嵌套使用<ul>標記。但不需要橫向顯示，且子菜單的出現和隱藏需要鼠標點擊后執行，即初始狀態為隱藏，與導航欄的設置有所不同：#d1{display:none;}這里利用的是id值進行CSS樣式設置。

2.4圖片的輪換與滾動

圖片輪換區域放置在right區域的上方，設置CSS樣式可調整位置，圖片輪換功能利用JavaScript來實現，使用setInterval()方法每隔一定時間重復調用改變圖片的函數。在另一頁面中，使用<marquee>標記實現多張圖片滾動播放，鼠標置于圖片上時，圖片停止滾動，移走鼠標繼續滾動。

2.5熱門信息欄

熱門信息欄置于right區域的下方，放置若干文章超鏈接。設置鼠標放在超鏈接上時，顏色發生改變，提示用戶此處可點擊。點擊鏈接后顏色改變，提示用戶，該內容已讀，主要代碼如下：

2.6日期與時間

置于功能菜單的下方，為與系統標準時間保持一致，時間信息中的秒一直變化，利用JavaScript實現，使用setInterval()方法每隔一秒重復調用獲取系統時間的函數。

2.7用戶注冊與登錄

用戶注冊和登錄頁面的界面設計利用<form>表單標記，給出文本框，密碼框和登錄、重置按鈕。添加JavaScript函數對用戶輸入數據的有效性進行驗證，當賬號，密碼為空或超過一定限制長度時，系統界面彈出提示對話框。設置用戶提交后由驗證頁面進行處理。驗證頁面需要插入Java程序段，與數據庫建立連接，由JSP中的請求對象request獲取表單信息，利用JDBC技術驗證賬號密碼的合法性，驗證成功，由<jsp:forward>動作轉發至會員頁面；密碼錯誤彈出窗口提示；賬號不存在轉發至注冊頁面，用戶提交表單信息，將信息插入用戶表中，再次登錄，正確填寫賬號密碼即可登錄。

3網頁效果網頁部分效果圖如圖1：

4結語

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

【參考文獻】

[1]宋英茹.靜態網頁設計與制作[J].當代化工研究，2017(05)：164-165.

[2]杜黎強.靜態網頁設計——使用CSS控制超鏈接文字樣式[J].電腦知識與技術，2016，12(01)：215-216.

[3]肖必武.用JSP構建動態網站[J].現代電子技術，2003(13)：12-17.

作者：李秋錦 單位：山東科技大學