网页设计留白的艺术

        提升到艺术的高度来看待留白是通过视觉上的手段,留白也可以给人带来心理上的轻松与快乐,也可以给人带来紧张与节奏,通过这种手段可以向使用者表达出设计者的心理感觉,设计者在设计网页的同时也在同自己的使用对象在作一种交流,好的设计者能够达到同自己的使用对象进行心理对话的程度。不光通过页面上的文字、图片、动画的组合和排列,同时借助留白进行表达。可以达到非常好的效果,例如一个休闲的网站,设计者要传达给使用者的一个信息就是要是让他们轻松随意,无拘无束,光通过网页上的图片和文字的表达是干巴巴的,没有感情色彩的。如果能通过网页设计反映出这种感情色彩,显然这样的设计是较为高明的设计。能实现吗?当然可以,借助网页上的留白就可以,让留白更多的显示出自己的特色,在联系图片和文字的中间架起一道桥梁!

  如何在空间中突出留白的作用,在审美的观点上,我们知道要是做的网页更加的漂亮,有很多的形式美的要素,这里要强调的是页面的均衡、节奏和韵律,因为通过网页的排版布局,在很大程度上是借助于留白的作用,也许在设计的时候没有留意,在不知不觉中在利用它,试想在一个页面上充满了图片和文字,一点空隙都没有那是根本谈不上节奏感和韵律感的,有了这个要素(这里可以这样认为),就可以合理的调剂它和其它的网页上的其它要素之间的关系,使之安排更加的合理。可以这样来设计,利用留白的体量感来使页面的达到平衡,最好是在一种不平衡中营造出平衡的感觉,这样就会使页面更生动,更富有光彩,假如左右的两个部分有文字,可以适当的将它们的大小调整,是一边很大,文本内容很多,可以放得靠上一些,空出一小部分;另一边小,内容少一些,放在下角,上面的留白很多。这样就会赢得均衡,不会那么死板。当然这只是一个简单的例子,实际的运用中很多时候是多个形式美的要素的综合。在网页中通过留白的桥梁作用,是整个页面上的要素排布的松紧呈现出高低错落,跌宕起伏,这样浏览起来就会富有极强的节奏感,象是在听一首好听的歌曲。毕竟生活不只是按部就班的生活,有时候感觉只是生活,或者是工作,没有艺术,没有美。这是设计者的责任,在网页设计的时候要能体现出来,不是很好吗?当然不是说每个网站都设计出来象音乐或者是艺术网站一样具有那样的节奏感,在不同种类的网站中体现得要不同,这是一个需要设计者把握的问题。把握得不好就会出现和设计者的意图不一致或者甚至是相反的效果。

  再者,利用网页留白,我们可以不用太多的说明就可以表现出它的网站的特征,这是主要从网页的功能性的方面来看的。例如新闻性网站的信息性、快速性。体育网站的充满激情。商业网站的商业味……,运用得好就如同其它的商业上的运作一样可获得成功。我们知道快餐店利用强烈的刺激性的红色作为它的墙面或者是座椅的色彩,这样让人在这样的环境里感觉到一种紧张感,由此不愿在里面呆很长时间,由此腾出更多的空间给后来的人用,所以通过这种手段使快餐店的生意更加的好。反之在医院里通常是用一些象征安静的蓝色或者是白色,可以使人心情更平静。同样在网页上我们可以利用空间的运用,借助留白来达到一定的效果,有时候得到的效果是使人意想不到的。例如在新闻类的网站上,可以将文字设置得更加的紧密一些,从而是页面上的内容更多,给使用者的一个影响是很值得看的,不用看内容就知道有很多东西,内容的设置尽量集中一些,不要给人的感觉是杂乱无章的。不要设置得太散,尽管可以是通过下拉菜单来看,但是给人的感觉就是内容少,太空。这也是人的心理因素的作用。在一些休闲的网页里就不一样了,留出的空间就要多一些,使页面显出更加轻松的特征,使人一上这个网就能感觉到一种放松的心情,符合休闲的特征。而目前很多这类网站是没有这样做的,他们的目标是尽量使更多的人能够访问这个网站,所以就放尽量多的内容在主页上,使更广泛的人能够在这个网站上找到自己感兴趣的内容。这样就进入了一个误区,就是页面上分布得密密麻麻,让人感觉到一种急促感,紧迫感。给上网的人带来压力,是上这种网站的人所不愿意的。

  当然留白是留空,有时候需要突破这个层面,这样会发现很多的地方都有发挥的余地,某种程度上留空就是留白,在这里颜色的作用是不可忽视的,因为颜色本身具有体量感,具有感情色彩。所以利用有颜色的留空可以给页面带来均衡,也可以使页面更加的丰富。例如不同的位置的留出的色块之间的相互对比,相互呼应。以及本身大小带来的重量感,同时同网页上的文本和图片之间的结合,可以是页面呈现出整体上的协调。同时借助于颜色的冷淡,加重页面给人的感情色彩。目前很多网站都在采用这种手段,网页上看不到一点纯粹的留出的白色的地方,都是一些色块,这样原理是同留白一样的,通过这些色块(多说是融合于文本或者是图片在一起的),然后来看待它们之间的关系,在一个整体的美感作为标准的条件下,综合运用这些留空来进行制作,这里就要考虑颜色的轻重和大小是相关联的,不能只看到空间的大小来进行对比,同时也要抓住颜色多少的搭配,不能以为追求对比调和或者是单纯的追求节奏而滥用颜色,页面华而不实,给使用者带来极大的不方便。这是应用上的失败。研究网页上的留白就要扩展它的意义,掌握它的变化有利于我们在制作网页的时候,灵活的采用,从而给我们的设计带来极大的方便,给我们每一个设计者的设计意图的传达带来更加广阔的空间。

  留白的处理是非常重要的手段,每一个网页设计者都要有这种意识,在设计时有意识的将自己一些感受恰如其分的通过这些手段传达出去,会收到事半功倍的效果,“计白当黑”给了我们很大的启示,在网页的构成中,空白同样占有自己不可替代的作用。

利用CSS突出显示不同类型的链接

最近在看《精通CSS-高级Web标准解决方案》,发现有些笔记是必须记下的,以备不时之需~

我们在浏览网站的过程中,不会刻意地去观察要点击的链接是指向本站点上的另一个页面,还是指向另一个站点。或许我们都有过这样的经历:单击一个链接,期望浏览器转到当前站点上的另一个页面,但是不经意间却点击的这个链接却指向了其他站点。

当然,为了避免这么做也有有效的解决方法,例如采取在新窗口中打开链接。今天要说的是另外种解决方法。比如说,我们能够让外部链接看上去和本站的链接不太一样,为此,我们可以在外部链接旁边加上一个小图标,让他与众不同~

实现这种效果最容易的方法只要在所有的外部链接上加上一个类,然后将图标作为背景图像应用。这个方法可以实现我们想要的效果,但是如果页面多了,那将变得非常繁琐。(因为我们必须要有足够的耐心去在每个外部链接上添加类)。除此之外,我们可以利用属性选择器让CSS判断链接是否是外部链接。

点击我先看Demo

经过测试,可以发现除了IE6以外的其他主流浏览器都可以完美支持。下面来分析下网页源码。

CSS3 扩展了属性选择器的功能,提供了子字符串匹配属性选择器,这些选择器允许通过对属性值的一部分和指定的文本进行匹配来寻找元素。

这种技术的工作方式是使用 [att^=val] 属性选择器寻找以文本 http: 开头的所有链接:

a[href^="http:"]{
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}

 这应该会突出显示所有的外部链接,但也会选中使用绝对 URL 而不是相对 URL 的内部链接,为了避免这个问题,需要重新设置指向自己站点的所有链接。

a[href^="http://yoursite.com"],a[href^="http://www.yoursite.com"]{
background-image:none; 
padding-right:0;
}

当然,我们还可以扩展这种技术,如对邮件也进行突出显示。

a[href^="mailto:"]{
background: url(images/email.png) no-repeat right top; 
padding-right:10px;
}

我们还可以用 CSS 选择器来区分一些下载链接,如一个 PDF 或 Word 文档。这要使用 [att$=val] 属性选择器,它寻找以特定值结尾的属性:

a[href$=".pdf"]{
background: url(images/pdfLink.png) no-repeat right top; 
padding-right:10px;
}

a[href$=".doc"]{
background: url(images/pdfLink.png) no-repeat right top; 
padding-right:10px;
}

类似的还有 RSS(feec) 链接:

a[href$=".rss"], a[href$=".rdf"]{
background: url(images/feedLink.png) no-repeat right top; 
padding-right:10px;
}

这些技术都有助于改进用户在站点上的浏览体验,让用户明确地了解单击链接时会发生的情况,避免不必要的取消操作和烦恼。

但本方法对 IE6 没有效果,而且并没有实现自动让外部链接在新窗口打开。如果想实现这样的效果,就必须用到 JavaScript 和 DOM 。

CSS样式指南:提高CSS的可读性

     当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成。所以,结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法,也就是一种较好的CSS样式指南。

1.分解你的样式

对于小项目,在写代码之前,按页面结构或页面内容将代码分为几块并给予注释。例如,可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。

而对于较大的工程,这样显然不会有什么效果。此时,就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子,它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构,而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种,master stylesheet 使用了最常见的一种。
/*——————————————————————
[Master Stylesheet]
Project:       Smashing Magazine
Version:       1.1
Last change:       05/02/08 [fixed Float bug, vf]
Assigned to:       Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use:       Magazine
——————————————————————-*/
@import “reset.css”;
@import “layout.css”;
@import “colors.css”;
@import “typography.css”;
@import “flash.css”;
/* @import “debugging.css”; */
同时对于大型项目,你也可以加上CSS文件的升级标志或者一些诊断措施,这里不再详述。

2.建立CSS文件索引

为了能够迅速的了解整个CSS文件的结构,在文件开头建立文件索引是一个不错的选择。一种可行的方法是建立树形的索引:结构上的id 和 class 都可以成为该树的一个分支。如下:
/*——————————————————————
[Layout]
* body
      + Header / #header
      + Content / #content
            – Left column / #leftcolumn
            – Right column / #rightcolumn
            – Sidebar / #sidebar
            – RSS / #rss 54ne.com
            – Search / #search
            – Boxes / .box
            – Sideblog / #sideblog
      + Footer / #footer
Navigation         #navbar
Advertisements         .ads
Content header         h2
——————————————————————-*/[

或者也可以这样:
/*------------------------------------------------------------------
[Table of contents]
1. Body
      2. Header / #header
            2.1. Navigation / #navbar
      3. Content / #content
            3.1. Left column / #leftcolumn
            3.2. Right column / #rightcolumn
            3.3. Sidebar / #sidebar
                  3.3.1. RSS / #rss
                  3.3.2. Search / #search 网管网bitsCN.com
                  3.3.3. Boxes / .box
                  3.3.4. Sideblog / #sideblog
                  3.3.5. Advertisements / .ads
      4. Footer / #footer
——————————————————————-*/

另一种方式可以只是先简单的将内容列举出来,也不需要缩进。下面的一个例子中,如果你需要跳至RSS部分你只需要简单的搜索8.RSS。
/*——————————————————————

[Table of contents]
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer

——————————————————————-*/

<!– some CSS-code –>

/*——————————————————————
[8. RSS / #rss] 54ne.com
*/
#rss { … }
#rss img { … }

定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候,你也可以将检索打印出来从而在你阅读代码的时候方便查阅。

利用CSS等比例缩小图片

图片等比缩放不必需要后台代码的控制,前台CSS技术完全可以几句CSS代码来完成。

把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。

    对于IE 6.0及以下版本,以上两条CSS属性均不会被理会。之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件。例如:

    这固然能解决问题,但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善,我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了,既然IE支持通过Expression在CSS中放置一些脚本,而这段脚本又只是提供给IE 6.0及以下版本使用,那么把它写到Expression中再合适不过。

    最终,把一副大图片按比例缩小到50px*50px以内,可以参照以下这段CSS:

 .thumbImage{

max-width:50px;

max-height:50px;

}

*html.thumbImage{

width:expression(this.width>50&&this.width>this.height?50:auto);

height:expression(thhis.height>50?50:auto);

}

WordPress 3.0新特征

WordPress作为最受欢迎的博客平台,它给用户提供了各种工具,用户可以使用这些工具发布文章、与读者保持互动。不过,更让人高兴的是,WordPress3.0将更加接近CMS。

尽管WordPress3.0与上一个版本相比,改变并没有很多,不过却是非常有意义,特别是对于希望将WordPress当成一个内容管理系统来使用的用户。 本文将对即将发布WordPress3.0最为突出的五个新特征进行简要介绍。

1.自定义发布内容的类型

默认情况下,WordPress里可以让你发布两种类型的内容:“文章(Posts)”和 “页面(Pages)”。 在WordPress3.0版本中,你可以依据内容本身的属性特征定义更多的内容类型。例如,如果你为一家设计公司开发一个WordPress网站,你就很可能需要创建一个自定义的内容类型来显示“成果一览”、一个员工页面以及一个客户感言等。那么,你就可以在WordPress中通过自定义主题使其更好地服务每一种类型的内容。

在WordPress3.0中你可以轻松地创建自定义各种类型的内容,包括:文本、图片、报价、链接、聊天、音频、视频。

多亏了自定义内容类型的功能,你可以使用WordPress来发布任何类型的内容,将WordPress的功能发挥到无限的极至。

2. 菜单管理

菜单管理应该算是WordPress3.0里最让人津津乐道的一个新功能了。它让你可以完全掌控站点的导航菜单。通过便捷的拖放界面,用户可以自由创建各种组合的链接:内部链接、外部链接、分类等。而且你可以将这些自定义菜单嵌入主题中的任意位置,把它们当成widgets来看待。

我们假设你的站点上有几个信息页面、一个博客、精彩视频同时还要宣传自己的社交媒体账户,那么你可以按下面这样来处理主要导航栏:

主页

博客(链接到博客主页面)

视频 (链接到视频分类或视频类型的内容)

信息页面

信息页面

子信息页面

新浪微博 (链接到新浪微薄账户)

腾讯微博 (链接到腾讯微博页面)

另外,在WordPress3.0中修改这些排序、标题名称、链接目的地也是轻而易举的事情。

3.自定义分类法

对于非开发人员来说,这个新的功能可能有点复杂,不过不管怎么说,它毫无疑问将WordPress3.0向一个真正的内容管理系统又再推进了一步。自定义分类法允许你创建额外的meta信息。默认情况下是有“分类”和“标签”这两种。 现在你可以添加更多的类型,并且可以选择是否需要层级结构。

这到底是什么意思呢?我们来看一下下面的例子:

假设你是一个影迷,使用WordPress博客来发布评论、给新电影评分,那么你就可以创建一个自定义的分类来“评级”给每个评论边加上评分的选项。

另外,对于公布房产之类信息的网站而言,这个功能也显得非常好用。除了图片和描述之外,你可能需要使用额外的分类为每个房产提供一个特定的列表,包括询问价格、房型、建筑年代等。

4. 新的默认主题: “Twentyten”

Twentyten这个主题也让大家期待已久,这款主题相当简洁但却引入了一些在其他主题中所没有的完美的功能。如果你是WordPress新手,不懂如何利用代码来自定义主题,Twentyten内置的下面这两个功能将会显得更加实用:

自定义标题图片

在Twentyten主题里,你可以轻松地修改站点标题图片。与主题捆绑的有八个非常有趣的图片可供选择,你也可以自己上传图片。这个功能并不局限于Twentyten这个主题,主题开发者也可以激活并在自己的主题里加入此功能。

自定义背景图片

使用Twentyten的另一个好处是你可以上传背景图片。你也可以自己设置一个固定的背景色。同样地,就算是没有任何web开发经验的人都可以轻松地实现这个,无需编辑css,主题开发者也可以激活并在自己的主题中加入此功能。

5. 多站点

提到WordPress 3.0不可能不说说这个新的多站点功能。是这样的,你可以只需一次安装WordPress,就可以管理多个不同站点(不同域名或二级域名)。之前被称为WordPress MU (多用户)的功能现在已经于WordPress3.0的内核结合在一起了。不过,普通用户并不适合启用多站点功能,因为它需要一定的代码知识还需要配置服务器。也就是说,普通用户可能并不会对多站点的功能感兴趣。

那么究竟谁会从WordPress多站点功能中获益呢?要是你在运行一个博客网(如新浪博客)或管理一个包含多个部门的大组织,或者说你的每一个员工都有自己独特设计的博客或甚至是自己域名下的博客,这些情况下,这个多站点的功能应该会非常实用。

其他?

下面是WordPress 3.0在小地方的几点改善:

获得短地址 (用自己的域名)

我们都知道短网址还是挺好用的,特别是随着微博客的日益流行。WordPress 2.9就可以使用短网址wp.me URL shortener。WordPress 3.0将这个功能再进一步,你可以依据自己的域名为文章获取一个短网址。这样你就不需要通过其他短网址服务如 bit.ly来完成。由于这样的短网址里包含了自己的域名,微薄里使用时还是可以为自己的品牌宣传。

作者模板

3.0里一个新的功能就是可以让你创建独特的作者模板。这特别适合多作者的博客,你可以为每个作者页面创建不同的样式和布局。

安装过程中选择用户名和密码

WordPress 3.0之前,安装WordPress的话会自动为用户创建一个叫做“admin”的用户名以及自动生成的密码。现在,在安装的时候你就可以自定义用户名和密码,这样就省得以后还去修改。 这无形当中也增加了WordPress安全等级,很多WordPress站点容易遭受攻击都是由于使用最常见的用户名“admin”。

转自:http://mashable.com (译文:wordpress.la