1 2 3 4 5 6 7 8 > >|

预览模式: 普通 | 列表

神游二道关

作者:涩斑鸠日期:2008-11-24 19:52

事隔多年，故地重游，把酒言欢，
留下的只是这些光和影的焦点！

一切如流水掠过，湿过身就好！

标签: 摄影构图设计制作人在旅途

类别: 摄影技巧 | 引用: 0 | 评论: 7 | 阅读: 173 | 转发

秋色满园关不住

作者:涩斑鸠日期:2008-10-31 09:11

08年的秋天，丰富的多彩！

“鬼见愁”之前的山脚下的小朋友。

“玉米地”

“眸然回首”

”路边的野花“

”路边的野草“

”香山之石“

”层岚跌宕“

”枯木“

”小强的故事“

”几只小强的故事“

”盆友“

”蒿草“

”植物园一景“

<..................................所谓的意义和深刻，只不过是免于崩溃的不断挥舞的手！..................................>

标签: 摄影设计制作技术支持人在旅途艺术,绘画,

类别: 摄影技巧 | 引用: 0 | 评论: 3 | 阅读: 171 | 转发

08奥运798-sanly篇

作者:涩斑鸠日期:2008-08-25 00:10

08年8月24号
周日
北京奥运会今天结束，
来到798这个商业与艺术相互妥协的圈子里，
体验属于
自己
的
摄影艺术。
人生又何尝不是如此呢？
还是那句话
一切如流水掠过，湿过身就好！

标签: 构图摄影人在旅途 ps技术

类别: 艺术生活 | 引用: 0 | 评论: 4 | 阅读: 211 | 转发

08.8.17-我的摄影日记

作者:涩斑鸠日期:2008-08-17 08:02

标签: 摄影

类别: 摄影技巧 | 引用: 0 | 评论: 6 | 阅读: 124 | 转发

提升网页和博客设计品质的一些实例和技巧

作者:涩斑鸠日期:2009-06-01 17:03

提升网页和博客设计品质的一些实例和技巧

“高品质”是所有人追求的目标，在网页设计的世界中也不例外。不过何为“品质”，如何判断一项设计的品质是好还是坏？笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里，你就掌握了让自己的设计更趋完美的大量技巧。

接下来我会给大家列一些要点，并附上相应的例子，与大家分享一下我在别人的网页设计中寻找“高品质”的过程。

01. 留白

在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从而提升设计的品质。

我觉得处理好留白的关键是从整体上感知设计元素。把设计稿缩小观看会是个好办法。

出色的留白处理的实例

Good.is

页面整洁而有开放感，全都得益于设计师对文字和图像之间留白量的准确把握。

Digital Mash

在大空白上展示的元素往往更具吸引力。Digital Mash的网站创造了极佳的亲和力。

Creatica Daily 的大量空白

优秀的留白运用又一次让网页内容成为焦点。每篇文章中都有大量内容，不过该站点的设计师们并不惮于给这么多内容之间填上大量留白。并不是说你的文字不够多，就不能用很多留白。

Postbox 上也有很多空白

仔细观察Postbox的网站，你能看到边缘处的留白应该如何处理。它的方框边缘有60像素的边内留白。听起来似乎挺大的，实际看起来效果却好极了。

留白时的错误

大家在设计留白时的最常见问题就是各个区块的内容到边缘距离太小。不论你的设计多么有风格，如果你硬要把东西塞得紧紧的，这些风格连同设计的品质，就都流失了。

留白不够的例子

我们已经看到PostBox的网站那些大留白创造了多么动人的效果，所以下面我们修改一下它的页面，看看减少留白会是什么效果：

screenshot

品质感明显下降了。留白的影响就有这么大。

高效控制留白的技巧

各种不同情况下，留白要求都不尽相同。你需要不断训练自己，做到对留白所能带来的改变时刻心中有数，从而有效地利用留白满足设计需求。这要靠个人感觉的，不过都能从实践中锻炼出来。

使用网格辅助设计
利用网格当然能帮助你理解元素之间的空白。

不断尝试
不断尝试—失败—尝试，直到找到最佳方案。

留白并不是浪费空间
空白并不总是等着你去填充的。
没错，少就是多
与其用尽心思填满某个区域，不如就把它留空，只保留至关重要的信息就好。

02. 像素级的完美

有一个方法能够看出某人在完成一项网页设计时是否真的用心了。有时候创造奇迹的就是一些小细节，一些别人几乎无法察觉的细节。我所说的“像素级的完美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线，不如多加一些细节。细节可以是细微的渐变，也完全可以只是一条1像素宽的细线（用作表现阴影或高光）。有了这些细节，你的设计会大不一样。有些设计师在这方面特擅长： Collis Ta’eed, David Leggett 以及 Wolfgang Bartelme.

像素级完美细节的实例

Envato的细节鉴赏

下图的Example 1 (例子1)中，绿色内容框的边缘有一条更亮的绿色线。而Example 2处，区块内边缘有柔和的渐变阴影，而边缘之上还有一像素的白色描边。这做法非常聪明，用阴影来强调高光。后面的绿色区域有非常柔和细微的光影效果，有助于将注意力吸引到下面的白色区块中那清新脆爽的细节上去。尽管这种做法并不是总能让设计看起来更加精致，不过它们的确能帮助你赋予设计以三维的真实感。于是设计元素就成了镶嵌在页面上的宝石，而不是平铺在上面的一张毫无动感的纸。

$Quality Design; Envato\'s Pixel Perfection$

Tutorial9.net上的细节

David Leggett 对于如何制造单像素顶边条有很深的理解。他最近重新设计的 tutorial9 集合了很多非常棒的像素化技巧。 Example 1 处你能看到，他是如何仅仅通过添加一条1像素的高光，而将导航标签变得更有质感。Example 2 处使用的技巧则更多了。相机图标的投影，下方白色区域的阴影与高光，以及导航条上的1像素高光。

RedBrick Health上按钮和分割线上的完美像素级细节

这个漂亮的导航菜单，由Ryan Scherf 创造，是使用完美像素级细节提升设计品质的绝佳实例。红色按钮有1像素的高亮，链接之间的分割线也有同等的品质与细节。正如你所看到的，他没有满足于只用一条灰色线分割，Ryan还在下面添加了一条1像素宽的高光线，避免了设计看起来过于平坦。

完美像素级细节也适用于Grunge风格: AvalonStar

译注：Grunge风格有“做旧”、“迷幻摇滚”、“做脏”等几层意思在里面，算是平面艺术中的一个流派。

下面的例子是漂亮的AvalonStar：Distortion（扭曲）主题博客，有着极赞的grunge风格。不过，即便是肮脏做旧的grunge风，利用1像素高光也能创造大不同。下图的Example 1 处，上面的棕色区域有一个渐变阴影，下面的绿色区块的顶部则有着一条1像素高亮线。阴影与1像素线的结合，让这些区块显得更为精致。

完美细节小贴士

要在这一技巧上达到完美，不断的实践尤为重要。如您所见，一条1像素线这么简单的东西就能给设计添加非常酷的深度感。你甚至不一定要用到那些倒角或渐变，费尽心力做一些实实在在的置于某对象之上的效果。

一定得是细节
小细节完善内容感官是关键。
思考像素级问题
描边、渐变、线条、阴影等等，不用太宽大也能有效增强设计
前后对比
应用效果后注意与没有这种效果之前进行对比。如此你就能知道这些细节到底带来了哪些改观。

03. 文字排列与字体选用的诀窍

尽管设计师大都不会亲自撰写网站的实际内容，不过他们对于内容的整体品质仍然至关重要。设计师的作用就是要保证内容的展现方式足够易读。有很多方法能保证你的字体易读易用，不过我不会给大家列一些该做什么或者不能做什么的规矩和条款，我带给大家的是一些聪明运用字体的实例和分析。

仔细考虑了字体的实例

The Netsetter上大而漂亮的字体

网页设计中，标题很重要，对于博客设计来说尤为如此。最近流行在标题上使用大而粗的字体。这样做有很多好处，不仅能提高特定内容区块的可用性，而且有助于组织设计中的空间和结构。 Netsetter 在这方面做得非常好，如您所见，标题字体很大，周围有大量留白，十分易读。

行间空白和字符间距

Viget 的网站是字体究竟对网页设计有多重要的完美实例。下面的截图来自他们的作品集展示页，再一次展示了大字体是如何帮助创建开放空间的。即使是这种清爽的细线体，他们也使用了宽阔的空白。另一个值得称道的地方是他们对于行高 (line height) [行间空白]的的绝妙选择。行间距被设定得比默认值大很多，大大增强了文字可读性。也许下次你可以在自己的设计中也试一试这个技巧。

Web Design Ledger, 配合情绪的字体

要找到完美的字体需要不断的尝试和失败，或者你还可以根据字体所代表的“情绪”来选择字体。下面的例子，Web Design Ledger，在给人以复古和做旧感的同时，也饱含开放的情绪与现代感。他成功的关键就在于选择了能唤起人们相应情绪的字体。Henry Jones (该站的设计师) 为标题选择了一种流行的传统衬线字体：Georgia，为怀旧复古风的实现提供了很大裨益。现代感则来自与标题完全不同的字体——主内容使用的Helvetica字体，一种无衬线的、滑溜的、开放的字体。

网页设计中字体选用的快速决断

看了上面这么多好例子，将来你选用起字体来应该会更加得心应手。不过，为什么他们给人的感觉这么好？下一次在你自己的设计中，你又该如何运用？

是否可读？
不要怕尝试粗大的字体
你可否考虑过间距？
间距对于可读性有很大决定作用
你的字体带给人什么情绪？
确保字体选择适合你的设计风格

这方面还有大量值得关注的地方，不过我不是这方面的专家，我也只是刚刚学会了如何鉴赏那些用得极好的字体而已。如果你想在这方面了解更多，强烈建议你看一下来自Smashing Magazine的这篇文章。

04. 元素的组织

设计师这一职业对很多人都有吸引力，因为那些制造创意的过程，实在是十分有趣。我知道组织内容的过程就没有那么有趣了，不过一旦你养成了组织内容的好习惯，你就会发现其实它也没有想象中那么枯燥。组织内容的方式总是需要看情况而定，比如说，这站点是什么类型？某项特定内容在页面上的重要性如何？

如何放置内容，以及放到哪里，可能的排列组合实在太多了。不过还是有一些技巧可循的。最基础的就是，先决定你的设计需要达到的效果。例如，你是在做卖东西的网站吗？是要做内容展示吗？或者是在做一个用户注册页？推广页面？等等……

靠设计做买卖: 37Signals

看看这个广受欢迎的 37 signals 的网站。他们的东西能卖这么好，可不是靠的运气。他们的网站让你尽可能容易地了解了他们的产品，帮你做出最终决定。你所看见的东西都被精妙地设计而呈现。

如图中所示，他们提供了四大理由让你购买他们的产品。吸引注意力(Attention)是第一步，他们做了一个黑色区块，放上关于产品的简单介绍，并且使用了粗大的标题。接着，他们通过一些漂亮的插画把你的兴趣(Interest)吸引到对产品优点的介绍上。再然后，他们想要让你产生购买需求(Desire)，这能通过放置客户评论引言和产品获奖证书来实现。在这一实例中，他们是通过几个“What our Customers have to say”（我们的客户如是说）的视频来实现的。最后要实现的即促成购买行动(Action)； 37Signals 的网站上有大量行动点(action points，即引导用户进行下一步操作的链接)贯穿于整个页面，由于页面很长，页面底部还放置了更多的行动点。

为内容(Blog)而设计: Well Medicated

设计博客页面时的情况则大不一样了。你不用花力气劝说你的用户信任你的产品，你的“产品”已经展示在他们面前—— 也就是你的博客内容。你要做的就是确保用户能轻松阅读你的文章，探索内容，与你和你的博客产生联系。

内容(Content) 应该是博客中出现在读者眼前的首要部分（之一）。在下面的例子中，一个粉红色粗体字的标题，很好地吸引了你的注意力，引导你直接关注文章内容。左侧放了张大小合适的预览图，右边则是两三段文章摘要，和一个“继续阅读”的链接。当然，也有标准的日期和作者信息。这简直就是我心目“内容设计”的完美实例。注意力(Attention) 可以被引导到任何有趣的事物上。在这个例子中，漂亮的RSS订阅按钮成为了焦点。且不说这个焦点让读者产生了与内容的联系感，它还能帮助网站获得更多的订阅量。鼓励你的读者探索你的内容相当简单，只需在边栏上加一些最新文章或最受欢迎文章的链接列表，或者制作一个下拉菜单，或者组织一个其他你想要推送的内容的高效列表。做起来很简单，效果却足够有效，尤其是对博客来说。博客是一个私人领地，通过不同的途径告诉读者你的联系方式(Connect) ，能帮助他们了解你，也说不定会带来意外的好处。

组织内容小贴士

你当然可能会遇到需要打破常规，选用非同寻常方式的时候，不过你还是可以遵循这些简单技巧，以保证内容结构和阅读顺序的良好。

你为何而设计?
如前所述，确定设计的目标。
利用网格
网格帮助你发挥页面的最大潜能。
测试元素位置
以访问者的角度考察内容的易用性。
移除所有不必要元素
不必要的东西都应该被消灭，或者至少不要放到显眼的地方
注意力的均衡
有些东西需要被简单化，好让另外的事物闪耀光辉

05. 自我克制与精妙细节

设计师总是在寻找制造冲击力的方式，总是想做一个独一无二的设计，创造些前所未有的效果。不过有时候通过自我克制也能形成冲击力。量变产生质变，过多的“好”也会带出不好的结果。好的设计师晓得平衡点在哪里，并且能避免让过多的特殊效果毁了一项设计。

“Things”网站上的柔和渐变

对于我访问过的站点，我总是很关注他们的细微渐变。听起来可能有点恼火，不过我就是忍不住要去研究别人的那些小细节，以积累我将来设计时的灵感。渐变是最被滥用的设计方法之一，不过运用成功的话，还是能让设计增色不少，它所能提供的真实感和深度感是其他技巧所不能达到的。大部分人都不太注意渐变，不过别人对渐变的运用确实是我最好的灵感来源。

Icon Dock 上的投影

Icon Dock的网站简直就是各种精妙细节聚在一起开大会。像素级高光，渐变，以及投影。不过在这里我们只关注它的投影。不是很大，透明度也被调高，小心翼翼地烘托着内容区块，让其成为真正的焦点。实在漂亮~

精细的背景材质：Scouting for Girls

材质性背景要么成全你的设计，要么毁掉你的设计。很多复杂的背景除了分散读者注意力，没有带来任何好处。最终使得设计品质大为降低。所以，最好还是一直保持你的背景材质细微而柔和。 Scouting for Girls的网站在运用材质打造整体风格和设计品质方面做得极好。

做旧与撕碎的启发： Viget Advance

我从来不觉得越细微越好，任何细节的“细度”都以可见为前提。可能人们并没有清楚地意识到，不过这些细节必定确实产生了影响。博客Viget Advance的例子中，在做旧与撕碎效果方面，能给我们一点启发。只是非常细微的做旧，不过如果没有这效果，这张人造纸就会显得平淡无奇，枯燥乏味了。正是这些小小的“不完美”让这画面显得更可信，更真实。

WebDesignerWall 上的水彩效果

使用水彩效果的时候，关键是要确保颜色混合得足够柔和，浓淡变化适宜，而且… 足够“水”。水彩效果为你的设计提供很多好处：精细而和谐的多种色彩，感染力极强的材质感…… 正因如此，越来越多的设计师选择了在他们的设计中创造水彩效果。

精妙的植物：Dara’s Garden

下面是一个充满智慧的关于精妙植物细节的设计。网上还有很多更加栩栩如生的植物图案，而且也非常漂亮，不过这个例子中，我关注的是背景上那些更清淡更微妙的细节。这个例子展现了细节的重要性，柔和的色彩，做旧的效果，唤起你对细节的感知，不过却并不形成为主要焦点。

$Quality in Web Design - Subtle Floral on Dara\'s Garden$

运用精妙细节的小贴士

我认为，精妙细节能让一项好的设计升华为灿烂夺目的设计。如果你还在寻找让设计与众不同的方法，精妙细节是个不错的尝试方向。以下是关于运用精妙细节的小贴士：

创建细节图层
不要在一个笔刷或材质上吊死，多加些图层，多做点细节
尝试不同透明度和色彩
有时候只有 3% 的不透明度也能产生正面影响
拒绝缩手缩脚
不要担心太多细微，或者太不明显

06. 发挥色彩的全部潜能

设计师一般喜欢按照自己的品味来选择颜色，这可实在太不专业了。要决定哪种颜色是最适用的，你的脑子里想的应该一直是品牌需求，然后选好色彩的搭配组合，指定其专属的主题和目标情绪。

网页设计中色彩运用的绝妙例子

无趣并不代表无色：Oypro

Oypro的网站让我喜欢的地方是，他们告诉了我们，一项“无聊”的行业相应的设计并不一定也得“无聊”。通常企业的网站都不允许设计师有太多视觉创意上的发挥。保持简单、单调、淡彩色成了不成文的规定。不过Oypro的例子证明，不用束缚自己，你也能创造出一个有足够“企业感”的网站。

让色彩相互联系：Tennessee Summertime

Summertime in Tennessee(田纳西州夏日观光) 是一个充满活力的、明亮的，非常温暖的站点。所有一切看起来都是为了推送夏日活动而设计。该站点使用了非常多不同色相的高饱和度色，但每一种颜色都切中要害，没有一种是不适合主题的。高品质设计的色彩搭配必定与其要呈现的服务或产品密切关联。好的设计并不总是需要费尽心力选一些出奇制胜的颜色，那些最明显最该用的颜色反而能创造更好的效果。比如说 Hell Design(地狱设计)，不用象征地狱的火红色简直说不过去。

背景还可以大作文章：Saturized Studio

只涂一层单调的背景色可没法让你的设计变得有趣。有一点变化的背影才是最好的背景。此例中我们看到，漂亮的橙/红色被运用到各种各样的光照和渐变效果中。这种为背景增加变化的做法，有效避免了平淡和沉闷。另一个需要特别注意的地方是，暗深橙色背景与上层明亮内容区的对比产生了非常戏剧化的漂亮的视觉冲击。

在网页设计中运用颜色的小贴士

颜色永远是值得探索和尝试的区域。尝试不同的组合变化能为设计带来无限可能。不过选择颜色和色彩搭配时，应该做到对下面的要点心中有数：

尝试突破
无趣的主题并不一定得使用无趣的色彩组合。
多变
尝试在你多彩的背景上使用渐变、重复图案、笔刷，光有颜色可不容易让设计显得好看。
坚持主题
确保你的用色与你需要呈现的产品/服务有关联。

07. 做别人没做过的事

最好的网站中有一些非同寻常的，奇怪的，甚至可以算得上诡异的设计。不过那些挑战传统的尝试说不定会已经改变了传统的定义。话说回来，要做到完全原创，创造出没人做过的东西实在是设计过程中最难做的事。

打破常规之后，成功与失败只有一步之遥。你要么做出令人惊艳的聪明设计，要么做出一堆垃圾饱受批评。别人从来不这么做是有原因的，因为有些点子实在是糟透了。要从人们知道并喜欢的区域走出来，你得非常勇敢才行。下面是一些相关实例：

MB Dragan 上的独特导航

不是你通常所见的站点导航，但看起来还是一个网站，同那些标准导航同样的好。这样做有点冒险，但结果非常符合该网站特质。十分切题的设计，很难让人不欣赏这导航与整个设计之间的配合呼应。

Visualbox(视觉盒子) 非常视觉化的导航

Visualbox的网站只有一个目标，向你展示他们充满智慧的作品。所以他们没有用多少文字，你第一眼看到的就是他们的名字和作品选集。鼠标滑过预览图片时，会显示出项目名称，点击时会带你滑到页面中该项目的相应位置。这是非常高效而实用的解决方案，而且比简单地堆一个列表出来要吸引人得多。

废话不多说的Nikola Mircic

假设你是位交互设计师，你需要别人看了你的作品，能感动得雇用你。Nikola Mircic 为我们展示了“直截了当”对建造一个令人难忘的站点有多大的作用。一打开他的站点，各种风格的作品就向你问好，他的名字和职业放在页顶的醒目位置，当然，联系链接没少。没有大量多余文字来劝说你雇佣他，作品本身就证明了他的实力。当然，点击作品缩略图会出现一个详细介绍页，里面就有足够的文字了。实在喜欢他组织内容的方式。

实践新鲜想法的小贴士

上面的例子并不是为了“激发”你的独特创意，只是一些我发现的一些很独特的站点，仅此而已。事实上，你也不应该到处搜寻，寻找新想法的灵感，因为这样你的点子也是受别人的启发，与完全创新是相悖的。所以如果你打算做真的非同寻常的东西出来，就赶快忘掉这一部分！

保证事物之间的联系
如果你打算做一些特别特别特立独行的事，先问问自己“真的有必要吗?”，“这样说得过去么？”，“和品牌诉求符合吗？”…… 如果答案是肯定的，再采取行动！
忘掉所有已知事物！
好吧其实也并不是所有，基本原则还是要的。话说回来，也没必要从全新的想法里面寻找灵感，因为那样很容易误入歧途。
保证品质和水准
基本上我觉得如果你的新想法足够好，判断品质究竟如何对你来说应该很容易。

对于高品质设计你有什么看法？

让一项设计因高品质脱颖而出，实在涉及到太多方面。我只能说我列出了一些基本要点。所以我希望能听听您对这一问题有何高见？在判断一件网页设计作品是否显示出高品质时，你最关注的是什么呢？

关于作者与译者

原文出自WeFunction，作者是 liam，初发表于2009年4月13日。
译文由笨活儿翻译。原始网址：http://blog.benhuoer.com/2009/05/quality-within-web-design/ 。

转载请保留出处。

分享本文：

本文使用的标签

标签: 构图技术支持技术支持,网页标准,设计制作,css技巧,css常用属性

类别: ui设计 | 引用: 0 | 评论: 0 | 阅读: 37 | 转发

jquery的经验积累与学习

作者:涩斑鸠日期:2009-02-25 14:06

我的jquery链接地址:

http://www.xpdesigner.com.cn/js/jquery.js

jquery插件链接地址:

lavalam：

http://www.xpdesigner.com.cn/js/lavalamp.min.js

easing：

http://www.xpdesigner.com.cn/js/easing.js

1.用load实现页面局部刷新

jquery提供了一种方法实现页面的局部刷新的方法，这里的原理类似于ajax的异步刷新技术，不同的是这种方法不需要跟服务器实现交互，因此牵扯不到服务器的编程，这种方法只能将html页面加载到页面dom元素里，这个方法就是.load的方法，想在华夏做的swatch专题，是通过触发事件，显示隐藏的div的方法，这里可以通过这个.load的方法将目标html页面加载到，预先设置好的dom元素里。

先看演示

html代码：

------------------html----------------------

</div>
</body>

-------------------html------------------------

css代码：

-------------------css------------------------

-------------------css------------------------

jquery代码：

-------------------jquery------------------------

< script language="java script ">
$(document).ready(function(){
$(".button").click(function(){
$(".mc_in").html("正在载入数据...");
$(".mc_in").load("http://www.xpdesigner.com.cn/f2blog")

});

});
</ script >

-------------------jquery------------------------

2.jQuery 导航美化插件 - Lavalamp

应该有人会对淘宝 UED Blog 的导航栏印象深刻。其实借助 jQuery 和 lavalamp 插件，我们也可以制作出一模一样效果的导航栏。动态鼠标跟随效果不但视觉上比纯 CSS 布局来得漂亮，导航指示能力也更为突出。

先看演示。

然后我开始说怎么把它放到 Wordpress 模板里去。

Step 1. 引入 jQuery 框架：

< script type='text/java script ' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js?ver=1.2.6'></ script >

*注：Wordpress 自带有 jQuery 框架，但从 Google 引用的版本体积更小、载入速度更快。

Step 2. 引入 lavalamp 和 easing 效果插件：

< script type='text/java script ' src='http://ishawn.net/jQuery/lavalamp.min.js'></ script >
< script type='text/java script ' src='http://ishawn.net/jQuery/easing.js'></ script >

*注：访问插件作者的主页需翻墙，所以我把这两个文件暂存于 Shawn Blog。如果你打算长期使用，请将这两个文件下载并放到你自己的服务器上。

Step 3. 布置效果到元素：

< script type="text/java script ">
/* <![CDATA[ */
$(function(){$(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
/* ]]> */
</ script >

*注：$(".lavaLamp") 对应的是导航栏的类，即此处假设你模板里的导航栏为 <ul class="lavaLamp">。speed 为滑动速度，单位是毫秒，数值越大效果越平滑，但"反应"也会跟着变慢。

Step 4. 写 CSS

.lavaLamp{
position: relative; /*--重要--*/
background-color: white;
margin: 10px 0; /*--对IE很重要--*/
}
.lavaLamp li{
float: left; /*--重要--*/
list-style: none;
}
.lavaLamp li.back{
border-bottom: 5px solid red;
width: 9px;
height: 20px; /*--较为重要--*/
z-index: 1; /*--较为重要--*/
position: absolute; /*--重要--*/
}
.lavaLamp li a{
color:#000;
z-index: 2; /*--较为重要；如修改，数值必须大过上一个 z-index --*/
font-variant:small-caps;
text-decoration:none;
position: relative; /*--重要--*/
margin: auto 10px;
}

*注：仍然假设你的导航栏为 <ul class="lavaLamp">，其中标注"重要"的条目是绝对不能去掉的，而"较为重要"的则不建议去掉但可根据需求修改。

以上四步便是布局动态导航栏的全部内容，心里有谱之后你就可以开动了。最后感谢作者带来这么轻便实用的 jQuery 插件，压缩版本体积仅为 700 字节左右，使用后也不会拖慢你 Blog 的载入速度。

3.jQuery循环滚动展示代码

这个效果有点类似与我做的华夏银行swatch专题的图片切换效果，

循环滚动展示的文字和图片每个人都见过，实现类似效果的 JS 也很多。但如果只用于几个条目或三五张图片，体积庞大的 JS 会浪费资源。看见 Jinwen 同学用 Adam Cai 的代码，感觉稍显复杂而且不够 jQuery。我用只依靠 jQuery 入门的思路写了一版，代码更少使用也更简单。

先看演示。

使用之前，先插入 jQuery 框架( 直接从 Google 拿 )：

< script type="text/java script " src="http://ajax.googleapis.com/ajax/libs/jquery
/1.2.6/jquery.min.js"></ script >

JS 代码( 以 < script type="text/java script "></ script > 包裹，或者保存成单独文件引用。)：

$(document).ready(function(){
$("#sItem li:not(:first)").css("display","none");
var B=$("#sItem li:last");
var C=$("#sItem li:first");
setInterval(function(){
if(B.is(":visible")){
C.fadeIn(500).addClass("in");B.hide()
}else{
$("#sItem li:visible").addClass("in");
$("#sItem li.in").next().fadeIn(500);
$("li.in").hide().removeClass("in")}
},3000) //每3秒钟切换一条，你可以根据需要更改
})

HTML 部分：

<ul id="sItem">
<li>文字或图片</li>
<li>文字或图片</li>
<li>文字或图片</li>
</ul>

条目不限，内容不限，将需要循环滚动展示的条目放置于 <ul id="sItem"> 中就可以了。

4.jQuery 编写滚动标语或者图片的代码

演示：jQuery滚动效果

jQuery让Java script 代码变得简单，这里将介绍如何用它来实现滚动的标语，新闻，或者图片，等等。

Java script 代码:

/*jquery.js可以在jQuery.com下载，当然你也可以用我的这个*/

< script type="text/java script " src="/js/jquery.js"></ script >

< script type="text/java script ">

/* 滚动文字应用Jquery ** By Adam Cai ** http://www.61dh.com */

var a=0;

var b=1;

var t;

$(document).ready(function(){

t= setInterval("roll(a,b);", 3000); //时间间隔为3秒

});

function roll (off,on){ clearInterval(t); var $firstNode = $('#motto>p'); //#motto 是DIV的ID,'p'是该区间的段落

$firstNode.eq(off).fadeOut('slow',function(){ $firstNode.eq(on).fadeIn('slow'); });

if(on==($('#motto>p').length-1)){ a=on; //on 指DIV里最后一个P b=0; } else if(off==($('#motto>p').length-1)){ //当最后一个准备关闭，a, b 重新赋值 a=0; b=1; } else{ a++; b++; } t = setInterval ("roll(a, b);", 3000); } </ script >

HTML：

运用：只要把要滚动的文字，新闻，或者图片，放在<p></p>之间就可以了。第一个p的display设为‘block’，其它的设为‘none’。当页面装载完毕，上面的Java script 脚本就会自动更改display的属性，实现滚动效果。

5.jQuery 页面载入进度条

页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。

上图展示了传统 Wordpress 模板在浏览器中的载入顺序，Loading 条的出现和消失分布于头尾。

如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。

先来看一个演示：地址。

要得到演示上的进度条效果，

首先，引入 jQuery 框架(一定要放在页头 <head> 标签内)。

然后在 <body> 标签起始位置放置：

CSS 可以这么写：

#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}

准备工作到这里就做好了。

接着，请随意发挥，依照你对图二的理解，在模板各个部分的适当位置放置：

< script type="text/java script ">
$("#loading div").animate({width:"16px"})
</ script >

其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：

< script type="text/java script ">
$("#loading").fadeOut()
</ script >

用于载入完毕后隐藏进度条。

标签: jquery

类别: my javascript study | 引用: 0 | 评论: 0 | 阅读: 476 | 转发

华夏卡商城开发的三个效果的js整理

作者:涩斑鸠日期:2009-02-20 12:22

1.鼠标滑过对象显示隐藏层的代码

效果图：

<html> 文件的内容：

<span style="font-size:36px; font-weight:bold; color:#FF3300;">html文档中的对象</span>

</div>

<div id="divTest" style="display:none; font-size:24px; color:#0000FF;">文档中隐藏的层</div>

<js>文件：

< script language="java script " type="text/java script ">

    
    </ script >

2.轮转div显示不同tab内容：

效果图：

<html>文件的内容：

</ul>
</div>

<js>文件：

< script language="java script ">
function divTags(tagID)
{
    var divOne = document.getElementById('divOne');
    var divTwo = document.getElementById('divTwo');
    var divThree = document.getElementById('divThree');
    var divFore = document.getElementById('divFore');
    var divFive = document.getElementById('divFive');
    var divSix = document.getElementById('divSix');
    var divSeven = document.getElementById('divSeven');
    var divEight = document.getElementById('divEight');
    var divNine = document.getElementById('divNine');

    var Categorys;
    if(tagID==1)
    {

3.首页中间轮转广告的js效果：

效果图：

<html>文件的内容：

<div style="width:482px; height:172px; overflow:hidden; border:0" id="newsTable">
    <div style="width:482px;">
          <a onmouseover="java script :displayStatusMsg();return document.returnValue;" onmouseout="status='';" href="java script :jump2url()">
            <img style="filter: revealTrans(duration=1,transition=18); " src='http://192.168.1.68:5036/AvertisePic/Image2008102117318.jpg' width="482" height="172" border="0" name="imgUrlrotator" id="imgUrlrotator"/></a>
         </div>
    <div style="width:160px; position:relative; bottom:22px;left:390px;">
        < script language="java script ">dakularButtons();nextAd();</ script >
    </div>
</div>

<js>文件：

< script language="Java script ">
    var imgUrl=new Array();
    var imgLink=new Array();
    var imgTz=new Array();
    var buttonPos=1;
    var buttonX;
    var buttonY;
    var bakularCode=""
    var adNum=0;
    var dakularCode="";
    var theTimer;

    //----imgUrl:   图片路径
    //----imgLink: 链接地址
    //----imgTz:    图片标题
    imgUrl[1] = 'http://192.168.1.68:5036/AvertisePic/Image2008102117318.jpg';imgUrl[2] = 'http://192.168.1.68:5036/AvertisePic/Image20081021173310.jpg';imgUrl[3] = 'http://192.168.1.68:5036/AvertisePic/Image20081027132439.jpg';imgUrl[4] = 'http://192.168.1.68:5036/AvertisePic/Image2008102713256.jpg';imgUrl[5] = 'http://192.168.1.68:5036/AvertisePic/Image20081027132525.jpg';
    imgLink[1] = 'http://192.168.1.68:5036/ProductShow/Channelindex.aspx?id=104';imgLink[2] = 'http://192.168.1.68:5036/ProductShow/ProductDetailShow.aspx?id=14';imgLink[3] = 'http://192.168.1.68:5036/ProductShow/Channelindex.aspx?id=104';imgLink[4] = 'http://192.168.1.68:5036/ProductShow/Channelindex.aspx?id=104';imgLink[5] = 'http://192.168.1.68:5036/ProductShow/Channelindex.aspx?id=104';

标签: 网页标准技术支持,网页标准,设计制作,css技巧,css常用属性

类别: my javascript study | 引用: 0 | 评论: 0 | 阅读: 78 | 转发

Web设计中的黄金分割

作者:涩斑鸠日期:2008-12-31 10:19

数学是优美的. 听上去有点奇怪? 当我第一次开始设计的时候，我确信如此。数学如此刻板乏味。你可能会惊讶的发现，最美观的设计，艺术作品，物体，甚至人都有数学上的共同点。尤其是黄金分割，也被称为神之比例，希腊字母表示其为 Φ (phi). 本教程会剖析一个网站的布局，以及如何对其黄金分割。

作者: Jarel Remick

是ThemeForest的一名作者，在Moscow, Idaho.

网页骨架

这些是web页面的主要元素。有很多不同的方法去组织它们，但是这种布局也许是最常用的。

Container

所有的web页面都用一个container，主要是为了同一个目的：去包含一些页面元素，然而这个方法实现各有不同。例如，body标签或者是最常用的div。甚至于过去常用的table（不要使用table作为你的container，这是一个破方法）。想想container作为你房子的外墙，里面包含卧室，厨房，起居室等等。

container的类型:

Liquid: 根据浏览器宽度填充。
Fixed: 指定的宽度，并不会根据浏览器宽度改变。

Header

header并不真的是一个特定的元素，尽管某些人会认为它是。它更多是用在涉及到你放置你的logo，导航栏，tagline的web页面顶层的地方。许多人更愿意把这些元素包含在一个div里以方便使页面样式和内容分离。header会被视为一个container，所以它有两种类型选择，就是上文提到的 liquid 或 fixed 。

Logo

你的logo是你的身份和品牌。最常用的是把logo放在你header的左上角。我们的阅读习惯是，从左往右，从上至下，所以你的log应该放在访问者第一眼能看到的地方。

Navigation

页面导航是最重要的元素之一;你的访问者需要用它来使用你的站点。它应该是容易被找到且易用的，这就是为什么大多数的人把它放在header部分，最少也是在页面顶端附近的原因。

navigation类型:

Horizontal: 水平显示，被称为‘navigation’。
Vertical: 垂直显示，被称为‘menu’

Main Content

每个人都（应该）知道，内容才是王道！当人们来参观你的站点，这是他们想看的主要元素。它应该是web页面的焦点，所以参观者才能快速找到他们想要的。

Sidebar

sidebar是放置你次要内容的元素，像一些广告，站点搜索，订阅链接(RSS, Twitter, Email, 等), 联系方法等。这个元素不是必需的，尽管右很多站点用它。它大多数是放在右边的，但是你也能把它放在左边或者两边，只要不扰乱主要内容的浏览就行。网站使用横向或纵向导航，sidebar往往是用纵向导航。

Footer

web页面的尾部总会有一个页脚，让您的访客知道他已经到达了你web页面的结束部分。和heaser一样，footer也不是一个特殊的元素。在你的页脚里包含版权，法律声明以及主要的联系方式。包含一些重要的链接是个好主意，比如home page, contact page, 等. 有些网站用这个区域提供一些相关材料或者其他重要信息。

"Whitespace"

你可能有强烈的愿望去填充这些页面上的空白，但是请不要这么做。“空白”也是相当重要的。你可以看看NetTuts网站是如何有效的使用空白区域的，创建了页面平衡给人一个好的感觉。

以上是web页面的骨架，现在我们来看如何黄金分割这些元素。

黄金分割和使用网格（Grids）

还记得之前我说数学是美丽的吗？我们认为视觉的吸引力是基于比例的（比如，黄金分割）。几千年来，艺术家，设计师，建筑师等都有意无意的在使用了一个共同的比例来增加他们作品的美感。这个神奇的数字是什么呢？ 1.62 (实际是 1.618...) 我不会说这个数字的起源，但是我会告诉你如何使用它。

使用黄金分割是非常简单的。比如你像找到你主要内容和sidebar列表的宽度。你将使用你内容区域总的宽度除以 1.62. 然后得到555.55px. 我们不需要那么精确，所以我们就用555px。现在你就知道你的主要内容元素是555px的宽度，你的sidebar是345px。看看多么容易？！

但是等等先，乐趣不止于此！你也可以应用黄金分割到其他元素的宽度和高度。

Using Grids

如果你和大多数的人一样，不想每次都抱着个计算器来计算这个黄金比率。那么最简单的方法就是用grid。所以你需要做的就是把你的宽度或是高度分成三分。

要产生更详细的gird，只需要继续三等分就行。如果你读了前一篇文章“与Blueprint CSS框架的亲密接触”的话，你会看到Blueprint CSS框架用了一个详细的gird系统。不仅仅是gird设计更容易更快，而且它也创建了一个美观的布局。如果你还没有使用gird设计，那么这是一个很好的尝试机会。你可以为fireworks，photoshops或者其他软件从 http://960.gs下载grid模板。

正如你看到的，NetTuts很好的遵循了黄金比率。顶端三分之一的网页再次分成了三分，非常接近黄金比率。难怪NetTuts的设计是如此吸引人！

如果你要做一个新的设计，我严重推荐你找一些流行的站点，评价他们的布局，以及如何应用黄金比率和gird。然后花一些时间去实践使用黄金分割，并在你的布局上面使用gird。

标签: 构图设计制作技术支持技术支持,网页标准,设计制作,css技巧,css常用属性

类别: ui设计 | 引用: 0 | 评论: 1 | 阅读: 132 | 转发

1 2 3 4 5 6 7 8 > >|

作者:涩斑鸠 日期:2008-11-24 19:52

作者:涩斑鸠 日期:2008-10-31 09:11

作者:涩斑鸠 日期:2008-08-25 00:10

作者:涩斑鸠 日期:2008-08-17 08:02

作者:涩斑鸠 日期:2009-06-01 17:03

提升网页和博客设计品质的一些实例和技巧

01. 留白

出色的留白处理的实例

Good.is

Digital Mash

Creatica Daily 的大量空白

Postbox 上也有很多空白

留白时的错误

留白不够的例子

高效控制留白的技巧

02. 像素级的完美

像素级完美细节的实例

Envato的细节鉴赏

Tutorial9.net上的细节

RedBrick Health上 按钮和分割线上的完美像素级细节

完美像素级细节也适用于Grunge风格: AvalonStar

完美细节小贴士

03. 文字排列与字体选用的诀窍

仔细考虑了字体的实例

The Netsetter上大而漂亮的字体

行间空白和字符间距

Web Design Ledger, 配合情绪的字体

网页设计中字体选用的快速决断

04. 元素的组织

靠设计做买卖: 37Signals

为内容(Blog)而设计: Well Medicated

组织内容小贴士

05. 自我克制与精妙细节

“Things”网站上的柔和渐变

Icon Dock 上的投影

精细的背景材质：Scouting for Girls

做旧与撕碎的启发： Viget Advance

WebDesignerWall 上的水彩效果

精妙的植物：Dara’s Garden

运用精妙细节的小贴士

06. 发挥色彩的全部潜能

网页设计中色彩运用的绝妙例子

无趣并不代表无色：Oypro

让色彩相互联系：Tennessee Summertime

背景还可以大作文章：Saturized Studio

在网页设计中运用颜色的小贴士

07. 做别人没做过的事

MB Dragan 上的独特导航

Visualbox(视觉盒子) 非常视觉化的导航

废话不多说的Nikola Mircic

实践新鲜想法的小贴士

对于高品质设计你有什么看法？

推荐阅读(均为中文译文)：

关于作者与译者

作者:涩斑鸠 日期:2009-02-25 14:06

作者:涩斑鸠 日期:2009-02-20 12:22

作者:涩斑鸠 日期:2008-12-31 10:19

作者: Jarel Remick

网页骨架

Container

Header

Logo

Navigation

Main Content

Sidebar

Footer

"Whitespace"

黄金分割和使用网格（Grids）

Using Grids

用户面板

作者:涩斑鸠日期:2008-11-24 19:52

作者:涩斑鸠日期:2008-10-31 09:11

作者:涩斑鸠日期:2008-08-25 00:10

作者:涩斑鸠日期:2008-08-17 08:02

作者:涩斑鸠日期:2009-06-01 17:03

RedBrick Health上按钮和分割线上的完美像素级细节

作者:涩斑鸠日期:2009-02-25 14:06

作者:涩斑鸠日期:2009-02-20 12:22

作者:涩斑鸠日期:2008-12-31 10:19