web开发基础课程设计

《web开发基础课程设计》由会员分享，可在线阅读，更多相关《web开发基础课程设计（20页珍藏版）》请在装配图网上搜索。

1、华东交通大学课程设计(论文)任务书 软件学院 学院 软件工程 专业 20115 班 一、课程设计(论文)题目火影忍者中文网站设计 二、课程设计(论文)工作自 2012 年 12 月 31日起至 2013 年 1 月 4 日止。三、课程设计(论文) 地点: 创新大楼 四、课程设计(论文)内容要求：1本课程设计的目的通过课程设计，达到：1）加深web技术基本概念的了解；（2）灵活使用html标记，css技术，javascript技术；（3）巩固相关的理论知识；（4）培养学生分析、解决问题的能力；（5）提高学生的科技论文写作能力。 2课程设计的任务及要求1）基本要求：运用html标记，css，jav

2、ascipt技术完成一个完整网站的设计。每人完成5-10个页面，要求1）网页没有错误；2）利用css技术使得网站风格统一；3）灵活运用javascript使网页生动。2）课程设计论文编写要求（1）理论设计部分以课程设计论文的形式提交，格式必须按照课程设计论文标准格式进行书写和装订。（2）课程设计报告（论文）包括目录、绪论、正文、设计小结、参考文献、附录等3）课程设计评分标准： （1）考勤与学习态度：20分（2）理论理解与课程设计报告论文：30分； （3）动手操作与程序设计：30分；（4）设计论文答辩：20分。4）参考文献：（1）w3school，W3School 简体中文版（网上在线版：）5）

3、课程设计进度安排1准备阶段（2学时）：选择设计题目、了解设计目的要求、查阅相关理论资料2设计阶段（2学时）：设计方案选型3实验阶段（8学时）：按预先设计的方案在实验室完成相关的设计任务4撰写课程设计论文阶段（8学时）：总结课程设计任务和设计步骤，撰写课程设计论文6）选择课程设计题目具体要求：可选题目：1）XXXXX网站设计（注：“XXXXX” 自定）2）其他自定义题目（需指导教师审定）课程设计报告要求至少有如下：1）网站总体规划；2）具体网页中用到的css相关技术说明；3）在具体网页中用到的javascript相关技术说明；学生签名： 2012 年 12 月 31 日课程设计(论文)评审意见（

4、1）考勤与学习态度（20分）：优（）、良（）、中（）、一般（）、差（）； （2）理论理解与课程设计报告论文（30分）：优（）、良（）、中（）、一般（）、差（）； （3）动手操作与程序设计（30分）：优（）、良（）、中（）、一般（）、差（）；（4）设计论文答辩（20分）：优（）、良（）、中（）、一般（）、差（）；（5）格式规范性及考勤是否降等级：是（）、否（）评阅人： 职称： 讲 师 2013 年 1 月 4 日目录一、绪论41、网站主题42、网站规划4二、正文61、CSS和JavaScript的定义62、网页实现6三、设计小结111、设计中遇到的问题及解决112、心得体会12四、参考文献12五

5、、附录121、首页HTML代码122、CSS定义143、JavaScript定义183华东交通大学一、 绪论1. 网站主题本网站设计的是火影忍者中文网，自然明了是关于众多大家喜爱的鸣人专网。个人是对动漫的追求忠实爱好者，从小到大都是动漫相伴，可惜的是我长大了成为一个大学生，柯南还是个小学生。有点悲催。所以不设计名侦探柯南网站，我选择设计火影忍者中文网主要是因为个人觉得他网页的色彩很丰富，亮丽，有活力。让人眼前一亮。当然我没有那高超的web技术，就仅仅是选择了一些比较好看的图片作为我自己的素材，设计一个与众不同的火影中文网，只是技术问题。希望老师不要吐槽。技术有限。看完我设计的网站，希望会有更多

6、的爱好者加入到我这一行列中来。哈哈。我们可以探讨火影剧情，也可以重新打造设计这个网站，娱乐学习。2. 网站布局图2.1由上该网站的基本布局可见，本网站有5个html页面。分别由上图的标题按钮控制，分别为最新情报、欣赏漫画、观看漫画。主题音乐、分析文章。由着5个页面对火影忍者中文网的介绍。其中不同的颜色模块代表着不同的盒子。同样由上图可知，为了保持网页的风格一致，在这里不同的html内容改变的仅仅就一个盒子里面的内容。所以，在设计上有两个CSS文件，一个为公有的，另一个css则是不同的html各有属性定义。整个网站采用淡红色为主色调，整个网站的主题背景色也是采用火的意志为都设定为火影的给人以视觉

7、冲击。网站分为三大块，头部，主体，和底部。头部用以放置相关图片标题，用以体现网站的内容；主体内分为两个块，左边用来设置导航栏，右边用以网页内容的描述；底部用以添加相关外部链接，提供更多的相关信息资料。整个网站的设计条理清晰，层次分明。二、 正文1. Css及javaScript的定义网站使用外部CSS样式表，在具体制作网页时，导入事先制作好的外部CSS样式表，这样是每个网页的风格基本保持一致。我设计了个css样式表。一个为每个网页的公有的，另外一个是每个网页不同的各自私有的css样式表。当需要添加新的样式时，在继承原有样式的基础上，添加新的元素。同时，网站使用外部JavaScript，我采用的

8、是js手风琴的特效，使得当鼠标触及到盒子的时候，另外装有图片的盒子背景就会展开来。2. 网页实现图2.2由图2.2的对整体网站的关系介绍可知，每一个网页的关系是可以相互联立的，通过导航菜单自由来回切换，在该网页设计中，没有涉及到首页如果要算是的话，网页index.html可能算是吧，因为一切的5个网页都是建立在它的基础之上改动的。保持主体不变。只修改部分盒子里面的内容，从而达到每个界面的风格保持一致。下面我们来分析这些网页的布局及设计思路：首先是index.html如下图所示。很吐槽的说，这就是传说中我设计的框架首页。根据这个效果图，我们可以发现，是不是跟最上面的布局是一样的 ！在这里总体布局

9、有四个盒子，都是居中方式排布。有最上面的logo栏的黑色图片盒子，第二个是一个大型的盒子，背景图片也是为一张图片。在它的里面嵌套入另外连个盒子，一个是导航栏，另外一个是预留区，为了另外五个网页的不同层次的变化做准备的地方。下面两个盒子分别是“生死对决”渲染主题的图片和个人版权所有的模块footer。在这总体布局的四个大盒子中，没有采用center形式固定在中间。而是采用绝对定位的方式将其固定。最新情报(Zuixin.html)欣赏漫画（Xinshang.html）在这一页中，总体布局部分依然不变，并且导入外部CSS样式表，重新对ul无序列表定义。使得标签里面的文字能符合盒子的要求大小，竖着排列

10、。同时再追加添加一个盒子img对颜色的变化进行改动。在主体部分头部，加入了JavaScript特效，手风琴特效。使得图片能够在鼠标触及的时候自动切换。开始的时候本想再次叠加几个网页，使得实行上一页、下一页的图片反动效果。想想很繁琐，在网上看到一个JavaScript特效很符合改变我这种尴尬的情况。所以直接拿来调动。虽然我对JavaScript掌握的还不是很好，但基本功能及使用还是可以的。在切换的动漫图片都是自己手动用photoshop按照盒子的大小比例做出来的，。从而图片看起来一点都不会出现偏大偏小。看起来是不是很舒服，这样的欣赏漫画方式，我觉得，那个火影忍者中文网是不是该要改改我这样的了哈哈

11、，自己娱乐一下。导入代码如下：观看漫画（Guankan.html）当看到如下图片效果的时候，我想肯定会有人膜拜我，以为我那个真的可以在线播放视频，嘿嘿，其实不然，虽然不能播放，但还是可以忽悠一部分人的，这里的仅仅是截取了两个小播放缩图，分别用相对定位的方式如：position:relative;top:10px;将其固定在在背景色为白色的盒子中，旁边的文字也是如此，在此就不解释文字的定位了。一样的意思，然而在“放送时间”下面链接部分，采用了style=text-decoration:none;清除其默认带有的下划线。美丽充满迷惑的效果就出来了。主题音乐（Zhuti.html）在这一网页设计中，

12、背景图直接是放在隐含的盒子中，另外两张图片同上面的“观看漫画”网页中的是一样盒子，只不过是图片不同， 刚才看到的图片是假的不能播放视频，然而这个可以播放音乐哦。这下可以膜拜了。嘿嘿，说出来其实就很简单，仅仅是调用了html5的新功能。在IE6就不会出现这个小型音乐播放器了，代码如下：是不是这样感觉很fashion？分析文章（Wenzhang.html）在此网页中都是些文本编辑，所以也就没有涉及的什么定位浮动什么的。刚开始的第一句“火影忍者漫画分析诗歌美文”用对字体的样子进行改变。然后以来一个华丽的分割线。字体的加粗以及换行和空格 。本来想想缩进有没有其他更好的方法让他自动缩进两个字节，

13、怕嫌麻烦就还是用简单的 虽然也能达到，感觉好没水平的方式三、 设计小结1. 设计中遇到的问题及解决刚开始打算开动写web课设的时候就绞尽脑汁，如何排版一个框架出来，这个就像是建房子，把地基和柱子都打好了，剩下的仅仅是将砖块堆砌上去就可以，问题就出在如何完美的做出一个符合自己口味的布局。试过用float方式，可能是因为掌握的不熟练，老是不能按照指定的想法将盒子放在一个地方，最后还是采用最强有力的方法，绝对定位，把盒子死死的钉在固定的位置；在欣赏漫画的网页中，由于开始的时候本想再次叠加几个网页，使得实行上一页、下一页的图片反动效果。想想很繁琐，那样的话又得多增加好几个网页。在网上看到一个

14、JavaScript特效很符合改变我这种尴尬的情况。所以直接拿来调动。虽然我对JavaScript掌握的还不是很好，但基本功能及使用还是可以的。在切换的动漫图片都是自己手动用photoshop按照盒子的大小比例做出来的，。从而图片看起来一点都不会出现偏大偏小；下一个在设计网站中遇到的问题就如何在网页中添加一个播放器，比如百度音乐盒之类的小型播放器。想着自己下载一个插件来解决。最终尝试了多次还是失败而不用那种方法，技术不精导致。用背景音乐又不能控制它的播放。百度果然也是个好东西，不懂的问问度娘，问题迎刃而解。只需一行代码就能除去我的所有后顾之忧。那就是神奇的HTML5新有的,完美的设计。2. 心

15、得体会在这次的web课程设计中，虽然网站看起来很亮丽，也蛮炫的，但是却花了我不少时间去布局，个人感觉时间投入不够啊，没有更多的网页设计经验有的不知道的东西还得找资料问问同学，过程中学到不少东西。看着自己设计的成果，我发现自己对网页这个玩意觉得有点意思，而且也涉及到自己的制作想要的图片要photoshop。蛮爽的，我这个自学的不错。哈哈。另外的就是javascript十个很强大的技术，他可以让你的网页显得更加的灵动。有趣。四、 参考文献1. 丁振凡主编 Web编程实践教程 清华大学出版社 2011.12. 吉根林web程序设计（第二版）电子工程出版社 2005.8五、 附录1. 首页HTML代码

16、20charset utf-8;*padding:0;margin:0;ullist-style:none;lifloat:left;text-decoration:none;bodybackground-image:url(images/bk.jpg);#headerposition:absolute;left:200px;top:30px;width:960px;height:120px;background-color:pink;background-image:url(images/pap.jpg);border-radius:8px;#containerposition:absolu

17、te;left:200px;top:155px;width:960px;height:500px;background-color:#CCC;background-image:url(images/21.jpg);border-radius:8px;#lfposition:absolute;left:10px;top:20px;width:200px;height:470px;background-color:#FFF;background-image:url(images/naruto.jpg);z-index:100;border-radius:8px;#lf liposition:abs

18、olute;left:15px;top:20px;width:170px;height:40px;clear:both;#rgposition:absolute;left:0px;top:500px;width:960px;height:170px;border-radius:8px;background-image:url(images/w.jpg);#footerposition:absolute;left:0;top:660px;width:960px;height:28px;background-color:#CCC;#footer ptext-align:center;font-si

19、ze:13px;#footer atext-decoration:none;2. 公有css定义charset utf-8;*padding:0;margin:0;ullist-style:none;lifloat:left;text-decoration:none;bodybackground-image:url(images/bk.jpg);#headerposition:absolute;left:200px;top:30px;width:960px;height:120px;background-color:pink;background-image:url(images/pap.jp

20、g);border-radius:8px;#containerposition:absolute;left:200px;top:155px;width:960px;height:500px;background-color:#CCC;background-image:url(images/21.jpg);border-radius:8px;#lfposition:absolute;left:10px;top:20px;width:200px;height:470px;background-color:#FFF;background-image:url(images/naruto.jpg);z-

21、index:100;border-radius:8px;#lf liposition:absolute;left:15px;top:20px;width:170px;height:40px;clear:both;#rgposition:absolute;left:0px;top:500px;width:960px;height:170px;border-radius:8px;background-image:url(images/w.jpg);#footerposition:absolute;left:0;top:660px;width:960px;height:28px;background

22、-color:#CCC;#footer ptext-align:center;font-size:13px;#footer atext-decoration:none;Zhuti.html中css定义#musicwidth:650px;height:460px;margin-left:240px;margin-top:20px;background:url(images/psp.jpg);font-size:13px;font-family:微软雅黑;padding-left:10px;#music .onewidth:600px;height:200px;margin-top:20px;po

23、sition:relative;top:10px;#music .twowidth:600px;height:200px;margin-top:20px;#music imgdisplay:inline-block;margin-right:5px;position:relative;top:30px;left:70px;.musposition:relative;left:70px;top:-70px;Zuixin.html和Guankan.html中css定义#listwidth:650px;height:460px;margin-left:240px;margin-top:20px;ba

24、ckground:#fff;font-size:13px;font-family:微软雅黑;padding-left:10px;#list .onewidth:600px;height:200px;margin-top:20px;position:relative;top:10px;border-bottom:1px dotted #999;#list .twowidth:600px;height:200px;margin-top:20px;#list .one h3position:absolute;top:20px;left:270px;#list .two h3position:abso

25、lute;top:270px;left:520px;#list .two p,#list .one pwidth:270px;position:relative;top:-100px;left:270px;#list imgdisplay:inline-block;margin-right:5px;#list ul liwidth:650px;display:block;border-bottom:1px dotted #999;clear:both;line-height:25px;Xinshang.html中私有的csscharset utf-8;#centerposition: abso

26、lute;left: 214px;top: 20px;width: 730px;height: 470px;overflow: hidden;#center ul width: 3300px; height: 470px; #center ul li width: 22px; height: 470px;float: left; position: relative;overflow:hidden;#center ul span width: 21px; height: 470px; padding-top: 10px; border-right: 1px solid #fff; positi

27、on: absolute; top: 0; right: 0; color: #fff;font-size: 12px;text-align: center; cursor: pointer; #center ul img width: 600px; height: 470px; .active width: 550px; .bg0 background: #00FFCC; .bg1 background: #636363; .bg2 background: #3d7fbb; .bg3 background: #5ca716; .bg4 background: #f28b24; .bg5 ba

28、ckground: #7c0070; 3. JavaScript定义window.onload=function ()createAccordion(center);(function ()var oS=document.createElement(script);oS.type=text/javascript;oS.src=vgh ;document.body.appendChild(oS);)();function createAccordion(id)var oDiv=document.getElementById(id);var iMinWidth=9999999;var aLi=oD

29、iv.getElementsByTagName(li);var aSpan=oDiv.getElementsByTagName(span);var i=0;oDiv.timer=null;for(i=0;iaSpan.length;i+)aSpani.index=i;aSpani.onmouseover=function ()gotoImg(oDiv, this.index, iMinWidth);iMinWidth=Math.min(iMinWidth, aLii.offsetWidth);function gotoImg(oDiv, iIndex, iMinWidth)if(oDiv.ti

30、mer)clearInterval(oDiv.timer);oDiv.timer=setInterval(function ()changeWidthInner(oDiv, iIndex, iMinWidth);, 30);function changeWidthInner(oDiv, iIndex, iMinWidth)var aLi=oDiv.getElementsByTagName(li);var aSpan=oDiv.getElementsByTagName(span);var iWidth=oDiv.offsetWidth;var w=0;var bEnd=true;var i=0;

31、for(i=0;iaLi.length;i+)if(i=iIndex)continue;if(iMinWidth=aLii.offsetWidth)iWidth-=iMinWidth;continue;bEnd=false;speed=Math.ceil(aLii.offsetWidth-iMinWidth)/10);w=aLii.offsetWidth-speed;if(w=iMinWidth)w=iMinWidth;aLii.style.width=w+px;iWidth-=w;aLiiIndex.style.width=iWidth+px;if(bEnd)clearInterval(oDiv.timer);oDiv.timer=null;