2009年4月2日星期四

壓力管理系列 7 “善待自己”

不要看自己過於所當看的, 要照著神所分給各人信心的大小, 看得合乎中道 - 羅馬書第十二章第三節

壓力管理系列 7  “善待自己

紀惟明 主講   整理

    我有一位朋友非常忙碌,但他總能從容不迫,因為他的時間管理非常良好,將時間用得分秒必爭。我們兩人常有機會出席同樣會議,我發現他應邀到某處不總是全程參加,但他會在必要時刻出現以表達他的意見,因此他可以在短時間內同時完成多樣的事。許多看來沒壓力的人,其實是因為有良好的時間管理習慣而來。壓力常是由錯誤的生活習慣造成,每個人都很忙,但有人忙得沒壓力,有人則忙得很有壓力。「學會善待自己」,是一種能幫助我們減壓的良好生活習慣。

尊重限制才能善待自己

    許多感到壓力罩頂,逃躲不掉的人,其實往往是對自己不夠仁慈所導致,這種人不是對自己要求太多,就是不認識自己的極限,沒有節制的擠壓自己的時間及體力。聖經說,人的才幹是上帝賜的、每人潛力不同。我們要忠心發揮才幹,既不要小看自己,也不要自誇或高估自己的能力。瞭解並尊重自己的極限,是一種尊重自己、也尊重上帝的態度。聖經新約羅馬書裡,提到我們各人要按著信心的大小,看自己合乎中道。我們要妥善運用自己的才幹,不要為了討人的喜悅,而接受超過自己極限的事情。因為這樣會使我們總是把自己處於緊繃狀態,最後可能心力耗竭而枯。

尊重時間和體力的限制

    所謂尊重自己的限制,不僅包括才幹,也包括工作時數的限制。醫學研究證實,人體每日都固定在凌晨進行修復,沒日沒夜的工作違反身體休息的自然律,過度操勞就是不尊重自己生理的限制,會帶給健康莫大的損害。蠟燭是要謙卑的長燒好呢?還是要兩頭燒只發出短暫的光芒?聖經說上帝為我們劃定生活的疆界,使我們能在其中尋求祂。我們每個人都有生活的界線,可支配的時間是其中之一。上帝並不是兇惡的主人,待我們如奴僕,不允許我們休息。如果我們的工作忙碌到沒有時間休息,這一定不是上帝的旨意,而是我們自己的問題。舊約聖經屢屢提到以色列民族,因為不遵守安息日而被上帝懲罰。為何安息日如此重要?關於安息日的誡命,其實含有屬靈與道德的意義。因為當猶太人在安息日忙於工作、賺錢,不敬拜上帝時,他們的生活重心便開始偏向滿足自己的貪婪物慾。這就種下他們在道德上讓步的惡因,猶太人並因此逐漸遠離其他的道德誡命,成為貪腐的民族。

生活疆界保護我們

    生命中有些限制,對我們有保護作用。如果我們超越這些限制、不尊重限制,甚至挪移我們的疆界,我們的生命就會受到嚴重虧損。讓自己忙得像陀螺一般,沒有休息的時間,是不正常的,是不尊重生命的限制。當別人向我們提出請求時,我們並不需要通通答應,而應該依優先次序、工作目標來抉擇,忠於我們的使命和所託是需要紀律取捨的。我剛退休、成為自由工作者時,對於一切的邀約都來者不拒,漸漸我發現時間被邀約蠶食,疲於奔命,完全沒有自己的時間。於是我開始以我的才幹、使命、及上帝託付來決定接受或拒絕哪些邀請。忠於使命及尊重上帝所設的界限,成為我時間分配的準繩。我很高興,我現在能夠樂在工作,也樂在生活。有些人擅自挪移自己的時間限制,其實背後深藏一種貪婪與不信的心。或想要獲得更多、或不滿現狀、或因為憂慮明天、或因為不信上帝會供應我們所需。

有所為,有所不為

    很多人告訴我,他過於忙碌是身不由己,因為老闆或主管所交付的事情無法拒絕。但這樣的人,有不少到最後因為健康流失、情緒沮喪、家庭關係破裂、和上帝漸行漸遠,感到人生虛空,而仍然選擇了辭職。這是不尊重自己界線的人,可能終就會經歷的過程。知道自己的界限才能有所為,有所不為。不讓貪婪、競爭、嫉妒、不服輸等因素,使我們挪移自己的地界。人生是一連串的選擇,你要讓誰主宰你的人生?老闆還是上帝?可曾想過,當有一天歇了地上重擔、到天堂見上帝時,上帝卻說:「抱歉,你所忙碌的那百分之九十,都和我交給你的使命無關,因此沒有獎賞。」你該如何面對?這好比年終時,老闆對我們進行績效考核,我們自認做牛做馬一整年,但老闆卻毫不肯定我們的表現,因為沒有把他認為最重要的事情辦妥。職場上,少有「用苦勞換功勞」的情況。因此我們最好學會善待自己,尊重神所設的疆界,別想越過自己的限制,以免到最後,我們可能是得不償失。(本文部分整理自彭蕙仙主持,每週一0800-0900播出的「展翅上騰-成功在握」節目內容)

10个优秀的Ajax及Javascript实例资源网站

今天,要向大家推荐10个相当棒的Ajax和Javascript国外资源网站或博客,它们提供了相当多的高质量Ajax、Javascript实例及教程,喜欢Ajax和Javascript的朋友绝对不能错过。

1.Ajax Rain 

 

AjaxRain有很多完美整合AJAX, CSS, DHTML 或 Javascript的实例,有一些Demo的确值得你去看一看,即使你不是网页设计(开发)师。

2.Ajax Daddy 

ajax-javascript-教程 

Ajax Daddy收集了大量漂亮的Web2.0工具,其中一个使用的功能就是,在你把某个Ajax/Javascript实例应用在自己的网站上之前,你可以在它上面先看看效果演示。

3.Mini Ajax 

ajax-javascript-实例 

MiniAJAX 是一个新生的网站,收集了少许 DHTML 和 AJAX 脚本, 它的代码片段风格非常实用。

4.Ajaxian 

ajax-javascript-源码 

一个接近于门户类型的AJAX资源站点,包括Ajax示例收集,博客,论坛和教程等等。

5.DHTML Goodies 

ajax-javascript-教程 

DHTML Goodies是一个收集了大量DHTML、Ajax脚本、Demo和教程的网站。脚本范围涵盖从导航菜单、窗口、日历到图片集合。

6.Javascript Kit 

ajax-javascript-资源 

收集了大量的Javascript教程及脚本资源,当然也有DHTML、CSS和网页设计教程和一个设计师帮助论坛。
 7.Dynamic Drive 

ajax-javascript-源码 

一个我常去的 JavaScript和 CSS资源网站,即使你是初学者,也能找到DHTML、Javascript、客户端脚本详细的指导。

8.DHTML Site 

ajax-javascript 

你能从DHTML Site找到大量游泳的AJAX及DHTML脚本及教程,脚本涵盖页面效果、工具技巧、拖拽式日历、窗口特效及图片集效果。
 9.Solutoire 

ajax-javascript-资源 

这个网站收集了相当多且很棒的javascript和ajax的实例及教程. 还有很多 jQuery、Scriptaculous、mootools等Javascript框架。

10.DevSnippets 

ajax-javascript-资源 

收集了大量Ajax, javascript和CSS资源,在这里你可以提交自己喜欢的Ajax和Javascript实例,也可以为你喜欢的实例投票。(英文:devsnippets.com 中文:cnblogs)

2009年4月1日星期三

CSS+JS仿苹果导航栏

文章来自:http://www.upsdihtml.com/skill/skill.asp?skillid=88
推荐一个强人的作品,CSS+JS制作的仿苹果导航条


先把下载和预览的地址贴出来:点击下载 效果预览

我把步骤写下来
在页面头部标签<head></head>中加入下面的代码

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

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

第一部分是JavaScript,第二部分是CSS样式表,第三部分是针对IE6.0的PNG的hack 。

不要忘记把下面的代码加入到<body>标签中
<script type="text/javascript">
$(document).ready
(
function()
{
  $(’#dock2′).Fisheye
  ({
   maxWidth: 60,
   items: ‘a’,
   itemsText: ’span’,
   container: ‘.dock-container2′,
   itemWidth: 40,
   proximity: 80,
   alignment : ‘left’,
   valign: ‘bottom’,
   halign : ‘center’
  })
}
);
</script>

把下面的代码加到合适的地方,比如头部或者底部注意:span标签一定要在img标签后面
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

浏览器兼容性
我已经在IE 6, IE 7, Opera 9, Firefox 2, Firefox 3 and Safari 2上测试通过。

35款漂亮且用户友好性很强的CSS导航按钮

可用性是任何网站的一个目标,而实用性很强的导航栏却是每个网站必须的。它决定着用户被引导到哪里和用户如何与网站互动。如果没有一个可用性很强的导航栏,内容会变得毫无价值。导航按钮要非常容易让用户理解,而且要具有很强引导性以至于用户不会迷路。

以下35款导航栏,均是CSS导航栏,这些站长为什么这么设计,仔细想想,相信你会有一定的收获^_^


Loodo
一款多彩的按钮,让页面看起来特有感觉

Screenshot



Acko.net
Steven Wittens的这款导航按钮源自一个独特的想法

Screenshot



Web Design Ledger
Web Design Ledger 又有一款很棒的按钮,按钮个头比较大,但是对页面的内容没有一点影响

Screenshot



UX Booth
UX Booth在导航条的下面放置了一个文本框,放入按钮的描述性文字

Screenshot



Nopokographics
在网页上,垂直导航条很少用,原因很简单,因为他们太难用了,但是仍旧有一些富有冒险精神的设计师运 用一些不寻常的设计方法。Nopoko Graphics用箭头和悬垂效果来实现垂直导航条。

Screenshot



Icon Designer
这个网站在首页上用了超大的图片按钮,更便于用户将注意力集中到按钮上面。

Screenshot



Cosmicsoda
这款导航按钮个头也是比较大,为了便于用户更好的定位按钮(更准去去的点击自己选择的按钮),运用了 一点悬挂效果。

Screenshot



Designsensory
一款drop-down风格的导航栏,运用了两种颜色效果来体现处于激活状态(active)的按钮和未激活按钮。

Screenshot



Smallstone
Smallstone, 美国的一唱片公司,它们的网站运用了一种被称为Space Echo Roland SE-201的机器的界面。

Screenshot



TNVacation
非常困难找到一个令人满意漂亮的drop-down按钮,但是这款按钮是个例外。

Screenshot



Clearleft
Clearleft用两张纸作为导航栏

Screenshot



45royale
一款简单、整洁、漂亮的具有悬垂效果的导航栏

Screenshot



Design Intellection
一个相当棒的块状导航栏,告诉你怎样才能让导航条“说话”,向用户传递有效的信息,悬垂效果怎样运用 到简约风格的导航栏上。

Screenshot



Ronnypries.de
一款非传统的风格的导航栏,Ronny Pries运用房屋平面图来引导用户访问页面。

Screenshot



Jiri Tvrdek
Jiri Tvrdek 的导航栏就像树叶一样,很有创意,非常独特,值得借鉴,令人难忘。

Screenshot



Water’s Edge Media
Patricia Abbott把晾衣服的夹子运用到了导航栏上,有想法.

Screenshot



Matt Dempsey
Matt Dempsey 将其要强调的内容运用笔刷效果,相当不错,赞一个。

Screenshot



Cognigen
激活状态的按钮处于被按下去的效果,简洁且立体感强。

Screenshot



District Solutions
垂直风格的虽然很少用,但是他们的我很看好!

Screenshot



Jayme Blackmon
Jayme Blackmon 看起来就像去选择标签一样。

Screenshot



Jeff Sarmiento
在某些时候为什么不去尝试一下非对称倾斜的导航栏呢?

Screenshot



Studioracket
一个很特别的导航栏,运用了一些思维图的方式,除此之外,导航栏上的所有按钮均是手绘!

Screenshot



Cultured Code
用微妙的变化来与旁边的内容区分开来,出色的配色和悬浮效果。

Screenshot



Nando Designer
运用手写风格的按钮与一张纸组成网站的导航条

Screenshot



Bonfiremedia
有时候只需要文字就足够了…

Screenshot



Artgeex
多彩形象生动。

Screenshot



Gloobs
有时候设计师会将印章效果融入到导航栏。

Screenshot



South Creative
这个网站运用大个导航按钮及很妙的光影效果。

Screenshot



Mac Rabbit
一款大气且整洁的导航栏,并运用了一些图标帮助读者意识到每个项目的含义。

Screenshot



RapidWeaver
这款导航栏光滑整洁,很有质感,同时二级菜单采用了半透明效果。

Screenshot



DFW UPA
图标的运用增强了导航栏可读性,更便于用户理解。

Screenshot



Revolution Driving Tuition
根据这个网站的“垃圾”风格,导航栏的风格运用的恰到好处。

Screenshot



Duarte Pires
这款导航栏特别靠近网页的主题内容,这样就便于实用。它运用大图标来增强可视化效果,虽然这些图标也 运用在了其他页面,这么做可使页面风格统一,尽管这些按钮不是太好看,但是设计师运用的很到位!

Screenshot



Valetin Agachi
这款导航栏在强调激活状态的按钮时采用的风格与其他的很不一样,但是却很好的和页面整体风格统一。

Screenshot



Tutorial9
Tutorial9 最近进行了一次从新设计, 具有很强的可用性和页面协调性。

Screenshot

基于 CSS 的 ASCII 艺术

ASCII 艺术是一种使用计算机可打印字符(一般为ASCII码中的96个可打印字符)表现图形的一种技术,传统的 ASCII 艺术基于 HTML 代码,然而由于不同浏览器的差别,在一种浏览器下可以完美显示的 ASCII 艺术,到了别的浏览器就面目全非,Web2.0 时代,应该多在 CSS 上做文章,因为目前主流浏览器对 CSS 的支持都非常一致,使用 CSS 实现 ASCII 艺术可以更好地保持不同浏览器间的兼容。

下面这个图很难想象是用 ASCII 艺术做出来的,当然为了简便,我使用的是图片,原始 ASCII 艺术版可在这里看到

jpeg2css 是一个非常有趣的程序,你提供一副黑白的 JPG 图片给它,几秒种之内,可以为你生成一个 HTML 网页文件,你可以在该网页上看到和源 JPG 图片几乎一模一样的 ASCII 艺术图形,而且是基于 CSS 的,你不用担心该 ASCII 艺术在不同浏览器间的兼容问题。

更多基于 CSS 的 ASCII 艺术CSS 原始版可以在这里看到

jpeg2css 下载地址:
http://www.romancortes.com/ficheros/jpeg2css.zip

本文素材来自:http://www.romancortes.com/blog/tag/css/
COMSHARP CMS 官方网站编译

CSS纯英文数字自动换行

当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行,如下图

自动换行

并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识一下两位主角word-wrap和word-break

word-wrap用来控制换行
两种取值:
(1)normal 
(2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。)

word-break用来控制断词
三种取值:
(1)normal
(2)break-all(是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。)
(3)keep-all(是指Chinese, Japanese, and Korean不断词,一句话一行,可以用来排列古诗哟~)

【解决方法】
可以在CSS中加入
word-wrap:break-word;
word-break:break-all;

53个不能不会的CSS技术

CSS的重要性逐渐被大家认同,CSS具有很多表格布局页面不存在的特点,比如更新网站,换一种风格,我们只需要修改CSS文件就可以了。

在过去几年,页面开发者谢了很多有用的CSS技术,如果你能及时的应用那可是能节省你不少时间,下面的“53款不能不会的CSS技术”,可以让你的开发变得更加轻松容易。

 

1. CSS Based Navigation

CSS-Technique

2. Navigation Matrix Reloaded

CSS-Technique

3. CSS Tabs

CSS-Technique

4. CSS Bar Graphs (CSS For Bar Graphs)

CSS-Technique

5. Collapsing Tables: An Example

CSS-Technique

6. Adam’s Radio & Checkbox Customisation Method

CSS-Technique

7. CSS Image Replacement

CSS-Technique

8. CSS Shadows (CSS Shadows Roundup)

CSS-Technique

9. CSS Rounded Corners Roundup (Nifty Corners)

CSS-Technique

10. Drop Cap - Capital Letters with CSS

CSS-Technique

11. Define Image Opacity with CSS

CSS-Technique

12. How to Create a Block Hover Effect for a List of Links

CSS-Technique

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS

CSS-Technique

14. CSS Diagrams

CSS-Technique

15. CSS Curves

CSS-Technique

16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.

CSS-Technique

17. CSS Image Map

CSS-Technique

18. CSS Image Pop-Up

CSS-Technique

19. CSS Image Preloader

CSS-Technique

20. CSS Image Replacement for Buttons

CSS-Technique

21. Link Thumbnail

CSS-Technique

22. CSS Map Pop

CSS-Technique

23. PHP-based CSS Style Switcher

CSS-Technique

24. CSS Unordered List Calender (CSS Styled Calender)

CSS-Technique

25. CSS-Based Forms: Techniques

CSS-Technique

26. CSS-Based Tables: Techniques

CSS-Technique

27. Printing Web-Documents and CSS

CSS-Technique

28. Improved Links-Display for Print-Layouts with CSS

CSS-Technique

29. CSS-Submit Buttons

CSS-Technique

30. CSS Teaser Box

CSS-Technique

31. CSS Tricks for Custom Bullets

CSS-Technique

32. Ticked Off Links Reloaded

CSS-Technique

33. CSS Zooming

CSS-Technique

34. Creating a Star Rater using CSS

CSS-Technique

35. The ways to style visited Links

CSS-Technique

36. PDF, ZIP, DOC Links Labeling

CSS-Technique

37. Displaying Percentages with CSS

CSS-Technique

38. Image Floats without the Text Wrap

CSS-Technique

39. Let visitors decide, whether or not will they open link in a new window

CSS-Technique

40. Simple accessible external links

CSS-Technique

41. Zebra Table with JavaScript and CSS

CSS-Technique

42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS

CSS-Technique

43. Unobtrusive Sidenotes

CSS-Technique

44. Image Caption with CSS (Styled Images with Caption)

CSS-Technique

45. Dynamic Piechart with CSS

CSS-Technique

46. Format Footnotes with CSS

CSS-Technique

47. Hierarchical Sitemap with CSS

CSS-Technique

48. Snook’s Resizable Underlines

CSS-Technique

49. Switchy McLayout: An Adaptive Layout Technique

CSS-Technique

50. StyleMap: CSS+HTML Visual Sitemap

CSS-Technique

51. Custom Reading Width

CSS-Technique

52. CSS Alert Message

CSS-Technique

53. CSS Production Notes

CSS-Technique


读完这篇文章,我们还建议你读读下面的文章:

CSS教程:简化CSS中属性

CSS常见HACK/ie5/ie6/ie7/firefox

CSS命名规则

IE6浮动高度多出1px

20个网站帮你学习CSS