资源描述
《网页设计与制作》
实 验 报 告
院系名称： 管理学院 专业班级： 电子商务XXXX
学生姓名： XXX 学 号： XXXXXXXX
项目
实验一
（25分）
实验二
（35分）
实验三
（40分）
总分
（100分）
得分
2016年 5 月
实验一：HTML语言实验
一、实验目的
1、掌握利用HTML语言编写网页的能力；
2、掌握利用HTML语言编写表格的能力；
3、掌握利用HTML语言编写表单的能力。
二、实验课时
2学时
三、实验内容
1、表格实验的结果
<html>
<head><title>表格</title>
</head>
<body>
<table border="1" width="600" height="300" align="center">
<tr>
<td rowspan="2" colspan="2" bgcolor="#FF0000">A</td>
<td width="29%">B</td>
<td width="24%" align="center">C</td>
</tr>
<tr>
<td colspan="2" align="center">D</td>
</tr>
<tr>
<td width="24%" align="right" rowspan="2">E</td>
<td width="19%" align="right" rowspan="2">F</td>
<td width="29%" rowspan="2">G</td>
<td width="24%">H</td>
</tr>
<tr>
<td width="24%">I</td>
</tr>
</table>
</body>
</html>
2、表单实验的结果
<html>
<head><title>表单</title>
</head>
<body>
<form method="POST" action="">
<table border="1" width="500" height="300" align="center">
<tr>
<td width="189" align="center">姓名：</td>
<td>
<p><input type="text" name="xingming" size="20"></p>
</td>
</tr>
<tr>
<td width="189" align="center">密码：</td>
<td>
<input type="password" name="mima" size="20">
</td>
</tr>
<tr>
<td width="189" align="center">性别：</td>
<td>
<input type="radio" value="xingbie" checked name="female">女
<input type="radio" name="xingbie" value="male">男
</td>
</tr>
<tr>
<td width="189" align="center">爱好：</td>
<td>
<input type="checkbox" name="aihao1" value="js">篮球
<input type="checkbox" name="aihao2" value="ds" checked>足球
<input type="checkbox" name="aihao3" value="sw">乒乓球
</td>
</tr>
<tr>
<td width="189" align="center">籍贯：</td>
<td><select size="1" name="jiguan">
<option>郑州</option>
<option>洛阳</option>
<option selected>开封</option>
</select>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="提交" name="B1">
<input type="reset" value="重置" name="B2">
</td>
</tr>
</table>
</form>
</body>
</html>
四、实验小结
HTML语言是网页制作的基础，而利用表格布局是重中之重。在这两个实验中，第一个是要注重表格的宽高以及colspan和rowspan的设置，第二个是要注重表单的样式，其中要注意默认选项的设置，单选框name属性值相同，而复选框name属性值应该不同。
本次实验也让我更加注重细节，一遍遍的修改也使我更熟悉HTML语言以及编码的设置，这对于网页制作这门学科来说是一个铺垫。
实验二：FireWorks和CSS实验
一、实验目的
1、掌握为给定效果图规划切图方式的能力；
2、掌握利用FireWorks切图的能力；
3、掌握利用CSS+DIV制作网页的能力。
二、实验课时
4学时
三、实验内容
1、规划切图方式的思路
了解网页布局结构，将网页划分为几部分，其中导航条为一部分，将其各项分开切图。其余部分根据实际划分开。
2、利用FireWorks切图的步骤
第一步：打开FireWorks切图软件，打开网页图片。
第二步：点击切片工具将图片切为所需大小和比例。
第三步：点击文件选项卡下的导出，选择导出为CSS层（htm），勾选修剪图像和将图像放入子文件夹，点击导出。
3、CSS+DIV制作网页的结果
<html>
<head><title>效果图.jpg</title>
<body bgcolor="#ffffff">
<style type="text/css">
body{}
.top{margin:0 auto 0 0;border:0 auto;text-align:center;width: 1008px;
height:83px}
.topmain{margin:0 auto 0 0;width:px;height:83px;text-align:center}
.topmain ul{margin:0 auto 0 0;padding:0px;text-align:center}
.topmain ul li{width:83px;height:45px;list-style-type:none;float:left}
.topmain ul li a{width:83px;height:45px}
.topmain.one{width:77px;height:45px;float:left}
.topmain.two{width:106px;height:45px;float:left}
.content1{margin:0 auto 0 0;border:0px;text-align:center; width:1008px;
height:257px}
.content2{margin:0 auto 0 0;padding:10px;border:0px;text-align:left;
color:#000;font-size:20px;line-height:30px;width:1008px;height:384px}
.content2_list{margin:0 auto 0 0;padding:10px 20px;border:0px;}
.bottom{margin:0 auto 0 0;border:0px;width:1008px;height:52px}
</style>
</head>
<body>
<div class="top"><img src="images/效果图_r1_c1.jpg" border="0"></div>
<div class="topmain">
<ul><li class="one"><a id=aa2 href="#"><img src="images/效果图_r2_c1.jpg" border="0"></a></li>
<li><a id=aa3 href="#"><img src="images/效果图_r2_c2.jpg" border="0">
</a></li>
<li><a id=aa4 href="#"><img src="images/效果图_r2_c3.jpg" border="0"></a></li>
<li><a id=aa5 href="#"><img src="images/效果图_r2_c4.jpg" border="0">
</a></li>
<li><a id=aa6 href="#"><img src="images/效果图_r2_c5.jpg" border="0">
</a></li>
<li><a id=aa7 href="#"><img src="images/效果图_r2_c6.jpg" border="0">
</a></li>
<li><a id=aa8 href="#"><img src="images/效果图_r2_c7.jpg" border="0">
</a></li>
<li><a id=aa9 href="#"><img src="images/效果图_r2_c8.jpg" border="0">
</a></li>
<li><a id=aa10 href="#"><img src="images/效果图_r2_c9.jpg" border="0">
</a></li>
<li><a id=aa11 href="#"><img src="images/效果图_r2_c10.jpg" border="0">
</a></li>
<li><a id=aa12 href="#"><img src="images/效果图_r2_c11.jpg" border="0">
</a></li>
<li><a id=aa13 href="#"><img src="images/效果图_r2_c12.jpg" border="0">
</a></li>
<li class="two"><a id=aa14 href="#"><img src="images/效果图_r2_c13.jpg" border="0">
</a></li>
</ul></div>
<div class="content1"><img src="images/效果图_r3_c1.jpg" border="0"></div>
<div class="content2"><div class="content2_list"><ul type="none"><li>团学
工作 管理团委实践
报告 2016-01-19<li>管理之星 管理团委工作报告
2016-01-24<li>班级风采  ； 管理团委宣传报告
2016-01-30<li>奖励资助<li>职业发展<li>社会实践<li>学生组织<li>学生活动<li>资料下载</div> </div>
<div class="bottom"><img src="images/效果图_r5_c1.jpg" border="0"></div>
</body>
</html>
四、实验小结
在这次试验中，用fireworks切图以及用CSS+DIV布局看似简单实则不易。切图是否细致严重影响着页面布局，而对于网页的布局又要细化到各个部分的宽高。用CSS+DIV布局时不能使用绝对定位，文字布局可以使用新闻列表，要注意padding、border以及margin属性的区别与联系。尽管试了很多次，也失败了很多次，但在这个过程中我对CSS+DIV规划网页有了更深刻的认知和体验。
实验三： JavaScript实验
一、实验目的
1、掌握利用JavaScript编写网页动态效果的能力；
2、掌握在网页中使用JavaScript脚本的两种方法。
二、实验课时
2学时
三、实验内容
1、计算整数阶乘实验的结果
<html>
<head><title>实验3</title>
<script language="javascript" type="text/javascript">
<!--
function abc(){
var sum=1;
var re;
re=document.getElementById("name").value;
for(var i=1;i<=re;i++){
sum*=i;
}
alert(sum);
}
//-->
</script>
</head>
<body>
<p><b>请在文本框中输入一个整数，然后单击“计算”按钮，计算该整数的阶乘。</b></p>
<p><input type="text" id="name"></p>
<p><input type="button" onClick="abc()" value="计算"></p>
</body>
</html>
2、下拉菜单实验的结果
<html>
<head><title>下拉菜单</title>
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer= 0;
var ddmenuitem = 0;
function mopen(id)
{ mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose()
{ if(ddmenuitem) ddmenuitem.style.visibility ='hidden'; }
function mclosetime()
{ closetimer = window.setTimeout(mclose,timeout); }
function mcancelclosetime()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}
}
document.onclick = mclose;
// -->
</script>
<style type="text/css">
#sddm{margin:0 auto;
padding: 0;
z-index: 30;
background-color:#1e4f9c;
height:25px;}
#sddm li{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 12px arial}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background:#1e4f9c;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #1e4f9c}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #1e4f9c;
border: 1px solid #1e4f9c}
#sddm div a { position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #1e4f9c;
color: #2875DE;
font: 12px arial}
#sddm div a:hover { background: #1e4f9c;
color: #FFF}
</style>
</head>
<body style="text-align:center">
<ul id="sddm">
<li><a href="#" onmouseover="mopen('m1')"
onmouseout="mclosetime()">学院概况</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">学院简介</a>
<a href="#">院长致辞</a>
<a href="#">学院领导</a>
<a href="#">机构设置</a>
<a href="#">学院领导</a>
<a href="#">机构设置</a>
<a href="#">发展规划</a>
<a href="#">学科建设</a>
</div></li>
<li><a href="#" onmouseover="mopen('m2')"
onmouseout="mclosetime()">师资队伍</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">名师风采</a>
<a href="#">教学团队</a>
<a href="#">人才引进</a>
</div></li>
<li><a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">人才培养</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">本科生</a>
<a href="#">硕士研究生</a>
<a href="#">双学位</a>
<a href="#">MBA</a>
</div></li>
<li><a href="#"
onmouseover="mopen('m4')"
onmouseout="mclosetime()">科学研究</a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">科学项目</a>
<a href="#">科研成果</a>
<a href="#">科研平台</a>
<a href="#">科研动态</a>
</div></li>
<li><a href="#" onmouseover="mopen('m5')"
onmouseout="mclosetime()">招生就业</a>
<div id="m5"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">招生信息</a>
<a href="#">就业指导</a>
<a href="#">就业资讯</a>
</div></li>
<li><a href="#" onmouseover="mopen('m6')"
onmouseout="mclosetime()">党群工作</a>
<div id="m6"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">党校建设</a>
<a href="#">组织建设</a>
<a href="#">党建理论</a>
</div></li>
<li><a href="#" onmouseover="mopen('m7')"
onmouseout="mclosetime()">团学工作</a>
<div id="m7"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">学工队伍</a>
<a href="#">规章制度</a>
<a href="#">学生活动</a>
</div></li>
<li><a href="#" onmouseover="mopen('m8')"
onmouseout="mclosetime()">合作交流</a>
<div id="m8"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">合作研究</a>
<a href="#">教师互动</a>
<a href="#">学生交流</a>
</div></li>
<li><a href="#" onmouseover="mopen('m9')"
onmouseout="mclosetime()">校友风采</a>
<div id="m9"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">校友捐赠</a>
<a href="#">校友留言</a>
<a href="#">校友动态</a>
</div></li>
<li><a href="#" onmouseover="mopen('m10')"
onmouseout="mclosetime()">社会服务</a>
<div id="m10"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">管理咨询</a>
<a href="#">企业服务</a>
</div></li>
<li><a href="#" onmouseover="mopen('m11')"
onmouseout="mclosetime()">明德论坛</a>
<div id="m11"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">工商讨论区</a>
<a href="#">物流管理讨论区</a>
<a href="#">考研之家</a>
</div></li></ul>
</body>
</html>
3、表单验证实验的结果
<html>
<head><title>验证身份证号</title>
<script language="javascript" type="text/javascript"> <!--
function checkidcard()
{
var idcard=document.getElementById("shenfen");
var str=idcard.value; if(str==null||str=="")
{
alert("请输入身份证号");
idcard.focus();
}
else
{
Var regExp=/\d{6}([12]\d{3})([01]\d)([0123]\d)(\d{4}|\d{3}[xX])/;
var arr=regExp.test(str);
if(arr!=true)
{
alert("身份证号错误");
idcard.focus();
}
}
}
//-->
</script>
</head>
<body>
<p><b>请输入身份证号</b></p>
<p><input type="text" size="18" id="shenfen"> <input type="button" value="测试" onClick="checkidcard();"></p> </body>
</html>
<html>
<head> <title>验证固定电话</title>
<script language="javascript" type="text/javascript"> <!--
function checktelnum()
{
var telnum=document.getElementById("guhua");
var str=telnum.value;
if(str==null||str=="")
{
alert("请输入电话号码");
telnum.focus();
}
else
{
Var regExp=/^((\d{3}-)?\d{8})$|^((\d{4}-)?\d{7,8})$/; if(regExp.test
(str)!=true)
{
alert("电话号码错误");
telnum.focus();
}
}
}
//-->
</script>
</head>
<body>
<p><b>请输入电话号码</b></p>
<p><input type="text" size="13" id="guhua"> <input type="button" value="测试" onClick="checktelnum()"></p> </body>
</html>
<html>
<head><title>验证E-mail是否正确</title>
<script language="javascript" type="text/javascript">
<!--
function checkemail()
{
var email=document.getElementById("dianyou");
var str=email.value;
if(str==null||str=="")
{
alert("请输入电子邮件");
email.focus();
}
else
{
//var regExp=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; varregExp=/^
([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
var arr=regExp.test(str);
if(arr==false)
{
alert("电子邮件错误");
email.focus();
}
}
}
-->
</script>
</head>
<body>
<p><b>请输入E-Mail地址</b></p>
<p><input type="text" id="dianyou"> <input type="button" value="测试" onClick="checkemail();"></p> </body>
</html>
<html>
<head><title>验证手机号码是否正确</title>
<script language="javascript" type="text/javascript"> <!--
function checkmobnum()
{
var mobnum=document.getElementById("shouji");
var str=mobnum.value;
if(str==null||str=="")
{
alert("请输入手机号码");
mobnum.focus();
}
else {
varregExp=/^(86)?((13\d{9})|(15[0,1,2,3,5,6,7,8,9]\d{8})|
(18[0,5,6,7,8,9]\d{8}))$/;
if(!regExp.test(str))
{
alert("手机号码错误");
mobnum.focus();
}
}
}
-->
</script>
</head>
<body>
<p><b>请输入手机号码</b></p>
<p><input type="text" id="shouji"> <input type="button" value="测试" onClick="checkmobnum();"></p> </body>
</html>
四、实验小结
通过本次实验对Javascript脚本语言有了更深程度的把握，第一个求阶乘的实验利用getElementById注重函数取值。第二个下拉菜单中JS代码是固定的，只需要修改其中style样式，修改时注意超链接未被访问、正被访问、鼠标悬停等不同状态对应的设置。第三个表单验证主要侧重于对正则表达式的应用，反复修改了很多次发觉考虑仍不是那么周全，要考虑方方面面可能会出现的验证问题。
22
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
