Photoshop技术和CSS+DIV技术在网页设计中的运用

　　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.