Web实验报告课程设计.doc
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 2016 盛金秋. 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_lessonwidth: 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_lessonwidth: 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:hovertext-decoration: underline;.main_center_contmargin-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_huaiyangmargin-left: 1%;.canyinwidth: 100%; height: 15%;border-top: 2px red dotted;font-size: 15px;color: #2F4F4F;font-family: "仿宋"font-weight: 700;margin-top: 15px;.yangzhoumswidth: 50px; height: 20px;font-family: "楷体"color: #FF8C00;font-size: 25px;background-color: #E6E6FA;border-radius: 7px;margin-left: 10px;.shizitouletter-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_rowfloat: 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;.rowcommmargin-left:10%;.firstrowmargin-top: 3%;.content_titlemargin-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_contactwidth: 100%; height: 602px;background-color: #E6E6FA;.contact_titlefont-family: "新宋体"font-size: 40px;color:chocolate;font-weight: 900;margin-left:40% ;padding-top: 3%;labelfont-family: "宋体"font-size: 20px;text-spacing: 5px;font-weight: 500;.contact_wrapwidth: 40%;height: 400px;margin-left: 150px;padding-top: 60px;float: left;#tijiaomargin-left: 20px;.contact_rightwidth: 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;elsealert("已提交！");</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_boxwidth: 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; /*=对导航栏进行的样式设置=*/#daohangwidth: 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>ulwidth: 707px; height: 31px; list-style: none; margin: 0; /*去掉列表符、去掉ul会自带的外边距*/#daohang>ul>lifont-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:hoverbackground-color:orangered; #daohang>ul>li:activetext-decoration: underline;#id_ulAwidth:60px; height:140px; font-size: 8px; list-style: none; margin-left: 4px; position: absolute;z-index: 10;#id_ulA>liwidth: 60px; height: 30px;/*border: 1px blueviolet solid;*/margin: 0;padding-top: 0; background-color:lightsteelblue; display: none; /*li的小块进行隐藏*/#daohang>ul>li:hover>#id_ulA>lidisplay:
