网页设计与制作课程设计论文运动与健康1.docx
《网页设计与制作课程设计论文运动与健康1.docx》由会员分享，可在线阅读，更多相关《网页设计与制作课程设计论文运动与健康1.docx（25页珍藏版）》请在冰点文库上搜索。
网页设计与制作课程设计论文运动与健康1
辽宁工业大学
网页设计与制作课程设计（论文）
题目：
运动与健康
院（系）：
管理学院
专业班级：
学号：
学生姓名：
指导教师：
教师职称：
起止时间：
2012.7.2-2012.7.6
课程设计（论文）任务及评语
院（系）：
管理学院教研室：
电子商务
学号
学生姓名
专业班级
电子商务091
课程设计（论文）题目
运动与健康
课程设计（论文）任务
1．网页总数不少于30页,界面友好
2．具有明显自己设计的特征.
3．在DREAMWEAVER设计部分,链接灵活方便,完全能够实现.,表单,表格,含有自己设计筛理过的图像,框架,建立自己的站点,文件管理规范
4．在FIREWORKS设计部分,必须有自己设计的图像,进行效果处理,动画设计.
5．在FLASH设计部分,自己设计动画,动作动画与形状动画至少各一个,独立完成的,元件,二个以上场景,含有声音,FLASH文本设计,具有行为效果）.将FLASH要放在自己设计的网页中.
6．网站主题明确,不得抄袭.
7．具有实用性.
8．根据自己设计的内容写出个人总结,不少于1000字
指导教师评语及成绩
页面设计符合要求、布局合理、有创意、有特点且结合实时新闻。
链接运行正常、合理，具有从主页到子页，从子页到主页的完整链接功能。
Flash制作精美，功能正常，符合网页内容。
页面文字图片搭配协调，简洁大方，便于浏览。
Firework设计部分，图像运行正常，效果实施完整。
主题符合实际，且相互有关联，整体网页运行正常，功能完善，贴近学生生活，具有实用性。
但网页设计较为简单，firework和flash的运用也只是基础功能的实现，希望多加练习，学习和了解更多网页设计相关的知识。
成绩：
指导教师签字：
2012年07月06日
目录
第1章课程设计目的与要求1
1.1课程设计目的1
1.2课程设计的实验环境1
1.3课程设计的预备知识1
1.4课程设计要求1
第2章课程设计内容2
2.1课程设计的目标2
2.2网站开发需求分析2
2.3开发工具的选用及介绍3
2.4网页设计的要素5
2.5制作网页的步骤6
2.6网页的设计技巧7
2.7网页的主要模块7
2.8网页具体制作详细17
第3章课程设计的问题与解决20
3.1课程设计的问题20
3.2问题的解决思路20
3.2个人总结20
参考文献22
第1章课程设计目的与要求
1.1课程设计目的
本课程的课程设计实际是电子商务专业学生学习完《网页设计与制作》课程后，进行的一次全面的综合训练，其目的在于加深对基本知识的理解，掌握运用各种书本学习过软件的基本方法。
1.2课程设计的实验环境
硬件要求能运行Windows9.X操作系统的微机系统。
数据库应用系统开发软件可以选用：
FoxProforWindows；VisualFoxPro；MicrosoftAccess，或其他数据库管理系统;以及其它学习或自己使用过的相关软件.
1.3课程设计的预备知识
熟悉数据库的基本知识及一种以上数据库系统开发软件。
及有关网页设计的工具软件.
1.4课程设计要求
按课程设计指导书提供的课题（参考），应根据下一节给出的基本需求独立完成各个方面的设计，可以组成设计小组，分模块进行,共同协作完成一个应用系统的开发任务。
要求书写详细的设计说明书，对复杂的代码段和程序段，应画出程序流程图。
在界面设计中，画出每个窗口的布局，有多个窗口时，按模块调用的方式画出窗口调用图，用手工画好报表和标签样式，严禁相互抄袭。
第2章课程设计内容
2.1课程设计的目标
21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，而作为新世纪的计算机系大学生更应该具备一定的网络知识，来充实和武装自己。
网站的建设首先能丰富学生自己的文化知识，在建设网站的过程中能学到实际的网络知识。
这样不仅对自己原有的知识是个实践性的提高，而且还积累了实际的设计经验。
而对于即将毕业的学生，网站能对他有什么样的帮助呢？
这是一个很好的网络身份证，因为网站的作用是让别人了解自己认识自己，以达到让别人对自己更好的了解。
有这么一个自己设计和制作的网站在这里完全可以证明你拥有一定水平的计算机能力，也加大了你被录取的可能性。
而且对于那些计算机水平很高的人来说，建设一个个人网站首先证明了自己的水平。
这样比简单空白的文本式简历要更有说服力的多。
在网页制作中，运用了Photoshop和fireworks强大的图像制作和处理能力。
以自己在网上收集的素材作为图片素材。
进行了大量的图片制作，从而给人以强烈的美感。
整个网站的架构是由Dreamwaver软件完成的。
整个网站运用了CSS的方法定位、设计。
用这个方法可以减少内存，更易浏览。
HTML编辑器，虽然HTML代码复杂，编辑和调试要花费大量的时间，但因HTML的稳定性、广泛支持性及可创建复杂的页面效果，仍受高级网页制作人员的青睐。
就目前来说，有众多的编辑器供选择，这些编辑器广泛支持复杂页面创建及高级HTML规范。
2.2网站开发需求分析
一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。
面对对网站开发拥有不同知识层面的客户，项目的负责人对用户需求的理解程度，在很大程度上决定了此类网站开发项目的成败。
因此如何更好地的了解、分析、明确用户需求，并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员，保证开发过程按照满足用户需求为目的正确项目开发方向进行，是每个网站开发项目管理者需要面对的问题。
运动和健康越来越受大大家的重视，一个集体育资讯和健康知识于一体的网站，一定回受到大家的关注。
2.3开发工具的选用及介绍
2.3.1Dreamweaver简介
Dreamweaver是没过Adpbe（原Macromedia，2005年呗Adobe收购）公司开发的及网页制作和管理网站于一身的所见即所得网页编辑器，它是一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
它不仅是优秀的WYSIWYG编辑器，更是优秀的代码编辑器，有代码加亮，代码提示等丰富功能，提供各种示例代码，并支持Javascript、PHP、ASP、JSP等多种脚本语言。
此外，DreamweaverMX2004提供基于强大的规范管理来确保高质量的设计，设计环境提供CSS迅速高效的开发代码简洁、专业规范的站点。
如果用户熟悉手工编写标记代码，Dreamweaver包括许多与编码相关的工具和功能，其使用将更加灵活。
并且，借助Dreamweaver还可以使用服务器语言生成支持动态数据库的Web应用程序。
MacromediaDreamweaverMX是创建专业网站的最佳途径,同时也是构建强大Internet应用程序的最简便的途径。
开发人员第一次能在一个环境内快速创建和管理网站及Internet应用程序。
DreamweaverMX是一个完整、集成的解决方案,可为您提供可视化的布局工具、快速的web应用程序开发以及广泛的代码编辑支持了全面、系统地提升网络设计、开发者的MacromediaDreamweaverMX及其它软件应用水平。
2.3.2Flash简介
Flash是由macromedia公司推出的交互式矢量图和Web动画的标准，由Adobe公司收购。
网页设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。
Flash也是存储芯片的一种，通过特定的程序可以修改里面的数据。
Flash的前身是FutureWave公司的FutureSplash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。
1996年11月，美国Macromedia公司收购了FutureWave，并将其改名为Flash。
在出到Flash8以后，Macromedia又被Adobe公司收购。
Flash通常也指MacromediaFlashPlayer（现AdobeFlashPlayer）。
Flash，是一种动画创作与应用程序开发于一身的创作软件，目前最新的零售版本为AdobeFlashProfessionalCS6（2012年发布）。
AdobeFlashProfessionalCS6为创建数字动画、交互式Web站点、桌面应用程序以及手机应用程序开发提供了功能全面的创作和编辑环境。
Flash广泛用于创建吸引人的应用程序，它们包含丰富的视频、声音、图形和动画。
可以在Flash中创建原始内容或者从其它Adobe应用程序（如Photoshop或Illustrator）导入它们，快速设计简单的动画，以及使用AdobeAcitonScript3.0开发高级的交互式项目。
设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。
Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。
通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。
您也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。
2.3.3HTML语言的简介
HTML一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。
HTML只是标示语言，基本上你只要明白了各种标记的用法便算学懂了html，html的格式非常简单，只是由文字及标记组合而成，于编辑方面，任何文字编辑器都可以，只要能将文件另存成ascii纯文字格式即可，当然以专业的网页编辑软件为佳。
设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。
只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。
它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
神奇吗?
一点都不神奇,因为现在你看到的就是这种语言写的页面。
也许你听说过许多可以编辑网页的软件，事实上，你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器以及HTML的工作常识。
其实你很快就会发现,基础的HTML语言简直容易死了。
HTML只不过是组合成一个文本文件的一系列标签。
它们很像乐队的指挥，告诉乐手们哪里需要停顿，哪里需要激昂。
2.4网页设计的要素
1、网页的整体布局设计
网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。
版式设计通过文字图形的空间组合，表达出和谐与美。
一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。
多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。
尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如一家生产型的企业，它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对产品的了解，促成最后的购买。
2、网页设计中色彩的运用
色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。
根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。
色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。
所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。
另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的VI进行色彩运用。
在色彩的运用过程中，还应注意的一个问题是：
由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。
如：
儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。
在设计中要考虑众多因素。
3、网页形式与内容相统一
要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。
运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。
如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。
点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。
网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。
2.5制作网页的步骤
在做网页之前，我确定了做网页的五个步骤。
1、确定网站主题：
网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。
2、搜集材料：
明确了网站的主题以后，你就要围绕主题开始搜集材料了。
材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
3、规划网站：
一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。
网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。
也只有如此制作出来的网页才能有个性、有特色，具有吸引力。
4、选择合适的制作工具：
尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。
5、制作网页：
材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。
所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。
所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。
在制作网页时要多灵活运用模板，这样可以大大提高制作效率。
2.6网页的设计技巧
一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。
在这里从框架和CSS样式的运用两方面来介绍网页设计的技巧。
2.6.1框架的使用
FRAME（框架）是Web上经常会看到的页面结构。
框架的最常见用途就是导航。
一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。
使用框架具有以下优点：
访问者的浏览器不需要为每个页面重新加载与导航相关的图形；每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），因此访问者可以独立滚动这些框架。
例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。
使用框架具有以下缺点：
可能难以实现不同框架中各元素的精确图形对齐；对导航进行测试可能很耗时间。
许多专业Web设计人员不喜欢使用框架，并且许多浏览Web的人也不喜欢框架。
在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点（例如，每当访问者单击导航按钮时就重新加载导航框架内容的框架集）。
如果框架使用得法（例如，在允许其他框架的内容发生更改的同时，使一个框架中的导航控件保持静态），则这些框架对于某些站点可能非常有用。
2.6.2CSS样式的使用
CSS（层叠样式表）是一种制作网页的新技术,它的全称是级联样式表,即CascadingStyleSheets的缩写，又称之为风格样式表单。
CSS是在网页制作过程中普遍用到的技术。
采用了CSS技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。
2.7网页的主要模块
网页主要模块展示图
1、网站首页
左侧展示运动健康小知识，中间展示全民健身视频，上方为网页主要链接，分别有篮球资讯、羽毛球资讯、足球资讯、图片。
2、篮球
1）篮球首页——我爱NBA
链接：
最新资讯、最爱的球队、最爱的球星、联盟MVP、总冠军球队、发展与起源
利用firework制作滚动的图片横幅，展示NBA球队
利用flash制作视频，NBA球队简介
2）篮球
篮球最新资讯页面。
每条信息都可点击阅读，打开新的页面。
最下方是利用firework制作的滚动图片
3）最爱的球队页面
每个球队名称都可点击并打开新页面，打开后的网页展示球队相关信息。
4）最爱的球星页面
5）篮球的起源页面
左侧的篮球的起源、篮球的发展、篮球的规则均为链接，点击展示新内容。
3、足球
1）足球首页
2）球队资讯页面
左侧分栏，建立链接展示球队资讯、球员资讯、起源于发展
点击球队或球员的图标后，可打开相关资讯页面
3）球员资讯页面
4）起源于发展页面
4、羽毛球
1）羽毛球首页
建立链接：
羽毛球发展与起源、图片集锦、最新资讯等
利用flash制作视频，介绍羽毛球的起源和发展以及现在羽毛球运动的发展
2）羽毛球发展与起源页面
左侧羽毛球的起源、羽毛球的发展、羽毛球的规则均为链接，点击可打开新内容。
3）羽毛球图片集锦页面
展示大赛图片，最新赛况。
4）羽毛球最新资讯页面
展示最新羽毛球赛况，最新比赛资讯。
2.8网页具体制作详细
2.8.1字幕的设计
做网页是可以做一条滚动字幕，这样可以使网页加入丰富的动态效果，设计出生动活泼的网页。
首先进入"设计"视图，将插入点放到要添加的新Ｗｅｂ组件的位置。
然后单击"插入／Ｗｅｂ组件"，然后再单击字幕。
2.8.2图片的插入
当把一个与主题相关的图片作为网页的背景，可能会更加吸引人们的眼球。
因为我做的是关于"我爱NBA"的网页，所以我所选的背景是一幅NBA球星集合的画面。
我把图片保存在我的磁盘上，在"设计"模式下，用鼠标右击该网页，选择快捷菜单上的"网页属性"，在"网页属性"的对话框中，单击"格式"选项卡，选择"背景图片"复选框，然后单击"浏览"，确定背景图片的文件，单击"打开"。
就这样可以增添背景了
为了使网页达到图文并茂的效果，需要在网页中插入一些NBA的图片。
在制作之前我先在“NBA网站”里找了大量的有关的图片,保存在我的可移动磁盘里。
只有扩展名为GIF和JPEG的图形文件才能成为我们的页面的一部分。
因为这两种图形格式不仅应用广泛，而且有利于节省存贮空间。
下面我就可以把图片插入到网页中因首先把光标定位在需要插入图片的位置，然后选择"插入/图片"命令，单击"常用"工具栏中的"插入文件中的图片"按纽。
在默认情况下，插入图片，就这样就完成了图片的添加了。
但图片需要保存在磁盘了，否则下次打开时图片可能打不开。
2.8.3字体的设制字体设置：
选上文字，打开格式工具栏的"字体"下拉列表框，在里面选择相应的字体就可以了。
字的颜色：
单击"格式"工具栏"字体颜色"按钮旁的向下箭头，选择适当的颜色，字的颜色就改变了。
还可以对字体进行一些其他设置。
选择"格式"菜单的"字体"命令，在这里我们还可以作进一步的设置。
这里除了"格式"工具栏可以做的设置以外，还可以设置许多效果。
"字符间距"选项卡：
它是用来设置文字的间距的。
单击"间距"下拉列表，可以选择字符的间距是普通、扩充还是紧缩的。
选择扩充，这时预览框的文字间距就变大了。
也可以调整间距大小来改变间距，输入10，文字的间距就更大了。
为了使网页的字体美观，我还设置了一些艺术字，首先选择艺术字的种类，然后确定要写的艺术字。
就这样艺术字的设计就完成了
2.8.4超链接
选择"插入"菜单的"超链接"的命令，在文件列表框选择"页面1.htm"文件，在URL文本框中显示了该文件的地址。
单击"确定"按钮。
超链接就制作成功了。
我切换到预览模式（单击预览按钮），但我把鼠标指向"主页"时鼠标变成手形，单击它，就可以切换到主页了。
如果是链接的网页需要对网页进行保存，这样才在以后的打开网页时信息不会丢失。
FrontPage做了一个主页，里面有一些图片，在本地一切正常，但上传后背景、图片就显示却显示不出来，经查阅书发现图片都需要保存，我又只好把所有的图片都保存了一遍。
只有这样一个完整的网页才做好了。
设计的页面，应该检查它在浏览器中是否显示正常。
方法是，一般只要切换到预览模式就可以了。
单击"预览"选项卡，在这个预览模式下的显示和在浏览器中的显示是一样的。
第3章课程设计的问题与解决
3.1课程设计的问题
1、网站制作非常的复杂，需要了解W3C的HTML4.0规范、CSS层叠样式表的基本知识、Javascript、VBScript的基本知识。
对于常用的一些脚本程序如ASP、CGI、PHP也要有适当了解，还要熟练使用图形处理工具和动画制作工具以及矢量绘图工具，并能部分了解多种图形图像动画工具的基本用法，所以单单靠我们平时学习的还远远不够。
还需要借鉴课外教材。
2、确定网站色彩，网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。
而且，浏览者在浏览网页时，留下的第一印象就是页面的色彩设计，它的好坏直接影响阅读者的观赏兴趣。
因此，色彩设计在网页设计中居于十分重要的地位。
3、版面布局，好的布局可以让浏览者非常容易地找到他想看的东西。
网站建设初学者，最容易犯的错误就是：
确定题材后立刻开始制作，没有进行合理规划。
从而导致网站结构不清晰，板块编排混乱等。
结果不但浏览者看得糊里糊涂，制作者自己在扩充和维护网站也相当困难。
所以，我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。
3.2问题的解决思路
1、在制作网站之前，到图书馆借阅关于网站制作、网页制作的相关书籍。
上网下载相关视频，浏览相关网页，去了解更多关于这方面的知识。
做到防范与未然，与小组人共同努力，团结互助，在遇到解决不了的问题时，多与指导老师请教。
2、一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。
适合于网页标准色的颜色有：
蓝色，黄/橙色，黑/灰/白色三大系列色。
3.网站的题
升级会员 