毕业论文设计
甘肃工业职业技术学院毕业设计
中小学网站建设
院系：信息工程系
专业：计算机应用技术
指导教师：刘冬晖
班级：计算机0631班
姓名：刘秀芳
2009年5月15日
摘要
随着网络的高速发展,及教育体制改革的深入,通过网络自主学习与搜集信息,已经成为每个人所必须做的事情，特别是计算机知识,因其自身知识更新快的特点,通过网站进行自主学习无疑是最佳的选择。随着中小学校校园工程的展开，中小学信息化进程的逐步深入，专业信息技术老师的逐步充实，各中小学的校园网平台正在逐步发生可喜的变化，如从无到有、平台管理落实到人、教职员工信息技术培训正在逐步展开并得到落实；校园网是建构在多媒体技术和现代网络技术之上的为教学活动、科研活动、管理活动服务的并与因特网连接的校园内的局域网络环境，是一种教育科研网络。建好校园网，构建现代化教育环境，是教育现代化的重要内容，进入二十一世纪，全球信息化、网络化的时代正在到来，以现代化的教育手段取代旧的、传统的落后教学手段，实现教育资源共享是时代的需要，用好校园网，是实现教育现代化的需要。
本课题主要运用dreamweaver与photoshop整合的开发技术，实现了学校的信息、学校概况、教学科研、心理健康、校园新闻、家长中心、学生频道、注册、留言等功能。
关键字：Dreamweaver，photoshop，校园网站
Abstract
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 school's information, school profiles, teaching and research, mental health, campus news, a parent center, students Channel, registration, messages and other functions.
Keywords:Dreamweaver,photoshop,school websites
目录
第1章绪论 (1)
1.1 设计思想 (1)
1.2 课题来源与背景 (1)
1.3 开发工具的选用及介绍 (2)
第2章网站总体分析与设计 (3)
2.1 网站系统分析 (3)
2.2 网站需求分析 (3)
2.3 网站建设的总体规划及设计 (3)
2.4 主页设计 (5)
2.5 色彩搭配 (6)
第3章详细设计 (8)
3.1 网站设计的流程 (8)
3.2 网站框架介绍 (9)
3.3 各模块的设计 (9)
3.4 网站的测评 (13)
第4章网页设计应注意的问题 (14)
第5章主页设计与实现 (15)
5.1 主页的设计 (15)
5.2 主页的实现 (15)
第6章总结 (23)
致谢 (24)
参考文献 (25)
第1章绪论
1．1 设计思想
校园网建设的目的是为教育服务，立足于本教育为创新教育，素质教育服务。通过网站的建设，宣传展示学校风采、优点与特色，发布学校的活动安排与招生政策等信息内容，使学生及家长增加对学校的了解，增强学生、家长与学校之间的联系，在Internet网上，让学生及家长及时得到学校发布的重要信息，同时也帮助了学校完成部分事务，提高办事效率,给学生、家长与学校最方便的联系桥梁。在这里学生及家长也可以提出意见及想法，互通教学之间的意见想法，更加有效的办好教学，和学生需要哪样的教学方式能够更好的吸收与接纳，这些都能成为学校的参考，以便更好的提高学校的教学质量。校园网的建设一方面，有利于及时了解校园的信息，有助于提高学校的科研教学水平；另一方面，校园网的建立及以其为基础的管理信息系统的开发，也有利于学校管理水平的提高。
1．2 课题来源及时代背景
网络背景下的创新性教学研究是当今世界课程改革的一种潮流,也是素质教育进一步深化的客观要求。网络教学一向被视为有效突破时空限制的教学通道。近年来,随着信息技术的蓬勃发展,世界发达国家正如火如荼地致力于Internet在学校教育、社区教育、社会教育及在职训练的应用与研究等,由于利用网络媒体进行网络教学与传统媒体有极大的差异,因此许多研究单位在网络教学方面投入相当多的时间与精力,试着设计一套能够符合网络媒体特性,并能提升教学成果的教学系统。然而,目前这种基于数字化、交互式、个别化、多媒体的现代远程教育平台的新型教学模式,其理论与实践都不够丰富。
创新性教学是实施素质教育的核心内涵。创新性的教学能激活、启动学生自主学习的动力系统,能培养学生的创新意识、创新思维、创新情感和创新能力。它能弘扬学生的主体意识,促进学生个性和谐发展。创新性教学体现了素质教育的本质和核心内涵,是实施素质教育的基本途径,并具有重要的推动作用。因此,借助网络这一现代化的教育技术来构建创新性教学的理论和实践模式,既是深化素质教育的迫切呼唤,也必将为提高我们全民族的素质作出积极的贡献。
目前，校园网的建设与应用被越来越多的中小学视为实现教学改革，提高教学质量以适应时代对人才培养需求的关键。中小学校园网络作为一种在中小学应用的局域网，有其特定含义和应用范畴，我们可以将校园网定义为：一种为学校学习活动、教学活动、科研活动和管理活动服务的校园内局域网络环境，并且它是建构在多媒体技术和现代网络技术之上并与因特网连接的。对于校园网建设来说，其应用是目的，网络环境是基础，网络教学资源是核心，而人员培训与网络维护是保障。
通过本网站的设计与建设,能够实现计算机文化基础教育的初步功能, 本网站主要运用dreamweaver与photoshop整合的开发技术，实现了学校信息资源的共享。
1．3 开发工具的选用及介绍
现在非常流行的Macromedia公司出品的Dreamweaver studio 8提供了更多功能强劲的可视化设计工具、应用开发环境以及代码编辑支持，是开发人员和设计师能够快捷的创建代码规范的应用程序，集成程度非常高，开发环境精简而高效，开发人员能够运用Dreamweaver与他们的服务器技术构建功能强大的网络应用程序连接到用户的数据、网络服务体系。
网页图形设计软件包括擅长平面图形设计的photoshop与擅长网络图形设计的firework软件。相比较而言，photoshop可以做出比较复杂的平面效果，但不适合于团队开发，故目前普及面不是很广。Firework是最好的通用网页图片编辑器，同时具有位图和矢量图的编辑能力，可以结合位图效果丰富和矢量图容易编辑的优点，制作一些特殊效果简单，易生成网页效果模板，通过切片可导出生成网页。此次设计中采用photoshop编辑图片。
网页动画设计软件flash。Flash网页动画设计软件可以制作网页互动动画，也可以将一个较大的互动动画制作为一个完整的网页，这是一个非常灵活的设计软件。由于利用Flash可以设计强大的动画效果，所以Flash动画已发展成为一种独特的艺术形式。至此Flash动画被广泛应用在网页设计中，从logo到网页横幅、按钮，甚至整个网页或网站，都可以用Flash动画来实现。为利用Flash动画制作网页导航条的效果尤佳。我主要在网页设计中用了一个Flash来体现校园情况。
第2章网站总体分析与设计
2.1 网站系统分析
根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：
1、学校风采通过学校概括、教师风采、学生频道及部分图片等内容来展现。
2、优点特色通过教育动态、家长中心、心理健康等栏目来展现。
3、信息发布通过公告栏、校园新闻等栏目来实现，内容有校园动态、活动安排等。
2.2 网站需求分析
1、提供Internet服务，通过与Internet的连接，可以培养教师和学生使用网络来获取学校资源信息，这对学生的培养更为重要。
2、资源共享：统一管理学校内的各科目多媒体教学课件等教学和管理资料，使这些资源得到更为广泛的应用。
3、校内电子邮件系统：通过网络进行信息交换，随时随地地取得学校各教研室、各有关部门的资料，增进学校内教师、学生以及各部门之间的沟通联系。
4、通过校园网络，可以使学生能及时了解国内外科技发展动态，促进教学、教研和科普工作的提高。
5、以校园网络为依托，建立各种课程的计算机辅助教学、多媒体教学课件演示。
6、为学校的管理现代化及通信现代化提供重要的支撑环境，包括硬件和软件两个方面。
2.3 网站建设的总体规划及设计
1、确定网站建设的目的
确定网站建设的目的，这是非常重要但又易于被人们忽略或轻视的一项工作。与网站单位人员沟通就尤其重要了。
对于网站设计来说，这种沟通不仅应了解该网站要运行什么应用程序，需要如何连接单位现有系统等，还需知道这个网站希望达到什么样的目的，即必
须清楚网站的目标市场在那里。这将成为整个网站所有设计思想的基础。无论网站采用何种形式，什么样的外观，提供什么的内容，都要以网站的最终目的为出发点来考虑。
另一方面，网站建设还应该收集客户对这个网站的美术需求。网站设计人员就需要了解建站单位形象的突出点和单位标志的特点、意义等。
本网站的建设主要是为了全面宣传，展示学校风采、优点与特色，发布学校的活动安排与招生政策等信息内容，使学生及家长增加对学校的了解，增强学生、家长与学校之间的联系，提高学校的教学质量，让学校信息及时散布。
2、确定客户群体
确定网站的客户群体十分重要。只有清楚确认网站的客户群体、客户的需求、客户的兴趣，才可能在网站上提供客户所需要的内容和信息，留住目标客户群体，网站才能获得成功。校园网站的建设就是为了学生、家长和学校之间密切的沟通，让家长及时关注自己的孩子，因此家长、学生便是校园网的的客户群体只要能满足家长、学生的需求就证明网站是成功的。
3、细化目标，构架网站内容纲要
确定目标市场和客户群体后，下一步工作目标将细化，构架网站内容纲要，主要包括网站核心内容、主要信息、服务项目等。然后，将网站内容建设的基本架构交给有关业务人员审核批准，形成部门网站设计的总体报告。
4、整理网站结构图
确定内容后，就可以勾画网站结构了。结构图有很多，顺序机构、网状结构等，应依据自己网站的内容反复讨论后确定。多数复杂的网站会综合应用到几种不同的结构图。画出结构图的目的，主要是便于有逻辑地组织网站和链接，同时，可以根据结构图去分配工作和任务。
5、美工
有美术设计人员的帮助，对网站建设的成功也是至关重要的。他们能给你很多关于排版，色彩等方面的建议。
网页设计与其他出版设计最大的不同点在以下3个方面。
(1)、传播的媒介不同。许多用户是用MODEM上网的，图形一般不宜太大；通常每个图应小于30KB，每个页面图形总量应小于50KB。
(2)、最终的发布媒体不同。多数用户是通过Windows上网的，而且当前通用的分辨率是低于800~600，因此，美工人员的发挥天地的14~15英寸显示器所能展示的区域。
(3)、所能采用的文件格式的限制。对通用浏览器来说，能识别的图像格式仅为JPG和GIF，两者又各有不同的特点和适用环境。我选择了两种格式的图片。
6、个性化服务
对于任何一个成功的网站来讲，资料收集都是至关重要的环节。有关访问者和顾客行为的资料是分析投资收益的基础。顾客的经验同时也会随着资料的增加而增加。随着时间的推移，收集的资料不断增加，同时与网上业务相互影响也在不断提高。这个过程促使不断提高为网民提供的价值，并且优化同每个顾客关系的收益。由于这个过程是渐进的，因此有时被称为渐进的个性化服务。
制定资料收集计划时，不一定马上就开始采用技术手段。应该先从明确目标入手，在收集到的信息的基础上，确定网上业务服务特定客户的策略。一旦策略适当，就能确定需要什么样的技术达到确定的目标。
2.4 主页设计
网站主页采用静态的方式，即静态的主画面和静态的图片相结合，体现学校的勃勃生气，静态主页方式介绍学校概况、校园新闻、心理健康、家长中心、学生频道等信息。
主页结构图
2.5 色彩搭配
网页的色彩是树立网站形象的关键之一，网页的背景、文字、图标、边框、超链接等都要用到色彩。不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩，会更好的表现主题，吸引用户的注意力。网页色彩涉及到艺术知识，让美术教师参加网页色彩设计，可能会出现比较理想的效果。在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。背景色和前景色对比要大，以突出主要内容
设计网站色彩。网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。给人以整体
统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。
第3章详细设计
3.1 网站设计的流程
1、设项目的主要工作内容
(1)、对校园网站的设计进行需求分析。
(2)、收集整理需要的信息。
(3)、制定网站开发的方案。
(4)、对校园网站进行整体构架搭建。
(5)、制作并发布单位所有主要网站建立的相对静态信息。
(6)、全面负责单位主网站的宣传。
2、网站建设方式
(1)、软件自动生成
利用软件生成站点，具有功能强、效率高、费用低等优点，但存在使用不方便、站点模式有限、不能满足校园的实际情况等缺点。
(2)、传统建站方式
初期投入成本低，纯粹做网页，网站技术成分低，后期维护困难，灵活性差。
3、网站建设项目的流程
附网站建设流程图如下图
如图3-1 网站建设流程图
3.2 网站框架介绍
本网站是一个比较小型的中小学网站,能够实现网络教育的初步功能。本课题主要运用dreamweaver与photosho p整合的开发技术，实现了学校的信息、学校概况、教学科研、心理健康、校园新闻、家长中心、学生频道、注册、留言等功能。最终以实现既能使用户学到知识的同时,又提高用户的学习兴趣为目的。
3.3 各模块的设计
1、学校概况：对校园的简单介绍，展现校园风采。设计图如：
如图3-2 校园网学校概况模块设计图2、校园新闻：办公平台所用的资料库。设计图如：
如图3-3 校园网校园新闻模块设计图
3、心理健康：包括生所存在的心理问题、心理问题的标准、心理辅导等栏目。设计图如：
如图3-4 校园网心理健康模块设计图
4、家长中心：学校和家长的沟通，家庭教育应该注意的问题，如何做一名对子女负责人的家长，让学生有良好的家庭教育。设计图如：
如图3-5 校园网家长中心模块设计图
5、学生频道：包括一些学习资源，再线测试自己。
6、注册信息：注册加入校园网站，方便资源的摄取。
7、联系我们：以邮件的方式联系，有利于信息的沟通，信息不易丢失。
8、专题栏目：学生和老师共享的平台。
3.4 网站的测评
1、网页的测试
当你的主页编制成功后，要以一个读者的身份，利用浏览器测试文档资料的正确性和可用性。
(1)、浏览器兼容性测试。目前主要浏览器Internet Explorer，只要能在这种浏览器上浏览就可以了。一般我们做的网页测试不存在兼容性的问题，在通用的这种浏览器上一般情况下都能正常的浏览。
(2)、链接正确性的测试。我们做的网页一般都用Dreamweaver 检查，我们做的静态网页链接的只是浏览页面，图片等，所以在Dreamweaver里指向链接属性仔细检查就可以了。在浏览器测试中页面都能正常浏览，就是注册信息、学生频道、联系我们等栏目的功能不能充分实现，只能是简单的页面浏览。2．网站测评
网站建成之后，为了避免出现不必要的错误，需要对其进行测评。测评的内容主要有以下几个方面。
(1)、链接有效性。静态网页只要确认每一个页面能正常浏览，保证信息不缺失就可以了。
(2)、网页语言正确性。检查网页中英文拼写与网页HTML语法书写是否正确。在静态网页中语言都是自动生成的所以语言的正确性一般情况下不会有太大的问题。
(3)、网站便用性。检查网站整体结构是否清晰以及网站页面导航是否清晰。
第4章网页设计应注意的问题
当网站在进行具体的页面设计过程中，还应注意以下事项，可帮助我们取得事半功倍的效果：
1.网站的所有网页风格要统一
在网页设计过程中主页面的设计与子页面的设计风格应该统一，采用一致的主色调，布局的风格基本统一。
2.网站导航问题
(1)、每一页面都应该有一个导航条，让访客清楚自己访问的页面所在的位置。
(2)、每一个页面都应该有一个导航块，让访客能随时切换到其它板块中，可以随时访问其它的页面。
3.网页布局问题
(1)、合理留出页面空白，不能将页面塞得太满。整个页面不能全部为内容，应该合理的留出空间。
(2)、插入图形不能删除它的width和height属性，不然做出的页面看起来很凌乱。
(3)、对于表格、最好用绝对定位的方式即以像素为单位，这样可避免屏幕分辨率对网页内容显示的影响。屏幕的分辨率一般做网页时为1024*768。
(4)、每幅页面中使用的颜色不要太多，彼此协调。一般而言，控制在三种以内，如实在需要可通过调整透明度或饱和度来产生新的颜色。
(5)、页面中的字体尽量使用标准字体，字号适中，大多为12号字体。4.首页设计问题
首页是网页设计中的重中之重，直接影响到用户对网站的整个印象。除了要注意一般网页设计中要注意的问题，还要特别注意
(1)、首页相当于一张大的导航图，可以根据首页中反映的信息，使访问的人易于找到他感兴趣的内容。
(2)、首页应能时刻显示最新信息，吸引访问者浏览。可以通过增加更新链接、或在主页中开辟一片区域显示更新内容。不过我做的是静态网页，更新信息很不容易，所以在设计中需留有更新信息的空间。
第5章主页设计与实现
5.1主页设计
由于是校园网的设计所以版面不应该和个人主页那样随意，我做的网页主要是静态的，因此一些信息只能通过图片和文字来反应，用简单的文字链接页面进行信息的浏览，以图片的形式反映教育状况页面比较简洁。
如图5-1 校园网主页
5.2 主页的实现
主页设计代码如下：