网页版面布局.pptVIP

第1步: 规划 版面要分出头、中、底三个部分； 中间部分: 分栏,一栏、两栏、三栏； 在纸上先画布局； 找参考版面，Alt + Print screen,新建立一个photoshop文件，把截图放在最底层，作为最初的草图。 第2步: 制作 在photoshop建立图层组； 把文字内容也放上去，可以更接近实际效果，等切图的时候隐藏文字图层。 第2步: 制作 像素图的使用 例如一些边框、小图标尽量像素处理，会使图片的字节数大大减少，显示快，容易透明处理。 常用的按钮其实不用在版面制作的时候做的，可以找回原来的按钮图片作修改。 收集按钮 不管是链接还是内容，应尽量使用样式表CSS来控制字体样式. 当要用到不常用的字体时，为了使所有的浏览者都能看到自己的设计原意，就要把文字制作成图片，这一类的图片要适当使用，因为使用了图片，对搜索引擎的访问是无益的。 第3步:切图- PS 的使用 图层选区: load selection, create slices from selection 纵向还是横向切图? 使用图层定位还是使用表格定位? 根据色彩需要切图 不要把整个版面同时切图,根据色彩需要切图. 例如一个版面头部的切片，调色板可能要256种颜色，而中间和底部只要18色就能搞定，如果同时切片，就变成同一个调色板，中间的部分也使用了256色，就会使文件大小增加，但如果折中，让头部256色减少为128色或32色，又会影响效果。所以要分别处理； 方法是在photoshop中分别选择头部、中间（中间有时候还可以分出几个板块）、底部，裁切，另存为几个不同文件，然后切图。 Gif VS. Jpg gif格式和jpg格式颜色有差别，同一部分的切图使用同样的格式； 颜色较少、较单纯的图片，文字图片，从矢量图转过来的小图标、边框背景等图片，一般用gif格式比较好，文件小，颜色不失真； 颜色较丰富，摄影图片、三维软件做出来的彩色立体文字，一般用jpg格式。 链接的图片 有链接的图片处理方法很多，你可以每个链接切一个图片，也可以切一个大图，在网页编辑器里面编辑的时候添加链接热区。 现在更好的做法是使用文本链接，把图片变成背景就行了。 Flash的使用 在flash中使用字体和矢量图占用的字节小，动画效果流畅。 要注意的是flash里面的图片，可能会与页面其他图片的色调有些差异，位置也有一个像素的位移，一定要小心处理。 * 网页版面布局 网页版面布局 网页版面布局 网页版面布局 网页版面布局 第2步: 制作 按钮的设计 网页版面布局 第2步: 制作 特殊字体的使用 网页版面布局 网页版面布局 网页版面布局 网页版面布局 网页版面布局 网页版面布局