确定网页版式以及页面布局结构
大家已经知道网页设计的草图怎样画了，那么我们有了这个草图结构以后就开始逐渐的细化我们的网页效果图，当然这些部分是设计人员的事情。
我们的课程是以html 和网页布局为主，运用软件工具制作出我们想要的页面。之所以让大家了解Fireworks 的基本功能和常用操作以及元素制作完全是为了我们制作网页服务的。
关于Fireworks 或者其他制图工具的细节应用和各种图片的绚丽效果处理等内容不作为我们本课程的重点。
给大家布置的筹划一个网站，有的同学已经开始选择适合自己网站的结构版式了。当然如今的网页版式千变万化，上次给同学们发的版式作为版式布局的参考，大家可以根据自己的需求进行各种灵活的变化。
比如说，同学们选择了这样一个布局结构，那么我们来分析下这个布局结构怎样来实现；
首先明确：我们所用来布局的div 是个区块元素，那么区块元素的特性就是占满整行区域。 那么，我们这个版式的布局我们先分析最外层的div 是怎样的结构。A 导航区域是占满整个区域的，那么这里就是一个带有高度的div 然后经过margin 居中来实现我们所需要的效果。同理，紧接着A 区域下面的B 区域也是同样的需求效果。 那么下面的区块我们不能通过一个简单的div 实现，但是也在网页中需要一个区域来使得这个大块进行居中，那么我们就先写一个div 。
由此我们已经得到了三个基本的div 结构，我们把这三个最外层的div 统一用A 来表示，那么此时的结构就，如下：
给A1、A2、A3加上不同的背景色我们可以再html 所得到的如图（背景颜色自定义）：
当然，同学们也可以将A1、A2合并在header 里面，具体怎么用大家自己选择。
接下来我们分析A3区域里面的的区块如何实现。 可以发现在原版式图中我们这里的区域中，B 区域占据了左侧纵向的整个区域，其他部分在右侧，那么我们这个时候可以认为左边的B 区域是一个div ，右边的其他区域在一个大的div 里面，然后通过左右浮动实现上面所需要的区域划分，分析如图：
这是我们可以将部分div 加上背景色 (A1、A2、B1、B2加上背景色，由于A3我们是用来作为区域控制的div 不用于直接显示，所以删除A3的背景色) ，我们已经布局好的结构如下图表示（颜色自定义）
这个时候我们就剩下灰色区域（B2）里面的结构的布局了，那么我们通过分析得知，里面的区域可以横向的分为三块，这样我们可以进行下面的布局结构：
那么最后：C2和 C3内部的图片或者小区块也是通过在C2、C3内部浮动或者定位来实现的，那么同理我们也很容易分析了。
另见附件结构思路图.png 文件
确定网页版式以及页面布局结构
大家已经知道网页设计的草图怎样画了，那么我们有了这个草图结构以后就开始逐渐的细化我们的网页效果图，当然这些部分是设计人员的事情。
我们的课程是以html 和网页布局为主，运用软件工具制作出我们想要的页面。之所以让大家了解Fireworks 的基本功能和常用操作以及元素制作完全是为了我们制作网页服务的。
关于Fireworks 或者其他制图工具的细节应用和各种图片的绚丽效果处理等内容不作为我们本课程的重点。
给大家布置的筹划一个网站，有的同学已经开始选择适合自己网站的结构版式了。当然如今的网页版式千变万化，上次给同学们发的版式作为版式布局的参考，大家可以根据自己的需求进行各种灵活的变化。
比如说，同学们选择了这样一个布局结构，那么我们来分析下这个布局结构怎样来实现；
首先明确：我们所用来布局的div 是个区块元素，那么区块元素的特性就是占满整行区域。 那么，我们这个版式的布局我们先分析最外层的div 是怎样的结构。A 导航区域是占满整个区域的，那么这里就是一个带有高度的div 然后经过margin 居中来实现我们所需要的效果。同理，紧接着A 区域下面的B 区域也是同样的需求效果。 那么下面的区块我们不能通过一个简单的div 实现，但是也在网页中需要一个区域来使得这个大块进行居中，那么我们就先写一个div 。
由此我们已经得到了三个基本的div 结构，我们把这三个最外层的div 统一用A 来表示，那么此时的结构就，如下：
给A1、A2、A3加上不同的背景色我们可以再html 所得到的如图（背景颜色自定义）：
当然，同学们也可以将A1、A2合并在header 里面，具体怎么用大家自己选择。
接下来我们分析A3区域里面的的区块如何实现。 可以发现在原版式图中我们这里的区域中，B 区域占据了左侧纵向的整个区域，其他部分在右侧，那么我们这个时候可以认为左边的B 区域是一个div ，右边的其他区域在一个大的div 里面，然后通过左右浮动实现上面所需要的区域划分，分析如图：
这是我们可以将部分div 加上背景色 (A1、A2、B1、B2加上背景色，由于A3我们是用来作为区域控制的div 不用于直接显示，所以删除A3的背景色) ，我们已经布局好的结构如下图表示（颜色自定义）
这个时候我们就剩下灰色区域（B2）里面的结构的布局了，那么我们通过分析得知，里面的区域可以横向的分为三块，这样我们可以进行下面的布局结构：
那么最后：C2和 C3内部的图片或者小区块也是通过在C2、C3内部浮动或者定位来实现的，那么同理我们也很容易分析了。
另见附件结构思路图.png 文件