Web实验报告课程设计
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
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
2、lesson.html
#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;*/