毕业论文 网页设计大全Word格式文档下载.docx

毕业论文 网页设计大全Word格式文档下载.docx

《毕业论文 网页设计大全Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《毕业论文 网页设计大全Word格式文档下载.docx（33页珍藏版）》请在冰点文库上搜索。

摘要

高等学校实验室是进行实验教学、开展科学研究、推动科技发展的重要基地，是学校教学科研工作的重要组成部分，实验室建设与管理水平直接关系到培养人才的质量问题。

而互联网目前正极大地改变着我们的生活，随着现代校园信息化的推进，计算机进入日常教学生活和工作的各个方面已成为不可阻挡的趋势。

在学校实验室里，引入计算机进行规范化管理必然会极大的提高工作效率，有效利用实验室资源，提高办学效益，保障实验教学质量的基础性工作。

本管理网站主要采用ASP开发，在进行数据交换及客户端数据显示时，采用WEB技术。

主要实现管理员、教师、学生三种模块设计，课程演示及答疑功能。

关键词：

色相；

导航栏；

HTML；

CSS

Abstract

Thehigherschool’slaboratoryistheimportantbasetotestteaching,developstudies,promotethedevelopmentofscienceandtechnologyscientifically,alsoistheimportantcompositionpartofschoolteachingresearchwork.Theconstructionandleveloflaboratory’smanagementdirectlyconcernthequalityoftrainingtalent.Now,theInternetischangingourlifegreatly.Alongwithmoderncampusinformativeprocesspushingforward,ithasbecomethetendencythatthecomputerenterseveryaspectofdailyteachinglifeandwork.Leadingintocomputerstandardizemanagement,willriseworkefficiencymaximuminevitably,uselaboratoryresourceefficiently,riseschool’sbenefit,ensurethebasicnessworkoftheexperimentteachingquality.ThislaboratorymanagementwebsiteadoptsASPmainly,withWEBtoexchangedataandshowclientdata.Itincludescoursearrangement,3kindsofmodulardesignofmanager,teacherandstudent,coursedemonstrationandanswerquestionfunction.

Keywords:

hue;

navigationfence；

引言：

随着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.4HTML的基础知识简介：

1.4.1HTML文件结构（DocumentStructures）：

<

html>

...<

/html>

head>

/head>

body>

/body>

HTML>

HEAD>

<

title>

<

base>

link>

isindex>

meta>

/HEAD>

BODY>

HTML文件的正文写在这里......

/BODY>

/HTML>

1.4.2HTML框架（Frames）

使用框架（Frame），可以在浏览器窗口同时显示多个网页。

每个Frame里设定一个网页，每个Frame里的网页相互独立。

Frameset

frameset>

/frameset>

决定如何划分Frame。

有cols属性和rows属性。

使用cols属性，表示按列分布Frame；

使用rows属性，表示按行分布Frame。

Frame

用<

frame>

的Tag设定网页。

里有src属性，src值就是网页的路径和文件名。

下面的代码的目的是：

将Frameset分成2列，第一列25%，表示第一列的宽度是窗口宽度的25%；

第二列75%，表示第一列的宽度是窗口宽度的75%。

第一列中显示a.html，第二列中显示b.html。

framesetcols="

25%,75%"

>

framesrc="

../asdocs/html_tutorials/Frame_a.html"

../asdocs/html_tutorials/Frame_b.html"

Iframe

Iframe是InlineFrame的意思，用<

iframe>

/iframe>

可以将Frame置于一个HTML文件内。

1.4.3HTML列表（Lists）

HTML有三种列表形式：

排序列表（OrderedList）；

不排序列表（UnorderedList）；

定义列表（DefinitionList）。

排序列表（OrderedList）：

在排序列表中，每个列表项前标有数字，表示顺序。

排序列表由<

ol>

开始，每个列表项由<

li>

开始。

不排序列表（UnorderedList）：

不排序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点。

不排序列表由<

ul>

定义列表：

通常用于术语的定义。

定义列表由<

dl>

术语由<

dt>

开始，英文意为DefinitionTerm。

术语的解释说明，由<

dd>

开始，<

/dd>

里的文字缩进显示。

1.4.4HTML表单（Forms）

HTML表单（Form）是HTML的一个重要部分，主要用于采集和提交用户输入的信息。

{表单控件（FormControls）

Action

Method}

表单控件（FormControls），通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。

method，表示了发送表单信息的方式。

method有两个值：

get和post。

get的方式是将表单控件的name/value信息经过编码之后，通过URL发送（可以在地址栏里看到）。

而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。

那什么时候用get，什么时候用post呢？

一般是这样来判断的，如果只是为取得和显示数据，用get；

一旦涉及数据的保存和更新，那么建议用post。

HTML表单（Form）常用控件（Controls）：

inputtype="

text"

单行文本输入框

submit"

将表单（Form）里的信息提交给表单里action所指向的文件

checkbox"

复选框

radio"

单选框

select下拉框

textArea多行文本输入框

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是CascadingStyleSheets的英文缩写,即层叠样式表.

CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行（属于浏览器解释型语言）.

CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.

页面的布局大致分为：

1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；

　2、内容部分又可分为侧边栏、主体内容；

　3、底部，包括一些版权信息。

步骤：

1.画出实际的页面布局图：

DIV结构如下：

　　│body{}　/*这是一个HTML元素，具体我就不说明了*/

　　└#Container{}　/*页面层容器*/

　　├#Header{}　/*页面头部*/

　　├#PageBody{}　/*页面主体*/

　├#Sidebar{}　/*侧边栏*/

　　└#MainBody{}　/*主体内容*/

　　└#Footer{}　/*页面底部*/

2.页面布局与规划已经完成，接下来就是开始书写HTML代码和CSS。

新建一个文件夹，命名为“页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容：

!

DOCTYPEhtmlPUBLIC"

-//W3C//DTDXHTML1.0Transitional//EN"

"

http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

htmlxmlns="

//www.w3.org/1999/xhtml"

metahttp-equiv="

Content-Type"

content="

text/html;

charset=gb2312"

/>

无标题文档<

/title>

linkhref="

css.css"

rel="

stylesheet"

type="

text/css"