FW设计资源小集

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

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

一、Titile+List篇
网页内容的标题部分Title，一般是与内容list相结合来设计。在风格上寻求了统一，甚至可以用简单的几“笔“就可以妙笔生花。
常见的Title从左到右是：标识箭头，标题文字，“More(更多)"。然后是背景色/图，*边框（与内容结合的话，就没有单独的边框）。
1.Title的常见元素和表现风格
这里有几种常用到的Title效果总结：
注意几点：1.文字大小，用色，文字和图片这间的距离。这是一种设计技巧，我这不是专家的，就不瞎扯。和我一样没有专业常识的，工作中经验会告诉你怎样放着才好看的。
2.用好了背景框，可以达到很好的效果，但是不能滥用。你别看他放在下面这些图片都蛮好看的，可是用到网页中，还是要适当的和页面效果进行搭配的。
单色Title

图标打头

图和线

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

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

Title除文字设计图和内容表示图之外,用到最多的指示图有以下几种（部分源文件）：

（2）标题文字
很简约的方法就是font-size:14px;font-weight:bold;。当然，为了效果更好，可以制成效果文字图，与图标一起切。
关于文字效果的制作，在以前的“文字效果总结”中有详讲。
（3）更多
这里提供几个英文的more，在很多中文网站也是适用的。因为大多数人一见这个"more“就知道是做什么用。而英文字可以让更矮一些，在行距上使title显得简洁。

（4）背景+边框
我们常用到的几种背景方案：单一色、纵向简单的渐变、渐变+水晶效果、对角线水印、角部印花。以下是制作源码。

边框就多着了。看下面的"3.Title和内容的结合"其中去启示吧

2.盒子内容：List
内容清单无非就是这几个元素：point（点、编号、指示图标），*分类名（次要，放在首页时，文章所属的子分类），单个清单标题，New（最新的文章），发表时间，li下框线（一般为浅色直线或虚线）。
在上面的“各种盒子”已经有一些样式，这里接合CSS网页制作，来提供一些现有方案。
建议使用ul,li来显示条目链接，这样比较有条理性，而且也符合Web2.0的制作要求（我指的不是用了什么标记，而是指标记形式表现了内容：链接条目清单）。当然，网页中还没用到XHTML的话，用ul li对程序员也是福音，代表结构也更好些。
（1）point一般用list-style-type来写（有多种type，详情请查阅css手册）。上次有人问到list-style的颜色怎么改变，其实，就是ul li的文本色（color:#aaa）。
但在不同的浏览器下，效果会不一样，建议一般用背景图片（ul li{background:url() no-repeat left 48%; padding-left:15px;}）。
（2）分类名通常用中刮号"[...]"刮起来，或是加粗，又或是链接变色。放在point和text之间。变色放在前面效果更好。

（3）清单标题是条目文本和链接，这个没什么好说的，链接样式一般是"ul li a(顺序是link,visited,hover,active)<谢谢26楼>"
（4）New最新的两、三篇文章，或是最热(Hot)的几篇。有时会放一个图标或是把point变色，又或是把标题变色，有时是一个很小的图标。这些图标的高度通常低于文本高度，即12px以下，矢量图最好是实边，适应任何背景环境。不管图有多简洁，一定要用与文本不同的高亮或突出的色表示醒目。这里提供几种收集来的图片方案。

（5）发表时间一般喜欢放在最右边，或是代替分类名，放在标题的前面。颜色会比较浅，无链接状态。ul li中处理放在右边时间，通常是用<span>标记括起来，然后CSS用ul li span{float:right;}将时间向右对齐。
（6）下框线，CSS里是用ul li{border-bottom:1px #ccc dotted;}这样的下虚线来表示，可是看多了，觉得页面有点呆板，那么就会用到背景图。这里有可能跟li的point背景图相冲突。一般使用两种解决方案：
一是把point和line放在同一张背景图里面，作为li的背景。这样图会大一些，但可以达到精确。
二是把point继续作为li的左边背景图（背景色是默认的透明），而line的背景虚线，作为ul的背景铺平。这时候，要注意线的切法，线的高度，要刚好与li的物理高度（包括了padding、border+margin，虽然margin不属于li本身的高度）相等。
关于下划线虚线在FW中或种样式，我在去年的小文"FW中特别的虚线"中有简单的介绍。