PS切片与DW输出.ppt

《PS切片与DW输出.ppt》由会员分享，可在线阅读，更多相关《PS切片与DW输出.ppt（8页珍藏版）》请在三一办公上搜索。

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

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

3、tep6:将尾部切为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）切好后，选择PS面板中文件下拉菜单中的存为web和设备所用格式，快捷

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