15.3 页面布局设置

在制作之前，先对网页的首页布局进行设置。

15.3.1 构画页面布局草图

本案例采用通用的上、中、下结构，头部分为两行，一行为导航条，另一行为Banner条。中间采用左右结构，左侧放置余医生的个人说明和信息搜索及信息点击排行，右侧为正文部分，放置三类信息内容。下部放版权说明，如图15.4所示。

图15.4 网站布局示意图

15.3.2 设计界面

规划好页面布局以后，就可以在Photoshop中设计界面的大致样图。在此需要强调的是，做网页设计不同于平面设计，是不需要将所有的细节均在Photoshop中全部体现出来的，有细节的部分可以在制作过程中随时处理，因而不需要在整个界面的处理上花费过多的时间，而且网页中，好多部分的色调是用颜色值来设置，而不是所有的地方都用图片来填充。

在切图之前要注意几个问题，这也是作者平时切图时的一点心得，希望能给大家一点参考。

● 切图前将Photoshop中的图片和层另存一个文件，画好水平线以后再切换到ImageReady中切图，这样做的好处是让图片的质量达到最好。

● 使用图像的压缩软件将图像压缩，尽量保证图像质量的同时减小字节数。

● 尽量减少图像的个数，将有些图尽量集中到一个地方，不要过碎，以方便以后的更新。

● 使用重复图像作为背景，减少网页的大小。

● 可以使用颜色值，难控制的区域就尽量不用图像。

在切图之前的效果图如图15.5所示。