ps切片与dw输出.ppt

Photoshop切片与DW输出
Step1:
(1)先分大块:一般分为头、内容和尾三部分;
(2)对应在DW中绘出三个同等大小的表格;
Step2
(1)将头部继续细分,做切片,对应在DW中头部表格进行拆分;
(2)同样,将内容、尾部进一步细分,将对应的表格拆分为同等大小和同样数量的小表格,设置好尺寸。
重复step2,直至不能再切;
说明:
(1)在切片工具状态下,按Ctrl键+双击,可弹出对话框,查看切片大小。
(2)
1
Photoshop切片与DW输出
第一次切片对应建表格
第二次切片对应拆分表格(也可建表格)
第三次切片对应建表格
第四次切片对应拆分表格
第四次切片对应建表格
2
Photoshop切片与DW输出
应用举例:
将右图网页切片并在DW中输出
注意:
切片时,先用切片工具划分好,并
测量好宽高,再用裁剪工具切割。
3
Photoshop切片与DW输出
Step1:将原网页边界无关区域切除;
Step2:将页面分为头、中、尾三部分,并在切片工具下,按ctrl+双击,测量各个部分的宽度和高度;
Step3:对应在DW中分别建3个表格,设置好宽和高。注意表格参数中的边框粗细、单元格边距、单元格间距均为“0”。
Step4:头部切为上下2块,对应DW第一个表格拆分为2行并设置宽和高;
Step5:将中间部分切成5部分,对应DW第二个表格拆分为5列,并设置宽和高;
4
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列,设置好高度;
5
Photoshop切片与DW输出
Step11:将头部最右边最上一行的图标切下保存在images文件夹中,然后在DW中写入相应文字,并插入图标的图像,设为右对齐,并调整字体型号和大小;
Step12:头部最右边第2行的放大镜和搜索图标切下,保存在images文件夹中,在对应的DW位置插入这两个图标;并在放大镜图标后面,插入表单元素。为了对齐放大镜、表单和搜索图标,将放大镜和搜索图标的属性调整为“绝对居中”[选中图标,在DW界面下方属性面板的“对齐”选项中选择]。
6
Photoshop切片与DW输出
Step13:在DW中头部最右边最