高等学校实验室网站管理系统设计与实现

目录摘要.3Abstract.3引言.4一.网页设计基础 1.1 预备知识.5. 1.2 如何设计网页.5 1.2.1网页设计的任务.5 1.2.2网页设计的流程.5 1.2.3网页设计的基本原则.6 1.3 常用网页设计软件 7 1.4 常用的HTML基本知识71.4.1 HTML 文件结构(Document Structures) 71.4.2 HTML框架(Frames) 81.4.3 HTML列表(Lists)81.4.4 HTML表单(Forms)9二.网页色彩搭配10 2.1 网页配色原理 11 2.2 无色彩系和有色彩系.11 2.3网页色彩搭配. 11三. 网页的布局设计 13 3.1 网页版面布局设计 13 3.2 网页布局方法：使用CSS样式表 15四、网页图像编辑处理. 211. 网页图像与动画设计. 212. 网页按钮与导航栏的设计 213. 界面实例 21五. 设计网站Logo22 5.1 Logo的特点 22 5.2 网站Logo设计实例 22六. Dreamweaver CS3创建基本文本网页 236.1.文本的载入.246.2 创建超级链接.24七. 使用表格排版布局网页.24八. 总结 .29注释与参考文献.32摘 要高等学校实验室是进行实验教学、开展科学研究、推动科技发展的重要基地，是学校教学科研工作的重要组成部分，实验室建设与管理水平直接关系到培养人才的质量问题。而互联网目前正极大地改变着我们的生活，随着现代校园信息化的推进，计算机进入日常教学生活和工作的各个方面已成为不可阻挡的趋势。在学校实验室里，引入计算机进行规范化管理必然会极大的提高工作效率，有效利用实验室资源，提高办学效益，保障实验教学质量的基础性工作。本管理网站主要采用ASP开发，在进行数据交换及客户端数据显示时，采用WEB技术。主要实现管理员、教师、学生三种模块设计，课程演示及答疑功能。关键词： 色相；导航栏；HTML；CSSAbstract The higher schools laboratory is the important base to test teaching , develop studies , promote the development of science and technology scientifically,also is the important composition part of school teaching research work.The construction and level of laboratorys management directly concern the quality of training talent.Now,the Internet is changing our life greatly. Along with modern campus informative process pushing forward, it has become the tendency that the computer enters every aspect of daily teaching life and work. Leading into computer standardize management, will rise work efficiency maximum inevitably, use laboratory resource efficiently, rise schools benefit, ensure the basicness work of the experiment teaching quality. This laboratory management website adopts ASP mainly, with WEB to exchange data and show client data.It includes course arrangement, 3 kinds of modular design of manager, teacher and student , course demonstration and answer question function.Keywords: hue; navigation fence；HTML；CSS引言：随着Internet在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务。由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便, 因此互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。internet上发布信息主要是通过网站来实现的，获取信息也是要在internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了更好的利用与管理实验室的资源，方便学院师生访问，特构建实验室管理系统网站。网站是一个精致的交互式环境，包含该网站的内容和用户获取内容所需的导航工具。而网站中的每一个网页都是“冲浪者”与网站进行交互的通道，是网站与用户进行交互的工具或技术。它的网页基本是透明的，当用户获取所需的信息时，网页的外观形象不会对用户造成影响。在信息世界中，人们在网上冲浪，寻找各种信息或者娱乐的精华。大多数的人会希望能简洁明了地看出网站的主题，第一印象要让人觉得这是一个精心设计的极为有用的网站,以便用户能及时地感受并采取相应的行动，用户最难忍受那些模棱两可、十分丑陋或者不能正确下载的设计。本网站类似于教育网站，网站的主要目的是用于教育，网页必须能够提高访问者参与和学习的积极性。网站设计基本分为五大工作模块：栏目、美工、网页、程序和数据库。本人主要负责前三大模块。一.如何设计网页 1.1 预备知识网页设计师一个感性思考与理性分析相结合的复杂过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。在网页设计中，最重要的并非是软件的应用，而是对网页设计的理解、美观体现以及页面制作的整体把握。1.2 如何设计网页 1.2.1网页设计的任务 网页设计的任务是指设计者要体现的主题和要实现的功能。站点的性质不同，设计的任务也不同。例如本例，实验室管理系统的站点，在资讯门户类、资讯和想象结合类、形象类网站等三类站点中它是一个资讯门户类站点。 1.2.2网页设计的流程 网页设计的流程分两个部分。第一部分是站点的规划及草图的绘制，这部分一半在纸上完成；第二部分是网页的设计与制作，这是在计算机上完成的。Web设计流程：1. 初始了解,主要是收集该站点的关键信息,包括站点的目标读者.要发布的内容.开发Web服务器平台。2. 概念开发,根据收集的信息,开始构思,通常要把这些构思用草图的形式呈现,这个草图要有整个网站的结构,不同的布局、设计及导航。3. 内容综合,进行详细设计，制作一些初始图样,这些图样用PHOTOSHOP那样的程序来创建,图样要配合文字。4. HTML布局和导航,开始编制Web页面,导航器也被编制到页面中。 5. 图形制作,如果决定了站点的外观和感受,将大量制作所需的图形,并进行优化。 6. 内容流程,客户的书面材料利用各种网页技术（CSS、JAVA、FLASH）,有机的和相关的图形整合在一起。 7. 测试,在站点被提交给之前,要彻底测试每个Web页面和联结,进行修补。 8. 制作完成交付,进行测试,找出排版和内容方面的错误,做完这些次要的修正后,正式启用站点。这套完整的计划可以用1-12个月来完成,平均完成时间为4个月。当站点启用后,要进行跟踪调查,以确定人们如何使用站点。经过6-12个月的运行之后，重新收集数据,开始重新设计,然后这个Web设计过程再开始一遍。制作规划方案详细设计细节与老师沟通网站制作意向不合格修改方案审核获取网站资料设计主页方案修改整体制作合格 不合格合格完成 1.2.3网页设计的基本原则 统一；连贯；分割；对比；和谐。常用的网页设计软件有网页编辑排版软件Dreamweaver,网页动画制作软件Flash,网页图像制作软件Photoshop。网站设计的理念：作为一个Web设计师,最重要的一点是要有创意,没有创意的网站是不成功的。网站设计所需遵循的理念1.要考虑带宽的问题；2.要考虑适应不同浏览器.不同分辨率的情况；3.要注重色彩的搭配问题；4.要让浏览者容易找到要找的东西,网页内容便于阅读；5.站点内容要精、专及时更新；6.提供交互性；7.简单为美。 网站策划设计：首先确定web站点的应用目标:1）、市场调查阶段 了解一下目同类站点的设计、发展、经营状况，吸取他们的长处，找出自己的优势， 明确自己网站的主题，寻找一个好的出发点。2）、设想网站规模。3）、确定网站的类别即网站的设计特色。4）、网站的主要目标。5）、确定整个网站的整体风格。6）、根据目标框架整理出站点的内容框架以及逻辑功能结构图。1.3 本网站系统具体功能模块：1. 精品课程：利用文件上传和超链接的方式把学院的精品课程发布。2. 设备管理：管理员登陆；查看器件当前数量状态；查看器件的日志信息（如何时买进，数量，何时报废，数量，厂家，时间等信息）。3. 师生管理：录入教师基本信息，介绍任课教师。4. 实验室管理：发布规章制度、实验室开发项目、实验室分类、实验室公告和通知以及实验室预约等。网站制作过程中把握的几点：1）、重点信息放在突出醒目的位置，整个网站空间排序适当。2）、网页应该易懂，控制没个模块的信息量。3）、网页页面越小越好，最好别超过50k，尽量精简。4）、网站导航要清晰，容易查找。1.4 HTML的基础知识简介：1.4.1 HTML 文件结构(Document Structures)：. , , , , HTML 文件的正文写在这里. . 1.4.2 HTML框架(Frames) 使用框架(Frame)，可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。Frameset决定如何划分Frame。有cols属性和rows属性。使用cols属性，表示按列分布Frame；使用rows属性，表示按行分布Frame。Frame用的Tag设定网页。里有src属性，src值就是网页的路径和文件名。下面的代码的目的是：将Frameset分成2列，第一列25%，表示第一列的宽度是窗口宽度的25%；第二列75%，表示第一列的宽度是窗口宽度的75%。第一列中显示a.html，第二列中显示b.html。 IframeIframe是Inline Frame的意思，用可以将Frame置于一个HTML文件内。1.4.3 HTML列表(Lists) HTML有三种列表形式：排序列表(Ordered List)；不排序列表(Unordered List)；定义列表(Definition List)。排序列表(Ordered List)：在排序列表中，每个列表项前标有数字，表示顺序。排序列表由开始，每个列表项由开始。不排序列表(Unordered List)：不排序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点。不排序列表由开始，每个列表项由开始。定义列表：通常用于术语的定义。定义列表由开始。术语由开始，英文意为Definition Term。术语的解释说明，由开始，里的文字缩进显示。1.4.4 HTML表单(Forms)HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。表单控件(Form Controls) Action Method表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。HTML表单(Form)常用控件(Controls)：input type=text 单行文本输入框 input type=submit 将表单(Form)里的信息提交给表单里action所指向的文件 input type=checkbox 复选框 input type=radio 单选框 select 下拉框 textArea 多行文本输入框 input type=password 密码输入框(输入的文字用*表示) 二、网页色彩的搭配 非彩色的搭配黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。 彩色的搭配红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红|_|_|_|_|暖色系中性系寒色系中性系 网页色彩搭配的原理1.色彩的鲜明性，网页的色彩要鲜艳，容易引人注目。2.色彩的独特性。3.色彩的合适性，色彩和你表达的内容气氛相适合。4.色彩的联想性，不同色彩会产生不同的联想，选择色彩要和你网页的内涵相关联。 网页色彩掌握的过程 定位自己的网站，选择好切合自己的色彩，设计出简洁精美的站点。 网页色彩搭配的技巧1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。2.用两种色彩。先选定一种色彩，然后选择它的对比色，这样整个页面色彩丰富但不花稍。3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。4.用黑色和一种彩色。在网页配色中：1.不要将所有颜色都用到，尽量控制在三种色彩以内。2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。本网站主要使用天蓝色和淡青色味主色调，既符合学科特点，又不失朝气。三、网站布局设计网站形象设计网站主题和名称定下来之后，需要思考的就是网站的CI形象。1. 设计网站的标志(logo)首先设计制作一个网站的标志(logo)。注意：这里的logo不是指图标banner,而是网站的标志。标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。2. 设计网站的标准色彩网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。 “标准色彩”是指能体现网站型象和延伸内涵的色彩。一般来说，适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。3. 设计网站的标准字体和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。4. 设计网站的宣传标语。网站的版面设计设计首页的第一步是设计版面布局。版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。 布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。版面布局的步骤：一.画出草案实验室管理系统系统管理设备管理师生管理实验室管理精品课程管理角色管理用户管理修改密码教师管理学生管理精品课程管理设备管理设备分类实验室预约实验室通知规章制度实验室分类实验室公告试验开发项目二.粗略布局 主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等。必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。三.定案（一）将粗略布局精细化，具体化。注意：在布局过程中，可以遵循的原则有：1）、正常平衡-亦称匀称。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。2）、异常平衡-即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。3）、对比-所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。4）、凝视-所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。5）、空白-空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。6）、尽量用图片解说-此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。例如：网页的白色背景太虚，则可以加些色块；版面零散，可以用线条和符号串联；左面文字过多，右面则可以插一张图片保持平衡；表格太规矩，可以改用导角试试。（二）.使用CSS布局页面CSS是用于布局与美化网页的. CSS是Cascading Style Sheets的英文缩写,即层叠样式表. CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.页面的布局大致分为：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 步骤：1.画出实际的页面布局图： DIV结构如下：body /*这是一个HTML元素，具体我就不说明了*/#Container /*页面层容器*/#Header /*页面头部*/#PageBody /*页面主体*/ #Sidebar /*侧边栏*/#MainBody /*主体内容*/#Footer /*页面底部*/2.页面布局与规划已经完成，接下来就是开始书写HTML代码和CSS。 新建一个文件夹，命名为“页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容：无标题文档这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。然后在标签对中写入DIV的基本结构，代码如下：color=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/color添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：/*基本信息*/body font:12px Tahoma;margin:0px;text-align:center;background:#FFF;/*页面层容器*/#container width:100%/*页面头部*/#Header width:800px;margin:0 auto;height:100px;background:#FFCC99/*页面主体*/#PageBody width:800px;margin:0 auto;height:400px;background:#CCFF00/*页面底部*/#Footer width:800px;margin:0 auto;height:50px;background:#00FFFFCSS代码的含义：font:12px Tahoma； 这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；margin:0px；也使用了缩写，完整的应该是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0px顺序是 上 / 右 / 下 / 左，也可以书写为margin:0(缩写)；以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，另外还有以下几种写法：margin:0px auto；说明上下边距为0px，左右为自动调整；margin是外部距离，而padding则是内部距离。text-align:center文字对齐方式，可以设置为左、右、中，这里将它设置为居中对齐。background:#FFF设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。background可以用来给指定的层填充背景色、背景图片，格式为：background:#ccc url(bg.gif) top left no-repeat；表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，top left表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。top/right/bottom/left/center用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用background:url(bg.gif) 20px 100px;表示X座标为20像素，Y座标为100像素的精确定位；repeat/no-repeat/repeat-x/repeat-y分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。height / width / color 分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。3.使用列表制作菜单 精品课程设备管理师生管理实验室管理 、是两个HTML元素，它们最主要的作用就是在HTML中以列表的形式来显示一些信息。 这样，网页的大致布局已经显示出来了，然后调整列表中文字属性与边距就行了。总体来说：版面布局的四个基本理念：1.加强视觉效果2.加强文案的可视度和可读性3.统一感的视觉4.新鲜和个性是布局的最高境界四、网页图像编辑处理1. 网页图像与动画设计2. 网页按钮与导航栏的设计3. 界面实例：登陆界面首页界面五.网站Logo的设计 在网站设计中，Logo具有举足轻重的地位，它是网站或企业形象的集中体现，一般要反映出网站的类型和内容，这样才能在第一时间吸引浏览者，提供网站的点击率。 Logo的设计标准： 要符合网站的总体设计要求； 要有良好的造型；设计要符合传播对象的直观接受能力； 构图需美观、适当、简练并讲究艺术效果； 标志设计一定要注意其识别性。 本网站的Logo：六. 静态网页的制作1.文本的载入 2.创建超级链接 超链接是一种网页上的常见现象，它以特殊编码的文本或图形来实现链接。如果单击该连接，则相当于指示浏览器移至同一网页中的某个位置、打开一个新的网页或者打开某一个新的WWW网站中的网页。 超链接一般有如下几种形式: 下载文件的链接；电子邮件的超级链接；图像的链接等等。在本网站中，要打开所需界面，需点击按钮或列表打开超链接才能完成。七. 使用表格排版布局网页表格在网页中占有重要地位，无论是网页中的文字、图像等信息的总体排版和定位，还是网页数据的罗列，都起着重要作用。表格的编辑单元格的编辑整理表格内容插入表格与表格元素实例演示：1.利用表格排列数据；2.利用表格布局网页2.操作界面精品课程模块实验室管理模块1）.规章制度界面2）.项目开发界面3）.实验室预约界面系统管理模块1）.角色管理界面：2）.成功录入界面：3）.密码修改界面：其他界面类似。八.总结：综上所述即为我个人对实验室管理系统网站的设计思路，也是我这次毕业论文所做的工作。通过这次的网站设计，我总结了以下网站设计的原则，仅供参考： 1.明确内容作为一个网站设计者，如果要建一个网站，首先应该考虑网站的内容，包括网站功能和用户需要什么。整个设计都应该围绕这些方面来进行。 2.抓住用户如果用户不能够迅速地进入网站，或操作不便捷，网站设计就是失败的。 3. 优化内容 内容是核心。大约在两年以前，企业网站就像一本广告册子，更槽糕的是，网站使用了大量的图片，似乎要几个世纪才能下载完。 4. 快速下载 没有什么比要花很长时间下载页面更槽糕的了。一个标准的网页应不大于60K，通过56K调制解调器加载花30秒的时间。也有把网页加载控制在15秒内。 5. 网站升级时刻注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行缓慢，这就需要优化设计和网站升级。6. 用笔画一个网站的框架圣人云：笔比剑更强大。在用计算机之前，用笔画一个网站的框架，显示出所有网页的相互关系。计划好用户如何以最少的时间浏览网站。 7.点击规则 3次点击规则：对于小型网站，在主页上，没有任何一条信息，需要点击次数超过3次的。对于大型网站，使用导航和工具条来改善操作。 8.特殊字体的应用 9. 检查错别字 10. 网站介绍很清晰的网站介绍，能告诉访问者此网站能够提供些什么，以便访问者能找到想要的东西。有效的导航条和搜索工具使人们很容易找到有用的信息，这对访问者很重要。告诉访问者你所提供的正是他们想要的信息。 11. 背景颜色背景颜色也会产生一些问题，可能会使网页难于阅读。因此应当坚持使用白色的背景和黑色的文本，另外还应当坚持使用通用字体。 12. 向前和向后按钮应当避免强迫用户使用向前和向后按钮。应该秉着设计应当使用户能够很快地找到他们所要的东西的原则进行设计，绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够从每一页上访问网站的任何部分。 13. 不要用框架 与记数器一样，框架在网页上越来越流行。在大多