多媒体技术毕业论文-个人校园网站制作.doc
《多媒体技术毕业论文-个人校园网站制作.doc》由会员分享,可在线阅读,更多相关《多媒体技术毕业论文-个人校园网站制作.doc(39页珍藏版)》请在三一文库上搜索。
1、安徽中澳科技职业学院安徽中澳科技职业学院毕业论文个人校园网站制作姓 名: 系 部: 计 算 机 系 专 业: 多 媒 体 技 术 指导教师: 日 期:2009年12月10日摘 要随着科学技术和信息通讯的飞速发展,Internet极大的丰富和改变着我们生活的各个行业。随着Internet的普及应用,人们可以跨越时间和空间的限制,足不出户便能通过网络完成信息交流。为实现这一目的,本设计通过详尽的分析和探讨,采用html语言,使用DIV+CSS作为网站的布局设计。通过设计最终实现了个人校园网站。通过该网站可以方便、有效的进行浏览学校内的相关信息。关键词:html div+css flashAbstr
2、actAlong with the science and technology and the information communications swift development, Internet enormous enriching and is changing each profession which we live. Along with Internet popularization application, the people may surmount the time and the spatial limit, is confined at home then c
3、an complete the communication through the network. In order to realize this goal, this design through the exhaustive analysis and the discussion, uses the html language, uses DIV+CSS to take the website the topological design. Has realized individual campus website finally through the design. Throug
4、h this website may convenient, effective carry on glances over in the school the related information.Keywords: html div+css flash目 录第一章 引 言2第二章 需求分析和方案论证22.1 需求分析22.2 性能需求3第三章 总体设计33.1 页面整体布局设计33.2 页面各版块页面设计4第四章 网页详细设计与实现44.1 index.htm主页制作44.1.1 header头部页面制作94.1.2 content内容部分制作124.1.3 footer页脚部分制作26
5、4.2 nav2.htm页面制作(学院概况页面)274.3 nav3.htm页面制作314.4 new1.htm页面制作324.5 new2.htm页面制作33结束语35致 谢36参考文献36第一章 引 言近年来,随着计算机技术的发展和互联网时代的到来,我们已经进入了信息时代,也有人称为数字化时代,在这数字化的时代里,学校的教学管理都受到了极大的挑战。Internet技术持续迅猛的发展,也给传统的办学提出了新的模式。通过设计和建设网络拓扑架构、网络安全系统、数据库基础结构、信息共享与管理、信息的发布与管理,从而方便管理者、老师和学生间信息发布、信息交流和信息共享。以现代计算技术、网络技术为基础
6、的数字化教学主要是朝着信息化、网络化、现代化的目标迈进。作为新型的办学模式,它们具有对于教育、教学过程来说极为宝贵的特性,可以为新型办学模式的建构提供理想的环境。在此制作的个人校园网站,旨在探索一种以互联网为基础的办学模式。通过这种新的模式,为学院提高工作效率和办学水平,使学校管理者、教师和学生可以在任何时候、任何地点通过网络进行学习。第二章 需求分析和方案论证2.1 需求分析用户需求是十分关键的,不了解用户的需求,设计出的网页就毫无用处。比如,设计一个电子图书下载网站,就不能把一大堆的新闻、在线游戏之类的内容放在网站上,这样会造成网站内容混乱没有主题,从而就无法吸引用户访问。要实现一个优秀的
7、网站,首先应该进行访客的需求分析,只有进行了充分的需求分析和调查,才能设计出满足访客需要的信息内容。通过校园网站,访客们可以对学校有大概的了解。比如,学院概述栏目版块就介绍了学校的发展历程。新闻中心栏目版块则介绍了学校内各个系的最新状况,等等。随着网络技术的飞速发展,现在很多国外的大学很国内的大学以及社会其他部门都已经开设了自己的网站。通过计算机网络实现网络信息的传递,使学生和教师足不出户的可以了解学校每天的最新通知和活动,只要又一台可以上网的计算机就可以了,节省了很多人力物力。本网站中包括了很多栏目,例如学院概况、新闻中心、专业介绍、招生信息等等。在互联网刚刚掀起时,网站中的内容都时枯燥的文
8、字,而如今html可以结合各种技术丰富网站的页面,比如使用flash技术使网页更有活力。本次设计的重点以及难点在于使用div+css进行布局,完全舍弃了以前表格布局,使得表现和内容相分离,便于后期的维护调整。2.2 性能需求校园网站是当今学校中最常见的一种传递信息的服务方式。本次设计制作了一个校园网站应用程序,主要使用的是html与div+css和flash相结合的技术来实现的。对于一个基本的校园网站,至少应该包含以下几项元素:即学校的介绍、动态、公告。其他诸如招生信息、就业指导等,可视情况增减。制作校园网站可以从网站内容和表现两个角度考虑。网站管理者可以在不改变网站内容的前提下通过修改相关的
9、css文件内容随时更换网站页面的风格。综上所述,该网站应具备的版块包括: 学院概况:访客可以了解本校的发展历程。 新闻中心:该版块列出了学校的新闻。 专业介绍:该版块介绍了本校所开设的专业课程。 招生信息:该版块介绍了本校在招生方面的相关信息。 就业指导:对本校将毕业的学生进行就业相关的指导。 国际合作:本校和国外学校的合作项目。 安徽雅思:该版块列出了雅思考试的最新情况。第三章 总体设计本网站的总体设计包括:dv+css网站布局设计、flash设计。3.1 页面整体布局设计网站布局设计,如图:注:header:网站头部,放置网站的banner和nav导航。 content:网站内容部分。 f
10、ooter:网站页脚部分,放置网站版权、备案信息等。3.2 页面各版块页面设计 header内包含banner和nav导航,connect内分为左右两大块,即con_left和con_right,然后con_left和con_right部分各分三小版块,这在后面会详细介绍。第四章 网页详细设计与实现4.1 index.htm主页制作建立三个文件夹,分别命名为:image(用于存储网站中所用到的图片)、css(用于存储网站css文件)、content(用于存储网站内容部分的网页)。css文件夹内包括:global.css(对整个页面的css控制)、layout.css(对页面三大标签块的css控
11、制)、layout1.css(对内容页面的css控制)。将网站名称设置为“个人校园网”,如下所示:校园个人网站效果如下:将主页面中导入相关的css文件:主页分为三大部分,即图中所示,header、content、footer,在index.htm中定义三大标签:将其添加到之后部分,如下:校园个人网站页面头部页面内容部分页脚部分现在测试index.htm页面效果如下:暂时我们的index.htm页面完成,接下来就需要对css文件进行编写布局页面的三大版块。global.css:*margin:0px;padding:0px;text-decoration:none;测试效果如下:对比上图,发现页
12、面中的文字有所不同,这是因为“margin:0px; padding:0px;”,分别将页面中文字的外间距和内间距设置为了0像素,所以改变了文字的位置。接下来需要考虑的问题是如何将文字居中呢?我们打开layout.css文件,输入以下程序:bodytext-align:center;font-size:13px;效果如图:我们需要注意的是现在所观看到的效果是在ie6中所预览的效果,而在火狐浏览器或者opera浏览器等观看的效果并不是居中显示,而是靠左对齐,针对这种情况,我们也需要考虑到,在body中添加如下的程序解决。bodytext-align:center;margin-left:auto
13、;margin-right:auto;font-size:13px此时页面在火狐浏览器中仍然部能居中显示,我们在index.htm文件中的后添加,在之间添加,如下。校园个人网站页面头部页面内容部分页脚部分这时候页面在绝多数的浏览器中可以居中显示了。为了让制作过程稍加容易,不妨给每一块div标签设置一种背景颜色便于区别。bodytext-align:center;margin-left:auto;margin-right:auto;font-size:13px#headerbackground:red;#contentbackground:blue;#footerbackground:yello
14、w;效果如下:至此,我们的三大版块已经出来了,接下来就是给三大版块细分添加每一个小的版块。设置页面三大版块的宽度、高度和页面的间距,以便后面的制作。bodytext-align:center;margin-left:auto;margin-right:auto;font-size:13px#headerbackground:red;width:730px;height:123px;margin-top:5px;margin-bottom:2px;#contentbackground:blue;width:730px; height:700px;margin-bottom:2px;#footer
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 多媒体技术 毕业论文 个人 校园 网站 制作
链接地址:https://www.31doc.com/p-3923968.html