载于《程序员》杂志2010年第01期。

 Robbin的约会——《神秘的程序员们》系列漫画

这个系列的漫画讲述程序员——这种神秘人类的囧事,故事多来源于我身边的程序员朋友,且以互联网开发背景为主。

如果你有什么可乐的关于程序员的故事、对话、代码,愿意通过漫画的形式分享,请给我发邮件。arthur369@gmail.com

我的tw帐号:arthur369 。现在可登录tw的第三方是http://dabr.nl 。欢迎大家follow。
—————————————————————————————–

25 Beautiful Blog Comment Designs

25个漂亮的blog 评论区设计。如何让重要的评论区 清晰好用,又设计得别致有趣,还有令众多设计师头痛的多层缩进问题

30 Highly Creative Blog Design Layouts

blog的数量已经是汪洋大海,设计师应该如何发挥长处,让读者的视线多做停留?本文中举出的是30个blog设计显然做到了这一点,通过强烈的个人风格、布局和精致的背景。

70 Gorgeous Blog Footer Designs

70个璀璨的blog footer区设计

在footer区你可以做很多事,放置最新评论,flickr相册,作者介绍或列表,twitter更新等等,也可以放置一些简洁创意的插画以呼应整体设计风格。本辑中的这些设计都非常出色和亮眼,让你在浏览任务结束的时候,也能取得舒适的体验,关键是,让页面主体的布局负担不再那么重了。

50 Bright and Vibrant Web Designs – Color Inspiration

大部分设计师都会使用黑色和白色来作为页面基调色,要不就是灰色的。这些颜色传统、安全,易于接受。但下面这些设计师使用了一些饱和度非常高的鲜艳颜色来挑战,亮黄、亮橙和亮紫。你也可以在你的下一个设计里做一些突破性尝试。

50 Impressive Magazine and Newspaper Styled Web Designs

打破水平对齐的竖式流体布局慢慢成为潮流,它从报纸的排版中吸收营养,主要看重布局的平衡,强调,对比,以及将标题、图片、文本区域、空白进行混合搭配的控制能力。布局永远是web设计中首要要考虑的事情,也是最重要的事情。

45+ Beautiful Web Designs from Germany

45个德国的web设计精选 以前的三推中还推过俄罗斯、韩国和爱尔兰。

50 Professional Web Design Agency Web Sites

web外包设计师的职业是为客户进行设计,那他们自己的网站是什么样的呢?本文介绍了50个专业的web设计外包公司/个人的网站。并分为4个系列,简洁风格、商务风格、另类风格、深色风格。这辑精选不光类型全面,而且水平都非常高。

25 Sleek and Crisp Christian Websites

25个新颖活泼的基督教网站设计。宗教网站设计在一般印象里都会设计得非常庄严传统和古典。但是下面的合集中,这些设计师们没有因袭陈旧,这些设计看起来一样典雅和平衡,但更具有亲和力和现代感。

50 Creative and Inspirational Personal Portfolio Websites

50个创意个人网站精选。给自己做网站的难度其实远大于一个客户项目。来看看这些来自web设计师,开发者(喜欢像素风格),插画设计师(总是颜色丰富且明亮)和摄影师的个人网站设计。你会获得很多灵感。

The beautiful style of black websites – 41 examples

纯黑背景色的精美网站设计  我以前翻译过《深底色设计指南》,这个list里提供了更多设计更为精美优雅和cool的案例。如何在深色背景中处理web设计一直是个难题,但如果你做对了,取得的效果也是令人赞叹的。

50 Inspirational and Fresh Minimally Designed Web Sites

50个极简主义的网站设计。简洁是一种重要的设计策略,永远不曾被时代淘汰。避免一些过度设计和干扰,视觉重心和强调,充分合理地运用空白和间隙。

35 Excellent Ecommerce User Interface Designs

35个出色的电子商务用户界面设计  适合中小型商城设计。注重用户体验,设计简洁,细节精致。然用户把全部注意力放在商品上,不会有无端的干扰。

50 Clever, Creative Logos

50个创意LOGO欣赏

25 Print Ads Featuring Excellent Use Of Typography

印刷广告中出色的文字设计应用

Showcase of Big, Bold Typography

大号粗体 Typography 字体排版设计。大号粗体文字用途广泛,海报、Logo、标题中中都非常常见,它可以自成一体,作为唯一的元素来承担整个设计。

Awesome Brochure and Print Design Inspiration

小册子印刷品设计灵感

60 Tutorials Creating High Quality Design Icons

09年的汇总帖,60款创建高质量设计icon的教程。质量真是很高,虽然我没时间做,不过看起来真是爱不释手。

45+ Beautiful Light Abstract Photoshop Brush Sets

45款美丽的光效ps brush。深底色加彩色光效是现在的一个热潮。

Most Beautiful Websites of 2009

2009年最漂亮的网站。漂不漂亮取决于bloger的爱好,这个blog比较重口味,喜欢华丽,色彩浓重的设计。

30 Examples Of Well Designed Ecommerce Websites

35款经典的电子商务网站设计。涉及多种商务类型,设计都非常成熟和商业化。

30 Professional Logo Design Processes Revealed

30个专业logo设计的过程揭秘。本辑搜集了30篇由设计者写下的Logo诞生历程,包括构思,草稿,多稿比对筛选,定稿,制作一系列过程。虽然logo的设计在技法上难度不高,但对提炼和思维能力是极大考验。国内的Logo设计山寨的太多,来看看这些专业Logo的创作历程会非常有帮助。

载于《程序员》杂志09年第12期。

 婚姻警句——《神秘的程序员们》系列漫画

这个系列的漫画讲述程序员——这种神秘人类的囧事,故事多来源于我身边的程序员朋友,且以互联网开发背景为主。

如果你有什么可乐的关于程序员的故事、对话、代码,愿意通过漫画的形式分享,请给我发邮件。arthur369@gmail.com

从10月2日开始的“每日设计三推”计划。以web设计为主,兼之前端技术、平面、矢量、摄影以及素材。来源都是国外的blog。虽然都是英文的,但基本图像就可以说明一切,所以英语不好的同学也不用有负担。标签为#3dt

我的tw帐号:arthur369 。现在可登录tw的第三方是http://dabr.nl 。欢迎大家follow。

另外由于tinyurl类网站被大规模封锁,为方便持续登录,将tw中的短网址都在这里装换为原文的永久链接。点击英文标题或图片都可直接访问。
—————————————————————————————–

Interview With Digital Artist Ferdi Rizkiyanto aka Pepey

Pepey.是来自印尼著名平面设计师,他关于温室效应的招贴设计全球闻名(有沙漏的那幅)。他的作品中既有激动人心的创造力,又具备无与伦比的细节。在一些广告设计中使用的三维+灯光造型,制作出液体造型的质量是同类手法中的佼佼者。他生于岛国,从小迷恋科幻,作品总是带着迷人的魔幻气质

30 Web Designs with Amazing Attention to Detail

web设计中值得特别学习的细节。渐变和细节修饰的运用是赋予页面质感和层次感的不二法门。富有立体感的折角,细微的渐变和边缘处理,不易察觉的阴影,单像素高光。,这些可能不被留意到的细节设计在随时影响用户的感观:对网站品牌的理解,对设计质量的享受。

Comic Sans: The Font Everyone Loves to Hate

有意思的文章: Conmic Sans——一种人人痛恨的字体。作者分析了为什么微软的默认字体Comic sans 变得令许多设计师恨之入骨,因为其幼稚、不专业、不适合大部分场合……(有专门的反comic sans网站,和反IE6一样),它的历史(原本是为漫画对话设计的),典型的错误用法(正式场合,正文,标语)以及建议的替代品(它果然是最差的一个)。

35 Fresh & Outstanding Portfolio Websites for Your Design Inspiration

Protfolio site 指的是公司、创作者的作品及个人信息展示网站。这是设计师自己的地盘,当然大有可为。 更少的限制带来更多的个人风格色彩。本辑中列出了35款新鲜设计,承受了较少的内容展示负担,这些设计都显得非常轻盈优雅。

40 Textured Websites for Design Inspiration

在web设计中应用纹理背景?貌似是15年前的老土做法了? NO,不要当outman。纹理早已重新成为潮流,让页面增添质感、趣味、变化和个人色彩。诀窍就是用得更自然,更微妙,更隐晦。

30 Plus Fresh Typography Designs

Typography Designs是一种历史非常悠久的设计门类,伴随着书籍的诞生以纯手绘的方式出现,当然现在有了数字艺术的辅助。。以文字为绝对主角,辅以装饰花纹,立体,变形,纹理、排列等等,这是一种追求唯美的游戏,单纯的规则,不凡的力量。robertoblake.com是一个长久关注该类设计的网站。

34 Bodacious Folded Brochure Designs

34款出类拔萃的折页设计。印刷精良,形状奇特的彩色折页总能令人爱不释手,也减少了作为一个广告品被扔进垃圾桶里的几率。折叠具有天然的对称和立体感,在对比、材质、空间变换的魔术技巧上,总是大有文章可做。

Typography Inspiration Showcase

惊人的Typography design作品。前两天已经介绍过typography design了。这辑更强。感兴趣的同学可以持续关注http://typeinspire.com/

100 Premium Like But Free, Fresh WordPress Themes: Year 2009

比较惊人的一辑。作者花了不少时间精选出2009年免费模版中的100个上乘之作。里面有许多的设计和框架都不落俗套。使用WP模版的同学们还是尽快bookmark它吧。

25 Amazing Flash Portfolio Sites

25个令人震惊的flash Portfolio网站设计。 好的Flash Sites总是不会过时,设计师和客户有无穷的理由喜欢它。可以和平面设计媲美的大开大合的布局,令web设计师艳羡的全幅图片,交互和动画中的速度感、物理缓冲和无数可能性, 带给用户无限的惊喜和冲击力。所以漫长的载入缓冲和找不到可点击区域的尴尬……忍了把。


25 Examples of Mega Menus in Web Design

25例 海量下拉菜单设计。电子商务网站中经常会遭遇一个菜单项下面的二级菜单里有数量惊人的类目,如何处理棘手的菜单项,希望本文对你有所启发。


35+ Free Photoshop Brushes for Christmas Season
专为圣诞节准备的35款免费的PS笔刷设计。帮助你轻松面对应景题材,闪光、各自漂亮的雪花,还有传统的圣诞装饰物形象,看到了它们后你会想要尝试的。

50 Ultimate Useful Free Mac Apps for Graphic and Web Designers

mac平台上为web和图像设计师准备的50个终极应用。一张非常强大的菜单,而且关键:这些应用都是免费的(除了极个别)

Principles Of Effective Search In E-Commerce Design

全面指南——如何有效地设计电子商务网站搜索。搜索是电商成功的关键因素,本文探讨了包括 壁垒、有效性、分类、信息架构、高级搜索、沟通、分组、控件……在内的问题


44 Marvelous Sites Powerd by Drupal 44个使用Drupal系统搭建的不可思议的网站。

Drupal是一个和WP类似但比它庞大得多的开源自助CMS系统。拥有及其灵活的架构,可以用于搭建出任何类型的web应用。但也是它的繁复压制了它

Audrey Kawasaki’s Creative Workspace

Audrey Kawasaki 是一位在洛杉矶长大的日本艺术家,她从日本漫画中获得灵感,在木板上直接用油彩中描绘富于日本气质的年轻女孩,她们性感,美丽,优雅和忧伤。在潮湿温热的气息中被花朵和群鸟围绕。木质的纹理和颜色和亚洲人象牙黄的肤色融合在一起,浑然天成。

Famous Redesigned Logos of 2009 – A huge roundup!!

2009年做出重大变更的LOGO设计。可以看出这些历史悠久的LOGO是怎样感应新的设计风潮。它们修改的方向:更轻盈,更清晰简洁,表现真实的立体感,金属质感变得流行,渐变的运用更柔和。个性化色彩更强。

A Collection of HTML5 Resources and Tutorials

HTML5的资源和技巧 集中营

34 Inspiring Red Logo Designs – It’s Christmas time!!

34个红颜色的LOGO设计。圣诞节近了,希望大家能从红色这种喜庆的配色里找到节日主题设计的灵感。

Logo Design Inspiration: 70 Creative Fresh Designs

70个灵感创意logo。logo设计不应该是冷冰冰而抽象的,越来越多的logo设计得有人情味,并使用了具体的形象便于人们记住品牌名称。概念和形象的嫁接和移植中体现了非常高超的创意

The Funniest T-Shirt Designs of the Decade

10内最有趣的T恤图案设计。以反讽手法居多,其中很多有geek精神。

当朋友拜托你给他的公司或产品做一个简单的网站。或者你刚刚发布了一个软件,需要一个官网。或者想给你的WP blog加一个首页。。

Berita是一个专为此类需求设计的免费theme。较之于同类产品,它同时为了增加定制化程度还改造了wp系统,使用上更类似插件。只要掌握简单的html+css,就可以随意对页面进行改造。灵活度和拓展性在同类中是佼佼者。

下图是我昨天使用WP+ berita改造的网站。(这个网站主要是为了方便演示,里面的部分icon和图片有版权问题,请勿直接使用)

这是berita官网的demo

在此处下载我改造过的版本。(修改了css,header.php以及图片文件)

此处下载官方原版。官方地址:http://bizzartic.com/bizzthemes/berita/download/

我缩小了原版的header区域高度,在search框上方增加了一组url。添加了一些底栏版块的样式。

具体如何使用berita的插件系统,我会在下面详细说明流程。并放出我的代码。

————————————————————————————————————————————————————

首先,像安装所有theme一样,解压包放置在wp-content/themes,并在WP左侧菜单 Appearance – Themes 里启用该theme。

接下来看见的界面是这样的。。。空空如也。不要失望。还有大量的定制化和手写代码工作要做。

在左侧菜单的Appearance里可以发现多了一项Berita Theme Options .这就是定制系统。如下图。我做了粗略的说明。

Berita简单的工作原理:

一个简单的企业站是有一部分静态页面和一部分动态页面来共同构成的。诸如about us ,contact us ,service, feature, customs 之类不经常变动的页面直接写成静态html页面。 news,case 之类会需要更新维护的动态部分使用CMS系统来生成。

Berita 使用WP里的pages 来制作静态页面,用posts来制作动态部分。实际上pages和posts都使用同一个编辑器,在编辑代码时没有什么差别。

所以下面先来创建一些pages,一些posts和几个categories,来作为“建筑材料”。

有了材料,我们就可以组建首页了。

第一步:设置LOGO

在此处设置Logo图片。如果勾选Show Blog Title+Tagline,则logo图片不再生效,而直接显示blog title和tagline的文本。

第二步:首页导航。

创建完pages后,导航上会直接出现链接。可以在Berita Theme Options 去掉你不希望显示在导航上的page。

在Blog Section Settings 设置一个放在导航上的post 分类。链接到Categories页面。适用于”公司新闻”或者“产品的blog”

这里只允许设置1个。系统建议创建一个Category 名叫 BLOG ,然后把其它所有分类都设为它的子分类。这种做法适合想给blog加个首页的用户。

还可以设置在footer区显示的文字导航

还可以设置多级导航。在edit page的时候,将右侧的的Attributes – Parent 设为对应页面,就可以在导航里自动出现

我在搜索框上方加了几个about | contact的入口。在Appearance – Editor – header.php里可以修改链接和文本。在<div id=”search-spot”>下方加上

<p><a href=”http://clentrust.com/about” title=”About us”>About</a> | <a href=”http://clentrust.com/contact” title=”contact us”>contact</a> | Join</p>

第三步:首页的滚动推荐区(Front Slider)。

Berita系统中,这部分也是利用Pages来完成的。创建几个pages,有无title都可以。

然后如下图中设置page的id及排序。

这个区域的高度可以在Pick Height里设置,页面中超过该高度的部分不会显示。

下面的代码大家可以直接使用:注意要更换img时,要把class 改为class=”fr” (也就是float right的意思,完成图片的右浮动)

<div class=”slider-post”><a title=”Sample Slider Page”><img class=”fr” title=”1″ src=”http://clentrust.com/wp-content/uploads/2009/11/1.jpg” alt=”1″ width=”350″ height=”250″ /></a>

<div class=”slider-title”>Sample Slider Page</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.<a class=”btn” href=”#”>view more</a></div>

第四步:底栏的3个版块。

在Appearance-Widgets菜单里,我们可以发现左边的可选widget窗体多了好几个以Bizz开头的。

右侧的Current Widget也从单一的Sidebar,增加了6组Footer。

Front Footer: 控制静态页面(首页和pages)底栏的3个版块区域

Blog Footer: 控制动态页面(posts 和 categories) 底栏的3个版块区域。

像设置传统的sidebar一样,只要将所需的窗体从左侧拖拽到右侧对应栏目里,可添加多个,并排序。

一般都是使用添加text窗体,在里面添加代码来进行页面的自定义。

下面的代码直接用,图片不要用了。___________________________________________________________________

<div class=”collumnblock”>

<div class=”itemtitle”>

<div class=”itemicon”><img width=”71″ height=”63″ alt=”Influencers” src=”http://www.dialogix.com.au/images/IconInfluencers.gif”/></div>

<div class=”text”>

<h2><a href=”features.html”>Find Key Online Influencers</a></h2>

</div>

</div>

<p>No other social media monitoring tool finds key influencers, ranks their social authority and charts sentiment as well as Dialogix…</p>

<div class=”itemtitle”>

<div class=”itemicon”><img width=”71″ height=”63″ alt=”Resellers” src=”http://www.dialogix.com.au/images/IconResell.gif”/></div>

<div class=”text”>

<h2><a href=”features.html”>Available for Agencies</a></h2>

</div>

</div>

<p>Offer Dialogix to your clients with your own branding. Generous re-seller packages are available…</p>

</div>

________________________有6个客户logo小图的代码__________________

<div class=”collumnblock2″>

<h2>Who’s already using Clentrust</h2>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Parmalat” src=”http://www.dialogix.com.au/images/LogoParmalat.jpg”/></div>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Ice Break” src=”http://www.dialogix.com.au/images/LogoIcebreak.jpg”/></div>

<div class=”companysquareend”><img width=”58″ height=”51″ alt=”ABC” src=”http://www.dialogix.com.au/images/LogoABC.jpg”/></div>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Royal Childrens Hospital” src=”http://www.dialogix.com.au/images/LogoRoyalChildrensHospital.jpg”/></div>

<div class=”companysquare”><img width=”58″ height=”51″ alt=”Breaka” src=”http://www.dialogix.com.au/images/LogoBreaka.jpg”/></div>

<div class=”companysquareend”><img width=”58″ height=”51″ alt=”Praemium” src=”http://www.dialogix.com.au/images/LogoPraemium.jpg”/></div>

<div id=”testimonials”>

<p>“Dialogix has given us insights that have changed the way our clients do business.” <strong>Remy Brassac, Gallery De Pasquale<br/></strong></p>

</div>

<p><strong>TEL: 086+12345678<br/>Mail: support@clentrust.com</strong></p>

</div>

__________________________________________________________________

Berita系统支持在widget里添加 twitter和flickr。配置非常方便

设置广告:

Berita 可以方便地在动态页面的侧边栏放置广告。支持两种尺寸。1个 320*250。或是几个125*125. 设置见下图。

125的广告支持放3组(6个)。也可以只放1组或2组。要勾选图示红框。

其他特色:

  • 支持最受欢迎的posts,好像是按评论来排序的。
  • 支持相关文章
  • 支持设置第三方订阅源及邮件订阅。
  • SEO设置
  • 它的分页也很友好

随便提两句和样式有关的。

这个系统使用的960Grid的css系统。

导航区的驼色背景不是写在css里的,是使用bgr.png。

一大张背景图。推荐一个压缩png的网站 http://www.gracepointafterfive.com/punypng 。在基本看不出来损耗的状况下,压个20%还是没有问题的。

Debug

这里有muzik
《Wordpress主题berita几处修改记录》可以看看

其他推荐

对此类theme有兴趣的同学,我再推荐两个不错的。适合更复杂的business网站或blog。

官方下载 VIEW MORE

官方下载 VIEW MORE



Copyright © 2007–2013. All rights reserved.

RSS Feed. powered by Wordpress a theme by Xiqiao.