一．网站设计之前预先进行规划

　　网站的架构和功能的定义工作愈早开始愈好。最好在你打开电脑之前就先在脑中想好。

　　现在的网站林林总总，包罗万有，我们如何定义分类呢？其实我们只需将网站分为两大类。明确你要设计的网站属于哪种类型将有助于你更好地进行规划。

设计艺术类网站 　　人们到这类网站来，是为了寻求一些很酷的东西、一些与众不同的东西，或是为了来开心、或是为了要学点甚么。对这类网站来说，设计可能跟内容本身一样重要（有时甚至比内容更重要）。第一眼就能吸引浏览者的注意是这类网站的目标。在这类网站上，变化多端和出人意表的设计更容易为人接受。在他们的网页上，设计新颖，色彩运用大胆。网站设计者更关心的似乎是给浏览者提供视觉上的享受。而这类网站一般以艺术，时尚娱乐网站居多。

资讯型网站

　　这类网站的主要目的是发布有用的资讯。一般来说，这类网站主要在内容上下功夫。他们的目标是为用户提供最新最丰富的内容。而这类网站的用户一般来说只想以最快的速度和最简单的形式获得他们想要的资讯。他们所期望的并不是什么不同寻常的令人眼花缭乱的设计──而更愿意看到密密麻麻的内容，当然，如果两者能兼顾最好。比如goeway网站就是典型代表。它的整个网站看起来就象是一本可以更新的百科全书。对这类网站来说，过多的动态效果只会分散用户的注意力。最重要的是各重要部分得安排要有逻辑性，并通过合理的排版，规划结构和加入程序的支持使用户使用起来方便。前后一致的版面、导航元件和设计风格亦可避免迷惑读者。

     二、 网页的构成和布局

　　不同主题的网站对网页内容的安排会有所不同，但大多数网站首页的页面结构都会包括网页标题、网站LOGO、菜单栏、功能列表区、主内容区和状态栏(如下图)，其他页面不需要设置如此复杂了，一般由页面标题、网站LOGO、菜单栏、主内容区和状态栏等构成。

搞网站设计不是把所有内容放置到网页中就行了，还需要我们把网页内容进行合理的排版布局，以给浏览者赏心悦目的感觉，增强网站的吸引力。在设计布局的时候我们要注意把文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。我们常见的布局结构有 “同”字形布局、“国”字形布局、“匡”字形布局、“三”字形布局和“川”字形布局等。

　　1. “同”字形布局：所谓“同”字形结构，就是整个页面布局类似“同”字，页面顶部是主导航栏，下面左右两侧是二级导航条、登录区、搜索区等，中间是主内容区，如http://www.china-channel.com。

　　2. “国”字形布局：它是在“同”字形布局上演化而来的，它在保留“同”字形的同时，在页面的下方增加一横条状的菜单或广告，如http://www.yesky.com。

　　3. “匡”字形布局：这种布局结构去掉了“国”字形布局的右边的边框部分，给主内容区释放了更多空间，内容虽看起来比较多，但布局整齐又不过于拥挤，适合一些下载类和贺卡类站点使用，如http://nj.onlinedown.net。

　　4. “三”字形布局：一般应用在简洁明快的艺术性网页布局，这种布局一般采用简单的图片和线条代替拥挤的文字，给浏览者以强烈的视觉冲击，如http://www.cphoto.com.cn。

　　5. “川”字形布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能，一般适用在栏目较多的网站里，如http://www.ezIT.com.cn。

　　在实际设计中我们也不要局限于以上几种布局格式，有时候稍作适当的变化会收到意想不到的效果，另外，平时在浏览网页时要多留心别人的布局方式，遇到好的布局就可以保存下来作为我们设计布局的参考。

　　关于第一屏 

　　所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，在800*600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px*435px，一般来讲，我们以这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。 

　　说了那么多，无非是一个标准的问题，其实接下来不用我说大家也能想到，第一屏当然要放最主要的内容，关键要知道的是，我们要对第一屏能显示的面积要有个估计，而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。

　　三、网站页面色彩的规划

　　网页中色彩的应用是网页设计中极为极为重要的一环，赏心悦目的网页，色彩的搭配都是和谐优美的。在确定网站的主题后，我们就要了解哪些颜色适合站点使用，哪些不适合，这主要根据人们的审美习惯和站点的风格来定，一般情况下要注意以下几点，1、忌讳使用强烈对比的颜色搭配做主色；2、配色简洁，主色要尽量控制在三种以内；3、背景和内容的对比要明显，少用花纹复杂的背景图片，以便突出显示文字内容。

　　如果你对颜色的搭配没有经验，可以使用Dreamweaver的配色方案来学习简单的配色，开启Dreamweaver，执行“命令→设定配色方案”进入配色选择窗口，这里提供了多种背景、文本和链接的颜色，可以根据你的需要来选择搭配。当然，你也可以使用一些专门的网页配色软件如“ColorImpact”、“三生有幸”等来辅助你搭配好网站的色彩。

　　温馨小提示：可上网浏览别人的网站并结合所学的内容慢慢体会网页布局和色彩搭配的技巧。