《学院招生网网页设计与制作毕业论文.doc》由会员分享，可在线阅读，更多相关《学院招生网网页设计与制作毕业论文.doc（26页珍藏版）》请在三一办公上搜索。
1、摘 要随着经济社会的发展，计算机已被应用到社会生活的各个领域。与此同时，互联网作为信息技术的通信桥梁连接着全球的计算机，而网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在Internet上表现出其及其重要的地位，并发挥着其及其重要的作用。无论是在国内还是国外都得以迅速的发展和壮大，并被人们重视和关注。互联网已经彻底的改变了世界，互联网的世界里蕴藏着无限的可能，在这种情况下，各行各业及其个人、单位、工厂、企事业等等在网上构筑属于自己的网络信息平台，保护自己的网络资源并在互联网上开辟自己的市场和消费群体，以及构造自己的数字化世界和加强全球范围内不同地域的人们联系交流等等活动也就显的
2、日益重要。于是各种各样的网站便如雨后春笋般地出现鱼龙混杂且良莠不齐。Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决方案，小至个人Web页面开发，形形色色，五彩缤纷，网站建设和网页制作也成为计算机网络领域最热门的话题。本文讲解了一个以学院招生为主题的网站。论文将对学院招生网网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用DIV + CSS作为工具语言进行网页设计与制作的实际操作，分别对基础对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互，
3、窗口和框架进行详细描述，并利用具体的实例进行验证。首页主要是包括首页、招生指南、院系导航、学院概述、招生工作、常见问题、网上报名、信息查询八个模块组成，采用DIV+CSS样式布局。关键词：DIV+CSS、JavaScript、web AbstractAlong with the development of society and economy, the computer has been used to social life in all areas. At the same time, the Internet as information technology communicati
4、on bridge connection of the global computer, and web sites as the main form of network information and the main bearing or Internet information, who in the Internet borrows its and its important position, and is playing the its and its important role. Both in domestic and abroad are the rapid develo
5、pment and expansion, and taken seriously by people and attention. The Internet has completely changed the world, the world of the Internet contains the infinite possible, in this case, all walks of life and personal, unit, factory, enterprise or business the and so on in building their own online ne
6、twork information platform, the protection of its own network resources in the Internet and open up their markets and consumer groups, and structure of the digital world and strengthen their global range of different regions in people link exchanges and other activities will be increasingly importan
7、t. So all kinds of website will have mushroomed miraculously appear good and evil people mixed up and the good and bad are intermingled. The Internet is the rise and with the Web page as the carrier of the network information widely spread and application, make website construction and Web pages get
8、 development space, large enterprise products to sell, the post-sale service, the solutions to the small personal Web page development, all kinds, colourful, website construction and creating Web pages also to become a computer network domain the most popular topic. This paper explained a with the c
9、ollege recruit students as the theme of the website. Paper will be to college admission nets web design and production methods and tools on research and discussion. Introduced in WEB design and production on the basis of language, this paper use DIV + CSS language as a tool for WEB design and produc
10、tion of the actual operation respectively, the foundation of JavaScript object language, internal object system and the use of the WEB page information interaction, window and frame is described in more detail, and use a specific example verified. Home page is mainly including the head, and recruit
11、students guide, departments navigation, college overview, recruit students work, common problem, online application, information query eight modules, using DIV + CSS style layout. Key word : DIV+CSS、JavaScript、web前 言人类已进入21世纪,科学技术突飞猛进,经济知识和信息产业初见端倪,特别是信息技术和网络技术的讯速发展和广泛应用,对社会的政治,经济,军事,文化等领域产生越来越深刻的影响
12、,也正在改变人们的工作,生活学习,交流方式。信息的获取,处理,交流和应用能力,已经成为人们最重要的能力之一。在不久的将来知识经济将占世界经济发展的主导地位,国家综合国力和国际竞争能力越来越取决于教育发展,科学技术和知识创新的水平,教育在经济和社会发展过程中将呈现出越来越突出的重要作用。随着Internet的出现，网络正在改变整个世界，由于Internet具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点，已经发展成为新的传播媒体，而将教育和网络相结合，将会更好的推动教育的发展。现在不仅很多大学和众多企业部门都已经建立了自己的网站，而且学院招生网站也如雨后春笋般大量的出现，通过
13、计算机网络实现宣传、交流及资源的整合由于时间仓促和水平有限，不当之处在所难免，请各位老师批评指正。第一章 开发工具及功能设计1.1 网站设计的基本知识 静态编程最重要的特征就是由程序自动生成网页，最终形成供浏览器解释的HTML语言。那么如何设计出精美的网页以及动态更新交互的站点，这就需要网页编程与网页制作相结合。本网页主要介绍网站建设所必须掌握的基础知识，如网页文档的结构、超链接、表格和表基本的单等HTML标识的写法要求，网页编辑的常用工具、动态网页的设计以及网站的发布等相关知识。DreamweaverCS3是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweave
14、rCS3更新发布，更坚定DreamweaverCS3在该领域的地位。集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。DreanmweaveCS3软件也一直是不少网友钟情的网页设计工具，除了它强大的动态效果制作能力之外，还有可视化编辑界面，功能更多的CSS支持CSS可视化设计。还可以用Spry框架进行动态用户界面的可视化设计和部署。它们可以帮助快速设计好页面并开始运行，并且在代码中提供了丰富的注释。DreamwerverCS3将可视化布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计
15、人员都能够快速创建界面，使操作界面更是独具特色。1.2 DreamweaverCS3的安装首先，安装界面给人的感觉比Macromedia门下的8.0要漂亮许多，Splash也很有质感。这次DreamweaverCS3新增了SprySpry。Spry是Adobe推出的Ajax Framework(Spry DemoSpry Demo)，它能与Dreamweaver无缝的整合，直接用拖拉的方式完成程序代码的编写。图1-1 Dreamweaver 8与9(Alpha1)的启动封面对比图1-2 DW CS3的主界面图1-3 安装向导正在初始化图1-4 授权协议图1-5 详细信息图1-6 选择安装位置图
16、1-7 安装信息概要图1-8 安装进在正行中图1-9 安装结束1.3 DreamweaverCS3功能介绍DreamweaverCS3 包括了与 Photoshop CS3 的增强的集成功能。现在，设计人员可以在 Photoshop 中选择设计的任一部分（甚至可以跨多个层），然后将其直接粘贴到 DreamweavercCS3 页面中。DreamweaverCS3 会显示一个对话框，可在其中为图像指定优化选项。如果需要编辑图像，只需双击图像即可在 Photoshop 中打开原始的带图层 PSD 文件进行编辑。1.3.1浏览器兼容性检查DreamweaverCS3 中新的浏览器兼容性检查功能可生成
17、报告，指出各种浏览器中与 CSS 相关的呈现问题。在代码视图中，这些问题以绿色下划线来标记，因此您可以准确知道产生问题的代码位置。1.3.2 Adobe CSS Adobe CSS Advisor 网站包含有关最新 CSS 问题的信息，在浏览器兼容性检查过程中可通过 DreamweaverCS3 用户界面直接访问该网站。 DreamweaverCS3 提供一组预先设计的 CSS 布局，它们可以帮助您快速设计好页面并开始运行，并且在代码中提供了丰富的内联注释以帮助您了解 CSS 页面布局。Web 上的大多数站点设计都可以被归类为一列、两列或三列式布局，而且每种布局都包含许多附加元素（例如标题和脚
18、注）。DreamweaverCS3 提供了一个包含基本布局设计的综合性列表，您可以自定义这些设计以满足自己的需要。1.3.3 框架Ajax 的 Spry 框架通过 Adobe Dreamweaver CS3，可以使用 Ajax 的 Spry 框架进行动态用户界面的可视化设计、开发和部署。Ajax 的 Spry 框架是一个面向 Web 设计人员的 JavaScript 库，用于构建向用户提供更丰富体验的网页。Spry 与其它 Ajax 框架不同，可以同时为设计人员和开发人员所用，因为实际上它的 99% 都是 HTML。请参阅以可视方式构建 Spry 页。Spry 构件Spry 构件是预置的常用用
19、户界面组件，可以使用 CSS 自定义这些组件，然后将其添加到网页中。使用 DreamweaverCS3，您可以将多个 Spry 构件添加到自己的页面中，这些构件包括表格、折叠构件、选项卡式界面和具有验证功能的表单元素。请参阅添加 Spry 构件。Spry 效果是一种提高网站外观吸引力的简洁方式。这种效果差不多可应用于 HTML 页面上的所有元素。您可以添加 Spry 效果来放大、收缩、渐隐和高亮显示元素；在一段时间内以可视方式更改页面元素；以及执行更多操作。第二章 网站需要分析1.1建站工具编辑网页的工具有很多，但是我们一般用的是Macromedia公司的网页制作三剑客来制作网页。三剑客分别为
20、Dreamweaver CS3、fireworks、flash。1.2网站建设的三个阶段（1）、网站的定位 即网站设计的最终目标及指导方针。确立网站的主题，解决为谁设计、吸引谁，交流什么。（2）、制作网页 通过网页设计体现网站整体协调一致的风格。网站的色彩基调、配色方案、页面色彩的格调、页面构图及图片、动画的处理等都要反复研究。方便的导航设计使用户易于访问站点中的资源。（3）、网站的发布与维护 完成对网站所有文件的测试并上传到服务器，进行网站的推广和宣传，建立信息的收集反馈系统，及时更新网页。1.3网站设计步骤（1）、设定网站主题并搜集资料 分析网站的访问对象是什么样的群体，确定网站要为访问者
21、提供什么样的服务。围绕网站设计要达到的目标，进一步决定网站展示的内容和网站要实现的功能。（2）、建立站点的目录结构 用来分类保存网站中的不同的资源，精心设计的网站目录结构有利于网站类容的扩充和移植需要。很多初学者往往不注意建立站点的目录结构，所有的文件都保存在一个目录中，这给今后的网站维护和扩充带来了很大的困难。例如，files保存非index之外是文件，images保存图片文件，sounds保存声音文件等等。（3）、建立网页的链接关系 网页的链接结构要层次清晰、访问方便快捷，就要设计网站中网页的链接关系。用最少的点击打开网站内的任何一个网页，为用户提供最便捷的服务。（4）、页面设计与网页制作
22、 网站图标、网页标题、导航栏设计、各页风格、页面规划、便捷的链接、合理使用框架、巧用背景色、合适的图片、网页空白。（5）、网站测试 已经建好的一个设计精美的网站在发布之前要进行严格的测试。如果在测试过程中发现了错误，就要及时修改，在准确无误后，可正式在Internet上发布。（6）、网站发布 把制作好的网站发布到自己的服务器系统上，也可以使用上传工具把网站发布到ISP提供的虚拟主机上。在国外或国内网站提供免费的主页空间和域名，上传后就可以使用浏览器访问自己的网站了（7）、推广宣传与后期维护 网页上传后，及时更新网站内容，为浏览者提供丰富、及时的信息。网页的更新速度是衡量一个网站的主要目标。同时
23、为了增加网站的访问量，要采用各种方法加以推广。例如在搜索引擎上注册，发布网络广告提供免费服务或者使用传统的促销媒介等等方式来推广网站。第三章 网站的设计3.1 网站的总体设计 3.1.1 网站结构图本网站的基本结构，网站主要分为：首页、招生指南、院系导航、学院概述、招生工作、常见问题、网上报名、信息查询等8个模块。 3.1.2 网站风格本网站的色调为蓝色，白色混搭，页面美观大方、简洁。3.2 网站的制作 3.2.1 建立站点选择“站点”，单击“管理站点”，单击“新建”，选择站点。如图（31）： 图31 在按上图完成所填部分，在面板组就会出现站点等文件夹了。在右边的面板组中选择“站点”文件名，右
24、击“新建文件”，命名为“index”，完成首页的命名。 3.2.2 页面设置首先双击“index.html”,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目。首页设置的属性如图（32）所示：图32 3.2.3 网页布局本网页采用div+css和表格布局相混用，clear为清除浮动，整体div+css代码设置如图（33）所示：图33在网页布局中
25、一般采用表格来进行布局。下面简单介绍下表格的布局方式。通过单击“插入”面板中的“常用”选项中的“表格”来打开“表格”对话框，对话框可分为“表格大小”、“页眉”、“辅助功能”三部分。对表格的各项属性设置如图（34）所示：图34 3.2.4 插入图片图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。首先将游标停留在要插入图像的位置，通过单击“常用”栏中的“图像”的下拉按钮，单击第一个“图像”按钮，随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件。如图（34）所示：图34 3.2.5 插入文本文字是人类
26、语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，它是最关键的因素。插入文本的两种方式：一种是在网页编辑窗口中直接用键盘敲入文本；另一种是复制文本的方式。直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下：打开文本编辑软件（如Microsoft Word），选中要复制的文本，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。 3.2.6 建立子页面制作子网页的一
27、般步骤和首页的步骤差不多。如果说你的首页中有标题的话，那么在子网页中也一定要和首页的位置是一样的。在子网页中一般需要大量的文字叙述或者图片，这就需要做好细节工作了。 第四章 网站的实现 4.1 前台显示说明网站首页一、前台首页显示下面通过首页来说明网站整体的功能：（1）首页的最顶部显示校园招生网站头部banner。（2）站点首页，招生指南、院系导航、学院概述、招生工作、常见问题、网上报名等各个栏目，后台可以控制排序和位置调整，或显示条数设置。（3）首页中的各个栏目可以直接点击出来查看的详细信息。（4）网站首页的设计涵盖了网页导航的显示的主要内容为查看网站的人，提供了网站各个子页的大致内容，方便
28、了解网站的主题构造和经典内容。待添加的隐藏文字内容2（5）设有专题显示和网站调查系统，以及网站的一些统计数据信息，可以按不同条件进行文件信息搜索。（6）最近信息资讯专栏中的部分内容的更新提供了招生信息业的最新的行业资讯和热点动态。 4.2 结构设计 （1） 结构设计本网站的各个功能入口比较多，因此需要一个专门的文件来显示各种后台入口，而且在网页中还要显示出用户在留言板块和管理员在后台模块的信息。网站整体使用上下结构，下面的一个大部分有分为左中右结构。这样网站的整体个人看来结构就很清晰。 （2）界面设计 设置公开地联系方式及其用户信息反馈专用论坛功能； 设置网站整体信息与用户为一体；设置完善地个
29、性化地会员管理与交互系统； 完善的网站内容、网站用户检索系统。 网站的整体颜色：天蓝色为导航颜色；主体颜色：天蓝色；字体：微软雅黑；网站统一顶部为导航条（站点首页，招生指南、院系导航、学院概述、招生工作、常见问题、网上报名、信息查询）网站上中部：静态图片；位置导航；网站中部：网站信息；友情连接；站点数据；网站导航条；图文信息；网站底部：校园地址；网站/版面制作；版权信息。 4.3 具体设计文档一、内容和功能设计这个校园网站主要实现新闻、信息等功能，目标用户主要是Internet的学生。先明确这个招生信息门户网站提供的主要功能：(1) 注册登录系统：提供用来学生查询录取情况和报考情况。(2) 招
30、生信息资讯专区：提供招生信息业在个方面的成果及新闻的功能，介绍最新的更新信息。 (3) 信息专区：提供有信息的主要的详细的信息与图鉴为查看网站的人提供资源。二、 前台新闻文摘显示可以根据网站的需要,进行各种方式的插入,自动更新.如显示栏目导航,显示某栏目的最新N条新闻等. 使用管理系统制作动态网页时,可在需要的地方插入相应的代码,即可以多种形式显示新闻 文章的栏目或内容。例如：一级栏目列表、二级栏目列表、栏目导航列表、某一栏目的最新新闻(文章)显示条数、某一栏目的热门文章可任意调整。该系统也可经后继开发,使之生成代码,在一个主机上维护新闻文章,在其他静态网页中插入代码后显示相应的新闻文章。 三
31、、 信息结构设计(1) 确定栏目 栏目是网站主要内容的体现，合理的划分和安排栏目，将网站的主题明确的显示出来，并且尽量方便访问者的浏览和查询。(2) 网站装饰风格 采用了灰色和绿色为主导航颜色，首页中运用最新更新图片，以及文字交错排版，使整个网站看上去符合跳动的风格。 四、 可视化设计 网站可视化设计的主要体部分是框架的的设计，它是由导航的和子页面组成的，这些子页面都是人们平时不可或缺的。招生信息门户网站的主体相得益彰。 4.4 网站维护的设计 网站维护，其维护的内容也非常之多，有功能改进、页面修改、安全管理、网站推广需要懂得相关知识的专业人士来完成。下面是网站维护方法等问题网站维护的目的是为
32、了让您的网站能够长期稳定地运行在Internet上，及时地调整和更新网站内容。一个好的网站需要定期或不定期地更新内容，才能不断地吸引更多的浏览者，增加访问量。随着黑客人数日益增长和一些入侵软件昌盛，网站的安全日益遭到挑战，像SQL注入、跨站脚本、文本上传漏洞等，而网站安全维护也成日益重视的模块。而网站安全的隐患主要是源于网站的漏洞存在，而世界上不存在没有漏洞网站，所以网站安全维护关键在于早发现漏洞和及时修补漏洞。而网上也有专门的网站漏洞扫描工具，如亿思网站安全检测平台，而发现漏洞要及时修补，特别采用一些开放源码的网站 （一）、含义网站维护是为了让您的网站能够长期稳定地运行在Internet上，
33、及时地调整和更新您的网站内容，在瞬息万变的信息社会中抓住更多的网络商机。 （二）、内容 1、 服务器及相关软硬件的维护，对可能出现的问题进行评估，制定响应时间； 2、 数据库维护，有效地利用数据是网站维护的重要内容，因此数据库的维护要受到重视； 3、 内容的更新、调整等； 4、 制定相关网站维护的规定，将网站维护制度化、规范化； 5、 做好网站安全管理，防范黑客入侵网站，检查网站各个功能，链接是否有错。 （三）、网站内容更新建站容易维护难。对于网站来说，只有不断地更新内容，才能保证网站的生命力，否则网站不仅不能起到应有的作用，反而会对企业自身形象造成不良影响。如何快捷方便地更新网页，提高更新效
34、率，是很多网站面临的难题。现在网页制作工具不少，但为了更新信息而日复一日地编辑网页，对信息维护人员来说，疲于应付是普遍存在的问题。 内容更新是网站维护过程中的一个瓶颈。网站的建设单位可以考虑从以下五个方面入手，使网站能长期顺利地运转。 1、在网站建设初期，就要对后续维护给予足够的重视，要保证网站后续维护所需资金和人力。很多单位是以外包项目的方式建设网站的，建设时很舍得投入资金。可是网站发布后，维护力度不够，信息更新工作迟迟跟不上。网站建成之时，便是网站死亡的开始。 2、要从管理制度上保证信息渠道的通畅和信息发布流程的合理性。网站上各栏目的信息往往来源于多个业务部门，要进行统筹考虑，确立一套从信
35、息收集、信息审查到信息发布的良性运转的管理制度。既要考虑信息的准确性和安全性，又要保证信息更新的及时性。要解决好这个问题，领导的重视是前提。 3、在建设过程中要对网站的各个栏目和子栏目进行尽量细致的规划，在此基础上确定哪些是经常要更新的内容，哪些是相对稳定的内容。由承建单位根据相对稳定的内容设计网页模板，在以后的维护工作中，这些模板不用改动，这样既省费用，又有利于后续维护。 4、对经常变更的信息，尽量用结构化的方式（如建立数据库、规范存放路径）管理起来，以避免数据杂乱无章的现象。如果采用基于数据库的动态网页方案，则在网站开发过程中，不但要保证信息浏览环境的方便性，还要保证信息维护环境的方便性。
36、 5、要选择合适的网页更新工具。信息收集起来后，如何写到网页上去，采用不同的方法，效率也会大大不同。比如使用Notepad直接编辑HTML文档与用Dreamweaver等可视化工具相比，后者的效率自然高得多。倘若既想把信息放到网页上，又想把信息保存起来以备以后再用，那么采用能够把网页更新和数据库管理结合起来的工具效率会更高。 （四）、而使用信息发布系统，网站管理人员无需懂得任何的网页制作技术，只要了解基本的计算机文本处理方法，就能利用动态网页技术，方便地在网站上定制信息格式，更新或维护信息内容信息发布系统的具体功能包括： （1） 添加、修改及删除信息； （2） 按不同栏目对信息分类，易于信息的
37、管理及查找； （3） 信息可按标题、发布日期、关键字等不同分类进行查询； （4） 可将网站维护人员输入的信息即时自动按照模板生成页面，发布到网站前台。使用信息发布系统具有显著的优越性，它不仅操作简单，实时性强，而且由于使用了计算机系统代替人手完成所有的信息发布过程，避免了许多人为的技术性错误，确保了网站的稳定性和安全性。结 论在本次设计的全过程中，我对三年所学的知识有了一个比较系统的认识和理解。涉及了各方面的知识，大大扩展了我的知识面，同时是我学会了如何使用所学的知识去解决一些实际的问题。在设计中我深知自己掌握的知识还远远不够，掌握的一些理论知识应用到实践中去，总会出现这样或那样的问题，不是理
38、论没有掌握好，而是光知道书本上的知识是远远不够的，一定要把理论知识和实践结合起来。把学到的知识应用到时间中去，多做多练，才可以把理论的精华发挥出来。知识不是知道，了解就好，一定要去应用它，发展它，让它在现实生活中得到充分的应用，从而解决一些问题，这才是学习的根本目的。而且知识又不是单一的，它是互相联系的，学科与学科之间都有着内在的联系。计算机是一门非常复杂且庞大的学科，一项课题往往需要多项技术才可以完成的。在设计阶段，通过对课题的深入分析与研究，迫使我对技术有了一定的了解。计算机技术的高速发展，使我深深地认识到只有不断的加强学习，才能在计算机技术方面不至于被淘汰，今后，我还要加强学习，努力使自
39、己成为一位专业的计算机人员，为我自己所从事的工作服务。参考文献（1）、姜楠,完美网页设计与制作,中国青年出版社, 2004年5月。（2）、王映雪等编著作,HTML网页制作,上海科学普及出版社， 2006。（3）、雁腾创作室编,网页制作方法与技巧,机械工业出版社， 2009。（4）、丁淼,网页设计与制作,东南大学出版社（5）、David Karlins，Build Your Own Web Site M，McGraw-Hill Osborne Media，2003.1（6）、Dan Suciu, Gottfried Vosen，The World Wide Web and databases，Springer，2001.1（7）、杨纪梅 肖志强. DreamweaverCS4网页设计与制作指南，清华大学出版社，2010.01。（8）、陈新峰 王宏秦 贾斌. 网页设计九合一培训教程北京: 清华大学出版社,2010.（9）、前沿电脑图像工作室 巧学巧用Dreamweaver、Fireworks、Flash制作网页 北京:人民邮电出版社 2005（10）、应勤 周韬. 巧学巧用Photoshop6.x中文版. 北京: 清华大学出版社,2008.
