《多媒体技术毕业论文-个人校园网站制作.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
15、background:yellow;width:730px;height:100px;效果如下：index.htm主页面的三大版块就制作完成了。4.1.1 header头部页面制作对页面头部结构细分。Header版块包括2个内容，即网站banner和网站的nav导航。如图所示：在header标签内添加banner以及定义nav导航标签。如下：在nav导航标签内添加导航文字。如下：首 页 学院概况 新闻中心 专业介绍 招生信息 就业指导 国际合作 安徽雅思 思政建设 信息服务 专题链接 电子邮件 效果如下：接下来需要通过css控制nav导航的显示样式，让其横向排
16、列显示，打开layout.css添加如下程序：#navlist-style:none;margin-top:2px; #nav li float:left;测试效果如图：将整个nav标签进行块状划分，并调整每个标签的位置、文字大小、颜色等。继续添加如下程序。#nav li a color:#000;display:block;text-decoration:none; text-align:center;padding-top:5px;padding-left:4px;padding-right:5px;padding-bottom:5px;效果如下：为nav导航添加背景，添加如下程序。#na
17、v li float:left;background:url(./image/nav.jpg);效果如图：设置每次鼠标经过每个块状导航之后发生的变化（如文字颜色、导航背景等），添加nav标签的hover事件，如下。#nav li a:hovercolor:white;padding-top:5px;padding-right:6px;background:url(./image/bgfooter.gif);并且去除header部分的背景颜色，效果如下：至此，header部分已经完成。4.1.2 content内容部分制作content分为2个大的版块，即con_left和con_right。c
18、on_left和con_right分别包含3小部分。如图：在index.htm的content标签内添加con_left和con_right标签，如下。打开layout.css文件，对con_left和con_right标签进行设置。#con_leftfloat:left;width:219px;margin-right:1px;height:700px;#con_rightwidth:508px;background:red;float:left;height:700px;border-left:#fff solid 1px;效果如图：首先对左边con_left部分细分为三块，分别为con_
19、fla、con_tonggao和con_link。打开index.htm文件，在con_left标签内定义con_fla、con_tonggao和con_link，如下。打开layout.css文件对三块标签进行设置。#con_flaheight:220px;background:#336;#con_tonggaoheight:220px;background:#946;#con_linkheight:220px;background:#179;效果如图：再在其三个标签内定义div标签，用于设置每一版块的标题。校园风采最新通告友情链接效果如下：con_left内的三小块已经完成，接下来的就是在
20、其内部填充内容。在校园风采栏目中是一个flash，我们打开flash软件，对其进行制作。新建影片剪辑元件，将图片调整到适合的大小，这里我设置为216.0px（宽）、192.0px (高)。将该影片剪辑拖动到舞台中，为该影片剪辑设置模糊滤镜效果。这样flash第一帧的效果图如下：第25帧插入关键帧，取消之前的模糊效果，创建动作补间动画，形成图片从模糊到清晰的一个变化。在第40帧插入关键帧，将该帧上影片剪辑的透明度设置为3%，创建动作补间动画，形成一张图片到另一张图片的过渡效果。其余图片过渡方法一致。新建图层，用于放置该flash中的按钮，为按钮添加as2.0的脚本。on(press)gotoAn
21、dPlay(1);跳转的帧数视具体情况而定，这样就完成了flash的制作。下面开始对校园风采栏目内容进行填充。将制作好的flash文件放置于index.htm文件同一目录下。打开index.htm文件，在flash标签内进行程序添加。 效果如下：打开layout.css文件，设置版块标题的背景以及间距。#con_flaheight:200px;background:url(./image/nav1.jpg);#con_fla ptext-decoration: none;padding-top:6px;color:black;#flashheight:200px;margin-top:6px;
22、background: #ebebeb;接下来添加最新通告版块栏目。 学校防控甲型H1N1流感宣传 关于进一步加强雨雪天气学生安全工作的通知 关于2009-2010学年国家助学金初审学生名单的公示 2008-2009学年国家奖学金、国家励志奖学金初选名单公示 日语专业毕业论文模板下载 效果如下：设置文字大小和背景等等，打开layout.css。#con_tonggaoheight:220px;background:url(./image/nav1.jpg);#con_tonggao ptext-decoration: none;padding-
23、top:6px;color:black;#tg_cnheight:200px;margin-top:6px;background: #ebebeb;#tg_cn ul li afont-size=13px;display:block;padding-top:5px;text-align:left;text-decoration: none;color:#444;background: #ebebeb;#tg_cn ul li a:hovercolor:red;background: #ebebeb;效果如下：添加友情链接内容，打开index.htm文件。 安徽省教育厅 安徽省科技厅西澳TAFE
24、学院教育部考试中心Ielts报名网站J.TEST中国事务局电子政务打开layout.css文件，设置该版块内容样式。#con_linkbackground:url(./image/nav1.jpg);height:220px;#con_link ptext-decoration: none;padding-top:6px; #linkheight:200px;margin-top:6px;background: #ebebeb;#link li adisplay:block;padding-top:5px;text-decoration:none;color:#444;效果如下：con_lef
25、t整个部分已经完成，接下来完成con_right。打开index.htm，在con_right内分别定义con_news、con_jy、con_ys标签。添加版块标题和内容版块。 校内新闻 教育新闻 雅思动态 对con_news、con_jy、con_ys标签进行相应的设置，打开layout.css文件。#con_newsbackground:url(./image/nav1.jpg);height:220px;#con_news ptext-align:left;text-decoration: none;padding-top:6px;color:black; # cn_news marg
26、in-top:6px;background:#ebebeb;height:200px;#con_jybackground:url(./image/nav1.jpg);height:220px;#con_jy ptext-align:left;text-decoration: none;padding-top:6.px;color:black; #cn_jymargin-top:6px;background: #ebebeb;height:200px;#con_ysbackground:url(./image/nav1.jpg);height:220px;#con_ys ptext-align:
27、left;text-decoration: none;padding-top:6px;color:black; #cn_ysmargin-top:6px;background: #ebebeb;height:200px;效果如下：现在向各个版块中添加相应的内容，首先是校内新闻版块，打开index.htm,添加以下程序。 为保学生安全，全院教职工自觉清扫积雪 2009-11-17 我院派员参加安徽省科研会计学会第二小组活动 2009-11-17 我院召开学生座谈会征求对食堂工作的意见和建议 2009-11-13 我院举办迎评“说课”专题讲座 2009
28、-11-12 学院部署2009-2010学年度第一学期期中教学检查 2009-11-12 高教处王后林先生来我院指导工作 2009-11-12 通过css文件对其文字格式、文字字体和鼠标滑过文字后的状态等进行设置，打开layout.css文件。#cn_news litext-align:left;margin:0; padding:0;#cn_news li adisplay:block;margin-bottom:10px;margin-top:5px;text-decoration: none;color:#444;#cn_news li a:hovercolor:
29、#000000;效果如图：添加教育新闻版块内容，打开index.htm文件。 人民日报：真信仰 百炼钢二论学习吴大观同志 人民日报：中国心 报国情一论学习吴大观同志 吴大观采访札记：信仰的力量 安徽教育网：“委厅领导在线接受咨询系列活动” 2009年省属普通高等教育计划招生300670人 通过css文件对其文字格式、文字字体和鼠标滑过文字后的状态等进行设置，打开layout.css文件。#cn_jy litext-align:left;#cn_jy li adisplay:block;margin-bottom:10px;margin-top:5px;text-decoration: none;color:#444;#cn_jy li a:hovercolor:#000000;效果如图：添加雅思动态版块内容，打开index.htm文件。 2010年雅思考试报名日程安排 人民日报：中国心 报国情一论学习吴大观同志