web课程设计11.docx
- 文档编号:17391237
- 上传时间:2023-07-24
- 格式:DOCX
- 页数:14
- 大小:1.21MB
web课程设计11.docx
《web课程设计11.docx》由会员分享,可在线阅读,更多相关《web课程设计11.docx(14页珍藏版)》请在冰点文库上搜索。
web课程设计11
课程设计(论文)任务书
软件 学 院 软件+电子商务 专 业2009-2班
一、课程设计(论文)题目 华东交通大学网站设计
二、课程设计(论文)工作自2011年6月13日起至2010年6月17日止。
三、课程设计(论文)地点:
创新大楼406,306,304,302机房。
四、课程设计(论文)内容要求:
1.本课程设计的目的
通过课程设计,达到:
1)加深web技术基本概念的了解;
(2)灵活使用html标记,css技术,javascript技术;(3)巩固相关的理论知识;
(4)培养学生分析、解决问题的能力;(5)提高学生的科技论文写作能力。
2.课程设计的任务及要求
1)基本要求:
运用html标记,css,javascipt技术完成一个完整网站的设计。
每人完成5-10个页面,要求
1)网页没有错误;2)利用css技术使得网站风格统一;3)灵活运用javascript使网页生动。
2)课程设计论文编写要求
(1)理论设计部分以课程设计论文的形式提交,格式必须按照课程设计论文标准格式进行
书写和装订。
(2)课程设计报告(论文)包括目录、绪论、正文、设计小结、参考文献、附录等
3)课程设计评分标准:
(1)考勤与学习态度:
20分
(2)理论理解与课程设计报告论文:
30分;
(3)动手操作与程序设计:
30分;
(4)设计论文答辩:
20分。
4)参考文献:
(1)w3school,W3School简体中文版(网上在线版:
5)课程设计进度安排
1.准备阶段(2学时):
选择设计题目、了解设计目的要求、查阅相关理论资料
2.设计阶段(2学时):
设计方案选型
3.实验阶段(8学时):
按预先设计的方案在实验室完成相关的设计任务
4.撰写课程设计论文阶段(8学时):
总结课程设计任务和设计步骤,撰写课程设计论文
6)选择课程设计题目具体要求:
可选题目:
1)XXXXX网站设计(注:
“XXXXX”自定)
2)其他自定义题目(需指导教师审定)
课程设计报告要求至少有如下:
1)网站总体规划;
2)在具体网页中用到的css技术及作用;
3)在具体网页中用到的javascript技术及作用;
学生签名:
2011年6月10日
课程设计(论文)评审意见
(1)考勤与学习态度(20分):
优( )、良( )、中( )、一般( )、差( );
(2)理论理解与课程设计报告论文(30分):
优( )、良( )、中( )、一般( )、差( );
(3)动手操作与程序设计 (30分):
优( )、良( )、中( )、一般( )、差( );
(4)设计论文答辩 (20分):
优( )、良( )、中( )、一般( )、差( );
(5)格式规范性及考勤是否降等级:
是( )、否( )
评阅人:
职称:
讲师
2011年6月17日
目录
绪论
网站主题
高考结束有一段日子,正逢高考学子填报志愿,鉴于本学期学习完了《Web应用设计基础课程》,自己也尝试着运用所学的网页设计的知识做个高校宣传网站,在此为母校做个宣传的网站。
立足与为母校做宣传,力求灵活运用Web应用设计知识运用于实际。
网站规划
网站共有5个页面,分别为首页、学校简介、联系我们、交大日新、锦文欣赏。
有学校首页、简介、联系我们、锦文欣赏的导航栏及其尾部共用一套css样式,让网站的整体风格统一。
首页设计风格主要以蓝色、灰色、绿色等淡色为主色调,以显示高校不张扬的特点、让浏览者浏览起来会舒服一点。
采用三栏式布局。
主页包括logo、导航栏、焦点图片、学校简介、最新动态、特色活动、锦文欣赏、成长足迹8个部分。
导航栏采用
javascript做的下拉菜单特效,焦点图片采用javascript做的图片轮换的特效。
学校简介采用两栏式布局,左栏有两种竖直链接导航风格,一种是无序列表形式的导航,另一种是下拉列表式的多链接导航。
右栏是学校简介的内容。
头部的导航栏用的javascript做的下拉菜单特效。
联系我们采用两栏式布局,左栏有两种竖直链接风格,一种是无序列表形式的导航,另一种是下拉列表式的多链接。
右栏是可供填写的表格。
头部的导航栏用的javascript做的下拉菜单特效。
交大日新采用两栏式布局,左栏的是新闻列表,右栏有两个部分:
热门文章、推荐文章。
头部三个横向的导航栏。
锦文欣赏分两个栏目,上面的是锦文欣赏,下面是交大美景,交大美景用的是javascript特效图片走廊。
头部的导航栏用的javascript做的下拉菜单特效。
正文
首页设计
首页包括logo、导航栏、焦点图片、学校简介、最新动态、特色活动、锦文欣赏、成长足迹8个部分。
Logo用一个div将两个图片包含起来。
定义盒子的宽度,并让其自动对齐。
导航栏用javascript做的特效,以下是代码:
startList=function(){
if(document.all&&document.getElementById){//能力检测浏览器是否支持document对象
navRoot=document.getElementById("nav");//获取ID为“nav”节点
for(i=0;i node=navRoot.childNodes[i];//把ul的子节点储存在node数组内 if(node.nodeName=="LI"){ node.onmouseover=function(){ this.className+="over"; } node.onmouseout=function(){ this.className=this.className.replace("over",""); } } } } } window.onload=startList;//网页加载完后立即执行startlist函数 滚动字幕标记标签的使用: 利用简单的javascript语句控制文字的运动状态onmouseover表示鼠标经过滚动字幕是: 焦点图片: 使用javascript做的图片轮换效果,javascript代码如下: //slideimages数组为变换的图 varslideimages=newArray(); slideimages[0]="images/hu.jpg"; slideimages[1]="images/082.jpg"; slideimages[2]="images/houqing.jpg"; slideimages[3]="images/jidian.jpg"; slideimages[4]="images/beiqu.jpg"; //slidetext数组为变换的文字 varslidetext=newArray(); slidetext[0]="焦点图01"; slidetext[1]="焦点图02"; slidetext[2]="焦点图03"; slidetext[3]="焦点图04"; slidetext[4]="焦点图05"; //slidetext数组为点击大图后跳到的地址 varslidelinks=newArray(); slidelinks[0]="#"; slidelinks[1]="#"; slidelinks[2]="#"; slidelinks[3]="#"; slidelinks[4]="#"; //焦点图初始内容--start varslidespeed=3000 varslidesanjiaoimages=newArray("images/bian2.gif","images/bian1.gif"); varslidesanjiaoimagesname=newArray("xiaosan1","xiaosan2","xiaosan3","xiaosan4","xiaosan5"); varfilterArray=newArray(); filterArray[0]="progid: DXImageTransform.Microsoft.Pixelate(enabled=false,duration=2,maxSquare=25)"; filterArray[1]="progid: DXImageTransform.Microsoft.Stretch(duration=1,stretchStyle=PUSH)"; filterArray[2]="progid: DXImageTransform.Microsoft.Stretch(duration=1)"; filterArray[3]="progid: DXImageTransform.Microsoft.Slide(bands=8,duration=1)"; filterArray[4]="progid: DXImageTransform.Microsoft.Fade(duration=1,overlap=0.25)"; varimageholder=newArray() varie55=window.createPopup for(i=0;i imageholder[i]=newImage() imageholder[i].src=slideimages[i] } functiontu_ove(){clearTimeout(setID)} functionou(){slideit()} varwhichlink=0 varwhichimage=0 functiongotoshow(){ window.open(slidelinks[whichlink]); } functionslideit(){ document.images.slide.style.filter=filterArray[whichimage]; //alert(document.images.slide.style.filter); pixeldelay=(ie55)? (document.images.slide.filters[0].duration*1000): 0 //alert(pixeldelay); if(! document.images)return if(ie55){ document.images.slide.filters[0].apply(); document.images.slide.filters[0].play(); } document.images.slide.src=imageholder[whichimage].src document.getElementById("textslide").innerText=slidetext[whichimage]; document.getElementById("xiaosan1").src=slidesanjiaoimages[0]; document.getElementById("xiaosan2").src=slidesanjiaoimages[0]; document.getElementById("xiaosan3").src=slidesanjiaoimages[0]; document.getElementById("xiaosan4").src=slidesanjiaoimages[0]; document.getElementById("xiaosan5").src=slidesanjiaoimages[0]; document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1]; if(ie55)document.images.slide.filters[0].play() whichlink=whichimage whichimage=(whichimage whichimage+1: 0 setID=setTimeout("slideit()",slidespeed+pixeldelay) } slideit() functionove(n){ clearTimeout(setID) whichimage=n; document.images.slide.src=imageholder[whichimage].src document.getElementById("textslide").innerText=slidetext[whichimage]; document.getElementById("xiaosan1").src=slidesanjiaoimages[0]; document.getElementById("xiaosan2").src=slidesanjiaoimages[0]; document.getElementById("xiaosan3").src=slidesanjiaoimages[0]; document.getElementById("xiaosan4").src=slidesanjiaoimages[0]; document.getElementById("xiaosan5").src=slidesanjiaoimages[0]; document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1]; } 中间用一个大盒子(div)content里面装左left、中middle、右right三个盒子。 并让left、middle盒子向左浮动,right向右浮动。 效果图: 学校简介设计 设计小结 通过JavaScript文件编写一些特效,但通过网页调用时发现有些JavaScript文件无法将其添加到html的onload事件中,也就是网页在加载的时候并不调用该JavaScript。 虽然通过将其改为id的形式在div标签中调用可以实现,但是目前还不知道有些js程序无法随html的onload加载的原因,有些javascript代码只在个别浏览器里显示。 一开始写了很多的css样式,在编写网页时,有很多相同的标签,样式各不相同,在调用时很多样式没显示出来,解决办法就是给css样式加上属性域,让其只在某个盒子中有用。 由于网站风格统一,有些样式比如说导航栏、尾部可以单独做成一个网站, css也只是将基本的标签加以定义,而网页的各部分都是通过talbe标签来实现的,后来发现如果一个网页有多个衍生的网页,这样不但要反复的定义table而且如果发现错误,一点一点的修改也过于麻烦,因而采用了再css里定义各种区域的类和id的方法,结果是编译变的简单很多。 由于写了过多的css文件,所以在调用的时候发现会有覆盖的现象出现,因此将各部分网页以及相应的css保存在同一个文件中,结果显示正常。 参考文献 《网页设计与制作教程》刘瑞新、张兵义、赵子江等编著机械工业出版社2009年10月 《网页设计与制作》蔡伯峰2010年5月 1.《web开发技术使用教程》陈轶主编清华大学出版社 2.JavaScript分享网 3.W3Cschool在线教程 附录
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web 课程设计 11