Web课程设计报告.docx
《Web课程设计报告.docx》由会员分享，可在线阅读，更多相关《Web课程设计报告.docx（18页珍藏版）》请在冰点文库上搜索。
Web课程设计报告
课程设计（论文）任务书
学 院 专 业 班
一、课程设计（论文）题目 制作个人网页
二、课程设计（论文）工作自2011年6月26日起至2011年7月1日止。
三、课程设计（论文）地点:
四、课程设计（论文）内容要求：
1．本课程设计的目的
（1）使学生掌握WEB程序设计的基本工作原理；
（2）培养学生基本掌握WEB程序设计的基本思路和方法；
（3）培养学生分析、解决问题的能力；
（4）提高学生的科技论文写作能力。
2．课程设计的任务及要求
1）基本要求：
（1）分析各功能模块的需求；
（2）要求使用HTML,CSS,JS制作静态网页；
（3）提出合理的设计方案；
（4）网页的外观要求美观；
（5）每人至少完成5~10张页面的设计。
2）创新要求：
在基本要求达到后，可进行创新设计，如使用Flash,Js框架等。
3）课程设计论文编写要求
（1）要按照书稿的规格打印誊写毕业论文
（2）论文包括目录、绪论、正文、小结、参考文献、谢辞、附录等
（3）课程设计装订按学校的统一要求完成
4）答辩与评分标准：
（1）完成需求分析：
20分；
（2）完成设计过程（需详细系统流程图）：
20分；
（3）完成编码：
20分；
（4）回答问题：
20分。
（5）论文编写：
20分。
5）参考文献：
（1）董.《》某出版社
（2）张.《》某出版社
（3）http:
//某网址/
6）课程设计进度安排
内容天数 地点
构思及收集资料2 图书馆
编码2 实验室
撰写论文1 图书馆
学生签名：
2010年6月26日
课程设计（论文）评审意见
（1）完成需求分析（20分）：
优（ ）、良（ ）、中（ ）、一般（ ）、差（ ）；
（2）设计分析 （20分）：
优（ ）、良（ ）、中（ ）、一般（ ）、差（ ）；
（3）完成编码 （20分）：
优（ ）、良（ ）、中（ ）、一般（ ）、差（ ）；
（4）回答问题 （20分）：
优（ ）、良（ ）、中（ ）、一般（ ）、差（ ）；
（5）论文编写 （20分）：
优（ ）、良（ ）、中（ ）、一般（ ）、差（ ）；
评阅人：
职称：
硕士
2010年7月1日
目录
绪论4
一、选题说明5
1、实验目的5
2、作品简介5
二、调试分析6
1、方案设计6
2、界面设计7
三、功能实现8
1、创建网页页面8
2、布局导航10
3、插入图片11
4、各页面效果12
四、个人总结15
五、参考文献16
六、附录17
绪论
随着Internet的迅速发展，社会已经进入了网络时代，人们越来越倾向于从Internet获取信息。
而网站则是Internet网上进行信息传播的主要载体。
网页是构成网站的基本元素，是承载各种网站应用的平台。
通俗的说，您的网站就是由网页组成的。
如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
所谓网站（Website），就是指在网际网路（因特网）上，根据一定的规则，使用HTML等工具制作的用於展示特定内容的相关网页的集合。
简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务），又或收集想要的信息。
人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。
怎样将杂乱无章的信息（包括文字、图片和影音）经过组织，合理而且有序地通过网页呈现给人们，这就是我们的一个新的课题：
网页设计。
一、选题说明
1、实验目的
运用所学《Web应用设计基础》的理论知识和技能，使用某种网页开发工具，设计一个网站，提高综合应用所学知识的能力，积累Web开发的编程经验，提高编程与调试能力、团队协作能力。
以便学会分析和解决计算机应用实际问题，提高网页设计与制作能力；掌握利用软硬件资源发布一个具体网站的操作过程。
2、作品简介
经过考虑对制作工具的筛选，决定用Dreamweaver做个人网页，Photoshop为辅助工具，设计和制作图片、页面及图标等。
本网站是以静态网页为基础，以Dreamweaver为制作软件、以Photoshop为设计软件而成的。
通过这个学期对网页制作代码相关的学习以及之前对这些软件的了解，打算在前几次实验的基础上，制作出相对简单的“宇智波家族”网页，展示其相关的一些东西。
本网站内容充实，在主页的设计上运用了模板，框架等。
分页面上运用了导航条。
插入了动态图片以及视频等给网增加了美观度，在首页的设计上本着简单易懂的原则，用户只要点击链接就能看到自己想看到的连接内容。
网站的首页设置了背景音乐，使访问者在浏览的同时还能欣赏到悠扬的旋律。
二、调试分析
1、方案设计
运用Dreamweaver的框架功能；围绕关于选题的一些相关信息进行分类，实现分类的链接进行制作；并且要注重网页的一体化，美感，还有色彩的搭配，音乐的选取等。
利用框架（选取了左右下的框架结构）设置基本模样。
左边框架作为导航栏,在导航栏插入了音乐，以便放入的音乐不会随着链接的进入而消失，增添了网页的趣味性。
如图2-1，导航栏包括共：
家族简介，血继限界，华丽忍术，宇智波斑，火之意志五项，分别链接到各个子页面；各板块分别插入背景、颜色字体、动态图片等。
图2-1总布局
2、界面设计
本网页页面风格为暗色系，以黑色为主色其他色系进行搭配进行制作。
index_myweb：
主模块（右上层模块）添加制作的动态欢迎图片，输出“欢迎来到宇智波家族，这个古老的地界”。
左侧导航栏目分布了各个子页面的链接，点击即可进入各个子页面。
由导航栏分别可以进入以下子页面：
家族简介：
主要介绍了宇智波家族的基本资料，以及家族历史特征等等。
血继限界：
介绍了该家族享誉已久的各项特有忍术及其发展。
华丽忍术：
主要是插入一些忍术的动态效果图片，以增添灵动性。
宇智波斑：
介绍了宇智波家族的始祖，以及他的一些不为人知的秘密。
火之意志：
由鼬和佐助两兄弟的羁绊，从何引出意志的思考，火之意志！
以上五个分页面风格与整体保持一致，庄重而不失色彩。
图2-2欢迎界面
三、功能实现
1、创建网页页面
（1）新建站点：
图3-1定义站点
如图3-1建立新站点，设置好各个选项，一般静态网页不用连接到网络，设置不用做太多修改，只需要设定好名称及文件夹位置即可。
（2）新建网页：
图3-2新建文档
如图3-3，选择创建新项目的HTML，或者选择模板建立；创建好六个页面，分别保存名称为：
index，xjxj，hlrs,yzbb,hzyz。
图3-3文件名称
2、布局导航
（1）设置导航栏
如图3-4，为每个分类的文字添加链接，将文字添加链接到“我的档案”等各个子分页，并且分页链接目标选择mainframe。
图3-4编辑导航
（2）效果美化
在mainframe中插入自己在Photoshop中制作的动态欢迎图片，添加到layer1中可以调试位置。
调整各段落字体颜色，以及插入页面背景图片。
部分代码如下：
家族简介
|
血继限界
|
华丽忍术
|
宇智波斑
|
火之意志
|
火之意志
3、插入图片
（1）调整好板块布局，然后插入各个图片链接，做成动态效果。
图3-5插入图片
（2）部分代码如下：
| | | | |
| | | | |
| | | | |
4、各页面效果
（1）家族简介
图3-6家族简介
（2）血继限界
图3-7血继限界
（3）华丽忍术
图3-8华丽忍术
（4）宇智波斑
图3-9宇智波斑
（5）火之意志
图3-10火之意志
四、个人总结
通过本次网页的制作过程，我学习到了很多实用的东西，也充分了解了Dreamweaver这个软件的强大，对学习了一个学期的课程也有了更深入的解，由于有了多媒体和网页设计课程作基础，因此在制作网页的过程中诸如制作首页，页面链接等步骤进行的还是比较顺利的，经过最近每天晚上的辛苦努力，终于完成了我的主页的制作。
在这段时间里，一方面，我尝试着将课本上所学的知识运用到制作中，另一方面，我又时刻在网上学习自己需要的知识，学习到了很多有用的东西，在这过程中，我对网页的设计上有了更深的体会，对于这一领域，学到的知识多了，反而发现自己所了解的少了。
遗憾的是，自己不会做动态网页，否则我相信会更成功，庆幸的是，整个设计过程都很顺利，错误也修改成功了不少，也可以安慰一下自己了。
最终看到了自己亲手做出来的网站，心里有了收获般的欣喜，这让我从心底里感谢这次实践的机会，感谢老师给了我们一次自己动手的机会，在设计的过程中，同学们互相讨论，这也增强了同学之间的交流。
虽然网页设计完成了，但欠缺之处尚存，希望可以得到老师的指点，使设计更加完善。
五、参考文献
[1]基于Web的远程教育系统参考模型研究.桂芳、吴杰、张世永《计算机工程》第12期
[2]数据挖掘技术在Web上的应用及其工具设计.谢丹夏、李晓东、《计算机应用》第2期
[3]Web应用程序的设计与分析.张骏、王俊峰、张世永《计算机工程与应用》2000第3期
[4]基于Web的企业过程参考模型库管理系统设计.沈晖、冯绍军、陈禹六《计算机集成制造系统》第2期
[5]Web应用设计基础
六、附录
第五板块部分代码：
宇智波家族
--
body,td,th{
font-size:
14px;
}
body{
background-color:
#333333;
background-image:
url（image/MH5KU$Y5%60N6@R%25_WA97@N%5DB.jpg）;
}
.style1{font-size:
36px}
.style3{font-size:
24px}
.style5{font-size:
18}
a:
link{
color:
#990000;
}
a:
visited{
color:
#990000;
}
a:
active{
color:
#0000FF;
}
.STYLE6{color:
#FF3300}
.STYLE7{color:
#CC6600}
.STYLE8{color:
#FF00FF}
.STYLE9{color:
#0000FF}
-->
宇智波家族
|
|
家族简介
|
血继限界
|
华丽忍术
|
宇智波斑
|
火之意志
|
火之意志
宇智波鼬和宇智波佐助两兄弟，宇智波家族与木叶曾经的恩恩怨怨，理解与误会，忠诚与欺骗，交织着的是几代人之间的纠葛。
鼬故意刺激佐助，激发他成长，目的是为了日后向斑报仇。
而斑对佐助的行动了如指掌，期盼著佐助的演变。
无论何种情感，诠释的都是迷离的内心。
探求生存的意义，永不服输的精神，团队精神的重要，人活着不只是为了自己，每个人都可以用自己的力量改变命运，只要坚持不懈，不断的努力吊车尾也能战胜天才。
虽然人生事事难料，遇到的不如意可能很多，但是用积极乐观的态度面对人生并积极进取就能有所收获。
孤独并不可怕，可怕的是将自己束缚在孤独之中。
正因为拥有火之意志，忍者们才会有真正的力量。
沧海横流却唯恒不变，无论是鼬还是佐助，都将用自己内心的方式，来诠释那火之意志！
出色忍者：
宇智波斑、宇智波鼬、宇智波止水、宇智波佐助
|
特有忍术：
一般忍术：
火遁系忍术，血继限界：
月读、天照、须佐之男，禁术：
伊邪那岐
|