学习FW有两年了，投入工作中使用也有一年多。虽然没有多少业余时间去专门研究过，也不是专门给人家接单做网站的工作，但做门户、娱乐性的网站也有不少了，总还是能从软件的应用中，综合其他的网页模仿中有些总结的。希望结合我的总结和理解，给使用FW设计网页的朋友一些帮助。或是说给新人一些启发。

以下内容，基于门户网站首页。不过大部分也该适应于多类页面的。
结构上来说，应该先从top的logo，到navi,banner，然后才到title。不过,我也不知道我总结和集合的东西能不能真的给大家帮助,所以,就先从我最想说的说起。（之前已经有过一篇“文字效果总结”）

Titile篇
网页内容的标题部分Title，一般是与内容list相结合来设计。在风格上寻求了统一，甚至可以用简单的几“笔“就可以妙笔生花。

数据挖掘研究院

常见的Title从左到右是：标识箭头，标题文字，“More(更多)"。
这里有几种常用到的Title效果总结：
注意几点：1.文字大小，用色，文字和图片这间的距离。这是一种设计技巧，我这不是专家的，就不瞎扯。和我一样没有专业常识的，工作中经验会告诉你怎样放着才好看的。
2.用好了背景框，可以达到很好的效果，但是不能滥用。你别看他放在下面这些图片都蛮好看的，可是用到网页中，还是要适当的和页面效果进行搭配的。
单色Title


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" /> 数据挖掘研究院


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" /> 数据挖掘研究院
图标打头


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" /> 数据挖掘研究院


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />
图和线


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" /> 数据挖掘实验室

和内容的结合
和内容的结合，重在结构和用色。不一定要有多震撼，多花俏，根本你需要的风格（页面的整体风格，和网站的性质）来确定线条。
在白色区域的简单构造美


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />

数据挖掘研究院

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />
神奇的背景图和背景色（更适合娱乐、休闲性质的风格板块）


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" /> 数据挖掘研究院


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />
各种各样的盒子


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" resized="true" /> 数据挖掘研究院


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />
用到一万年的册子式盒子：

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" resized="true" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" /> 数据挖掘研究院
百用不烦的针夹定点盒子：


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" /> 数据挖掘研究院


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" /> 数据挖掘实验室


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />

关于图标
FW制作图标的教程已经很不鲜见，随便找两个放一下：

图标有单色，多色，水晶，矢量，像素，线条等多种风格。我做的实在不多，而且水平不咋地。随便拿几个来献一下丑。
以下提供几个我在工作中做的小图标源文件：


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" /> 数据挖掘研究院


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />

数据挖掘研究院

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />
Title除文字设计图和内容表示图之外,用到最多的指示图有以下几种（部分源文件）：


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt="点击在新窗口查看全图 CTRL+鼠标滚轮放大或缩小";} }" border="0" />

今天到此，以后再添其他的^_^