第二节 首页页面设计
有了基于准备之后的网站策划，就可以开始进行页面设计了，页面设计主要包括创意、色彩和版式三个方面。创意会使网页在众多的竞争对手中脱颖而出； 色彩可以使网页获得生命的力量；板式则是和用户沟通的核心，所以这三者缺一不可。
一般的网站都需要这样一些版块站名称（logo）、广告区，导航区、新闻区、友情链接和版权等版块。这些版块又可以称之为模块。选择哪些模块，实现哪些功能是否需要添加其他模块都是首页设计制作时首先需要确定的，下面我们就开始具体的首页设计制作工作。
一、结构分析
根据需求可以知道，在页面上部要有logo和导航，接下来使banner，中间部分的左侧显示若干次要的栏目，右侧则显示部分文章的内容及作品展示，页面最底端为页脚区域，显示一些版权信息。很明显可以用四行两列的布局方式来安排页面内容。如下图：
图 4.1 页面布局安排
17
二、风格定位
打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，必须要高度重视色彩的搭配。
本网站的搭配主色为：白、淡蓝、灰色、三种颜色。白色代表纯洁、纯真、朴素、神圣、明快。淡蓝色代表热情、活泼、热闹、温暖、幸福、吉祥。灰色代表崇高、坚实、严肃、刚健、端庄，充分代表了一个企业应有的气质和形象。给客户留下深刻的印象。
三、页头设计
网站的页头主要分为两个部分。一是Logo，logo使一张准备好的图片，直接放置在头部容器左侧，调整好位置；二是导航条，网站导航条因为有立体感效果，因此它需要脱离文本流，因此在控制样式的时候要用定位，相对于文本流的定位。网站的导航栏目可以让用户对网站的内容及信息一目了然。导航分为：首页、作品展示、设计理念、企业策划、关于我们、联系我们。导航采用的是ul li布局，然后再用a标签对其他相关网页进行链接，设计和操作上都非常简单。相关代码如下：
18
四、网站内页结构设计
作品展示---support.html 设计理念---about.html 企业策划---blog.html 联系我们---contact.html
五、中间内容设计
根据 浏览者在阅读时经常采用从上到下，从左到右的习惯，主体内容中，将“优秀网站案例”靠左边放，这样能更好地吸引浏览者的眼球，同时也体现公司的专业、能力等。优秀网站案例采用网页图片切换的形式展现在首页中，使整
19
个首页处于于静于动的画面。右边则是创意设计公司的设计理念。
图 4.3 中间部分
六、页脚
图 4.4 底部版权图 图 4.5 首页整体图
20
第三节 内页设计
其他页面的导航和页面属性都是采用首页的导航和body属性。
21