收藏 分销(赏)

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

上传人:仙人****88 文档编号:9255238 上传时间:2025-03-18 格式:DOC 页数:46 大小:1MB
下载 相关 举报
计算机工程系网站建设论文.doc_第1页
第1页 / 共46页
计算机工程系网站建设论文.doc_第2页
第2页 / 共46页
点击查看更多>>
资源描述
毕业论文:计算机工程系网站建设 摘要 本文详细介绍了通过运用Internet/Intranet的相关技术,建设“江苏大学计算机学院工程系网站”的过程。该网站利用了先进的asp网页动态技术以及数据库技术,为教师和学生提供一个网上交流信息的平台,并为维护者提供了方便的操作后台。 在网页设计方面,利用了著名的Macromedia公司出品的网页制作利器Dremweaver MX2004等工具,力求网站的实用、美观与效率。 该网站的核心部分使用了asp技术,并与数据库技术、网络安全技术相结合,使教师可以很好地管理自己的资料,学生能够方便地查询教师及课程等信息,管理人员也可以方便地管理网站并进行维护工作。 关键词:asp,数据库技术,后台,网络安全技术 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 . Key words: Asp, Database, Background, Network Safety Technique 目录 第一章 引言 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.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 42 第一章 引言 信息技术日新月异,也逐渐融合到当代的教育系统中。我们的想法便是设计一个计算机工程系的网站,使广大师生能够在网上方便的交流并查询信息和资料。 1.1信息技术发展概况 随着融合了计算机、通信和信息处理技术的电子信息技术的飞速发展,人类在经历了农业社会、工业社会后,已步入信息化社会。物质、能源与信息已成为社会发展的三大资源。信息技术是当代人类最活跃的生产力,正在对经济和社会的发展产生巨大而深远的影响。信息化水平的高低已成为衡量一个国家、一个地区现代化水平和综合国力的重要标志。进入90年代以来,信息化浪潮一浪高过一浪,世界各国更加关注和重视未来的信息社会,发达国家借助掌握信息技术的优势,大力推进国家信息基础设施的建设,促进本国产业结构重组,从而增强了自身的国际竞争力。   1993年9月美国政府率先提出了国家信息基础设施计划NII(National Information Infrastructure),通常称为信息高速公路,实质是高速信息网络。它是美国政府针对美国社会信息化发展而提出来的,具有21世纪的战略眼光,是重振美国经济、增强美国国际竞争力的重大举措。之后,全球掀起了建设“信息高速公路”的高潮,日、英、法、德、加等国也纷纷提出各自的类似计划,发展中国家如韩国、新加坡、巴西、乌拉圭,也都加紧制订本国的信息化计划。   INTERNET/INTRANET技术的兴起,给企业业务流程、管理模式、组织机构的重组乃至整体的发展带来新的机会,并将导致产业结构及企业经营方式的变革。 加速信息化进程是社会、经济发展到一定程度时的必然要求,已成为促进各国经济和社会发展的大趋势,是时代赋予我们的历史性机遇和挑战。党中央、国务院十分重视我国信息化的建设和发展,党的十四届正中全会上,提出了加快国民经济信息化进程,逐步实现整个经济由粗放型经营向集约型经营转变。人大八届四次会议审议通过了《中华人民共和国国民经济和社会发展“九五”计划和2010年远景目标纲要》,指出“国民经济和社会各领域应用现代电子信息取得很大进展,计算机应用在生产、工作和生活中的普及程度有很大提高。” 1993年12月10日国务院批复成立国家经济信息化联席会议,其主要任务和职责是:统筹协调关系到国计民生的全国性经济信息化系统工程项目,提出有关政策、法规和标准等。1994年3月有关专家研讨了“国民经济信息化”和建立“中国信息高速公路”的问题。之后,国家经济信息化联席会议召开了国民经济信息化发展战略高层次研讨会。1996年5月国务院成立了“国务院信息化工作领导小组”,以加强对全国信息化工作的组织和领导。它的主要任务是制定国家信息化的方针、政策,组织制定国家信息化的发展战略、总体规划,以及协调跨部门、跨地区,关系国民经济和社会发展的国家重大信息工程项目。 1.2网站的发展 在当今全球信息化大潮中,互联网(即因特网——Internet)异军突起,给20世纪末的人类社会增添了无限的活力,成为现代社会生活中一道亮丽的风景线。 互联网带给人们的不仅仅是技术,而是一种以信息为标志的崭新的生活方式。 它正在改变着人们的工作和生活方式。 一个网站的整体规划和设计的好坏是它发展的重要之处, 也是它吸引人们浏览的所在之处。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本课题的意义 目前,各院系利用网络资源向教师和学生提供交流的平台,体现了现代教学信息化的特点。计算机学院工程系也不例外,而现行的网站不能够很好的发挥教师与学生交流的作用,另外维护起来也比较麻烦,因此需要设计一个动态的网站来弥补这些缺陷。而本课题——即“江苏大学计算机学院工程系网站”就是基于这一目的设计完成的。 本网站作为一个大学院系的网站,考虑到系里的教师和学生以及课程安排情况,将丰富的资料有序地发布在网上。网站不但为教师和学生提供了一个良好的交流平台,也为其他人员了解计算机学院工程系打开了一扇窗口。 第二章 平台工具介绍 本章将介绍设计本网站所用到的工具(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标记、文档窗口大小、下载速度等信息。 图表 1 Dreamweaver MX2004启动界面 图表 2 Dreamweaver MX2004新建工作界面 2.1.2特点 1、 最佳的制作效率: Dreamweaver可以用最快速的方式将Fireworks,FreeHand,或Photoshop等档案移至网页上。使用检色吸管工具选择银屏上的颜色可设定最接近的网页安全色。对于选单,快捷键与格式控制,都只要一个简单步骤便可完成。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.页面整体布局:新式的页面布局和设计环境 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、Active:ASP使用了Microsoft的ActiveX技术。ActiveX(COM)技术是现在Microsoft软件的重要基础。它采用封装对象,程序调用对象的技术,简化编程,加强程序间合作。ASP本身封装了一些基本组件和常用组件,有很多公司也开发了很多实用组件。只要你可以在服务器上安装这些组件,通过访问组件,你就可以快速、简易地建立自己的WEB应用。 2、Server:ASP运行在服务器端。这样就不必担心浏览器是否支持ASP所使用的编程语言。ASP的编程语言可以是VBSCRIPT和JSCRIPT。VBSCRIPT是VB的一个简集,会VB的人可以很方便的快速上手。然而Netscape浏览器不支持客户端的VBSCRIPT,所以最好不要在客户端使用VBSCRIPT。而在服务器端,则无需考虑浏览器的支持问题。Netscape浏览器也可以正常显示ASP页面。 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脚本语言。 读取表单:<%Request.form(“content”)%>; 打开数据源:<%set conn=Sever.CreateObject(“ADODB.Connection”) Conn.Open”data”%)>; 执行SQL语言:<%sql=”insert into news(addtime) values(“&addtime&”)” Conn.execute(sql)%>; 等等,略。 2.3Access 作为本网站数据库系统的设计软件,下面简要介绍一下。 2.3.1Access简介 作为Microsoft的office套件产品之一的桌面数据库系统,Access与许多优秀的关系数据库一样,可以让你很容易地连接相关的信息而且还对其他的数据库系统有所补充。它能操作其它来源的资料,包括许多流行的PC数据库程序(如dBASE,Paradox,Microsoft FoxPro)和服务器、小型积极大型机上的许多SQL数据库。Access还完全支持Microsoft的OLE技术。 界面如图表3所示。 图表 3 Access界面 2.3.2Access的功能及特点 1. 数据库中包含多个表,每个表可以分别表示和存储不同类型的信息。 2. 通过建立各个表之间的关联,从而将存储在不同表中的相关数据有机地结合起来。 3. 用户可以通过创建查询在一个表或多个数据表中检索、更新和删除记录,并且可以对数据库中的数据进行各种计算。 4. 通过创建联机窗体,用户可以直接对数据库中的记录执行查看和编辑操作。 5. 通过创建报表,用户可以将数据以特定的方式加以组织,从而达到分析可打印的目的。 第三章 网站的整体规划与设计 这一章将从设计网站的目的出发,简要提出了网站的整体设计思路,对网站的风格、格局、结构以及主要内容作出了概括;这一步骤属于整个过程的准备阶段。 3.1网站设计前提思路 首先我们要明确这个网站设计的目的,以及它所要达到的功能,能够体现什么特点。 3.1.1网站设计目的 网站设计的前提是先弄清楚服务的对象,否则将是事倍功半的。在引言部分已经分析过,本网站的主要服务对象是江苏大学计算机学院的师生,其设计目的是提供给对象一个网上交流信息、查询资料的平台;另外,本站点也将作为在因特网--这个新媒体上展示计算机工程系形象的信息空间。 明确设计站点的目的和用户需求,从而作出切实可行的计划。 挑选与锤炼工程系的关键信息,利用一个逻辑结构有序地组织起来,开发一个页面设计原型,选择用户代表来进行测试,并逐步精炼这个原型,形成创意。分析有些网站的效果不如预想的好,主要原因是对用户的需求理解有偏差,缺少用户的检验造成的。 3.1.2网站所需实现的功能 我们要设计的便是这样一个网站,它不是那种综合性、艺术性的网站,而是一个大学院系的网站,那么这种定义便将网站所要实现的功能包含了: 1.介绍计算机工程系 这并不是本网站的主要功能,但必不可少。我们将把首页的一部分作为介绍工程系的窗口,当人们在浏览网页的时候可以对计算机工程系有一个了解。这部分功能的实现只需一块区域,放在首页更加直观。 2.教学安排、课程建设及科研情况 这里包括各学期的教学安排、每一学科的课程建设以及工程系科研情况,比如教学任务表、毕业设计、任课教师、课程资源、科研项目、论文专著,等等。 3.师资力量及通讯录 有关工程系各位教师的介绍以及他们的个人网站的网址,另外有各位老师的详细通讯资料。 4.文档及软件下载 教学文档、课件以及常用软件的下载。 5.其它功能 ftp地址以及一些友情链接,等等。 6.管理功能 这里属于后台管理,通过分配不同的权限使得网站管理有序而安全。 3.1.3网站的特点 1.实用性 这一点应该是每一个网站的必需,特别是这种院系网站;所以我们将重点突出“简洁”二字。 理论上讲,设计并不再现具体的物象和特征,它要表达的是一定的意图和要求,在适当的环境里为人们所理解和接受。它与绘图有内在联系,但又不同于绘画,它以满足人们的实用和需求为目标,因而它比绘画更单纯,清晰和精确。页面设计属于设计的一种,同样要求简练,准确。保持简洁的常用的一个做法是限制所用的字体和颜色的数目。一般每页使用的字体不超过三种,一个页面中使用的颜色少于256种。页面上所有的元素都应当有明确的含义和用途,而不要试图用无关的图片把页面装点起来,我们要让别人明白本网站突出表达的内容,主题。 2.方便性 一个好的网站不仅要求能够提供实用的信息,还要有方便的浏览方式;也就是说,要让登陆网站的人能够方便的查询资料。鲜明的格调、整洁的页面以及详细的链接就显得格外重要;这样,我们需要着重考虑以下几个因素:精心组织的内容; 格式美观的正文;较好的对比度,使得文字具有较强的可读性;页面元素大小适中,布局匀称;不同元素之间留有足够空白,给人视觉上休息的机会;文字准确无误,无错别字、无拼写错误;等等。 在设计网站页面时,我们精心组织所要发布的材料,按逻辑或时间顺序进行组织,为了使网站的内容变得有条理。材料组织好后,便开始在网站页面上布置文本、图片等内容,目的是引导浏览者在页内浏览。我们控制页面上的元素的放置顺序和它们相互之间的空隙,并把相关的内容放在一起,而不相关的内容用空白、水平线或其他图形分隔开。给用户一个有规律的浏览途径。 由于人们阅读材料习惯于从左到右,从上到下进行,因此他们眼睛首先看到的是页面的左上角,然后逐渐往下看。根据这一习惯。我们在组织内容时便把希望浏览者最先看到的内容放在页面的左上角和页面顶部,如最新消息以及其他一些重要内容等等。重要的内容应当是浏览者最容易发现,而不是放在很深的链接之后的。在处理链接问题时我们也比较谨慎,为的是不使因为链接的混乱而导致整个网站的方便性。 3.美观性 首先是一致性,一致性是表现一个站点的独特风格的重要手段之一。我们在设计网站时使用了一致的框架以及一致的字体和颜色,为了达到网站视觉上的整体感及和谐感。 色彩可以使页面更加生动,色彩产生的强烈视觉效果可以使页面在浏览者心中留下很深的印象。但是必注意慎重的使用色彩,否则很可能弄巧成拙,滥用色彩容易造成视觉上的混乱。在选择背景和正文颜色时,我们铁别注意的一点是易读性。实现易读性的关键在于提供足够的明暗对比,我们选择了浅蓝色的背景和黑色的字。 4.安全性 由于网站提供给各位老师私人的空间储存自己的资料,用户的权限以及网络安全必须着重考虑。 5.稳定性 这一点也是至关重要的,因为网站并不是建立后就完事了,更多的还是后期的维护工作;而稳定性这一点正是使以后的维护能够有条不紊、方便、顺利的进行。 3.2网站总体设计 在分析完网站设计的目的、特点以及所要实现的功能后,我们并不是直接开始制作,而是需要对网站进行总体设计。包括:网站的栏目板块和结构,网站内容的安排,相互链接关系,等等。 3.2.1网站的栏目板块和目录结构 1.确定网站的栏目 建立一个网站好比写一篇文章,首先要拟好提纲,文章才能主题明确,层次清晰。如果网站结构不清晰,目录庞杂,内容东一块西一块。结果不但浏览者看得糊涂,自己扩充和维护网站也相当困难。网站的题材确定后,并且收集和组织了许多相关的资料内容,但如何组织内容才能吸引网友们来浏览网站呢?栏目的实质是一个网站的大纲索引,索引应该将网 站的主体明确显示出来。我们设立网站以下几个栏目:教学安排、课程建设、科研情况、文档下载、通讯录。 2.确定网站的目录结构 目录结构的好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的上传维护,内容未来的扩充和移植有着重要的影响。所以在创建网站目录时我们严格注意一下规范:1)、不把所有文件都存放在根目录下,否则会造成文件管理混乱,搞不清哪些文件需要编辑和更新,哪些无用的文件可以删除,哪些是相关联的文件,影响工作效率。 2)、目录的层次不要太深,目录的层次建议不要超过3层,维护管理方便。 3)、不要使用中文目录。 4)、不要使用过长的目录。 3.2.2网站的排版及布局 1.排版设计 有限的视觉符号,文字,少量的插图(有时没有),这些素材有时不具备描述清楚事件或呈现情绪的能力,即使能自由的使用线条和色彩辅助,仍然拘束,所以通过“形象思维”直接捕获内心的原点,是排版设计的唯一途径。 排版设计最重要的是,设计者如何把那些涵养和观点传达给观者,以便使版面上的思想能进入观者的心灵。 2.网页的布局 按照平面设计的形式来看,整个页面可以分为几个部分,每个部分有不同的功能,也能体现不同的形式,具体看来就是上边、左边、下边、右边、中间、看似无奇,自身却有许多独特的地方。中间的部分一般是最大的,因为它承载着主要的信息,用户主要就是看中间这个部分的内容。我们所设计的便是上边和右边相结合的拐角型:上面是页面的提头和栏目导航,右边是留言板和其它的链接,而左边则是网页的主体内容部分。 3.2.2网站内容的安排 在设计完网站的结构和布局后,接下来就要考虑内容的填充了。内容和形式(即具体的网页的排版布局)要能够达到一种协调的状态下才能真正的成功的网页设计,所以,不能单独考虑网页的内容,以为只要能够把具体内容清晰流畅的放到网站上就行了,造成整个页面的形式感很差,这样严重影响用户的心情。同样假如不顾网页的内容,只顾页面的形式,尽管页面再漂亮,用户也不会欢迎,因为这样是他们根本没有得到什么东西(或者获得的信息很少)。要知道,我们所设计的是计算机工程系得网站,是为师生提供网上交流空间与学习资料查询的地方,没有详尽的内容根本不是我们的目的,那只能是买椟还珠,舍本逐末。 当然,网站的资料已经提供,我们所要做的就是将这些资料合理有序的放置在网站上。网站的框架和布局既然已经设计完成,那么网站的内容的安排也相对简单了。我们在安排内容时以内容本身为主,兼顾美观性,每个板块都事先设计好方案,然后加入内容。 3.2.3网站链接关系 1.网站的链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上,但可以跨越目录。建立网站的链接结构有树状和星状两种基本方式。 树状链接结构类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面。这样的链接结构浏览时,一级级进入,一级级退出。优点是条理清晰,访问者明确知道自己在什么位置,不会"迷"路。缺点是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须绕经首页。 而星状链接结构类似网络服务器的链接,每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便,随时可以到达自己喜欢的页面。缺点是链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。所以我们采用了两种结合的方式,整体是树状结构,但细节部分又插入星状结构,这样既条理清晰,有层次感,也方便用户浏览。 2.各部分的链接 首先是首页链接出几个主要版块,如教学安排、课程建设、文档下载等等,这是树型结构,各版块之间要通过首页的链接来访问。然后是其他内容的链接,如留言板、新闻等链接,这些涉及到了数据库的管理,一般是通过链接访问数据库来读取资料。 3.3网站结构 网站的基本结构是树形框架,首页作为树根引申出各版块页面,各版块通过首页互相联系,后台负责管理整个网站,由首页登陆。 为了便于分析,特用框架图来解释: 首页 教学安排 课程建设 科研情况 文档下载 通讯录 最新消息 师资力量 留言板 后台管理
展开阅读全文

开通  VIP会员、SVIP会员  优惠大
下载10份以上建议开通VIP会员
下载20份以上建议开通SVIP会员


开通VIP      成为共赢上传
相似文档                                   自信AI助手自信AI助手

当前位置:首页 > 学术论文 > 其他

移动网页_全站_页脚广告1

关于我们      便捷服务       自信AI       AI导航        抽奖活动

©2010-2025 宁波自信网络信息技术有限公司  版权所有

客服电话:4009-655-100  投诉/维权电话:18658249818

gongan.png浙公网安备33021202000488号   

icp.png浙ICP备2021020529号-1  |  浙B2-20240490  

关注我们 :微信公众号    抖音    微博    LOFTER 

客服