资源描述
Web前端技术试验汇报
课程名称：Web前端技术
试验名称：课程设计
系别班级：
学生姓名：
学生学号：
指导老师：
一、试验目标
经过一学期所学，制作一个网站作为课程设计，能基础满足试验纲领要求。
二、内容及要求
1、 综合利用html、CSS、javascript进行课程设计，专题不限。
2、 作品尽可能支持原创。
三、试验原理
1.在index.html里
标题栏：利用了javascript制作了一个定时器完成了自动手动切换。
导航栏：应用无序列表，去掉列表符；设置悬浮；制作级联菜单等隐藏功效；设置超链接至其它网页。利用iframe链接至主页面。
2.home.html里
内容栏：左边一栏：第一模块利用javascript更改style背景颜色，设置了一个数组。第二模块制作表单并加入了大量函数，选择循环语句进行判定和提交并作出提醒语句。第四模块制作超链接并将列表项换成图片。
右边一栏：进行样式设置等，下面制作了一个选项卡，经过设置函数等，统计上一步操作oldobj，在鼠标移动到上面时自动统计。
3.在lesson.html里
进行样式设置
4.在prompation.html里设置了悬浮时部分操作，起到放大镜效果，
5.在contact.html里制作了一个表单
四、试验步骤
1.明确需求，掌握要做什么，并画出框架图，理清思绪。
2.在网上下载所需图片和文本介绍，并分清各模块内容。
3.构建各网页框架，设置好样式和属性。
4.正式往框架内敲入代码，实现各项功效函数等。
5.页面调整和优化，设置自适应。
6.对页面美观进行加工。
7.对代码进行封装，进行标注和分块。
五、 试验代码
1、 Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>味道扬州</title>
<link rel="stylesheet" type="text/css" href="css/框架.css">
<script src="js/首页.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/用户注册.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/选项卡.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body onload="startChageImg()">
<div id="div_box">
<!--==============标题栏=============-->
<div id="top">
<div class="div-img-box">
<img id="imgidA" src="img/1.jpg" width="100%" height="300px">
</div>
<div id="div-toolsA" class="div-toolbar">
<span onmouseover="changeImg(0,this)" onmouseout="startChageImg()">1</span>
<span onmouseover="changeImg(1,this)" onmouseout="startChageImg()">2</span>
<span onmouseover="changeImg(2,this)" onmouseout="startChageImg()">3</span>
</div>
</div>
<!--==============导航栏=============-->
<div id="daohang">
<ul>
<li><a class="daohang_home" href="home.html" target="main">首 页</a></li>
<li><a class="daohang_lesson" href="lesson.html" target="main">美食学堂</a>
<ul id="id_ulA">
<li>扬州炒饭</li>
<li>狮子头</li>
<li>灌汤包</li>
</ul>
</li>
<li><a class="daohang_promation" href="promptation.html" target="main">美食展示</a></li>
<li><a class="daohang_contact" href="contact.html" target="main">联络我们</a></li>
</ul>
</div>
<!--==============内容栏=============-->
<div id="main">
<div class="main_left"></div> <!--左边空白-->
<div class="main_center"> <!--中 间-->
<iframe src="home.html" name="main" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div class="main_right"></div> <!--右边空白-->
<!--</div>-->
</div>
<div id="bttom">(c) Copyright 盛金秋. All Rights Reserved. </div>
</div>
</body>
</html>
2、lesson.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main_center_lesson{
width: 99%;height: 596px;
background-image: url(img/jiao.png);
/*border: 1px red solid;*/
background-position:center ;
background-repeat:no-repeat ;
background-size:100% 100%;
/*position: relative;*/
}
.main_center_title_lesson{
width: 100%; height: 40px;
/*border: 1px red solid;*/
font-family: "楷体";font-weight: 900;
color: blueviolet;
font-size: 30px;
/*position: absolute;*/
margin-left: 10px;
}
.main_center_title:hover{
text-decoration: underline;
}
.main_center_cont{
margin-left:30% ;
width: 65%; height: 40%;
/*border: 1px red solid;*/
font-family: "仿宋";font-size: 20px;
color: #000000;font-weight: 700;
position: absolute;top: 8%;
text-indent: 15px;
}
#img_huaiyang{
margin-left: 1%;
}
.canyin{
width: 100%; height: 15%;
border-top: 2px red dotted;
font-size: 15px;
color: #2F4F4F;font-family: "仿宋";
font-weight: 700;
margin-top: 15px;
}
.yangzhoums{
width: 50px; height: 20px;
font-family: "楷体";
color: #FF8C00;font-size: 25px;
background-color: #E6E6FA;
border-radius: 7px;
margin-left: 10px;
}
.shizitou{
letter-spacing: 10px;
}
</style>
</head>
<body>
<div id="main_center_lesson">
<div class="main_center_title_lesson">美食学堂</div>
<img src="img/huanyang.jpg" width="250px" height="250px" id="img_huaiyang">
<div class="main_center_cont">扬州菜以拆烩鲢鱼头、扒烧整猪头、蟹粉狮子头“三头”为代表，大煮干丝表现了淮扬菜刀功，“三套鸭”则将菜鸽藏于野鸭腹中再将野鸭藏于家鸭腹中，野鸭喷香，菜鸽细酥，大胆创新造就了无上美味。三头宴和红楼宴、全藕宴一起被称为扬州菜肴三绝。<br>
扬州小吃也极负盛名。大名鼎鼎扬州干丝，一片豆腐干可被分成十七层然后
切丝，丝细如发；著名全国蟹黄包，每十二个月十月取饱满膏蟹蟹黄，配以精白面粉制成，可谓扬州点心中极品。另外，扬州炒饭也是来到一定不能错过传奇美味。扬州十大名点：三丁包子、千层油糕、双麻酥饼、翡翠烧卖、干菜包、野菜包、糯米烧卖、蟹黄蒸饺、车螯烧卖、鸡丝卷子。
</div>
<div class="canyin">
<span class="yangzhoums">扬州炒饭</span><br>
扬州炒饭其中“扬州”是配料名称，是指“叉烧”和“鲜虾”合称。以火腿、基围虾、鸡蛋、青豆、白米饭等为主料炒制而成。营养丰富，味道鲜美。扬州蛋炒饭，风
味各异，品种繁多，有“清蛋炒饭”、“金裹银蛋炒饭”、“月牙蛋炒饭”、“虾仁蛋炒饭”、“火腿蛋炒饭”、“三鲜蛋炒饭”、“什锦蛋炒饭”等等。去扬州一定要尝一下地道扬州炒饭哦。
</div>
<div class="canyin">
<span class="yangzhoums shizitou">狮子头</span><br>
狮子头扬州菜中著名度最高就是狮子头了。
即使汤比较有油，狮子头却口感松软，肥而不腻，入口微甜。这道菜做起来也是极讲究。
首先，一定要用五花肉，这是因为五花肉肥瘦百分比正适合狮子头，其次一定要用刀把五花肉剁成肉末而非绞肉机，因为手工剁出来肉末弹性十足。
这么做出来扬州狮子头是极清淡，咬上一口能吃到肉圆鲜香之味！
</div>
<div class="canyin">
<span class="yangzhoums">扬州灌汤包</span><br>
扬州人常说一句话：“早上皮包水，晚上水包皮”。这句话典故：扬州人早起喜爱到茶楼品茗、吃一笼灌汤包，啜着浓浓汤汁，
嚼着醇香肉馅。可见，灌汤包在扬州是有多受欢迎，灌汤包子用料考究，制作精细。它以精粉烫面制皮坯，选择肋条肉为馅心，用鲜骨髓汤打馅，
配以十多个上等调料佐味。包子鲜香肉嫩、皮簿筋软、外形玲珑剔透、汤汁醇正浓郁、入口油而不腻。
</div>
</div>
</body>
</html>
3、Promptation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap_content{
width:100%; height: 602px;
/*border: 1px red solid;*/
background-image:url(img/noise.png) ;
background-position: center;
background-size:500px 500px ;
}
.main_row{
float: left;
margin-top: 10px;margin-left: 10px;
}
.main_cla_imgall {
position: relative;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
.main_cla_imgall img {
display: block;
width: 180px; height: 150px;
-webkit-transition: all .5s ease; /* Safari and Chrome */
-moz-transition: all .5s ease; /* Firefox */
-ms-transition: all .5s ease; /* IE 9 */
-o-transition: all .5s ease; /* Opera*/
transition: all .5s ease;
}
.main_cla_imgall .main_img_title {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.5);
-webkit-transition: all .5s ease; /* Safari and Chrome */
-moz-transition: all .5s ease; /* Firefox */
-ms-transition: all .5s ease; /* IE 9 */
-o-transition: all .5s ease; /* Opera */
transition: all .5s ease;
}
.main_cla_imgall .main_img_title span {
display: block;
text-align: center;
font-family: "新宋体";
font-size: 20px;
font-weight: 900;
letter-spacing: 3px;
/*text-transform: uppercase;*/
color: #fff;
margin-top: 30%;
padding: 10px 0;
border-top: 4px solid rgba(255, 255, 255, 0.15);
border-bottom: 4px solid rgba(255, 255, 255, 0.15);
}
.main_cla_imgall:hover img {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
}
.main_cla_imgall:hover .main_img_title {
background: none;
}
.rowcomm{
margin-left:10%;
}
.firstrow{
margin-top: 3%;
}
.content_title{
margin-top: 10px;padding-top: 4px;
width: 100%; height: 45px;
background-image: url(img/jiao.png);
background-repeat: no-repeat;
background-size: 700px 150px;
font-size: 30px;
font-family: "黑体";color: blueviolet;
}
</style>
</head>
<body>
<div class="wrap_content">
<div class="content_title">美食展示</div>
<div class="main_row rowcomm firstrow">
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>大煮干丝</span>
</span>
<img src="img/pro_images/1.jpg" width="100px" height="100px"/>
</a>
</div>
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>红烧狮子头</span>
</span>
<img src="img/pro_images/2.jpg" width="100px" height="100px"/>
</a>
</div>
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>三丁鲜包</span>
</span>
<img src="img/pro_images/3.jpg" />
</a>
</div>
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>拆烩鲢鱼头</span>
</span>
<img src="img/pro_images/4.jpg" />
</a>
</div>
</div>
<div class="main_row rowcomm">
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>扬州炒饭</span>
</span>
<img src="img/pro_images/5.jpg" />
</a>
</div>
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>蟹黄汤包</span>
</span>
<img src="img/pro_images/6.jpg" />
</a>
</div>
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>鲜炒虾仁</span>
</span>
<img src="img/pro_images/7.jpg" />
</a>
</div>
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>翡翠烧卖</span>
</span>
<img src="img/pro_images/8.jpg" />
</a>
</div>
</div>
<div class="main_row rowcomm">
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>千层油糕</span>
</span>
<img src="img/pro_images/9.jpg" />
</a>
</div>
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>四喜汤圆</span>
</span>
<img src="img/pro_images/10.jpg" />
</a>
</div>
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>虾籽饺面</span>
</span>
<img src="img/pro_images/11.jpg" />
</a>
</div>
<div class="main_cla_imgall">
<a href="#">
<span class="main_img_title">
<span>蒜香龙虾</span>
</span>
<img src="img/pro_images/12.jpg" />
</a>
</div>
</div>
</div>
</body>
</html>
Contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联络我们</title>
<style type="text/css">
.wrap_contact{
width: 100%; height: 602px;
background-color: #E6E6FA;
}
.contact_title{
font-family: "新宋体";font-size: 40px;
color:chocolate;font-weight: 900;
margin-left:40% ;padding-top: 3%;
}
label{
font-family: "宋体";font-size: 20px;
text-spacing: 5px;font-weight: 500;
}
.contact_wrap{
width: 40%;height: 400px;
margin-left: 150px;padding-top: 60px;
float: left;
}
#tijiao{
margin-left: 20px;
}
.contact_right{
width: 36%;height:400px;
float: left;
/*border: 1px red solid;*/
margin-top: 6%;margin-left: -80px;
font-size: 20px;font-weight: 700;
line-height: 26px;
text-indent: 36px;
}
</style>
<script type="text/javascript">
function operA(){
var text=document.getElementById("text");
if(text.value==""){
return false;
}else{alert("已提交！！！");}
}
</script>
</head>
<body>
<div class="wrap_contact">
<div class="contact_title"><img src="img/contact.png"width="30px" height="35px">联络我们</div>
<div class="contact_wrap">
<form class="form_contact" onsubmit="return operA()">
<label>姓名</label><br>
<input type="text" name="" value="" size="14" id="text"><br>
<label>性别</label><br><input type="radio" name="sex" value="" checked="">男
<input type="radio" name="sex" value="">女<br>
<label>电子邮件</label><br>
<input type="email" name="mail" value="" size=13><br>
<label>职业</label><br><select name="opp"> <option value="1">学生</option> <option value="2">农民</option>
<option value="3">工人</option></select></select><br>
<label>个人留言</label><br><textarea cols="20" rows="5" name="umsg"></textarea><br>
<input type="submit" value="提交" id="tijiao">
<input type="reset" value="重置">
</form>
</div>
<div class="contact_right">
扬州是中国四大菜系之一淮扬菜系起源地。康熙、乾隆皇帝将淮扬菜水平带到了极高高度，堪称人间至味。淮扬菜最大特色就在于南北皆宜。扬州菜重视本味、讲究火工、擅长炖焖，口味清淡鲜美、甜咸适中。著名“三头”（蟹粉狮子头、扒烧整猪头、拆烩鲢鱼头）就是扬州菜代表作。另外，扬州特色小吃也远近著名。在四望亭路及望月路一带是扬州美食聚集地。所以扬州可称得上吃货们天堂了。<br>
首页有我邮箱和联络方法，想要联络我们好友能够发送邮箱给我们一起进行讨论哟。
</div>
</div>
</body>
</html>
4、框架.css
/*============对整体框架进行样式设置==============*/
#div_box{
width: 100%; height:1000px;
/*border: 1px red solid;*/
/*margin-left:0;padding: 0px;*/
position: relative;top: -9px;left: -9px;
}
/*============对标题栏进行样式设置==============*/
.div-toolbar{
width: 80px;height: 20px;
/*border: 1px red solid;*/
margin-top:-40px ; margin-left:90%;
position: absolute;z-index: 5;}
.div-toolbar span{
color: aliceblue;font-weight: 900;
font-size: 20px;
background-color: gold;opacity: 0.6;
display: inline-block;
width: 18px; height: 20px;
text-align: center;line-height: 20px;
border-radius: 5px;
}
/*============对导航栏进行样式设置==============*/
#daohang{
width: 77.5%;height: 50px;
border: 1px lavender solid;
background-color:#FFD700;
padding-left: 300px;
position: absolute;top: 300px;z-index: 20;
opacity: 0.9;}
#daohang>ul{
width: 707px; height: 31px;
list-style: none; margin: 0;} /*去掉列表符、去掉ul会自带外边距*/
#daohang>ul>li{
font-size:20px ;
line-height: 40px;
width:120px; height: 40px;
/*border: 2px grey solid;*/
background-color:greenyellow;opacity: 0.7;
float: left;
margin-top: 5px; margin-left: 20px;
border-radius: 5px;
text-align: center;line-height: 40px;}
#daohang>ul>li:hover{
background-color:orangered;
}
#daohang>ul>li:active{
text-decoration: underline;
}
#id_ulA{
width:60px; height:140px;
font-size: 8px;
list-style: none;
margin-left: 4px;
position: absolute;z-index: 10;}
#id_ulA>l
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
