PS切片与DW输出

《PS切片与DW输出》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Photoshop切片与DW输出Step1:（1）先分大块：一般分为头、内容和尾三部分；（2）对应在DW中绘出三个同等大小的表格；Step2（1）将头部继续细分，做切片，对应在DW中头部表格进行拆分；（2）同样，将内容、尾部进一步细分，将对应的表格拆分为同等大小和同样数量的小表格，设置好尺寸。重复step2，直至不能再切；说明：（1）在切片工具状态下，按Ctrl键+双击，可弹出对话框，查看切片大小。（2）Photoshop切片与DW输出第一次切片对应建表格第二次切片对应拆分表格（也可建表格）第三次切片对应建表格第四次切片对应拆分表格第四次切片对应建表格Photosho

2、p切片与DW输出应用举例：将右图网页切片并在DW中输出注意：切片时，先用切片工具划分好，并测量好宽高，再用裁剪工具切割。Photoshop切片与DW输出Step1:将原网页边界无关区域切除；Step2:将页面分为头、中、尾三部分，并在切片工具下，按ctrl+双击，测量各个部分的宽度和高度；Step3:对应在DW中分别建3个表格，设置好宽和高。注意表格参数中的边框粗细、单元格边距、单元格间距均为“0”。Step4:头部切为上下2块，对应DW第一个表格拆分为2行并设置宽和高；Step5:将中间部分切成5部分，对应DW第二个表格拆分为5列，并设置宽和高；Photoshop切

3、片与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中

4、写入相应文字，并插入图标的图像，设为右对齐，并调整字体型号和大小；Step12:头部最右边第2行的放大镜和搜索图标切下，保存在images文件夹中，在对应的DW位置插入这两个图标；并在放大镜图标后面，插入表单元素。为了对齐放大镜、表单和搜索图标，将放大镜和搜索图标的属性调整为“绝对居中”[选中图标，在DW界面下方属性面板的“对齐”选项中选择]。Photoshop切片与DW输出Step13:在DW中头部最右边最下一行，输入相对应的文字，如“当前时间”等。；Step14:导航条的整体输出：（1）将头部第2行的导航条切下，然后再切成15块[文字、分隔线和空白底分开切]。（2

5、）切好后，选择PS面板中[文件]下拉菜单中的[存为web和设备所用格式]，快捷键为[Ctrl+Alt+Shift+S]；（3）在弹出的对话框中，选择存储，注意格式为html；（4）在DW新窗口中打开导航的html文件，复制粘贴到表格中的对应位置。Photoshop切片与DW输出Step15:中部已被划分为5列，最左侧又可切成12片，对应在DW中插入一个12行1列的表格，设置好高度，宽度为100%；Step15:中部右侧部分[算空白，应为第4列]，根据内容可切为5部分，对应在DW中在对应表格中插入一个5行1列的表格，设置好高度，宽为100%；Stetp16:分别对左侧和

6、右侧的内容进一步细切，并在DW对应位置插入图像或文字。Step17:注意最左侧，“防伪查询”部分，整个切下，然后擦除下面的[鉴别]和[重置]按钮后，作为背景铺在表格中，然后再分别插入表单和上述两个按钮。