欢迎来到天天文库
浏览记录
ID:44214686
大小:555.50 KB
页数:8页
时间:2019-10-19
《PS切片与DW输出》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、Photoshop切片与DW输出Step1:(1)先分大块:一般分为头、内容和尾三部分;(2)对应在DW中绘出三个同等大小的表格;Step2(1)将头部继续细分,做切片,对应在DW中头部表格进行拆分;(2)同样,将内容、尾部进一步细分,将对应的表格拆分为同等大小和同样数量的小表格,设置好尺寸。重复step2,直至不能再切;说明:(1)在切片工具状态下,按Ctrl键+双击,可弹出对话框,查看切片大小。(2)Photoshop切片与DW输出第一次切片对应建表格第二次切片对应拆分表格(也可建表格)第三次切片对应建表格第四次切片对应拆分表格第四次切片对应建
2、表格Photoshop切片与DW输出应用举例:将右图网页切片并在DW中输出注意:切片时,先用切片工具划分好,并测量好宽高,再用裁剪工具切割。Photoshop切片与DW输出Step1:将原网页边界无关区域切除;Step2:将页面分为头、中、尾三部分,并在切片工具下,按ctrl+双击,测量各个部分的宽度和高度;Step3:对应在DW中分别建3个表格,设置好宽和高。注意表格参数中的边框粗细、单元格边距、单元格间距均为“0”。Step4:头部切为上下2块,对应DW第一个表格拆分为2行并设置宽和高;Step5:将中间部分切成5部分,对应DW第二个表格拆分为
3、5列,并设置宽和高;Photoshop切片与DW输出Step6:将尾部切为2行,对应DW表格拆分为2行,并设置宽和高;Step7:头部第一行可切为4部分[空白部分单独切出],对应DW中插入表格1行4列,并设置好表格的整体宽度(建议100%)和各列宽度;Step8:切下头部的logo图像,保存在站点下的images文件中,文件类型可选gif或jpg;Step9:对应step8,将logo图像插入到对应的表格中;Step10:头部最右侧可切分为3行,对应在DW中将表格再拆分为3行1列,设置好高度;Photoshop切片与DW输出Step11:将头部最右
4、边最上一行的图标切下保存在images文件夹中,然后在DW中写入相应文字,并插入图标的图像,设为右对齐,并调整字体型号和大小;Step12:头部最右边第2行的放大镜和搜索图标切下,保存在images文件夹中,在对应的DW位置插入这两个图标;并在放大镜图标后面,插入表单元素。为了对齐放大镜、表单和搜索图标,将放大镜和搜索图标的属性调整为“绝对居中”[选中图标,在DW界面下方属性面板的“对齐”选项中选择]。Photoshop切片与DW输出Step13:在DW中头部最右边最下一行,输入相对应的文字,如“当前时间”等。;Step14:导航条的整体输出:(1
5、)将头部第2行的导航条切下,然后再切成15块[文字、分隔线和空白底分开切]。(2)切好后,选择PS面板中[文件]下拉菜单中的[存为web和设备所用格式],快捷键为[Ctrl+Alt+Shift+S];(3)在弹出的对话框中,选择存储,注意格式为html;(4)在DW新窗口中打开导航的html文件,复制粘贴到表格中的对应位置。Photoshop切片与DW输出Step15:中部已被划分为5列,最左侧又可切成12片,对应在DW中插入一个12行1列的表格,设置好高度,宽度为100%;Step15:中部右侧部分[算空白,应为第4列],根据内容可切为5部分,对
6、应在DW中在对应表格中插入一个5行1列的表格,设置好高度,宽为100%;Stetp16:分别对左侧和右侧的内容进一步细切,并在DW对应位置插入图像或文字。Step17:注意最左侧,“防伪查询”部分,整个切下,然后擦除下面的[鉴别]和[重置]按钮后,作为背景铺在表格中,然后再分别插入表单和上述两个按钮。
此文档下载收益归作者所有