使用photoshop设计网页布局.pdfVIP

使用Photoshop设计网页布局

网页设计标准尺寸:

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决

定。

2、1024*768下，网页宽度保持在1002以内，如果满屏显示的话,因为现在浏览器经常装有

工具条或其它一些插件,所以高度不太好计算,一般高度是612-615之间,就不会出现垂直滚动

条,作为一般企业满屏的还是相对少些，除非你的Flash全屏的。

网页设计分辨率：72px

1.规划：不管是乔客，还是用动易、风讯，我们都应该考虑两个问题：

a、版面要分出头、中、底三个部分。

b、中间部分要考虑两种情况，一是两栏（乔客左窄右宽，动易左宽右窄），二是一栏，

两种情况显示不能变形。有些朋友想每个板块的头部不一样，这也是可以的，你可以在

程序代码中做文章，那是编程的问题，按下不表。

如果我看到别人的版面想拿下来，那就做个截图，建立一个photoshop文件，把截图放

在最底层，作为最初的草图。

2、制作。

a、即使不用别人的版面，最好也还是找一个同类系统的截一个图，放在最底层。

拉三根垂直辅助线：左边线，中间虚线位置，右边线。

b、建立头、中、底三个图层组。有些人用photoshop不喜欢建立图层组，这不是好习

惯，一个版面，少则几十层，多则上百层，不分开图层组管理就很，影响工作效率，

更影响多人合作。

c、制作的时候最好尽量把文字内容也放上去，可以更接近实际效果，等切图的时候隐

藏这些图层。

d、标题样式。一个版面除了头、底要特别制作外，中间部分应该考虑制作三种标题样

式：左栏、右栏、通栏，也可以统一风格。还要考虑表头背景、一些常用到的边框等。

把许多喜欢的边框样式用js作了一个样式包，随时调用，而标题样式我是使用

flash来做的一个样式，使用不同的参数调用，就可以有不同的样式和颜色，的时

候就改一个js文件和flash文件，做版面的时候会节省一些时间。

e、常用的按钮样式。常用的按钮其实不用在版面制作的时候做的，可以找回原来的按

钮一个一个修改。

f、特殊字体的使用。不管是还是内容，我都主张尽量使用样式表来控制字体样式，

但有些地方要用到不常用的字体，为了使所有的浏览者都能看到自己的设计原意，就要

把文字制作成，这一类的要适当使用，因为使用了，对搜索引擎的是

无益的。

g、像素图。尽量使用像素处理，例如一些边框、小图标，会使的字节数大大减少，

显示快，容易透明处理。

3、切图切图要在imageready中完成，先要把完稿的作品保存，最好还要做一个备份，

然后跳转到imageready工作。

a、有朋友切图时要合并图层，