网页切片技巧

网页切片技巧

切片在制作网页的过程中占有很重要的地位，下面是我整理的网页切片技巧，希望对你有帮助!

切片介绍

1. 切片是将图片转换成可编辑网页的一座桥梁，通过切片才可以将普通图片变成Dreamweaver可以编辑的网页格式

2. 切片后的图像可以更快的.在网络上传播

3. 切片后的图像也是网页中片的主要来源

切片方法

1. 切片首先保证切出网页中需要多次修改的区域，例如文字区域

2. 切片图像的大小尽量保持在15K以内(便于网络传输)

3. 充分利用Dreamweaver中的自动拼贴功能减少垃圾切片

操作技巧

技巧1：使用键盘的方向键移动对象时，按住【Shift】键不放，每次可以移动10个像素。

技巧2：使用【指针】工具移动对象时，按住【Shift】键不放，可以保证其水平或垂直移动。

技巧3：按住【Alt】键不放拖拽某个对象，即可对其进行复制。但是自动形状不能用这个操作，因为自动形状是一种组合状态，可以使用复制粘贴命令复制。

技巧4：对于所有的形状绘制工具而言，按住【Shift】键不放进行绘制，可以保证其宽高比始终为1：1。

技巧5：使用基本形状工具绘制形状时，按住【空格】键不放，不要松开鼠标左键，可以移动矢量图形的位置。绘制选区的时候也是如此。

技巧6：使用【矩形】工具绘制矩形时，按住键盘的上或下键不放，不要松开鼠标左键，可以增加或减少矩形的圆度。

技巧7：需要选择组内对象时，并不需要取消组合，可以选择【部分选定】工具来选择组内对象，这对于多个组合对象的编辑来说非常方便。

技巧8：使用【钢笔】工具绘制路径的过程中，按住【Alt】键不放，可以随时调整路径点的控制手柄。

技巧9：使用【刷子】工具绘制图像时，按住【Shift】键不放，绘制出出一条水平或垂直线后，释放鼠标，但不要松开【Shift】键，继续绘制，fireworks会把所画前一条线的终点和后一条线的起点连接起来。

技巧10：按住【Alt】键，单击【层】面板中的位图图层，可以根据位图的形状获得选区。

技巧11：绘制多个选区时，按住【Shift】键表示增加选区按住【Alt】键表示减选区按住【Shift】+【Alt】键表示对选区进行交集运算。

技巧12：在给选区填充颜色时，可以使用【Alt】+【Delete】键快速填充颜色，与photoshop里填充前景色的快捷键一样。

技巧13：按快捷键【Ctrl】+【F8】，可以创建一个新的元件。

技巧14：按住【Ctrl】键，单击【混色器】面板下方的颜色栏，可以快速切换到不同的颜色模式。

技巧15：在【层】面板中，选中蒙板图标并像移动图层那样按住蒙板图标将其移动到其他位置，这样可以删除蒙板，并且保留下了蒙板对象。

技巧16：使用【文本】工具单击已经创建的文本，待光标转换为文本光标时，按住键盘上的【Ctrl】加键盘的左右键可以用来改变字符间距，按住【Ctrl】加键盘的上下键可以用来改变文本的行距。

技巧17：在颜色弹窗口采集颜色时，按住【Shift】键可以确保获得的颜色为网络安全色。

技巧18：如果要给辅助线精确定位，可以在辅助线上双击鼠标左键，在弹出的【移动引导线】对话框中输入详细的坐标。

网页切片的作用1、减少网页加载时间有时候网页上可能需要大的banner图片或背景图片，那末阅读器下载这个图片就要花费很长的时间，这是很不利于用户体验的。而网页切片的出现就很好的解决了这个问题。切片的使用使全部大的图片分为了不同的很多小图片，阅读器也会对这些小图片进行分开下载，这样阅读器下载图片的时间久大大的缩短了，节俭了很多的时间。在现在互联网加载速度遭到限制的情况下，网页切片无疑是结局网页下载图片慢的很好方法。2、优化图象1般来讲1个完全的图象只能是1种格式，jpg、gif、png、psd、bdf或其他，1种格式那末我们就只能采取1种优化方式。而网页切片可以把这张分割成很多小图片，并且可以保存成其他格式，可以分别对其优化。这样就可以保证图片质量高等的情况下还能减少图片的内存。也提高网页的加载速度的。2、网页切片的制作网页切片的制作1般是用切片的专用工具photoshop或fireworks。在ps或fw当选择切片工具把图片依照需要的尺寸和位置进行拉线切割。切割好以后直接导出切片，并把优化结果贮存为html格式就好了这是就会多出1个images的文件夹，里面就是我们刚才切割好的小图片了。 查看原帖>>

我所学的网页制作中的切片是在Fireworks里面做的。切片是网页对象，它们不是以图像的形式存在的，而是最终以HTML代码的形式出现。简单点来说，就是可以在Fireworks打开一张图片，用fireworks里面的切片工具，在图片上一拉，像我们在PS里面裁剪图片一样做。这样刚切的部分就叫做切片，然后导出保存为“HTML和图像”，最后在插入网页中，预览时会发现，刚切的切片部分，放鼠标上去，会出现一个手（也就是有链接）。利用切片可以制作变换图像，也就是鼠标放在被切了的那部分图片上，会在那部分出现另一幅图……这些都是我自己总结的，不知道这样说你明白了没有O(∩_∩)O~

---