【关键词】 Photoshop；网页；实例；布局

【中图分类号】 G623.9 【文献标识码】 C

【文章编号】 1004―0463(2016)23―0120―01

随着信息技术的发展，网页制作成为时下互联网平台中人与人交流不可或缺的宠儿，但是要完成网页设计作品就少不了其他软件的支持，如Flash动画制作，Fireworks图像处理，Photoshop图片制作及处理等。如何结合Photoshop来设计出有自己风格的页面是本文所要研究的课题。

一、Photoshop和Dreamweaver的简单介绍

1.Photoshop的简介

Photoshop是一款由美国发布的用来处理图像、图形的软件，简称PS。它不仅可以处理出你所需要的图片，还可以根据自己的要求动手绘画出自己喜欢的图像、图形，比如画笔工具、钢笔工具以及图形工具，用鼠标单击选中，在自己新建的画布上描绘出你喜欢的图像，然后选择相配的颜色，注意色彩要均衡，单击“油漆桶工具”或选择菜单栏中“编辑|填充”命令即可，这样，简单的一幅画作就完成了，最后你可以根据自己对图像的需要进行图层样式的选择，单击菜单栏中“图层|图层样式”命令选择需要的选项就可以了。

2.Dreamweaver的简介

Dreamweaver简称Dw，是一款集网页制作和网站管理于一身的网页编辑器，也是人与人之间一种视觉的交流方式。一份精美的网页中包含的元素众多，包括图像、图形、文字、动画等，将这些元素进行规范的排版与合理的布局，就需要用Dw中的CSS样式、表格制作等众多功能来辅助完成。需要提及的是Dw中的编辑基本上都是靠代码来完成的。

二、Dw中网页布局和实例制作

1.Dw中的页面布局原则

(1)色彩要搭配恰当，网页在颜色搭配上要遵从以下几点：渲染主题深色调，突出氛围浅色调，简约大方白色调，对比鲜明黑色调，端庄奢华紫色调，浪漫婉约粉色调。

(2)元素要相得益彰，有些网站页面元素很多，尤以图片文字为首。文字过多会让人觉得乏味无趣，图片过多又会觉得低俗，为了防止视觉疲累，应该将图片和文字适当搭配。

(3)图片要处理合理，在页面布局中很多图片都不符合要求，有些色彩过于鲜艳，有些像素过低模糊不清，有些只需要一部分图片。针对这些问题，我们都可以用PS轻松处理。

2.实例制作

(1)打开Dw软件，选择新建栏目下的“HTML”模板，进入后选择“管理站点|站点|新建站点”，名称为“梦回唐朝”且保存在“E：/myweb”的根文件夹下。注意文件命名时要采用字母或数字，以便各网页之间进行有效的链接。

(2)处理需要的图片和文字存入“myweb /images”文件夹中，图片处理使用PS软件，主要处理图片的大小、色彩及像素值。比如网页的logo图片、导航条、锚点图标、分割图形等都可根据需要处理。在这里先介绍该网站主页的logo图片的制作合成，首先打开PS软件，新建立一个30×25cm的画布，然后分别打开一幅扇子图片和一幅背景图片，可单击工具栏中的“快速选择工具”将扇面抠下；处理背景图很简单，只需要用裁剪工具裁出中间的部分。最后返回新建的画布，将扇面和背景图分别放入两个图层中，再处理文字“梦回唐朝”，主要是用图层样式，这里不再详细说明。需要注意的是图片格式须保存为网页一般格式“.jpg”“.png”或“.gif”，以便浏览器快速下载。

(3)插入所需表格，将已经处理好的图片、文字、图标、导航条等进行规范合理的布局排版，然后调整表格的长度和宽度。

(4)保存之后根据浏览器的预览效果进行完善调整页面。

三、利用PS为网页布局

在Dw中布局页面会有些耗时，既要代码输入，又要调整表格搭配、背景颜色，相比较而言，在PS中将页面布局完成，然后将其插入网页设计中更简单有效，而且可以事先搭配好颜色。

1.PS布局原则

(1)色彩搭配要清新亮丽，选用一个主色调，其他颜色选用不可与主色反差太大，以防造成视觉错乱。

(2)布局应合理规范，不可随心布置，让人看起来不舒服，要疏密有度，和谐统一。

(3)突出主题，对比鲜明，不可让无关紧要的文字或图片占用大量篇幅，以至于忽略了主题，应将重要信息呈现在视觉的中心，让人一看简单明了。

2.实例操作

(1)打开PS并新建一个1024×768像素的画布，文件名为“主题相册”，颜色为白色，分辨率为72像素＼英寸。

(2)利用图形工具描绘出所需要的页面效果图，单击菜单栏中的“图层|图层样式”选择合适的样式，让图像看起来有立体的效果或其他效果。

(3)保存图片为“.jpg”格式，以便观察其效果。

(4)为了保证图片在网页设计中更好地适用于表格，可以单击菜单栏中“视图|锁定切片”命令，将图片切割成符合网页的logo、导航等多个小块进行保存，保存时使用“存储为web形式”，以便浏览器更快地下载。注意切割时应准确，使页面效果更佳且易在网页设计中进行布局和表格处理。

(5)在Dw中新建站点，插入表格后将已保存的图片导入页面中，设为背景图片，然后完善调整页面。

(6)在这个基础上可以加入自己喜欢的图片，完成后保存并在浏览器中预览。