2011 十二月 | 田园牧歌

十二

30个非常有吸引力的黑色网站设计作品

　　黑色是网页设计中常用的颜色之一，运用恰当的话能够让网站看起来非常有创意。一些个人作品网站、珠宝和摄影网站为了突出内容和设计风格常会选择黑色，黑色代表着深邃、神秘、暗藏力量，是一种具有多种不同文化意义的颜色。今天的文章收集了30个优秀的黑色风格网站设计作品与大家分享，一起欣赏。

1. One Fashion Outlet

2. Oskowalik

3. Fingerboardy

4. Mutantlabs

5. Airforce

6. Teodora

7. Yurbuds

8. Daniel Diggle

9. Dallas Young Artists

10. Atom

11. Kisko Labs

12. Moresoda

13. Teatroatomico

14. We Heart Quotes

15. Nayakun

16. Lights Over Paris

17. Theee Studio

梦想天空博客关注前端开发，展示最新HTML5和CSS3应用，分享jQuery插件，推荐优秀网页设计案例。

18. Crafton

19. Njosnavelin

20. Webwork Studio

21. Ivancotado

22. Blackbody Oled

23. Vibin Balan

24. 333 Propaganda

25. Paul Mitchell Kelly

26. Fsdsign

27. Riffraff

28. Labubulle Studio

29. Synthesize Malaga

30. Crssrd

31. Northern Bee Auctions

您可能还喜欢

英文链接：30 Most Attractive Black Color Website Designs

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者: 梦想天空（山边小溪）发表于 2011-12-03 13:13 原文链接

评论: 5　查看评论　发表评论

最新新闻：
· 调查称Kindle Fire Q4将“一人之下万人之上”(2011-12-03 22:34)
· 刘强东：京东员工持股超自己持股的70%(2011-12-03 22:32)
· 戴尔Streak 7平板停售(2011-12-03 22:26)
· 10款非常棒的开源论坛系统(2011-12-03 22:24)
· Napster即将关闭(2011-12-03 22:07)

编辑推荐：LINQ之路

网站导航：博客园首页我的园子新闻闪存博问知识库

原文来自：博客园-梦想天空

十二

世界最佳35个精心设计的大学网站

　　大学需要一个优秀的网站用于吸引新生和为在校学生服务。一般来说，大学网站都具有很多的功能，例如发布新闻通知、招生信息、学生信息、课程信息、成绩信息以及校友信息等等。因此，要设计具备这么多功能又充满吸引力的网站对设计师来说也是一项非常有挑战的工作。今天这篇文章收集了世界上设计最优秀的35个大学网站案例，一起欣赏。

01. Biola Undergrad

02. The University Of Texas

03. University Of Minnesota

04. Indiana University

05. Brown University

06. University Of Tennessee

07. University of Rochester

08. Arizona State University

09. University Of Madras

10. Lovely Professional University

11. Johns Hopkins

12. The University Of Melbourne

13. SEOUL

14. University Of Washington

15. Denver Seminary

16. University Of Virginia

17. Upenn

梦想天空博客关注前端开发，展示最新HTML5和CSS3应用，分享jQuery插件，推荐优秀网页设计案例。

18. University Of Chicago

19. NorthWestern

20. University Of Delaware

21. Oregon State University

22. Rutgers

23. Virginia Tech

24. UBA

25. Institut Teknologi Bandung

26. UK Campus

27. University Of Oxford

28. UC SanDiego

29. University Of Glasgow

30. Purdue University

31. Durhan University

32. Duke University

33. University Of Glasgow

34. National University Of Singapore

35. London’s Global University

您可能还喜欢

英文链接：35 Outstanding Educational Website Designs

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者: 梦想天空（山边小溪）发表于 2011-12-02 13:07 原文链接

评论: 15　查看评论　发表评论

编辑推荐：LINQ之路

网站导航：博客园首页我的园子新闻闪存博问知识库

原文来自：博客园-梦想天空

十二

60佳优秀的 Photoshop 网页制作教程【上篇】

　　曾经和大分享过几篇优秀的 Photoshop 网页制作教程，喜欢的人非常多。今天这篇文章继续向大家分享更多优秀的 Photoshop 网页制作教程。其实，网页设计并没有你想的那么难，相信看完这些教程，你也可以制作出漂亮的网页。

3. Create a Clean and Professional Web Design in Photoshop

4. Create a Slick and Minimalist Web Layout in Photoshop

5. Create a Wooden Grunge Portfolio Web Layout in Photoshop

6. Design a Dark Business Layout

7. How to Create a Web Hosting Layout

8. Create a Business Web Template

9. Design a Clean Business Layout

10. How to Create a Software WebLayou

11. Portfolio Lyout Ceated Wth Jeans Texture

12. Create a Smple Yet Attractive Web Layout

13. Create a Professional Web 2.0 Layout

14. Create a Grungy, Translucent Web Portfolio Design

15. Design a Bold and Vibrant Portfolio

16. Design a Sleek Bokeh Styled Portfolio

17. Design a Sleek Textured Blue Portfolio

18. Create a Chalkboard Style WordPress Layout in Photoshop

19. Deep in Space Portfolio Layout Design in Photoshop

20. Create a Clean and Classy Web Design in Photoshop

21. Clean Textured WordPress Style Layout in Photoshop

22. Clean and Minimalistic Portfolio Layout in Photoshop

梦想天空博客关注前端开发，展示最新HTML5和CSS3应用，分享jQuery插件，推荐优秀网页设计案例。

23. Beautiful Music Streaming Website Design in Photoshop

24. Simplistic Black and White Portfolio Layout in Photoshop

25. Clean and Creative WordPress Style Theme in Photoshop

26. Photo Gallery Website Layout in Photoshop

27. Light and Colorful Grunge Portfolio Layout in Photoshop

28. Beautiful and Clean Portfolio Layout in Photoshop

29. Simple Business Style Portfolio Layout in Photoshop

30. Simple iPhone Application Website Layout in Photoshop

您可能还喜欢

英文链接：Web Design Photoshop Layout Tutorials

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者: 梦想天空（山边小溪）发表于 2011-12-02 00:36 原文链接

评论: 0　查看评论　发表评论

编辑推荐：LINQ之路

网站导航：博客园首页我的园子新闻闪存博问知识库

原文来自：博客园-梦想天空

十二

让代码飞一会儿：快速编写 HTML 和 CSS 的工具和技术

前言

　　你曾经考虑过想要加快 HTML 和 CSS 编码速度吗？不管你是否想过，都来看看这篇文章吧，你会从中学到很多东西。我们要讨论的不是 CSS 网格框架，也不是 CSS Reset。在这篇文章中，我们关注的是不同寻常的编码方式——CSS 编译器以及 HTML 缩写编码技术。借助这些优秀的工具和技术，能够大大的减少开发时间，加快开发进度。

HTML

　　加快 HTML 编码的方法有很多，这里我们要介绍的是 HTML 缩写技术。取代传统的编写完整 HTML 标签，我们只需要编码缩写代码就能扩展到完整的HTML标记，一个简单的例子：#container将被转换成<div id=”container”></div>。实现 HTML 缩写技术，有两种著名的解决方案——Zen Coding 和 HAML。

　　Zen Coding 是一个用于快速编写 HTML，CSS，XML，XSL 或者其他结构化格式语言编码的插件，包括 Zen HTML 和 Zen CSS 两部分。这个插件核心是一个强大的缩写引擎，允许你扩展表达式。支持Aptana/Eclipse、TextMate、Coda、Notepad++、Espresso、Dreamweaver、UltraEdit、Visual Studio、NetBeans、EmEditor、Vim等所有常见的编码工具。强烈推荐给编写 HTML 和 CSS 代码的朋友，让你代码飞起来！

Haml

　　Haml 的作者 Hampton Catlin 是这样介绍 Haml 的：Haml 是对传统 XHTML 生成方式的一种反叛，它既不是纯粹的代码，也不是一种文本处理语言，它是与众不同的，是一种在我看来最为自然的 XHTML 构造方式。Haml 是 Rails 下的一种可选模板语言方案，使用 CSS 风格的语法来描述 DIV 的 ID 和 Class，以更加优雅简洁的方式编写 HTML 代码。

　　这是我从 Haml 网站拿过来的一个示例，你将看到编写 HTML 代码是多么的迅速。

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

　　Haml 模板引擎能够把上面的代码生成如下的标准 HTML 代码：

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>

CSS

　　和 HTML 一样，快速编写 CSS 代码的方法也有很多，这里向大家介绍一项非常酷的东西——CSS 编译器，我个人觉得这是提供 CSS 编码速度最有效的方法。只是，你需要花一点点时间学习新的语法，新语法非常简单，你很快就能学会。

所有的 CSS 编译器都有如下共同点：

新的语法，通常很容易就能学会
允许嵌套规则，定义变量，混合类型，继承
生成格式化良好的 CSS 文件

Sass

　　Sass 让 CSS 代码变得更加有趣，Sass 扩展了 CSS3，增加了规则嵌套、变量定义、混合类型、选择器、继承等等特性，能够生成良好格式化的 CSS 代码，易于组织和维护。它能将类似 CSS 但是书写更简洁的 Sass 语言最终转换为 CSS 代码。Sass 提供了基于 Ruby 语言开发的工具能够很容易的将 Sass 代码转换为 CSS 代码。

　　下面是演示 Sass 的重要特性——CSS 嵌套的示例代码：

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

　　借助 Sass 工具能够生成如下的标准 CSS 代码：

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

Less

　　Less 最早是一个 Ruby 的 gem，让 CSS 具有动态语言的特性，这些特性包括变量，操作符，嵌套规则。其实 Less 真正的作用是将使用高级特性的 CSS 转换成标准的 CSS。这些都是在 Web 客户端发起请求时通过 Http Handler 来完成的。也可以是编辑时就完成的。此外，Less 可以配置成自动最小化所生成的 CSS 文件，不仅节省了带宽，并且使最终用户体验更上一层。另外有 .Net 版本的 Less，做 .Net 开发的朋友可以关注一下。

CleverCSS

　　 CleverCSS 是受 Python 启发而为 CSS 开发的一个小型标记语言，用于生成干净的结构化的样式表。它比 CSS2 更加强大和干净，和 CSS 最大的区别是语法：CleverCSS 基于缩进而不单调，而这是和 Python 规则相悖的，但也不失为组织样式表的一个好方法。

HSS

　　HSS 是一个用于扩展 CSS 语法的一个工具，具有变量和嵌套等众多强大特性。

xCSS

　　xCSS 基于标准的 CSS，同时赋予了在编写复杂的样式表的时候的强大的面向对象工作流程，使用 xCSS 能够大幅减少你的开发时间。xCSS 提供了整体的 CSS 结构的直观概述，使用变量以及通过重用现有的样式和其它很多方便的功能来加速 CSS 代码编写。xCSS 是一个轻量级的工具，而且能够让你的代码保持语义。

最后但不是最不重要

　　最后向大家推荐一款非常棒的在线小工具——Markup Generator，它能够帮助你快速的生成 HTML 代码并能够根据从代码中提取所有的选择器，然后自动生成 CSS 框架代码。例如编写如下简写代码：

#root
 #top
  #logo
   a[href="http://www.cnblogs.com/"]=Markup Generator
  form#search
   fieldset
    label[for="query"]=Enter keyword:
    input[type="text" name="term"]#query
    button[type="submit"]=Find
 #header
  h1=Markup Generator
  h2=Nifty tool for XHTML/CSS coders
 #content
  #primary
   #about
  #secondary
   #contact.box
   #notify.box
   #bookmarks.box
 #footer
  p=Copyright (c) 2011 jizhula.com

　　使用 Markup Generator 能够生成如下标准的 HTML 代码：

<div id="root">
	<div id="top">
		<div id="logo">
			<a href="http://www.cnblogs.com/">Markup Generator</a>
		</div>
		<form id="search" method="post" action="./">
			<fieldset>
				<label for="query">Enter keyword:</label>
				<input id="query" type="text" name="term" />
				<button type="submit">Find</button>
			</fieldset>
		</form>
	</div>
	<div id="header">
		<h1>Markup Generator</h1>
		<h2>Nifty tool for XHTML/CSS coders</h2>
	</div>
	<div id="content">
		<div id="primary">
			<div id="about"></div>
		</div>
		<div id="secondary">
			<div id="contact" class="box"></div>
			<div id="notify" class="box"></div>
			<div id="bookmarks" class="box"></div>
		</div>
	</div>
	<div id="footer">
		<p>Copyright (c) 2011 jizhula.com</p>
	</div>
</div>

　　同时还能够生成如下的 CSS 框架代码：

#root {  }
 #top {  }
  #logo {  }
   #logo a {  }
  #search {  }
   #search fieldset {  }
    #search fieldset label {  }
    #query {  }
    #search fieldset button {  }
 #header {  }
  #header h1 {  }
  #header h2 {  }
 #content {  }
  #primary {  }
   #about {  }
  #secondary {  }
   #contact {  }
   #notify {  }
   #bookmarks {  }
 #footer {  }
  #footer p {  }

　　非常好的一款工具，大家可以在线试用一下。

　　以上就是全部内容了，这些实用的工具和技术能够帮助Web开发人员摆脱编写 HTML 和 CSS 过程中的枯燥与乏味，能够大幅节省编码时间，加快开发进度。