信息工程学院网站设计

1、信息工程学院网站设计 周延晓 11级 计算机科学与技术（嵌入式）摘 要 本论文着重论述了校园网站设计与建设方案，校园网站的设计思路和所需的网络技术选型，数据库以及编程语言的选择，对网站功能也进行了论述，并给出具体的网站设计关键代码。关键词 网站、ASP.NET、C#、设计 目 录摘要.第1章 绪论. 1.1 前言.1.2 设计思想. 第2章 系统设计相关知识与技术.2.1 网站设计的基础知识.2.1.1 ASP.NET技术介绍.2.1.2 JAVASCRIPT技术介绍.2.1.3 Microsoft Visual Studio 2008(vs2008中文版)专业版简介.2.1.4 SQL Se

2、rver 2005简介. 第3章 网站设计准备.3.1 网站设计工具选择.3.2 网站运行环境的基本要求.3.3 网站整体设计准备.第4章 网站详细设计. 4.1网站整体结构设计. 4.1.1 首页制作. 4.2 网站数据库设计. 第5章 网站测试.5.1 浏览器的兼容性测试.5.2 链接正确性测试.第6章 网站的安装与发布.6.1 网站上传工具的选择.6.2 网站的安装. 结论. 参考文献. 附录. 致谢. 第1章 绪 论1.1 前言 在Internet飞速发展的今天，校园网站利用网络优势可以实现无纸化办公，提高工作效率，共享教育教学资源，为教师提供多一种参与教育教学研究的方法，因此校园网站

3、现在已经应用广泛。但是现有的校园网站普遍存在“缺乏全员参与、功能单一”的缺点。这就严重限制了教师在学院建设及教科研方面的主动作用，也制约了学院的信息化进程。开发一个切合学院实际、功能全面、既提高学院管理工作效率又方便教师参与应用的校园网站非常重要。本论文重点介绍了新闻发布平台和新闻管理模块的设计与实现过程。新闻发布平台可以发布多种形式的新闻，同时新闻管理分级分类，使其在教育教学及学院管理工作中应用范围广泛，促进更多教师使用，各种展现新闻的形式不仅使新闻多样化，更使网站漂亮、大气、美观。1.2设计思想通过网站，全面宣传，展现学院风采、优点与特色，发布学院的重大活动安排与招生就业政策，增强学生家长

4、与学院之间的联系，在Internet上实现完成部分校务，提高办事效率。 第2章 系统设计相关知识与技术 2.1 网站设计的基础知识2.1.1 ASP.NET技术介绍Active server ：“动态网页设计”，一般简称为“ASP.NET”，ASP.NET是在服务器上运行的编译好的公共语言运行库代码。与被解释的前辈不同，ASP.NET可利用早起绑定、实时编译、本机优化和盒外缓存服务。这相当于在编写代码行之前变显著提高了性能。ASP.NET框架补充了Visual Studio集成开发环境中的大量工具箱和设计器。WYSIWYG编辑拖放服务器控件和自动部署只是这个强大的工具所提供功能中的少数几种。A

5、SP.NET还具有简易型、可管理性、可缩放性和可用性、自定义性和扩展性、安全性等。ASP.NET几乎全是基于组件和模块化，每一个页，对象，和HTML元素都是一个运行的组件对象。在开发语言上，ASP.NET抛弃了VBSCRIPT和JSCRIPT，而使用.NET Framework 所支持的VB.NET，C#.NET等语言作为开发语言，这些语言生成的网页在后台被转换成了类并编译成了一个DLL。由于ASP.NET是编译执行的，所以他比ASP拥有更高的效率。2.1.2 JAVASCRIPT技术介绍 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端

6、Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。它最初由网景公司（Netscape）的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。大量网页都使用 JavaScript 这种脚本语言，其主要用途是增加浏览器与网页之间的交互。它还完善了常见的服务器端编程语言和平台，2.1.3 Microsoft Visual Studio 2008(vs2008中文版)专业版简介 Microsoft Visual Studio 2008是面向Windows Vista、Office 2007、Web 2.0的下一代开发工具，代号“Orcas”，是对

7、Visual Studio 2005一次及时、全面的升级。VS2008引入了250多个新特性，整合了对象、关系型数据、XML的访问方式,语言更加简洁。使用Visual Studio 2008可以高效开发Windows应用。设计器中可以实时反映变更,XAML中智能感知功能可以提高开发效率。同时Visual Studio 2008支持项目模板、调试器和部署程序。Visual Studio 2008可以高效开发Web应用，集成了AJAX 1.0，包含AJAX项目模板，它还可以高效开发Office应用和Mobile应用。 VS2008 新特性 VS2008软件开发更智能评点：Visual Studio

8、 2008 很好用，特别是自动提示和重构功能。 Visual Studio 2008中WCF的新增功能评点：Visual Studio2008对WCF的扩展，用起来很方便。 Visual Studio 2008中的多定向支持评点： Visual Studio2008为应用程序的开发带来了新的活力。让VS 2008支持Subversion评点： 虽然VS2008中并未集成Ankhsvn,但仍然不妨碍我们的使用哦。微软整合Windows Live到VisualStudio中评点：VS2008程序员开发Live网络服务平台的有利武器。Visual Studio 2008中的SQL数据库发布评点：VS

9、2008为数据库的发布提供了更方便快捷的解决方案。 Visual Studio 2008加入拼写检查器2.5 SQL Server 2005简介Microsoft SQL Server 2005 是一个全面的数据库平台，使用集成的商业智能 (BI)工具提供了企业级的数据管理。Microsoft SQL Server 2005数据库引擎为关系型数据和结构化数据提供了更安全可靠的存储功能，使您可以构建和管理用于业务的高可用和高性能的数据应用程序。使用SQL Server2005,开发人员将能够在数据库层开发Web服务，将SQL Server当作一个超文本传输协议(HTTP)侦听器，并且为网络服务中

10、心应用软件提供一个新型的数据存取功能。 第3章 网站设计准备 3.1 网站设计工具选择 对于前期制作设计工作所选择的的工具 我选择的是：1、 技术平台：微软的.NET框架。2、 信息服务器：Microsoft Visual Studio 2008(vs2008中文版)专业版。3、 开发语言：ASP.NET2.0技术框架，实现语言完全采用C#语言。4、 数据库：SQL Server 2005。5、 服务器操作系统：开发过程采用微软公司（Microsoft）开发的windows 7操作系统 。6、 辅助工具：Photoshop cs5、美图秀秀等。 3.2 网站运行环境的基本要求1、 服

11、务器配置： *基本配置：Windows 2000及更高版本，IIS 5.0及更高版本，sql版本需sql server 2005或更高版本2、客户端管理计算机配置 必须要求使用Ms IE5.以上版本，支持JAVASCRIPT、VBSCRIPT脚本，并关闭所有弹出窗户拦截程序。 3.3 网站整体设计准备 根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：1、 新闻发布模块 本站新闻分为多种类型，以标题或者图片的形式显示，按照更新时间的降序进行排序。所有用户可以浏览本站的校园新闻，并根据自己的需要对新闻进行搜索。2、 文件服务模块用户可以享受网站提供的文

12、件上传、下载等服务。3、QQ在线客服模块登陆网站的用户可以通过在线客服模块与在线教师交流。4、后台管理模块 后台管理是为管理员提供了一个方便操作数据库的平台。管理员可以对用户、新闻、教学文件以及等信息进行管理。 第4 章 网站详细设计 4.1网站整体结构设计网站主页采用静、动相结合的方式，即动态的主页面、静态的链接和动态的图片相结合，以及红黄搭配的主色调，体现学院的个人创意门户的勃勃生气，动态的主页面极大的方便了网站信息的更改变化，使其新闻实时保持最新、最及时、方便管理员的维护更新。此外整个网站才用三层架构搭建系统框架，即“三层”是指用户界面表示层（UI）、业务逻辑层（BLL）、数据访问层（D

13、AL），如图4-1所示：用户界面表示层数据库数据访问层业务逻辑层访问访问 响应 响应 图 4.1.1三层架构介绍：用户界面表示层：直接和用户进行交互，把数据内容呈现给用户或接受用户输入的数据的部分。对于WEB应用程序来说，表示层就是网页；对于Windows应用程序来说，表示层就是Windows窗体。 业务逻辑层：主要是处理业务方面的逻辑，如判断用户输入的内容是否符合要求，负责把用户输入的数据传输给数据访问层，并把来自数据访问层的数据返回给用户。业务逻辑层是用户界面表示层和数据访问层之间通信的桥梁，它在体系构架中的位置很关键，处于数据访问层与用户界面层中间，起到了数据交换中承上启下的作用。数据访

14、问层：主要是对原始数据（数据库或者文本文件等存放数据的形式）的操作层，只有它能直接访问数据库，对数据库进行增删查改的操作，其他的两个层都不能直接访问数据库。在三层架构中，客户端不直接与数据库进行交互，而是经过中间层与数据库进行交互。网站整体设计流程结构图：网站整体规划、栏目板块设置 页面的外部样式设计首页设计（添加测试数据）查看效果设计后台页面 编辑模板页、创建WEB控件创建所有子页（搜索页、内容页等）设计后台板式查看效果导入模板和相关文件查看效果录入新闻信息和图片在前台所有页面绑定数据在前台所有页面上绑定数据查看效果发布站点 图4.1.2首页演示图（图1）： （ 图 1 ） 首页制作：首页页

15、面在传统的页面设计基础上加以创新，改变传统的布局大小，重点突出图片新闻模块，整个页面分为八大模块：1、 master首页的头部模块。头部模块为一张用Photoshop cs5处理过的图片，主色调是网站的模板色调，采用暗红色加黄色背景，文字颜色为白色，字体形式为华文行楷，60号字体，此外master的右上角增加了“设为主页、加入收藏”功能，整个模块大小为宽1100px高190px，截图：部分代码：<div class="master"> <p> <a href="#" onclick="SetHome(this,wi

16、ndow.location)">设为首页</a> <a href="#" onclick="AddFavorite(window.location,document.title)"> 加入收藏</a> </p> </div>2、 links页面的导航模块。links页面的导航模块，宽度1100px高度35px，其分为12个窗口，截图：分模块设定为当鼠标划过时单个窗体为白色，字体颜色设定为蓝色，点击后恢复原样状态。3、 search首页的搜索模块以及热点新闻模块。 搜索模块宽度11

17、00px高度30px，分为两部分，一部分为搜索栏，另一部分为热点新闻栏，搜索部分采用简单的文字检索，热点新闻栏采用marquee标记横向滚动，显示两条重要新闻。截图：部分代码：<div class="searchright"> <marquee scrollamount="3" width="600px" scrolldelay="0" behavior="scroll" direction="left" loop="-1" truesp

18、eed onmouseover="this.stop();" onmouseout="this.start();" style="margin-top: 5px"> <ul style="padding: 0px 0px 5px 0px; width: 600px; height: 20px"> <asp:Repeater ID="Rep类别新闻5" runat="server"> <ItemTemplate> <li>&

19、lt;span> <img src="imagetubiao/icon_back.gif" />&nbsp;<img src="imagetubiao/11.gif" />:</span><a href='NewsContent.aspx?Nid=<%# Eval("Nid") %>' target="_blank" title="<%#Eval("sTitle")%> ">

20、 <%#StringTruncat(Eval("sTitle").ToString(), 22, ".")%></li> </ItemTemplate> </asp:Repeater> </ul> </marquee> </div>4、 flash首页的主体图片新闻模块。flash模块宽1100px高304px,这模块也分为两部分，一部分为图片模块，另一部分为“学院简介、通知公告”的Tab菜单模块，图片模块采用幻灯片的方式切换图片，五张图片以不同的效果切换，注意图片的大小

21、设定为宽720px高280px，要求管理者严格按设定的图片大小上传图片，Tab菜单模块增加了页面空间的复用性。截图： 部分代码： <div class="flashleft"> <div id="image"> <% /传递参数给JS代码，需要7个参数。图片路径、链接地址、图片标题、div的宽、高、标题文字的行高、div的ID Response.Write("<script type='text/javascript'>default_GetXml('" + imgUr

22、l + "','" + imgLink + "','" + imgTitle + "','720','280','20','image')</script>"); %> </div> </div>5、 maincontent首页的主题内容模块。 maincontent是首页新闻的核心部分，共分为六大新闻模块，分别为学院动态、教学管理、科技创新、学生天地、联系我们、友情链接子模块，截图：学院动

23、态模块采用marquee标记竖向滚动显示，学院动态、教学管理、科技创新、学生天地、四个模块都是显示九条新闻，除此之外在右上边增加了Flash动画特效，以增强页面的动感，6、 marquee_demo首页的滚动学子风采模块。7、 footer首页底部模块。8、 QQ在线客服模块。 二级导航页演示图 （图2） （图2） 新闻搜索页演示图（图3）： （图3）新闻页演示图（图4）：4.2 网站数据库设计 第5章 网站测试 5.1 浏览器的兼容性测试5.2 链接正确性测试 第6章 网站的安装与发布6.1 网站上传工具的选择6.2 网站的安装结 论参考文献附录致谢2.2网站的界面设计1、文字的格式化本网站

24、的主体文字大小为13号字体，格式新宋体，文字间距为页面默认间距，行间距则按照页面布局模块所需的大小设定（其大小不固定），各个模块的标题字体设定为前面两个字红色后面黑色，以突出模块新闻关键字，文字的整体编排以突出清新自然为主。2、页面色调布局所有页面的主题色调设为红黄蓝搭配，突出喜庆气息，而且为了使整个页面色调更和谐，特意设定页面新闻文字连接时为红色字体。3、页面制作 网站所有页面主要采用DIV+CSS来为页面布局分块，CSS样式主要采用外部样式，分块布局及外部样式实例代码：.links /* 链接框架*/margin-bottom: 0px;width: 1100px;height: 35px;margin-left: auto;margin-right: auto;.links1float: left;width: 1100px;heigh