网页设计与制作毕业设计论文.docx
- 文档编号:4064618
- 上传时间:2023-05-06
- 格式:DOCX
- 页数:31
- 大小:1.07MB
网页设计与制作毕业设计论文.docx
《网页设计与制作毕业设计论文.docx》由会员分享,可在线阅读,更多相关《网页设计与制作毕业设计论文.docx(31页珍藏版)》请在冰点文库上搜索。
网页设计与制作毕业设计论文
苏州信息职业技术学院
毕业设计报告(论文)
系别:
计算机科学与技术系
专业:
计算机应用
班级:
1班
学生姓名:
赵晋鹏
学生学号:
G08140131
设计(论文)题目:
中国体育网站
指导教师:
戴启艳
起讫日期:
2011\5\1——2011\6\1
毕业设计报告(论文)摘要
(题目):
中国体育网站
摘要:
网站建设定义是涵盖企业定位考虑,从营销角度立意而进行一个建设网站的过程,其中包括了前期网站定义、内容差异化、页面沟通等战略性调研,这些确立后,再去注册域名、租用空间、网站风格设计、网站代码制作五个部分,这个过程需要网站策划人员、美术设计人员、WEB程序员共同完成。
网站可以分为政府、事业单位网站,商业网站,个人网站及门户网站等等。
关键词:
Dreamweaver,ASP,Access,动态网页
3.网页制作……………………………………………………………………………12
1.引言
1.1.当今网页制作软件浅谈:
随着互联网的进一步发展与成熟,网络的带宽进一步加阔,网络应用也越来越广泛。
网页制作更是日新月异,层出不穷。
涌现了很多琳琅满目的网站,使得整个互联网多姿多彩。
以前,在网页制作的时候,通常都是使用FrontPage来完成。
由于FrontPage使用方便,操作简单,即使没有网络编程经验的制作人员也可以设计出吸引人的网页,因此,很多网页设计者一直使用FrongPage。
FrontPage2000集成在Office2000办公自动化软件中,其工作界面和操作风格和Word一样,因此,FrontPage相对于其他网页制作软件来说,易学易用,是网页制作初学者的入门软件。
从功能来讲,DREAMWEAVER和FrontPage各有千秋,但DREAMWEAVER自身有明显的特点:
首先DREAMWEAVER引入了图层的概念,可以在DREAMWEAVER中直接制作一些动画效果。
其次DREAMWEAVER支持最新的DHTML(动态HTML)标准CSS(层叠样式表单)规范。
另外DREAMWEAVER具有增加插件的功能,用户可以安装各种插件来增强自己的DREAMWEAVER。
最后DREAMWEAVER中又新增了资源管理器、内建参考手册。
整合SourceSafe和WebDAV,集成了MacromediaExchange.其灵活方便的操作界面,也是很多人选用DREAMWEAVER的一个原因。
就目前来说DREAMWEAVER已经占据网页编辑软件霸主的位置
我们再来谈谈我最喜欢的动画网页制作软件——Flash。
与其说Flash是一个动画网页制作工具,还不如说它是一个功能强大的多媒体制作工具更为恰当。
利用Flash可以独立制作出非常精彩的多媒体网页,包括动画的制作、声音效果的添加等。
另外Flash对Internet的支持,主要表现在它采用了流控制技术,不用等整个动画的Movie下载完,就可以开始播放,对于一个Internet冲浪者来讲,这是一件很有吸引力的事情。
同时Flash采用了矢量图形的制作方法,当对一副图进行任意的缩放时,它的质量并不会发生变化,而且文件很小,利于网络传输。
FIREWORK是Macromedia公司推出的图像处理软件,与其他图形处理软件的设计思想都很相似,但它又有很多自己的特色。
FIREWORK是一个人完全为网页制作者设计的图形处理软件,对制作基于网络的图形有特殊的支持,能够自由的导入导出各种图像。
FIREWORK作为第一款为网络实际而开发的图像处理软件,能够自动切图,生成鼠标动态感应的JavaScript。
而且FIREWORK具有十分强大的动画功能和一个几乎完美的网络图像生产器。
FIREWORK可以轻松辨认矢量文件中的绝大部分标记以及Photoshop文件的层。
除以上提到的主流网页制作软件以外,上传软件也是非常有用的:
CuteFTP就是这样一款非常著名的FTP传输软件,虽然DREAMWEAVER和FrontPage都提供了内嵌式的上传工具,但是CuteFTP的强大功能仍然使它成为FTP软件的首选。
另外和CuteFTP功能相媲美的一款国产FTP软件LeapFTP同样受到很多国内网页制作者的青睐。
2.选题调查报告、设计方案、论文提纲概述
2.1开发工具:
●MacromediaDreamweaverMX
●MacromediaFlash5.0
●MacromediaFireworkMX
●AdobePhotoshop6.0
●MicrosoftAccessMicrosoftFrontPage
2.2开发工具简介
2.2.1网页图像设计工具——Photoshop、Fireworks
在网页制作过程中,首先要使用Photoshop或Fireworks设计网页和整体效果图、处理网页中的图像、背景图及网页的图标、按钮等。
Photoshop是平面图像处理业界霸主Adobe公司推出的跨越PC和MAC两界首屈一指的大型图像处理软件.它功能强大,操作界面友好,得到了广大第三方开发厂家的支持,从而也赢得了众多的用户的青睐。
Fireworks是Adobe公司推出的著名平面图像设计和图像处理软件,它具有强大的图像处理功能和操作易用性,受到广大平面图形设计人员及专业广告设计师的青睐。
它涉及图像合成、色彩校正、图层调板、通道使用、动作调板、路径工具、滤镜等图像处理功能。
可制作如按钮制作、文字特效、材质纹理、三维物体、影像特效及广告创意设计等多种用途。
2.2.2动画制作工具——FlashMX2004
是Macromedia公司的一个的网页交互动画制作工具。
用flash制作出来的动化是矢量的,不管怎样放大、缩小,它还是清晰可见。
用flash制作的文件很小,这样便于在互联网上传输,而且它采用了数据流技术,只要下载一部分,就能欣赏动画,而且能一边播放一边传输数据。
交互性更是flash动画的迷人之处,可以通过点击按钮、选择菜单来控制动画的播放。
正是有了这些优点,才使flash日益成为网络多媒体的主流。
2.2.3网页排版工具——MacromediaDreamweaver8
MacromediaDreamweaver8是由Macromedia公司推出的,用于网页开发和网站管理的专业化设计工具。
它采用了多种新技术,具有设计和开发网站过程中需要的网站管理、网站设计、页面制作、多媒体制作和动画制作等丰富实用的功能;它具有友好的操作界面,在文档窗口中可以打开各种浮动面板,同时还可以使用系统内置的多种对象进行操作。
它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
从对基于CSS的设计的领先支持到手工编码功能,Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。
开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序,从而使用户能连接到数据库、Web服务。
2.3可行性分析
2.3.1B/S结构介绍
B/S(Browser/Server,简称B/S)结构,即浏览器/服务器模式,它是WEB兴起后的一种网络结构模式,从传统的二层C/S结构发展而来,通常采用三层结构:
浏览器-Web服务器-数据库服务器,WEB浏览器是客户端最主要的应用软件,浏览器通过WebServer同数据库进行数据交互。
在B/S体系结构系统中,用户通过浏览器向分布在网络上的许多服务器发出请求,服务器对浏览器的请求进行处理,将用户所需信息返回到浏览器。
而其余如数据请求、加工、结果返回以及动态网页生成、对数据库的访问和应用程序的执行等工作全部由WebServer完成,这样大大简化了客户端,减轻了系统维护与升级的成本和工作量,降低了用户的总体拥有成本(TCO)。
该结构的缺点是存在数据安全性问题、对服务器要求过高、数据传输速度慢、软件的个性化特点明显降低,难以实现传统模式下的特殊功能要求。
2.3.2ACCESS数据库
Access是微软公司推出的基于Windows的桌面关系数据库管理系统(RDBMS),是Office系列应用软件之一。
它提供了表、查询、窗体、报表、页、宏、模块7种用来建立数据库系统的对象;提供了多种向导、生成器、模板,把数据存储、数据查询、界面设计、报表生成等操作规范化;为建立功能完善的数据库管理系统提供了方便,也使得普通用户不必编写代码,就可以完成大部分数据管理的任务。
由于Access数据库的ODBC驱动程序支持的SQL指令全,执行效率高,所以Access后台数据库+ASP服务器端程序+客户端IE浏览器,是一个精练实用高效的组合模式。
2.3.3ASP技术
ASP(MicrosoftActiveServerPages)技术是目前比较流行的开发动态WEB页的技术之一,其他的还有如PHP,JSP,ASP.NET等。
但ASP以其独特的易学、易用、易维护等特点,为大多数中小型企业级管理信息系统所选用,其主要可以灵活应用微软公司COM组件,开发出功能强大的信息系统,其主要运行于WINDOWS的IIS服务器平台。
ASP程序属于解释型,无须编译。
ASP程序的控制部份,是使用VBScript、JScript等脚本语言来设计的。
和同其他编程语言一样,ASP程序的编写也遵循一定的规则。
安装ASP时,系统提供了两种脚本语言:
VBScript和JScript,而VBScript则被作为系统默认的脚本语言。
2.4调查报告:
随着时代步伐的加快,我国越来越多的青少年开始投入了种类繁多的体育运动中。
本网站旨在通过网络普及运动知识,展现我国的传统运动以及新星运动。
2.4.1功能简介
本网站主要有五部分内容(功能结构如下图):
∙(1.)首页:
主要包含一些热点焦点透视、体坛动态,国内最新动向,国内外体坛战报新闻等内容。
∙(2.)NBA动态:
主要包括美国职业篮男的比赛战报,数据统计,颁奖典礼(常规赛最佳球员,最佳第六人,常规赛最佳防守球员,季后赛最佳球员等等),直播,最新动态信息。
∙(3.)FIFA动态:
主要包括西班牙,法国,巴西,德国,英格兰等地的足球赛事(不包括中国足球),更会涉及欧洲足球赛事和世界杯,数据统计,颁奖典礼等最新动态等信息。
∙(4.)其他各类体育项目:
包括我国国球乒乓、网球、羽毛球、斯诺克、高尔夫等最新动态精彩体育赛事。
∙(5.)讨论区:
主要功能是网友和网站之间的交流平台,也是网友给网站提供体育信息的主要渠道。
中国体育网站
首页
NBA动态
FIFA动态
其他各类体育项目
讨论区
2.4.3网站最终所要达到的目的:
搜集各种体育杂志、报刊、网站信息,通过本网站可以尽量满足体育爱好者的求知需求,旨在普及体育知识,展示我国及世界各地的体育风俗,满足更多体育爱好者的渴望。
2.4.4的设计分析:
1、本网站主要采用表格方式进行排版,利用CSS进行整体样式设计,主色调采用灰和白色风格,整体风格正式,严肃。
2、除留言版外其他页面采用静态网页设计,该方式有浏览速度快,易搜索,易保存等特点。
3、留言版用asp设计,后台采用MicrosoftAccess数据库进行管理。
4、留言版添加了管理员功能,可以对留言内容进行审查,净化网络信息。
5、本网站总容量小,信息量大,租用100M以内的的服务器基本可以满足网站2年内的运营。
具有很高的性价比和可行性。
6、对浏览者运行要求较低。
用户只需装有IE5.0及以上版本即可浏览网站。
2.5网站开发、运行环境:
本网站主要用MacromediaDreamweaverMX进行网页设计,动画部分用MacromediaFlash5.0制作,位图图片主要用AdobePhotoshop6.0处理,矢量图主要用MacromediaFireworkMX进行设计。
数据库用MicrosoftAccess。
网站采用时下流行的浏览器/服务器方式进行访问。
3.网站制作
3.1Dreamweaver网页编辑
本网站首先采用DreamWeavwe进行网页的编辑和排版。
整体网页采用表格方式进行定位,表格边框宽度值为0,这样的优点可以根据不同用户的不同浏览器以及分辨率随时调整网页内容,同时浏览者也看不到表格线。
按照惯例,表格的最左边内嵌1×5的表格,里面是悬停导航按钮。
网页的顶端是横幅标题(banner),根据需要可以更换成FLASH广告。
Banner的下放是横向导航按钮,按钮采用静态矢量图片的方式,浏览速度快,只需下载一次即可。
该导航按钮弥补了悬停按钮低版本浏览器不支持的缺点。
这也是网页布局的惯例,符合中国人的中庸式传统审美观。
3.1.1中国体育网站的内容主要按照体育运动的类型分为三部分:
NBA动态、FIFA动态、其他各类体育事项以及讨论区。
其中每个栏目下面又有很多的体育信息和知识。
网站更新的信息和将在首页中提示出来,方便网友查询。
1.NBA动态:
主要包括美国职业篮男的比赛战报,数据统计,颁奖典礼(常规赛最佳球员,最佳第六人,常规赛最佳防守球员,季后赛最佳球员等等),直播,最新动态信息。
2.FIFA动态:
主要包括西班牙,法国,巴西,德国,英格兰等地的足球赛事(不包括中国足球),更会涉及欧洲足球赛事和世界杯,数据统计,颁奖典礼等最新动态等信息。
3.其他各类体育项目:
包括我国国球乒乓、网球、羽毛球、斯诺克、高尔夫等最新动态精彩体育赛事。
4.讨论区:
主要功能是网友和网站之间的交流平台,也是网友给网站提供体育信息的主要渠道。
中国体育网站
首
页
NBA
FIFA动态
其他各类体育
讨论区
赛报报道
数据统计
颁奖典礼
赛报报道
数据统计
最新动向
体育赛事
最新动态
留言板
建议区
NBA动态主要摘自《NBA中国官方网》,《NBA体育频道—腾讯网》,内容有:
3.2.1对阵图:
3.2.2比赛日程:
3.2.3NBA大事:
3.3FIFA动态
主要摘自《EASPORTSFIFAOnline2–国际足联唯一授权南非世界杯官方》和《EASPORTSFIFAOnline2官方论坛》其中详细介绍了足球的规则,历史来源以及历代巨星的成长历程和未来新星。
内容有:
3.3.1足球视频:
3.3.2赛后休息室:
3.3.3球员转会:
3.3.3经验心得:
3.4其他各类体育事项
摘自《体育频道中华网》其内容有:
4.FlashMX动画制作:
一个吸引人的网站一定有一个华丽的FLAH过场动画,这样不仅给浏览者深刻的印象,同时突出了网站的特点与风格。
但FLASH相对DW制作较复杂,设计到帧、时间轴、剪辑、按钮和actoin语言等方面。
下面是我这个FLASH制作过程的简单介绍:
(1.)虽然FLASH采用了流控制技术,但考虑到基带网的速度和本身FLASH的文件大小,我还是采用目前流行的先下载后观看的方式,以保证音效和动画的流畅性。
并且加装了一个进度条,随时检测下载速度和时间,让浏览者做到心中有数。
只有当进度达到100%时,动画开始按钮才出现,浏览者单击按钮,动画随即开始。
整个下载部分的动画放在一个剪辑中,不仅节省内存,而且方便库的管理。
(2.)FLASH动画设计风格为简洁、动感、时尚。
配以节奏感极强的背景音乐衬托出整体效果。
内容上,首先出现的是四个关键词:
威武之师;文明之师;抵御侵略;保卫祖国。
这是我军的神圣职责,也是建军方针。
随后还是一个剪辑动画,配以快速闪动的文字,上方是网站名称和域名。
下放是跳动的ACSII码,同时在按钮的action语言中加上URL链接,直接连到网站主页,这也是动画与首页的接口。
(3.)FLASH影片所有素材、按钮、剪辑、声音全部导入库中,时间轴上只有各个剪辑的层,从而节约了内存,方便管理。
(4.)影片导出时增加了保护功能,增加了影片的安全性,防止他人盗用修改影片。
矢量图的品质为100,保证了影片图像的质量,并且声音的输出格式为mp3采样标准为128Kbps双声道立体声,该标准接近CD标准,这样虽然增加了影片的大小,但是保证了声音的效果。
同时输出的还有影片大小报告。
5.FireworkMX矢量图片处理:
Firework在网站中,除了配合Flash处理动画里的影片以外,主要是制作导航按钮和Banner,因为导航按钮采用的是悬停方式,所以每个按钮要同时做出两个版本。
即原始状态和悬停状态。
(1.)Firework在图片处理上使用了高光和阴影的效果,以突出按钮的立体感、变化感、和悬停感。
(2.)Firework在处理Banner的时候采用横幅与网站图标一体的方式处理,将二者整体化,不仅方便排版,也方便浏览者浏览。
(3.)Firewok在处理网站上方的导航按钮时候,用代表该按钮的图片配以相应文字来处理。
(4.)Firework在图片输出的时候采用JPEG(ISO国际标准图像压缩)格式。
这是目前网络较为流行的图片格式,文件小,传输速度快,图片清晰。
输出品质为80,无平滑。
6.JAVA脚本语言和CSS样式应用:
6.1JAVAScript浅谈:
JavaScript语言是一种新型的Script(文编)语言,由Netscape通信公司首创,并在其发行的NetscapeNavigator2.0及以后版本中予以支持。
使用Netscape2.0浏览器可以识别嵌在HTML中的JavaScript语句,能够响应用户点击鼠标、输入表格、页面导航等类似的事件。
JavaScript的出现引起有关公司的密切注视,已有大约30家公司已同意支持这种语言。
6.2JavaScript语言的发展:
JavaScript语言起初并不叫此名称,它的早期是Netscape的开发者们称之为"Mocha"的语言,开始在网上进行β测试时,名字改为"LiveScript",直至发行Netscape2.0β测试版时才称其为"JavaScript"。
支持JavaScript的Navigator2.0的网络浏览器能够解释并执行嵌在HTML中的JavaScript语言书写的"程序"。
JavaScript具有很多采用CGI/PERL编写的Script的能力,其优点是可以引用主机资源,响应位于服务器Web页中相应语法元素要完成的功能,而又不与主机服务器进行交互会话的优点。
Sun公司推出Java之后,Netscape引进了Sun的有关概念,将自己原有的"LiveScript"更名为"JavaScript",它不仅支持Java的Applet小程序,同时向Web作者提供一种嵌入HTML文档进行编程的、基于对象的Script程序设计语言,采用的许多结构与Java相似。
6.3JavaScript的特点:
6.3.1节省了CGI的交互时间
随着WWW的迅速发展,有许多WWW服务器提供的服务要求与浏览者进行交互,确定浏览者的身份、需要服务的内容等等,这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。
很显然,通过网络与用户的交互过程一方面增大了网络的通信量,另一方面影响了服务器的服务性能。
服务器为一个用户运行一个CGI时,需要一个进程为它服务,它要占用服务器的资源(如CPU服务、内存耗费等),如果用户填表出现错误,交互服务占用的时间就会相应增加。
被访问的热点主机与用户交互越多,服务器的性能影响就越大。
JavaScript是一种基于客户端浏览器的语言,用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的,即使是必须调用CGI的部分,浏览器只将用户输入验证后的信息提交给远程的服务器,大大减少了服务器的开销。
6.3.2节省了浏览者的访问时间和网络的流量
由于用户与主机的交互工作放在了客户浏览器端进行,用户输入的信息在本地就可以得到验证、处理,用户与主机的交互时间减少,网络的通信量相应降低,用户也免除了提交一个无意出错的表格后的等待时间。
6.3.3将JavaApplet作为处理对象
由于JavaScript是一种面向对象的语言,一个Web页中的窗口、当前所处的URL地址、浏览资源的历史、文档的属性(如标题、题头、背景色、表格等)都作为对象来处理。
同样,Java中的Applet小程序也被JavaScript当做对象来引用、控制,JavaApplet可以与JavaScript通信,改变一个Web页的构成,具有很大的灵活性。
6.3.4支持JavaScript的公司级浏览器
目前,Netscape公司的Navigator2.0版以上浏览器具有处理JavaScript源代码的能力,最新的版本是Navigator2.02及Navigator3.0β版。
微软公司也在它的InternetExplorer3.0β版上支持JavaScript。
近日将有一些公司发行与JavaScript兼容的浏览器。
Netscape及Sun推出原始JavaScript发行版时都声称有大约30家公司已同意支持这种语言。
它们打算将JavaScript提交W3C及IETF组织,作为InternetScript语言标准,将JavaScript作为一种开放的、无版权的标准用于Internet,这意味着任何公司在它们的产品中可以自由地开发使用JavaScript作为其Web客户浏览器。
微软公司是除Netscape公司外的首家将JavaScript纳入其浏览器的公司。
6.3.5JavaScript的安全问题
由于浏览器本身允许用户查看浏览到的HTML文档的源代码,采用JavaScript编写的源代码会在用户面前暴露无遗。
用户通过查看源代码,往往可以不费力地发现正确输入用户名和口令登录的代码,或是找到有关输入之后源代码中要加载的URL地址。
用户使用该URL地址完全可以绕过防护措施,直接进入该Web页。
当然,任何一个Internet标准都不可能声称自己有100%的安全性,JavaScript的开发者针对安全性问题正在做一些补漏工作,如Navigator2.x已解决了伪造E-mail/窃取E-mail地址的问题。
Navigator3.0正在致力于既允许使用JavaScript去引用和验证用户口令输入,又要防止不怀好意的人利用它的可见性从事不利的事情。
6.3.6JAVAScript在网页中的应用
在本网站中我主要在首页用了标题栏现实欢迎信息和加入收藏夹两种特效。
这两张效果不仅实用性很强,而且对浏览器的负担也很小。
functionbookmark(){
window.external.AddFavorite('','云天军事小站')
}
varx=0
varspeed=120
vartext="欢迎光临云天军事小站"
varcourse=120
vartext2=text
functionScroll(){
window.status=text2.substring(0,text2.length)
if(course setTimeout("Scroll2()",speed) } else{ text2=""+text2 setTimeout("Scroll()",speed);
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 毕业设计 论文