photoshop制作网页模板及如何转换到dreamweaver

photoshop制作网页模板及如何转换到dreamweaver

ID:37178602

大小:115.54 KB

页数:3页

时间:2019-05-21

photoshop制作网页模板及如何转换到dreamweaver_第1页
photoshop制作网页模板及如何转换到dreamweaver_第2页
photoshop制作网页模板及如何转换到dreamweaver_第3页
资源描述:

《photoshop制作网页模板及如何转换到dreamweaver》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、Photoshop制作网页模板2007年08月18日星期六21:30用图层组管理网页元素首先是在Photoshop中制作好网页的框架。网页中的元素有很多,像Banner条、文本框、文字、版权、Logo、广告等。尽量把这些相对独立的元素放在不同的图层中,这样方便以后的再编辑。不过图层一多,就显得很凌乱,可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮,从弹出菜单中选择“新建组”,在随后出现的对话框中为新建组取一个名称(如:“网页顶部”),确定即可。这时图层面板中多出一个文件夹图标,即图层组。把相关联的图层都拖放到

2、同一组中,比如网页顶部的所有元素,标题、菜单、Logo等都放到“网页顶部”组中(见图1)。同样方法可以建立多个组,在组的下面还可以建立子组。点击图层组前面的小三角,就可以像文件夹一样展开或折叠它,这样图层面板就显示干净利落得多,要修改某个元素也能很容易找到。对同一组中的所以图层可以方便地进行统一操作,如整体复制、删除、隐藏、合并等。小提示:★如果你想借鉴某个网页的设计,不妨把它截成图片放在最下面的图层中,再拉出多个参考线划出网页的大致版式,再在此基础之上边参考边制作自己的网页。从Photoshop到Dreamweaver

3、的转换在Photoshop中设计好之后,下面就要用切片工具把它转换成网页。有些人在切片之前喜欢合并图层,其实没有必要,合不合并图层对最终生成的网页没有多大影响,反而会妨碍以后的编辑修改。第1步:我们最终需要的,只是Photoshop中制作的图形和框架。选择切片工具(快捷键为K),把需要的每个图形独立切分出来。每切分出一个图形,在它的左上角会显示出切片编号(见图2)。第2步:在工具箱右击切片工具,从弹出菜单中选择“切片选择工具”,用它可以选取、移动切片,并可以调整切片的大小。右击某个切片还可以删除或划分这个切片。第3步:切

4、分出所有图片后,执行“文件→存储为Web所用格式”命令,打开存储对话框,根据需要设置好图片的格式、调色板等参数后,点击右上角“存储”按钮调出保存对话框,选择HTML网页格式,使用默认设置,选择“所有用户切片”,保存即可(见图3)。第4步:在Dreamweaver中打开刚才保存的网页,添加文字并进行各种编辑修改就可以了。怎么样,简单吧!注意:Photoshop导出的实际上就是一个大的表格,所有空白的地方也都会转换为图片填充,在DW中编辑时,直接删除这些图片再添加相应的内容即可。小提示:★在Photoshop中编辑好图形后,

5、点击工具箱最下面的按钮(快捷键为Ctrl+Shift+M),可以转到ImageReady里进行编辑,在这里,切片工具的功能更为强大,输出的图形控制也更丰富。

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。