您现在的位置: 新晨 >> 设计论文 >> 网页设计论文 >> 正文

JSP下的简单网页设计研究

2019/07/08 阅读:

[摘要]所有网页开发都是以静态网页为基础,一个设计良好的网页会给使用者留下良好的印象。静态网页通常以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.

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

JSP下的简单网页设计研究

2019/07/08 阅读:

推荐度:

免费复制文章