Photoshop结合Dreamweaver制作网页相册方法

dreamweaver|网页

Photoshop(以下简称PS)的批处理功能是很强大的,如果利用好可以做为我们做很多工作。今天我们介绍“PS批处理设计制作网页相册”。
    一、准备好自己要做相册的素材,产品展示、案例展示、照片展示等都可以,统一将这些图片放在一个文件夹下,我这里将这个文件叫做“Res_IMg",这里面放的都是大的图片,小图片一会儿ps会为我们做的。

    二、打开PS,选择菜单如下:

 

    三、这个就是PS制作图片展示的主要界面啦,主要有以下几个样式:

 

    样式中可以选择生成不同的html页面的形式,PS CS版本中提供了8种格式,都不错的。

    选择源图像工作区:

 

    上面的“浏览”是选择你要批量做图片展示的文件夹,也就是上面我们准备好的"Res_Img"。

    下面的“目的”就是PS处理完后存放的文件夹,可以存在你想要保存的位置,我这里面建个文件夹叫”Pic_Ok"。

 

    “选项”里面就是具体的一些设置,一共有六项,其中一定要设置的是“横幅”“大图像”“预览”。

 

    “横幅”中可以设置这个首页面html的名称,也就是html页面的Title,再就是联系信息,时间什么的,如果填写上最后都会显示出来。

    而“大图像”则可以设置生成“图片展示”后大图片的长宽等,而且PS可以自动优化图片大小,当然也可以不设置。

 

    “缩览图”可以设置生成html页面中小图片的大小,也可以设置个边框什么的。我直接用默认的“0”。

    通过以上设置后,就可以按“好”了,然后就等着PS把咱的这堆图片变成一个图片展示吧。

    如果大家有一些网页制作基础,可以将生成的页面用Dreamweaver再做一些后期的CSS以及布局方面的优化调整和美化处理。其实制作网页相册的方法很多,比如用Dreamweaver和Fireworks也可做图片批处理并生成相册,不过我个人认为Photoshop结合Dreamweaver的效果比较好。

时间: 2016-02-12

Photoshop结合Dreamweaver制作网页相册方法的相关文章

Photoshop结合Dreamweaver制作网页相册

dreamweaver|网页 本教程适用对象:有一定的PS基础,最好有网页设计制作基础,那样在PS处理好后可以在DM里面做一个后期的CSS以及布局方面的处理,当然,DM&FW也可做图片批处理并生成相册,不过我个人认为PS&DM的效果比较好. PS的批处理功能是很强大的,如果利用好可以做为我们做很多工作.今天我想讲的是"PS批处理设计制作图片展示" 开始吧 一.准备好自己要做相册的素材,产品展示啦,案例展示了,照片展示了都可以,统一将这些图片放在一个文件夹下,我这里将这个

使用Dreamweaver制作网页时文字自动换行的小技巧

在使用Dreamweaver制作网页时,遇到制作表格的时候,内部的文字没有自动换行,我应该怎么做呢?下面提出两种解决方案,大家可以参考!在这里你如果知道该技巧,你可以略过!如果你不知道,不要说什么现在网页中已经没有表格了这样绝对的话啊?Web标准时代网页中照样应该是不能把表格完全抛弃的!呵呵. 解决表格中文字自动的换行的情况有两种可能: 第一种,你用CSS把表格内文字的字体设置成了英文字体,这样在Dreamweaver里表格内的文字不会自动换行,但这仅是Dreamweaver里的显示效果,在IE

Dreamweaver制作网页小技巧汇集

本文汇集了一些Dreamweaver制作网页时的可以用的一些小技巧.希望对您有所帮助. 1)怎样将 Dreamweaver 集成到 IE 浏览器? Dreamweaver 安装程序会在上下文选单增加一个" Edit with Dreamweaver "命令,我们还可以修改 Windows 的注册表使它与 IE 集成.就象 MS Word . Frontpage 和 Notepad 一样,通过 IE 工具栏的编辑按钮来调用 Dreamweaver 打开当前网页. 将下面文本的最后一行要改

Dreamweaver制作网页幻灯片效果

dreamweaver|幻灯片|网页 本例中做好的播放器,可在下列地址浏览:http://webart.myrice.com/sample/index.htm. 作为一位不懂代码的业余网页制作爱好者,常常羡慕专业程序人员在浏览器中编制出的效果超酷的一些多媒体作品.唉,无奈程序那东东,酶涩南学,非一日之功,需要良好的逻辑思维能力和足够的磨练方可成就.是不是不会程序,就永远就不能实现自己的创意和想法了呢?非也!现在我们要制作的就是在网页中的一个幻灯片播放器.当用户按下控制盘上的"PLAY"

Dreamweaver制作网页之图片应用技巧

dreamweaver|技巧|网页 加快图片下载速度 如果网页中有过多的图片,就会影响浏览的速度. Dreamweaver 可以轻松设置预载图片,加快图片下载速度,让站点以最快的速度出现在用户面前. 效果说明:建立文件,先预载图片,使图片预先下载到缓存中,加快图片下载速度. 创作思想:打开 Dreamweaver MX 2004 软件新建页面,再打开标签面板,在[行为]中选择[预先载入图像]选项,加快图片下载速度. 操作步骤 ( 1 )新建文件,操作如图1 所示. ( 2 )保存页面并插入图片.

Dreamweaver制作网页的图片应用技巧

dreamweaver|技巧|网页 加快图片下载速度 如果网页中有过多的图片,就会影响浏览的速度. Dreamweaver 可以轻松设置预载图片,加快图片下载速度,让站点以最快的速度出现在用户面前. 效果说明:建立文件,先预载图片,使图片预先下载到缓存中,加快图片下载速度. 创作思想:打开 Dreamweaver MX 2004 软件新建页面,再打开标签面板,在[行为]中选择[预先载入图像]选项,加快图片下载速度. 操作步骤 ( 1 )新建文件,操作如图1 所示. ( 2 )保存页面并插入图片.

Dreamweaver制作网页技巧之对进行网页优化

dreamweaver|技巧|网页|优化 我们为了优化网页.加快网页下载速度,除了对图片进行优化之外,还需对网页其他各个元素进行优化.在网页编织过程中如能充分利用编辑工具,也可以在网页制作中达到优化目的 我们为了优化网页.加快网页下载速度,除了对图片进行优化之外,还需对网页其他各个元素进行优化.在网页编织过程中如能充分利用编辑工具,也可以在网页制作中达到优化目的.下面是Dreamweaver中的一些优化技法: 合理调用CSS 进行网页设计时,运用样式表单CSS来对页面元素进行布置,可以大大地减少

用Dreamweaver制作网页七招实用技巧

dreamweaver|技巧|网页 一.从外部文档中粘贴时,如果只要文字而不想要其格式,可以使用"Edit→paste as text"命令,不要直接用Ctrl+V. 二.当有浏览者使用Netscape浏览页面时,在改变窗口大小的时候页面会花掉.在制作网页时就应该考虑到这个问题,可以通过点击"Command→Add/Remove Netscape resize fix"来加以解决,它可以使在Netscape中浏览页面时,改变窗口大小的时候页面不会花掉. 三.仅仅拷贝

Dreamweaver制作网页七招实用技巧

一.从外部文档中粘贴时,如果只要文字而不想要其格式,可以使用"Edit→paste as text"命令,不要直接用Ctrl+V. 二.当有浏览者使用Netscape浏览页面时,在改变窗口大小的时候页面会花掉.在制作网页时就应该考虑到这个问题,可以通过点击"Command→Add/Remove Netscape resize fix"来加以解决,它可以使在Netscape中浏览页面时,改变窗口大小的时候页面不会花掉. 三.仅仅拷贝文字.当我们从Dreamweaver