7.4.5 网站切图.pptVIP

7.4.5 网站切图 切图是一种网页制作技术，是将美工效果图转换为页面效果图的重要技术。切片是切图的直接结果，切图实际上就将图切分为一系列的切片。Photoshop CS5切图操作过程中应用到切片工具和切片选择工具。第一步：打开设计好的原图。 第二步：选择切片工具，对原图进行划分切片操作，在原图上进行切分的操作，把原图按区域切片。切图可以有多种切分方式，当页面大小发生变 化时，页面的各部分可以相对自由地伸缩，而不会使页面发生错乱或变形等问题，可采用竖切。当页面框架固定，内容固定可采用横切。属性均匀的区域适合分为一个切片，均匀主要是指颜色和形状都没有变化，或者在X或Y方向上没有变化。根据原图的内容布局，确定整体的切分策略，即切分要有分块的思想，要在想象中将整个布局看成是一个两个table，然后在具体到每个table，去考虑里面应该如何切。 第三步：对切分好的切片进行编辑的操作，编辑包括对切片的名称、尺寸等的修改。如果想移动某个切片，可以使用“切片选择工具”选择某个切片，并用鼠标进行拖动，在切片边框拖动鼠标改变大小。 第四步：切图的Html格式输出，切图完成，就可以输出为Html格式的页面。在“文件”菜单中，选择“存储为Web和设备所用格式”，在弹出的页面中直接选择“存储”，然后在弹出的界面中，填入文件名，保存类型选择“HTML 和图像(*.html)”，设置为“默认设置”即可，切片选择“所有切片”，然后点击“保存”按钮。 第五步：查看切片输出结果，打开切片文件保存位置，这里的文件包括了一个html和images文件夹，images文件夹中是生成的切片图片文件。 第六步：完成第五步切片操作已经全部完成。如果不需要调整网页页面，则切片生成的Html网页文件就可以传到Web空间，如果需要编辑，就是Dreamweaver里打开Html文件编辑网页，删除不必须的图片和进行内容的填充。 * *