1、中学网站设计与实现毕业设计论文西南科技大学网络教育毕业设计（论文）题目名称： 文山中学网站设计与实现 年 级： 层次： 本科专科学生学号： 指导教师： 学生姓名： 技术职称： 学生专业： 学习中心名称： 西南科技大学网络教育学院制毕业设计（论文）任 务 书题目名称 文山中学网站设计与实现 题目性质 真实题目 虚拟题目学生学号 指导教师 学生姓名 专业名称 技术职称 学生层次 学习中心名称 年 月 日毕业设计（论文）内容与要求：毕业设计领导小组负责人： （签字）年 月 日毕业设计（论文）成绩考核表过程评分评阅成绩答辩成绩总成绩百分制等级制1、指导教师评语建议成绩 指导教师签字： 年 月 日2、论
2、文评阅教师评语建议成绩 评阅教师签字： 年 月 日3、毕业答辩专家组评语建议成绩 答辩组长签字： 年 月 日4、毕业设计领导小组推优评语组长签字： 年 月 日摘 要随着网络的高速发展,及教育体制改革的深入,通过网络自主学习与搜集信息,已经成为每个人所必须做的事情，特别是计算机知识,因其自身知识更新快的特点,通过网站进行自主学习无疑是最佳的选择。随着中学校校园工程的展开，中学信息化进程的逐步深入，专业信息技术老师的逐步充实，各中学的校园网平台正在逐步发生可喜的变化，如从无到有、平台管理落实到人、教职员工信息技术培训正在逐步展开并得到落实；校园网是建构在多媒体技术和现代网络技术之上的为教学活动、科
3、研活动、管理活动服务的并与因特网连接的校园内的局域网络环境，是一种教育科研网络。建好校园网，构建现代化教育环境，是教育现代化的重要内容，进入二十一世纪，全球信息化、网络化的时代正在到来，以现代化的教育手段取代旧的、传统的落后教学手段，实现教育资源共享是时代的需要，用好校园网，是实现教育现代化的需要。本课题主要运用dreamweaver与photoshop整合的开发技术，实现了学校的信息、学校概况、教学科研、心理健康、校园新闻、家长中心、学生频道、注册、留言等功能。关键字：Dreamweaver，photoshop，校园网站AbstractWith the rapid development o
4、f network and in-depth reform of the education system, through the network of self-study and collected information has become necessary for everyone to do, especially in computer knowledge, quick to update their own knowledge of the characteristics of their own through the website learning is undoub
5、tedly the best option. Primary and secondary schools with school projects, the primary and secondary information in depth step-by-step process, information technology teacher professional step-by-step enrichment, the primary and secondary schools of the campus network platform is a welcome change oc
6、curred gradually, such as from scratch and implement the platform management people, information technology staff training and are gradually being implemented; campus network is based on modern network technology and multimedia technology for teaching and learning activities, research activities, ma
7、nagement activities and services connected to the Internet within the campus LAN environment It is a network of education and scientific research. Built campus network, build a modern educational environment is an important aspect of modern education into the twenty-first century, the global informa
8、tion network era is coming to the modernization of the means of education to replace the old, traditional means of teaching behind to achieve sharing of educational resources is the need of the times, make good use of the campus network, is to achieve the needs of modern education.The main subject o
9、f the use of dreamweaver and photoshop the development of integrated technologies, the realization of the schools information, school profiles, teaching and research, mental health, campus news, a parent center, students Channel, registration, messages and other functions.Keywords:Dreamweaver,photos
10、hop,school websites引 言在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道。Internet上发布信息主要是通过网站来实现的，因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位、教育部门信息化建设中的重要组成部分，从而倍受人们关注和重视。Internet是一个资源的网络，其中拥有的信息资源几乎覆盖所有的领域。Internet面向人类的社会，世界上数以亿计的人们利用它进行通信和信息共享，通过发送和接收电子邮件，或和其他人的计算机建立连接、参加各种讨论组并免费使用各种信息资源实现信息共享。现在网络技术已经成为现代信息技术
11、的主流，人们对网络的认识也随着网络应用的逐渐普及而迅速改变。在不久的将来，网络必将成为和电话一样通用的工具，成为人们生活、工作、学习中必不可少的一部分。 第一章 需求分析1.1 学校也需要建设网站学校创新性教学是实施素质教育的核心内涵。创新性的教学能激活、启动学生自主学习的动力系统,能培养学生的创新意识、创新思维、创新情感和创新能力。它能弘扬学生的主体意识,促进学生个性和谐发展。创新性教学体现了素质教育的本质和核心内涵,是实施素质教育的基本途径,并具有重要的推动作用。因此,借助网络这一现代化的教育技术来构建创新性教学的理论和实践模式,既是深化素质教育的迫切呼唤,也必将为提高我们全民族的素质作出
12、积极的贡献。目前，校园网的建设与应用被越来越多的中小学视为实现教学改革，提高教学质量以适应时代对人才培养需求的关键。中小学校园网络作为一种在中小学应用的局域网，有其特定含义和应用范畴，我们可以将校园网定义为：一种为学校学习活动、教学活动、科研活动和管理活动服务的校园内局域网络环境，并且它是建构在多媒体技术和现代网络技术之上并与因特网连接的。对于校园网建设来说，其应用是目的，网络环境是基础，网络教学资源是核心，而人员培训与网络维护是保障。通过本网站的设计与建设,能够实现计算机文化基础教育的初步功能。1.2 设计思想文山中学校园网建设的目的是为教育服务，立足于本教育为创新教育，素质教育服务。通过网
13、站的建设，宣传展示学校风采、优点与特色，发布学校的活动安排与招生政策等信息内容，使学生及家长增加对学校的了解，增强学生、家长与学校之间的联系，在Internet网上，让学生及家长及时得到学校发布的重要信息，同时也帮助了学校完成部分事务，提高办事效率,给学生、家长与学校最方便的联系桥梁。在这里学生及家长也可以提出意见及想法，互通教学之间的意见想法，更加有效的办好教学，和学生需要哪样的教学方式能够更好的吸收与接纳，这些都能成为学校的参考，以便更好的提高学校的教学质量。校园网的建设一方面，有利于及时了解校园的信息，有助于提高学校的科研教学水平；另一方面，校园网的建立及以其为基础的管理信息系统的开发，
14、也有利于学校管理水平的提高。1.3 开发工具的选用及介绍现在非常流行的 Macromedia公司出品的Dreamweaver studio 8提供了更多功能强劲的可视化设计工具、应用开发环境以及代码编辑支持，是开发人员和设计师能够快捷的创建代码规范的应用程序，集成程度非常高，开发环境精简而高效，开发人员能够运用Dreamweaver与他们的服务器技术构建功能强大的网络应用程序连接到用户的数据、网络服务体系。网页图形设计软件包括擅长平面图形设计的photoshop与擅长网络图形设计的firework软件。相比较而言，photoshop可以做出比较复杂的平面效果，但不适合于团队开发，故目前普及面不
15、是很广。Firework是最好的通用网页图片编辑器，同时具有位图和矢量图的编辑能力，可以结合位图效果丰富和矢量图容易编辑的优点，制作一些特殊效果简单，易生成网页效果模板，通过切片可导出生成网页。此次设计中采用photoshop编辑图片。网页动画设计软件flash。Flash网页动画设计软件可以制作网页互动动画，也可以将一个较大的互动动画制作为一个完整的网页，这是一个非常灵活的设计软件。由于利用Flash可以设计强大的动画效果，所以Flash动画已发展成为一种独特的艺术形式。至此Flash动画被广泛应用在网页设计中，从logo到网页横幅、按钮，甚至整个网页或网站，都可以用Flash动画来实现。为
16、利用Flash动画制作网页导航条的效果尤佳。我主要在网页设计中用了一个Flash来体现校园情况。第二章 网站总体分析与设计2.1网站系统分析根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：（1）学校风采 通过学校概括、教师风采、学生频道及部分图片等内容来展现。（2）优点特色 通过教育动态、家长中心、心理健康等栏目来展现。（3）信息发布 通过公告栏、校园新闻等栏目来实现，内容有校园动态、活动安排等。2.2 网站需求分析（1）提供Internet服务，通过与Internet的连接，可以培养教师和学生使用网络来获取学校资源信息，这对学生的培养更为重要。
17、（2）资源共享：统一管理学校内的各科目多媒体教学课件等教学和管理资料，使这些资源得到更为广泛的应用。 （3）校内电子邮件系统：通过网络进行信息交换，随时随地地取得学校各教研室、各有关部门的资料，增进学校内教师、学生以及各部门之间的沟通联系。（4）通过校园网络，可以使学生能及时了解国内外科技发展动态，促进教学、教研和科普工作的提高。（5）以校园网络为依托，建立各种课程的计算机辅助教学、多媒体教学课件演示。（6）为学校的管理现代化及通信现代化提供重要的支撑环境，包括硬件和软件两个方面。2.3 网站建设的总体规划及设计2.3.1确定网站建设的目的确定网站建设的目的，这是非常重要但又易于被人们忽略或轻
18、视的一项工作。与网站单位人员沟通就尤其重要了。对于网站设计来说，这种沟通不仅应了解该网站要运行什么应用程序，需要如何连接单位现有系统等，还需知道这个网站希望达到什么样的目的，即必须清楚网站的目标市场在那里。这将成为整个网站所有设计思想的基础。无论网站采用何种形式，什么样的外观，提供什么的内容 ，都要以网站的最终目的为出发点来考虑。另一方面，网站建设还应该收集客户对这个网站的美术需求。网站设计人员就需要了解建站单位形象的突出点和单位标志的特点、意义等。本网站的建设主要是为了全面宣传，展示学校风采、优点与特色，发布学校的活动安排与招生政策等信息内容，使学生及家长增加对学校的了解，增强学生、家长与学
19、校之间的联系，提高学校的教学质量，让学校信息及时散布。2.3.2确定客户群体确定网站的客户群体十分重要。只有清楚确认网站的客户群体、客户的需求、客户的兴趣，才可能在网站上提供客户所需要的内容和信息，留住目标客户群体，网站才能获得成功。校园网站的建设就是为了学生、家长和学校之间密切的沟通，让家长及时关注自己的孩子，因此家长、学生便是校园网的的客户群体只要能满足家长、学生的需求就证明网站是成功的。2.3.3细化目标，构架网站内容纲要确定目标市场和客户群体后，下一步工作目标将细化，构架网站内容纲要，主要包括网站核心内容、主要信息、服务项目等。然后，将网站内容建设的基本架构交给有关业务人员审核批准，形
20、成部门网站设计的总体报告。2.3.4整理网站结构图确定内容后，就可以勾画网站结构了。结构图有很多，顺序机构、网状结构等，应依据自己网站的内容反复讨论后确定。多数复杂的网站会综合应用到几种不同的结构图。画出结构图的目的，主要是便于有逻辑地组织网站和链接，同时，可以根据结构图去分配工作和任务。2.4 主页设计网站主页采用静态的方式，即静态的主画面和静态的图片相结合，体现学校的勃勃生气，静态主页方式介绍学校概况、校园新闻、心理健康、家长中心、学生频道等信息。主页结构图，如图2.1所示： 设为首页加入收藏学会logo本站首页学校概况校园新闻心理健康家长中心学生频道注册信息联系我们网站公告校园新闻知识就
21、是力量（图片）我们学校有新的网站了，请大家多来关注一下很有意思的建设中国特色社会主义到路坚持以人为本德育为先2010年春季运动会计划对中学生地方运动心理健康中学生心理健康的标青少年心理健康主要中学生心理健康的辅考试心理自我调节关注学生心理开展教育动态教育部国家语委发布现代汉语常用词表社会期待高、工作强度大、心理压力重清华大学党委书记调任教育部副部长大力开展职业教育国际合作专题栏目图片 教师关心的70个教育问题一起学习未成年人保护法2010年中考前线报道站内调查谈谈你对此网站的意见家长中心让亲子沟通无障碍英国教育家史宾塞的快乐教育明星妈妈的舔读之情专家教你如何培养聪明的孩子版权图2.1 校园网主
22、页设计图2.5 色彩搭配网页的色彩是树立网站形象的关键之一，网页的背景、文字、图标、边框、超链接等都要用到色彩。不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩，会更好的表现主题，吸引用户的注意力。所以文山中学的网页采用到了色彩涉及到艺术知识，在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。第三章 详细设计3.1 网站设计的流程3.1.1设项目的主要工作内容(1)对校园网站的设计进行需求分析。(2)收集整理需要的信息。(3)制定网站开发的方案。(4)对校园网站进行整体构架搭建。(5)制主网站的宣传。(6)全面负责单位3.1.2网站建设方式合作并发布单位所有主要网站建立的相对静态信息
23、。 (1)软件自动生成利用软件生成站点，具有功能强、效率高、费用低等优点，但存在使用不方便、站点模式有限、不能满足校园的实际情况等缺点。(2)传统建站方式初期投入成本低，纯粹做网页，网站技术成分低，后期维护困难，灵活性差。3.1.3网站建设项目的流程网站建设流程图如图3.1所示：不合格审核验收需求分析制定开发方案审核开发设计修改开发完毕整体测试格合发 布提交项目及源文件项目结束图3.1 网站建设流程图3.2 网站框架介绍文山中学网站是一个比较小型的中学网站,能够实现网络教育的初步功能。本课题主要运用dreamweaver与photoshop整合的开发技术，实现了学校的信息、学校概况、校园新闻、
24、家长中心、学生频道、注册、留言等功能。最终以实现既能使用户学到知识的同时,又提高用户的学习兴趣为目的。 3.3 各模块的设计(1)学校概况：对校园的简单介绍，展现校园风采。设计图如：图3.2 校园网心理健康模块设计图（2）校园新闻（3）家长中心：学校和家长的沟通，家庭教育应该注意的问题，让学生有良好的家庭教育。设计图如图3.3所示：图3.3 校园网家长中心模块设计图（4）学生频道：包括一些学习资源，再线测试自己。（5）注册信息：注册加入校园网站，方便资源的摄取。3.4 网站的测评3.4.1网页的测试 (1)浏览器兼容性测试。目前主要浏览器Internet Explorer ，只要能在这种浏览器
25、上浏览就可以了。一般我们做的网页测试不存在兼容性的问题，在通用的这种浏览器上一般情况下都能正常的浏览。(2)链接正确性的测试。用Dreamweaver 检查，本网页是静态网页，链接的只是浏览页面，图片等，所以在Dreamweaver 里指向链接属性仔细检查就可以了。3.4.2网站测评网站建成之后，为了避免出现不必要的错误，需要对其进行测评。测评的内容主要有以下几个方面。(1)链接有效性。静态网页只要确认每一个页面能正常浏览，保证信息不缺失就可以了。(2)网页语言正确性。检查网页中英文拼写与网页HTML语法书写是否正确。在静态网页中语言都是自动生成的所以语言的正确性一般情况下不会有太大的问题。(
26、3)网站便用性。检查网站整体结构是否清晰以及网站页面导航是否清晰。第四章 网页设计应注意的问题4.1网站的所有网页风格要统一在网页设计过程中主页面的设计与子页面的设计风格应该统一，采用一致的主色调，布局的风格基本统一。4.2网站导航问题(1)每一页面都应该有一个导航条，让访客清楚自己访问的页面所在的位置。(2)每一个页面都应该有一个导航块，让访客能随时切换到其它板块中，可以随时访问其它的页面。4.3网页布局问题(1)合理留出页面空白，不能将页面塞得太满。整个页面不能全部为内容，应该合理的留出空间。(2)插入图形不能删除它的width和height属性，不然做出的页面看起来很凌乱。(3)对于表格
27、、最好用绝对定位的方式即以像素为单位，这样可避免屏幕分辨率对网页内容显示的影响。屏幕的分辨率一般做网页时为1024*768。(4)每幅页面中使用的颜色不要太多，彼此协调。一般而言，控制在三种以内，如实在需要可通过调整透明度或饱和度来产生新的颜色。(5)页面中的字体尽量使用标准字体，字号适中，大多为12号字体。4.4首页设计问题首页是网页设计中的重中之重，直接影响到用户对网站的整个印象。除了要注意一般网页设计中要注意的问题，还要特别注意(1)首页相当于一张大的导航图，可以根据首页中反映的信息，使访问的人易于找到他感兴趣的内容。(2)首页应能时刻显示最新信息，吸引访问者浏览。可以通过增加更新链接、或在主页中开辟一片区域显示更新内容。不过我做的是静态网页，更新信息很不容易，所以在设计中需留有更新信息的空间。第五章 主页设计与实现5.1主页设计由于是校园网的设计所以版面不应该和个人主页那样随意，我做的网页主要是静态的，因此一些信息只能通过图片和文字来反应，用简单的文字链接页面进行信息的浏览，以图片的形式反映教育状况页面比较简洁。5.2 主页的实现主页设计代码如下：无标题文档 设为首页加入收藏 td width=7
