ASP电子信息与计算机科学系网站

【摘要】
在Internet飞速发展的今天，校园网站利用网络优势可以实现无纸化办公，提高工作效率，共享教育教学资源，为教师提供多一种参与教育教学研究的方法，因此校园网站现在已经应用广泛。高校校园网站建设分为网站规划、技术方案确定、具体设计制作和日常管理与维护等阶段，应按照性／价比最优的原则选择硬件和软件平台，制作网页时要处理好风格定位、版面编排、线条与形状的选择、色彩处理等方面。在校园网站的管理工作中要注意分工协作、用户培训、安全防护和数据备份等问题。
电子信息与计算机科学系虽然建立的时间不长，但作为文经学院的第二大系，更应该做好本系网站的设计，并且使之能够进行有效的管理。为了更好的宣传电子信息与计算机科学系，在分析调查的基础上进行了网站的全新设计与实现。网站的实现采用了网页制作工具Dreamweaver MX 2004,ASP开发技术，选用了MySQL数据库进行了开发。经过几个月的测试运行，网站基本满足了系里的要求，最后对其中的不足与存在的问题进行了讨论，提出了相应的解决办法。
本文介绍了开发工具Dreamweave的功能特点，提出了校园网站的设计思想，详细分析了其系统结构和用户需求，对校园网站的各个子系统进行了具体设计，并给出其系统功能各自的主页设计方案。 [资料来源：www.doc163.com]

关键词：网站设计；网站实现；Dreamweaver；ASP；MySQL数据库 [资料来源：http://Doc163.com]

Abstract：
With rapid development and popularization of Internet,campus websites have been widely used because of its advantages such as improving working efficiency,sharing teaching resources and providing a new way to participating in teaching process for teachers and so on. The construction of university campus Website divides into Website plan,technical plan determination,homepage design and daily management and maintenance.We should follow the best performance/cost Ratio in choosing hardware and software platform,and must have a nice processing in localization,page layout arrangement,line and shape choosing,color processing etc,as designing homepage. Also we must pay attention to division and cooperation,user training,safe protection and data backup in the campus Website management work.
Electronic Information and Computer Science, though not long established, but the cultural and economic institutions as the second largest department, the department should do the site design, and enable effective management. In order to promote electronic information and computer science better, the analysis based on the investigation of the site's new design and implementation. Site implementations use Web page creation tool Dreamweaver MX 2004, ASP development technology, has selected MySQL database development. After several months of test run, the site has basically met the requirements of the department, the last of which less than with the problems discussed, the solution put forward corresponding measures. [资料来源：https://www.doc163.com]
This article introduces the functions and characteristics of Dreamweaver and gives a method of design about campus network .It also analyses the system structure and customer’s demand .Meanwhile,the subsystem of campus network has been designed and the functions of subsystem has been introduced. [资料来源：www.doc163.com]

Keywords: Website Design;Site Implementation; Dreamweaver; ASP; MySQL [版权所有：http://DOC163.com]

  [版权所有：http://DOC163.com]

目   录

[来源：http://Doc163.com]

一．引言 6
二．网站总体分析与设计 7
2.1设计思想 8
2.2 开发工具的介绍 8
2.3网站系统分析 13
2.4主页设计 14
三．详细设计 15
3.1网站所实现的功能分析 15
3.2系统文件部署 17
3.3网站规划与分析 18
3.4主页规划设计 19
四．网站的实现 20
4.1 模板的实现 20
4.2各功能模块的实现 22
五．结束语 28
六．致谢 29
七．参考文献 30

一、引言
在Internet 飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，他在人们政治、经济、生活等各个方面发挥着重要的作用。网站已成为政府、企事单位信息化建设中的重要组成部分，倍受人们的重视。对于学校的而言，为了更好的提高办学质量和学校知名度，建立一个具有鲜明特点校园网站是十分必要的。校园网站不仅是在校园内发布信息的通道与环境，也是对外联系和宣传自己的良好途径。在校园网站逐步完善的同时，电子系为了适应学校需求，加快系部发展，决定建立电子信息与计算机学系网站，对系部进行全面、深入的介绍，发布系里的精彩活动，紧密系部与学生的联系，更好的完成教育教学工作。我们采用了可视化网页设计软件Dreamweaver MX来实现电子系的网站设计，使用的版本是Dreamweaver MX 2004，它能够实现动态网页编程，能够对ASP进行处理并能够实现与Access、My sql、SQL server 或者Oracle等数据库的连接，功能强大。在此选用了标准的SQL语句来调用数据库。但是网站开发是一项很复杂的工作，下面详细讨论了该网站的开发、设计环境、实现方法及其具体的实现。在信息和网络的时代，越来越多的人们每天都要依靠网络来发布信息和获取信息，从而更加有效地学习、工作和生活。Internet 使人们的距离无限缩小，成为有史以来覆盖领域最广的展示舞台。从某种程度上来说，Internet上的各种应用都是依照现实生活中的需求来模拟设计实现的。在信息化飞速发展的今天，互联网技术日趋成熟，在网络上及时的发布信息和获得信息，已经成为当今世界流行的快捷的途径。政府，企业，学校已经纷纷接受了这种方便的途径来宣传自己，并已经可以直接在互联网上办理一些业务。 [资料来源：Doc163.com]

二、网站总体分析与设计
在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了更好的办学，提高系部知名度，特构建电子信息与计算机科学系网站。
提高办公效率，向管理要效益成为组织发展的有效手段之一；高效办公、科学管理与信息技术相结合成为提高办公效率和管理水平的主要方式。因此院系的信息化建设即网站建设成为现代企事单位基础建设的一个重要方面。
对于建立电子信息与计算机科学系的网站，从教学的角度看，教学资料的积累查阅，课件和考试复习题的共享，及时的答疑解惑，各类活动的安排都可以网页的形式发布在电子系的网站上，使教育教学的信息及时流通并有了最佳保存信息的方式。从学生的角度来看，教学资源的共享以及各种活动的发布，都促进了学生的学习，紧密了学生与系部之间的联系。电子信息与计算机科学系网站的设计与实现是完善校园网也是教学工作必不可少的工作。 [版权所有：http://DOC163.com]

 

[版权所有：http://DOC163.com]

2.1设计思想
通过网站，全面宣传，展示电子信息与计算机科学系风采、优点与特色，发布系里的重大活动安排与招生政策，增强学生与系部之间的联系，在Internet上实现完成部分校务，提高办事效率。
2.2开发工具的介绍
Dreamweavar是一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite／BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等多媒体格式和动态HTML、基于团队的Web创作。目前使用得最多的是Dreamweaver MX 2004和Dreamweaver8．0两个版本，前者在功能上比后者强大，能够实现动态网页编程，在此选用Dreamweaver MX 2004．
Macromedia Dreamweaver MX 2004 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。无论您愿意享受手工编写 HTML 代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver 都会为您提供有用的工具，使您拥有更加完美的 Web 创作体验。
利用 Dreamweaver 中的可视化编辑功能，您可以快速地创建页面而无需编写任何代码。您可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。您可以在 Macromedia Fireworks 或其他图形应用程序中创建和编辑图像，然后将它们直接导入 Dreamweaver，或者添加 Macromedia Flash 对象，从而优化您的开发工作流程。

Dreamweaver 还提供了功能全面的编码环境，其中包括代码编辑工具（例如代码颜色和标签完成）；有关 HTML、层叠样式表 (CSS)、 JavaScript、 ColdFusion  标记语言 (CFML)、Microsoft Active Server Pages (ASP) 和 JavaServer Pages (JSP) 的参考资料。Macromedia 的可自由导入导出 HTML 技术可导入您手工编码的 HTML 文档而不会重新设置代码的格式，您可以随后用您首选的格式设置样式来重新设置代码的格式。Dreamweaver 还使您可以使用服务器技术（例如 CFML、ASP.NET、ASP、JSP 和 PHP）生成由动态数据库支持的 Web 应用程序。
Dreamweaver 可以完全自定义。您可以创建您自己的对象和命令，修改快捷键，甚至编写JavaScript 代码，用新的行为、属性检查器和站点报告来扩展 Dreamweaver 的功能。 [版权所有：http://DOC163.com]

Dreamweaver的编辑环境
（1） 工作区布局
在Windows  中首次启动Dreamweaver  MX时，会出现“工作区设置”窗口，从中可以选择一种工作区布局，提供的三种不同的工作界面,分别是“Dreamweaver  MX工作区”“Dreamweaver  4工作区”和“Homesite/Coder-Style代码编者样式”.
确定了工作区后，如果希望改为其它布局，可以选择“编辑”菜单中的“参数选择”命令，切换到不同的工作区。
（2） 窗口和面版概述
应用Dreamweaver  MX时，首先出现的是Dreamweaver  MX的操作界面窗口

[资料来源：http://www.doc163.com]

现将其组成部分说明如下。
插入栏：包含用于将各种类型的对象（如图像、表格和层）插入到文档中的按钮。每个对象都是一段  HTML  代码，允许您在插入它时设置不同的属性。例如，您可以在“插入”栏中单击“图像”图标插入一个图像。如果您愿意，可以不使用“插入”栏而使用“插入”菜单插入对象。
文档工具栏：包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些普通操作（如在浏览器中预览）。
文档窗口：显示您当前创建和编辑的文档。
属性检查器：用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。
面板组：是一组停靠在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。
站点面板：使您可以管理组成站点的文件和文件夹。
标题栏：显示的是页面的目录文件夹名及打开的文件名，如果文件中包含未保存的修改部分，标题栏中将在显示文件名和星号（*）。
Dreamweaver 提供了多种此处未说明的其他面板、检查器和窗口，例如“CSS 样式”面板和“标记检查器”。若要打开 Dreamweaver 面板、检查器和窗口，请使用“窗口”菜单。

 

菜单概述
 “文件”菜单和“编辑”菜单包含“文件”菜单和“编辑”菜单的标准菜单项，例如“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。“文件”菜单还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。“编辑”菜单包含选择和搜索命令，例如“选择父标签”和“查找和替换”。在 Windows 中，“编辑”菜单还提供对 Dreamweaver 菜单中“首选参数”的访问；在 Macintosh 中，使用 Dreamweaver 菜单可以打开“首选参数”对话框。
“视图”菜单使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和 Dreamweaver 工具及工具栏。
“插入”菜单提供“插入”栏的替代项，用于将对象插入您的文档。
“修改”菜单使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。 [来源：http://Doc163.com]
“文本”菜单使您可以轻松地设置文本的格式。
“命令”菜单提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令，以及一个使用 Macromedia Fireworks 优化图像的命令。
“站点”菜单提供用于管理站点以及上传和下载文件的菜单项。
提示：以前版本的 Dreamweaver 中的“站点”菜单的部分功能现在可以在“文件”面板的“选项”菜单中找到。
“窗口”菜单提供对 Dreamweaver 中的所有面板、检查器和窗口的访问。（要访问工具栏，请参见“视图”菜单。）
“帮助”菜单提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统，还包括各种语言的参考材料。
除了菜单栏菜单外，Dreamweaver 还提供多种上下文菜单，您可以利用它们方便地访问与当前选择或区域有关的有用命令。若要显示上下文菜单，右击 (Windows) 或在按住 Control 键的同时单击 (Macintosh) 窗口中的某一项。 [资料来源：http://www.doc163.com]

使用 Fireworks
Dreamweaver 和 Fireworks 识别并共享多种相同的文件编辑过程，其中包括对链接、图像映射、表切片等的更改。这两种应用程序一起提供了在 HTML 页中编辑、优化和放置 Web 图形文件的简化工作流程。 [资料来源：https://www.doc163.com]

在 Dreamweaver 中优化 Web 页中的图像
这次设计使用的是Macromedia Fireworks优化图像。
若要优化图像，请执行以下操作：
1 打开包含要优化的图像的页面，选择图像，并执行下列操作之一：
■ 单击图像属性检查器中的 “在 Fireworks 中优化”按钮。
■ 选择 “修改”>“图像” >“在 Fireworks 中优化图像”。
将显示 “Fireworks 优化图像”对话框。
2 单击 “确定”。
在 Dreamweaver 中打开 Fireworks 弹出菜单
Fireworks 支持基于图像的弹出菜单和基于 HTML 的弹出菜单。 Dreamweaver 仅支持基于HTML 的弹出菜单。在 Dreamweaver 中，您可以打开 Fireworks 弹出菜单并对所有菜单项属性 （除了基于图像的弹出菜单的背景图像外）进行编辑。
若要编辑基于图像的弹出菜单中的背景图像，请选择 Dreamweaver 中要更新的图像，然后单击“编辑”。有关编辑 Fireworks 图像的信息，请参见第 313 页的“从 Dreamweaver 编辑Fireworks 图像或表”。
如果要编辑的弹出菜单是基于图像的弹出菜单，而您要保留基于图像的单元格背景，则应在Fireworks 中 （而不是在 Dreamweaver 中）编辑弹出菜单。 [来源：http://www.doc163.com]

2.3网站系统分析 [来源：http://www.doc163.com]

网站整体框架的设计：
网站框架的设计包括整个网站的导航栏与页面尾部信息，使用了DreamWeaver的模板功能。
设计方法：
1. 确定整个网站的导航栏和页面尾部信息。
2. 制作只包含这两个信息的网页
3. 把这个网页另存为模板
4. 以后每制作一个网页只要应用到这个模板即可 [资料来源：http://doc163.com]

网站栏目的确定
建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确．层次清晰．如果网站结构不清晰，目录庞杂，内容东一块西一块．结果不但浏览者看得糊涂，自己扩充和维护网站也相当困难．网站的题材确定后，就开始组织和收集相关的资料内容．但如何组织内容才能吸引学生来浏览网站呢?栏目的实质是—个网站的大纲索引，索引应该将网站的主体明确显示出来．一般的网站栏目安排要注意紧扣主题，我们要将主题按一定的方法分类并将他们作为网站的主栏目．主题栏目个数在主栏目中要占绝对优势，这样能使我们的网站显得更专业，主题突出，容易给人留下深刻印象．

网站的定位：
首先在网站建设之前要对网站进行准确的定位，作为电子信息与计算机科学系的网站，应该结合系部设置的专业体现出电子信息与计算机科学系本身的特点。建站的目的是让网络更好地为电子系服务。针对当前的本科和专科专业，网站要起到很好的宣传作用。另外，网站能提供教学互动的全新的方式，实现资源的共享，包括本系工作的安排等。 [资料来源：www.doc163.com]

2.4主页设计
网站建设的首要问题是制定网站建设规划。要对系内师生员工和系外各界人士与普通浏览者的不同需求进行认真分析、调研，结合本系的教学、科研、管理作的职能分工确定网站主题和功能定位，并努力将电子系文化建设的思想贯穿于网站建设的各个阶段。
按照可实现的功能确定网站的主体框架，设计出层次分明的网站栏目结构，进而初步确定相应的目录结构。要建立学院首页、单位概况、专业设置、师资队伍、教学文件、实践教学、考研在线、专升本、团总支工作、图片新闻和首页一级栏目，据此设定相应的二级栏目和三级栏目，此时要注意：按照浏览习惯，原则上栏目层次设定不应超过三层。目录名称应使用意义明确的英文或汉语拼音，最好与栏目层次形成对应关系，图片文件应放在专门的目录当中。接着是确定网站域名，网站域名一般可采用英文缩写或者汉语拼音简写。好的域名不仅要容易记忆而且便于理解，同时也能反映出网站的特色。
网站栏目结构被认为是网站优化的最基本要素，合理的网站栏目结构，无非是能正确表达网站的摹本内容及其内容之间的层次关系，站在用户的角度考虑，使得用户在网站中浏览时可以方便地获取信息，不至于迷失，做到这一点并不难，关键在于刘网站结构重要性有充分的认识。归纳起来，合理的网站栏目结构土要表现在如下几个方面： [资料来源：https://www.doc163.com]
1通过主页可以到达任何一个一级栏目首页、二级栏口首页以及最终内容页面；
2通过任何一个网页可以返回上一级栏目页面并逐级返回主页；
3．主栏目清晰并且全站统一；
4通过任何一个网页可以进入任何一个一级栏目首页。

三、详细设计
3.1网站所实现的功能分析
在网站功能模块的分析基础之上，我们对网站作了进一步的分析。本网站主要的功能模块有11个，其中，每一部分的介绍如下：
学院首页：从电子信息与计算机科学系的网页链接到学院首页
单位概况：设定一个二级目录——系简介，介绍电子信息与计算机科学系的总体概况
专业设置：该目录下设有本科专业设置和专科专业设置，分别介绍我系各专业
师资队伍：下设教师信息、主任寄语和首席教师三个二级目录，全面概括了我系师资力量
教学文件：包括学科建设、科研成果和优秀课程三个二级目录，其中优秀课程——大学计算机基础又建立了系首页、首页、课程简介、课程负责人、教学文件和实践教学目录。
实践教学：设定二级目录——系特色，介绍了展示我系风采的数学建模大赛、电子设计大赛和齐鲁软件大赛
考研在线：该目录下有计算机应用技术专业培养方案、教学大纲和鸿雁传书三个目录，方便考研同学之间的交流
专升本：专升本政策、教学大纲和专升本交流为专升本的同学做好铺垫
团总支工作：学院党总支及各支部设置，介绍团总支的工作
图片新闻：介绍我系的精彩活动及新闻

[来源：http://www.doc163.com]

首页：链接到电子信息与计算机科学系的网站首页 [资料来源：https://www.doc163.com]

整体综合设计如图3.1所示：

  [来源：http://Doc163.com]

图3.1 [版权所有：http://DOC163.com]

3.2系统文件部署
设计一个较大的系统时，文件部署的规范是比较重要的，这样便于维护。文件部署如图3.2所示。 [版权所有：http://DOC163.com]

 
图3.2

3.3网站规划与分析
网站内容的布置
内容的布置是指网页文件的合理组织，一个好的站点应该是文件组织有序，分门别类的放置便于网站管理员今后对网站进行维护与更新。
网站外观的调整
网页外观的控制是通过CSS（层叠样式表）来实现的。
CSS，层叠样式表，“层叠”的意思，也就是说在同一个Web文档中可以有多个样式单存在，这些样式单根据所在的位置，拥有不同的悠闲级，优先级高的，就会在最后显示时采用。从样式单插入的形式来看可以分为以下3中：
内联式样式单：它利用现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中。
嵌入式样式单：它和Javascript一样，可以嵌入到HTML文件的头部中去（<html>和<body>标记之间），使用<style>和</style>容器装载，例如：“<style>p{color:red;font-weight:bold}</style>”，这样会对页面中所有<p>标记起作用。
外部式样式单：它是一种保存在外部的样式单文件，外部文件以“css”为扩展名，例如“
<link  rel=style=stylesheet  href=”main-sheet.  Css”  type=”text/css”>”。 [资料来源：www.doc163.com]
　层是被分配了绝对位置的 HTML 页面元素 － 具体地说，是 div 标签或任何其他标签。层可以包含文本、图像或其他任何可在 HTML 文档正文中放入的内容。
“层”是dreamweaver 中另处一种可以进行排版的工具。它可以被定位在页面的任意位置，并且其中可以包含文本、图像等所有可直接插入至网页的对象。 [资料来源：http://Doc163.com]

 

[来源：http://Doc163.com]

 

3.4主页规划设计
我们在设计界面时，应该注意这样一个基本前提：在单独的一页界面上，清楚地显示这一页的明确目的!只有容易理解的页面，才能让用户知道该做什么并且从哪里人手．这个基本前提，又被扩展为一系列的4个步骤：
①每一页界面的重点在于完成一个单一的任务；
②解说并且陈述这项任务；
③让屏幕的内容适合这项任务；
④提供下一个任务的链接；
除了上面被列出了的4个步骤，我们还需要注意下列5个视觉设计原则来加强我们的界面：
①信息的层次：我们应该清楚首先让用户看见什么信息和用户第一步需要做什么．
②焦点和强调：焦点和强调的原则在于优先放置重点项目．一旦明确了中心思想，就应该强调需要突出的单元，并使它独立于其它单元．因为这些信息对用户来说才是最重要的．
③结构和平衡：结构和平衡是两个最重要的视觉设计原则．没有视觉单元的内在结构平衡，那么视觉设计将缺乏顺序和意义，更重要地是结构和平衡的缺乏使用户很难清楚地理解界面．
④单元的关系：一个视觉单元的放置能传达特定的关系．例如，一个列表框和旁边按钮的位置将影响这个列表框，应该说按钮和列表框之间的空间的关系在那里．同样，空间

的布局将传达出视觉单元之间的交互关系．
⑤易于理解的流动性：这个原则强调一个简单的意图如何变得易于用户理解和传送．可读性和流动性决定一个对话框或另外的接El部件的可用性设计．比如恰当的帮助提示
和下一步的导航连接等等． [资料来源：http://doc163.com]

  [资料来源：http://www.doc163.com]

四、网站的实现
4.1模板的实现：
Macromedia Dreamweaver MX 2004 模板是一种特殊类型的文档，用于设计“固定的”页面布局；您可以基于模板创建文档，从而使创建的文档继承模板的页面布局。设计模板时，可以指定在基于模板的文档中用户可以编辑文档的哪些区域。
电子系网站模板的设计界面如图4.1所示：
 
图4.1 [来源：http://Doc163.com]

 

[资料来源：https://www.doc163.com]

 

[资料来源：Doc163.com]

模板的创建：
若要创建模板，请执行以下操作：
1 打开要另存为模板的文档：
■ 若要打开一个现有文档，请选择 “文件” >“打开”，然后选择该文档。
■ 若要打开一个新的空文档，请选择“文件”>“新建”。在出现的对话框中，选择“基本页”或 “动态页”，选择要使用的页面类型，然后单击 “创建”。
2 文档打开时，执行下列操作之一：
■ 选择 “文件”>“另存为模板”。
■ 在“插入”栏的“常用”类别中，单击“模板”按钮上的箭头，然后选择“创建模板”。
注意：除非您以前选择了“不再显示此对话框”，否则您将收到一个警告，表示您正在保存的文档中没有可编辑区域。单击 “确定”将文档另存为模板，或单击 “取消”退出此对话框而不创建模板。
出现 “另存为模板”对话框。
 
3 从“站点”弹出菜单中选择一个用来保存模板的站点，并在“另存为”文本框中为模板输入一个唯一的名称。 [资料来源：Doc163.com]
4 单击 “保存”。
Dreamweaver 将模板文件保存在站点的本地根文件夹中的 Templates 文件夹中，使用文件扩展名 .dwt。如果该 Templates 文件夹在站点中尚不存在，Dreamweaver 将在您保存新建模板时自动创建该文件夹。
注意：不要将模板移动到 Templates 文件夹之外或者将任何非模板文件放在 Templates 文件夹中。此外，不要将 Templates 文件夹移动到本地根文件夹之外。这样做将在模板中的路径中引起错误。
4.2各功能模块的实现：
下面以单位概况、教学文件、专业设置和团总支工作为例说明功能模块的实现，其他如师资队伍、实践教学等类似。
单位概况：
主要代码如下：
<td width="3%"
height="21" valign="middle"><img src="../images/marker_3.gif" width="8" height="13" />
</td>
 <td width="44%">
<a href="departmentintro.htm" target="_parent" class="STYLE14">系简介</a></td>
<td width="53%"><span style="font-size: 14px; font-family: &quot;宋体&quot;">[2009-06-21]</span></td>

如上代码设置了系简介的相关属性和链接。系简介链接到departmentintro.htm页面。链接后的页面如图4.2.1所示：
 
图4.2.1 [资料来源：https://www.doc163.com]

教学文件：
教学文件目录下有学科建设、科研成果和优秀课程三个二级目录，下面以优秀课程为例来说明教学文件的具体实现。
优秀课程为大学计算机文化基础，实现的主要代码如下：
 <a href="jisuanjijichu.htm"
id="MMMenu0412190537_2_Item_2"
class="MMMIVStyleMMMenu0412190537_2" onmouseover="MM_menuOverMenuItem('MMMenu0412190537_2');">优秀课程
  </a>
优秀课程链接到大学计算机文化基础的页面如图4.2.2：
 

图4.2.2 [资料来源：www.doc163.com]

专业设置：
专业设置分为本科专业设置和专科专业设置，其代码如下：
<td rowspan="2">
<a href="javascript:;"
onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0616111051_1', 'MMMenu0616111051_1',0,38,'menu_r1_c6');">
<img name="menu_r1_c6"
src="menu_r1_c6.gif"
width="83"
height="38"
border="0"
id="menu_r1_c6" alt="" />
</a></td>
打开本科和专科专业设置后的界面如图4.2.3和图4.2.4所示：
 
图4.2.3

[来源：http://www.doc163.com]

 
图4.2.4 [资料来源：http://doc163.com]

 

团总支工作：
导航团总支工作下设学院党总支及各支部设置，主要代码如下：
<td>
<a href="http://wenjing.ytu.edu.cn/computer/tuanzongzhi.html" target="_blank"
onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0412190359_7', 'MMMenu0412190359_7',0,37,'menu_r2_c18');">
<img name="menu_r2_c18" src="menu_r2_c18.gif" width="87" height="37" border="0" id="menu_r2_c18" alt="" />
</a></td>

链接的页面如图4.2.3所示： [版权所有：http://DOC163.com]

 
图4.2.3 [版权所有：http://DOC163.com]

当单击团总支工作下的新闻标题后，就进入活动文章界面，如图4.2.4：
 
图4.2.4
主要代码如下：
<td
width="2%"
valign="middle">
<div align="left">
<img src="images/marker_3.gif" width="7" height="7" />
</div></td>
<td width="77%"
class="STYLE3"
style="font-size: 14px">
<a href="tuanzongzhinews/news200906051.html" target="_blank">关爱我们的家——世界环境日公益活动
</a></td>
<td width="21%"
class="STYLE3"
style="font-size: 16px">[2009-06-05]</td>
五．结束语
校园网站是现在各个学校信息化的一个主要内容，也是学校对外进行宣传的一个窗口，电子信息与计算机科学系的网站就是电子系宣传以及各种工作的必要。利用网络优势学校可以实现无纸化办公，共享教育教学资源，提高工作效率，促进信息技术与学科整合，电子系网站为教师和学生提供多种 平台，为教师提供多一种参与教育教学研究的方法。

由于时间的限制，本网站在设计与实现过程中有以下功能有待完善，应该建立一个后台登陆系统，以便能够及时的发布系里各类活动通知等。
通过本论文的制作，我对学习Dreamweave 可视化网页设计的思想有了更加深刻的理解，也更好的对其核心技术进行掌握和巩固。在电子信息与计算机科学系网站的设计中，我遇到了很多很多的问题，基本上都是新问题，许多问题的解决都得益于导师与同学的帮助，导师的指点真的能让我感觉到什么是“柳暗花明又一村”， 我深刻地感受到了与人合作的可贵。从这方面来说，更好地培养了我与人协作的意识，增强了我的团队观念，这对我今后的工作必将产生深远的影响。
经过开发这个网站，我越来越感到Dreamweave帮助系统的强大功能，书中看到的毕竟是有限的，所遇到的所有问题，帮助系统基本上都能为你提供帮助，应该说使用Dreamweave帮助，是开发网站的快捷方法，同时，也提高了我的英文阅读能力。
总之，这次毕业设计是对我大学三年的最后一次测试，它考察了我三年来对所学知识的综合应用能力、独立思考能力、统筹安排能力和团队协作能力，培养了我独立分析和解决问题的能力，使我积累了一定的工作经验，为我将来的工作奠定了基础。
我的毕业设计已接近尾声，虽然我们设计的网站还是比较粗糙的，但是在这段时间里，我们积极投入到网站的设计当中，遇到问题大家就一起想办法解决，然后再向老师请教！在这次毕业设计中，我们学会了很多网页设计的方法，特别是老师教了很多网页设计方面的技巧。每次小组成员的聚会，用一定的时间大家交流一下，分析网页设计中的一些问题。从更改主题、确定方向、网页架构设计、选定制作软件，到真正在网页上制作，我们把每一次讨论都记录下来，确实了解每次的进度是什么。花一些时间去收据相关的资料，浏览不同的网站找寻设计技巧，大家也学着互助、产生公识、交流，一切都是宝贵的经验。

六．致谢 [资料来源：https://www.doc163.com]

在本论文的写作过程中，我的导师梁振军老师倾注了大量的心血，从选题到开题报告，从写作提纲，到一遍又一遍地指出每稿中的具体问题，严格把关，循循善诱。梁老师多次询问研究进程，并为我指点迷津，帮助我开拓研究思路，精心点拨、热忱鼓励。梁老师一丝不苟的作风，严谨求实的态度，踏踏实实的精神，不仅授我以文，而且教我做人，给以终生受益无穷之道。对梁老师的感激之情是无法用言语表达的。同时我还要感谢在我学习期间给我极大关心和支持的各位老师以及关心我的同学和朋友。
我们的毕业设计制作也基本完成了。在这段时间里，我学到了DREAMWEAVER  MX应用技术和知识技能，这些都与指导老师的教导和严格要求是分不开的。在此我要再次向我的指导老师——梁振军老师表示最衷心的感谢，在整个毕业设计的制作和论文撰写的过程中，梁老师着重培养了我的自学能力和自我解决问题的能力，使我对DREAMWEAVER  MX有了一个全新的认识。梁老师以其渊博的知识和独特的思维方式指导我的学习，是我受益非浅。同时我要感谢与我一起这次毕业设计制作的同学。
最后再次感谢老师和同学给了我大量的意见和帮助。 [来源：http://Doc163.com]

七．参考文献
 [1]前沿电脑图像工作室，《巧学巧用Dreamweaver、Fireworks、Flash制作网页》， 北京：人民邮电出版社，1999.
[2]杨纪梅，《DREAMWEAVER网页设计与制作完全手册》，北京：清华大学出版社，2007
[3]耿相真，《中文版DREAMWEAVER 8网页设计轻松现场实战》，北京：航空工业出版社，2007
[4]吕洋波，《DREAMWEAVER+ASP动态网站开发从入门到精通》，北京：清华大学出版社，2007
[5]于慧，《DREAMWEAVER CS3标准教程》，北京：中国青年出版社，2008
[6]前沿电脑图像工作室，《巧学巧用Dreamweaver、Fireworks、Flash制作网页》，北京:人民邮电出版社.
  [资料来源：http://Doc163.com]