PS切片与DW输出.ppt

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