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.

作者：李秋锦 单位：山东科技大学