《网页设计与制作课程设计——那些年我们一起看过的世界杯.doc》由会员分享，可在线阅读，更多相关《网页设计与制作课程设计——那些年我们一起看过的世界杯.doc（13页珍藏版）》请在三一办公上搜索。
1、河南城建学院网页设计课程设计报告学号 083411151 专业 信息管理和信息系统 姓名 赵文普 题目 那些年我们一起看过的世界杯指导教师 张妍琰 景伟娜 张玉花 设计时间 2013-6-242013-6-28 目 录第1章 课程设计目的和要求11.1 课程设计目的11.2 课程设计的实验环境11.3 课程设计的预备知识11.4 课程设计要求1第2章 课程设计内容22.1 网站开发需求分析22.2 开发工具的选用及介绍22.3 网页设计的要素32.4 制作网页的步骤32.5 网页的设计技巧42.6网站逻辑图52.7网页的主要模块及分析5第3章 课程设计的问题和解决113.1 课程设计的问题11
2、3.2 问题的解决思路113.3个人总结11参考文献13第1章 课程设计目的和要求1.1 课程设计目的本课程的课程设计实际是学习完网页设计和制作课程后，进行的一次全面的综合训练，其目的在于加深对基本知识的理解。1.2 课程设计的实验环境硬件要求能运行Windows 7操作系统的微机系统。1.3 课程设计的预备知识熟悉有关网页设计的工具软件.1.4 课程设计要求按课程设计指导书提供的课题(参考)，应根据下一节给出的基本需求独立完成各个方面的设计，可以组成设计小组，分模块进行,共同协作完成一个使用系统的开发任务。第2章 课程设计内容2.1 网站开发需求分析一个网站项目的确立是建立在各种各样的需求上
3、面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。面对网站开发拥有不同知识层面的客户，项目的负责人对用户需求的理解程度，在很大程度上决定了此类网站开发项目的成败。因此如何更好地的了解、分析、明确用户需求，并且能够准确、清晰以文档的形式表达给参和项目开发的每个成员，保证开发过程按照满足用户需求为目的正确项目开发方向进行，是每个网站开发项目管理者需要面对的问题。随着人们生活水平的不断提高，人们在工作的同时学会了享受。越来越多的人喜欢看世界杯，因此设计关于世界杯的网站势在必行。2.2 开发工具的选用及介绍2.2.1 Drea
4、mweaver简介Dreamweaver 是美国Adpbe公司开发的及网页制作和管理网站于一身的所见即所得网页编辑器，它是一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它不仅是优秀的WYSIWYG编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提供各种示例代码，并支持Javascript、PHP、ASP、JSP等多种脚本语言。2.3 网页设计的要素 1、网页的整体布局设计 网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。版式设计通过
5、文字图形的空间组合，表达出和谐和美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。2、网页设计中色彩的运用 色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。3、网页形式和内容相统一要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。运用对比和调和、对称和平衡、节奏和韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称
6、原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。2.4 制作网页的步骤在做网页之前，我确定了做网页的五个步骤。1、确定网站主题 ：网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。2、搜集材料 ：明确了网站的主题以后，你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，作为自己制作网页的素材。3、规划网站 ：一个网站设计得成功和否，很大程度上决定于设计者的规划水平。4、选择合适的制作工具 ：尽管选择什么样的工具并不
7、会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。5、制作网页 ：材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。2.5 网页的设计技巧一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。在这里从框架和CSS样式的运用两方面来介绍网页设计的技巧。 2.5.1框架的使用 FRAME（框架）是Web上经常会看到的页面结构。框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的
8、框架。 使用框架具有以下优点：访问者的浏览器不需要为每个页面重新加载和导航相关的图形；每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架。 2.5.2 CSS样式的使用 CSS(层叠样式表)是一种制作网页的新技术,它的全称是级联样式表,即Cascading StyleSheets的缩写，又称之为风格样式表单。CSS是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。2.6网站逻辑图 首页新闻历届回顾历史百科吉祥物海报图片体育馆视频主题曲巨星列强子
9、页子页子页子页 图1-12.7网页的主要模块及分析1.网站主页面模块 2-2-1 该功能模块为网页的主要模块，在整个设计中起主线作用，以后的各个子模块都是对这个模块中的内容的详细介绍，这个模块主要用表格布局，色彩以绿色调为主，给你人以明了的感觉，并且该模块中还插入了flash动画，还运用了行为和鼠标经过图像，给静态的页面以动感，内容相当丰富。2 巨星展示模块 图2-2-2该功能模块详细的介绍了世界杯的足球明星，采用框架的知识展示每个足球明星，色调和主页面的色调相类似，采用图和文字相结合的排版形式。3 体育馆展示模块 图2-2-3该功能模块详细的介绍了举办世界杯的一些著名的体育馆。由于体育馆比较
10、多，为了使网友能够较快的查找到自己想了解的体育馆采用了锚点的知识。4 世界杯历史百科展示模块 2-2-4该功能模块详细的介绍了世界杯历史百。采用了表格布局的方法，还采用了脚本代码，使静态的网页变得灵动起来。5 历届海报展示模块 图2-2-5 该功能模块详细的介绍了世界杯的历届海报。为了能够对海报进行详细的介绍采用了模板和锚点的知识 图2-2-6 该功能模块详细的介绍了世界杯主题曲。为了使较长的歌词能够显示采用了跑马灯效果。第3章 课程设计的问题和解决3.1 课程设计的问题1、确定网站色彩，网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。而且，浏览者在浏览
11、网页时，留下的第一印象就是页面的色彩设计，它的好坏直接影响阅读者的观赏兴趣。因此，色彩设计在网页设计中居于十分重要的地位。2、版面布局，好的布局可以让浏览者非常容易地找到他想看的东西。网站建设初学者，最容易犯的错误就是：确定题材后立刻开始制作，没有进行合理规划。从而导致网站结构不清晰，板块编排混乱等。结果不但浏览者看得糊里糊涂，制作者自己在扩充和维护网站也相当困难。所以，我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。3.2 问题的解决思路1、在制作网站之前，到图书馆借阅关于网站制作、网页制作的相关书籍。上网下载相关视频，浏览相关网页，去了解更多关于这方面的知识。2、一般来说，一个网站
12、的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。3. 网站的题材确定后，就要将收集到的资料内容作一个合理的编排。多去网上浏览一些优秀的个人网站，学习、借鉴他们的布局和一些好的板块。3.3个人总结收获：通过这次课程设计我明白了做好网页并不是一件容易的事它包括网页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。所以我得出一下总结：一、准备资料和挑选符合目的主题的合适素材。做网页当然要收集、准备资料。在网上多看到什么漂亮的网页把它保存起来作为以后自己设计主页时的参考。另外还包括搜集美化主页可能要用到的各种
13、材料如背景、小动画图标等等。二、规划好整个网站。主页的设计应以醒目优先应该令人一目了然切勿堆砌太多不必要的细节或使画面过于复杂。切记页面给人的第一观感最为重要。 三、善用图片增强艺术效果。网页的迷人之处之一要算它上面能点缀许多漂亮的图片。精美的图片设计可以使自己的网页增辉不少令人过目不忘。图片的内容应有一定的实际作用切忌虚饰浮夸同时还要注意和文字的颜色搭配。 四、善于借鉴他人主页制作中的设计技巧。由于在网上用浏览器浏览任何主页时都能查看到该主页制作时所编写的绝大部分网页编程源代码。不足：对网页网页制作功能的操作不是很熟练，做起东西来不能得心应手，这就在我作网页时带给我最大的不便，希望以后能有多
14、的机会接触网页的设计，做出更好的网页来，我还有许多的不足之处，有待改进和提高。对于世界杯网站的设计并不是很了解，但我还是经过努力做完了，但是，其中包含了自己的全部思想，希望自己以后能够创造出更好的网站。要全面的去了解一些公司的概况和观察别人的网站，来提高自己。Dreamweaver对于我们来说，具有强大的功能，我用到的只是其中的一部分，更多的精彩的东西还要经过努力学习，只有这样才能制作出理想的网页。参考文献1 胡珊.个人网页设计和制作J.电脑学习.2009 年，第 2 期，28-29 页。2 周琦.关于网页设计和制作技术的探讨J. 电脑知识和技术, 2009 年,第 26 期.7376-7378 页。 3 唐永明.浅议网页设计和制作J.科技信息.2009 年, 第 20 期,193 页。4 张明月.网页设计和制作研究J.邯郸职业技术学院学报.2009 年，第 2 期,82-84 页。5 王君学.网页设计和制作J.北京：人民邮电出版社.2009 年.
