下载掌阅APP，畅读海量书库
立即打开
（1）切片的概念
切片就是将一幅大图像分割成一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像拼接起来，成为一幅完整的图像。这样做可以减小图像的大小，减少网页的下载时间，并且能够制作出交互的效果。
（2）切片的优点
● 缩短下载时间：当网页上的图片较大时，浏览器下载整个图片需要花很长的时间，使用切片可以把整个图片分为多个不同的小图片后分开下载，这样下载的时间就大大缩短了。
● 制作动态效果：利用切片可以制作出各种交互效果。
● 优化图像：完整的图像只能使用一种文件格式，应用一种优化方式，而对作为切片的各幅小图片就可以分别进行优化，并且根据各幅切片的情况还可以保存成不同的文件格式。这样既能够保证图片的质量，又能够使图片变小。
● 创建链接：切片制作好之后，就可以对不同的切片制作不同的链接了，而不需要在大的图片上创建热点。
制作网站必须先进行规划设计，用笔在纸上设计网页结构，使用Photoshop做出效果图，然后进行切图。
（1）切图原则
● 图切得越小越好。
● 图切得越少越好。
对于一整张图来说，同时达到以上两个目标是矛盾的。针对这点，一般将一个网页切成20～30个图，加载速度是不受影响的。
（2）切图技巧
● 一行一行地切。
● 背景图切成小条。
● 不能分开的不要切分；选行的时候要注意合理性。
● 切的时候将图像放大，这样移动一个像素就非常明显，否则不能达到原图与网页的一致性。
表格属性的设置包括表格宽度、高度、填充、间距、对齐、边框、背景颜色、边框颜色、背景图像等，如图3-103所示。
图3-103 设置表格属性
各选项说明如下：
● “行”和“列”：设置表格中的行数和列数。
● “宽”：设置表格的宽度。单位可以是像素，也可以是浏览器窗口的百分比，表格的高度一般不予指定。
● “对齐”：设置表格按浏览器左对齐、右对齐或居中对齐。默认设置下将使用表格按浏览器左对齐。
● “清除行高”和“清除列高”：可以相应从表格中删除所有行高和列宽值。
● “将表格宽度转换成像素”：可以将表格当前的以浏览器窗口百分比为单位的宽度转换为以像素为单位。而“将表格宽度转换成百分比”按钮则可以将以像素为单位的宽度转换为以浏览器窗口百分比为单位。
● “间距”：设置表格单元格之间的距离。
● “填充”：设置单元格内容与单元格边缘之间的空间。如果没有指定单元格间距和单元格填充的值，则“Internet Explorer和Dreamweaver”都默认将单元格“间距”设置为2，单元格“填充”设置为1。
● “边框”：设置围绕表格的边框宽度（单位为像素）。
● “边框颜色”：设置整个表格的边框颜色。
在编辑网页时除了可以设置整个表格的属性外，还可以设置行、列或单元格的属性。选中要设置相同属性的一个或多个单元格，在“属性”面板中就可以设置其属性，如图3-104所示。
图3-104 设置单元格属性
● “水平”：设置单元格内容的水平对齐方式。有4个值，分别为默认（即普通单元格左对齐、标题单元格居中对齐）、左对齐、右对齐和居中对齐。
● “垂直”：设置单元格内容的垂直对齐方式。有5个值，分别为默认（通常为中间对齐）、顶端、居中、底部和基线。
● “宽”和“高”：设置单元格的宽度和高度，单位是像素。要使用百分比，则在数值后添加百分比符号（%）。
● “背景”：设置单元格背景图片。
● “背景颜色”：设置单元格背景颜色。
● “边框”：设置单元格的边框颜色。
● “合并所选单元格，使用跨度”：该按钮可以合并单元格。在合并之前需选定相邻单元格，否则合并按钮无效。
● “拆分单元格为行或列”：该按钮可以拆分单元格。在拆分之前选定要拆分的单元格。
● “不换行”：选中该复选框之后将禁止文字换行。这样可使单元格扩展宽度以容纳所有数据。一般来说，单元格都是先最大限度地横向扩展以包容数据，然后才会纵向扩展。
● “标题”：将每个单元格设置为表格标题。在默认情况下，表格标题单元格中的内容将被设置为粗体并居中对齐。