图3.3 页面版式
④ 色彩：彩色网页比单色网页更具吸引力；色彩本身具有象征作用。
18
第三节 整体风格设计
一、页面属性设计
页面中的整体格式和布局都在stley.css中，其中body设计如下: body {
margin: 0; padding: 0; line-height: 1.7em; font-family: \宋体\font-size: 12px; color: #d1c7ba;
background: #372e23; }
各个页面的字体为：宋体、大小为12像素，字体颜色#d1c7ba。背景颜色我采用#372e23， #372e23这种背景色它与其他任何颜色的搭配都比较合适，不显花哨，简洁大方。Body与页面的边距为零。
二、色彩搭配
打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，必须要高度重视色彩的搭配。
本网站的搭配主打为：白、灰、蓝、三种颜色。白色代表纯洁、纯真、朴素、神圣、明快。灰色也是一种很大器的颜色，几乎能与所有的颜色相辅相成。 \灰色有种很内敛、很隐约的'暗香袭人'的意味\。蓝色是博大的色彩，天空和大海这辽阔的景色都呈蔚蓝色。蓝色是永恒的象征，它是最冷的色彩。纯净的蓝色表
19
现出一种美丽、文静、理智、安祥与洁净。采用这种色彩搭配给游客留下深刻的印象。
三、连接效果
对于一个页面不仅要设计其字体和其他风格，还要有链接效果，使页面更加的生动，stley.css中的链接效果如下：
a, a:link, a:visited { } a:hover {
color: #009900;
text-decoration: underline; color: #0074c5; text-decoration: none;
}页面的链接效果设置为：已经访问的连接样式字体颜色为白色，无下划线，字体加粗为正常值；当有鼠标悬停在链接上样式字体颜色为#FFFF33，有下划线。
四、导航设计
网站的导航栏目可以让用户对网站的内容及信息一目了然。导航分为：首页、新闻、博客、素材、联系我们。首先采用div布局，里面嵌套ul形式然后相关css部分。相关代码如下：
Div布局部分：
20
五、细节设计
1PX凹陷西线的设计给网页带来了分成次的美观、图片的选择给人醒目、大方的感觉、按钮的设计给顾客赏心悦目的感觉，搜索工具的设计方便了游客轻松的实现网页功能的搜索。留言效果方便了直接与顾客交流的机会，提高了网站水平。
第四节 首页设计
一、DIV分布和概述
由于个人完整给人的形象应该是专业、大方，所以主页的设计和布局我采用大方简单又不失活泼的原则。首页整体用1个大的DIV里面包含两个小的（上下个一个）DIV。
Div设置效果为：总体都设置了宽度，居中格式，背景颜色及背景图片，其他还有内边距，高等。
内容界面是一个网站走向成功道路上必不可少的因素。网站的内容代表着一个好网站的素质和形象，所以应该表现的大气、端庄而且精细。还更要表现出一个网站应该有的朝气和活力。因此我首先选中色彩搭配比较大方，整体布局比较清晰简洁的内容模式。在首页的版面，先是用Photoshop对网站模板进行切片，然后用DIV+CSS进行排版。首先自然映入颜面的是logo设计，一个特殊于类似酒瓶的图标给我们是用心品，只有我们心与心交流加上我们实力制作给网站设计达到一种酒醉的境界，页面效果如下图3.4所示：
21
图3.4 页面效果
根据因为浏览者在阅读时候经常采用从上到下，从左到右的习惯，主体内容中，我将“公司简介”和“博客帖子”各自放一边，“logo”放在了上面的位置
22
使用div+css开发个人网站毕业设计
