计算机工程系网站建设论文.doc

毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 1 摘要摘要 本文详细介绍了通过运用 Internet Intranet 的相关技术 建设 江苏大学计算机学院工 程系网站 的过程 该网站利用了先进的 asp 网页动态技术以及数据库技术 为教师和学 生提供一个网上交流信息的平台 并为维护者提供了方便的操作后台 在网页设计方面 利用了著名的 Macromedia 公司出品的网页制作利器 Dremweaver MX2004 等工具 力求网站的实用 美观与效率 该网站的核心部分使用了 asp 技术 并与数据库技术 网络安全技术相结合 使教师 可以很好地管理自己的资料 学生能够方便地查询教师及课程等信息 管理人员也可以方 便地管理网站并进行维护工作 关键词 关键词 asp 数据库技术 后台 网络安全技术 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 2 ABSTRACT This thesis present the course that was used the technology relevant to Internet Intranet to build the website of Computer Engineering Department of Jiangsu University in detail This website applied the advanced technic of dynamic website and Database It offered a platform for communication between students and teachers moreover it could also provide a convenient manipulation Background for the administrator As far as the web designing was concerned it was used the web facture edge tool Dreamweaver which manufactured by the famous Macromedia corporation So as to make the net more practical efficient and pleasing to the eye The website contained the asp combined with Database and Network Safety Technique in the hardcore of the website in order to make the teacher manage their datum efficiently Of course the students also could inquire about the information of teachers and curriculum easily and the manager administrated and safeguarded the website conveniently KeyKey words words Asp Database Background Network Safety Technique 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 3 目录目录 第一章第一章 引言引言 1 1 1 信息技术发展概况 1 1 2 网站的发展 1 1 3 本课题的意义 2 第二章第二章 平台工具介绍平台工具介绍 3 2 1DREAMWEAVER MX2004 3 2 1 1简介 3 2 1 2特点 4 2 1 3功能 5 2 2ASP 6 2 2 1ASP简介 6 2 2 2ASP的特点 7 2 2 3ASP的功能 7 2 3ACCESS 8 2 3 1Access简介 8 2 3 2Access的功能及特点 8 第三章第三章 网站的整体规划与设计网站的整体规划与设计 9 3 1 网站设计前提思路 9 3 1 1网站设计目的 9 3 1 2网站所需实现的功能 9 3 1 3网站的特点 10 3 2 网站总体设计 11 3 2 1网站的栏目板块和目录结构 11 3 2 2网站的排版及布局 11 3 2 2网站内容的安排 11 3 2 3网站链接关系 12 3 3 网站结构 12 第四章第四章 网站的实现网站的实现 14 4 1 首页设计过程 14 4 1 1首页框架设计 14 4 1 2首页页面设计 15 4 1 3首页ASP程序设计 16 4 2 其他页面设计过程 17 4 2 1分页页面设计 18 4 2 2分页ASP程序设计 fenye asp 18 4 2 3栏目内容显示ASP设计 midclass asp 19 4 2 4文章内容显示ASP设计 show asp 21 4 3 下载系统设计 22 4 3 1下载系统设计思路 22 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 4 4 3 2下载系统设计过程 22 4 4 后台设计 24 4 4 1后台基本操作框架 24 4 4 2后台界面框架 24 4 5 网站演示及功能 25 4 5 1网站首页展示 25 4 5 2其他页面展示 26 4 5 3后台管理登陆 27 4 6 后台管理操作 28 4 6 1消息管理 28 4 6 2留言管理 30 4 6 3文章管理 31 4 6 4链接管理 33 4 6 5用户设置 34 4 7 下载系统操作管理 35 4 7 1下载系统界面 35 4 7 2下载系统管理界面 37 4 7 3添加下载软件 38 4 7 4下载软件分类管理 39 4 8 本章小结 40 第五章第五章 课题总结课题总结 41 参考资料参考资料 42 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 1 第一章第一章 引言引言 信息技术日新月异 也逐渐融合到当代的教育系统中 我们的想法便是设计一个计算 机工程系的网站 使广大师生能够在网上方便的交流并查询信息和资料 1 1 信息技术发展概况信息技术发展概况 随着融合了计算机 通信和信息处理技术的电子信息技术的飞速发展 人类在经历了 农业社会 工业社会后 已步入信息化社会 物质 能源与信息已成为社会发展的三大资 源 信息技术是当代人类最活跃的生产力 正在对经济和社会的发展产生巨大而深远的影 响 信息化水平的高低已成为衡量一个国家 一个地区现代化水平和综合国力的重要标志 进入 90 年代以来 信息化浪潮一浪高过一浪 世界各国更加关注和重视未来的信息社会 发达国家借助掌握信息技术的优势 大力推进国家信息基础设施的建设 促进本国产业结 构重组 从而增强了自身的国际竞争力 1993 年 9 月美国政府率先提出了国家信息基础设施计划 NII National Information Infrastructure 通常称为信息高速公路 实质是高速信息网络 它是美国政府针对美国社 会信息化发展而提出来的 具有 21 世纪的战略眼光 是重振美国经济 增强美国国际竞争 力的重大举措 之后 全球掀起了建设 信息高速公路 的高潮 日 英 法 德 加等国 也纷纷提出各自的类似计划 发展中国家如韩国 新加坡 巴西 乌拉圭 也都加紧制订 本国的信息化计划 INTERNET INTRANET 技术的兴起 给企业业务流程 管理模式 组织机构的重组乃 至整体的发展带来新的机会 并将导致产业结构及企业经营方式的变革 加速信息化进程是社会 经济发展到一定程度时的必然要求 已成为促进各国经济和 社会发展的大趋势 是时代赋予我们的历史性机遇和挑战 党中央 国务院十分重视我国 信息化的建设和发展 党的十四届正中全会上 提出了加快国民经济信息化进程 逐步实 现整个经济由粗放型经营向集约型经营转变 人大八届四次会议审议通过了 中华人民共 和国国民经济和社会发展 九五 计划和 2010 年远景目标纲要 指出 国民经济和社会各领 域应用现代电子信息取得很大进展 计算机应用在生产 工作和生活中的普及程度有很大 提高 1993 年 12 月 10 日国务院批复成立国家经济信息化联席会议 其主要任务和职责是 统筹协调关系到国计民生的全国性经济信息化系统工程项目 提出有关政策 法规和标准 等 1994 年 3 月有关专家研讨了 国民经济信息化 和建立 中国信息高速公路 的问题 之 后 国家经济信息化联席会议召开了国民经济信息化发展战略高层次研讨会 1996 年 5 月 国务院成立了 国务院信息化工作领导小组 以加强对全国信息化工作的组织和领导 它 的主要任务是制定国家信息化的方针 政策 组织制定国家信息化的发展战略 总体规划 以及协调跨部门 跨地区 关系国民经济和社会发展的国家重大信息工程项目 1 2 网站的发展网站的发展 在当今全球信息化大潮中 互联网 即因特网 Internet 异军突起 给 20 世纪末 的人类社会增添了无限的活力 成为现代社会生活中一道亮丽的风景线 互联网带给人们 的不仅仅是技术 而是一种以信息为标志的崭新的生活方式 它正在改变着人们的工作和 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 2 生活方式 一个网站的整体规划和设计的好坏是它发展的重要之处 也是它吸引人们浏览的所 在之处 Internet Intranet 技术的日益发展 使人们认识到了 Internet Intranet 的优势 更使 得数据库与 web 的连接成为数据库开发方面的热门技术之一 在选择网站设计技术时 我们选择了动态网页技术 尽管这样技术性增强而且任务量 增加了 但我们是出于一下的考虑的 通常情况下 通过浏览器看到的网页大多是静态的 所谓 静态 是指网站的网页内 容 固定不变 当浏览器通过互联网的 HTTP Hypertext Transport Protocol 协议向 Web 服务器请求提供网页时 服务器仅仅是将原来设计好的静态 HTML 文档传给浏览器 其页面内容使用的仅仅是标准的 HTML 代码 最多再加上流行的 GIF 格式的动态图片 比如产生几只小猫小狗跑来跑去的动画效果 若网站维护者要更新网页的内容 就必须手 动更新所有的 HTML 文档 静态网站的致命弱点就是不易维护 为了更新网页的内容 网站维护者必须重复制作 HTML 文档 随着网站内容和信息量的日益扩增 可以想象这是多么复杂繁琐的工作 那 么 什么是动态网站呢 所谓 动态 并不是指放在网页上的图片会动 动态页面应具有 以下几个特点 一 交互性 即网页能根据客户的要求和选择而动态改变和响应 浏览器即作为客 户端界面 这是今后 Web 发展的大势所趋 二 自动更新 即无需手动更新 HTML 文档 就能自动生成新的页面 从而大大 减少工作量 三 因时因人而变 即当不同的时间 不同的人访问同一网址时能产生不同的页面 这一点对于需要对使用者授权的网站尤其适用 随着的 Internet 迅速发展 不管是专业的 ISP Internet 服务提供者 和 ICP Internet 内容 提供者 还是一般的政府机关 银行 交通部门 学校 医院 服务者 甚至是每个人 都在积极寻求在 Internet 上发布信息 提供新型的网上管理和服务 可以说 网站设计和 网站的编辑正成为新兴的热门行业 1 3 本课题的意义本课题的意义 目前 各院系利用网络资源向教师和学生提供交流的平台 体现了现代教学信息化的 特点 计算机学院工程系也不例外 而现行的网站不能够很好的发挥教师与学生交流的作 用 另外维护起来也比较麻烦 因此需要设计一个动态的网站来弥补这些缺陷 而本课题 即 江苏大学计算机学院工程系网站 就是基于这一目的设计完成的 本网站作为一个大学院系的网站 考虑到系里的教师和学生以及课程安排情况 将丰 富的资料有序地发布在网上 网站不但为教师和学生提供了一个良好的交流平台 也为其 他人员了解计算机学院工程系打开了一扇窗口 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 3 第二章第二章 平台工具介绍平台工具介绍 本章将介绍设计本网站所用到的工具 Dreamweaver MX2004 Access 及核心技术 ASP 的相关资料 俗话说 工欲善其事 必先利其器 要构造出一个优秀的网站 首先选 取得力的工具是必要的 在此 我们选用了 Macromedia 公司的网页三剑客作为网站设计 工具 数据库部分我们采用了 Office 系列的 Access 简单方便 而 ASP 作为最流行的动态 网页设计技术 受到很多网页制作人员的青睐 我们也不例外 2 1Dreamweaver MX2004 Dreamweaver 是由 Macromedia 公司推出的 用于网页开发和网站管理的专业化设计工 具 它采用了多种新技术 具有设计和开发网站过程中需要的网站管理 网站设计 页面 制作 多媒体制作和动画制作等丰富实用的功能 它具有友好的操作界面 在文档窗口中 可以打开各种浮动面板 同时还可以使用系统内置的多种对象进行操作 2 1 1 简介简介 Dreamweaver MX2004 启动后 会出现一个选择操作窗口 如图表 1 所示 如果选择 新建 HTML 页面 则创建一个新的窗口 如图表 2 所示 该窗口包含如下的几个部分 标 题栏 菜单栏 工作区 浮动面板和状态栏 标题栏中主要显示该文档 9 的标题信息 文 件名及该文件所在的文件夹等 菜单栏中包含了各种操作命令 应用特性和访问浮动面板 的简单方法 Dreamweaver MX2004 启动后 工作区是白色的空白区域 可以在工作区中 输入文字 插入图象 添加背景以及其它页面元素 浮动面板提供了访问程序特性的简单 方法 可以对浮动面板进行选择 拖放 重新定位 移动等操作 当我们不需要使用某个 移动面板时 还可以用鼠标单击该面板右上角的关闭按钮将其关闭 需要时再打开 状态 栏位于窗口的最下端 用于显示文档的 HTML 标记 文档窗口大小 下载速度等信息 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 4 图表 1 Dreamweaver MX2004 启动界面 图表 2 Dreamweaver MX2004 新建工作界面 2 1 2 特点特点 1 最佳的制作效率 最佳的制作效率 Dreamweaver 可以用最快速的方式将 Fireworks FreeHand 或 Photoshop 等档案移至 网页上 使用检色吸管工具选择银屏上的颜色可设定最接近的网页安全色 对于选单 快 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 5 捷键与格式控制 都只要一个简单步骤便可完成 Dremweaver 能与您喜爱的设计工具 如 Playback Flash Shockwave 和外挂模组等搭配 不需离开 Dremweaver 便可完成 整体运 用流程自然顺畅 除此之外 只要单击便可使 Dreamweaver 自动开启 Firework 或 Photoshop 来进行编辑与设定图档的最佳化 2 网站管理 网站管理 使用网站地图可以快速制作网站雏形 设计 更新和重组网页 改变网页位置或档案 名称 Dreamweaver 会自动更新所有连结 使用支援文字 HTML 码 HTML 属性标签和 一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单 3 无可比拟的控制能力无可比拟的控制能力 Dreamweaver 是唯一提供 Roundtrip HTML 视觉化编辑与原始码编辑同步的设计工具 它包含 HomeSite 和 BBEdit 等主流文字编辑器 帧 frames 和表格的制作速度快的令您无法 想像 进阶表格编辑功能使您简单的选择单格 行 栏或作未连续之选取 甚至可以排序 或格式化表格群组 Dreamweaver 支援精准定位 利用可轻易转换成表格的图层以拖拉置 放的方式进行版面配置 所见即所得 Dreamweaver 成功整合动态式出版视觉编辑及电子 商务功能 提供超强的支援能力给 Third party 厂商 包含 ASP Apache BroadVision Cold Fusion iCAT Tango 与自行发展的应用软体 当您正使用 Dreamweaver 在设计动 态网页时 所见即所得的功能 让您不需要透过浏览器就能预览网页 梦幻样版和 XML Dreamweaver 将内容与设计分开 应用于快速网页更新和团队合作网页编辑 建立网页外 观的样版 指定可编辑或不可编辑的部份 内容提供者可直接编辑以样式为主的内容却不 会不小心改变既定之样式 您也可以使用样版正确地输入或输出 XML 内容 全方位的呈 现利用 Dreamweaver 设计的网页 可以全方位的呈现在任何平台的热门浏览器上 对于 cascading style sheets 的动态 HTML 支援和鼠标换图效果 声音和动画的 DHTML 效果资料 库可在 Netscape 和 Microsoft 浏览器上执行 使用不同浏览器检示功能 Dreamweaver 可以 告知您在不同浏览器上执行的成效如何 当有新的浏览器上市时 只要从 Dreamweaver 的 网站在下载它的描述档 便可得知详尽的成效报告 2 1 3 功能功能 1 页面编辑 页面编辑 简洁高效的设计和开发界面简洁高效的设计和开发界面 Dreamweaver 的界面更易于使用 可使您的工作效率和工作质量均得到提高 插入 栏的改进使其具有一个简洁高效的新外观 并占用更少的工作区空间 Microsoft Word 和 Microsoft Excel 复制和粘贴命令使您可以将Microsoft Word 和Excel 文档直接复制并粘 贴到Dreamweaver 中 当您粘贴Word 或Excel 文档时 Dreamweaver 会保留文档格式并生 成高质量的HTML 内容 表格编辑可视化反馈使您能够看到在表格中进行列调整操作时的实 际效果 可视化反馈还可以使您更方便地选择表格元素 用户界面改进可得到最大的可用 工作区 更清晰地显示上下文和焦点 并使用户更易于使用和更具逻辑性 起始页使您能 够访问最近使用过的文件 创建新文件和访问Dreamweaver 资源 起始页会在您启动 Dreamweaver 或尚未打开文档时显示 保存桌面选项使您可以选择当您重新启动 Dreamweaver 时让Dreamweaver 重新打开您上一次使用的文档 完全支持Unicode 意味着 在Windows 下 Dreamweaver 支持Internet Explorer 所支持的所有文本编码方式 您可 以在Dreamweaver 中使用几乎所有您的系统中安装的语言字体 Dreamweaver 会正确地呈 现和保存这些字体 安全FTP 使您能够完全加密所有文件传输 并阻止对您的数据 文件 用户名和密码的未授权访问 2 页面整体布局 页面整体布局 新式的页面布局和设计环境新式的页面布局和设计环境 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 6 Dreamweaver 包含以下增强的CSS 功能 这些功能提供了一个更为精巧的方法来进行 样式设计及提高设计交互性 此外 还包含了用于改进可视化编辑的反馈 动态跨浏览器 验证在您保存文档时自动检查当前文档的跨浏览器兼容性问题 在您指定一些目标浏览器 后 Dreamweaver 将执行检查 以确保页中没有使用指定浏览器不支持的标签或CSS结构 相关CSS 选项卡显示应用于当前 代码 视图或 设计 视图选择的CSS 规则 单击任意 规则可查看它指定了哪些属性 边框样式 边距 填充 文本大小等 特殊的标记使您 可以知道特定属性是否被覆盖 就地编辑功能允许您对可立即反映在 设计 视图中的内 容进行快速编辑 CSS 布局可视化使得使用CSS 对页进行布局大为简化 您可以在 设计 视图中方便地选择div 或其它内容块 然后使用 CSS 属性 选项卡来修改属性 基于CSS 的文本属性检查器列出了可用于文本的所有可用样式 并且包含一个预览 其中显示出了 应用该样式后文本所呈现的外观 基于CSS 的页面属性使您能够使用新型CSS 代码结构对 页面属性进行更多的控制 例如标题和链接的外观 集成的图像编辑工具栏使您能够使用 Macromedia Fireworks 技术从Dreamweaver 中进行基本的图像操作和编辑 您可以执行裁 剪 调整大小和重新取样等操作而无需离开Dreamweaver 3 代码编辑 代码编辑 强大和开放的编码环境强大和开放的编码环境 Dreamweaver 为编码人员提供了以下新增功能 包括对 代码 视图的改进和无需创 建Dreamweaver 站点即可编辑文件的功能 Dreamweaver 还包括当前对服务器技术的支持 改进的标签检查器显示了对当前选项可用的属性列表并使您能够进行快捷全面的编辑 改 进对ASP NET 表单控件的支持提供了在 设计 视图中生成和操作ASP NET Web 表单的经 改进的新方法 包括新的属性检查器 代码 视图上下文菜单使您能够快速更改所选 代码的格式设置 2 2ASP Active Server Pages ASP 是服务器端脚本编写环境 使用它可以创建和运行动态 交互的 Web 服务器应用程序 使用 ASP 可以组合 HTML 页 脚本命令和 ActiveX 组件以 创建交互的 Web 页和基于 Web 的功能强大的应用程序 ASP 应用程序很容易开发和修改 2 2 1ASP 简介简介 从字面上说 ASP 包含三方面含义 1 1 Active ASP 使用了 Microsoft 的 ActiveX 技术 ActiveX COM 技术是现在 Microsoft 软件的重要基础 它采用封装对象 程序调用对象的技术 简化编程 加强程 序间合作 ASP 本身封装了一些基本组件和常用组件 有很多公司也开发了很多实用组件 只要你可以在服务器上安装这些组件 通过访问组件 你就可以快速 简易地建立自己的 WEB 应用 2 2 Server ASP 运行在服务器端 这样就不必担心浏览器是否支持 ASP 所使用的编程 语言 ASP 的编程语言可以是 VBSCRIPT 和 JSCRIPT VBSCRIPT 是 VB 的一个简集 会 VB 的 人可以很方便的快速上手 然而 Netscape 浏览器不支持客户端的 VBSCRIPT 所以最好不 要在客户端使用 VBSCRIPT 而在服务器端 则无需考虑浏览器的支持问题 Netscape 浏览 器也可以正常显示 ASP 页面 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 7 3 3 Pages ASP 返回标准的 HTML 页面 可以正常地在常用的浏览器中显示 浏览者查 看页面源文件时 看到的是 ASP 生成的 HTML 代码 而不是 ASP 程序代码 这样就可以防止 别人抄袭程序 由此我们可以看出 ASP 是在 IIS 下开发 WEB 应用的一种简单 方便的编程工具 在 了解了 VBSCRIPT 的基本语法后 只需要清楚各个组件的用途 属性 方法 就可以轻松编 写出自己的 ASP 系统 2 2 2ASP 的特点的特点 1 使用 VBScript JScript 等简单易懂的脚本语言 结合 HTML 代码 即可快速地完 成网站的应用程序 2 ASP 无须编译 容易编写 由服务器的软件解释后直接执行 当执行 ASP 程序时 脚本程序将一整套命令发送给脚本解释器 即脚本引擎 由脚本解释器进行翻译并将其转 换成服务器所能执行的命令 3 可使用普通的文本编辑器 如 Windows 的记事本 即可进行编辑设计 4 与浏览器无关 用户端只要使用可执行 HTML 码的浏览器 即可浏览 Active Server Pages 所设计的网页内容 ASP 所使用的脚本语言 VBScript Jscript 均在 WEB 服务器 端执行 用户端的浏览器不需要能够执行这些脚本语言 5 ASP 能与任何 ActiveX scripting 语言相容 除了可使用 VBScript 或 JScript 语言来 设计外 还通过 plug in 的方式 使用由第三方所提供的其他脚本语言 譬如 REXX Perl 等 脚本引擎是处理脚本程序的 COM Component Object Model 物件 6 ASP 的源程序 不会被传到客户浏览器 因而可以避免所写的源程序被他人剽窃或 篡改 提高了程序的安全性 7 可使用服务器端的脚本来产生客户端的脚本 8 对象导向 Object oriented 9 ActiveX Server Components ActiveX 服务器组件 具有无限可扩充性 可以使用 Visual Basic Java Visual C 等各种编程语言来编写你所需要的 ActiveX Server Component 2 2 3ASP 的功能的功能 1 Active Server Page 内建对象内建对象 request 对象 Session 对象 response 对象 server 对象 application 对象 Active Server Pages 提供内建对象 这些对象使用户更容易收集通过浏览器请求发送 的信息 响应浏览器以及存储用户信息 如用户首选项 2 脚本语言 脚本语言 选用 VBScript 脚本语言 读取表单 打开数据源 执行 SQL 语言 等等 略 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 8 2 3Access 作为本网站数据库系统的设计软件 下面简要介绍一下 2 3 1Access 简介简介 作为 Microsoft 的 office 套件产品之一的桌面数据库系统 Access 与许多优秀的关系数 据库一样 可以让你很容易地连接相关的信息而且还对其他的数据库系统有所补充 它能 操作其它来源的资料 包括许多流行的 PC 数据库程序 如 dBASE Paradox Microsoft FoxPro 和服务器 小型积极大型机上的许多 SQL 数据库 Access 还完全支持 Microsoft 的 OLE 技术 界面如图表 3 所示 图表 3 Access 界面 2 3 2Access 的功能及特点的功能及特点 1 1 数据库中包含多个表 每个表可以分别表示和存储不同类型的信息 2 2 通过建立各个表之间的关联 从而将存储在不同表中的相关数据有机地结合起来 3 3 用户可以通过创建查询在一个表或多个数据表中检索 更新和删除记录 并且可以 对数据库中的数据进行各种计算 4 4 通过创建联机窗体 用户可以直接对数据库中的记录执行查看和编辑操作 5 5 通过创建报表 用户可以将数据以特定的方式加以组织 从而达到分析可打印的目 的 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 9 第三章第三章 网站的整体规划与设计网站的整体规划与设计 这一章将从设计网站的目的出发 简要提出了网站的整体设计思路 对网站的风格 格局 结构以及主要内容作出了概括 这一步骤属于整个过程的准备阶段 3 1 网站设计前提思路网站设计前提思路 首先我们要明确这个网站设计的目的 以及它所要达到的功能 能够体现什么特点 3 1 1 网站设计目的网站设计目的 网站设计的前提是先弄清楚服务的对象 否则将是事倍功半的 在引言部分已经分析 过 本网站的主要服务对象是江苏大学计算机学院的师生 其设计目的是提供给对象一个 网上交流信息 查询资料的平台 另外 本站点也将作为在因特网 这个新媒体上展示 计算机工程系形象的信息空间 明确设计站点的目的和用户需求 从而作出切实可行的计划 挑选与锤炼工程系的关 键信息 利用一个逻辑结构有序地组织起来 开发一个页面设计原型 选择用户代表来进 行测试 并逐步精炼这个原型 形成创意 分析有些网站的效果不如预想的好 主要原因 是对用户的需求理解有偏差 缺少用户的检验造成的 3 1 2 网站所需实现的功能网站所需实现的功能 我们要设计的便是这样一个网站 它不是那种综合性 艺术性的网站 而是一个大学 院系的网站 那么这种定义便将网站所要实现的功能包含了 1 介绍计算机工程系 介绍计算机工程系 这并不是本网站的主要功能 但必不可少 我们将把首页的一部分作为介绍工程系的 窗口 当人们在浏览网页的时候可以对计算机工程系有一个了解 这部分功能的实现只需 一块区域 放在首页更加直观 2 教学安排 课程建设及科研情况 教学安排 课程建设及科研情况 这里包括各学期的教学安排 每一学科的课程建设以及工程系科研情况 比如教学任 务表 毕业设计 任课教师 课程资源 科研项目 论文专著 等等 3 师资力量及通讯录 师资力量及通讯录 有关工程系各位教师的介绍以及他们的个人网站的网址 另外有各位老师的详细通讯 资料 4 文档及软件下载 文档及软件下载 教学文档 课件以及常用软件的下载 5 其它功能 其它功能 ftp 地址以及一些友情链接 等等 6 管理功能 管理功能 这里属于后台管理 通过分配不同的权限使得网站管理有序而安全 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 10 3 1 3 网站的特点网站的特点 1 实用性 实用性 这一点应该是每一个网站的必需 特别是这种院系网站 所以我们将重点突出 简洁 二字 理论上讲 设计并不再现具体的物象和特征 它要表达的是一定的意图和要求 在 适当的环境里为人们所理解和接受 它与绘图有内在联系 但又不同于绘画 它以满足人 们的实用和需求为目标 因而它比绘画更单纯 清晰和精确 页面设计属于设计的一种 同样要求简练 准确 保持简洁的常用的一个做法是限制所用的字体和颜色的数目 一般 每页使用的字体不超过三种 一个页面中使用的颜色少于 256 种 页面上所有的元素都应 当有明确的含义和用途 而不要试图用无关的图片把页面装点起来 我们要让别人明白本 网站突出表达的内容 主题 2 方便性 方便性 一个好的网站不仅要求能够提供实用的信息 还要有方便的浏览方式 也就是说 要 让登陆网站的人能够方便的查询资料 鲜明的格调 整洁的页面以及详细的链接就显得格 外重要 这样 我们需要着重考虑以下几个因素 精心组织的内容 格式美观的正文 较 好的对比度 使得文字具有较强的可读性 页面元素大小适中 布局匀称 不同元素之间 留有足够空白 给人视觉上休息的机会 文字准确无误 无错别字 无拼写错误 等等 在设计网站页面时 我们精心组织所要发布的材料 按逻辑或时间顺序进行组织 为 了使网站的内容变得有条理 材料组织好后 便开始在网站页面上布置文本 图片等内容 目的是引导浏览者在页内浏览 我们控制页面上的元素的放置顺序和它们相互之间的空隙 并把相关的内容放在一起 而不相关的内容用空白 水平线或其他图形分隔开 给用户一 个有规律的浏览途径 由于人们阅读材料习惯于从左到右 从上到下进行 因此他们眼睛首先看到的是页面 的左上角 然后逐渐往下看 根据这一习惯 我们在组织内容时便把希望浏览者最先看到 的内容放在页面的左上角和页面顶部 如最新消息以及其他一些重要内容等等 重要的内 容应当是浏览者最容易发现 而不是放在很深的链接之后的 在处理链接问题时我们也比 较谨慎 为的是不使因为链接的混乱而导致整个网站的方便性 3 美观性 美观性 首先是一致性 一致性是表现一个站点的独特风格的重要手段之一 我们在设计网站 时使用了一致的框架以及一致的字体和颜色 为了达到网站视觉上的整体感及和谐感 色彩可以使页面更加生动 色彩产生的强烈视觉效果可以使页面在浏览者心中留下很 深的印象 但是必注意慎重的使用色彩 否则很可能弄巧成拙 滥用色彩容易造成视觉上的 混乱 在选择背景和正文颜色时 我们铁别注意的一点是易读性 实现易读性的关键在于 提供足够的明暗对比 我们选择了浅蓝色的背景和黑色的字 4 安全性 安全性 由于网站提供给各位老师私人的空间储存自己的资料 用户的权限以及网络安全必须 着重考虑 5 稳定性 稳定性 这一点也是至关重要的 因为网站并不是建立后就完事了 更多的还是后期的维护工 作 而稳定性这一点正是使以后的维护能够有条不紊 方便 顺利的进行 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 11 3 2 网站总体设计网站总体设计 在分析完网站设计的目的 特点以及所要实现的功能后 我们并不是直接开始制作 而是需要对网站进行总体设计 包括 网站的栏目板块和结构 网站内容的安排 相互链 接关系 等等 3 2 1 网站的栏目板块和目录结构网站的栏目板块和目录结构 1 确定网站的栏目 确定网站的栏目 建立一个网站好比写一篇文章 首先要拟好提纲 文章才能主题明确 层次清晰 如 果网站结构不清晰 目录庞杂 内容东一块西一块 结果不但浏览者看得糊涂 自己扩充 和维护网站也相当困难 网站的题材确定后 并且收集和组织了许多相关的资料内容 但 如何组织内容才能吸引网友们来浏览网站呢 栏目的实质是一个网站的大纲索引 索引应 该将网 站的主体明确显示出来 我们设立网站以下几个栏目 教学安排 课程建设 科研 情况 文档下载 通讯录 2 确定网站的目录结构 确定网站的目录结构 目录结构的好坏 对浏览者来说并没有什么太大的感觉 但是对于站点本身的上传维护 内容未来的扩充和移植有着重要的影响 所以在创建网站目录时我们严格注意一下规范 1 不把所有文件都存放在根目录下 否则会造成文件管理混乱 搞不清哪些文件需要编辑和 更新 哪些无用的文件可以删除 哪些是相关联的文件 影响工作效率 2 目录的层 次不要太深 目录的层次建议不要超过 3 层 维护管理方便 3 不要使用中文目录 4 不要使用过长的目录 3 2 2 网站的排版及布局网站的排版及布局 1 排版设计 排版设计 有限的视觉符号 文字 少量的插图 有时没有 这些素材有时不具备描述清楚事件 或呈现情绪的能力 即使能自由的使用线条和色彩辅助 仍然拘束 所以通过 形象思维 直接捕获内心的原点 是排版设计的唯一途径 排版设计最重要的是 设计者如何把那些 涵养和观点传达给观者 以便使版面上的思想能进入观者的心灵 2 网页的布局 网页的布局 按照平面设计的形式来看 整个页面可以分为几个部分 每个部分有不同的功能 也 能体现不同的形式 具体看来就是上边 左边 下边 右边 中间 看似无奇 自身却有 许多独特的地方 中间的部分一般是最大的 因为它承载着主要的信息 用户主要就是看 中间这个部分的内容 我们所设计的便是上边和右边相结合的拐角型 上面是页面的提头 和栏目导航 右边是留言板和其它的链接 而左边则是网页的主体内容部分 3 2 2 网站内容的安排网站内容的安排 在设计完网站的结构和布局后 接下来就要考虑内容的填充了 内容和形式 即具体 的网页的排版布局 要能够达到一种协调的状态下才能真正的成功的网页设计 所以 不 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 12 能单独考虑网页的内容 以为只要能够把具体内容清晰流畅的放到网站上就行了 造成整 个页面的形式感很差 这样严重影响用户的心情 同样假如不顾网页的内容 只顾页面的 形式 尽管页面再漂亮 用户也不会欢迎 因为这样是他们根本没有得到什么东西 或者 获得的信息很少 要知道 我们所设计的是计算机工程系得网站 是为师生提供网上交流 空间与学习资料查询的地方 没有详尽的内容根本不是我们的目的 那只能是买椟还珠 舍本逐末 当然 网站的资料已经提供 我们所要做的就是将这些资料合理有序的放置在网站上 网站的框架和布局既然已经设计完成 那么网站的内容的安排也相对简单了 我们在安排 内容时以内容本身为主 兼顾美观性 每个板块都事先设计好方案 然后加入内容 3 2 3 网站链接关系网站链接关系 1 网站的链接结构 网站的链接结构 网站的链接结构是指页面之间相互链接的拓扑结构 它建立在目录结构基础之上 但 可以跨越目录 建立网站的链接结构有树状和星状两种基本方式 树状链接结构类似 DOS 的目录结构 首页链接指向一级页面 一级页面链接指向二级页面 这样的链接结构 浏览时 一级级进入 一级级退出 优点是条理清晰 访问者明确知道自己在什么位置 不会 迷 路 缺点是浏览效率低 一个栏目下的子页面到另一个栏目下的子页面 必须绕 经首页 而星状链接结构类似网络服务器的链接 每个页面相互之间都建立有链接 这种 链接结构的优点是浏览方便 随时可以到达自己喜欢的页面 缺点是链接太多 容易使浏 览者迷路 搞不清自己在什么位置 看了多少内容 所以我们采用了两种结合的方式 整 体是树状结构 但细节部分又插入星状结构 这样既条理清晰 有层次感 也方便用户浏 览 2 各部分的链接 各部分的链接 首先是首页链接出几个主要版块 如教学安排 课程建设 文档下载等等 这是树型 结构 各版块之间要通过首页的链接来访问 然后是其他内容的链接 如留言板 新闻等 链接 这些涉及到了数据库的管理 一般是通过链接访问数据库来读取资料 3 3 网站结构网站结构 网站的基本结构是树形框架 首页作为树根引申出各版块页面 各版块通过首页互相 联系 后台负责管理整个网站 由首页登陆 为了便于分析 特用框架图来解释 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 13 首页 教 学 安 排 课 程 建 设 科 研 情 况 文 档 下 载 通 讯 录 最 新 消 息 师 资 力 量 留 言 板 后台 管理 下 载 系 统 图表 4 网站结构图 网站的首页作为根目录 其他页面和资料作为枝叶 网站从首页链接出几个分页 教 学安排 课程建设 科研情况 文档下载以及通讯录等等 首页上还应当有一些最新的公 告 消息 以及计算机工程系师资力量的介绍 而后台管理作为网站的数据库及管理系统 分别管理着每一个枝叶 这当然只是粗略的构造框架 详细部分将在下一章重点实现 构造这一框架的目的是 为了更深刻的明确网站的组成及内容 从而让网站的建设工作能够有条不紊的进行 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 14 第四章第四章 网站的实现网站的实现 这一部分是整个设计阶段的主体 当然 只要已经做出了充分的准备工作 那么接下 来的事情也不算太难 建设网站就像是在建造一座房子 先是设计方案和图纸以及准备材料和工具 然后便 开始紧锣密鼓的施工了 而在建造的过程中 建筑工人也是从基础到建楼一步一步来的 正如我们在设计网站的时候也是从首页到分页 从前台到后台 逐步完成的 4 1 首页设计过程首页设计过程 网站的整体形象的体现在于首页 一个网站给人的第一印象就是主页 但是也绝不是 说 只要主页做好了 网站的整体形象就好 因为在用户对整个网站的浏览的过程中 会 自然而然的形成一种对网站的看法 这种看法是附带有感情色彩的 比如喜欢 不喜欢 没有什么感觉等 这就是整体形象的体现 这是靠主页和其它的页面相配合来完成的 所 以在制作网页的时候要考虑怎么将自己网站好的一面体现给自己的用户 又要考虑体现的 方式 侧重点 不能一锅端 都放在主页上 造成杂乱的形象 而要给人以好的可以信赖 的形象就必须从许多细节上入手 同时规范整个网站的外在表现 具体在于标志的设计 标准色彩的表达以及标准字体的设计 这些都是很重要的 有一个统一的 标准的形象是 赢得自己用户信赖的条件 4 1 1 首页框架设计首页框架设计 设计首页 要表现其首页的特点和作用 首先 首页是一个网站给人的第一印象 这 也正是浏览者对网站评价优劣的最主要因素 那么我们所要表现的不是花哨 不是冗杂 而是简洁明了 能够体现我们计算机人的特色的风格 要明确的是 我们不是艺术家 不 是附庸风雅的浪漫主义者 而是扎扎实实的工作者 我们所设计的简洁朴素的首页风格正 体现了这种思想 使人们在浏览的时候感到的不是眼花缭乱 而是清楚方便 这些从后面 展示的界面便可看出 不再多说 其次 首页是整个网站的索引 可以这么比喻 整个网站是一个线路网 那么首页便 是这个线路的主干道 其他分页则是分支 于是首页框架设计所要体现的另一个重要点在 于它的索引功能 也就是方便的链接 然后 首页所要体现的另一个重要功能就是提供醒目的新闻及介绍 当然 这些内容 可以在相应的副业里介绍 但首页位置可以给作为重要的最新的新闻内容一个给人最直接 的映像 综上所述 可以得到这样的结论 首页 简洁的风格 健全方便的链接 最新的新闻重 要的介绍 这只是一个简单的公式 但设计起来却不是那么简单 下面就讨论一下首页页 面的设计吧 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 15 4 1 2 首页页面设计首页页面设计 由于上一节介绍的首页框架 接下来便只剩下给这个框架实施了 首页最醒目的位置 是最新的新闻通告和最新动态 用 ASP 动态添加 这为新闻的更新提供了很大的方便 在 此的下面是工程系的几位老师的介绍以及个人网址链接 在首页的右上方 当然也是醒目 的位置 是滚动的留言板 这也是动态更新的 在留言板的下面是工程系的介绍和网站链 接 首页的最下面和其他一些网站一样 放着联系方法和申明 所有的动态资料都交给后 台管理吧 那也是非常方便简洁的 后面将有叙述 在设计网站首页时 我们遵从了以下规范 1 尽量精简 尽量精简 首页的作用好比一本书的封面 是为了吸引用户浏览你的网址内容 因此 首页的设 汁应以醒目为上 令人一目了然 切勿堆砌太多不必要的细节 或使画面过于复杂 在首 页上清楚列出几项要点以及主页内容即可 页面给人的第一观感最为重要 尽管这是一个 学院的网站 首页的好坏直接影响师生们对整个网站的感受 2 尽量简朴 尽量简朴 首页上的图形应力求简朴 避免耽搁用户的时间 不要忘了 这个网站设计出的目的 是为了师生的网上交流和学习 而不是娱乐或其它一些目的 图像愈大 颜色愈深 传送 页面的时间愈长 这也并不是说要完全略去图像不用 只是要注意使用图像所引起的效果 首页上的颜色最好不超过六十四种 页顶图像最好保持在大约 10KB 千字节 以下 切勿禁 不住诱惑 觉得非要放入大幅的图画不可 应考虑只用三两幅短小精悍的图像 首页整体上 要能够迅速传送 如果载入的时间超过五至十秒 很多用户就会等得不耐烦 3 使首页易于漫游 使首页易于漫游 首页的其中一个主要功能是作为漫游工具 指引用户查阅你存储在网址或其他地点的 信息 尽量使漫游过程不费吹灰之力 基于清晰明确和速度的考虑 首页上的链接项目应 只限于几个高级的类别 另外 所提供的信息不应埋藏在重重叠叠的页面之下 穿越五个 以上的联接项目已足以令人厌烦 因此 必须在广度和深度之间求取平衡 4 提纲挈领 提纲挈领 首页作为用户浏览网站的入口 除了包含重要的新闻信息之外 还应该起着提纲挈领 的作用 因此 般须载有以下事项 标题 新闻 链接 电子邮件地址 版权资料 联络信息 等等 说了这些 不如直接看的明了 图表 5 就是用 Dreamweaver MX2004 设计的首页 毕业论文 计算机工程系网站建设毕业论文 计算机工程系网站建设 16 图表 5 首页页面设计 4 1 3 首页首页 ASP 程序设计程序设计