- 1、本文档共19页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
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美食展示
您可能关注的文档
- JAVA实训课程设计.pdf
- JAVA数据结构大作业.pdf
- JAVA数据结构和算法笔记.pdf
- JAVA数据结构习题及解答(英) GOOD.pdf
- JAVA数据库课程设计报告.pdf
- java贪吃蛇课程设计.doc
- Java万年历课程设计报告.doc
- JAVA网上商城系统课设报告.doc
- Java微波炉倒计时软件设计报告.pdf
- JAVA文件上传总结心得.pdf
- 新视野二版听说1第6单元示范1课件.ppt
- 【参考答案】 联络口译(第二版) 《联络口译》(第二版)参考答案.pdf
- 梅大高速茶阳路段“5·1”塌方灾害调查评估报告.docx
- 虹吸雨水PE管施工节点标准做法.pdf
- 2025消防设施施工质量常见通病防治手册,典型图示+规范要求.pptx
- 新视野大学英语(第二版)读写教程 4 空军工程大学编U05B.ppt
- E英语教程2(智慧版)Unit 6.pptx
- E英语教程3(智慧版)Unit 7.ppt
- 新视野二版读写1第4单元课件Section A How to Make a Good Impression.pptx
- E英语视听说教程4(智慧版)4-U2课件(2024版)U2.pptx
文档评论(0)