利用Photoshop+Dreamweaver制作网页的方法与技巧.docVIP

利用Photoshop+Dreamweaver制作网页的方法与技巧 　　摘要:该文介绍了通过Photoshop和Dreamweaver相结合,轻松创作完美网页的方法与技巧。 　　关键词:布局;切片;Photoshop;Dreamweaver 　　中图分类号:TP393文献标识码:A文章编号:1009-3044(2010)02-445-02 　　The Method and Technique of Using Photoshop and Dreamweaver to Make Web Page 　　ZHOU Chun-yu, ZHAN Jie 　　(Dalian Fisheries University, Dalian 116023, China) 　　Abstract: This article introduces some methods and techniques about making the web page. By using Photoshop and Dreamweaver, the web page will be very fine. 　　Key words: composition; slice; photoshop; dreamweaver 　　随着互联网的广泛应用,网页制作已成为热门,一个好的网页既要内容翔实,又要视觉新颖,还要布局合理,既要把内容的层次性和空间性突出显示出来,又要使页面合理流畅、环环相扣。网页制作的工具有很多,但是利用Photoshop和Dreamweaver配合使用制作出来的网页布局更规范,页面更精美,因此深受网页制作者的推崇。 　　1 网页布局的原则 　　网页布局是决定网站美观与否的一个重要方面,通过合理的、有创意布局,才可以把文字、图像等内容完美地展现在浏览者前面。最好先用笔和纸将构思的草图画下来,不需要很详细,只需要画出页面的大体结构作为创作样本即可。布局的原则如下: 　　1) 对称均衡:对称是一种美,能给人稳定感,但过度的对称就会给人一种呆板、死气沉沉的感觉,对称形式构成的网页具有重心稳定和庄重整齐的美感,均衡的网页生动活泼富于变化,具有变化美。 　　2) 对比协调:对比使网页形式生动、个性鲜明,避免平淡无奇;对比协调则给人以柔和、亲切的美感。 　　3) 比例适度:确立良好的比例关系,并非黄金分割,但一定要适度、协调,才能使整个页面和谐、匀称明朗。 　　4) 疏密交错:网页上重复的形式过多,会使页面显得呆板,容易使浏览者产生视觉疲劳。因此不要整个网页一种样式,要通过留白、空格、改变行间距、字间距等变化来打破页面呆板、平淡的格局。 　　5) 节奏韵律:韵律是使节奏富有律动感的变化美,将点、圆形、线条等沿一定的曲线重复排列时,就会产生韵律感,使画面显得轻盈而富有灵气。 　　2 在Photoshop中布局网页 　　1) 首先在Photoshop中建一个1001×550像素的文件,这样在1024×768这种常规分辨率下,不会出现水平滚动条和垂直滚动条(长度1001像素是作者在多次实验中总结出的数据)。 　　2) 一般情况下页面分头、中、底三个部分,如果看到别人的版面想借鉴的话,那就做个截图,然后把截图放在最底层,作为最初的草图。如果不想用别人的版面,最好也还是找一个同类网站借鉴一下。 　　3) 参考线是布局网页的有效工具,先用横参考线将网页布局分成几大版块,然后再用竖参考线将每个板块按思路分为几个小板块,最后整体观察一下。需要注意的是网站的Logo和导航条等都是事先设计好的,有固定大小,在做这些区域时尺寸一定要按照这些元素尺寸设计,不能有丝毫差错,否则进入Dreamweaver整合时,则可能出现空边或撑开表格的现象。 　　4) 导航文字的特殊字体要在Photoshop中直接添加上去,字体的颜色设置要考虑到整个页面效果,另外,如果想?制作出变化的导航效果,就复制对应的图层,设计好变化效果之后再隐藏该图层。将导航改变效果的图层进行切片的时候,保存另外一个名字存在另一个路径下,然后再将这些改变效果的图片拷贝到存放所有切片图片的路径下,为在Dreamweaver中替换图像做准备。 　　5) 网页中的元素有很多,像Banner条、文本区域、文字、Logo等,尽量把这些相对独立的元素放在不同的图层中,这样方便以后的再编辑。 　　3 从Photoshop通向Dreamweaver的重要环节――“切片” 　　利用Photoshop设计网页之后,要进行“切片”, 然后才能通过Dreamweaver进行加工制作。以下列举了切片的几个方法和技巧。 　　1) 依靠参考线进行切片,在设计的时候用到参考线,在切图的时候也要用参考线,参考线能保证我们切出图