本节简介:学习切片与切片的相关命令;案例制作:裁切网上商城二级页面。
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
网页切片时,片状纯色的切片区域方式是切一个像素的色块即可
把视图对齐到切片,参考线打开。编辑切片选项,可以添加名称,
先用辅助线画线,再切片。能在DW里面写入的,就不需要切片。像纯色的直接切一个像素,然后用代码写,更节省空间,
纯色色块只需要存储一个像素的图片即可,白色区域则无需切片。
为什么文字下的颜色框不全部切掉,只要且两边? 可以使用DW的背景效果图 填充1个像素的 背景即可
切片功能特点:按功能区画分,每一个切片都是一个单独的页面,有利于我们处理各类的图片
为了切片的更准确,可以将网页图片放大到百分之七百,八百甚至更大,精确到像素来制作切片。
要注意在连续切片的地方不要留小的缝隙,尽量避免不必要的自动切片,这样才能保证我们的图片优化处理为HTML表格之后,在Dreamweaver这样的环境中还可以打开来进行灵活的编辑以及修改。
做切片时,要找到属性均与的区域来做切片。切片的制作要有思想,考虑网页的布局和制作思路,
命名要有一定技巧,对于同一属性的设置同一属性的命名
那么在文件夹images中就可以看到,就有保存了刚才处理的Logo图片。
在我们的页面中仍然还有需要我们单独处理的地方,比如说Logo部分,需要对图片单独处理,文字另外打出来,那么就对Logo图片做切片处理,把之前该部分的切片区域删除,对图片进行精确的选择,然后进行保存,在保存的时候将切片选框选为选中的切片,然后把文件名称改为Logo图片的名称(标识)biaozhi
打开刚才制作保存的文件夹,images,在这里面可以看到刚才制作的效果,对于已命名的切片将会显示在上方。未命名的多余的切片,在网页制作中就可以删掉了。
记笔记更有助于积累资料、拓展新知,达到全面透彻学习的目的。点击这里开始写笔记。保存时对文件进行命名,切片选择所有切片,默认设置,(根据情况)保存
切片都处理完了以后,点击存储,存储为Web所用格式