WEB技术基础实验指导书(实验1)

实验一、简单网页设计一、实验目的1．掌握JSP运行环境的配置；2．掌握HTML语言中基本标记的含义及其使用方法；3．掌握CSS样式表的使用方法；二、实验内容1．在Tomcat服务器中测试一个简单的JSP页面；2．制作一个个人信息注册页面；3．制作一个样式表文件，并将其关联到一个HTML页面；三、实验步骤1.JSP页面测试1)安装JDK：下载JDK包以后，按安装向导的提示进行安装；2)安装Tomcat：下载Tomcat安装文件后，运行安装文件并按安装向导的提示进行安装；3)在安装Tomcat之后，在操作系统的开始菜单的“所有程序”项中会出现一个ApacheTomcatx.x用户组：4)在这些程序项中“ConfigureTomcat”用于修改Tomcat的一些基本配置，“MonitorTomcat”用于启动与停止Tomcat，“Tomcat6.0ProgramDirectory”用于进入Tomcat的安装目录；5)选择“Tomcat6.0ProgramDirectory”进入到Tomcat的安装目录之后，可以看到bin、conf、lib、logs、webapps、work等子目录；6)在conf文件夹的server.xml文件中找到Connectorport=8080protocol=HTTP/1.1maxThreads=150connectionTimeout=20000redirectPort=8443/，并将8080改为你想要设置的端口号（如80等）。注意该段配置未被用!----注释，而且其协议名称应该是HTTP/1.1。7)在webapps文件夹下新建一个myweb文件夹，然后在myweb文件夹下面新建一个WEB-INF文件夹；8)编写一个test.jsp页面，该页面代码如下：htmlheadtitleMyFirstJSPPage/title/headbody%=Hello,world!%/body/html9)将test.jsp放置到myweb文件夹中；10)启动Tomcat服务器；11)打开浏览器，输入端口号/myweb/test.jsp，查看结果。2.编写一个个人基本信息注册页面，该页面形式如下：htmlheadtitle注册登记表/title/headbodyform姓名：inputtype=textname=usernamebr密码：inputtype=passwordname=pawbr性别：inputtype=radioname=sex女inputtype=radioname=sexchecked=checked男br血型：inputtype=radioname=bloodchecked=checkedOinputtype=radioname=bloodAinputtype=radioname=bloodBinputtype=radioname=bloodABbr性格：inputtype=checkboxchecked=checked热情大方inputtype=checkbox温柔善良inputtype=checkbox多愁善感br文件：inputtype=filebr简介：textarearows=10cols=28/textareabr城市：selectsize=1option北京市/optionoption上海市/optionoption南京市/option/selectbrinputtype=submitvalue=提交inputtype=resetvalue=重置/form/body/HTML3.CSS样式表1)新建一个HTML文件，其内容如下：HTMLBODYh1样式表实例/h1TABLEBORDER=1TRTDROWSPAN=2跨两行/TDTDCOLSPAN=2跨两列/TD/TRTRTD1000/TDTD1000/TD/TRTRTD3000/TDTD2000/TDTD4000/TD/TR/TABLE/BODY/HTML2)如果要求h1标记内的文字大小为30，颜色为红色；表格内的文字大小为10，颜色为蓝色，且背景色为黄色，应该如何设计样式表文件mystyle.css？classhtmlheadtitle样式表/title/headstyletype=text/css.l{color:#0000CC;background-color:#FFFF00;font-size:10px;}.r{font-size:30px;color:#FF0000}/stylebodyh1class=ralign=center样表表格/h1tablealign=centerclass=lborder=4trtdrowspan=2跨两行/tdtdcolspan=2跨两列/td/trtrtd1000/tdtd1000/td/trtrtd3000/tdtd2000/tdtd4000/td/tr/table/body/htmlmystyle.csshtmlheadlinkrel=stylesheethref=mystyle.csstype=text/csstitle样式表/title/headbodyh1align=center样表表格/h1tablealign=centerborder=4trtdrowspan=2跨两行/tdtdcolspan=2跨两列/td/trtrtd1000/tdtd1000/td/trtrtd3000/tdtd2000/tdtd4000/td/tr/table/body/html3)如何将mystyle.css与HTML文件关联？mystyle.cssh1{font-size:30px;color:red}table{background-color:#FFFF00;font-size:30px;color:blue}