Browsing all articles from December, 2009
Dec
31
0

新年新气象

Author admin    Category Wordpress     Tags , , , , ,

用WordPress的一个好处就是：一个主题风格用久了，难免会腻，而WP可以很方便的切换风格，即便是自己来设计。

昨天，心血来潮，想着新的一年就要来了，也应该给孩子点新气象，于是，开始着手一个新主题风格。有兴趣的话，欢迎你来看一看：子遨的网站。

从开始构思、到Photoshop设计、再到代码实现，就一天的时间。如果你是个网站开发熟手，可能这样一个简单的改版不算什么，可对于一个不那么熟的业余爱好者，一天能完成到这样，我已经很心满意足了。

这个主题用到了最近看到的一些CSS和jQuery技巧，那话怎么说来着——不亲手实践，你就永远不知道那些技巧该怎么用，看的再多、知道的再多也是白搭！这样一次改版就彻底亲手实践了以下技术： read more

Dec
29
0

网站秀：dongmusic.com

Author admin    Category SiteShow     Tags , ,

浏览网站：www.dongmusic.com

网站简介：张亚东创办的东乐影音文化。

设计：灰白两色，极简主义的那种。就是浅灰小字体看的有些吃力。首页上那副图挺特别，犹如灵魂出窍后开放出的花朵，孤傲，却又是没有色彩的。很想听听设计者的说法。

Dec
28
0

网站秀: englandsquashandracketball.com

Author admin    Category SiteShow     Tags , , , ,

浏览网站：www.englandsquashandracketball.com

网站简介：英国的壁球和短网拍墙球全国理事会，致力于推广和发展国内的壁球和短网拍墙球运动项目。

设计：半透明CSS设计，主体灰白色系配以暗红色，将这两个运动项目整体打造成很年轻时尚的感觉。

Dec
28
0

致网站设计初学者：你该了解的CSS技巧

Author admin    Category CSS     Tags , ,

在我们初学网站设计的时候，会遇到很多关于显示的问题，然后，最终我们会发现很多都是由一些CSS暗含的小技巧来解决的。每个网站设计人员都会碰到这样的问题，花费了很多时间，我们查找原因、查找解决办法，找到答案的时候，我们就会希望：如果早知道~~

这篇文章就是关于这些你该掌握的CSS技巧：

Resets & Browser Inconsistencies
Box Model — Margin, Padding & Borders
Dimensions — Width, Height, Min & Max
Floats & Clearing
Conditional Comments
Overflow & Zoom

原文链接: http://www.noupe.com/css/css-techniques-i-wish-i-knew-when-i-started-designing-websites.html

Dec
28
0

有让你离不开的音乐网站吗？

Author admin    Category Inspire     Tags

关于音乐网站，我想大多数喜欢听音乐的人都有这样的体会：好的音乐网站，是会让人上瘾、着迷的。

可是，怎样才是好？那么多的音乐网站，真正能让我们离不开的，又有几个？它们——

1）有足够充足的乐库吗？
想听谁的歌，输入歌手名就能把他/她/他们的90%以上的作品检索到。

2）有够快的速度，能连贯顺畅的收听吗？
如今大多人都习惯了直接在线收听，如果速度无法保证，听得断断续续，那叫个难受！

3）有足够智慧的“大脑”，会推荐到相关的好音乐吗？
我们会因为听到一首推荐到的好歌、好音乐、好声音，而格外兴奋的。所以，这点如果做得出色，粘稠度会大大加分！

4）提供widget功能，能制作可供发布的个人播放列表吗？
对于那些拥有个人博客的、拥有社区独立空间的，会格外需要这个。

5）界面清爽干净，足够一目了然吗？
一个页面上别出现太多东西，我们会眼花缭乱，不知所以，最后很可能就会无果而终。
那些八卦、新闻、与音乐本身无关的东西，就别出现在这里了！

7）再见排行榜，我们需要更加精准的信息
说实话，那些排行榜其实意义不大。个人口味都不同，你怎么排呢？往往大众排行榜上的我都不爱听。

个人比较喜欢用的两个音乐网站：
国外——Grooveshark.com
国内——虾米

如果你有好的推荐和想法，也不妨共享一下。

Dec
25
0

jQuery lightbox，完美实现浮层图片秀

Author admin    Category Plugin     Tags , , ,

这款jQuery插件是由Leandro Vieira Pinho开发，能完美实现浮层图片的幻灯播放功能，就象上图演示的那样。

官方下载（v0.5）：http://leandrovieira.com

该插件效果好，而且使用起来非常简单。

首先，将以下代码复制到头文件中——

<script type="text/javascript" src="js/jquery.js">
<script type="text/javascript" src="js/jquery.lightbox-0.5.js">
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

<script type="text/javascript">
$(function() {
	// 可以按自己需要，选择以下一种方式
	$('a[@rel*=lightbox]').lightBox(); // 举例1）对于所有链接属性ref="lightbox"的图片，执行该插件功能

	// 或者...
	$('#gallery a').lightBox(); // 举例2）对于所有属于对象gallery的图片，执行该插件功能

	// 或者...
	$('a.lightbox').lightBox(); // 举例3）对于所有链接类型class="lightbox"的图片，执行该插件功能

	// 或者...
	$('a').lightBox(); // 4）对于所有链接，执行该插件功能
	// ... 还可以有很多种方式，基于以上范例你可以自己去定义。
});
</script>

之后，我们就可以在需要执行的地方写一句链接语句就可以了。
以上面的3）为例，我们可以在文章编辑器里或其它需要演示图片的地方写下如下代码——

<a class="lightbox" href="image1.jpg"><img src="thumb_image1.jpg" alt="" width="72" height="72" />

注意，在链接描述里，不要漏了 class="lightbox"。

自己试一下吧，真的很简单！

Dec
25
0

PointBanner网站的启示

Author admin    Category Inspire     Tags ,

市场不是竞争抢夺出来的，是被发现出来的。广告条幅设计——你看到这个互联网上的细分市场了吗？

PointBanner，一家专门设计广告banner的网站，清新友好的界面，简单明确的三步骤引导，让客户打心眼里觉得：真的就这么简单！

一家B2B、B2C网站，做到完全不用在线服务人员，却又能让客户毫不费力的完成订购，这才是够完美的设计。

Dec
23
0

如何在文章里嵌入代码

Author admin    Category Plugin, Wordpress     Tags , , , ,

我们在写有关代码技巧的文章的时候，总会需要在文章里嵌入代码，诸如HTML, CSS, PHP, javascrip等等。如何让代码能够不执行，仅仅显示呢？很多博主应该都会遇到这个问题。

在一篇文章中，我们对代码一般会有这样两种处理方式：一类是我们在一段话中引用代码，来加以说明；另一种则是高亮显示完整的代码段。

在一段话中引用代码，我们可以用<code>和</code>把代码包括进来。
比如：如果要显示“我们今天要讨论的是index.php”，可以在编辑器里这样输入：我们今天要讨论的是<code>index.php</code>。

但如果代码里有HTML标签的话，这样仅仅用<code>和</code>还是不行的，Wordpress会解读为你在使用html标签。
比如要显示：“我们来看<div class="header">”，在编辑器里，我们必须使用字符集&lt;来替换标签左括号，用&gt;替换标签右括号，然后再用<code>和</code>把代码包括进来，即： <code>&lt;div class=”header”&gt;</code>。

你可以阅读WordPress官网上的这篇文章，那里有详细的解释。

以上是说明如何在一段话中引用代码。另一种情况是，我们需要单独高亮显示一整段代码段，来表达某个功能的实现方式。

使用Wordpress代码编辑插件。
以下有一些推荐的，其实每种都很好用，看个人喜好。

使用SyntaxHighlighter
SyntaxHighlighter 是一款基于javascrip的开源代码高亮显示工具。使用起来也很简单，你只需要把以下代码段copy到<head>头文件里（或者是其它你需要高亮显示代码段的任意地方），移除不需要的语言。

read more

Dec
23
0

网站秀: ringvemedia.com

Author admin    Category SiteShow     Tags , , , , ,

浏览网站：www.ringvemedia.com

网站简介：17个挪威大学生在2008年来中国旅行，访问了北京和上海，回去后创建了这个网站。展现了他们眼中的中国印象。

设计：整个网站以全景照片为背景，单行滚动内容显示。简洁、干净、主题明晰的设计！

Dec
18
0

Use WP template post-class() to style posts individually

Author admin    Category Wordpress     Tags , ,

We have so many posts in different categories or tags. Sometimes we may need to provide some special CSS style layout to some named posts, categories or tags. If that’s what you want to achieve, the wordpress template function post-class() can help.

To use this function in a theme, you will simply add it to the Loop in a place that makes sense. Most themes encapsulate every post within a DIV of some sort. That DIV usually has a class=”post” or something similar. Instead of that class, just add a call to post_class instead. Like so:

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

The post_class() outputs the class=”whatever” piece for that div. This includes several different classes of value: post, hentry (for hAtom microformat pages), category-X (where X is the slug of every category the post is in), and tag-X (similar, but with tags). It also adds “sticky” for posts marked as sticky posts. These make it easy to style different parts of the theme in different ways. Read the Wordpress documents about post-class() here.

Wordpress 2.7 after versions provide the “stick post” feature, that is, for those posts you’ve published before , now you can place them at the top of your homepage without editing the timestamp, only by checking “stick this post to the front page” in WordPress post edit panel. Here this article explains in deep details on how to style a stick post.

In the same way, you can also give special styling to named categories or tags. Another tutorial talks more about it.

Older