关于网页设计与制作技术的探讨

摘要:网页设计与制作有自身的原理和方法,该文根据网页设计的特殊性,结合实际的建网经验,引出了网页界面设计原则。并从网页界面的体系结构、页面布局介绍了网页制作技术,最后深入分析了网站的统一版面技术、页面元素定位技术及交互操作技术。

关键词:网页设计;网页制作;网页设计原则;网页体系结构

中图分类号:TP393文献标识码:A文章编号:1009-3044(2009)26-7376-03

Disscussion on the Website Design and Production Technology

ZHOU Qi

(Computer Network Management Center of Chinese People's Armed Police Force, Beijing 100089, China)

Abstract: The web design and production have their own principle and methods.According to the Specificity of web design and the actual experience of building network, this article draw forthes a web interface design principles.Besides,this article introduces the Website production technology from the Web interface architecture and page layout.At last,this article analyzes the Unified layout techniques of website, page element positioning technology and technology interoperability.

Key words: website design; website production; web design principles; page architecture

网页设计与制作的用户界面作为与用户打交道的门面,它在网站开发平台中占有非常重要的地位,因为它直接面对的是广大浏览用户。由于网页设计是计算机科学的一个专门研究方向,有其自身的原则、标准和方法,本章从简要介绍网页的一般设计原则和方法出发,结合网页开发的特殊性,系统阐述网页开发平台界面的开发和实现。

1 网页的设计原则

网页的设计除了要掌握页面设计的一般原则外,还要把握其特殊性,因为网页的主要功能是向浏览者提供信息,所以网页设计和其它应用软件设计存在一定的差异。总的来说,网页设计是一项既简单又复杂的工作。说其简单,是因为设计者只要遵守一项原则就行,那就是:设计者的设计应该增强而不是减弱网页所要提供的信息,不可喧宾夺主。说其复杂,是因为网页设计要考虑到很多问题的方方面面,需要有许多灵感和技巧在其中。

下面根据页面设计的一般原则,结合网页开发平台的实际情况,认为网页开发设计应遵循以下基本原则:

1) 统一的风格

风格有三大特点:抽象性、独特性、人性化。

抽象性指网页的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志,色彩,字体,标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义和站点荣誉等等诸多因素。

独特性指本网页不同与其他网页的地方。或者色彩,或者技术,或者是交互方式,能让浏览者明确分辨出这是你的网页所独有的。例如新世纪网络的网页是黑白色的,网易壁纸站的特有框架,即使你只看到其中一页,也可以分辨出是哪个网站的网页。

人性化是通过网页的外表、内容、文字、交流可以概括出一个站点的个性、情操,可以用人的性格来比喻网页。

2) 良好的交互

在网页设计中,用户通常根据所提供的交互方式进行浏览或操作,设计者在设计网页的页面时,应始终考虑如何提供良好的交互性:如主页的界面设计对浏览者来说是否具有吸引力;是否可以更好地引导浏览者访问站点;是否能保证用户简便、快捷、准确地操作网页;是否能为用户提供有效的帮助和出错信息;所创建的网页是否更加符合浏览者的需要。网页的交互操作主要集中在网页的多维超链接空间和网页的提交操作中。

3) 视觉效果

视觉效果指用户在开始打开网页时的第一印象,好的网页能让浏览者产生强烈的视觉冲击,给浏览者留下深刻的印象。所以对于网页来说视觉效果是相当重要的,它主要体现在网页的色彩搭配、字体设置和排版结构上。

第一,网页的色彩具有精神价值,对人的心理影晌有时是直接刺激,有时是间接联想。设计者做到有针对性合理的用色,来体现网站适应人的心理需求和特色十分重要。那么如何搭配色彩来表达网站的内涵?色彩总的应用原则应该是“总体协调,局部对比”。也就是说网页的整体色彩效果应该是和谐的,只的局部小范围可以有一些强烈色彩对比,它包括网页的背景、文字、图标、边框、超链接等。首先,网页要有主色调,以确定网站的总体基调,充分利用色彩的象征性、职业的标志色、冷暖的感觉和时退的效果来展示网站的艺术内涵和文化品位。其次,网页的颜色搭配最好不要超过3-5种,网页的前文和背景的色彩对比要尽量大,特别不要采用花纹繁杂的图案作背景以便突出主要文字的内容。

第二,网页的字体设置包括字体的样式、效果和大小。选择贴切的字体有助于表达网页的内涵。对于网页的字体设置通常归纳以下几点内容:一是不要使用超过3种以上的字体。字体太多则显得杂乱,没有主题。二是不要用太大的字。因为版面是宝贵有限的,粗陋的大字体不能带给访问者更多信息。三是不要使用不停闪烁的文字。四是原则上标题的字体较正文大,颜色也应有所区别。

第三,网页的排版结构即网页的版面布局。版面是浏览器看到的完整页面,而布局指以最适合浏览的方式将图片和文字等内容排放在页面的不同位置。目前网页版面布局主要有:“T”结构布局、“口” 型布局、“三”型布局、对称对比布局和POP布局。经分析、比较这些布局,得出在除了网页标题部分和结尾部分,网页中间的主体部分一般采用1: 2、2: 1或1: 2: 1的结构,这些结构都方便地、有条理地组织了网页的信息。当然,这并不意味着一定要采取这些组织结构,只要能够合理地组织信息、便于交流,采用其他更为灵活的结构方式也是可以的。

2 网页体系结构的设计

网页设计平台可以运行于任何的浏览器。相应的用户界面需要同时考虑微软的IE浏览器和网景的Netscape浏览器,同时用户界面也需要符合这些浏览器的标准。从设计的角度,把网页开发平台用户界面划分为两个层次:用户界面元素的设计和交互操作的设计。

2.1 用户界面元素的设计

用户界面元素是指一些具有特定功能和操作方式的可视化图形对象。在不同的应用系统中,有不同的用户界面元素。在浏览器中,用户界面元素包括:浏览窗口、图形图像、表格、链接、框架、表单、按钮、对话框等。用户界面元素设计的内容包括采用哪些界面元素、界面元素的定制、界面元素的如何布局以及界面元素的管理等。

2.2 交互操作的设计

交互操作设计是指用户如何通过输入设备和各种界面元素,实现人机交流信息的目的。由于网页开发平台是在WWW浏览器下运行的,交互的过程是通过表单块提交操作或链接方式来完成的,即用户通过鼠标和键盘在界面元素上触发相应的事件,软件接收到事件后,作相应的处理,然后将结果通过界面元素或其他途径反馈给用户。交互设计的关键在于如何利用各种界面元素,定义自己的交互操作规范并进行管理。

2.3 网页布局的设计

网页开发平台的页面布局总体上遵循了上面所介绍的设计原则。通常情况下,根据网页开发平台的整体组织结构,可以分四类页面:首页的页面布局、后台管理页面布局、导航主题页面布局和一般消息页面布局。下面以个人网站为例,分析各类页面的布局设计:

1) 首页布局

首页的整个布局可以采用“三型”结构,而中间的主体部分可以考虑采用比较清晰简洁的结构。网页主色调则根据网站的内容,选择合适的颜色,不易采用太过于鲜艳的色调。此外,任何网页均有标志图片log,可放在左上角,右上角则放置整个网站的导航栏,版权信息通常放置在首页的底部。

2) 后台管理布局

后台管理的页面布局可以采用“T型”结构,用框架把整个浏览窗口分割成三部分,上面是后台管理的标题及标志图片,下面的左边是后台管理的集中菜单,采用outLook风格,右面显示的是各菜单要完成的任务。

3) 导航主题布局

导航主题页面的布局可以采用与后台管理页面类似的“T型”布局,用框架把整个浏览窗口分割成三个部分,上面为导航栏和网站登录模块,下面左边为所选择导航主题的第二层主题或内容列表,右边为相应的网页内容。导航主题页面的结构可以采用树型的分层次结构模型,不但有利于动态管理,而且也有利于浏览者对各种主题内容的访问。

4) 消息页面布局

消息页面布局通常比较简法,由上、中、下三部分组成,即采用“三型”结构,首部是网站的标志图,中部是消息的主体,包括导航条、标题和内容,标题的颜色可以选择采用棕红色的大字体,起到醒目作用,正文采用默认的黑色小字体,尾部是版权。

3 网页的制作技术

3.1 网页统一版面技术

由于网站中的网页要求有统一的风格和良好的视觉效果,即要求网页有统一的版面,由于级联格式页(CSS)技术能集中管理WEB站点的格式元素(字体、背景、文本、边界和清单)和定义全局的版面格式,所以在我们的网站设计中大量地应用了该种技术。

为使网页开发平台利用CSS技术统一风格,实现版面设计,在页面套用CSS技术不是用直接法或导入法,而是用了链接CSS文件法。其方法如下:当多个网页页面采用统一的风格需要套用CSS文件时,首先需要建立CSS格式页。CSS格式页文件的内容与普通的HTML文件相同,都是一般的文本文件,只是扩展名为CSS,在CSS格式文件中,不需要用标记来限定。

3.2 界面元素定位技术

界面元素定位是网页布局的重要内容之一。要使网页的界面布局具备报纸、杂志等漂亮的布局,必须要对页面的界面元素进行定位。在网页开发平台中采用了以下几种界面元素的定位技术:表格定位、块表示符和定位,下面分别进行讨论:

1) 表格定位

由于所有的浏览器都支持表格技术,所以表格定位是用得最为广泛的一种定位方式,表格是由行和列组成,允许加入文本和图形,可以通过设置表格的属性来定位页面元素。有效地使用表格技术,使页面组织合理、条理清楚。

在网页开发平台中表格主要起两类作用:整体规划页面布局和列表显示信息,当整体规划页面布局时,采用线宽为零的隐式表格,列表显示时采用显式表格。

2) 块表示符和定位

用块表示符 (DIV )和 定位界面元素灵活性较大,它们有两种定位方式:绝对定位和相对定位,绝对定位使界面放置在网页上准确的位置,相对定位是相对于其它界面元素而定位的,此时对其它元素进行变动后,都会保持定位的完整性。块表示符通过其定位属性Top、Left和Position来实现界面元素的定位。

3.3 网页交互操作技术

交互操作也称为人机对话,是人和计算机之间的信息通讯过程。交互操作是网页设计的一个很重要的方面。在网页开发平台中,交互操作主要包括表单提交操作和超链接操作两种。

1) 表单

表单是提供给用户输入信息的区域,它是使web页面具有交互性特征的关键,用户将查询或填入表单的数据转送给服务器的ASP处理程序,服务器使用这些处理程序来处理用户的请求,并动态地产生HTML文件,最终对用户的请求作出响应,表单的工作过程是:用户在客户浏览器根据URL地址或链接向服务器发送用户的请求,服务器接受用户的请求,调出相应表单页面,并返回给浏览器;用户填写表单,提交给服务器,服务器执行ASP文件,取出用户提交信息;应用程序与数据库通过ODBC建立联系,存取数据库中的数据;将数据填回表单,结果以HTML页面送给客户浏览器。

表单处理程序根据用户提交的信息,用POST和GET方法将所有的提交数据封装到对象Request中,再用Request Form方法得到表单提交的数据,然后对数据处理。

2) 超链接

链接是提供给用户链接页面信息的接入点,链接可以分为一般链接和带参数型的链接。一般链接在静态页面和动态页面中广泛存在,它的交互性只局限于页面间的信息传递,向服务器请求已固定化的页面,然而,利用带参数的链接,可以实现复杂的交互动作,用户将参数转送至服务器的ASP处理程序,服务器使用这些处理程序完成用户的请求,并动态产生HTML文件。

4 小结

总之,网页的设计与制作有自身的原理和方法,应该从用户为中心出发。而且在网页设计与制作的过程中,会牵扯到对多种软件、多种知识的学习和应用,以及个人的审美观等等。所以要想制作出漂亮的网页,需要一个逐步学习和经验积累的过程。

参考文献:

[1] 胡珊.浅谈个人网页的制作[J].经营管理者,2008(9):25-27.

[2] 洒玉波.浅议网页艺术设计流程[J].现代技能开发,2003(5):77-79.

[3] 赵杰,刘志宇,邢军.网页设计与开发[J].牡丹江师范学院学报:自然科学版,2006(3):38-40.