web课程设计11.docx

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在线教程

附录