教案ps切片与dw输出.pptVIP

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中头部最右边最下一行，输入相对应的文字，如“当前时间”等。； Step14:导航条的整体输出： （1）将头部第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部分，对应在DW中在对应表格中插入一个5行1列的表格，设置好高度，宽为100%； Stetp16: 分别对左侧和右侧的内容进一步细切，并在DW对应位置插入图像或文字。 Step17:注意最左侧，“防伪查询”部分，整个切下，然后擦除下面的[鉴别]和[重置]按钮后，作为背景铺在表格中，然后再分别插入表单和上述两个按钮。 *