搜索
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!DOCTYPEhtmlhtmlheadmetacharset=utf-8/title味道扬州/titlelinkrel=stylesheettype=text/csshref=css/框架.cssscriptsrc=js/首页.jstype=text/javascriptcharset=UTF-8/scriptscriptsrc=js/用户注册.jstype=text/javascriptcharset=UTF-8/scriptscriptsrc=js/选项卡.jstype=text/javascriptcharset=UTF-8/script/headbodyonload=startChageImg()divid=div_box!--==============标题栏=============--divid=topdivclass=div-img-boximgid=imgidAsrc=img/1.jpgwidth=100%height=300px/divdivid=div-toolsAclass=div-toolbarspanonmouseover=changeImg(0,this)onmouseout=startChageImg()1/spanspanonmouseover=changeImg(1,this)onmouseout=startChageImg()2/spanspanonmouseover=changeImg(2,this)onmouseout=startChageImg()3/span/div/div!--==============导航栏=============--divid=daohangulliaclass=daohang_homehref=home.htmltarget=main首 页/a/liliaclass=daohang_lessonhref=lesson.htmltarget=main美食学堂/aulid=id_ulAli扬州炒饭/lili狮子头/lili灌汤包/li/ul/liliaclass=daohang_promationhref=promptation.htmltarget=main美食展示/a/liliaclass=daohang_contacthref=contact.htmltarget=main联系我们/a/li/ul/div!--==============内容栏=============--divid=maindivclass=main_left/div!--左边空白--divclass=main_center!--中间--iframesrc=home.htmlname=mainframeborder=0width=100%height=100%/iframe/divdivclass=main_right/div!--右边空白--!--/div--/divdivid=bttom(c)Copyright2016盛金秋.AllRightsReserved./div/div/body/html2、lesson.html!DOCTYPEhtmlhtmlheadmetacharset=UTF-8title/titlestyletype=text/css#main_center_lesson{width:99%;height:596px;background-image:url(img/jiao.png);/*border:1pxredsolid;*/background-position:center;background-repeat:no-repeat;background-size:100%100%;/*position:relative;*/}.main_center_title_lesson{width:100%;height:40px;/*border:1pxredsolid;*/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:1pxredsolid;*/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:2pxreddotted;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/headbodydivid=main_center_lessondivclass=main_center_title_lesson美食学堂/divimgsrc=img/huanyang.jpgwidth=250pxheight=250pxid=img_huaiyangdivclass=main_center_cont扬州菜以拆烩鲢鱼头、扒烧整猪头、蟹粉狮子头“三头”为代表，大煮干丝体现了淮扬菜的刀功，“三套鸭”则将菜鸽藏于野鸭腹中再将野鸭藏于家鸭腹中，野鸭喷香，菜鸽细酥，大胆的创新造就了无上美味。三头宴和红楼宴、全藕宴一起被称为扬州菜肴三绝。br 扬州小吃也极负盛名。大名鼎鼎的扬州干丝，一片豆腐干可被分成十七层然后切丝，丝细如发；闻名全国的蟹黄包，每年十月取饱满的膏蟹蟹黄，配以精白面粉制成，可谓扬州点心中的极品。此外，扬州炒饭也是来到一定不能错过的传奇美味。扬州十大名点：三丁包子、千层油糕、双麻酥饼、翡翠烧卖、干菜包、野菜包、糯米烧卖、蟹黄蒸饺、车螯烧卖、鸡丝卷子。/divdivclass=canyinspanclass=yangzhoums扬州炒饭/spanbr 扬州炒饭其中“扬州”是配料的名称，是指“叉烧”和“鲜虾”的合称。以火腿、基围虾、鸡蛋、青豆、白米饭等为主料炒制而成。营养丰富，味道鲜美。扬州的蛋炒饭，风味各异，品种繁多，有“清蛋炒饭”、“金裹银蛋炒饭”、“月牙蛋炒饭”、“虾仁蛋炒饭”、“火腿蛋炒饭”、“三鲜蛋炒饭”、“什锦蛋炒饭”等等。去扬州一定要尝一下地道的扬州炒饭哦。/divdivclass=canyinspanclass=yangzhoumsshizitou狮子头/spanbr 狮子头扬州菜中知名度最高的就是狮子头了。虽然汤比较有油，狮子头却口感松软，肥而不腻，入口微甜。这道菜做起来也是极讲究的。首先，一定要用五花肉，这是因为五花肉的肥瘦比例正适合狮子头，其次一定要用刀把五花肉剁成肉末而非绞肉机，因为手工剁出来的肉末弹性十足。这样做出来的扬州狮子头是极清淡的，咬上一口能吃到肉圆的鲜香之味！/divdivclass=canyinspanclass=yangzhoums扬州灌汤包/spanbr 扬州人常说的一句话：“早上皮包水，晚上水包皮”。这句话的典故：扬州人早起喜欢到茶楼喝茶、吃一笼灌汤包，啜着浓浓的汤汁，嚼着醇香的肉馅。可见，灌汤包在扬州是有多受欢迎，灌汤包子用料考究，制作精细。它以精粉烫面制皮坯，选用肋条肉为馅心，用鲜骨髓汤打馅，配以十多种上等调料佐味。包子鲜香肉嫩、皮簿筋软、外形玲珑剔透、汤汁醇正浓郁、入口油而不腻。/div/div/body/html3、Promptation.html!DOCTYPEhtmlhtmlheadmetacharset=UTF-8title/titlestyletype=text/css.wrap_content{width:100%;height:602px;/*border:1pxredsolid;*/background-image:url(img/noise.png);background-position:center;background-size:500px500px;}.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_imgallimg{display:block;width:180px;height:150px;-webkit-transition:all.5sease;/*SafariandChrome*/-moz-transition:all.5sease;/*Firefox*/-ms-transition:a