《切页面速成手册》由会员分享，可在线阅读，更多相关《切页面速成手册（9页珍藏版）》请在金锄头文库上搜索。
1、切页面速成手册当设计把页面制作完成之后，剩下的工作就是由我们来切页面了。所谓切页面，实际上，是由把设计制作的 PSD 效果图切成若干张小图片和把这些小图片拼合在一起形成最终网页形式这两部分组合而成。简单的说，切页面就好比是玩儿拼图，我们把一幅画打散，然后再把碎片按原样拼起来。页面只有被切过之后，才能够被我们随心所欲的进行文字方面的编辑。许多人认为切页面很难，说自己不会切。其实，这个并不像想象中那么难，也许只是因为大家拿到页面后感觉无从下手，所以才会认为它难。所以切页面的重点主要就在于对于页面结构的把握。下面就进入我们切页面的第一步分析页面的整体构架。页面整体构架看到一个页面，首先要知道它是由哪
2、几部分组成的。一般的页面都可以广泛的划分为由头部、中部和尾部组成。 （如下图）这样，我们至少可以把页面分为三个部分来处理，即头部、中部和尾部。下面我们对中间部分进行一下分析。页面的中间部分无非分为左中右、左中、中右几种形式。下面我们就最常见的结构来说明一下。上面这张图是典型的左中右结构，它把页面分为了三个部分。有人可能会说，这种页面结构和我切页面有什么关系？下面我来说说页面结构的重要性：我们在切页面的时候，第一步要根据页面的结构来确定表格，如上图，这个地方可以先做出一个一行三列的表格，只有在确定了具体结构之后，再进行对各个部分的细节处理，如背景、表格边框、图片、文字等工作才会变得容易。 （具体
3、的表格制作、插入图片等我们将在后面介绍）如果对于结构的分析不够全面和准确的话，很容对我们后期的工作易造成麻烦。比如图，如果把页面做成上下两行，现在看来不是不可以，但是如果左边的焦点快报再多出一行，则会出现页面撑开的现象。如果把表格确定成一行两列，那么在延展性上面就会比上下两行要好得多。上面我们了解到页面的基本结构，那么在 photoshop 中，我们应该怎样确定页面结构呢？这就需要用上 photoshop 中的一个功能辅助线。辅助线辅助线在我们切页面的时候，可以帮助我们确定页面结构，加大切片工具的易用性。调用辅助线的方法：首先在视图中把标尺调出来然后从标尺处点中鼠标向页面中拖。你会看到一条线，
4、把它拖到你想要放的地方松开鼠标即可。一条辅助线就这么产生了。如下图当把辅助线都确定好之后，我们就要开始进行最关键的部分了拿起刀子，准备开切！切片工具其实，如果说起开始来切，反而到很容易了，实际就是把尺寸比较大的图片分成一小块一小块的，然后拼合起来。头部、尾部、和中间一些花边都可以切成小图。从下图处点选切片工具点中后，鼠标会编成相应的样子，在页面要切图的地方，把按住鼠标不放，选择截取范围，选好合适位置后松开鼠标，一个切片就好了。重复上述动作，做完所有切片。等图片全部切完之后，点击文件中的存储为 web 格式在其中的保存对话框中选择 HTML 和图像。另外要注意一下左侧的图像品质，一般定在 305
5、0 即可。如果品质过高图片的质量会增大，但是在视觉效果上面不会有很明显的变化。保存后，会有一个文件夹（里面是切散的图片）和一个页面，这样，就把一个页面切散了。下面我们只要把切散的图片拼在一起就可以了。附：页面拼合常用代码基本标签创建一个 HTML 文档 设置文档标题以及其他不在 WEB 网页上显示的信息 文档标题：将文档的题目放在标题栏中 设置文档的可见部分 属性： 设置背景颜色，使用名字或十六进制值 设置文本文字颜色，使用名字或十六进制值 设置链接颜色，使用名字或十六进制值 设置已使用的链接的颜色，使用名字或十六进制值 设置正在被击中的链接的颜色，使用名字或十六进制值 格式排版黑体字 斜体字
6、 设置字体的颜色，使用颜色名字或十六进制值 创建一个新的段落 将段落按左、中、右对齐 属性：left（居左）/center（居中）/right（居右）插入一个回车换行符 链接超链接 需要加链接的文字一般在 后面里面都要加一个 target=”_blank”的属性，为在新窗口打开链接。 发送电子邮件的链接 需要加链接的文字 创建一个位于文档内部的靶位 创建一个指向位于文档内部靶位的链接 图形元素添加一个图像 排列对齐一个图像：左中右或上中下 设置围绕一个图像的边框的大小 加入一条水平线 设置水平线的大小（高度） 设置水平线的宽度（百分比或绝对像素点） 表格创建一个表格 开始表格中的每一行 开始一
7、行中的每一个格子 属性设置围绕表格的边框的宽度 设置表格格子之间空间的大小 设置表格格子边框与其内部内容之间空间的大小 设置表格的宽度（用像素值或文档总宽度的百分比） 设置表格格子的水平对齐（左中右）默认为左设置表格格子的垂直对齐（上、下）默认为中or 表格格子横向合并所占的列数（缺省为 1） 表格格子纵向合并所占的行数（缺省为 1） 表单（以下代码只是放到页面中的一种表现形式）表单的开始和结束标记 创建一个下拉菜单下拉菜单的内容注：如果有多条内容，则反复用内容即可创建一个文本框区域，列的数目设置宽度，行的数目设置高度 创建一个复选框，文字在标签后面 创建一个单选框，文字在标签后面 创建一个单行文本输入区域，size 是以字符计算的宽度 创建一个 submit（提交）按钮 创建一个使用图象的 submit（提交）按钮 创建一个 reset（重置）按钮 俗话说的好：师父领进门，修行在个人，希望广大革命同志努力加油，苦练切页面技术，最终成为下刀快、准、狠的小张飞刀、小刘飞刀、小李飞刀 _ 丢丢熊
