论网页设计中的技术应用

李玉婷

摘 要：网络在人们的生活中扮演着越来越重要的角色，网页浏览成为了人们每天生活中的一部分，网页设计的好坏直接影响着网页的浏览量。就网页设计中需要注意的技术进行了简要的分析，首先就网页设计的基本流程进行了分析，然后分别论述了Photoshop技术、计算机图像处理技术以及CSS+DIV技术在网页设计中的应用，具有一定的实际意义。

关键词：网页设计；图像处理技术；CSS+DIV技术

中图分类号：F49

文献标识码：A

文章编号：1672-3198（2014）09-0168-01

1 引言

网页浏览已经成为了人们日常生活中不可或缺的一部分，人们在评价网页好坏时，往往是通过第一印象来判定的，可见网页设计质量的重要性。以下就网页设计的基本流程进行分析：（1）内容分析：设计者分析该网页需要展现的内容，并梳理这些内容的内在逻辑性，以便分析内容的层次、重要程度等；（2）结构设计：在确定好内容只会，则需要搭建出合理的HTML结构，保证内容的可读性；（3）原型设计：首先初步设计出一定的构，绘制出原型线框图，便于对内容进行合理的布局；（4）方案设计：在初步的线框图基础上，利用相关的设计软件进行更深入的设计，主要是设计页面的视觉效果；（5）布局和视觉设计：利用相关软件对页面进行最后的布局和视觉设计，比如HTML和CSS；（6）交互设计：好的网页必须要了一定的交互效果，比如最为常见的：鼠标指针经过时的一些特效等。

2 Photoshop技术的相关应用

2.1 页面顶部图片的制作

就网页中的图片而言，其顶部图片包含的内容主要有网站的图标、网站名称、主题等，可见对顶部图片的设计显得尤为重要。以下就如何利用Photoshop技术来制作顶部图片进行简要的分析：

（1）首先复制网站的图标文件到顶部图片文件上，并对其进行一定的调整，即调整到背景层的上方；

（2）选择“添加图层蒙版”功能，即添加该图层的图层蒙版；

（3）对添加的图层进行一定的处理，可以通过选择“画笔”或者“渐变工具”来进行图片间的“无缝”操作；

（4）最后对图片文件进行文字添加操作，并将其保存为JPG格式，需要注意的是为了保留备份，则需要将图片文件另存为PSD格式。

2.2 网页底纹处理

处理网页底纹的一般方法有两种，分别是：将固定的背景作为网页的底色和将图像作为背景的底纹。如果利用Photoshop技术进行处理，则处理的效果会很好，具体的处理流程如下所示：

（1）选择将会用作网页底纹的图片文件，并将其作为全图；

（2）对图像进行移动，具体操作是利用offset滤镜工具将图像向左上移动；

（3）不改变原图片的环绕方式，使其与新图之间形成两条明显的水平和垂直分隔线，便于后期的处理；

（4）进行“图章”操作，即利用图像对分割线进行覆盖，需要注意的是不要破坏新图片的边界。

2.3 WEB页面的制作

对于WEB页面的初稿，往往可以利用Photoshop技术来进行操作，在制作的过程中，有以下一些值得借鉴的技巧：

（1）首先设计出页面的大概图样，并进行基于图层的一些切割；

（2）有了网页的大概轮廓，便可以进行图像的分割操作，一般利用“切片工具”和“切片选择工具”这两种工具进行，分割图像的主要原因在于下载小幅图的速度会更快捷；

（3）为了让浏览者阅读到更多的内容，可以让图像活动起来，即制作出动画的效果，具体的操作是在ImageReady环境下进行的；

（4）最后对一些图片定义交互区域，并对细节进行优化。

3 图像处理技术在网页设计中的应用

3.1 网页中的构图方式

为了让网页中的内容得到充分的展现，则需要对网页自身的构图进行设计，就其构图方式而言，有常见的形式有如下三种方式：

（1）水平式构图：常用于政府、企业或者教育类网站的主页设计当中；

（2）垂直式构图：该构图方式满足了人们的一般视觉习惯，即从上到下，并且能够使页面清晰有序；

（3）中心式构图：其特点在于能够更好的将重点内容凸显，且对阅读者的视觉冲击力强。

3.2 图像处理技术的具体应用

对于设计者而言，可以利用图像处理技术来处理网页中的图片的格式、图样、大小以及颜色等。以下就其中的图片格式处理，进行简要的分析：

图像的格式一般都是jpeg或者是gif，其中的gif格式是能够实现动态效果。可见上述两种图片所需要的参数和规格是不同的，所以在对图片进行处理时，需要对两者进行一定的区分。

对于图片大小于清晰度的处理，利用计算机图像处理技术便能很好的控制图片的大小，并保证其清晰度和加载的速度等。

4 CSS+DIV技术的应用

将CSS语言技术应用到网页制作中，其主要的用途在于不仅能够很好的控制网页的样式，并且还能分离样式信息与网页内容。该语言的主要特点有以下几点：

（1）方便网站的后期修改和维护；

（2）具有样式丰富的美工样式标记等；

（3）其网页页面的结构清晰；

（4）能够轻松地应对各种页面效果。

DIV作为网页布局方法中的一种，具有十分广泛的应用，其主要的作用在于将整个网页页面分成若干个小区域，且能够在每个DIV页面上特定内容，极大的方便了网站后期的修改和维护。

5 结语

就现阶段的网络使用者而言，其更加倾向于对图像的浏览，随着时间的推移，传统的文字描述会渐渐淡出网页设计的主流。所以在设计网页时，需要注重如何才能让网友享受更流畅的浏览空间，并且让网页浏览更加顺畅、高效。

参考文献

[1]唐乾林.网页设计与制作案例教程[M].北京：机械工业出版社，2007.

[2]王士检.浅谈PHOTOSHIP在网页制作中的应用[J].2009，（05）.

[3]刘显丽.浅谈图像处理技术在网页制作中的应用[J].辽宁师专学报：自然科学版，2007，（3）：35.