切页面速成手册.docVIP

切页面速成手册 当设计把页面制作完成之后，剩下的工作就是由我们来切页面了。所谓切页面，实际上，是由把设计制作的PSD效果图切成若干张小图片和把这些小图片拼合在一起形成最终网页形式这两部分组合而成。简单的说，切页面就好比是玩儿拼图，我们把一幅画打散，然后再把碎片按原样拼起来。页面只有被切过之后，才能够被我们随心所欲的进行文字方面的编辑。 许多人认为切页面很难，说自己不会切。其实，这个并不像想象中那么难，也许只是因为大家拿到页面后感觉无从下手，所以才会认为它难。所以切页面的重点主要就在于对于页面结构的把握。下面就进入我们切页面的第一步——分析页面的整体构架。 页面整体构架 看到一个页面，首先要知道它是由哪几部分组成的。一般的页面都可以广泛的划分为由头部、中部和尾部组成。（如下图） 这样，我们至少可以把页面分为三个部分来处理，即头部、中部和尾部。下面我们对中间部分进行一下分析。 页面的中间部分无非分为左中右、左中、中右几种形式。下面我们就最常见的结构来说明一下。 上面这张图是典型的左中右结构，它把页面分为了三个部分。 有人可能会说，这种页面结构和我切页面有什么关系？ 下面我来说说页面结构的重要性：我们在切页面的时候，第一步要根据页面的结构来确定表格，如上图，这个地方可以先做出一个一行三列的表格，只有在确定了具体结构之后，再进行对各个部分的细节处理，如背景、表格边框、图片、文字等工作才会变得容易。（具体的表格制作、插入图片等我们将在后面介绍）如果对于结构的分析不够全面和准确的话，很容对我们后期的工作易造成麻烦。 比如图，如果把页面做成上下两行，现在看来不是不可以，但是如果左边的焦点快报再多出一行，则会出现页面撑开的现象。如果把表格确定成一行两列，那么在延展性上面就会比上下两行要好得多。 上面我们了解到页面的基本结构，那么在photoshop中，我们应该怎样确定页面结构呢？这就需要用上photoshop中的一个功能——辅助线。 辅助线 辅助线在我们切页面的时候，可以帮助我们确定页面结构，加大切片工具的易用性。 调用辅助线的方法：首先在视图中把标尺调出来 然后从标尺处点中鼠标向页面中拖。你会看到一条线，把它拖到你想要放的地方松开鼠标即可。一条辅助线就这么产生了。如下图 当把辅助线都确定好之后，我们就要开始进行最关键的部分了——拿起刀子，准备开切！ 切片工具 其实，如果说起开始来切，反而到很容易了，实际就是把尺寸比较大的图片分成一小块一小块的，然后拼合起来。头部、尾部、和中间一些花边都可以切成小图。 从下图处点选切片工具 点中后，鼠标会编成相应的样子，在页面要切图的地方，把按住鼠标不放，选择截取范围，选好合适位置后松开鼠标，一个切片就好了。重复上述动作，做完所有切片。 等图片全部切完之后，点击文件中的存储为web格式 在其中的保存对话框中选择HTML和图像。 另外要注意一下左侧的图像品质，一般定在30－50即可。如果品质过高图片的质量会增大，但是在视觉效果上面不会有很明显的变化。 保存后，会有一个文件夹（里面是切散的图片）和一个页面，这样，就把一个页面切散了。下面我们只要把切散的图片拼在一起就可以了。 附：页面拼合常用代码 基本标签 　　创建一个HTML文档 html/html 　　设置文档标题以及其他不在WEB网页上显示的信息 head/head 文档标题：将文档的题目放在标题栏中 title/title 　　设置文档的可见部分 body/body 　 body属性： 　　设置背景颜色，使用名字或十六进制值 body bgcolor=? 　　设置文本文字颜色，使用名字或十六进制值 body text=? 　　设置链接颜色，使用名字或十六进制值 body link=? 　　设置已使用的链接的颜色，使用名字或十六进制值 body vlink=? 　　设置正在被击中的链接的颜色，使用名字或十六进制值 body alink=? 格式排版 　　黑体字 b/b 　　斜体字 i/i 　　设置字体的颜色，使用颜色名字或十六进制值 font color=?/font 　　创建一个新的段落 p 　　将段落按左、中、右对齐 p align=? 属性：left（居左）/center（居中）/right（居右） 　　插入一个回车换行符 br 链接 　　超链接 a href=URL需要加链接的文字/a 　　一般在a href=”链接”后面里面都要加一个target=”_blank”的属性，为在新窗口打开链接。 　　发送电子邮件的链接 a href=mailto:EMAIL需要加链接的文字/a 　　创建一个位于文档内部的靶位 a name=NAME/a 　　创建一个指