中国矿业大学web技术实验报告Word格式.docx
- 文档编号:347074
- 上传时间:2023-04-28
- 格式:DOCX
- 页数:88
- 大小:1.59MB
中国矿业大学web技术实验报告Word格式.docx
《中国矿业大学web技术实验报告Word格式.docx》由会员分享,可在线阅读,更多相关《中国矿业大学web技术实验报告Word格式.docx(88页珍藏版)》请在冰点文库上搜索。
《Web技术》实验报告
1实验要求
实验一、静态web页面设计实验
85
1、使用HTML5开发Web静态页面。
按照HTML5的规范设计与开发网站。
2、练习HTML5的新HTML5新特性和效果。
3、练习使用Web页面开发工具。
(MyEclipse、Dreamwear、VS.NET或其它)
4、完成实验报告和实验成果。
2实验目的
1.配置Web(TOMCAT)服务器,了解Web工作原理。
2.熟悉常用HTML5标记的含义,能够熟练使用这些标记设计静态Web页面,实现Web页面上的各种元素的合理布局,如表单、表格、图片以及框架等标记
的使用。
3.了解CSS样式表的定义和使用方法,能够使用CSS美化和布局Web页面。
4.掌握JavaScript脚本语言的基本语法。
5.能够使用JavaScript与浏览器对象进行交互。
6.能够使用JavaScript处理表单和表单元素事件。
3详细设计
3.1实验内容
1.能够独立安装Web服务器,TOMCAT,理解Web服务器的常用配置,并利用其搭建网站,设计一组静态的网页,至少5个页面,其中包括1个注册页面。
2.利用CSS技术布局并美化页面。
3.使用JavaScript脚本对注册页面进行验证,防止错误数据输入。
4.使用一些JavaScript脚本实现网面部分内容的动态显示,加入时钟等
(不限于此)。
3.2实验步骤
3.2.1环境的搭建
(1)Java环境的搭建:
首先下载javajdk1.8,并进行安装,然后进行相应的环境配置即在环境变量中创建一个新的变量名为JAVA_HOME,输入jdk的安装路径如图所示:
然后在path中添加%JAVA_HOME%/bin;
在classpath中添加.
;
%JAVA_HOME%\lib\dt.jar;
%JAVA_HOME%\lib\tools.jar
(2)安装Myeclipse
在这里用的是Myeclipse2016stable1.0安装过程及破解过程不再赘述
(3)配置tomcat
在环境变量中添加一个新变量CATALINA_HOME
变量值为tomcat的安装路径(在这里用的是解压缩版)然后在path变量中添加%
CATALINA_HOME%\bin;
%CATALINA_HOME%\lib即可完成
(由于后续的运行中发现tomcat8和Myeclipse并不兼容,但可以和eclipse
兼容,所以在Myeclipse中使用的是eclipse自带的tomcat7)
3.2.2建立Web工程并进行网页设计
通过File->
new->
WebProject即可建立一个web工程。
建立好后如图所示:
然后通过File->
other中找到HTML建立一个新的HTML
3.2.3网页设计
(1)第一个静态页面——MyHtml.html页面效果如下:
源码如下:
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
title>
第一个页面<
/title>
styletype="
text/css"
br>
/br>
body{font-size:
18px;
color:
#FFF;
}
a{color:
#FFF}
.classname{border:
solid1px#2d2d2d;
text-align:
center;
background:
#575757;
padding:
350px100px350px100px;
-moz-border-radius:
100px;
-webkit-border-radius:
5px;
border-radius:
}
.classname{border:
dashed7px#7f9eeb;
-moz-border-radius:
-webkit-border-radius:
border-radius:
/style>
style>
.alsp{font-family:
"
幼圆"
font-size:
20px}
--JAVASCRIPT代码 如果编译过程中不提示错误Project->
clean然后重启BuildAutomatic -->
scriptlanguage="
JavaScript"
functionjudge(){
varpsd,us;
psd=document.getElementById("
password"
).value;
us=document.getElementById("
user"
varreg=/^[A-Za-z]+$/;
if((!
isNaN(psd)||reg.test(psd))&
&
(!
isNaN(us)||reg.test(us)))
{
alert("
格式符合要求"
);
else{alert("
格式不符合要求"
/script>
--JAVASCRIPT代码-->
/head>
body>
divclass="
classname"
FORMname="
form1"
method="
post"
action="
alsp"
Pstyle="
color:
white"
用户名:
INPUTtype="
text"
id="
value="
请输入您的用户名"
size="
20"
/P>
密&
nbsp;
码:
请输入您的密码"
/div>
P>
button"
name="
register"
注册"
login"
登陆"
onclick="
judge()"
/FORM>
/body>
/html>
其中采用两个独立的class选择符用来进行页面的装饰,并自定义一个用于装饰字体的alsp选择符来修改字体的样式。
其中用JavaScript脚本简单的对输入框进行了格式检查,如果格式不符合要求将会弹出窗口提示,格式符合要求也会弹出窗口提示正确。
(2)第二个静态页面——MyHtml2.html
页面效果如下:
关键源码如下:
scriptlanguage="
javascript"
functionfun(thisurl){window.location=thisurl;
//重定向
varreg_email=/^([a-zA-Z0-9]+[_|\_|\.]?
)*[a-zA-Z0-9]+@([a-zA-Z0-
9]+[_|\_|\.]?
)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
varpsd,repsd,us,nicheng,age,sex,email,aihao;
aihao="
psd=document.form1.psd.value;
us=document.form1.username.value;
nicheng=document.form1.nicheng.value;
age=document.getElementById("
age"
email=document.getElementById("
email"
repsd=document.getElementById("
repassword"
if(document.form1.sex_[0].checked){sex=document.form1.sex_[0].value;
}elsesex=document.form1.sex_[1].value;
for(i=0;
i<
document.form1.aihao.length;
i++)if(document.form1.aihao[i].checked){aihao+=document.form1.aihao[i].value+"
//两种方式得到输入框中的值
varreg2=/[0-9a-zA-Z_]{1,18}/;
varreg3=/[0-9a-zA-Z_]{6,18}/;
varkongge=/[\s]+/;
varage2=/^[1-9]\d*$/;
if(psd=="
||us=="
||age=="
||email=="
||nicheng=="
)
{alert("
该项不能为空"
elseif(!
reg2.test(us))
用户名请输入英文数字下划线的组合"
}elseif(psd!
=repsd)
两次密码不一致"
reg3.test(psd)){
密码太短"
elseif(kongge.test(nicheng)){
昵称里请不要带空格"
)}
elseif(isNaN(age)){
年龄格式错误"
elseif(age<
0){
年龄输入错误!
elseif(age>
90){
年龄输入错误"
reg_email.test(email))
邮箱格式错误"
else{
注册成功!
\n"
+"
用户名:
+us+"
\n昵称:
+nicheng+"
年龄:
+age+"
\n性别:
+sex+"
\n邮箱:
+email+"
\n爱好:
+aihao);
//alert("
用户名格式不符合要求"
昵称格式不符合要求"
年龄格式不符合要求"
邮箱格式不符合要求"
ceshi"
alspp"
pstyle="
请输入符合要求的数据<
/p>
英文、数字和下划线的任意组合"
username"
psd"
>
昵&
称:
nicheng"
不要有空格"
年&
龄:
请输入您的年龄"
--只有当radio的name一样时才会被认定为一组-->
性&
别:
radio"
sex_"
sex"
男"
checked="
checked"
男&
女"
女
邮&
箱:
请输入您的邮箱"
divstyle="
position:
relative;
Left:
7px;
爱&
好:
checkbox"
name="
aihao"
看电影"
cheked"
看电影<
size="
聊天"
聊天
value="
唱歌"
唱歌
reset"
重置"
onClick="
br/>
SELECTposition="
relative"
url"
onChange="
fun(this.value)"
OPTIONVALUE="
#"
==请选择要浏览的站点==<
/OPTION>
百度<
新浪微博<
/SELECT>
这个页面是一个注册页面,其中使用form表单来提交数据,并通过
javascript来判断提交的数据是否合格。
其中的主要控件是输入框、单选框、复选框、下拉菜单,对于输入框,主要用正则表达式以及isNaN函数进行用
JavaScript判断是否符合规范,下拉菜单通过JavaScript实现了重定向操作,而单选框和复选框也通过document.表单名称.控件名称.value的方式来得到值,除此之外还用了getElementById的方式得到输入框中的值,判断操作在自己定义的函数中进行,会对正确或错误用弹出对话框(alert)的方式进行提示。
(3)第三个静态页面——index2.html页面效果如下:
在这里只贴关键代码:
DOCTYPEhtml>
htmldir="
ltr"
lang="
en-US"
--CreatedbyArtisteerv4.3.0.60745-->
metacharset="
utf-8"
小吃简介——牛肉面<
metaname="
viewport"
initial-scale=1.0,maximum-scale
=1.0,user-scalable=no,width=device-width"
linkrel="
stylesheet"
href="
style.css"
media="
screen"
style.responsive.css"
all"
.art-content.art-postcontent-0.layout-item-0{padding-right:
10px;
padding-left:
10px;
.ie7.art-post.art-layout-cell{border:
none!
important;
.ie6.art-post.art-layout-cell{border:
divid="
art-main"
art-sheetclearfix"
headerclass="
art-header"
art-shapes"
h1class="
art-headline"
ahref="
/"
我的个人网站<
/a>
/h1>
art-textblockart-object227400126"
formclass="
art-search"
Search"
javascript:
void(0)"
inputtype="
submit"
search"
class="
art-search-button"
/form>
navclass="
art-nav"
ulclass="
art-hmenu"
li>
#.html"
active"
小吃简介—
—牛肉面<
xiaochijianjieniuroumian/new-page.html"
个人简介<
/li>
a
href="
个人照片<
个人收藏
/ul>
blog.html"
Blog<
/nav>
/header>
art-layout-wrapper"
art-content-layout"
art-content-layout-row"
art-layout-cellart-sidebar1"
art-vmenublockclearfix"
art-vmenublockheader"
h3class="
t"
网站导航<
/h3>
art-vmenublockcontent"
art-vmenu"
ahref=#"
小吃简介——牛肉面
xiaochijianjieniuroumian/new-
page.html"
个人收藏<
divclass=
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 中国 矿业大学 web 技术 实验 报告