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中特别的虚线"中有简单的介绍。

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


神奇的背景图和背景色(更适合娱乐、休闲性质的风格板块)


各种各样的盒子

点击在新窗口查看全图
CTRL+鼠标滚轮放大或缩小


用到一万年的册子式盒子:

点击在新窗口查看全图
CTRL+鼠标滚轮放大或缩小


百用不烦的针夹定点盒子:

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku