第-6-章-网页界面定制.pptVIP

第6章 网页界面定制 本章进阶 掌握“切片工具”的使用 了解切图的技巧 掌握各种图像的切割 案例分析 根据本章知识点把提供的 网页效果图进行切片再 通过Dreamweaver进行 布局。 涉及知识点 切片工具 切片存储 使用Dreamweaver表格和CSS布局 素材 完成效果 切片工具 从工具箱中选择“切片工具”或按“K”键，直接在图像中需要切割的区域按鼠标左键拖拉，即可在图像中创建切片。 “切片工具”主要用于切割图像 切割后的图像 切片选择工具 “切片选择工具”用于编辑切片，不能切图 用“切片工具”把图像切割完成后，可以用“切片选择工具”选择其它切片为活动状态。也可以对切片进行调整。 图像切割后，每一个切片都是一个独立的图像，存储时要通过“文件→存储为Web和设备所用格式”命令或按“Alt+Shift+Ctrl+S”键进行存储。 切片的存储 所有效果尽量用Dreamweaver实现，矩形的色块，文字， 表单，都尽量在Dreamweaver里直接做。而图片logo、图 案和特殊字体，就必须在Photoshop制作、切割以后再通 过Dreamweaver布局。 颜色和形状都没有变化，或者在X或Y方向上没有变化的 区域适合切为一个切片。 切图时，将图像显示比例放大，在Photoshop中配合参考 线，一定要精细到像素。 图像切割完成后，存储时图片名称最好是英文。 切图原则和技巧 圆角导航切图 宽度固定 宽度固定的圆角导航，可以将整个圆角框作为背景，在切割时切一个重复的导航按钮即可。 宽度固定的圆角导航切图方法 宽度固定圆角导航 演示 打开素材 切割并存储按钮 设置参考线 在Dreamweaver中布局 圆角导航切图 宽度不固定 把导航按钮切三份，两边两个圆角分别切开，中间再纵向切出1px的图像作背景扩展。 宽度不固定的圆角导航切图方法 宽度不固定圆角导航 演示 打开素材 设置参考线 切割并存储按钮 在Dreamweaver中布局 水平渐变图像 横向切出1px的图像作背景扩展，在CSS中定义背景重 复，纵向自动延伸。 垂直渐变图像 纵向切出1px的图像作背景扩展，在CSS中定义背景重 复，横向自动延伸。 斜向渐变图像 使用时要把整个渐变切成一个图像，图像容量太大， 尽量不用。 渐变图像切图 把文字内容隐藏。 分析需要切成几大块（Logo、导航、Banner、 内容和版权信息）。 创建多根参考线，一定要精确到每一个像素。 依靠创建的参考线用“切片工具”把网页效果切大块，之后在大块的基础上根据需要切小块。 整个网页切图 素材准备 演示案例制作 操作步骤 创建参考线 切割图像 新建CSS文件 DIV中设置列表 最终效果 切片工具组中包括“切片工具”和“切片选择工具”两个工具。 “切片工具”主要用于切割图像，“切片选择工具”主要用于编辑切片。 图像切割后要通过“文件→存储为Web和设备所用格式”命令或按“Alt+Shift+Ctrl+S”键进行存储。 宽度固定的圆角导航，可以将整个圆角框作为背景，在切割时切一个重复的导航按钮即可。 宽度不固定的圆角导航，要把导航按钮切三份，两边两个圆角分别切开，中间再纵向切出1px的图像作背景扩展。 本章总结