期末网页设计说明书
网页设计毕业设计说明书
网页设计毕业设计说明书网页设计毕业设计说明书一、引言在当今数字化时代，互联网已经成为人们生活中不可或缺的一部分。
随着互联网的普及和发展，网页设计作为一门新兴的职业逐渐受到人们的重视。
本毕业设计旨在通过对网页设计的深入研究和实践，探索如何利用设计原理和技术来创造出具有吸引力和用户友好性的网页。
二、背景随着互联网的快速发展，越来越多的企业和个人开始意识到网页设计对于网站的重要性。
一个好的网页设计不仅可以吸引用户的眼球，还能提升用户体验，增加网站的可用性和可访问性。
因此，学习和掌握网页设计技能对于未来从事相关职业的学生来说至关重要。
三、目标本毕业设计的目标是通过学习网页设计的基本原理和技术，设计并开发一个具有创新性和实用性的网页。
通过此项目，将会探索以下几个方面：1. 网页设计的基本原则：包括布局、色彩、字体等方面的设计原则；2. 用户体验设计：通过用户研究和测试，优化网页的用户界面和交互设计；3. 响应式设计：设计一个适应不同设备和屏幕尺寸的网页；4. 网页性能优化：通过优化代码和图像等方式，提高网页的加载速度和性能。
四、方法与步骤1. 网页设计理论学习：通过学习相关的网页设计理论和实践，掌握网页设计的基本原则和技巧；2. 网页设计工具使用：学习并掌握一些流行的网页设计工具，如Adobe Photoshop、Adobe Illustrator等；3. 网页开发技术学习：学习并掌握一些常用的网页开发技术，如HTML、CSS、JavaScript等；4. 网页设计实践：根据学习的理论和技术知识，设计并开发一个具有创新性和实用性的网页；5. 用户测试和反馈：邀请一些用户进行测试，并根据他们的反馈进行网页的优化和改进。
五、预期成果通过本毕业设计，预期将会产生以下几个成果：1. 网页设计说明书：详细记录网页设计的整个过程，包括设计思路、技术选择、界面设计等；2. 网页设计原型：根据设计说明书，制作一个网页设计的原型，展示网页的布局和交互效果；3. 网页设计实现：根据设计原型，使用HTML、CSS等技术实现一个完整的网页；4. 用户测试报告：记录用户测试的结果和反馈，分析用户对网页的使用体验和建议；5. 毕业设计论文：撰写一篇毕业设计论文，总结整个设计过程和成果，探讨网页设计的相关问题和未来发展趋势。
web设计课程设计说明书
web设计课程设计说明书一、课程目标知识目标：1. 学生能掌握Web设计的基本概念，了解网页的结构与布局，掌握HTML、CSS等基本语言的使用。
2. 学生能了解并运用网页设计的视觉元素，如颜色、字体、图像等，提升网页的美观性。
3. 学生能掌握基本的网页动画制作方法，为网页添加动态效果。
技能目标：1. 学生能运用Web设计软件进行网页制作，独立完成一个简单的静态网页设计。
2. 学生能运用HTML、CSS等语言进行网页编码，实现网页的布局与样式设计。
3. 学生能通过实际操作，掌握网页动画的制作技巧，为网页添加动态效果。
情感态度价值观目标：1. 培养学生对Web设计的兴趣，激发他们的创新意识，提高审美素养。
2. 培养学生团队协作意识，学会与他人共同解决问题，提高沟通能力。
3. 培养学生具有良好的信息素养，尊重他人劳动成果，遵循网络道德规范。
课程性质分析：本课程为实践性较强的学科，旨在通过实际操作，让学生掌握Web设计的基本知识和技能，培养具备创新精神和实践能力的网络技术人才。
学生特点分析：本课程面向初中生，学生对新鲜事物充满好奇，动手能力强，但可能缺乏一定的审美素养和团队协作能力。
教学要求：1. 教学内容与实际应用紧密结合，注重培养学生的实践操作能力。
2. 教学过程中，注重启发式教学，引导学生主动探究，提高创新能力。
3. 关注学生个体差异，因材施教，使每位学生都能在课程中取得进步。
二、教学内容1. 网页设计基础知识- 网页的基本概念与结构- HTML基础语法与标签- CSS样式表的基本使用2. 网页布局与样式设计- 常见的网页布局类型- 盒子模型与浮动布局- 响应式设计与媒体查询3. 网页视觉元素设计- 字体、颜色与排版- 图片、图标与背景- 视觉效果的优化与调整4. 网页动画制作- CSS3动画与过渡效果- JavaScript基本语法与事件处理- 常用动画库（如：Animate.css）的应用5. 实践项目- 网页设计软件（如：Dreamweaver、WebStorm）的使用- 独立完成一个静态网页设计与制作- 团队合作完成一个综合性的网页设计项目教学大纲安排与进度：1. 网页设计基础知识（2课时）2. 网页布局与样式设计（3课时）3. 网页视觉元素设计（3课时）4. 网页动画制作（4课时）5. 实践项目（6课时）教材章节关联：1. 《Web前端开发技术》第1章：HTML基础2. 《Web前端开发技术》第2章：CSS样式表3. 《Web前端开发技术》第3章：网页布局与响应式设计4. 《Web前端开发技术》第4章：CSS3动画与过渡效果5. 《Web前端开发技术》第5章：JavaScript基础与应用教学内容确保科学性和系统性，以培养学生的实际操作能力和创新精神为目标，注重理论与实践相结合。
网页设计说明范文
网页设计说明范文
《网页设计说明》
网页设计是指利用各种技术和工具，将内容、布局、颜色等元素有机地融合在一起，呈现给用户一个完美的网页界面。
一个好的网页设计不仅要具有美观的外观，还要具有良好的用户体验和功能性。
首先，网页设计需要考虑用户体验。
网页设计师应该充分了解用户需求，以用户为中心，设计出符合用户习惯的界面。
网页的导航、布局、文字、图片等元素都应该符合用户的使用习惯，让用户能够快速、便捷地找到自己需要的信息。
其次，网页设计还需要考虑页面的功能性。
不同类型的网页需要包含不同的功能，比如电商网站需要有购物车和支付功能，咨询网站需要有文章分类和搜索功能等。
设计师需要根据网页的用途来选择合适的功能，并保证这些功能的稳定性和易用性。
此外，网页设计还需要考虑页面的美观性。
色彩搭配、排版、图片选择等都需要考虑到整体的美感，使网页看起来清晰、舒适，让用户愿意停留并且回访。
同时还需要考虑网页的响应式设计，确保网页在不同设备上能够呈现出良好的效果。
综上所述，一个好的网页设计需要综合考虑用户体验、功能性和美观性，让用户能够快速找到自己需要的信息，并有愉快的浏览体验。
希望设计师们在网页设计过程中能够细心地考虑这些因素，打造出更好的网页界面。
网页设计说明书
网页设计说明书网页设计说明书一、网页结构设计二、网页制作环境及使用技术1、用到的软件：dreameweaver8、美图秀秀2、在字体上面用到了一点css，因为我比较喜欢楷体字，但是版面上没有楷体，所以当时自己加了楷体，还加了仿宋体。
如图：3、多处用到了javascript行为（跑马灯，图片滚动，幻灯片广告）幻灯片切换：首页中的自我介绍、我的学校、专业介绍中都用到了幻灯片切换跑马灯：首页的友情链接、所学课程页面用到了跑马灯图片滚动：首页最下面有南邮的校园风景图片滚动、学校介绍页面和社会实践页面都用到了图片滚动以上三幅图是切换中的幻灯片如上图是跑马灯上图是图片滚动这个是我自己做得图片滚动，是每个图片都在自己的框格内滚动上图也是在自己框格内滚动的图片，图片是用美图秀秀拼的图4、用到了几个装饰作用的javascript行为：跟随鼠标的字符、鼠标响应文字变色、字符围绕鼠标、旋转变换文字等特效“Welcome“和“欢迎您的光临”用的是字符跟随鼠标特效以上文字用的是鼠标响应文字变色特效“欢迎你的光临”用的是旋转变换文字特效5、表单方面我用的不是与我联系页面，而是用户注册页面，先插入表单，再插入表格6、网页配色上面，我并没有用单纯的页面背景，而是用的自己搜集来的图片作为背景的7、首页中的用户登录界面是把老师给的模板中的代码拿过来直接用的8、背景音乐：开始是每一个页面都添加了背景音乐（在head中加bgsoundscr….），后来发现我用的是框架，只要一个背景因为一直循环就够了，就把其他页面中的背景音乐代码都删了。
我的背景音乐用的是winter in my heart 插入的代码如下图：9、用了顶部和嵌套的左侧框架，如图所示：10、要注意的是，特效和视频的播放要用到一个playswf的小插件，我一开始不知道，所以效果一直显示不出来。
如图是playswf小插件三、个人体会听老师讲课的时候觉得应该不太难，表格做起来没问题，javascript效果应该就是把代码复制粘贴过去就可以了。
网页设计说明书
设计说明书需求分析目标定位a、制作这个网站的目的是为了方便我们学院的新生与老生能快速浏览的我们学校的基本情况,了解我们学校所有好玩,有趣的事情。
b、本网站的主要职能是实时为新生提供部分新的资讯。
c、本网站所面向的用户是所有进入我校的同学以及想要了解我们学校的用户。
用户分析a、使用本网站的用户主要是想要了解我们学校的所有信息,并且能够为他们提供所需的生活所需的信息。
b、他们最想本网站为他们提供校内外的所有资讯，包括饮食，住宿，景点旅游等.c、本网站制作内容架构清晰，避免过多的文字介绍造成用户过多阅读的麻烦.d、用户可以每天浏览我们为其提供的实时热点以及校内外最新的资讯，比如：校园通知、饭堂价格等。
市场前景a、本网站的市场需求在于为本校师生以及想要了解我校的用户提供最便捷，最新的信息.b、基于前面的分析，决定了本网站的设计风格要简明、清晰；主题围绕着学生所需而开展. 网站规划内容策划a、本往网站主要经营的内容是：校园文化、校园资讯、美食住宿、周边景点等主题。
b、基于以上主题，其中重点制作的是校园文化和美食住宿；而辅助的是校园资讯等主题. 对于网页如此划分的目的是，使用本网站的用户都是想要了解我们学校于他们息息相关的事情，无论是新生、老生还是其他用户，都想知道我们学校有哪些特色的文化和美食。
文化可以增进他们知道我们学校的最近的文化活动生活。
而美食，则能吸引更多的学生来了解我们学校的吃货，这对于新进校园的新生有着极强引导作用。
界面设计a、对于每个版块的设计都有着其不同的元素，首页,主要突出网页围绕的主题设计导航，并且使用简单明了的文字对学院做出说明；而二级页面，则分为六个版块，每个版块都有着不同的设计元素来突出其主题；对于三级页面，由于其划分表达内容上得较为详细，所以社体元素较为单调以图文介绍为主。
b、全版设计所使用的元素极为简单，主要以框架、线条、设计，在此基础之上配合色彩、阴影、重叠、浮动、定位等的元素来协调画面风格。
网页设计说明书
目录第一章：网页设计规划 (1)一、整体规划 (1)1.网页设计目的 (1)2.网页定位： (1)3.网页模块的设置 (1)第二章：网页设计与制作 (1)一、主页设计 (1)1.模块设计 (1)2.风格与色彩 (2)二、子页设计 (2)1.基本信息模块 (2)2.学习成绩模块 (2)3.获奖情况模块 (2)4.实践经历模块 (2)总结 (3)第一章：网页设计规划一、整体规划1.网页设计目的我们读书就是为了获得知识，学习了网页设计就是为了把它运用到实际中。
此次网页设计的目的有三个。
第一，完成我们的考试，对我们平时学到的知识进行考核。
第二，把学到的知识运用到实践中。
正值大四，求职是我们必须面对的事情，一份完美的简历是找到一份满意工作的敲门砖。
把自己的简历做成个人网页是一个独特新颖的方式，能让大家直观快速地了解我。
第三，在此次的网页设计中，能把之前学到的知识前后联系起来，系统地得到复习，加强对知识的掌握程度。
2.网页定位：1)让大家更快更全面地了解我。
2)把自己以最新颖的方式推荐给大家。
3)网页设计风格要符合简历本质的要求。
3.网页模块的设置此次网页设计共分成五个模块。
第一个是网页主页，其次是四个子网页，分别是我的基本信息、学习成绩、获奖情况、实践经历四个模块。
主页中包含有四个子网页的链接。
在基本信息页面中，可以了解到我的个人信息、优势、技能和在校任职情况等。
在学习成绩模块可以了解到大学期间每个学期我的综测排名情况，还可以链接到我的详细成绩单。
获奖信息页面中可以了解到大学期间不同时间段我获得的奖励，并附上了主要的几张奖状。
在实践经历页面中可以了解到大学期间我的一些实践情况以及每次实践经历后提高的能力。
第二章：网页设计与制作一、主页设计1.模块设计此页面上包含四个链接图标，分别为基本信息、获奖情况、学习成绩和实践经历。
在photoshop中制作好四个链接图片，设定图片大小。
通过使用<a>标签在HTML中创造链接，使用herf属性创建指向另一个文档的链接。
网页设计说明书
网页设计说明书一、网页主题花卉展示二、主页的布局三、用到的软件及技术Macromedia Dreamweaver 8.0美图秀秀Javascript技术四、Javascript图片特效的代码段1、<script language =javascript >var curIndex=0;//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在image文件夹下。
var timeInterval=3000;var arr1=new Array();arr1[0]="image/show.png";arr1[1]="image/a.png";arr1[2]="image/e.png";setInterval(changeImg,timeInterval);function changeImg(){var d=document.getElementById("d");if (curIndex==arr1.length-1){curIndex=0;}else{curIndex+=1;}d.src=arr1[curIndex];}</script><img id=d src ="image/show.png" width="943" height="300">2、<script language="JavaScript"><!--var slidespeed=3000var slideimages=new Array("image/1.png","image/2.png","image/3.png","image/4.pn g")var slidelinks=new Array("index.html","index.html","index.html","index.html") var imageholder=new Array()var z=window.createPopupfor (i=0;i<slideimages.length;i++){imageholder[i]=new Image()imageholder[i].src=slideimages[i]}function gotoshow(){window.location=slidelinks[whichlink]}//--></script><a href="javascript:gotoshow()"><img src="image/1.png" name="slide" border=0 width="126" height="126"style="filter:progid:DXImageTransform.Microsoft.Pixel ate(MaxSquare=15,Duration=1)" /></a><script language="JavaScript"><!--var whichlink=0var whichimage=0var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0 function slideit(){if (!document.images) returnif (z) document.images.slide.filters[0].apply()document.images.slide.src=imageholder[whichimage].srcif (z) document.images.slide.filters[0].play()whichlink=whichimagewhichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0setTimeout("slideit()",slidespeed+pixeldelay)}slideit()//--></script>五、网页的另外两个页面文件inner.htmlbeautiful flower.htm1.html六、总结虽然我做的网页在技术方面有些单薄，在内容方面也不够完善，配色可能也不够协调，但是我用心完成了每一部分，在整个网页制作过程中我也学到了很多，希望老师和同学们能喜欢我的小作品，并给我的小作品提出改进意见，O(∩_∩)O谢谢！。
网页设计课程设计报告说明书
- -网页设计课程设计说明书学生姓名专业班级学号成绩摘要这是摘要，不少于400字，摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字摘要文字关键词：网页设计，Dreamweaver目录1、系统需求分析〔这是一级标题〕11.1系统概述〔这是二级标题〕1这是三级标题1这是三级标题〔二〕11.2系统运行环境11.3功能需求描述12、系统总体设计22.1开发与设计的总体思想22.2系统功能构造图33、系统详细设计53.1主页〔页面一〕5对页面的描述说明。
例如用到什么技术如何制作5局部功能模块及代5页面的html 标签63.2页面二6对页面的描述说明。
例如用到什么技术如何制作6局部功能模块及代6页面的html 标签63.3页面三73.4页面四7总结71、系统需求分析〔这是一级标题〕1.1 系统概述〔这是二级标题〕〔正文局部小4号宋体，1.5倍〕收集整理有关当前市场信息，了解市场上供给商的信息，如规模、实力、市场分额、产品品种、价格〔进价和销售价〕、付款条件、供货能力等等，从中筛选出候选的供给商以便进一步联系。
网页设计说明书
这次作业的目的在于进一步熟悉和掌握网站建设的基本流程和技术规范，巩固运用Dreamweaver网页制作软件制作网页、特别是制作动态网页的知识，巩固运用PhotoShop图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的知识，巩固综合运用Dreamweaver、PhotoShop、flash三个软件完成网站建设任务的方法，能独立设计一个内容完整、图文并茂、技术运用得当的网站，具备独立撰写实训报告等科技文件的基本能力，在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力和团队意识为今后从事网站开发、维护和管理奠定基础。
网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求,在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的转化,是对理论与实践教学效果的检验,也是对学生综合分析能力与独立工作能力的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用。
问题:超链接运用的问题超链接运用的问题超链接运用的问题超链接运用的问题现象：对文本或图片设置链接后，在预览效果中依然不能有效进行链接。
解决方法：超链接样式表只有应用于超链接标签<a>内才会对超链接的文本起作用。
如果样式表应用在其它的位置，如<td>、<span>等，将不会对超链接文本起到任何作用。
模板运用的问题模板运用的问题模板运用的问题模板运用的问题现象：网页不能在IE浏览器中预览以及在模板文件下新建的页面不能进行更改。
解决方法：在运用模板时应注意不能直接在模板文件中进行编辑；打开模板文件，在模板中边框编辑的问题边框编辑的问题边框编辑的问题边框编辑的问题现象：给边框在属性中设置最小值还是不能满足需要解决方法：在样式面板中，添加自己定义的样式，在自己定义的过程中可将边框的值定义得更小，以达到自己的目的1. 通过综合实训进一步巩固，深化和拓展学生的理论知识与专业技能。
网页毕业设计说明范文
网页毕业设计说明范文英文回答：WEB DESIGN THESIS PROPOSAL.Project Title: Developing an Interactive Educational Website for Elementary School Students in STEM Subjects.Abstract:This project aims to develop an interactive educational website that will provide engaging and interactive learning experiences for elementary school students in STEM subjects. The website will be designed to align with curriculum standards and provide students with opportunities toexplore STEM concepts through hands-on activities, simulations, and games. The website will also incorporate features such as progress tracking, individualized learning paths, and parental involvement to support student learning and engagement.Objectives:To create an interactive educational website that is accessible, engaging, and relevant for elementary school students in STEM subjects.To develop engaging and interactive learning experiences that align with curriculum standards and foster a deep understanding of STEM concepts.To incorporate features that support student learning and engagement, such as progress tracking, individualized learning paths, and parental involvement.To evaluate the effectiveness of the website in promoting student learning and engagement in STEM subjects.Methodology:The website will be developed using a user-centered design process that involves gathering user requirements,creating prototypes, and conducting user testing. The website will be designed using HTML, CSS, JavaScript, and other relevant technologies. The content for the website will be developed by a team of educators and subject matter experts. The website will be evaluated using both quantitative and qualitative methods, including student surveys, teacher feedback, and observations of student engagement.Expected Outcomes:The expected outcomes of this project include:An interactive educational website that is accessible, engaging, and relevant for elementary school students in STEM subjects.Improved student learning and engagement in STEM subjects.Increased parental involvement in student learning.A better understanding of the use of technology to support STEM education.Impact:This project has the potential to make a significant impact on the way elementary school students learn STEM subjects. The website will provide students with access to engaging and interactive learning experiences that can help them develop a deep understanding of STEM concepts. The website will also provide teachers with a valuable resource that can be used to supplement their lessons and support student learning.中文回答：网页毕业设计说明范文。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《网页设计与制作》课程卷二实践考核方案《网页设计与制作》课程设计说明书姓名：程超学号： 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.扩大山东鲁能泰山球迷协会的规模。
2.提高球迷对山东鲁能泰山的认识。
3.吸引更多的国内球迷驻入鲁能，不仅仅局限于山东球迷。
1.1.2网站板块的设置:网站的版块设置：网站设计板块主要有八块：网站首页、球员英姿、球队组成、鲁能赛程、鲁能队史、鲁能球场、球迷协会、加入协会。
1.2 网站功能设计我们鲁能球迷网的功能主要是将山东鲁能足球俱乐部的文化展现出来，通过本网站，球迷们可以了解到更多的关于球队的信息，本网站同样也是为了宣传山东鲁能俱乐部球迷协会，目的是扩大球迷协会的规模。
1.2.1 首页功能：1.通过导航栏，浏览者可以了解本网站大致的内容。
2.首页以橙色为主基调，配合着山东鲁能的队标，图片等，将鲁能的霸气展示的淋漓尽致！3.首页的文本内容主要介绍山东鲁能泰山俱乐部概况和本赛季的现状。
4.首页的友情链接部分，可以链接到山东鲁能官网，贴吧，论坛等。
1.2.2 子网页功能1.通过子网页将网站内容更加条理化、更加详细、更加方便的展现给浏览者。
2.子网页中将每个板块的内容具体化、深入化、详细化。
让感兴趣的浏览者详细了解鲁能泰山足球俱乐部的文化。
3.子网页在展现具体内容的同时，能让浏览者更加深入了解鲁能泰山足球俱乐部的文化的一切相关内容。
4.可以方便浏览者及时快捷的与我们鲁能泰山球迷协会取得联系，可以通过与协会会长联系申请加入鲁能泰山球迷协会。
第2章鲁能球迷网的设计与制作2.1 首页设计首页设计主要采用表格布局，分为六个板块，每个版块都排列整齐，十分清晰条理，每个板块都有颜色区分，方便浏览者的阅读，如图 2.1。
图2.12.1.1 栏目设计：鲁能球迷网栏目主要包括八大部分，就是网站首页、球员英姿、球队组成、鲁能赛程、鲁能队史、鲁能球场、球迷协会、加入协会。
还有其他一些小栏目，诸如友情链接等。
2.1.2 logo及banner设计Logo如图2.1.2-1所示：图2.1.2-1Banner设计如图2.1.2-2所示：图2.1.2-2网站Logo是鲁能泰山的队徽，以鲁能传统的橙色为主题，logo完全能体现出鲁能泰山的橙色文化，并且Logo上有四颗星星，表示鲁能泰山四次问鼎国内最高水平联赛。
Banner主要是以橙色，黑色，黄色三种颜色组成，像燃烧的烈火，彰显鲁能泰山足球队的霸气，在Banner上添加字体，并做超链接，实现了网站的导航功能。
2.1.3 导航设计：导航设计上采用橙色火焰条状banner为背景，其中字体都为黑色，犹如熊熊烈火中一道黑色的闪电一般，符合鲁能俱乐部的王者之气,如图2.1.3。
图2.1.32.1.4 友情链接在此栏目中，为友情链接网址，通过链接可以直接与山东鲁能相关的其他网址，如山东鲁能俱乐部官方网站、山东鲁能球迷论坛、山东鲁能百度贴吧、巴塞罗那官方网站、11软件班级博客等,如图2.1.4。
图2.1.42.2 子网页设计子页的上半部分采用与主页相同的布局，下半部分则内容通过文字，图片，动画等多媒体技术将山东鲁能的各项信息清楚的介绍给浏览者,如图2.2所示。
图2.22.2.1栏目设计在子网页中，因子网页数量较多栏目设计分为多种，在首页的基础上，建立多个子网页，以便于浏览者的浏览。
在球员英姿中，您可以通过图文信息，看到球员们在场上场下的魅力瞬间。
在球队组成中，您可以看球员介绍，球队历届的教练，球队的明星，球队的全家福等。
在鲁能赛程中，我们将为列出鲁能当前赛季的全部赛程，包括时间，主客场，场次等。
在鲁能历史中，我们为您介绍鲁能泰山球队从建国来到现在这六十多年的发展历程。
在鲁能球场中，您可以通过图品看到鲁能感受主场山东省体育中心的美丽全景风光。
在球迷协会中，您可以感受到鲁能球迷的激情四射，数量之多。
在加入协会中，您可以看到球迷协会的最新动态，还可以为您提供加入协会的联系方式。
2.2.2 导航设计本网站子叶的导航设计上采用与首页相同的设计方式，橙色火焰条状banner为背景，其中字体都为黑色，犹如熊熊烈火中一道黑色的闪电一般，符合鲁能俱乐部的王者之气。
2.2.3 风格与色彩搭配鲁能球迷网，在风格色彩上采用鲁能队服的和鲁能文化的传统之色----橙色，给球迷朋友一种亲切感，拉近了球迷与球员和俱乐部之间的距离。
橙色是山东球迷最喜爱的颜色，这种颜色充分得到广大球迷的认可。
2.2.4 首页与子网页之间的链接在导航栏处可以实现首页与子页的链接。
再鼠标经过导航栏按钮时，会出现下划线，表示此处可以链接到该子页，链接完成后不会出现传统的链接后文字变色现象，文字变色现象会使页面颜色不搭配，从而影响整个网页的美感。
在导航栏中，每一个链接都能与子网页进行链接，同时子页也可以向首页进行跳转，使浏览者可以轻松随意的访问本站中的每一个页面。
2.2.5 子网页与子网页之间的链接在子网页中，同样可以实现各个子页之间的互相跳转，浏览者可以根据自己的喜好在提供的七大子页中自由选择，自由跳转，尽情的享受鲁能足球的魅力文化，尽情的欣赏鲁能在球场上的英姿。
第3章鲁能球迷网设计的重难点分析3.1 网页设计的重点分析（1）网页主页的设计至关重要。
主页的设计关系着整个网站的布局设计与内容介绍，浏览者往往通过主页对网站有一个大致的印象，一定要给浏览者一个好的印象。
（2）网页主页中布局的设计与风格、色彩搭配上至关重要，这体现了网站的文化。
（3）网页子页设计也十分重要，要让浏览者可以快速、清晰的看到自己想看的内容。
(4) 网页中也要注意一些代码的引用，要妥善运用这些代码，实现代码的多次利用，减少垃圾代码的数量，让网站更加高效。
3.2 网页设计的难点分析(1) 网页设计中最难设计的就是主页的版面设计是如何的设计、还有就是色彩搭配是否合理，是否符合网站的文化，是否适合大众的口味，如果设计者只注重自己的感受，那么这个网站一定做大，不会有很多的浏览者。
(2) 网页设计中子页设计要内容全面，其中的内容要与导航栏吻合，内容要独特新颖，只有独特新颖的内容才会吸引更多的浏览者。
(3)网页设计要搭配合理，设计者有较好的审美观，做到美观而不失简洁。
设计总结：网站的设计其实没有想象中的那么难，设计网站花费时间最多是在构思的设计上，如何设计出一个令人满意的布局并不是很容易，一旦构思做好，后面用代码实现布局就很简单了，代码实现只是一个技术手段，只要掌握了就能运用自如，所以我认为网站的设计应该把时间和精力着重用在构思上，而不是随着设计而构思，经过严密的构思之后再设计才会有更好的效果。
参考文献：1.《DreamweaverCS3 基础与实例教程》主编谬亮电子工业出版社2.《Dreamweaver&Flash&Photoshop网页设计基础与实例教程》龙飞电子工业出版社3.《多媒体网页设计从入门到精通》主编邓文渊科学出版社4.《网页设计制作案例教程》主编高志清中国水利水电出版社信息工程学院《网页设计与制作》实践环节考核报告单2011-2012学年度第二学期期末排课编号：（2011-2012-2）-0501410-00492-1批阅日期：2012年6月30日姓名程超班级11软件学号20111130102评分标准及得分评价项目优秀9-10良好8-9中等7-8及格6-7不及格6-0 主题表达合乎逻辑，明确，富有时代气息整个站点风格一致界面美观，页面风格简洁、明快、排版布局合理线条流畅，色彩鲜明文件、文件夹命名规则，没有无效链接、错误链接和非法链接网站结构清晰、导航明确，内容易于检索图片经过处理，无网上下载痕迹DIV布局合理Css样式运用灵活颜色搭配合理，布局精确浏览器兼容性好课程设计报告书写规范、文字通顺、图表清晰、数据完整合计考核成绩任课教师签名审核人签名。