FW设计资源小集
学习FW有两年了，投入工作中使用也有一年多。虽然没有多少业余时间去专门研究过，也不是专门给人家接单做网站的工作，但做门户、娱乐性的网站也有不少了，总还是能从软件的应用中，综合其他的网页模仿中有些总结的。希望结合我的总结和理解，给使用FW设计网页的朋友一些帮助。或是说给新人一些启发。;-)以下内容，基于门户网站首页。不过大部分也该适应于多类页面的。
结构上来说，应该先从top的logo，到navi,banner，然后才到title。不过,我也不知道我总结和集合的东西能不能真的给大家帮助,所以,就先从我最想说的说起。（之前已经有过一篇“[url=http://bbs.blueidea.com/thread-2679420-1-1.html]文字效果总结[/url]”）
[color=Red][b]一、Titile+List篇[/b][/color]
网页内容的标题部分Title，一般是与内容list相结合来设计。在风格上寻求了统一，甚至可以用简单的几“笔“就可以妙笔生花。
常见的Title从左到右是：标识箭头，标题文字，“More(更多)"。然后是背景色/图，*边框（与内容结合的话，就没有单独的边框）。
[b][color=DarkRed]1.Title的常见元素和表现风格[/color][/b]
这里有几种常用到的Title效果总结：
注意几点：1.文字大小，用色，文字和图片这间的距离。这是一种设计技巧，我这不是专家的，就不瞎扯。和我一样没有专业常识的，工作中经验会告诉你怎样放着才好看的。
2.用好了背景框，可以达到很好的效果，但是不能滥用。你别看他放在下面这些图片都蛮好看的，可是用到网页中，还是要适当的和页面效果进行搭配的。
[b]单色Title[/b]
[attach]23206[/attach]
[attach]23207[/attach]
[attach]23208[/attach]
[b]图标打头[/b]
[attach]23209[/attach]
[attach]23210[/attach]
[attach]23211[/attach]
[b]图和线[/b]
[attach]23212[/attach]
[attach]23213[/attach]
[attach]23214[/attach]
[color=DarkGreen]（1）图标[/color]
FW制作图标的教程已经很不鲜见，随便找两个放一下:D ：
[url=http://bbs.blueidea.com/thread-2655343-1-1.html]Fireworks制作桌面图标[/url]
[url=http://bbs.blueidea.com/thread-2692573-1-2.html]FW制作一个水晶图标[/url]
[url=http://bbs.blueidea.com/thread-2706420-1-1.html]fireworks图标设计[/url]
图标有单色，多色，水晶，矢量，像素，线条等多种风格。我做的实在不多，而且水平不咋地。随便拿几个来献一下丑。
以下提供几个我在工作中做的小图标源文件：
[attach]23248[/attach][attach]23249[/attach][attach]23250[/attach][attach]23251[/attach][attach]23252[/attach][attach]23253[/attach]
Title除文字设计图和内容表示图之外,用到最多的指示图有以下几种（部分源文件）：
[attach]23247[/attach]
[color=DarkGreen]（2）标题文字[/color]
很简约的方法就是font-size:14px;font-weight:bold;。当然，为了效果更好，可以制成效果文字图，与图标一起切。
关于文字效果的制作，在以前的“[url=http://bbs.blueidea.com/thread-2679420-1-1.html]文字效果总结[/url]”中有详讲。
[color=DarkGreen]（3）更多[/color]
这里提供几个英文的more，在很多中文网站也是适用的。因为大多数人一见这个"more“就知道是做什么用。而英文字可以让更矮一些，在行距上使title显得简洁。
[attach]23339[/attach]
[color=DarkGreen]（4）背景+边框[/color]
我们常用到的几种背景方案：单一色、纵向简单的渐变、渐变+水晶效果、对角线水印、角部印花。以下是制作源码。
[attach]23368[/attach]
边框就多着了。看下面的"3.Title和内容的结合"其中去启示吧:D
[b][color=DarkRed]2.盒子内容：List[/color][/b]
内容清单无非就是这几个元素：point（点、编号、指示图标），*分类名（次要，放在首页时，文章所属的子分类），单个清单标题，New（最新的文章），发表时间，li下框线（一般为浅色直线或虚线）。
在上面的“各种盒子”已经有一些样式，这里接合CSS网页制作，来提供一些现有方案。
建议使用ul,li来显示条目链接，这样比较有条理性，而且也符合Web2.0的制作要求（我指的不是用了什么标记，而是指标记形式表现了内容：链接条目清单）。当然，网页中还没用到XHTML的话，用ul li对程序员也是福音，代表结构也更好些。
[color=DarkGreen]（1）point[/color]一般用list-style-type来写（有多种type，详情请查阅css手册）。上次有人问到list-style的颜色怎么改变，其实，就是ul li的文本色（color:#aaa）。
但在不同的浏览器下，效果会不一样，建议一般用背景图片（ul li{background:url() no-repeat left 48%; padding-left:15px;}）。
[color=DarkGreen]（2）分类名[/color]通常用中刮号"[...]"刮起来，或是加粗，又或是链接变色。放在point和text之间。变色放在前面效果更好。
[img]http://bbs.blueidea.com/attachments/2007/1/3/title_c3_uJZDRc3m8av2.jpg[/img]
[color=DarkGreen]（3）清单标题[/color]是条目文本和链接，这个没什么好说的，链接样式一般是"ul li a(顺序是link,visited,hover,active)<谢谢26楼>"
[color=DarkGreen]（4）New[/color]最新的两、三篇文章，或是最热(Hot)的几篇。有时会放一个图标或是把point变色，又或是把标题变色，有时是一个很小的图标。这些图标的高度通常低于文本高度，即12px以下，矢量图最好是实边，适应任何背景环境。不管图有多简洁，一定要用与文本不同的高亮或突出的色表示醒目。这里提供几种收集来的图片方案。
[attach]23325[/attach]
[color=DarkGreen]（5）发表时间[/color]一般喜欢放在最右边，或是代替分类名，放在标题的前面。颜色会比较浅，无链接状态。ul li中处理放在右边时间，通常是用<span>标记括起来，然后CSS用ul li span{float:right;}将时间向右对齐。
[color=DarkGreen]（6）下框线[/color]，CSS里是用ul li{border-bottom:1px #ccc dotted;}这样的下虚线来表示，可是看多了，觉得页面有点呆板，那么就会用到背景图。这里有可能跟li的point背景图相冲突。一般使用两种解决方案：
一是把point和line放在同一张背景图里面，作为li的背景。这样图会大一些，但可以达到精确。
二是把point继续作为li的左边背景图（背景色是默认的透明），而line的背景虚线，作为ul的背景铺平。这时候，要注意线的切法，线的高度，要刚好与li的物理高度（包括了padding、border+margin，虽然margin不属于li本身的高度）相等。
关于下划线虚线在FW中或种样式，我在去年的小文"[url=http://bbs.blueidea.com/thread-2601293-1-1.html]FW中特别的虚线[/url]"中有简单的介绍。
[img]http://bbs.blueidea.com/attachments/2006/9/25/20060603_line_2Fw7UoiiPDRO.gif[/img]
[b][color=DarkRed]3.Title和内容的结合[/color][/b]
和内容的结合，重在结构和用色。不一定要有多震撼，多花俏，根本你需要的风格（页面的整体风格，和网站的性质）来确定线条。
[b]在白色区域的简单构造美[/b]
[attach]23219[/attach]
[attach]23220[/attach]
[attach]23221[/attach]
[b]神奇的背景图和背景色[/b]（更适合娱乐、休闲性质的风格板块）
[attach]23222[/attach]
[attach]23223[/attach]
[attach]23224[/attach]
[b]各种各样的盒子[/b]
[attach]23225[/attach]
[attach]23226[/attach]
[attach]23227[/attach]
用到一万年的册子式盒子：
[attach]23230[/attach]
[attach]23231[/attach]
[attach]23237[/attach]
[attach]23326[/attach]
[attach]23330[/attach]
[attach]23331[/attach]
百用不烦的针夹定点盒子：
[attach]23233[/attach]
[attach]23234[/attach]
[attach]23235[/attach]
[attach]23236[/attach]
[attach]23238[/attach]
[attach]23327[/attach]
[attach]23328[/attach]
[attach]23329[/attach]
今天到此，以后再添其他的^_^
[[i] 本帖最后由 pigeonno1 于 2007-2-27 13:55 编辑 [/i]] 这个嘛.....
是要和网页整体搭配的，最起码要和“Title”下的表格或内容搭配，才能看出效果的。
这几个都很休闲的，如果是信息类网站，用这个做，就有点不合适了。
楼主很用心，支持。 希望还是能够从整体上看到效果的，lz继续 支持楼主！！！！！！！ 整体
我要看的也是这个 写得好啊, 顶顶再看 怎么都是韩国的...
国产的有些也挺不错的.. 接下来的篇，写在主帖好？写在回复好？还是分开写的好呢？ 先顶，
韩文放在那里好看，但要是把中文同样放在那里就不一定有同样的效果了~~大家随机应变:D 继续写
继续看
有心人值得称赞 支持！
但全是韩国的。。。。
接着写吧！ 好东西.整个分析挺好的.也挺适用..
回复 #8 pigeonno1 的帖子
回复吧~~~:) 哈哈哈哈好好好...
支持支持....希望快点你又拿些新的资料来发表..:D 做网页其实要考虑到的东西还有很多很多,不是一句话或是一篇文章能够写完的,楼主辛苦了. 怎么全是英文的more啊,加些"更多"就好了 不错哦，支持楼主 看完了不错啊!!很好的 收了~好久没见好东西啦:D 不错， 不错 ！ :) 是的，现在模仿的人多了，最好能到后来加入自己的思想！我现在就是这样了！ :D 不错的韩国风 支持~~~ 好东西啊，我慢慢啃 更正一个问题：（3）清单标题是条目文本和链接，这个没什么好说的，链接样式一般是"ul li a(顺序是link,hover,active,visited)"
顺序应该是link,visited,hover,active :) 支持一下 强啊，继续总结！支持lz 不错 支持一下 ～
真的很实用
谢谢楼主 收下咯 [quote]原帖由 [i]cuckoos[/i] 于 2007-2-28 22:50 发表附上一些从[url]http://www[/url]……搜索到的在楼主文章和图片中出现过的类似素材： [/quote]
汗。。。嘿嘿。这类素材，经典和图酷等素材网大把大把的，传说中的韩国矢量素材库。。。。不是来做广告吧:D
不过你发的我也不全见过，谢了~
[[i] 本帖最后由 pigeonno1 于 2007-3-1 16:49 编辑 [/i]] 整理得不错，支持一个 总结的很好 收藏了! 为什么老找了些韩国图片，能不能找一些中国式的 路过看过不说辛苦你不说感谢真是对不住，呵呵 谢谢楼主,收藏了 楼主好人，祝你好运 女子 巾占 弓虽 丁页 绝对要顶一下~~~ 挺好的，收藏了 太好了,谢谢lz,收藏了 支持，并收下～:) 谢谢啦。 很厉害！！！ 收藏...
最近刚刚接触FW，也许是因为以前都是用PS的缘故，现在突然转，有些不习惯！
幸亏有大侠相助，才使得偶在短短的时间有所进步，支持LZ。。。:D 不知道为什么
看到跟韩国有关的东西就烦 为什么楼主不打个包给大家分享呢 这样下的多累啊
谢谢楼主
学习学习 很不错 取了不少资源 谢谢 这东西好啊 偶尔想起有这个贴，回来温温 不错的帖，收集整理的很好，多谢楼主，期待后面的作品 AsFlipPage5.0.0蛮不错的
支持支持....谢谢提供者.... 强贴，顶 总结得不错:cool: 辛苦楼主了 真的不错对新手 帮助很大 真不错！！ 非常感谢楼主提供如此高质量的秘籍! 不错 支持lo
页:
[1]
2