实验一(JSP).docVIP

Web应用技术(JSP) 实验报告(一) 教师评分： 实验1 JSP运行环境配置和网页运行测试 1 相关知识点 JSP(Java Server Pages)是一种开发动态网页的实用综合技术。 静态网页不能与用户交互作用。静态网页由客户端的浏览器解释、处理并显示页面内容，其扩展名为*.htm或*.html。 动态网页重要的特征之一是交互性，即可以根据用户的选择执行不同的代码、显示不同的内容。JSP动态网页文件的扩展名为.jsp，运行在服务器端。 2 实验目的 配置JSP运行环境，编写并测试HTML网页。 3 实验要求 编写如下图所示效果的网页testDate.jsp，测试服务器时间和浏览器时间（网页标题栏包含学生姓名）。 (参考第一章课件配置环境及p22~38编写网页) 效果示例: 编写testDate.jsp网页代码： html head title(电商1002 许美玉）测试服务器时间和浏览器时间/title /head body div style=font-size:28px;color:red;font-family:楷体 %@ page contentType=text/html;charset=GB2312 % %@ page import=java.util.* % P服务器时间： % Date date=new Date(); % %=date% /div div style=font-size:28px;color:blue;font-family:楷体 script language=javascript var date=new Date(); var year=date.getFullYear(); var month=date.getMonth()+1; var mydate=date.getDate(); var hour=date.getHours(); var minute=date.getMinutes(); var second=date.getSeconds(); document.write(客户机时间：+year+-+month+-+mydate+ ); document.write(hour+:+minute+:+second); /script /div /body html 网页执行效果(截图)： 实验2 浮动布局 1 相关知识点 网页布局一般采用传统的表格排版方式和CSS的div排版方式。 传统的表格排版设table标记的border属性为0，即表格不再显示边框，页面在下载时必须等整个表格的内容都下载完毕之后才会一次性显示出来，而利用div块的CSS排版的页面在下载时各个子块可以分别下载显示，从而提高了页面的下载速度，搜索引擎的排名也会因此而提高。 CSS的div排版方式使得数据与CSS文件完全分离，美工在修改页面时不需要关心任何后台操作的问题。而表格排版由于依赖各个单元格，美工必须在大量的后台代码中寻找排版方式。 当页面制作完成后，如果希望将left和right的位置对调，表格排版的工作量相当于重新制作一个页面。CSS排版利用float和position属性可以较轻松地移动各个块，实现让用户动态选择界面的功能。 2 实验目的 理解盒子模型、块状元素和内联元素等概念，学习利用浮动方法布局。 3 实验要求 用浮动的方法完成下图所示的页面。 注意浏览器的兼容性，CSS样式要求如下： (1)#nav：宽860px；高20px；边框为实线、边框宽度为1px、边框颜色为#003；margin外边距上右下左分别5px、自动、5px、自动；背景颜色为#ccc；padding内边距为10px。 (2)#banner：宽880px；高100px；边框为实线、边框宽度为1px、边框颜色为#003；margin左右外边距自动、margin下外边距为5px；背景颜色为#ccc。 (3)#content：宽882px；高302px；背景颜色为#900；margin左右外边距自动。 (4)#main：左浮动；宽680px；高300px；边框为实线、边框宽度为1px、边框颜色为#003；margin右外边为5px；背景颜色为#ccc。 (5)#sidebar：宽193px；高300px；边框为实线、边框宽度为1px、边框颜色为#003；字体颜色为蓝色；背景颜色为#ccc。 (6)#main h2：字体颜色为#f00、字体大小为24px；行高为20px；字体带删除线；字体粗细为加粗。 (7)#footer：宽880px；高60px；边框为实线、边框宽度为1px、边框颜色为#003；背景颜色为#ccc；margin左