网页布局CSS Div.doc

用HYPERLINK"http://blog.csdn.net/jeefchen/article/details/3563258"\o"CSS网页制作布局实例教程"CSS设计网页布局
实例效果，如下图所示（HYPERLINK"http://www.webjx.com/css/cssshili/index.html"\t"_blank"浏览示例页面）：HYPERLINK"http://www.webjx.com/files/soft/ximicc2.zip"\t"_blank"本例素材及页面源代码下载

该实例的每个部分都有其侧重点，其中前三项关于素材制作与设计，要求有一定的Photoshop或Fireworks操作基础，这也是网页设计的必备基础技能。下面将学习如何一步一步的构建一个CSS页面。本例分成以下7个部分：首先是关于如何在PS/FW中制作导航按钮素材；接着针对的是内容背景、页面的整体布局以及顶部解析等，最后一部分是如何整合CSS和XHTML。
1.导航菜单素材的设计
有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。首先看一下完成的效果：

1）玻璃质感导航图片的制作
首先在Photoshop/FW中建立一个178x22像素的RGB空白文档，添加一个新图层命名为“按钮”，并用灰色#ECECEC进行填充。再新建一个图层命名为“高光”，在其上、左边缘各绘制1px的白色线条，你用画笔或单像素选取工具都可以。然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里使用大小20px透明度为50%的橡皮刷，如下图所示。

新建一个名为“网点”的图层，用1px的铅笔工具在适当的位置绘制几个小点，示例中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序，如下图所示。

接着通过钢笔工具绘制路径创建选区，并在选区内填充#d6d6d6颜色，来模拟玻璃的质感效果。整个图片素材的制作过程虽然不是很复杂，但是最终效果看起来也不是很差。

2）鼠标经过导航时的翻转图片
创建翻转效果图片，只要简单地在原有素材基础上调整色调即可，关于文本的添加在这里就不细说了。我们可以为每个图层调整色调，在示例中主要使用了几种颜色：背景#BFE3FF、玻璃质感#A5D1F3、网点#E4001B，如下图所示。这部分涉及到一些PS/FW的基本知识，如果你不是很了解，建议先学习一些PS/FW的入门基础，毕竟Adobe合并了Macromedia之后，其旗下软件尤其是PS与网页设计的关联性已经越来越紧密了。要设计出优秀美观的网页，离不开这些软件的运用。当然颜色选择要根据你的需要，制作的方法大致相通，你也可以发挥创意进行更好的细节设计。
HYPERLINK"http://www.webjx.com/files/soft/glassy_menubutton.psd.zip"\t"_blank"下载本例素材源文件
2．背景图案及其配色
第二部分有两个重点：一是如何正确选择导航菜单中所涉及的颜色，虽然它没有很多的技术含量，但使用的颜色是否恰当，对后期整体效果会有很大影响；另外一部分是关于页面背景，侧重于制作背景图片素材时的一些细节问题。
前面介绍一种实现玻璃材质按钮的快捷途径，现在来学习颜色的选择问题。鉴于网站的风格存在差异，素材色系的选择也是界面设计阶段很重要的内容，网络上也有很多关于网页色彩的文章，大家可以依据其中介绍的一些基本知识进行参考，良好的色彩感觉需要很长一段时间来培养。
1）选择你的色彩体系
事实上，色系的选择会体现很多个人因素，毕竟每个人都会有各自的色彩偏好，你的选择也会彰显你的个人风格。没人能建议你“必须选择什么颜色”，这里也只能提供一些个人认为比较实用的意见，如下图所示。

（1）使用至少一种高饱和度、高辨识度的色彩，并以其色调定义站点的整体基调。把这个色彩运用在文本链接上，能使其更加显眼、引人关注。
（2）切记不要在一个页面中使用过多的颜色，这样只会让你的网页看起来很花哨繁杂。建议最好保持在三种之内：一个强调色和两个辅色。
在颜色的搭配上，不论是主色还是辅助色，都要善于通过它们明度变化来衍生更多的色彩，如果只是反复的使用三种以下的颜色未免会让人感觉单调，当然这也不是意味着颜色变化越多你的页面看起来就会越出色，仍然要关乎网站的整体风格和设计者对颜色的驾驭能力，如下图所示。

在PS/FW中人们可以通过在色相/饱和度（Ctrl+U）面板中，调整参数来调配颜色。事实上，上图中的几组颜色就是通过这种方法调制出来的，当然在这个面板中可以变化出很多颜色，具体哪个参数应该为什么值都没有硬性的规定，网络上有很