Archived entries for

当朋友拜托你给他的公司或产品做一个简单的网站。或者你刚刚发布了一个软件,需要一个官网。或者想给你的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

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

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

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

乔布斯一直着迷于包装设计,将其视为用户体验的一部分。包装设计传达产品的理念、价值及品牌的本质。用户在拆箱过程中得到的惊喜和愉悦是他们探索产品的良好开始。

《Spectacular Illustrations of Spider-man》不同艺术家笔下的蜘蛛人。

高空、翻跃、紧身衣。展现力量、动感和平衡的人体,再加上怪兽,这是男性艺术家梦寐以求的题材。

《Wonderful Illustrations of the Wizard of Oz

观察不同艺术家为同一题材创作的艺术品是非常有趣的事情。尤其是描绘想象中情境。这里搜集了一批非常精彩的插画,都是描绘《绿野仙踪》。少女、狮子、铁皮人和稻草人一路同行。充满了各种温馨和想象力。

《Wonderful Illustrations of Alice in Wonderland》 风格迥异的《爱丽丝漫游仙境》插画。

从东方风格到西方,从写实到极度抽象,来自各地的艺术家塑造出了这部西方著名童话中性格各异的角色形象:小萝莉,大猫咪,女王人,小丑,各式怪物和想象种的仙境场景。

《The Craziest of Creatures

这是一组非常可爱的插画。一堆毛蓉蓉的“冒名顶替”或神秘错接的动物。特别是下面这张《大坏吃兔子》

《Amazing Colorful Sunset Photography 颜色惊艳的落日摄影》

说到色彩搭配,恐怕没有人能超过大自然。落日的橙色和暮时天空的蓝色形成层次优雅,极为优美的补色对比。在卓越的摄影作品中,我们可以学习到大量的配色、渐变和构图技巧。

《Fabulous Street Photography Inspiration 》来自穷街陋巷的摄影灵感

街道和深巷是一个容易入手又表现力无穷的题材。不仅仅是由于强烈的透视给构图带来的冲击力,还来自于对闲散生活和真实情态进行定格而形成的动感。对于摄影而言,最难和最容易都是捕捉“自然”的一刻

《illustrations by steve mcghee

Steve McGhee 是一个加拿大插画艺术家和设计师。他最拿手的题材是用ps制造灾难场景。如空难、雪灾、大洪水、漩涡。使用想象力和拼接手法 借以一己之力完成《后天》或《2012》里昂贵而震撼人心的镜头。从他的历史作品中来看,他真是完成地越来越酷了。

《50 Fresh Interactive Studio and Social Media Agency Websites 》50个新鲜的交互工作室和数字营销网站的设计。

大型广告或公关公司创建了数字化营销部门已经成为潮流,大量设计或开发工作室为广告主们提供差异化营销的广告方案。这里列举了50个杰出的交互广告工作室、数字营销或在线公关 网站。他们的设计风格都非常摩登,宽布局,幻灯片,浮动文本,大header去设计,平滑的首页动画,还有TW,facebook之类的社会化媒体元素。

《40+ Extremely Beautiful Icon Sets Hand-picked from deviantART

从deviantART 搜集的漂亮icon

《Calligraphy and Handwriting Showcase》

英文手写美术字体设计。英文字体的简单造型和流线型笔画,比中文更适合进行美术字体设计,风貌也截然迥异。

《40+ Absolutely Stylish & Creative Hand-picked Wallpapers

创意和风格壁纸精选 质量很高的设计素材

《River North Dance Company Ads》 一组效果比较猛的广告

《Ten Simple Rules for Choosing the Perfect CMS + Excellent Options

选择cms系统是你建站的第一步,正确的选择可以大大提高你更新维护网站的效率。本文列举了10条选择原则,并精选了10个出色的cms系统。产品设计师们应当熟悉这10个经典的后台系统。

《The Ultimate Ugly Showcase of Current Government Websites

最难看的政府网站。 看了那么stylish、createive、inspiration 的list,今天居然看到了一个 ugly的。里面中国和香港都有当选哦。

《250 Christmas Icons to Decorate Your Blog 》应景素材——250个装饰你网站用的圣诞icon

《Amazing Paintings from Leonid Afremo

Leonid Afremo 是出生于1955年的白俄罗斯画家。他的画作个人风格十分强烈:颜色饱满明亮,富有光感和立体感强烈的厚笔触。从浮雕般的画布表面上,仿佛能看见画家是如何在厚厚的油画颜料上游走着调色刀,创作出天才的配色。

《illustrator shonei otomo

我靠 这个插画师太无语了。。。日本恶搞变态色情暴力审美集大成者。。。他他他居然还把《渔人妻子之梦》改成了SM题材的

《32 Years In the Life of Alison by Jeff Radcliffe 》分分钟年华老去

一位父亲用黑白相机记录了他女儿32年内的变化。黑白胶片统一的成像画质和风格,许多照片仿佛就是昨天拍摄,被压缩的时间令你更清晰地观察岁月流逝是如何作用。从剪断脐带到迷茫的少女到伤感的少妇。你真切地看见时间的流向,预见一个女人的成熟和老去。

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

 部门会议——《神秘的程序员们》系列漫画

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

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

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

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

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

—————————————————————————————–

14 Bold and Colorful Print Ads from Various Brands》 浓墨重彩的平面广告。

明亮的高饱和度的颜色可以刺激眼球,鲜艳多彩的画面可以吸引注意力,有研究表明使用丰富的颜色可以提升20~70%的广告效果。

《15 Inspirational Single-Page Website 》只有一个页面的网站是什么样的?

能说明展示所有信息说明所有问题吗,这里有15个不同设计风格的成功案例告诉你答案。简洁,一目了然,甚至还有交互。实际上平面时代人们不就是那么干的吗?当然它们有一些中的单个页面指的是html定义上的。

《30 Inspiring and Beautiful Dual Screen Wallpapers》 极漂亮的双屏壁纸。当素材或灵感不错

《Ten Most Popular Firefox Plugins of Web Designers 10个为web设计师准备的最受欢迎的firefox插件,除了著名的firebug外,还有用于取色、分析框架、切换屏幕分辨率、截屏收藏等功能的插件。

《Showcase of Web Design in Russia 》 俄罗斯的web设计

俄罗斯有着悠久的艺术传统,在绘画史上占据了重要的一幕。画风大气厚重,忧郁深远,富于生活气息。其web设计风格继承了其古典均衡的特点,主要特色为流体布局,并且并不遵循欧式的网格布局,看起来很有活力。本文介绍了大量设计案例和设计师。

《How to Create Smoky Brushes and Type In Illustrator CS4》 如何在illustrator CS4中创建幽雅的烟雾状画笔

《30 Superb Examples of Infographic Maps 》30个信息可视化地图的案例

交互地图或图表地图在web上应用越来越广泛,如何平衡图表、信息、颜色的呈现使其别具一格。本文包括用于呈现统计数据的信息可视化图表,交互式地图,和传统的定位地图。

《Showcase Of Beautiful Textured Web Designs》 拥有漂亮质感的web设计陈列。

恰当地使用纹理和阴影可以高度提升页面质感、层次、立体效果和别具一格的风格。如焦纸,木质,贴画,手绘、涂鸦、半色调,做旧等效果。http://www.smashingmagazine.com/2009/10/29/showcase-of-beautiful-textured-web-designs/

《A Showcase of 35 Beautiful Typographical Illustrations 》极为出色的文字设计。

包括包豪斯、涂鸦、波普、罗马式、古典、回文、卡通、装饰画、水墨等设计风格,以及赋予了各种超强质感的设计。都是在illustration中的设计教程。

《45 Inspiring Navigation Menus That You Must See 》45个不得不看的导航设计。

导航在网站中是传达网站信息结构的重要元素,其设计也能表达网站内容定位及风格。本文包括了涉及传统横导航,手风琴导航和tab导航等多种形式的成功设计案例。

40+ Beautiful Fish Inspired Logos》 以鱼为形象的logos。

很多,很漂亮。我记得以前有一阵子都设计成树叶形象的。显然风潮变了。

《60 Trendy Web Design Interfaces Created In October 》10月web界面设计精选。

作者从DeviantArt上提交的web界面设计中挑选出最好的60个。激发灵感,把握全球最新的设计趋势。

《Web Design Trends for 2010 》2010的web设计趋势:

大比例的logo/header、手绘风格、扁平型字体、排版、单页面布局、巨大的装饰图、透视效果、交互设计、情境提示框、极简主义、大号footer区、复古风格、介绍区、杂志布局。

《A Showcase of Fantastic Footer Designs》

大footer区正在blog设计中变得流行,footer区不再是仅仅用来放一些版权信息和少量链接的地方了。设计师们开始充分利用这片区域挽留用户的视线。可以从本文的案例中观察到他们如何巧妙地放置图像和链接等设计元素来丰富网站内容。

《50 Simply Creative and Beautiful Stairs Photos》 50张富于创意和美感的楼梯摄影。

聪明的建筑师可以建立富有艺术感的楼梯。.但如果楼梯修建地不够漂亮,摄影师仍然可以用不同的角度,技术或对比拍摄出好的效果。让我们看看这些简单的直线、曲线,颜色,光线在才华横溢的摄影师手里是如何转变成非凡的图形,生活中最常见的事物也是如此美丽的。

《30 Extremely Colourful Website Designs

用色是许多web设计师的瓶颈。web设计的游戏规则太多,使得设计师们越来越保守。来看看这些大胆用色的网站们,他们使用丰富的颜色使设计脱颖而出。

《Invoice Like A Pro: Examples and Best Practices》 设计账单的案例与技巧

账单设计应该谨慎和恰当,以提高你客户的支付效率。这在电子商务网站里是一个非常必要的任务,让你准时获得报酬并增强网站的专业性。本文中的案例和技巧让你可以更高效地设计这一流程页面。

《55+ Striking Website Headers That You Must See》 55个你不可错过的header区设计。

hearder区是整个页面中吸引视线最多的地方,帮助用户理解网站的结构。一个好的header区设计应该能明确地吸引用户点击,并引导用户去浏览更多内容。

《The Ails Of Typographic Anti-Aliasing》 排版设计的困境——锯齿和反锯齿

印刷品设计享有高DPI的辉煌成就,但以屏幕为载体的设计仍然收到像素的制约。锯齿、歪曲的文字边缘、模糊的衬线,反锯齿技术有此诞生。通过在图像边缘添加的半透明像素或像素渲染达到平滑的效果。 本文中列举了众多技术及其实际应用效果,以及在硬件、浏览器和操作系统上的限制。

《Content Heavy Websites with Beautiful Structure, Layout and Hierarchy》

内容较多网站的页面设计需要精心策划其结构布局、层次分布、平衡。这对于维持导航结构整个网站和可读性是至关重要的。从传统出版物的版式设计中借鉴是很好的。本文中精选了25个大网站的布局设计

《50 Beautiful and Creative Blog Designs》
blog作为设计师自家的后花园,可以随心所欲发挥,无需考虑商业元素、内容限制等,对负载和效率的标准也可以降低。所以在blog设计中可以见到更多的风格和更大胆的创意。

《35 Incredible Digital Painting Tutorials》

35款惊人的数字绘画教程。其常用工具是数位板和Painter/Ps。painter可以模拟30多类传统绘画工具的笔触和材质,衍生上千种变体。还可以模拟传统绘画的调色过程。并且由于减色混合的特效,数字绘画作品可以取得较之传统更明亮光感的效果。



Copyright © 2007–2013. All rights reserved.

RSS Feed. powered by Wordpress a theme by Xiqiao.