中学网站设计与实现毕业设计(论文).doc

西南科技大学网络教育 毕业设计（论文） 题题目名称：目名称： 文山中学网站文山中学网站设计设计与与实现实现 年年 级级： ： 层层次：次： 本科本科 专专科科 学生学号：学生学号： 指指导导教教师师： ： 学生姓名：学生姓名： 技技术职术职称：称： 学生学生专业专业： ： 学学习习中心名称：中心名称： 西南科技大学网西南科技大学网络络教育学院制教育学院制 毕业设计（论文） 任 务 书 题目名称 文山中学网站设计与实现 题目性质 真实题目 虚拟题目 学生学号 指导教师 , 学生姓名 , 专业名称 技术职称 , 学生层次 学习中心名称 , 年 月 日 毕业设计（论文）内容与要求： 毕业设计领导小组负责人： （签字） 年 月 日 毕业设计（论文） 成绩考核表 总成绩 过程评分评阅成绩答辩成绩 百分制等级制 1、指导教师评语 建议成绩 指导教师签字： 年 月 日 2、论文评阅教师评语 建议成绩 评阅教师签字： 年 月 日 3、毕业答辩专家组评语 建议成绩 答辩组长签字： 年 月 日 4、毕业设计领导小组推优评语 组长签字： 年 月 日 摘摘 要要 随着网络的高速发展,及教育体制改革的深入,通过网络自主学习与搜集信息,已 经成为每个人所必须做的事情，特别是计算机知识,因其自身知识更新快的特点,通过 网站进行自主学习无疑是最佳的选择。随着中学校校园工程的展开，中学信息化进程 的逐步深入，专业信息技术老师的逐步充实，各中学的校园网平台正在逐步发生可喜 的变化，如从无到有、平台管理落实到人、教职员工信息技术培训正在逐步展开并得 到落实；校园网是建构在多媒体技术和现代网络技术之上的为教学活动、科研活动、 管理活动服务的并与因特网连接的校园内的局域网络环境，是一种教育科研网络。建 好校园网，构建现代化教育环境，是教育现代化的重要内容，进入二十一世纪，全球 信息化、网络化的时代正在到来，以现代化的教育手段取代旧的、传统的落后教学手 段，实现教育资源共享是时代的需要，用好校园网，是实现教育现代化的需要。 本课题主要运用 dreamweaver 与 photoshop 整合的开发技术，实现了学校的信息、 学校概况、教学科研、心理健康、校园新闻、家长中心、学生频道、注册、留言等功 能。 关键字：关键字：Dreamweaver，photoshop，校园网站 AbstractAbstract With the rapid development of 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 undoubtedly 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 occurred 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, management 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 information 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 of 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. KeywordsKeywords:Dreamweaver,photoshop,school websites 目目 录录 引 言1 第一章 需求分析2 1.1 学校也需要建设网站 2 1.2 设计思想 2 1.3 开发工具的选用及介绍 2 第二章 网站总体分析与设计4 2.1 网站系统分析 4 2.2 网站需求分析 4 2.3 网站建设的总体规划及设计 4 2.4 主页设计 5 2.5 色彩搭配 6 第三章 详细设计.7 3.1 网站设计的流程 7 3.2 网站框架介绍 8 3.3 各模块的设计 8 3.4 网站的测评 9 第四章 网页设计应注意的问题10 第五章 主页设计与实现11 5.1 主页设计 .11 5.2 主页的实现 .11 结论.18 致谢.19 参考文献.20 - 1 - 引引 言言 在 Internet 飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要 渠道。Internet 上发布信息主要是通过网站来实现的，因此网站建设在 Internet 应用 上的地位显而易见，它已成为政府、企事业单位、教育部门信息化建设中的重要组成 部分，从而倍受人们关注和重视。 Internet 是一个资源的网络，其中拥有的信息资源几乎覆盖所有的领域。 Internet 面向人类的社会，世界上数以亿计的人们利用它进行通信和信息共享，通过 发送和接收电子邮件，或和其他人的计算机建立连接、参加各种讨论组并免费使用各 种信息资源实现信息共享。 现在网络技术已经成为现代信息技术的主流，人们对网络的认识也随着网络应用 的逐渐普及而迅速改变。在不久的将来，网络必将成为和电话一样通用的工具，成为 人们生活、工作、学习中必不可少的一部分。 - 1 - 第一章第一章 需求分析需求分析 1.11.1 学校也需要建设网站学校也需要建设网站 学校创新性教学是实施素质教育的核心内涵。创新性的教学能激活、启动学生自 主学习的动力系统,能培养学生的创新意识、创新思维、创新情感和创新能力。它能弘 扬学生的主体意识,促进学生个性和谐发展。创新性教学体现了素质教育的本质和核心 内涵,是实施素质教育的基本途径,并具有重要的推动作用。因此,借助网络这一现代化 的教育技术来构建创新性教学的理论和实践模式,既是深化素质教育的迫切呼唤,也必 将为提高我们全民族的素质作出积极的贡献。 目前，校园网的建设与应用被越来越多的中小学视为实现教学改革，提高教学质 量以适应时代对人才培养需求的关键。中小学校园网络作为一种在中小学应用的局域 网，有其特定含义和应用范畴，我们可以将校园网定义为：一种为学校学习活动、教 学活动、科研活动和管理活动服务的校园内局域网络环境，并且它是建构在多媒体技 术和现代网络技术之上并与因特网连接的。对于校园网建设来说，其应用是目的，网 络环境是基础，网络教学资源是核心，而人员培训与网络维护是保障。 通过本网站的设计与建设,能够实现计算机文化基础教育的初步功能。 1.21.2 设计思想设计思想 文山中学校园网建设的目的是为教育服务，立足于本教育为创新教育，素质教育 服务。通过网站的建设，宣传展示学校风采、优点与特色，发布学校的活动安排与招 生政策等信息内容，使学生及家长增加对学校的了解，增强学生、家长与学校之间的 联系，在 Internet 网上，让学生及家长及时得到学校发布的重要信息，同时也帮助了 学校完成部分事务，提高办事效率,给学生、家长与学校最方便的联系桥梁。在这里学 生及家长也可以提出意见及想法，互通教学之间的意见想法，更加有效的办好教学， 和学生需要哪样的教学方式能够更好的吸收与接纳，这些都能成为学校的参考，以便 更好的提高学校的教学质量。校园网的建设一方面，有利于及时了解校园的信息，有 助于提高学校的科研教学水平；另一方面，校园网的建立及以其为基础的管理信息系 统的开发，也有利于学校管理水平的提高。 1.31.3 开发工具的选用及介绍开发工具的选用及介绍 现在非常流行的 Macromedia 公司出品的 Dreamweaver studio 8 提供了更多功能 强劲的可视化设计工具、应用开发环境以及代码编辑支持，是开发人员和设计师能够 快捷的创建代码规范的应用程序，集成程度非常高，开发环境精简而高效，开发人员 能够运用 Dreamweaver 与他们的服务器技术构建功能强大的网络应用程序连接到用户 的数据、网络服务体系。 网页图形设计软件包括擅长平面图形设计的 photoshop 与擅长网络图形设计的 firework 软件。相比较而言，photoshop 可以做出比较复杂的平面效果，但不适合于 团队开发，故目前普及面不是很广。Firework 是最好的通用网页图片编辑器，同时具 有位图和矢量图的编辑能力，可以结合位图效果丰富和矢量图容易编辑的优点，制作 一些特殊效果简单，易生成网页效果模板，通过切片可导出生成网页。此次设计中采 用 photoshop 编辑图片。 网页动画设计软件 flash。Flash 网页动画设计软件可以制作网页互动动画，也可 以将一个较大的互动动画制作为一个完整的网页，这是一个非常灵活的设计软件。由 于利用 Flash 可以设计强大的动画效果，所以 Flash 动画已发展成为一种独特的艺术 - 2 - 形式。至此 Flash 动画被广泛应用在网页设计中，从 logo 到网页横幅、按钮，甚至整 个网页或网站，都可以用 Flash 动画来实现。为利用 Flash 动画制作网页导航条的效 果尤佳。我主要在网页设计中用了一个 Flash 来体现校园情况。 - 3 - 第二章第二章 网站总体分析与设计网站总体分析与设计 2.12.1 网站系统分析网站系统分析 根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内 容上可对网站作如下划分： （1）学校风采 通过学校概括、教师风采、学生频道及部分图片等内容来展现。 （2）优点特色 通过教育动态、家长中心、心理健康等栏目来展现。 （3）信息发布 通过公告栏、校园新闻等栏目来实现，内容有校园动态、活动安排 等。 2.22.2 网站需求分析网站需求分析 （1）提供 Internet 服务，通过与 Internet 的连接，可以培养教师和学生使用网络来 获取学校资源信息，这对学生的培养更为重要。 （2）资源共享：统一管理学校内的各科目多媒体教学课件等教学和管理资料，使 这些资源得到更为广泛的应用。 （3）校内电子邮件系统：通过网络进行信息交换，随时随地地取得学校各教研室、 各有关部门的资料，增进学校内教师、学生以及各部门之间的沟通联系。 （4）通过校园网络，可以使学生能及时了解国内外科技发展动态，促进教学、教 研和科普工作的提高。 （5）以校园网络为依托，建立各种课程的计算机辅助教学、多媒体教学课件演示。 （6）为学校的管理现代化及通信现代化提供重要的支撑环境，包括硬件和软件两 个方面。 2.32.3 网站建设的总体规划及设计网站建设的总体规划及设计 .1 1 确定网站建设的目的确定网站建设的目的 确定网站建设的目的，这是非常重要但又易于被人们忽略或轻视的一项工作。与 网站单位人员沟通就尤其重要了。 对于网站设计来说，这种沟通不仅应了解该网站要运行什么应用程序，需要如何 连接单位现有系统等，还需知道这个网站希望达到什么样的目的，即必须清楚网站的 目标市场在那里。这将成为整个网站所有设计思想的基础。无论网站采用何种形式， 什么样的外观，提供什么的内容 ，都要以网站的最终目的为出发点来考虑。 另一方面，网站建设还应该收集客户对这个网站的美术需求。网站设计人员就需 要了解建站单位形象的突出点和单位标志的特点、意义等。 本网站的建设主要是为了全面宣传，展示学校风采、优点与特色，发布学校的活 动安排与招生政策等信息内容，使学生及家长增加对学校的了解，增强学生、家长与 学校之间的联系，提高学校的教学质量，让学校信息及时散布。 .2 2 确定客户群体确定客户群体 确定网站的客户群体十分重要。只有清楚确认网站的客户群体、客户的需求、客 户的兴趣，才可能在网站上提供客户所需要的内容和信息，留住目标客户群体，网站 才能获得成功。校园网站的建设就是为了学生、家长和学校之间密切的沟通，让家长 及时关注自己的孩子，因此家长、学生便是校园网的的客户群体只要能满足家长、学 生的需求就证明网站是成功的。 - 4 - .3 3 细化目标，构架网站内容纲要细化目标，构架网站内容纲要 确定目标市场和客户群体后，下一步工作目标将细化，构架网站内容纲要，主要 包括网站核心内容、主要信息、服务项目等。然后，将网站内容建设的基本架构交给 有关业务人员审核批准，形成部门网站设计的总体报告。 .4 4 整理网站结构图整理网站结构图 确定内容后，就可以勾画网站结构了。结构图有很多，顺序机构、网状结构等， 应依据自己网站的内容反复讨论后确定。多数复杂的网站会综合应用到几种不同的结 构图。画出结构图的目的，主要是便于有逻辑地组织网站和链接，同时，可以根据结 构图去分配工作和任务。 2.42.4 主页设计主页设计 网站主页采用静态的方式，即静态的主画面和静态的图片相结合，体现学校的勃 勃生气，静态主页方式介绍学校概况、校园新闻、心理健康、家长中心、学生频道等 信息。 主页结构图，如图 2.1 所示： 设为首页加入收藏 学会 logo 本站首页学校概况校园新闻心理健康家长中心学生频道注册信息联系我们 网站公告校园新闻知识就是力量（图片） 心理健康 建设中国特色社会主义到路 坚持以人为本德育为先 2010 年春季运动会计划 对中学生地方运动 教育动态 我们学校有新的网 站了，请大家多来关注 一下很有意思的 专题栏目 中学生心理健康的标 青少年心理健康主要 中学生心理健康的辅 考试心理自我调节 关注学生心理开展 站内调查 教育部国家语委发布现代汉语常用词表 社会期待高、工作强度大、心理压力重 清华大学党委书记调任教育部副部长 大力开展职业教育国际合作 家长中心 图片 教师关心的 70 个教育 问题 一起学习未成年人保护 法 2010 年中考前线报道 让亲子沟通无障碍 英国教育家史宾塞的快乐教育 明星妈妈的舔读之情 专家教你如何培养聪明的孩子 谈谈你对此网站的意见 版权 图图 2.12.1 校园网主页设计图校园网主页设计图 - 5 - 2.52.5 色彩搭配色彩搭配 网页的色彩是树立网站形象的关键之一，网页的背景、文字、图标、边框、超链 接等都要用到色彩。不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩，会 更好的表现主题，吸引用户的注意力。所以文山中学的网页采用到了色彩涉及到艺术 知识，在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。 - 1 - 第三章第三章 详细设计详细设计 3.13.1 网站设计的流程网站设计的流程 .1 1 设项目的主要工作内容设项目的主要工作内容 (1)对校园网站的设计进行需求分析。 (2)收集整理需要的信息。 (3)制定网站开发的方案。 (4)对校园网站进行整体构架搭建。 (5)制主网站的宣传。 (6)全面负责单位 .2 2 网站建设方式网站建设方式 合作并发布单位所有主要网站建立的相对静态信息。 (1)软件自动生成 利用软件生成站点，具有功能强、效率高、费用低等优点，但存在使用不方便、 站点模式有限、不能满足校园的实际情况等缺点。 (2)传统建站方式 初期投入成本低，纯粹做网页，网站技术成分低，后期维护困难，灵活性差。 .3 3 网站建设项目的流程网站建设项目的流程 网站建设流程图如图 3.1 所示： - 2 - 不合格 审核验收 需求分析制定开发 方案 审核 开发设计 修改 开发完毕 整体测试 格合 发 布 提交项目 及源文件 项目结束 图图 3.13.1 网站建设流程图网站建设流程图 3.23.2 网站框架介绍网站框架介绍 文山中学网站是一个比较小型的中学网站,能够实现网络教育的初步功能。本课题 主要运用 dreamweaver 与 photoshop 整合的开发技术，实现了学校的信息、学校概况、 校园新闻、家长中心、学生频道、注册、留言等功能。最终以实现既能使用户学到知 识的同时,又提高用户的学习兴趣为目的。 3.33.3 各模块的设计各模块的设计 (1)学校概况：对校园的简单介绍，展现校园风采。设计图如： - 3 - 图图 3.23.2 校园网心理健康模块设计图校园网心理健康模块设计图 （2）校园新闻 （3）家长中心：学校和家长的沟通，家庭教育应该注意的问题，让学生有良好的 家庭教育。设计图如图 3.3 所示： - 4 - 图图 3.33.3 校园网家长中心模块设计图校园网家长中心模块设计图 （4）学生频道：包括一些学习资源，再线测试自己。 （5）注册信息：注册加入校园网站，方便资源的摄取。 3.43.4 网站的测评网站的测评 .1 1 网页的测试网页的测试 (1)浏览器兼容性测试。目前主要浏览器 Internet Explorer ，只要能在这种浏览 器上浏览就可以了。一般我们做的网页测试不存在兼容性的问题，在通用的这种浏览 器上一般情况下都能正常的浏览。 (2)链接正确性的测试。用 Dreamweaver 检查，本网页是静态网页，链接的只是浏 览页面，图片等，所以在 Dreamweaver 里指向链接属性仔细检查就可以了。 .2 2 网站测评网站测评 网站建成之后，为了避免出现不必要的错误，需要对其进行测评。测评的内容主 要有以下几个方面。 (1)链接有效性。静态网页只要确认每一个页面能正常浏览，保证信息不缺失就可 以了。 (2)网页语言正确性。检查网页中英文拼写与网页 HTML 语法书写是否正确。在静 态网页中语言都是自动生成的所以语言的正确性一般情况下不会有太大的问题。 (3)网站便用性。检查网站整体结构是否清晰以及网站页面导航是否清晰。 - 5 - 第四章第四章 网页设计应注意的问题网页设计应注意的问题 4.4.1 1 网站的所有网页风格要统一网站的所有网页风格要统一 在网页设计过程中主页面的设计与子页面的设计风格应该统一，采用一致的主色 调，布局的风格基本统一。 4.24.2 网站导航问题网站导航问题 (1)每一页面都应该有一个导航条，让访客清楚自己访问的页面所在的位置。 (2)每一个页面都应该有一个导航块，让访客能随时切换到其它板块中，可以随时 访问其它的页面。 4.4.3 3 网页布局问题网页布局问题 (1)合理留出页面空白，不能将页面塞得太满。整个页面不能全部为内容，应该合 理的留出空间。 (2)插入图形不能删除它的 width 和 height 属性，不然做出的页面看起来很凌乱。 (3)对于表格、最好用绝对定位的方式即以像素为单位，这样可避免屏幕分辨率对 网页内容显示的影响。屏幕的分辨率一般做网页时为 1024*768。 (4)每幅页面中使用的颜色不要太多，彼此协调。一般而言，控制在三种以内，如 实在需要可通过调整透明度或饱和度来产生新的颜色。 (5)页面中的字体尽量使用标准字体，字号适中，大多为 12 号字体。 4.4.4 4 首页设计问题首页设计问题 首页是网页设计中的重中之重，直接影响到用户对网站的整个印象。除了要注意 一般网页设计中要注意的问题，还要特别注意 (1)首页相当于一张大的导航图，可以根据首页中反映的信息，使访问的人易于找 到他感兴趣的内容。 (2)首页应能时刻显示最新信息，吸引访问者浏览。可以通过增加更新链接、或在 主页中开辟一片区域显示更新内容。不过我做的是静态网页，更新信息很不容易，所 以在设计中需留有更新信息的空间。 - 1 - 第五章第五章 主页设计与实现主页设计与实现 5.15.1 主页设计主页设计 由于是校园网的设计所以版面不应该和个人主页那样随意，我做的网页主要是静 态的，因此一些信息只能通过图片和文字来反应，用简单的文字链接页面进行信息的 浏览，以图片的形式反映教育状况页面比较简洁。 5.25.2 主页的实现主页的实现 主页设计代码如下： 无标题文档 设为首页加入收藏 本站首页 | 学校概况 | 校园新闻 | 心理健康 | 家长中心 | 学生频道 | 注册信息 | 联系我们 - 3 - 网站公告 我们学校有新的网站了，请 大家多来关注一下很有意思的。 专题 栏目 教师关 心的 70 个教 育问题 中小学教育网暑期特刊 一起学习未成年人保护法 2010 年中考前线报道 校园新闻 延中国特色社会主义道路 坚持以人为本德 育为先 学习胡锦涛总书 记回信精神 2009 年春季运动 会计划 甘肃省人民政府 督导团 在法定的时间内 从事教育活动 德 育处与班主任签订班主任目标协议书 对中学生的 运动 教育动态 - 5 - 教育部国家语委发布现代汉语常用词表 社会期待高、工作强 度大、心理压力重 清华大学党委书记调 任教育部副部长 做好一个校长的成功 秘笈 大力开展职业教育国 际合作 动物简笔画丰富孩子 的想象力 探讨大 学创业教育发展之路 体育成绩中考长分是 解救还是负担 家长中心 撒切尔夫人的“一面镜子” 让亲子沟通无障 碍 英国教育 家史宾塞的快乐教育 明星妈妈 的舔读