首页资料文库正文

网页设计论文范文10篇

时间：2023-03-17 22:28:58

网页设计论文

网页设计论文范文篇1

引言…………………………………………………………………..2

1系统设计目标和使用的主要技术……………………………….4

1．1设计目标………………………………………………………4

1．2主要技术………………………………………………………4

1．2．1模板技术………………………………………………….4

1．2．2标签库技术……………………………………………….4

2系统的组成和实现……………………………………………….6

2．1系统组成………………………………………………………6

2．2系统的实现……………………………………………………7

2．2．1模板库和标签库的实现………………………………….7

2．2．2系统开发环境…………………………………………….11

3结束语…………………………………………………………….11

引言

随着WWW（WorldWideWeb）的普及，动态网页技术也急速发展。从原来的CGI（CommonGatewayIn－terface）到ASP（ActiveServerPage），都从某种程度上满足了网页开发人员对动态网页开发技术的需求论文。但是不管是CGI还是ASP都存在一定的局限性，如CGI对服务器资源的耗费，ASP只能同MicrosoftIIS一起使用等，这些都限制了这些技术的使用范围，极大地阻碍了它们的推广。广大的页面开发人员都热切地盼望一种统一的页面开发技术，该技术应该具有的特点：①与操作平台无关，能够在任何Web或应用程序服务器上运行；②将应用程序逻辑和页面显示分离；③提供代码重用，简化开发基于Web的交互式应用程序的过程。

JSP（JavaServerPage）技术就是被设计用来满足这样的要求的。JSP是由SunMicroSystem公司于1999年6月推出的新的网页开发技术，它是基于JavaServ－let以及整个Java体系的Web开发技术，是Servlet2．1API的扩展。利用这一技术，可以建立先进、安全和跨平台的动态网站。

Java是未来的主流开发技术，具有很多优势。JSP则是Java在Internet／IntranetWeb上的重要应用技术，得到了广泛的支持和承认，它可以和各种Java技术完好地结合在一起，从而实现非常复杂的应用。

作为一种基于文本的、以显示为中心的开发技术，JSP提供了JavaServlet的所有好处。为了做到逻辑功能和显示功能分开，JSP已经可以和JavaBeans、EnterpriseJavaBeans（EJB）和Servlet一起工作。JSP的开发人员可以通过使用JavaBeans、EJB和Servlet来完成大部分与网站逻辑相关的工作，而仅仅把显示的工作交给JSP页面来完成。内容和显示逻辑分开的好处在于，更新页面外观的人员不必懂得Java代码，而更新Java类的人员也不必是设计网页的行家。这就可以用带Java类的JSP页面来定义Web模板，以建立一个具有相似外观的页面组成的网站。Java类完成数据提供，在模板中就没有Java代码，这意味着这些模板可以由一个HTML编写人员来维护。

JSP作为当前主流的网页开发技术，具有如下特点。

1）将内容的生成和显示进行分离：使用JSP技术，Web页面开发人员可以使用HTML或者XML标识来设计和格式化最终的页面。使用JSP标识或者小脚本来生成页面上的动态内容（内容是根据请求来变化的）。生成内容的逻辑被封装在标识和JavaBeans组件中，并且捆绑在小脚本中，所有的脚本在服务器端运行。如果核心逻辑被封装在标识和JavaBeans中，那么其他人，如Web管理人员和页面设计者，能够编辑和使用JSP页面，而不影响内容的生成。

2）强调可重用的组件：绝大多数JSP页面依赖于可重用的、跨平台的组件来完成应用程序所要求的更为复杂的处理。得益于Java的操作平台无关性，开发人员能够很方便共享和交流执行普通操作的组件，或者使得这些组件为更多的使用者所使用。基于组件的方法加速了总体的开发过程，极大地提高了项目整体开发的效率。

虽然JSP功能强大，但是它要求网页开发人员对Java要相当熟悉。而现在Java程序员还比较少，对一般的网页开发人员来说，JSP的语法还是比较难于掌握的。所以，就需要有一种网页开发工具，为一般的网页开发人员提供常用的JSP应用，让只懂得一般页面开发技术（HTML）的开发人员也能够使用JSP的强大功能。

1系统设计目标和使用的主要技术

1．1设计目标

本系统的设计目标是为只懂得HTML但完全不了解JSP的一般网页开发人员提供一个网页开发工具，使他们能够根据系统文档，通过标签使用JSP的常用功能，最后生成一个只包含静态HTML和JSP标签的动态JSP网页。

1．2主要技术

本系统在设计时，主要考虑使用模板和JSP标签的技术来实现。

1．2．1模板技术

模板技术被广泛地应用于各种开发和应用系统中。它预先生成一些常用的框架结构，使用户可以根据自己的需要方便地从模板库中选择模板，而不用自己重新去搭建，节省了用户的开发时间，方便了用户的使用。在本系统中，将页面按照功能类型进行分类，归纳出常用的页面类型，生成模板库。

1．2．2标签库技术

在JSP中，动作是可以创造与访问程序语言对象和影响输出流的元素。JSP定义了六个标准的动作。除了这六个标准动作以外，用户可以定义自己的动作来完成特定的功能。这些动作被称为客户化动作，它们是可重用的程序模块。通过这些动作，程序员就可以在JSP页面中把页面的显示功能也部分地封装起来，使整个页面更加简洁和易于维护。在一个JSP页面中，这些客户化动作是通过客户化标签来调用的。而标签库（TagLibrary）就是客户化标签的集合。

JSP标签库是一种通过JavaBeans生成基于XML的脚本的方法。它是JSP的最大特点之一。通过标签库，能够无限制地扩展JSP应用，完成任何复杂的应用需求。

JSP标签库具有以下特点。

1）易于使用：JSP中的标签和一般的HTML标记外表上是完全一样的，使用起来和普通的HTML标记一样方便。

2）易于代码重用：标签库中的每一个标签都能完成一定的功能。一旦定义好了一个标签库，只需要把这个标签库包装成一个Jar文件，那么以后只要在别的系统中使用这个标签库就行了，而不用重新开发代码，极大地提高了系统开发效率，降低了开发成本。

3）易于代码维护：所有的应用逻辑都封装在标签处理器和JavaBeans中，所有的标签都集中在一个标签库中。如果需要更新代码或者需要修改一个网页上的功能，只需要修改相应的标签即可。通过这种统一维护方式，不用在每个网页上去作修改，极大地减少了维护的工作量，节约了维护成本。

4）易于系统扩充：如果需要向系统中添加新的功能，只需要定义一个新的标签来完成这一功能即可，无需对系统的其它方面作任何改动。标签库可以继承JSP规范各方面的特性。这样就可以无限制地扩展和增加JSP的功能，而不需要等待下一版本JSP的出现。

2系统的组成和实现

2．1系统组成

本系统主要由四个部分组成，见图1。

1）数据库连接部分：本系统支持常用的几个数据库，包括Oracle、Sybase、MSSQLServer、MySQL和DB2，根据用户选择的数据库类型和用户提供的数据库名称、用户名、密码使用JDBC同数据库相连。

2）系统基本表生成部分：和数据库连接以后，根据同数据库相连的用户名生成两个系统基本表TC－Tables和TC－Columns，TC－Tables表包含在该数据库中属于该用户的所有的表的英文名称、中文名称和一些属性，如是否可修改、是否可查询等；TC－Columns表包含在该数据库中属于该用户的所有的表的所有列的中英文名称和其它一些属性。如是否可显示、是否可查询等。这两个系统基本表在整个系统的开发过程中提供用户所使用数据库的基本信息。

3）模板选择和网页生成部分：该部分是系统的核心部分。它包含了两个子模块。

①模板选择部分：系统为用户提供模板选择界面，让用户根据需要从模板库中选择所要使用的模板。

②模板处理部分：根据用户选择的模板，系统调用指定的模板处理模块对这个模板进行处理。当处理程序遇到模板中的标签时，就为用户提供交互界面，让用户为指定的标签输入参数，并由系统验证用户输入的标签的有效性。最后由系统完成JSP页面的生成。

4）网页预览和修改部分：网页生成出来以后，系统为用户提供了一个网页预览窗口和代码查看修改窗口。通过这个预览窗口，用户可以预览一下生成出来的JSP页面的效果。如果用户对页面的静态方面的效果不太满意，用户可以通过代码查看修改窗口修改代码中的HTML代码。如果用户对页面的静态效果有进一步的要求，系统还为用户提供了一个调用DreamWeaver编辑器的接口，用户可以使用它来对生成出来的JSP页面的静态效果进行进一步的修改和完善。

2．2系统的实现

2．2．1模板库和标签库的实现

标签库的规划和设计在整个系统设计中至关重要，它关系到了代码重用的程度和系统运行的效率。它的规划应该遵循以下原则。

1）在标签中应该尽量少的包含静态的HTML。对于一般用户来说，标签是透明的。用户不能够查看和修改标签。如果在标签中包含了过多的静态HT－ML语句，将影响用户对页面的静态效果的修改和完善，限制标签的使用。

2）尽量提高代码的重用度。在对JSP应用进行分类是尽量把公用的JSP应用提取出来，形成标签。而不用在每个标签中都重复实现该应用。这样在以后要对该应用进行修改和完善时，只需对这一个标签进行修改即可，易于代码的维护。

3）方便用户的使用。在设计标签库时，应该充分考虑到用户的使用情况，使用户能够很容易和方便地理解和使用标签。

①标签库的定义：定义一个标签库，必须首先定义一个标签库描述文件（TLD）。这是一个基于XML的脚本文件，在这个文件中定义了XML的版本、所使用的编码、标签库的版本、所使用的JSP的版本、标签库的名称和这个库中所包含的所有的标签的定义和参数描述，包括标签的名称，标签所对应的Java类，标签的描述信息等。

②标签的实现：一个标签就是一个特殊的Java

类，这个类必须继承TagSupport类，这个类是在javax．servlet．jsp．tagext包中定义的。在标签类中，包含了这个标签的参数初始化方法（Set／Get）、标签的主体处理方法（Handler）以及供下一级标签调用的方法等。

③模板的实现：一个模板就是一个含有标签引用的JSP文件。为了在模板中引用所定义的标签，必须首先引入标签库。

＜％＠tagliburi＝“tag．tld”prefix＝“ctag”％＞

其中uri指定标签库描述文件的路径；prefix指定引用标签时所使用的前缀。

在模板中引用指定的标签时，使用引入标签库时所指定的前缀，指定标签的名称；为标签的参数赋值。

2．2．2系统开发环境

本系统主体程序开发使用的是Borland公司的JBuilder6．0，模板开发使用是Microsoft公司的Front－Page2000，标签库开发使用的是UltraEdit编辑器，JDK采用的是JDK1．4。系统测试环境是JRun3．0。

3结束语

Java是未来开发语言的主流，而Java在Web上的主要应用JSP也必将成为未来Web开发的主流技术。本系统采用了JSP的最大特点之一的标签库，使一般的Web开发人员也能够方便地使用JSP强大的动态页面功能，开发出技术先进的JSP动态Web页面。由于本系统采用Java语言进行开发，所以可以在任何支持图形化界面的操作系统下运行，实现了完全的与平台无关。本系统易于扩充和完善。在以后可以考虑为用户提供接口，使用户可以自己扩充模板库和标签库，进一步增强系统的功能。

参考文献

［1］CayS．Horstmann，GaryCornell．Java2核心技术（CoreJava2）［M］．北京：机械工业出版社．

［2］BruceEckel．Java编程思想（ThinkinginJava）［M］．北京：机械工业出版社．

网页设计论文范文篇2

本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。

/基本要求

1.在网站根目录中开设imagescommontemp三个子目录，根据需要再开设media子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner条、菜单、按钮等等；common子目录中放css、js,、php、include等公共文件；temp子目录放客户提供的各种文字图片等等原始资料；media子目录中放flash,avi,quicktime等多媒体文件。

2.在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images和media的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。

3.temp目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。

4.除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂，

/脚本编写

我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），也经常要和工作室中不同的同事共同开发一个项目，还有可能被要求修改已经离职人员开发的脚本，当然你自己也有可能会扔下一个项目给后来的同事。

1.Html文件的通用模板：

其他meta标记

样式表定义

客户端javascript函数定义及初始化操作

……

补充：

为了保证网站能够与下一代的web语言xml标准兼容，所有的HTML标签的属性都要用单引号或者双引号括起，即我们应该写而不是.

2.允许全文检索的页面，为了使Internet上的搜索引擎能够有效检索，在频道的首页的html的之间应该加入Keywords和Description元标记，例如：

3.CSS文件的格式样例代码：

这里尤其要注意的是a:linka:visiteda:hovera:actived的排列顺序一定要严格照上面的样例代码，否则或多或少会出问题。另外我们规定重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！

为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和14.7px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px的字号比较合适。

在写互相嵌套时，严格按照的规范，对于单独的一个来说，对齐，缩进两个半角空格，中如果还有嵌套的表格，也缩进两个半角空格，如果中没有任何嵌套的表格，结束标记应该与处于同一行，不要换行，

如我们注意在源代码中不应有这样的代码：

而应该是这样的：

这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：

属于同一个级别的

一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px的单元格应该在和之间写一个如果高度小于12px,则应该在和之间插入一个1*1大小的透明的gif图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command->applysouceformatting进行重新整理！

5.Width和height的写法也有统一的规范，一般情况下只有一列的表格，width写在

的标签内，只有一行的表格，height写在的标签内，多行多列的表格，width和height写在第一行或者第一列的标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height和width,保证任何一个width和height都是有效的，也就是你改动代码中任何一个width和height的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。

/一般原则

1.在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免两个标记，经验表明，这两个标记会带来许多麻烦。

2.一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用

标记，以便能够使这个大表格分块显示。

3.排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:2em;}然后给每一段加上

标记，注意，一般情况下，请不要省略

结束标记。

4.原则上，我们禁止用来人为干预图片显示的尺寸，而且建议标签中不要带上width和height两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给附上width和height属性。

5.为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用

来人工干预分段。

6.不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。

7.所有的字号都应该用样式表来实现，禁止在页面中出现标记。

8.请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。

9.中英文混排时，我们尽可能的将英文和数字定义为verdana和arial两种字体。

10.行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.

11.网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：而应该这样：

12、嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。

13、“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适。

/文件命名原则

1.每一个目录中应该包含一个缺省的html文件，文件名统一用index.htm

2．文件名称统一用小写的英文字母、数字和下划线的组合。

3.命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。

4.下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html文件的命名原则：

☆第一条缺省新闻取名index.htm

☆所有属于“国内新闻”的新闻依次取名为：china_1.htm,china_2.htm,…

☆所有属于“国际新闻”的新闻依次取名为：internation_1.htm,internation_2.htm,…

☆如果文件的数量是两位数，请将前九个文件命名为：china_01.htm,china_02.htm以保证所有的文件能够在文件夹中正确排序。

5.图片的命名原则遵循以下几条规范：

☆名称分为头尾两两部分，用下划线隔开。

☆头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。

☆一般来说:

放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner

标志性的图片我们取名为：logo

在页面上位置不固定并且带有链接的小图片我们取名为button

在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu

装饰用的照片我们取名：pic

不带链接表示标题的图片我们取名：title

依照此原则类推。

☆尾部分用来表示图片的具体含义。

☆下面是几个样例，大家应该能够一眼看明白图片的意义：

网页设计论文范文篇3

关键词:网页设计视觉心理因素构成要素视觉流程

商业网站是企业向用户和网民提供产品和服务的一种方式,是企业开展电子商务的基础设施和信息平台，其网页页面由具体的文字（标题、广告语、单位名称、Email地址等）、企业标志、商标、产品图形、和信息菜单等内容组成，这些内容又常常表现为点线面、色彩、动静、主次等视觉因素，这些因素的不同使用都会影响读者的视觉习惯和心理变化。

本文将试析商业网页设计视觉因素的心理规律，揭示商业网页设计如何通过视觉心理因素更有效、更合理的表现与传达信息。展现企业形象、介绍产品和服务、体现企业发展战略。

一、商业网页设计中点、线、面视觉心理因素的运用

点、线、面是商业网页设计基本的视觉元素，是表现视觉形象的基本设计语言。从视觉角度看网页设计主要是如何经营好三者的关系，因为不管是任何视觉形象或者版式构成，归结到底，都可以归纳为点、线和面。

1.网页设计造型要素中的点

商业网页设计中的点是构成网页的最基本单位，是指页面中具备点的视觉特点、体积较小的物象。相对于整体背景而言一个单独的点是相比较而言的；是有大小、形状和体积的。点的大小、形态、位置不同，所产生的视觉效果、心理作用也不同。一个网页往往需要有数量不等，形状各异的点来构成，可以是具体产品、商品标志等，也可以是感觉上的点。例如，天空中的飞鸟、沙滩上的脚印、花瓣上的蜜蜂等，在其周围背景衬托下，都给人以“点”的视觉心理感受。

点在设计中即可以起一种稳定造型的作用，亦可起到活泼生动、吸引视觉中心的作用，使用得当，甚至可以画龙点睛；点的形状、方向、大小、位置、聚集与发散，还能够给人带来不同的心理感受。

(1)单点的应用：点在人们的视觉中具有很强的吸引作用，如：点（商品）设计在网页的上方或左右位置，则给人不稳定感和相对的动感。

(2)多点的应用：两点（二商品）之间会产生心理连线的感觉，多点时则会出现不同排列，顺序的虚拟的面或形体。

2.网页设计造型要素中的线

点的延伸形成线。线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。线是分割页面的主要元素之一，是决定页面现象的基本要素。商业网页设计视觉因素中的线主要指文字的行线，商品图形、图象的轮廊线，各种装饰线。线的形态主要有直线和曲线两大类：

(1)直线给人一种紧张、锐利、简洁、刚直感，从心理或生理感觉来看具有男性特点。直线又有：细直线，给人纤细、敏锐的心理感觉；粗直线，给人豪爽、拙朴、厚重的感觉；垂直线，给人一种挺拔、庄严感；水平直线则给人方向感和强烈的动感。

(2)曲线表现出一种动态，活泼，轻快的意味，显示了女性美的特征，商业网页设计中运用文字行、图象轮廊线或装饰线的造型，创造一种女性化的审美感。自由曲线是最好的情感抒发手段。打破了水平线组成的庄严和单调，给商业网页增加了丰富、流畅、活泼的气氛。水平线和自由曲线的组合运用，形成新颖的形式和不同情感的对比。

3.网页设计造型要素中的面

线的推移形成面。面是无数点和线的组合。面具有一定的面积和质量，占据空间的位置更多，因而相比点和线来说视觉冲击力更大更强烈。面在网页设计中通常指各种图形、色块的形状设计，不同形状的面具有自己鲜明的个性和情感特征，能给人不同的心理感受，如方形的面具有沉着，稳重，厚实，坚强的男性特征；三角形、梯形面常给人一种稳定、端正之感；但如果将它们倒过来设计，则给人一种轻、不稳定的感觉。圆形充实、圆满、活泼的感觉，比较适合表现儿童产品或者女性用品。菱形或不规则形体则给人一种活泼、轻快之感。

在商业网页的视觉构成中，点、线、面既是最基本的造型元素，又是最重要的表现手段。在确定商业网页主体形象的位置、动态时，点线面将是需要最先考虑的因素。必须熟练掌握设计语言。要善于根据商业特性采用不同的组合去体现不同的情感诉求，达到推销、销售商品和服务的作用。只有合理的安排好点线面的互相关系，才能设计出具有最佳视觉效果的页面，充分的表达出商业网页最终的诉求！二、商业网页设计中色彩视觉心理因素的运用

商业网页设计中色彩是确立网站风格的灵魂。色彩能产生强烈的视觉效果，使页面更加生动。色彩设计的好坏直接影响阅读者的观赏兴趣与心理变化。因此，地位十分重要。商业网页的色彩设计应从以下几个方面把握和利用其心理特征：

首先，整个页面要确定一个主色调，其有利于体现网站主题。每一种色彩都具有它自身的性格，如：彩度高，明度高的色彩常给人一种华丽感，相反彩度低，低明度的色彩则给人一种朴实感。暖色系、高明度的色彩能给人一种面积大的前进感。冷色系、低明度的色彩则能给人一种面积小的后退感。每个人群对色彩的喜好也有所不同，如男性较喜欢冷色，女性则偏好暖色或高明度、高彩度的色彩，儿童喜好纯色，讨厌浊色，老人则偏好浊色，中年人或文化层次较高的人偏好冷灰色等。因此在设计中要考虑主要读者群的背景和构成以及如何与商品的属性相呼应。

其次，在主色调下的色调搭配。若页面空间整体、色彩和谐统一，则给人一种幽雅、宁静感；若以对比手法处理，图形文字色彩明快突出于背景色，则页面空间氛围会显得活跃而有生气。但是，要注意不能有强烈的色彩对比，因为过于丰富的背景色彩会影响前景商品图片和文字的取色，使文字溶于背景中，不易辨识。所以背景一般应以单纯为宜。

最后，作为设计师在考虑网页设计时，还应考虑到时代流行性色和企业标准色的问题。所谓流行色，是指在一定范围内和时间内，非常盛行并易为人们接受的某些式样或颜色。而标准色的运用在网上扩大了品牌效应，也是对公司整体形象的统一应用，从而构成了企业识别系统（CIS）的重要部分。

三、商业网页设计中动、静的视觉心理因素的运用

商业网页设计构成要素可分为两种状态：静态与动态。静态要素设计具体指静止的商品图形、文字、按纽等；动态要素，具体指动态按纽、按纽连接、网页动画和视频等，它们是丰富、生动网页、张显个性、突出主题重要手段。

动静以及不同的动静组合都可以反映不同的心理与性格，如，动大体上给人活泼、生动的印象，但极慢的动常给人忧虑感；迅速或突然的动常给人焦虑、惊慌感。另外，静也常给人宁静、沉闷两种感觉。

商业网页设计中要注意处理好动静的关系，要整体和谐统一，给人生动而不躁动或厌恶感。同时还要遵循动态性原则与交互性原则。

1.动态性原则，即要有四维空间或五维空间的运作观念。一件网页商品、图片不仅是二维的平面或三维的视觉，也要有时间与空间的变换，情感与思维认识的演变等多维因素。

2.交互性原则，即界面设计强调交互过程。一方面是物的信息传达，另一方面是人的接受与反馈，对任何物的信息都能动地认识与把握。

四、商业网页设计中视觉流程心理因素的运用

商业网页设计是通过视觉元素引起人注目而实现商品信息内容的传达，为了使网页获得最大的视觉传达功能，使网页真正成为可读强性而且新颖的媒体，必须适应人们视觉流程的心理和生理的特点。

视觉流程的形成是由人类的视觉特性所决定的。心理学家葛斯达认为：人们阅读时，版面的上部比下部的注目价值高，左侧比右侧的注目价值高。因此，版面的左上侧位置最为引人注目，因此，在网页设计中一些突出的商品信息，如主标题、每天更新的内容等通常都放在这个位置。以便于一开始就吸引受众的视线，诱导其由上到下，由左到右地移动。此位置也被称作视觉的最佳视域。也就是最优选的地方。当然视觉流程是一种感觉而非确切的数学公式，只要符合人们认识过程的心理顺序和思维发展的逻辑顺序，就可以更为灵活地运用。设计者可以利用视线移动规律，诱导读者的视线作左右流动、上下流动以及斜线的不稳定流动，通过编排设计，人为地产生最佳视域，突出主要商品，以达到一定的视觉效果，传递商品信息。

商业网页作为一种新的企业开展电子商务的基础设施和信息平台，它的发展虽然没有多长时间，却兼容了传统平面设计的特征，又具备其所没有的优势，成为今后商品信息交流的一个非常有影响的途径。其设计是一种综合性的设计，它所涉及的范围非常的广泛，包括消费者心理学、视觉设计美学、人机工程、哲学等诸多方面，而本文中只从视觉心理因素的角度进行了一些阐述与分析，仅作抛砖引玉之用。

参考文献:

[1]李彬彬:设计效果心理评价[M].北京:中国轻工出版社,2005.1

[2]赵殿泽:构成艺术[M].沈阳:辽宁美术出版社，1994

网页设计论文范文篇4

3.temp目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。

脚本编写

1.Html文件的通用模板：

<html>

<!--

Generator:SubDesignStudio()

CreationData:2000-8-1

OriginalAuthor:eastline

-->

<head>

<metahttp-equiv="content-type"content="text/html;charset=gb2312">

<metaname="author"content="eastline">

其他meta标记

<linkrel="stylesheet"type="text/css"href="http://style/style.css">

样式表定义

客户端javascript函数定义及初始化操作

</head>

<bodybgcolor="#ffffff">

……

</body>

补充：

为了保证网站能够与下一代的web语言xml标准兼容，所有的HTML标签的属性都要用单引号或者双引号括起，即我们应该写<ahref=”url”>而不是<ahref=url>.

2.允许全文检索的页面，为了使Internet上的搜索引擎能够有效检索，在频道的首页的html的<head></head>之间应该加入Keywords和Description元标记，例如：

<metaname=”keywords”content=”东方新干线，汽车，买车”>

<metaname=”description”content=”东方新干劲线，全球中文汽车信息第一站”>

3.CSS文件的格式样例代码：

<styletype="text/css">

<!—

p{text-indent:2em;}

body{font-family:"宋体";font-size:9pt;color:#000000;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px}

table{font-family:"宋体";font-size:9pt;line-height:20px;color:#000000}

a:link{font-size:9pt;color:#FFFFFF;text-decoration:none}

a:visited{font-size:9pt;color:#99FFFF;text-decoration:none}

a:hover{font-size:9pt;color:#FF9900;text-decoration:none}

a:active{font-size:9pt;color:#FF9900;text-decoration:none}

a.1:link{font-size:9pt;color:#3366cc;text-decoration:none}

a.1:visited{font-size:9pt;color:#3366cc;text-decoration:none}

a.1:hover{font-size:9pt;color:#FF9900;text-decoration:none}

a.1:active{font-size:9pt;color:#FF9922;text-decoration:none}

.blue{font-family:"宋体";font-size:10.5pt;line-height:20px;color:#0099FF;letter-spacing:5em}

-->

</style>

在写<table>互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<table><tr>对齐，<td>缩进两个半角空格，<td>中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td>结束标记应该与<td>处于同一行，不要换行，

如我们注意在源代码中不应有这样的代码：

</td>

而应该是这样的：

属于同一个级别的<table>一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px的单元格应该在<td>和</td>之间写一个如果高度小于12px,则应该在<td>和</td>之间插入一个1*1大小的透明的gif图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command->applysouceformatting进行重新整理！

5.Width和height的写法也有统一的规范，一般情况下只有一列的表格，width写在<table>的标签内，只有一行的表格，height写在<table>的标签内，多行多列的表格，width和height写在第一行或者第一列的<td>标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height和width,保证任何一个width和height都是有效的，也就是你改动代码中任何一个width和height的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。

一般原则

1.在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免<colspan><rowspan>两个标记，经验表明，这两个标记会带来许多麻烦。

2.一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用<tbody>标记，以便能够使这个大表格分块显示。

3.排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:2em;}然后给每一段加上<p>标记，注意，一般情况下，请不要省略</p>结束标记。

4.原则上，我们禁止用<imgwidth=?height=?>来人为干预图片显示的尺寸，而且建议<img>标签中不要带上width和height两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给<img>附上width和height属性。

5.为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br>来人工干预分段。

7.所有的字号都应该用样式表来实现，禁止在页面中出现<fontsize=?>标记。

9.中英文混排时，我们尽可能的将英文和数字定义为verdana和arial两种字体。

10.行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.

11.网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：<ahref=”aboutus/index.htm”>而应该这样：<ahref=”aboutus/”>

12、嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。

/文件命名原则

1.每一个目录中应该包含一个缺省的html文件，文件名统一用index.htm

2．文件名称统一用小写的英文字母、数字和下划线的组合。

4.下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html文件的命名原则：

☆第一条缺省新闻取名index.htm

☆所有属于“国内新闻”的新闻依次取名为：china_1.htm,china_2.htm,…

☆所有属于“国际新闻”的新闻依次取名为：internation_1.htm,internation_2.htm,…

☆如果文件的数量是两位数，请将前九个文件命名为：china_01.htm,china_02.htm以保证所有的文件能够在文件夹中正确排序。

5.图片的命名原则遵循以下几条规范：

☆名称分为头尾两两部分，用下划线隔开。

☆头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。

☆一般来说:

放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner

标志性的图片我们取名为：logo

在页面上位置不固定并且带有链接的小图片我们取名为button

在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu

装饰用的照片我们取名：pic

不带链接表示标题的图片我们取名：title

依照此原则类推。

☆尾部分用来表示图片的具体含义。

网页设计论文范文篇5

一个网页要能表达一定的内容和具备一定的功能，就必须具有相应的结构成分。这些结构成分可以称为“网页要素”，因为它们是一个完整的网页不可或缺的。从宏观上来看，根据视觉流程从上而下的顺序，一个网页的总体框架由页面头部、中部内容区和页面尾部组成。考题中给出的这个页面，已经设有导航条所在的头部和包含了6个栏目的中部内容区，但是没有出现尾部。不过，尾部区域主要用于著录表明网站合法性的行政许可（或备案）文件的文号、版权信息、经营单位的基本信息及其相沈菁上海出版印刷高等专科学校，200093，上海3把握网页设计方案的审核要点关链接等，一般是整个网站统一设计、制作好模板后供各个网页使用的。作为网站下的一个专题频道，其首页的尾部只要照用网站已有的现成模板即可，无须再专门设计，所以，页面设计样张中一般可以不再列出。这样，可以说该网页没有缺漏宏观层面的要素。从中观上来看，页面头部应该有表示本频道主题的频道名称、表示本频道框架构成并方便用户选择浏览相应内容的导航条；中部的内容区域则应列出本频道中相对较为重要的栏目，以方便用户登录该频道后就能直接观看到一些重要信息。以这些要求来衡量，题目中的网页在中观上也是基本符合要求的。进行宏观和中观审核后，才是从微观上对网页各部分进行审核，其顺序一般也是从上到下。就网页头部来说，频道名称应该简洁明了，直接点明主题，周围可以加简单的图片，也可不加。同时，导航条上应该列出构成本频道的基本板块。如果空间允许，导航条上还可尽量再列出板块下的一些子项名称，以体现各个页面的层级关系，使整个网站结构清晰明了；如果空间不足，子项也可不列。

题中的网页设计图，在这些方面应该说是达到了一般要求。此外，频道只是整个网站的组成部分之一，一个网站往往可以设有多个频道，分别表示不同的内容主题，整个网站的内容特色和最为重要的信息功能，则集中在网站首页上。用户浏览网站时，网页按树形结构一层一层展开，浏览得越具体，离开作为“树根”的网站首页距离就越远。这样，作为一个网站下的专题频道，就应该设有与网站首页的链接，让用户可以通过单击这个超链接直接返回网站首页。分析题目中的网页设计图头部区域，可知其中缺漏了这个要素。所以，应该在导航条上增添与网站首页链接的文字或图形。但在考试中，绝大部分考生都忽视了这一疏漏。就网页中部区域来说，一般各个栏目都应该有相应的名称，再在其下按具体内容的多少，或直接提供以文字、图片、动画、音频、视频等形式表现的有关内容，或列出相关内容的标题供用户进一步展开网页浏览。题中所示网页设计图的中部区域，基本上做到了这些，唯独“头条图片”这个栏目，既没有栏目名称，也没有对图片作诠释说明的相关说明文字，即图题。当然，图片栏目有些特殊性，其所在位置可说已经表明是“头条”，内容表现形式也已体现出是“图片”，再专门标上栏目名称便有蛇足之嫌。然而，图题是必需的，不可缺漏，否则用户就不易理解该图是什么意思，或者产生张冠李戴的误解；况且，图片有时可能会因种种原因而不能正常显示，而有了明确的图题，用户可借以知道该处是什么。所以，为了保证信息的传递更直接有效，更好地提升用户的阅读体验，应当补上图题这一网页要素。在图题的设置上，如果栏目中只有一幅图片，图题可以单独放在栏目下部；如果栏目包含一组图片，那就宜把每幅图的图题与图片有机结合在一起，置于其下方，而在栏目下部列出与各幅图片链接的标志。需要说明的是，虽然图片因能够美化网页、吸引用户注意而在网页设计中有着重要的作用，但一个页面上不宜安排过多的图片，否则会降低打开页面的速度。同时，图片必须事先经过优化处理，一般采用gif或者jpg压缩格式，以减小页面的数据下载量。

2注意项目安排是否逻辑合理

网站的功能是展示信息供用户浏览。为让用户顺利地找到其所需要的内容信息，网页上的各个项目安排就必须遵循一般用户都准确理解的规则。逻辑体现了人类思维的共同规律。如果网页的设计在逻辑上合理，用户就能方便地按照一般逻辑规律使用网页。这样，审核网页设计方案中各个项目的安排是否合乎逻辑，就成为网络编辑的重要任务。网页项目的安排要达到逻辑合理，就要根据事物分类的一般逻辑要求，将具有相同属性内容的项目进行归纳后，共置于某个可以概括这些属性特点的类别中。审视考题中所给网页的各个项目可以发现，几个栏目的属性具有基本平行的关系，将它们并列置于同一层级是正确的，但是，页面上出现两个同名栏目则是相互矛盾的，应该修改。根据栏目内容和题干中的交代，可知应该把中间栏目的名称改成“积分榜”。此外，导航条上所列各个板块，其属性也具有平行关系，可以并列，而板块与其包含的子选项之间则具有类属关系，所以将子选项分别置于各板块内，这也是合理的。但是，进一步分析各个子选项的内容，就能发现有些子选项的类属划分在逻辑上是不合理的：“全场回看”不应属于“新闻”板块，应置于“视频”下，而“最新动态”倒是应属于“新闻”板块，却被误置于“视频”板块内；“射手”和“排行”主要提供一些统计数据，而不是与用户讨论，所以应属于“数据”板块而非“互动”板块；相反地，“”和“微博”应属于“互动”板块而非“数据”板块。因此，考生应该对这些子选项的分布作出合理的调整。

3注意版式的规范与否

在长期的出版工作实践中，对图书、期刊、报纸等传统出版物的版式形成了不少规范性要求。遵循这些规范，不仅可以让版面显得美观、整齐，给人以审美的愉悦，更能充分体现版面内容之间的逻辑关系，有助于读者准确理解。一个网页实际上也相当于一个版面。所以，传统出版物的版式设计规范大多也基本适用于网页，仅有少量差别。网络编辑审核网页的版式时，要以传统出版物的版式规范为基础，再考虑一些网页的特有规则，从而保证页面规整、易读。就文字的大小而言，网页上一般宜用12-20像素的字，且页面头部区域的用字宜大些，中部区域的用字适中，而底部区域的文字一般较小。就文字形体而言，网页中应使用通用字体，这样才能在各种终端上都顺利显示。同时，考虑到屏幕显示与印刷品展示的效果有一些差异，汉字通常较多采用宋体和黑体，而较少用楷体和仿宋体；字母通常采用Arial、Verdana或者Helvetica字体，而在印刷型出版物中应用特别多的TimesNewRoman字体则较少采用。同时，网页上使用的字体尽量不要超过3种，以确保网站页面风格的统一性。网页上的各个项目名称，其作用和地位与书刊目录中的各级标题相当。所以，其版式设计的规范要求之一，就是用字应该既错落有致，又相对统一。错落有致，是指处于不同层级的项目名称，其用字格式应该遵循“从大到小、从重到轻”的一般原则；相对统一，是指处于相同层级的项目名称，其用字格式应该保持一致。

从上述要求来看，题中所给网页设计图在版式方面存在缺陷。头部区域的导航条上，虽然4个板块名称使用相同的字体、字号，18个子选项的用字格式也相同，符合相对统一的要求，但是层级较高的板块名称用字却既小于、也轻于层级较低的子选项。这就把两者的层次级别颠倒了，必须修改。从现有页面展现的效果和空间的占用情况来看，比较适宜的是把板块名称的字号放大，而字体则可不改，以避免粗体字过多而导致区域过重、过密的现象。中部区域的“要闻”“互动调查”“热点聚焦”“射手榜”等文字，都是栏目名称，属于同一个层级，格式应当保持一致。但是，如果将这些名称对比一下，可以很明显地看出“互动调查”的字体与其他栏目名称不一样，应该予以修改。考生在这个考点上失分较多，从一个侧面反映出他们的职业敏感性还不够强。网页版式设计的规则也有不同于传统出版物的特点。比如，在传统出版物中，对标题的字数一般没有限制，长标题可以转行排列，即使在集中了许多标题的目录中，也允许这样处理。但是，网页中的标题文字则不允许转行，尤其是在集中排列了许多标题的目录式栏目内。因此，不少著名网站都对标题的字数有统一规定，如《新浪网编辑手册和规范》中就规定“频道首页要闻标题为一行题，少于16字”，这实际上是适应了网页页面的特殊性。在书刊的目录中，作品标题之后（或之前）都有页码（有时还有作者姓名）兼作分隔符号，读者可以很容易地以页码为标志将一个个标题区分开。网页上的目录式栏目内，各个作品的标题都不标页码（实际上也无法标出），也不列相应的作者姓名（一般在展示作品本身时才列出）。这就在充分利用网页空间的同时，也使得各个标题没有明显的分隔符号。一个标题如果转行排列，会让用户误以为是两个标题。此外，书刊中标题的转行需遵守一些规则，如不得割裂词义、助词或叹词等虚词不得置于下一行的行首等，以避免读者产生误解。由于各种标题的内容和字数纷纭多样，需要在处理书刊校样时由编校人员专门对标题的转行进行调整。然而，网页上的文字转行是由计算机自动处理的，而计算机技术目前尚未达到能够对词义或词类进行智能分析判断的程度，无法按照某个标题的字符构成情况对转行进行灵活控制。可见，“标题不得转行”这条规则体现了网页的特殊性，是很合理的。然而，题目所示设计图中“热点聚焦”栏目内却存在标题转行现象，这无疑应该消除。遗憾的是，能够注意纠正这个错误的考生为数不多。

网页设计论文范文篇6

关键词：格式塔网页版面审美心理

网页版面设计要给浏览者创造一种气氛，使浏览者在未阅读之前便可以概括领略整个网页的风格。当浏览者刚打开网页的时候，首先引起他们注意的是由颜色、形状、大小各不同的要素组成的一个版面式样。这样浏览者就会从一个抱着获取信息的功利态度的求知者转而成为一个审美期望的审美主体。并在对网页版面式样瞬间的知觉中，完成一个完全脱离网页内容、只“观照”网页版面式样的审美意识活动。

格式塔派创始人韦特墨于1923年在一篇论文中提出了“知觉结构原则”，认为一个人“采用直接而统一的方式把事物知觉为统一的整体，而不是知觉为一群个别的感觉”，“在许多刺激条件下，有尽可能把图形看成‘完好’图形的趋向。”这一学派提出了“同形论”，按照苛勒的说法，其含义是：“经验到的空间秩序在结构上总是和作为基础的大脑过程分布的机能秩序是同一的。”[1]美国美学家鲁道夫·阿恩海姆的《艺术与视知觉》一书中提到，在用外部事物的形式与主体的情感之间存在着“力”的结构的“同形”关系，来解释形式的情感意味，这就是说，由于外在世界对象物的物理的力与人的内心世界的心理的力在结构图式上有“同形同构”或“异质同构”关系。因而，当某种外在事物形式的力的结构图式传达到人的大脑时，与大脑电化学力场中某种力的结构图式相互对应，引起大致相同的电脉冲传递，使人的内在情感与外在事物形式合拍一致，于是主体产生审美愉悦，客体成为审美对象。例如，音乐是婉转下降的旋律，与人在悲伤时大脑力场的力的结构相同，都会给人带来一种凄切的意味。格式塔的同形论，以内外双方力的式样的同形或者异质同构来解释对象形式的表情性质。艺术就要善于通过物质造成这种结构完形，唤起欣赏者身心结构上的类似反应，不要只以题材内容使浏览者单单了解其意义。[2]根据这一理论，我们可以这样解释：浏览者是采用直接而统一的方式把版面的各个要素知觉为一个统一的整体和完好图形的，而不是把它知觉为一群个别色彩、形状、大小、位置和要素。完美的网页版面样式的物理的力与读者的内心世界的心理的力在结构图式上是同形的，因此，当前者这一力的结构图式传送到浏览者的大脑时，与浏览者大脑电化学力场中某种力的结构图式相互对应、吻合，引起大致相同的电脉冲传递，唤起了浏览者身心结构上的类似反应，使浏览者的内在情感与完美的网页版面样式合拍一致。于是浏览者产生了审美愉悦，网页版面样式成为审美对象。

网页版面式样的审美心理是影响网页可读性的一个重要因素，一个版面式样组织得合理的网页会使浏览者产生愉快的视觉感觉而乐意亲近，必然增加网页的吸引力，诱使浏览者去阅读；一个个面目狰狞的网页在浏览者把目光投向页面的时候就会产生一种紧张、憋闷的感觉，从而产生排斥心理，影响浏览者点击和阅读的欲望。从审美心理学上说，主体的审美在表面上虽然是无关功利的，但究其实质，事物的审美价值同其功利性的价值并非毫无关联的，二者的联系是间接的，但又是强有力和不可忽略的。

格式塔学派把人们由知觉活动组织成的具有整体性的外部事物的“形”，称为塔式塔（意为完形）。它又称为完形心理学。考夫卡认为，我们自然而然观察到的经验，都带有格式塔的特点。[4]他把事物的整体性及形状完全归结为神经系统的组织作用，认为这种组织作用与经验知识毫无关系，完全是先天生成的，每个人都是依照他经验到有意义的知觉场的。他归纳出一套起组织作用的规律，称作组织律：图形与背景（区分度越大，图形越可突出而成为我们知觉的对象）；接近性和连续性（某些距离较短或互相接近部分，容易组成整体）；完整和闭合倾向（某一部分有闭合的趋向，容易组合成整体）；相似性（相似的部分容易组合成整体，而不相似的部分彼此分离）等。人的神经系统依靠这些组织原则，就可以把对外界事物的知觉组成一个整体。

格式塔心理学家研究发现，在一个构图中，对于浏览者来说，内部质地细密的或光波较长的色彩的图形，看上去离观看者近一些，从而突出来被看成“图”，而质地稀疏的或者光波较短的色彩的图形，看上去离观看者就远一些，易被看成为“底”（或“背景”）。所以在组成网页版面的成分中，导航、广告、边界、形状、明暗等在浏览者瞬间视觉印象中一部分为形象，一部分为背景。所以在具有一定配置的视觉空间，根据网站需要，将一些对象突现出来形成主体，构成版面的“图”，有些对象成为背景，易成为“底”。

还可以应用其他几种组织律来完善网页版面式样。那些距离较短、互相接近、形状色彩相似部分容易被结合在一起，从背景中被区分出来，成为相对独立的统一的知觉对象，而不相似的部分则显得彼此分离，形成对比。网页设计可以利用内容和形式上的紧密联系，把若干个性质相同的内容放在一起集中处理，通过恰当的布局结构使这些内容在版面上有条不紊地组织起来。具体地说，是通过形状的大小，色彩的深浅，字体字号的差异，空间位置的不同，虚实的变化，线条的曲直，动态与静态，节奏的快慢等变化使各部分之间形成相辅相成的呼应关系。在某些局部，只用断续的框线、粗略的、不封闭的形状遥相呼应，浏览者也会在闭合律的作用下把它们组织成一个整体。通过对组织律的应用，可以使版面富于动感，增强版面的表现力和可读性。

网页设计可以在设计实践中应用格式塔心理学的基本原理，遵循审美心理规律，创造出复杂完美的版面网页格式塔，使浏览者在瞬间的观照中，获得审美愉悦，提高页面的可读性。

参考文献：

[1]刘叔成，夏之放等美学基本原理[M].上海人民出版社，2001

[2]李泽厚李泽厚哲学美学文选[M].湖南人民出版社，1995

网页设计论文范文篇7

1.1教学现状分析

后续课程《网络信息系统开发与利用》要求学生能读懂HTML代码并能修改或编写，也会影响此课程的学习。早期页面布局方法一般为表格布局，现在这种技术已经落后被淘汰，取而代之的是DIV+CSS技术，此方法使页面内容和显示效果完全分开，页面元素的布局更加灵活，网站在制作过程中风格的统一、后期网站风格的改变及网站的维护更新将会变得更加方便。

1.2确立课程教学目标“网页设计与制作”实践培训课程主要面向网页设计人员必备的一些基本技能，使学生能够具备以下四方面的能力，基于以上表格的内容“，网页设计与制作”这门课程采取了以“教师为主导地位，学生作为主体”的模式进行教学的，这种模式符合我校的教学和管理模式的要求，让老师根据学生的特点来指导《网页设计与制作课程》的探索、分析、研究以及改善学生的实践操作动手能力。采用任务驱动的教学模式方法，在课堂上以案例为主进行实践教学环节。在教学过程中可使用网页模型为例，根据教学内容的安排和要求，教师引导学生并为学生创造环境，让学生快速发现、探索和解决网页中的问题，来激发学生的好奇心和欲望，带动学生兴趣，促进学生的创新能力。

2课程教学体系的基本思路

在“网页设计与制作”课上协调好教学课程，努力使学生变被动学习为主动学习，树立以学生为中心，师生关系和教学岗位、教师与学生之间，通过师生关系和互动创造了良好的教学氛围，这是教学改革进程的一个重要组成部分。有效的学生交流机制是建立学生互动的良好基础。

3课程教学体系构建

3.1课程内容结构

“网页设计与制作”作为计算机类专业课程实践环节，可以作为其他相关专业的实践课程或选修课，这是一个操作性和实用性并重的课程。因此，在这个过程以系统建设，网页设计人员培训为目标，培养应用型人才为主线，来从构建课程知识，能力及素质建设，并注重实用技能。如下图1所示：

3.2教学内容的组织和安排

教学内容是教学中的重要组成环节，在教学内容上，要重视理论知识联系并应用到实际中的这一过程的安排，以更好地将传播知识、培养能力、素质教育的要求恰当的整合起来，进而达到更好的教学目的。

（1）理论与实践相结合。强调知识和技能的结合，突出实际生产现场，将实际操作技能作为重点，加大实践教学。抓住课程内容的基本要求，妥善处理相关课程和教学内容。在整个课程后，每个系列都配备了完整的课程专题，最后安排一个星期的课程设计。

（2）理论与实际相结合结合学生实际情况的要求，安排公司的网页设计工作，开展顶岗实习培训，提高解决实际问题的能力，更好地让学生有机地学习各部分掌握的内容。

3.3实践教学方法

由于传统的时间和空间的有限性的课堂，使教师不能充分利用教学资源，以达到最佳的教学效果;而网上教学是无限的空间，考虑信息容量等因素的影响，可最大限度地利用教学资源。对于学生在房间里探索互联网，学生在BBS平台上讨论，举行每学期的网页设计大赛，根据学生对教学网站的工作，让学生选择入围的优秀作品，再由老师评出学生奖项。

4课程教学体系建构

这个课题的意义是实现理论和实践的融合，实现学生的思维、行为和态度的整合，要求学生全面发展。

4.1运用多层次的教学方式

教学改进一直是教学改革的重点。怎么样能更好地体现教学特色，怎么样能实现教学目标，解决这一问题的教学方式就是采用多层次的教学方法，如：教师进行案例分析，教师和学生共同模拟和角色扮演的场景以及其他创新教学方法，而这种多样化的教学手段体现三个注意层面，分别为：老师讲课实践指导，开放自我的做法，引导和探索性实践相结合“，进而实现教学中的多层次的教学方式。

4.2开展多元化的教学活动

基于多种教学方法，我们可以开展各种教育活动，主要是在“知识交流和自学相结合、综合教学实践与研究相结合、课堂培训和课外活动相结合”原则下进行的多样教学活动，如使用任务驱动教学。任务驱动教学法让学生从一个典型的任务开始，从网络的实际工作流程设计出发推动教学活动，抓住设计问题的重要而艰巨任务。教学应遵循两个原则：第一，循序渐进的原则，根据学生接受不同的能力，目前的水平和兴趣，从简单到复杂，从外到内;二是要提高的思想能力，注重教学生一种思想，解决问题的方法，引导学生运用多种方法来解决同样的问题。在这个过程中，学生可以继续获得成就感，更能激发他们的求知欲望，培养独立探索的自主学习能力和开拓精神。

4.3进行多重性的能力培养

这就要求我们的学生应具备基本课程知识，基本技能，操作课外协作，从中调动学生学习积极性网页教学活动,促进学生在实际应用中的能力的展，同时沟通，心理学专业素质，这样才能真正的得到业务综合能力。实现这一目标，既满足标准和市场需求，有使得我们在培养理论知识，基本技能外，还巩固和着力加强对学生动手能力的训练.培养多重性能力，是学生的学习知识、学习技能以及培养学生的网页素养、能力通过中建立教学平台，利用课堂教学的各个电子内容，让便于自学的学生放学，提高学习水平，可以丰富学生的学习资源。

5小结

网页设计论文范文篇8

关键词:信息化技术；网页设计与制作；高职学生；蓝墨云班课APP

1引言

网页设计与制作是一门有着广泛应用、实用性非常强的课程，面对具体的教学内容，少部分学生比较精通技术与理论知识，大部分学生则“百思不得其解”。针对这个问题，传统的授课方式已经不能满足要求。笔者充分运用信息化技术对课程教学模式进行改革，从高职学生的学习特点、信息化技术教学过程设计、教学改革效果等几个方面，谈谈信息化技术在教学过程中的运用及效果。

2高职学生的学习特点分析

在信息技术快速发展的今天，90后高职学生更喜欢从事实践活动，追求未知事物，热爱冒险，敢于创新[1]。他们还有另一个特点，即从小就受网络信息产品的影响，移动信息技术的发展变革带给他们更多选择娱乐方式的机会，各类网络游戏、富媒体信息很轻松地击败了不少学生的自控力，存在大量“手机不离手一族”。网络游戏、微信、QQ信息通信和网上购物都是90后学生休闲娱乐的平台，学生的平时生活和学习方式正在被网络信息技术改变。课堂上学生的手机管理问题一直是教师进行课堂教育研究的热点，学生课堂玩手机现象随处可见，虽然教师针对这个问题采用很多措施，但是学生课堂看手机现象一直存在，采取的措施很难剔除这个现象[1]。笔者在所授网页设计与制作课程教学中，尝试用移动网络和智能手机开展信息化技术教学，借助蓝墨云班课APP移动教学平台，构建“处处能学、时时能学”的教学网络平台，为学生提供移动手机上的课程基本信息、任务推送、课前课中测试、教学课件、教学辅助微课、教学视频等，使学生体验在娱乐的环境中学习理论知识和实践技术，学生学习更自由、有趣，教师教学更轻松。

3教学过程设计

在教学过程中，借助蓝墨云班课APP进行教学，结合模拟公司项目教学模式[2]，与学生在课前自主预习、课中知识学习与技术实践、课后拓展延伸等方面进行积极互动。为了方便展示具体的教学过程，笔者主要选取网页设计与制作课程模拟开发项目中的某校教务处网站办事指南模块来进行展示。课前自主预习课前自主预习主要包括教师课前准备教学资料、教师课前任务、学生课前预习工作。1）教师在蓝墨云班课APP移动端上传有关办事指南模块开发的相关教学资源，如课前学习任务单、微视频、课件、授课计划、教案等资源。2）教师针对办事指南模块开发，课前在蓝墨云班课APP班课上两个任务：①各小组调研某校教务处网站办事指南模块开发需求，形成调研报告，并将报告上传至蓝墨云班课APP班课讨论活动区域；②各小组根据各自调研的情况，网上收集办事指南建设模板，根据模板设计各自的办事指南模块，并将设计的作品以图片的形式上传至蓝墨云班课APP班课讨论活动区域。3）学生各小组主要做好四件事：①浏览蓝墨云班课APP班课上的教学资源，了解课程模块的教学意图；②完成办事指南模块开发的需求调研，撰写调研报告，并将报告上传至蓝墨云班课APP班课；③完成网上模板搜集，并根据小组调研的情况设计办事指南，将作品以图片的形式上传至蓝墨云班课APP班课；④各小组对提交的报告和作品进行点评和讨论。课中知识学习与技术实践1）课前导入，任务检验。教师先利用蓝墨云班课APP推送有关项目调研活动的测试活动，让学生根据掌握的知识和课前的调研情况完成测试；然后向学生展示课前各小组做的调研报告评价排名情况，抽查点评文本，结合各小组做的调研情况，跟学生一起分析测试题目。通过这个环节，学生就能明确本次课最终学习意图，就是设计完成某校教务处网站办事指南模块的开发工作。2）小组汇报，展示设计。通过蓝墨云班课APP上各小组对办事指南模块设计作品的评价情况，教师挑选做得比较好的两个小组进行设计展示和说明。被挑选的两个小组分别选派一名代表上台展示，主要从调研需求和技术两个层面来对设计作品进行说明。通过小组展示，学生能较直观接触办事指南模块作品初始原稿，为接下来的设计奠定基础。3）情境构建，任务分析。教师先通过蓝墨云班课APP推送一个某校教务处副处长针对网站办事指南功能提出要求的视频，在学生观看完视频后，跟他们共同分析任务，明确任务要求，理解任务需要解决的问题。这里的任务是开发符合要求的网站办事指南模块。教师先根据视频要求，跟学生一起修改调研报告，确定开发功能；接着跟学生一起分析在开发过程中要用到的技术，即网页脚本如何控制DIV层的显示。确定了功能需求和技术知识，学生就能正确进行模块设计。4）分组协作，小组互评。各小组讨论办事指南模块设计，有针对性参与蓝墨云班课APP班课设计讨论，各小组间进行设计交流；接着将各自设计的最终设计稿以图片的形式上传至蓝墨云班课APP班课，小组之间都可以在平台上进行互评。5）专家点评，教师总结。教师将某校教务处副处长设置为班课助教，利用移动网络远程视频功能，助教参与教学过程。根据各小组互评的结果，助教挑选两个小组设计的作品进行现场点评。点评后，教师结合助教的点评，总结办事指南设计要点，带领学生再次进入办事指南实践开发，进一步引导学生掌握设计要点。课后拓展延伸课堂教学活动结束后，首先，教师可以通过蓝墨云班课APP提供课后答疑和测试，测试的内容主要是有关网页脚本控制DIV层的显示的问题；同时，学生只要有问题，也可以通过答疑活动提问，提问形式多样，可以是图片、文本、语音和文件。其次，教师在蓝墨云班课APP推送课后任务，要求各小组继续完善教务处网站办事指南模块的开发，并将开发效果展示给某校教务处工作人员，各小组撰写好开发心得。最后，各小组将撰写好的开发心得和相关图片上传至蓝墨云班课APP班课课后任务活动，小组间对心得进行互相评价，相互促进和监督；针对主要评论问题，教师也给出一些评判标准或建议。通过课后活动环节，学生充分利用课余时间学习，继续交流技术实践，在蓝墨云班课APP班课上互动帮助，进一步提高学习质量。

4教学应用效果

网页设计与制作课程在实施信息化技术教学后，学生通过参与模拟实践项目活动，感受真实的工作环境和工作过程，掌握完成任务所需的技术知识和实践技能，提高职业能力。笔者自从2016年3月启用蓝墨云班课APP进行教学，创建班课《网页设计与制作》四个，学生累计139位，开展活动42次，班级的总平均出勤率达到97%，远远超过以往学生出勤率。在每个学期末，笔者都会借助蓝墨云班课APP对授课班级进行问卷调查，主要调查学生在自主学习能力、团队合作精神、工作责任意识、沟通能力和分析解决问题的能力提升方面的投票情况。调查结果显示：93%的学生认为在自主学习能力方面得到提升；96%的学生认同团队合作精神有所改善；86%的学生认为增强了工作责任意识；100%的学生认为提升了沟通能力；92%的学生认为在分析解决问题的能力方面得到增强。由此可见，借助蓝墨云班课APP开展信息化技术教学，受到学生欢迎，以往学生课堂上玩手机的现象逐渐消失，学生的学习积极性得到提高，特别是在自主学习能力、团队合作精神、工作责任意识等方面得到进一步增强。

5结语

网页设计论文范文篇9

1网页标记语言正确性检测

1.1研究工具。目前，网页检测工具较多，提供的检测功能也有所不同，能够进行各种浏览器的兼容性测试、负载测试，以及网页标记语言检测等。比较知名的网页检测工具有Googlewebpagetester、BrowserShots、IETester、Feedvalidator等。网页正确性检测是W3CWebQualityTools中的功能，主要包括：（1）标记检测（MarkUpValidator），可用于检测网页上的各种常用的标记语言的规范性和正确性，如HTML、CSS、XHTML、XML、WML等；（2）Web内容的数据交换规范（FeedValidator），用于检测Atom或RSSfeed语法的规范性和正确性；（3）层叠样式表检测（CSSValidator），用于检测内嵌在HTML、XHTML中的CSS样式的规范性和正确性；（4）超链接检测（LinkChecker），用于检测网页中超链接（Link）和锚点（anchor）的规范性和正确性。本研究主要使用W3C提供的网页标记语言检测工具（MarkUpValidator），检测论文投稿网站上网页的各种常用的标记语言的规范性和正确性。通过该工具可以检测出受测网页的错误数（W3C网页标记规范性）、服务器种类、网页大小、网页格式、网页编码（GB-2312或其他）、文件类型等，并会列出错误之处及建议改进的方式。检测的方式除了可以直接输入网址外，也可以上传该网页的源代码进行检测。图1为网页标记语言检测的主界面，本研究主要采用输入统一资源定位符（URL）的方式进行网页检测。检测结果分成两部分；一部分是结果摘要，叙述错误数、警告数、编码（Encoding）及网页格式（Doctype）是什么版本等，如图2所示。另一部分则为检测出的错误或警告详细结果，并列出改正建议如图3所示。1.2研究样本。由于我国学术期刊的投稿网站较多，难以对所有的论文投稿网站的所有网页标记语言的正确性进行检测，因此本研究需要选择一定数量的样本进行检测工作。参考北京大学图书馆公布的2014版《中文核心期刊要目总览》，本研究选择其中列出的出版事业类12种期刊，以及图书馆事业、信息事业类的18种期刊进行研究（总计30种期刊），选择这些期刊作为研究样本的原因一方面是这些期刊均属于中文核心期刊，在网络上得到的关注度比普通的期刊高[12]，一方面是出版类、图书情报类的期刊属于专门研究期刊编辑出版等问题的专业期刊，研究这些学术期刊建立的论文投稿网站网页标记语言的正确性和规范性具有一定的示范作用。由于选取的30种期刊中有部分期刊没有建立论文投稿网站系统，部分仅有Email投稿方式，因此在研究中需要将这些期刊忽略，最终所选取的期刊如表1所示，有效样本为21个，取样日期为2016年4月5日。由于考虑首页为论文投稿作者首先打开的界面，其网页标记语法的正确性将首先影响到用户的操作，因此本研究将检测目标锁定在论文投稿系统网站的首页（MainPage），在网页标记语言检测的主界面中输入首页的统一资源定位符（URL）进行检测，并记录其检测结果。

2检测结果的统计分析

本研究主要基于W3C的网页标记语言检测工具，从网页格式定义种类（Doctype）、网页错误数及网页错误类型进行分析，从中了解学术期刊论文投稿网站在网页标记语言上的问题，以及提出建设参考意见。在对有效选取的21个期刊论文投稿网站首页进行检测的过程中，19个期刊的论文投稿网站能够正常进行检测，但有两个期刊论文投稿网站（大学图书馆学报、现代情报）的首页无法检测，其中大学图书馆学报的网站对检测进行了禁止设置（Forbidden），现代情报网站在检测中无法找到（NotFound）。2.1网页格式定义种类及网页错误数。网页格式如果没有定义，除了在内容呈现上可能出现错误，在数据交换及传输时可能也会出现问题，除了会造成数据的流失，有时还会导致错误信息的传递。对于论文投稿网站的网页格式定义类型，除了两个无法检测的期刊网站之外，其余19个期刊的论文投稿网站均对网页的格式进行了定义，包括两种W3C定义标准，HTML4.01Transitional和XHTML1.0Transitional，具体的定义类型可见表2。由表2可以看出，有6个学术期刊的论文投稿网站采用的是XHTML1.0Transitional的格式。相对于HTML4.01Transitional而言，XHTML标记语言，通过结合XML和HTML的功能，使得网页内容更容易被手持移动设备以及电视媒体等访问。对于网页错误数，被检测的19个期刊论文投稿网站首页的网页标记语言都出现了错误，出现错误数最少的是中国科技期刊研究和中国图书馆学报，部分期刊的网页标记语言错误数较多，如出版科学、情报科学、图书馆理论与实践。2.2网页错误类型。国际万维网联盟网页标记检测服务（W3CMarkupValidationService）给出定义的错误类型总共有447种（详见validator.w3.org/docs/errors.html#noverbose），本研究检测的19个期刊论文投稿网站的网页错误类型经过统计有121种错误类型，主要的错误原因在于标记属性使用错误或者未加定义。期刊论文投稿网站首页的前几项错误项目分别是Thereisnoattribute“……”（136次）、Documenttypedoesnotallowelement“……”here（104次）、Requiredattribute“……”notspecified（91次）及Element“……”undefined（85次）。属性定义有误在信息的显示上可能不会出现问题，网页内容能够正常呈现，但对于数据的交换及传递会有一定程度地影响。在统计的121种错误类型中，属于标签（Html-Tag）的错误数最多，说明期刊论文投稿网站的网页大多数为Html标签的定义或使用错误，因此在撰写Html语法时应注意标签的使用正确性。另外，由于网页制作软件的可视化和方便性，使得网页设计人员更容易的设计制作动态化的脚本语言，导致脚本（Script/Script-Tag）出错的数量也偏高。由于19个期刊论文投稿网站网页的错误类型和数量较多，无法用表格的形式一一列出，图4为中国图书馆学报的检测结果，可以看出中国图书馆学报的论文投稿网站的网页没有出现标记使用属性方面的错误，仅有两条格式定义类型的错误。

网页设计论文范文篇10

关键词：眼动实验；网页设计；高校官网；浏览习惯；搜索效率

互联网的时代，高校官方网站是高校宣传的重要平台与载体，网站设计的好坏直接影响用户使用高校官方网站的积极性，然而对于高校官方网页设计的研究方法多以问卷调查、专家打分等方式进行，评估具有主观随意性。而眼动仪可以实时捕捉用户的行为习惯，通过被试者的眼动轨迹、热点图以及相关数据可对网页的设计情况进行直观、准确地分析评价。本文以国内部分知名高校官方网站首页为研究对象，采用眼动实验对被试者浏览高校官方网页过程进行研究，并在实验结束后立即填写调查问卷，获取用户的主观信息，将主观评估和客观数据相结合，对用户浏览高校官方网站的习惯及用户的视觉搜索因素进行分析探讨，使结论更加全面具体，为高校官方网站的网页设计提供参考依据。

一、眼动实验与高校官方网站设计

眼睛是人类获得外界信息的主要途径，视觉是加工处理信息的重要方式，用户浏览网页时主要是通过眼睛获取搜索信息。眼动仪是用来记录处理眼动数据的设备，是心理学研究的重要仪器，眼动测试是内隐测量方法的一种，其实验数据可以直接反映用户行为，近些年被广泛应用于网站的设计与评估中，用于分析用户对网站的视觉浏览习惯。眼动实验能够记录用户在浏览网页时眼睛的运动数据，包括总注视时间（TotalFixationTime，TFT）、注视次数（FixationCount，FC）、平均注视时间（AverageFixationTime，AFT）。眼动实验的主观性图表在网页设计研究中被使用最多的是热点图和轨迹图。近些年，眼动追踪被广泛应用于网页设计研究之中。许鑫等人利用眼动追踪实验研究用户在浏览高校图书馆门户网站主页时的浏览习惯，提出了高校图书馆门户网站网页设计时应考虑的重要因素[1]；王诗傲将眼动分析法引入到工业设计服务网站的界面设计评估上，通过眼动指标完善工业设计服务网站评价体系内容[2]；刘玮琳等人通过眼动实验探究网页界面中的分类信息设计对用户认知效果的影响规律[3]；吴安波等人对某高校教务网站的可用性进行了分析，在一定程度上为教务网站的设计及改进提供参考[4]。由此可见，利用眼动实验对网页设计进行研究已经较为成熟，为高校官方网站网页设计的研究提供了理论基础。高校官方网站是依托于高等学府，以服务教育、服务科研、服务师生为目的，肩负对内交流、对外宣传的使命，从事教育资源整合、高校信息、辅助教学管理的综合性网站[5]。高校官方网站既是学校信息传播的重要载体，也是校内师生管理系统的重要入口。针对高校官方网站设计研究方面，李嘉瑜以国内“985”高校为研究对象，以美学视角为出发点，对高校官网的版式界面进行了详细的分析[5]；万立军等人通过国内外学者对目前高校网站信息服务质量评价相关研究内容的分析，构建我国高校网站信息服务质量评价指标体系[6]；孔宁通过询问技术，从用户的主观倾向性出发，对高校门户网站可用性进行了进一步的探索与研究[7]；王传松应用文献分析法、用户访谈和问卷调查法、层次分析法以及模糊综合评判法等方法，构建了基于用户体验的高校网站评价模型[8]。通过对搜索的文献进行整理发现目前针对高校官方网站网页设计的研究并不多，眼动实验在这一研究领域中还有待探索。

二、实验设计

眼动实验的方法主要有两种，一种是无目标浏览，另一种是典型目标搜索任务。本次实验分为两组（实验A和实验B），实验A：无目标浏览，在规定的时间内被试按照自身习惯对十张刺激材料进行浏览，研究被试在正常情况下浏览高校官方网站主页的习惯。实验B：典型目标搜索任务，要求被试以通知公告栏作为搜索目标，在浏览结束后对实验材料进行打分，研究通知公告栏在不同位置的搜索效率。

（一）实验材料

流量是衡量网站是否受欢迎的一个重要指标，本次实验刺激材料采用站长之家根据Alexa排名、百度权重、PR值以及反链数四种因素综合排名的高等院校网站排行榜的前十名高校官方网站主页，分别编号为A、B、C、D、E、F、G、H、I、J，十所高校均为双一流高校，查询时间为2020年11月29日。并选取西安工程大学官方网站主页作为演示材料进行规则讲解。

（二）实验设备

实验设备为由瑞典公司所生产的Tobii眼动仪，型号为：TobiiX2-30，采样频率30Hz。实验材料通过分析处理软件Ergolab2.0显示在戴尔电脑显示屏，分辨率为1920*1080，被试眼睛与显示屏的距离保持在60cm左右。

（三）被试

高校的师生是高校官网吸引的绝大部分访问对象，因此被试为随机招募的西安工程大学在校本科生、研究生及教师，被试的年龄在18~34岁，男女比例1:1，其中本科生16名，研究生12名，教师2名，共30名。所有被试身体状况良好，无色盲症状，视力或矫正视力均在1.0以上，均有使用电脑上网的经验，能熟练操作计算机。根据实验任务30人随机分为2组，无目标浏览15人，典型目标搜索任务15人。测试完成后每人将会获得一份小礼物。

（四）实验流程

整个实验在采光良好、安静的交互体验与可用性测试实验室进行。实验员向被试简单介绍实验设备、实验流程及注意事项，待被试适应环境后，坐在实验位置上并在实验知情书上签字。打开软件，输入实验名称，将实验刺激材料导入，设置相应参数；被试坐在距离电脑显示屏60cm左右的位置，调整坐姿，目光保持平行；采用五点校准法对被试进行眼动数据校准；被试浏览指导语；浏览屏幕上的实验刺激材料；参与实验B的被试填写纸质版喜好度问卷；实验结束，整理数据。

三、实验结果及问卷分析

（一）热点图分析

热点图是被试浏览网页时图形化表示的数据，用不同颜色来表示被试对界面各处的不同关注度，主要通过绿色、橙色和红色三种颜色表示。被试在一区域的注视时间越长，注视点越多，颜色越深；注视时间短、注视点少则颜色浅，可以直观地看到被试视线集中的区域，从而知道最关注和最容易忽略的区域。通过实验A所得到的热点图（15组数据叠加之后的热点图，随机选择展示，如图1所示）。从图中可以看到，网页中学校logo及导航栏颜色多为红色，轮播图区域为绿色和橙色，信息栏中的标题及图片新闻区域多为橙色。网页右下角的文章标题链接区域颜色为绿色，网页右侧区域颜色较淡。从热点图中可以看到，被试在浏览的过程中，最关注的区域在上方的位置，也就是学校标识及导航栏；轮播图传达信息更加直观，能够吸引人的眼球；加大加粗的标题比大段文字更吸引用户的注意力；图片比文字更加吸引人的注意力；重要的信息不宜放在网页的最右侧区域。

（二）轨迹图分析

注视轨迹图用于记录被试在浏览网页的注视轨迹，数值1、2、3……代表注视点的顺序，注视停留时间越长，注视点的半径越大。通过注视点轨迹图可知被试首先注视的区域、注视的先后顺序、注视停留时间的长短以及视觉是否流畅。通过实验A所得到的注视点轨迹图（随机选择展示，如图2所示）。从轨迹图中可以看到，第一注视点往往在网页的中上区域，即轮播图的位置，第二注视点一般在导航栏，然后根据从上自下的浏览习惯进行浏览，图片右侧偏下的位置几乎没有注视点。通过注视点轨迹图可以看出，注视点的位置多落在导航区、标题以及图片区域。在进行高校官方网站网页设计时，好的轮播图能够让人眼前一亮，吸引人的视线，也是对整个网页的第一印象；导航区的设计尤为重要，清晰明了的导航能够准确高效地引导用户查找信息，减少因为盲目寻找信息而浪费的时间；信息栏中标题与大段文字之间应形成对比，为用户提供简洁明了的信息层级，让用户以最短的时间找到想要的信息；图片比文字更加吸引人，在高校官方网站网页设计中合理地加入图片，不仅可以提高用户视觉体验，还可提高信息的获取率。

（三）数据分析

在实验B中，采集了总注视时间（TFT）、注视点个数(FC)及平均注视时间(ATF)三种眼动指标数据。TFT是被试对网页所有注视时间的总和，反映了被试在进行搜索任务时注视的时间，是比较不同网页搜索效率的重要指标；FC是被试在浏览网页的过程中产生的注视点的个数，在信息搜索中，注视点个数越多，信息搜索越困难；AFT是每个注视点平均所用的时间。通过眼动实验分析处理软件Ergolab2.0相关数据得出被试完成搜索任务所用的时间TCT，得出搜索任务放在打开网站的第一屏时，搜索效率最高。被试在完成实验后，立即对十所高校官方网站网页进行喜好度打分，对喜好度数据进行统计，得出网站喜好度均值PV，数据表明用户更喜爱风格简洁、有条理，并且信息搜索效率高的息搜索效率高的网站。相关眼动数据、完成搜索任务所用时间及喜好度值如表1所示：1.将各网页眼动数据与TCT、PV值分别输入SPSSAU进行相关性分析，得到网页眼动数据、PV与TCT的相关性数值，如表2所示：的相关关系，使用Pearson相关系数去表示相关关系的强弱情况。体分析可知：TCT和TFT之间的相关系数值为0.998，并且呈现出0.01水平显著性，说明TCT和TFT之间有着显著的正相关关系。TCT和FC间的相关系数值为0.990，并且呈现出0.01水平的显著性，说明TC和FC之间有着显著的正相关关系。TCT和AFT之间的相关系数为-0.330，接近于0，并且p值为0.351>0.05，说明TCT和AFT之间并有相关关系。TCT和PV之间的相关系数值为-0.648，并且呈现出0.水平的显著性，说明TCT和PV之间有着显著的负相关关系。2.将TFT、FC、PV与TCT，输入至SPSSAU中进行线性回归分析如表3、4、5所示：从表3可以看出，模型R方值为0.420，意味着TCT可以解释PV的42.0%变化原因。对模型进行F检验时发现模型通过F检验(F=5.793，p=0.043<0.05)，模型公式为：PV=8.154-0.009*TCT。总结分析可知：TCT全部均会对PV产生显著的负向影响关系。从表4可以看出，模型R方值为0.996，意味着TCT可以解释TFT的99.6%变化原因。对模型进行F检验时发现模型通过F检验(F=1882.932，p=0.000<0.05)，模型公式为：TFT=0.057+0.922*TCT。总结分析可知：TCT全部均会对TFT产生显著的正向影响关系。从表5可以看出，模型R方值为0.980，意味着TCT可以解释FC的98.0%变化原因。对模型进行F检验时发现模型通过F检验(F=386.337，p=0.000<0.05)，模型公式为：FC=-1.018+1.974*TCT。总结分析可知：TCT全部均会对FC产生显著的正向影响关系。通过眼动数据及网页喜好度值处理分析之后的结果可知：网页喜好度与完成所搜任务所用时间之间有着负相关关系，所用时间越长，搜索效率越低，喜好度越低，搜索任务放在打开网站的第一屏时，搜索效率最高；总注视时间与完成搜索任务所用时间共1项之间有着正相关关系，完成搜任务所用时间越久，总注视时间越长；注视点个数与完成所搜任务所用时间之间有着正相关关系，完成所搜任务所用时间越长，注视点个数越多。

（四）讨论

结合高校官方网站的作用及眼动实验与问卷调查数据处理分析的结果，对高校官方网站设计提出以下建议：1.信息内容：高校网站与其他网站不同，它是教育性质而非盈利性质的网站，使用价值是使学校教职工、学生以及社会人员获得有用的信息，其内容主要是与学校相关新闻动态、教学科研、招生等管理服务信息这些方面，高校官网的信息内容需具有准确性、权威性及新颖性。实验表明，图片比大段文字更具有吸引力，用户浏览高校网站时第一注视点及最关注的区域在网页中上方，信息放在打开网站的第一屏时，搜索效率最高。因此，在进行高校官方网站网页设计时，信息内容可以结合图片进行展示，增加对用户的吸引力，提高用户的关注度，并且应将重要的信息放在网站第一屏的中上方。2.用户服务：高校官方网站的基本功能是满足用户群体的需求，所以合理、科学地划分用户群体，从而确定目标用户，并满足目标用户的需求，这是提升高校网站用户体验的一个重要方面[9]。高校官方网站网页在设计时，应考虑其界面如何便于用户操作，例如导航栏及搜索框的设计，网站导航栏是引导用户进行网站浏览并快速地回到网站的首页及其他内容页面栏目的一个版块，它决定了用户能否通过导航系统快速进入到相关页面；搜索框在网站的设计中是至关重要的，通过搜索框用户可以快速地查找到自己想要的内容。实验结果表明：搜索信息花费的时间越短，用户对网站的喜好度越高，因此应将导航栏和搜索框有关的内容放于官网首页的中上部，使用户在最短的时间获得最有用的信息，提高用户对网站的喜好度。3.网站结构：明确高校官方网站的定位及信息内容之后，高校网站的网页结构设计应分清主次关系，科学地进行信息分类，组织信息方式多样化，使各部分所含信息平衡。网站的结构层次不宜过多，网站目录结构与层次框架应当清晰有序、线索明确、主次合理[10]。在进行高校官方网站网页设计时标题与内容之间可通过字体大小颜色进行区分，加大加粗的标题更能引起用户的注意力。应合理地使用图片，采用图文结合的方式进行排版布局，使视觉效果增强对信息资源的显示，而不是一味地大面积使用图片，信息内容变得松散，使得用户的视觉搜索效率降低，反而适得其反。4.网页风格：用户获取信息最主要的方式是视觉，“视觉吸引”是影响用户体验的第一步，用户打开网站之后的网页视觉效果给用户留下第一印象，网页整体风格决定网页视觉效果，因此，网页整体风格的好坏对用户视觉印象起到关键性的作用。通过眼动实验及问卷调查发现，被试对于网页整体风格简洁、有条理的高校官方网站页面的注视点更为集中，用户能很快地找到重要信息。对于页面风格结构相对复杂的网页，被试的注视点更为松散，视觉搜索效率也相对较低。因此，高校官方网站的设计不应该一味地追求风格复杂化而忽视了功能的重要性，在进行高校官方网站设计时，应将视觉和功能相结合，网页结构功能清晰、风格鲜明，使用户能够便捷且顺利地完成操作。

结语