PS切片与DW输出

《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:注意最左侧，“防伪查询”部分，整个切下，然后擦除下面的[鉴别]和[重置]按钮后，作为背景铺在表格中，然后再分别插入表单和上述两个按钮。