《网页设计与制作》课程卷二实践考核方案
《网页设计与制作》课程设计说明书
姓 名： 程超 学 号： 20111130102 班 级： 11软件技术 指导教师： 张艳武 完成日期： 2012年6月16日
目录
第1章 鲁能球迷网的规划 ................................................... 2
1.1需求分析 ........................................................... 2
1.1.1网站的定位 .................................................... 2 1.1.2网站板块的设置 ................................................ 2 1.2网站功能设计 ....................................................... 2 1.2.1首页功能 ...................................................... 2 1.2.2子网页功能 .................................................... 2
第2章 鲁能球迷网的设计与制作 ............................................. 3
2.1首页设计 ........................................................... 3
2.1.1栏目设计 ...................................................... 4 2.1.2 logo及banner设计 ............................................ 4 2.1.3导航设计 ...................................................... 4 2.1.4友情链接 ...................................................... 5 2.2子网页设计 ......................................................... 5
2.2.1栏目设计 ...................................................... 6 2.2.2导航设计 ...................................................... 6 2.2.3风格与色彩搭配 ................................................ 7 2.2.4首页与子网页之间的链接 ........................................ 7 2.2.5子网页与子网页之间的链接 ...................................... 7
第3章 鲁能球迷网设计的重难点分析 ......................................... 7
3.1网页设计的重点分析 ................................................. 7 3.2网页设计的难点分析 ................................................. 7 设计总结 .................................................................. 8 参考文献 .................................................................. 8
鲁能球迷网设计说明书
绪论
山东鲁能泰山足球俱乐部，简称鲁能队或者泰山队，是一家位于山东省济南市的足球队，其球迷群体庞大，遍布山东各地。前身为成立于1993年12月2日的济南泰山将军足球队，1998年1月5日正式更名为山东鲁能泰山队。中国顶级联赛传统四大豪门之一，与大连或上海的比赛被国内球迷称之为国家德比。获得过很多荣誉，主要有中国顶级联赛冠军4次，足协杯冠军5次，中超杯冠军1次，2006年更是以创多项中国顶级联赛纪录的方式夺得联赛冠军。2008年，2010赛季均获得了中国顶级联赛冠军。曾经多次代表中国参加亚冠联赛，并且取得较好战绩。
鲁能球迷网主要针对于广大山东地区的鲁能球迷，为鲁能球迷提供一个了解鲁能泰山队的平台，更好的促进球迷之间的交流，让更多的人喜欢山东鲁能泰山队。
在这次设计中，我将用到本学期学到的HTML、CSS等知识，将课上老师将的理论知识与实践相结合，不仅可以提高对知识的理解，更锻炼了在实际项目中的运用。
1
第1章 鲁能球迷网的规划 1.1需求分析
鲁能球迷网是为了宣传山东鲁能泰山足球队而设立的网站，我们网站志在增强鲁能球迷的凝聚力，宣传我们鲁能的文化。以吸引更多喜欢足球的朋友加入鲁能泰山球迷的队伍当中来。 1.1.1 网站的定位
1.扩大山东鲁能泰山球迷协会的规模。 2.提高球迷对山东鲁能泰山的认识。
3.吸引更多的国内球迷驻入鲁能，不仅仅局限于山东球迷。 1.1.2 网站板块的设置:
网站的版块设置：网站设计板块主要有八块：网站首页、球员英姿、球队组成、鲁能赛程、鲁能队史、鲁能球场、球迷协会、加入协会。 1.2 网站功能设计
我们鲁能球迷网的功能主要是将山东鲁能足球俱乐部的文化展现出来，通过本网站，球迷们可以了解到更多的关于球队的信息，本网站同样也是为了宣传山东鲁能俱乐部球迷协会，目的是扩大球迷协会的规模。 1.2.1 首页功能：
1.通过导航栏，浏览者可以了解本网站大致的内容。
2.首页以橙色为主基调，配合着山东鲁能的队标，图片等，将鲁能的霸气展示的淋漓尽致！
3.首页的文本内容主要介绍山东鲁能泰山俱乐部概况和本赛季的现状。
4.首页的友情链接部分，可以链接到山东鲁能官网，贴吧，论坛等。 1.2.2 子网页功能
1.通过子网页将网站内容更加条理化、更加详细、更加方便的展现给浏览者。 2.子网页中将每个板块的内容具体化、深入化、详细化。让感兴趣的浏览者详细了解鲁能泰山足球俱乐部的文化。
3.子网页在展现具体内容的同时，能让浏览者更加深入了解鲁能泰山足球俱乐部的文化的一切相关内容。
4.可以方便浏览者及时快捷的与我们鲁能泰山球迷协会取得联系，可以通过与协会会长联系申请加入鲁能泰山球迷协会。
2
第2章 鲁能球迷网的设计与制作 2.1 首页设计
首页设计主要采用表格布局，分为六个板块，每个版块都排列整齐，十分清晰条理，每个板块都有颜色区分，方便浏览者的阅读，如图 2.1。
图2.1
3
2.1.1 栏目设计：
鲁能球迷网栏目主要包括八大部分，就是网站首页、球员英姿、球队组成、鲁能赛程、鲁能队史、鲁能球场、球迷协会、加入协会。还有其他一些小栏目，诸如友情链接等。
2.1.2 logo及banner设计 Logo如图2.1.2-1所示：
图2.1.2-1
Banner设计如图2.1.2-2所示：
图2.1.2-2
网站Logo是鲁能泰山的队徽，以鲁能传统的橙色为主题，logo完全能体现出鲁能泰山的橙色文化，并且Logo上有四颗星星，表示鲁能泰山四次问鼎国内最高水平联赛。Banner主要是以橙色，黑色，黄色三种颜色组成，像燃烧的烈火，彰显鲁能泰山足球队的霸气，在Banner上添加字体，并做超链接，实现了网站的导航功能。 2.1.3 导航设计：
导航设计上采用橙色火焰条状banner为背景，其中字体都为黑色，犹如熊熊烈火中一道黑色的闪电一般，符合鲁能俱乐部的王者之气,如图2.1.3。
图2.1.3
4
2.1.4 友情链接
在此栏目中，为友情链接网址，通过链接可以直接与山东鲁能相关的其他网址，如山东鲁能俱乐部官方网站、山东鲁能球迷论坛、山东鲁能百度贴吧、巴塞罗那官方网站、11软件班级博客等,如图2.1.4。
图2.1.4
2.2 子网页设计
子页的上半部分采用与主页相同的布局，下半部分则内容通过文字，图片，动画等多媒体技术将山东鲁能的各项信息清楚的介绍给浏览者,如图2.2所示。
5
图2.2
2.2.1栏目设计
在子网页中，因子网页数量较多栏目设计分为多种，在首页的基础上，建立多个子网页，以便于浏览者的浏览。
在球员英姿中，您可以通过图文信息，看到球员们在场上场下的魅力瞬间。
在球队组成中，您可以看球员介绍，球队历届的教练，球队的明星，球队的全家福等。 在鲁能赛程中，我们将为列出鲁能当前赛季的全部赛程，包括时间，主客场，场次等。 在鲁能历史中，我们为您介绍鲁能泰山球队从建国来到现在这六十多年的发展历程。 在鲁能球场中，您可以通过图品看到鲁能感受主场山东省体育中心的美丽全景风光。 在球迷协会中，您可以感受到鲁能球迷的激情四射，数量之多。
在加入协会中，您可以看到球迷协会的最新动态，还可以为您提供加入协会的联系方式。 2.2.2 导航设计
本网站子叶的导航设计上采用与首页相同的设计方式，橙色火焰条状banner为背景，其中字体都为黑色，犹如熊熊烈火中一道黑色的闪电一般，符合鲁能俱乐部的王者之气。
6
2.2.3 风格与色彩搭配
鲁能球迷网，在风格色彩上采用鲁能队服的和鲁能文化的传统之色----橙色，给球迷朋友一种亲切感，拉近了球迷与球员和俱乐部之间的距离。橙色是山东球迷最喜爱的颜色，这种颜色充分得到广大球迷的认可。 2.2.4 首页与子网页之间的链接
在导航栏处可以实现首页与子页的链接。再鼠标经过导航栏按钮时，会出现下划线，表示此处可以链接到该子页，链接完成后不会出现传统的链接后文字变色现象，文字变色现象会使页面颜色不搭配，从而影响整个网页的美感。在导航栏中，每一个链接都能与子网页进行链接，同时子页也可以向首页进行跳转，使浏览者可以轻松随意的访问本站中的每一个页面。
2.2.5 子网页与子网页之间的链接
在子网页中，同样可以实现各个子页之间的互相跳转，浏览者可以根据自己的喜好在提供的七大子页中自由选择，自由跳转，尽情的享受鲁能足球的魅力文化，尽情的欣赏鲁能在球场上的英姿。
第3章 鲁能球迷网设计的重难点分析 3.1 网页设计的重点分析
（1）网页主页的设计至关重要。主页的设计关系着整个网站的布局设计与内容介绍，浏览者往往通过主页对网站有一个大致的印象，一定要给浏览者一个好的印象。 （2）网页主页中布局的设计与风格、色彩搭配上至关重要，这体现了网站的文化。 （3）网页子页设计也十分重要，要让浏览者可以快速、清晰的看到自己想看的内容。 (4) 网页中也要注意一些代码的引用，要妥善运用这些代码，实现代码的多次利用，减少垃圾代码的数量，让网站更加高效。 3.2 网页设计的难点分析
(1) 网页设计中最难设计的就是主页的版面设计是如何的设计、还有就是色彩搭配是否合理，是否符合网站的文化，是否适合大众的口味，如果设计者只注重自己的感受，那么这个网站一定做大，不会有很多的浏览者。
(2) 网页设计中子页设计要内容全面，其中的内容要与导航栏吻合，内容要独特新颖，只有独特新颖的内容才会吸引更多的浏览者。
(3)网页设计要搭配合理，设计者有较好的审美观，做到美观而不失简洁。
7
设计总结：
网站的设计其实没有想象中的那么难，设计网站花费时间最多是在构思的设计上，如何设计出一个令人满意的布局并不是很容易，一旦构思做好，后面用代码实现布局就很简单了，代码实现只是一个技术手段，只要掌握了就能运用自如，所以我认为网站的设计应该把时间和精力着重用在构思上，而不是随着设计而构思，经过严密的构思之后再设计才会有更好的效果。
参考文献：
1.《DreamweaverCS3 基础与实例教程》主编 谬亮 电子工业出版社
2.《Dreamweaver&Flash&Photoshop网页设计基础与实例教程》 龙飞 电子工业出版社 3.《多媒体网页设计从入门到精通》 主编 邓文渊 科学出版社 4.《网页设计制作案例教程》 主编 高志清 中国水利水电出版社
8
信息工程学院
《网页设计与制作》实践环节考核报告单
2011-2012学年度第二学期期末
排课编号：（2011-2012-2）-0501410-00492-1批阅日期：2012年6月30日 姓名 程超 评价项目 9-10 主题表达合乎逻辑，明确，富有时代气息 整个站点风格一致界面美观，页面风格简洁、明快、排版布局合理线条流畅，色彩鲜明 文件、文件夹命名规则，没有无效链接、错误链接和非法链接 网站结构清晰、导航明确，内 8-9 7-8 6-7 6-0 班级 优秀 11软件 良好 学号 中等 20111130102 及格 不及格 评分标准及 得分 容易于检索 图片经过处理，无网上下载痕 迹 DIV布局合理 Css样式运用灵活 颜色搭配合理，布局精确 浏览器兼容性好 课程设计报告书写规范、文字 通顺、图表清晰、数据完整 合计 考核成绩 任课教师 签名 审核人签名
因篇幅问题不能全部显示，请点此查看更多更全内容