网页版面布局

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