Web实验报告课程设计.doc

Web前端技术实验报告 课程名称：Web前端技术 实验名称：课程设计 系别班级： 学生姓名： 学生学号： 指导老师： 一、实验目的 通过一学期的所学，制作一个网站作为课程设计，能基本满足实验大纲要求。 二、内容及要求 综合运用html、CSS、javascript进行课程设计，主题不限。 作品尽量支持原创。 三、实验原理 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.对代码进行封装，进行标注与分块。 实验代码 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 lia class=daohang_home href=home.html target=main首nbsp;页/a/li lia class=daohang_lesson href=lesson.html target=main美食学堂/a ul id=id_ulA li扬州炒饭/li li狮子头/li li灌汤包/li /ul /li lia class=daohang_promation href=promptation.html target=main美食展示