实验一JSP应用开发基础.docVIP

实验一 JSP应用开发基础 实验目的： 掌握HTML基本语法。 1. 掌握HTML页面基本结构。 2. 会使用div标签作为元素的容器。 3. 会使用表格进行数据显示。 4. 会使用表单和各种表单项。 掌握CSS基本语法。 1. 会使用CSS样式控制页面显示效果。 2. 会在页面中添加外部CSS文件。 实验环境与设备： 已经接入局域网的网络实验室，机器上装有Opera12以上版本浏览器等； 实验内容： 1、设计静态表单HTML页面并进行CSS页面样式控制。本题包括一个HTML文件research.html，一个CSS文件style.css，在research.html页面头部使用link href=style.css rel=stylesheet type=text/css /引用CSS文件。 首先设计基本的HTML页面，效果如图E1-1所示。 图E1-1 表单的HTML页面research.html浏览效果 具体设计要求如下，读者可在此基础上变通设计： 整个页面分为分为上下两个部分，分别使用两个id名为banner和main的div作为容器，设计布局如图E1-2所示。 图E1-2 表单页面布局示意图 banner部分的设计非常简单，直接插入图像beauty.jpg即可。 main部分是调查表单部分，表单项和文字的排列布局使用表格控制，加入一个13行2列的表格，第1行和最后1行合并单元格。 “姓名”、“电话”和“地址”为必须输入项，可通过input标签的属性required进行设置，另外此三项有提示信息“重要，务必填写”，通过input标签的属性placeholder进行设置。 “性别”选项为单选框，input type=radio。 “职业”选项为下拉菜单，通过select和option标签实现。 “喜欢的香水品牌”选项为复选框，input type=checkbox。 “喜欢的颜色”选项为颜色选择器input type=color。 “年龄”项为数字输入框，input type=number，另外可设置最大最小值。 “电子邮件”项为邮件输入框input type=email。 “留言内容”为多行文本框，使用textarea标签实现。 接下来设计控制页面样式的外部CSS文件，使用样式后页面效果如图E1-3所示。 图E1-3 使用CSS后表单浏览效果 具体设计提示如下，读者可在此基础上变通设计： 使用CSS改写body标签样式，可设置背景颜色、页面边距和宽度等。 使用CSS改写div标签样式，可设置背景色和盒子显示模式等。 设置2个div盒子样式#banner和#main，可设置盒子的宽高等。 使用CSS改写table样式，可设置表格的宽高、背景色和边框样式等。 使用CSS改写td样式，主要设置单元格字体显示。 使用CSS设置表格第1行和最后1行的居中对齐和背景色。 改写input、select和textarea标签的样式，设置表单项的背景色和边框样式等。 2、把下面一段代码补充成一个完整的程序，并调试通过。 在第一个页面利用JavaScript函数CreateWindow()创建一个新页面 function CreateWindow() { msgWindow=window.open(第二个页面，自己命名,displayWindow, 　　width=400,height=350,toolbar=yes,status=yes,scrollbars=yes,resize=yes,menubar=no); } 3、从键盘输入一个数，然后输出星期几。H 图E1-4 程序执行结果 4、判断男女生。运行后效果如图E1-5所示： 图E1-5 程序执行结果 5、用javascript做个简单的计算器，类似效果如图图E1-6 程序结果所示。 图E1-6 程序结果 6、学习安装配置一种JSP开发工具。参照helloWorld.jsp ，稍加改动，在页面上输出你的姓名和学号信息，在安装配置好的JSP服务器上成功调试。 表格 form #banner #main