利用Photoshop_Dreamweaver制作网页的方法与技巧

1、Computer Knowledge and Technology 电脑知识与技术多媒体技术及其应用本栏目责任编辑:唐一东第6卷第2期(2010年1月利用Photoshop+Dreamweaver 制作网页的方法与技巧周纯玉,詹劼(大连水产学院现代教育技术与网络中心,辽宁大连116023摘要:该文介绍了通过Photoshop 和Dreamweaver 相结合,轻松创作完美网页的方法与技巧。关键词:布局;切片;Photoshop ;Dreamweaver中图分类号:TP393文献标识码:A 文章编号:1009-3044(201002-445-02The Method and Technique

2、of Using Photoshop and Dreamweaver to Make Web PageZHOU Chun-yu,ZHAN Jie(Dalian Fisheries University,Dalian 116023,ChinaAbstract: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

3、;photoshop;dreamweaver随着互联网的广泛应用,网页制作已成为热门,一个好的网页既要内容翔实,又要视觉新颖,还要布局合理,既要把内容的层次性和空间性突出显示出来,又要使页面合理流畅、环环相扣。网页制作的工具有很多,但是利用Photoshop 和Dreamweaver 配合使用制作出来的网页布局更规范,页面更精美,因此深受网页制作者的推崇。1网页布局的原则网页布局是决定网站美观与否的一个重要方面,通过合理的、有创意布局,才可以把文字、图像等内容完美地展现在浏览者前面。最好先用笔和纸将构思的草图画下来,不需要很详细,只需要画出页面的大体结构作为创作样本即可。布局的原则如下:1对称

4、均衡:对称是一种美,能给人稳定感,但过度的对称就会给人一种呆板、死气沉沉的感觉,对称形式构成的网页具有重心稳定和庄重整齐的美感,均衡的网页生动活泼富于变化,具有变化美。2对比协调:对比使网页形式生动、个性鲜明,避免平淡无奇;对比协调则给人以柔和、亲切的美感。3比例适度:确立良好的比例关系,并非黄金分割,但一定要适度、协调,才能使整个页面和谐、匀称明朗。4疏密交错:网页上重复的形式过多,会使页面显得呆板,容易使浏览者产生视觉疲劳。因此不要整个网页一种样式,要通过留白、空格、改变行间距、字间距等变化来打破页面呆板、平淡的格局。5节奏韵律:韵律是使节奏富有律动感的变化美,将点、圆形、线条等沿一定的曲

5、线重复排列时,就会产生韵律感,使画面显得轻盈而富有灵气。2在Photoshop 中布局网页1首先在Photoshop 中建一个1001×550像素的文件,这样在1024×768这种常规分辨率下,不会出现水平滚动条和垂直滚动条(长度1001像素是作者在多次实验中总结出的数据。2一般情况下页面分头、中、底三个部分,如果看到别人的版面想借鉴的话,那就做个截图,然后把截图放在最底层,作为最初的草图。如果不想用别人的版面,最好也还是找一个同类网站借鉴一下。3参考线是布局网页的有效工具,先用横参考线将网页布局分成几大版块,然后再用竖参考线将每个板块按思路分为几个小板块,最后整体观察一下

6、。需要注意的是网站的Logo 和导航条等都是事先设计好的,有固定大小,在做这些区域时尺寸一定要按照这些元素尺寸设计,不能有丝毫差错,否则进入Dreamweaver 整合时,则可能出现空边或撑开表格的现象。4导航文字的特殊字体要在Photoshop 中直接添加上去,字体的颜色设置要考虑到整个页面效果,另外,如果想?制作出变化的导航效果,就复制对应的图层,设计好变化效果之后再隐藏该图层。将导航改变效果的图层进行切片的时候,保存另外一个名字存在另一个路径下,然后再将这些改变效果的图片拷贝到存放所有切片图片的路径下,为在Dreamweaver 中替换图像做准备。5网页中的元素有很多,像Banner 条

7、、文本区域、文字、Logo 等,尽量把这些相对独立的元素放在不同的图层中,这样方便以后的再编辑。3从Photoshop 通向Dreamweaver 的重要环节“切片”利用Photoshop 设计网页之后,要进行“切片”,然后才能通过Dreamweaver 进行加工制作。以下列举了切片的几个方法和技巧。1依靠参考线进行切片,在设计的时候用到参考线,在切图的时候也要用参考线,参考线能保证我们切出图在同一表格中的尺收稿日期:2009-11-26作者简介:周纯玉(1978-,女,辽宁铁岭人,实验师,硕士,研究方向为电子工程;詹劼(1980-,男,江西景德镇人,实验师,硕士,研究方向为教育技术。ISSN

8、 1009-3044Computer Knowledge and TechnologyComputer Knowledge and Technology 电脑知识与技术本栏目责任编辑:唐一东多媒体技术及其应用第6卷第2期(2010年1月寸统一协调,有效避免“留白”和“爆边”。2Logo 和导航条必须先切成图片,因为一般情况下,Logo 和导航条都是特别设计的,尤其是导航条,只有必须经过切片后才能在Dreamweaver 实现效果。3大图要切成小图,图片太大会影响网页浏览。把大的图切分均匀的小图,可以提高网页下载速度。4渐变效果一定要切,虽然渐变特效Dreamweaver 可以实现,但其效果简单

9、,无法给人以流畅的感觉,所以我们必须在导入Dreamweaver 之前先切成图片,利用Photoshop 的优势来美化。5虚线和转角形状必切,虚线和转角形状在Dreamweaver 不能实现,因此只能使用Photoshop 先切片,然后再通过Dreamweaver 加工实现。6每个内容编辑区域可单独作为一个切片,在Dreamweaver 中将该小“切片”删除后就是一个表格,可以在该表格中进行内容编辑。但并不是所有的图片都可以被删除。一般的做法是,图片被删除后,由于图片外围是表格,我们可以定义表格的长宽数值为图片的长宽数值,以保持整体图像的完整性。7有效存储切片。存储切片的文件夹必须位于站点的根

10、目录下,文件夹名必须是英文名字。存储切片时用“文件存储为Web 所用格式”命令,选择路径通常在网站根目录下,保存文件名如index.html 。这样切切后的图片都保存在了根目录下的images 文件夹中。如果将导航改变效果的图层进行切片的时候,要将对应原图层隐藏,然后再执行一次“文件存储为web 所用格式”命令,保存另外一个名字如tihuan.html 存在另一个路径下,然后再将这些改变效果的导航图片拷贝到根目录下的images 中,为在Dreamweaver 中替换图像做准备。4在Dreamweaver 中加工网页将切片后的网页在Dreamweaver 中打开,如:index.html 。其

11、实整个网页是一个大表格,每个切片是个大表个划分的小表格。下面就进入网页制作阶段。以下列举了常用技巧:1在Dreamweaver 中,如何输入一个空格呢?Dreamweaver 中对空格输入的限制是针对“半角”文字状态而言的,将中文输入法的“半角”摸时改称“全角”模式就可以了。2怎样才能够保证网页中文字不跟随浏览器字体大小设置而变动?由于IE 浏览器可以自由设置窗口内容字体的大小,这样由于用户的原因可能会导致显示上出现问题。怎样才能固定文字大小呢?办法就是通过CSS 样式表对字体进行强制性控制,即不容许变化。新建一个样式表,选择“类型”,然后对文字的大小、字体、样式等进行修改,一般情况下,文字的

12、大小选择12较为适宜。3怎么样才能为图片添加指定颜色的边框?如果图片没有经过处理直接插在网页上,看上去很难看,这时如果给图片加上个边框,效果立马就不一样了。方法是新建一个CSS 样式表,选择“边框”,然后对边框进行样式、宽度和颜色的修改。4怎样制作可以响应鼠标事件的翻转图片?我们经常会在一些网页中看到当鼠标滑过时,能变成另外的样子。这是通过两张不同的图片来实现的,也就是所谓的“翻转图片”效果。方法是选择“行为”里的“交换图像”,然后点击“浏览”找到原文件和所对应的替换图片,当然你要提前准备两张大小完全一样的图片,这样才能保证翻转时不会产生视觉上的不适。5如何添加图片的提示信息?在我们浏览网页时,当鼠标停留在图片对象或链接上时,在鼠标的右下有时会出现一个提示信息框进行注释说明,作用显而易见。方法是先选中图片对象,然后在属性面板中的“替代”输入框里输入需要提示的内容就可以了。6如何制作一个边框为1的表格?如果是仅仅将“边框”值设为1,那么制作出来的表格要比1粗,并且看上去很不美观,如果将表格的“边框”、“填充”都设置为“0”,“间距”设置为“1”,并且设定整个表格的“背景颜色”如红色,同时设定单元格的“背景颜色”如白色,就制作出了一个边框为1的红格白底表格。