学习 FW 有两年了，投入工作中使用也有一年多。虽然没有多少业余时间去专门研究过，也不是专门给人家接单做网站的工作，但做门户、娱乐性的网站也有不少了，总还是能从软件的应用中，综合其他的网页模仿中有些总结的。希望结合我的总结和理解，给使用 FW 设计网页的朋友一些帮助。或是说给新人一些启发。
以下内容，基于门户网站首页。不过大部分也该适应于多类页面的。
结构上来说，应该先从 top 的 logo，到 navi,banner，然后才到 title。不过, 我也不知道我总结和集合的东西能不能真的给大家帮助, 所以, 就先从我最想说的说起。（之前已经有过一篇“文字效果总结”）
一、Titile+List 篇
网页内容的标题部分 Title，一般是与内容 list 相结合来设计。在风格上寻求了统一，甚至可以用简单的几“笔“就可以妙笔生花。
常见的 Title 从左到右是：标识箭头，标题文字，“More(更多)"。然后是背景色 / 图，* 边框（与内容结合的话，就没有单独的边框）。
1.Title 的常见元素和表现风格
这里有几种常用到的 Title 效果总结：
注意几点：1. 文字大小，用色，文字和图片这间的距离。这是一种设计技巧，我这不是专家的，就不瞎扯。和我一样没有专业常识的，工作中经验会告诉你怎样放着才好看的。
2. 用好了背景框，可以达到很好的效果，但是不能滥用。你别看他放在下面这些图片都蛮好看的，可是用到网页中，还是要适当的和页面效果进行搭配的。
单色 Title
（1）图标
FW 制作图标的教程已经很不鲜见，随便找两个放一下
：
图标有单色，多色，水晶，矢量，像素，线条等多种风格。我做的实在不多，而且水平不咋地。随便拿几个来献一下丑。
以下提供几个我在工作中做的小图标源文件：
（2）标题文字
很简约的方法就是 font-size:14px;font-weight:bold;。当然，为了效果更好，可以制成效果文字图，与图标一起切。
关于文字效果的制作，在以前的“文字效果总结”中有详讲。
（3）更多
这里提供几个英文的 more，在很多中文网站也是适用的。因为大多数人一见这个 "more“就知道是做什么用。而英文字可以让更矮一些，在行距上使 title 显得简洁。
（4）背景 + 边框
我们常用到的几种背景方案：单一色、纵向简单的渐变、渐变 + 水晶效果、对角线水印、角部印花。以下是制作源码。
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 中特别的虚线 " 中有简单的介绍。3.Title 和内容的结合
和内容的结合，重在结构和用色。不一定要有多震撼，多花俏，根本你需要的风格（页面的整体风格，和网站的性质）来确定线条。
在白色区域的简单构造美
正文完
