网页设计与制作课程设计论文――运动与健康1.

1、.辽宁工业大学网页设计与制作课程设计(论文题目:运动与健康院(系:管理学院专业班级:学号:学生姓名:指导教师:教师职称:起止时间: 2012.7.2-2012.7.6课程设计(论文任务及评语院(系:管理学院教研室:电子商务学号学生姓名专业班级电子商务091课程设计(论文题目运动与健康课程设计(论文任务1.网页总数不少于30页,界面友好2.具有明显自己设计的特征.3.在DREAMWEAVER设计部分,链接灵活方便,完全能够实现.,表单,表格,含有自己设计筛理过的图像,框架, 建立自己的站点,文件管理规范4.在FIREWORKS设计部分,必须有自己设计的图像,进行效果处理,动画设计.5.在FLAS

2、H设计部分,自己设计动画,动作动画与形状动画至少各一个,独立完成的,元件,二个以上场景,含有声音,FLASH文本设计,具有行为效果.将FLASH 要放在自己设计的网页中.6.网站主题明确,不得抄袭.7.具有实用性.8.根据自己设计的内容写出个人总结,不少于1000字指导教师评语及成绩页面设计符合要求、布局合理、有创意、有特点且结合实时新闻。链接运行正常、合理,具有从主页到子页,从子页到主页的完整链接功能。Flash制作精美,功能正常,符合网页内容。页面文字图片搭配协调,简洁大方,便于浏览。Firework设计部分,图像运行正常,效果实施完整。主题符合实际,且相互有关联,整体网页运行正常,功能完

3、善,贴近学生生活,具有实用性。但网页设计较为简单,firework和flash的运用也只是基础功能的实现,希望多加练习,学习和了解更多网页设计相关的知识。成绩:指导教师签字:2012年 07 月 06日目录第1章课程设计目的与要求 (11.1 课程设计目的 (11.2 课程设计的实验环境 (11.3 课程设计的预备知识 (11.4 课程设计要求 (1第2章课程设计内容 (22.1 课程设计的目标 (22.2 网站开发需求分析 (22.3 开发工具的选用及介绍 (32.4 网页设计的要素 (52.5 制作网页的步骤 (62.6 网页的设计技巧 (72.7 网页的主要模块 (72.8 网页具体制作

4、详细 (17第3章课程设计的问题与解决 (203.1 课程设计的问题 (203.2 问题的解决思路 (203.2 个人总结 (20参考文献 (22第1章课程设计目的与要求1.1 课程设计目的本课程的课程设计实际是电子商务专业学生学习完网页设计与制作课程后,进行的一次全面的综合训练,其目的在于加深对基本知识的理解,掌握运用各种书本学习过软件的基本方法。1.2 课程设计的实验环境硬件要求能运行Windows 9.X操作系统的微机系统。数据库应用系统开发软件可以选用:FoxPro for Windows;Visual FoxPro;Microsoft Access,或其他数据库管理系统;以及其它学习

5、或自己使用过的相关软件.1.3 课程设计的预备知识熟悉数据库的基本知识及一种以上数据库系统开发软件。及有关网页设计的工具软件.1.4 课程设计要求按课程设计指导书提供的课题(参考,应根据下一节给出的基本需求独立完成各个方面的设计,可以组成设计小组,分模块进行,共同协作完成一个应用系统的开发任务。要求书写详细的设计说明书,对复杂的代码段和程序段,应画出程序流程图。在界面设计中,画出每个窗口的布局,有多个窗口时,按模块调用的方式画出窗口调用图,用手工画好报表和标签样式,严禁相互抄袭。第2章课程设计内容2.1 课程设计的目标21世纪是信息高速发达的时代,网络作为当今最流行最方便快捷的媒介也越来越被人

6、们接受,而作为新世纪的计算机系大学生更应该具备一定的网络知识,来充实和武装自己。网站的建设首先能丰富学生自己的文化知识,在建设网站的过程中能学到实际的网络知识。这样不仅对自己原有的知识是个实践性的提高,而且还积累了实际的设计经验。而对于即将毕业的学生,网站能对他有什么样的帮助呢?这是一个很好的网络身份证,因为网站的作用是让别人了解自己认识自己,以达到让别人对自己更好的了解。有这么一个自己设计和制作的网站在这里完全可以证明你拥有一定水平的计算机能力,也加大了你被录取的可能性。而且对于那些计算机水平很高的人来说,建设一个个人网站首先证明了自己的水平。这样比简单空白的文本式简历要更有说服力的多。在网

7、页制作中,运用了Photoshop和fireworks强大的图像制作和处理能力。以自己在网上收集的素材作为图片素材。进行了大量的图片制作,从而给人以强烈的美感。整个网站的架构是由Dreamwaver软件完成的。整个网站运用了CSS的方法定位、设计。用这个方法可以减少内存,更易浏览。HTML编辑器,虽然HTML代码复杂,编辑和调试要花费大量的时间,但因HTML的稳定性、广泛支持性及可创建复杂的页面效果,仍受高级网页制作人员的青睐。就目前来说,有众多的编辑器供选择,这些编辑器广泛支持复杂页面创建及高级HTML规范。2.2 网站开发需求分析一个网站项目的确立是建立在各种各样的需求上面的,这种需求往往

8、来自于客户的实际需求或者是出于公司自身发展的需要,其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。面对对网站开发拥有不同知识层面的客户,项目的负责人对用户需求的理解程度,在很大程度上决定了此类网站开发项目的成败。因此如何更好地的了解、分析、明确用户需求,并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员,保证开发过程按照满足用户需求为目的正确项目开发方向进行,是每个网站开发项目管理者需要面对的问题。运动和健康越来越受大大家的重视,一个集体育资讯和健康知识于一体的网站,一定回受到大家的关注。2.3 开发工具的选用及介绍2.3.1 Dreamweaver简介Dreamweaver

9、 是没过Adpbe(原Macromedia,2005年呗Adobe收购公司开发的及网页制作和管理网站于一身的所见即所得网页编辑器,它是一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它不仅是优秀的WYSIWYG编辑器,更是优秀的代码编辑器,有代码加亮,代码提示等丰富功能,提供各种示例代码,并支持Javascript、PHP、ASP、JSP等多种脚本语言。此外,Dreamweaver MX 2004提供基于强大的规范管理来确保高质量的设计,设计环境提供CSS迅速高效的开发代码简洁、专业规范的站点。如果用户熟悉手工编写标记

10、代码,Dreamweaver包括许多与编码相关的工具和功能,其使用将更加灵活。并且,借助Dreamweaver还可以使用服务器语言生成支持动态数据库的Web应用程序。Macromedia Dreamweaver MX 是创建专业网站的最佳途径, 同时也是构建强大Internet 应用程序的最简便的途径。开发人员第一次能在一个环境内快速创建和管理网站及 Internet应用程序。Dreamweaver MX 是一个完整、集成的解决方案, 可为您提供可视化的布局工具、快速的 web应用程序开发以及广泛的代码编辑支持了全面、系统地提升网络设计、开发者的 Macromedia Dreamweaver

11、MX 及其它软件应用水平。2.3.2 Flash 简介Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准,由Adobe公司收购。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash也是存储芯片的一种,通过特定的程序可以修改里面的数据。Flash的前身是Future Wave公司的Future Splash,是世界上第一个商用的二维矢量动画软件,用于设计和编辑Flash文档。1996年11月,美国Macromedia公司收购了Future Wave,并将其改名为Flash。在出到Flash 8以后,Macromedia又被Ado

12、be公司收购。Flash 通常也指Macromedia Flash Player(现Adobe Flash Player。Flash,是一种动画创作与应用程序开发于一身的创作软件,目前最新的零售版本为Adobe Flash Professional CS6(2012年发布。Adobe Flash Professional CS6为创建数字动画、交互式Web站点、桌面应用程序以及手机应用程序开发提供了功能全面的创作和编辑环境。Flash广泛用于创建吸引人的应用程序,它们包含丰富的视频、声音、图形和动画。可以在Flash中创建原始内容或者从其它Adobe应用程序(如Photoshop 或Illus

13、trator导入它们,快速设计简单的动画,以及使用Adobe AcitonScript 3.0开发高级的交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常,使用Flash创作的各个内容单元称为应用程序,即使它们可能只是很简单的动画。您也可以通过添加图片、声音、视频和特殊效果,构建包含丰富媒体的Flash应用程序。2.3.3 HTML语言的简介HTML一种为普通文件中某些字句加上标示的语言,其目的在于运用标记(tag使文件达到预期的显示效果。HTML只是标示语言,基

14、本上你只要明白了各种标记的用法便算学懂了 html,html 的格式非常简单,只是由文字及标记组合而成,于编辑方面,任何文字编辑器都可以,只要能将文件另存成 ascii 纯文字格式即可,当然以专业的网页编辑软件为佳。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。只需使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形

15、、动画、声音、表格、链接等。HTML的结构包括头部(Head、主体(Body两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面。也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面;你所需要的只是一个文字处理器以及HTML的工作常识。其实你很快就会发现,基础的HTML语言简直容易死了。HTML只不过是组

16、合成一个文本文件的一系列标签。它们很像乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂。2.4 网页设计的要素1、网页的整体布局设计网页设计作为一种视觉语言,要讲究编排和布局,虽然主页的设计不等同于平面设计,但它们有许多相近之处,应充分加以利用和借鉴。版式设计通过文字图形的空间组合,表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处,才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来,特别要处理好页面之间和页面内的秩序与内容的关系。尤其是我们在利用网页效果体现在线营销的意图时,更要注意为了达到最佳的视觉表现效果,而讲究整体布局的合理性,比如一家生产

17、型的企业,它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验,从而方便他对产品的了解,促成最后的购买。2、网页设计中色彩的运用色彩是艺术表现的要素之一,在网页设计中,根据和谐、均衡和重点突出的原则,将不同的色彩进行组合、搭配来构成美丽的页面。根据色彩对人们心理的影响,合理地加以运用,按照色彩的记忆性原则,一般暖色较冷色的记忆性更强一些。色彩还具有联想与象征的特质,如红色象征血、太阳;蓝色象征大海、天空和水面等。所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时,应使用淡雅而沉静的颜色,使人心理上感觉凉爽一些,增强人们的购买心理,使得在线营销得到很好

18、的实践效果。另要注意的是网页的颜色应用虽没有限制,但不能毫无节制地运用多种颜色,一般情况下,先根据总体风格的要求定出一至二种主色调,在已经有了完备的CIS(企业形象识别系统的企业进行网页设计时,更应该按照其中的VI进行色彩运用。在色彩的运用过程中,还应注意的一个问题是:由于国家和种族、宗教和信仰的不同,以及生活的地理位置、文化修养的差异等,不同的人群对色彩的喜恶程度有着很大的差异。如:儿童喜欢对比强烈、个性鲜明的纯颜色;生活在草原上的人喜欢红色;生活在闹市中的人喜欢淡雅的颜色;生活在“沙漠”中的人喜欢绿色。在设计中要考虑众多因素。3、网页形式与内容相统一要将丰富的意义和多样的形式组织成统一的页

19、面结构,形式语言必须符合页面的内容,体现内容的丰富含义。运用对比与调和、对称与平衡、节奏与韵律以及留白等手段,通过空间、文字、图形之间的相互关系建立整体的均衡状态,产生和谐的美感。如对称原则在页面设计中,它的均衡有时会使页面显得呆板,但如果加入一些富有动感的文字、图案,或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素,要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的,很多时候都需要将它们结合起来,表达完美的设计意境。2.5 制作网页的步骤在做网页之前,我确定了做网页的五个步骤。1、确定网站主题:网站主题

20、就是要建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。2、搜集材料:明确了网站的主题以后,你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。3、规划网站:一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页

21、才能有个性、有特色,具有吸引力。4、选择合适的制作工具:尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。5、制作网页:材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。2.6 网页的设计技巧一张完美的主页设计需要积累丰富的

22、知识以及掌握大量的技巧。在这里从框架和CSS样式的运用两方面来介绍网页设计的技巧。2.6.1框架的使用FRAME(框架是Web上经常会看到的页面结构。框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。使用框架具有以下优点:访问者的浏览器不需要为每个页面重新加载与导航相关的图形;每个框架都具有自己的滚动条(如果内容太大,在窗口中显示不下,因此访问者可以独立滚动这些框架。例如,当框架中的内容页面较长时,如果导航条位于不同的框架中,那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。使用框架具有以下缺点:可能难以实现不同框架中各元素的精确图形

23、对齐;对导航进行测试可能很耗时间。许多专业 Web 设计人员不喜欢使用框架,并且许多浏览 Web 的人也不喜欢框架。在大多数情况下,这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如,每当访问者单击导航按钮时就重新加载导航框架内容的框架集。如果框架使用得法(例如,在允许其他框架的内容发生更改的同时,使一个框架中的导航控件保持静态,则这些框架对于某些站点可能非常有用。2.6.2 CSS样式的使用CSS(层叠样式表是一种制作网页的新技术,它的全称是级联样式表,即Cascading StyleSheets的缩写,又称之为风格样式表单。CSS是在网页制作过程中普遍用到的技术。采用了

24、CSS技术控制的网页,设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。2.7 网页的主要模块网页主要模块展示图 1、网站首页左侧展示运动健康小知识,中间展示全民健身视频,上方为网页主要链接,分别有篮球资讯、羽毛球资讯、足球资讯、图片。 2、篮球1篮球首页我爱NBA链接:最新资讯、最爱的球队、最爱的球星、联盟MVP、总冠军球队、发展与起源利用firework制作滚动的图片横幅,展示NBA球队利用flash制作视频,NBA球队简介 2篮球篮球最新资讯页面。每条信息都可点击阅读,打开新的页面。最下方是利用firewo

25、rk 制作的滚动图片 每个球队名称都可点击并打开新页面,打开后的网页展示球队相关信息。 4最爱的球星页面 5篮球的起源页面左侧的篮球的起源、篮球的发展、篮球的规则均为链接,点击展示新内容。 3、足球1足球首页 2球队资讯页面左侧分栏,建立链接展示球队资讯、球员资讯、起源于发展点击球队或球员的图标后,可打开相关资讯页面 3球员资讯页面 4起源于发展页面 4、羽毛球1羽毛球首页建立链接:羽毛球发展与起源、图片集锦、最新资讯等利用flash制作视频,介绍羽毛球的起源和发展以及现在羽毛球运动的发展 左侧羽毛球的起源、羽毛球的发展、羽毛球的规则均为链接,点击可打开新内容。 展示大赛图片,最新赛况。 展示

26、最新羽毛球赛况,最新比赛资讯。 2.8 网页具体制作详细2.8.1 字幕的设计做网页是可以做一条滚动字幕,这样可以使网页加入丰富的动态效果,设计出生动活泼的网页。首先进入设计视图,将插入点放到要添加的新Web组件的位置。然后单击插入/Web组件,然后再单击字幕。2.8.2 图片的插入当把一个与主题相关的图片作为网页的背景,可能会更加吸引人们的眼球。因为我做的是关于我爱NBA的网页,所以我所选的背景是一幅NBA球星集合的画面。我把图片保存在我的磁盘上,在设计模式下,用鼠标右击该网页,选择快捷菜单上的网页属性,在网页属性的对话框中,单击格式选项卡,选择背景图片复选框,然后单击浏览,确定背景图片的文

27、件,单击打开。就这样可以增添背景了为了使网页达到图文并茂的效果,需要在网页中插入一些NBA的图片。在制作之前我先在“NBA网站”里找了大量的有关的图片,保存在我的可移动磁盘里。只有扩展名为GIF和JPEG的图形文件才能成为我们的页面的一部分。因为这两种图形格式不仅应用广泛,而且有利于节省存贮空间。下面我就可以把图片插入到网页中因首先把光标定位在需要插入图片的位置,然后选择插入/图片命令,单击常用工具栏中的插入文件中的图片按纽。在默认情况下,插入图片,就这样就完成了图片的添加了。但图片需要保存在磁盘了,否则下次打开时图片可能打不开。2.8.3 字体的设制字体设置:选上文字,打开格式工具栏的字体下

28、拉列表框,在里面选择相应的字体就可以了。字的颜色:单击格式工具栏字体颜色按钮旁的向下箭头,选择适当的颜色,字的颜色就改变了。还可以对字体进行一些其他设置。选择格式菜单的字体命令,在这里我们还可以作进一步的设置。这里除了格式工具栏可以做的设置以外,还可以设置许多效果。字符间距选项卡:它是用来设置文字的间距的。单击间距下拉列表,可以选择字符的间距是普通、扩充还是紧缩的。选择扩充,这时预览框的文字间距就变大了。也可以调整间距大小来改变间距,输入10,文字的间距就更大了。为了使网页的字体美观,我还设置了一些艺术字,首先选择艺术字的种类,然后确定要写的艺术字。就这样艺术字的设计就完成了2.8.4 超链接

29、选择插入菜单的超链接的命令,在文件列表框选择页面1.htm文件,在URL 文本框中显示了该文件的地址。单击确定按钮。超链接就制作成功了。我切换到预览模式(单击预览按钮,但我把鼠标指向主页时鼠标变成手形,单击它,就可以切换到主页了。如果是链接的网页需要对网页进行保存,这样才在以后的打开网页时信息不会丢失。FrontPage做了一个主页,里面有一些图片,在本地一切正常,但上传后背景、图片就显示却显示不出来,经查阅书发现图片都需要保存,我又只好把所有的图片都保存了一遍。只有这样一个完整的网页才做好了。设计的页面,应该检查它在浏览器中是否显示正常。方法是,一般只要切换到预览模式就可以了。单击预览选项卡

30、,在这个预览模式下的显示和在浏览器中的显示是一样的。第3章课程设计的问题与解决3.1 课程设计的问题1、网站制作非常的复杂,需要了解W3C的HTML4.0规范、CSS层叠样式表的基本知识、Java script、VBScript的基本知识。对于常用的一些脚本程序如ASP、CGI、PHP 也要有适当了解,还要熟练使用图形处理工具和动画制作工具以及矢量绘图工具,并能部分了解多种图形图像动画工具的基本用法,所以单单靠我们平时学习的还远远不够。还需要借鉴课外教材。2、确定网站色彩,网站给人的第一印象来自视觉冲击,不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。而且,浏览者在浏览网页时,留下的第

31、一印象就是页面的色彩设计,它的好坏直接影响阅读者的观赏兴趣。因此,色彩设计在网页设计中居于十分重要的地位。3、版面布局,好的布局可以让浏览者非常容易地找到他想看的东西。网站建设初学者,最容易犯的错误就是:确定题材后立刻开始制作,没有进行合理规划。从而导致网站结构不清晰,板块编排混乱等。结果不但浏览者看得糊里糊涂,制作者自己在扩充和维护网站也相当困难。所以,我们在动手制作网页前,一定要考虑好栏目和板块的编排问题。3.2 问题的解决思路1、在制作网站之前,到图书馆借阅关于网站制作、网页制作的相关书籍。上网下载相关视频,浏览相关网页,去了解更多关于这方面的知识。做到防范与未然,与小组人共同努力,团结

32、互助,在遇到解决不了的问题时,多与指导老师请教。2、一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列色。3. 网站的题材确定后,就要将收集到的资料内容作一个合理的编排。多去网上浏览一些优秀的个人网站,学习、借鉴他们的布局和一些好的板块。3.2 个人总结学习网页设计已经有一段时间了,我对网页设计非常感兴趣,想设计出一个美观、实用、内容丰富的个人网页。我通过自己动手、动脑,通过网络资源和老师的指导,在不断发现问题和解决问题的过程中学到了很多知识,增强了我的创作能力和动手能力,在网页设计过程中,从构思到设计、完善、维护,整个过程我都全身心投入,使我真正学到了网页设计的知识。在本次网页设计中,我不仅学到了很多关于网页设计方面的只是,也从中学会了关于使用网页制作软件方面的知识。在这个过程中,我利用了已经学过的Dreamweaver网页软件,并且学会了简单地使用Dreamweaver。做好网页,并不是一件容易的事,它包括个人网页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很