子叶：子乌的叶子 » 技术

『子乌书简』的建立及更新日志

子乌 — Fri, 21 Jan 2011 06:30:27 +0000

建站缘由

建立子站子乌书简的原意只是为了方便自己利用kindle自带的3G网络下载自己收集的电子书并与友人共享，所以最开始只是利用了电子书收藏软件Calibre和Calibre的html化插件Calibre2Opds在云存储服务Dropbox上建立了一个静态网站。

但是在用了一两天之后发现一个问题：静态网站无法提供搜索服务，当书籍的数量达到一定量级时，寻找需要的书就会变成一个比较吃力的事情，尤其是在我们河蟹的帝国，dropbox这种庸俗的服务是不允许直接使用的，需要一定的技术手段才能达到目标，但是也并不太方便，速度上也有一定影响。

好吧，如果我没好奇地去看一下calibre真实使用的数据库结构的话，我可能会使用另外一种方式来实现我自己的搜索：那就是所谓的小偷程序，我得把我自己的网站的内容偷到我自己的另一个网站上去……

在研究calibre2opds的实现方式时，发现它读取的数据库是sqlite，好了，接下来一切都简单了，我按照calibre2opds建立网站的大概结构建立了子乌书简，即book.zi5.me。

对我来说，现在更新书籍的工作很简单，找到我想看的书，导入到calibre中，转换出所需的类型，利用calibre内置引擎到豆瓣或别的地方更新一下相关的元数据（标题、作者、系列、封面、简介等），然后接下来就交给dropbox去搞定了。当dropbox数据提交完毕后，网站会自动从dropbox下载数据库到本地，而书籍封面、电子书文件都还存放在dropbox上，我的站只是作为我放在dropobx上的电子书和伟大帝国屁民之间的桥梁而已。

介绍完毕。

建站日志

1、2011-2-20，dropbox再次提示流量超限-_-，再改一次看看是不是数据库的原因；2、修改了在线阅读时书籍内部超链接可能出错的bug(目前的修正方法还是不太满意，做个标记，以后有机会看看能否完善)；
2011-2-16，顺手实现字母排序查询～～；
2011-2-8，dropbox提示我流量超限，把我的public目录给suspend了……为此修改了书籍下载的方式；
2011-1-25，增加epub格式在线阅读功能（简单快捷键：左、右、回车）；
2011-1-23，显示豆瓣评分（因为速度原因，暂时只在详细页面显示，并隐藏评价数小于10人的书籍评分）；
2011-1-22，将排序列表完全放出；
2011-1-22，完成功能：pdf格式文件直接通过邮件发送到kindle上（可选择是否需要转换为azw格式）
2011-1-21，完成rss功能；
2011-1-20，修改了多作者的书籍无法在kindle下载的问题；
~~2011-1-xx，实现浏览数和下载数统计（独立数据库）~~(因为下载的实现做了修改，下载统计暂时停止，有空再改)
2011-1-xx，修改了mobi格式书籍无法在kindle下载的问题；

待完成功能

考虑加入豆瓣id登录进行评论（顺便实现底下的报告功能）(2011-2-16:考虑实现豆瓣的收藏、已读、评论、笔记功能)；
考虑实现单ip限制下载功能（比如单ip10秒内只能下载一本书籍，稍微降低一点对dropbox的影响）
提交自制电子书/提交想看的电子书(可能放弃)；
放出tag功能（需要整理现有书籍的tag）；
(已完成)~~考虑是否实现打分功能或支持从豆瓣采集相关的分数；~~
考虑实现错误报告（文件无法下载、文件无法打开、文件格式不好看，等等等等）；
系列的优化（实现一书多系列）；

js版圣诞树

子乌 — Wed, 22 Dec 2010 14:09:01 +0000

在网上瞎逛时，看到1kb大小的圣诞树js代码，看了一下效果，相当地赞，不过需要html5支持（我猜的，看代码要用到canvas），有兴趣地可以看看demo和原理解释。现在暂时没有兴趣研究代码，不过先收藏着也不错。

Language: HTML


<html>
    <head>
        <title>JS1k, 1k demo submission [856]</title>
        <meta charset="utf-8" />
    </head>
    <body>
        ="c"></canvas>
        <script>
            var b = document.body;
            var c = document.getElementsByTagName('canvas')[0];
            var a = c.getContext('2d');
            document.body.clientWidth; // fix bug in chrome.
        </script>
        <script>
// start of submission //
M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200;)with(M[k]=k?c.cloneNode(0):c){width=height=k?32:W=446;with(getContext('2d'))if(k>10|!k)for(font='60px Impact',V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'%23cca',i<7;)beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));else for(;x=T(i),y=Q()*2-1,D=x*x+y*y,B=E(D-x/.9-1.5*y+1),R=67*(B+1)*(L=k/9+.8)>>1,i++)if(D<1)beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8),lineTo(U+x*U,U+y*U),stroke();for(y=H=k+E(k++)*25,R=Q()*W;P=3,j)J[O++]=[x+=T(R)*P+Q()*6-3,y+=Q()*U-8,z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]}setInterval(function G(m,l){A=T(D-11);if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D);a.clearRect(0,0,W,W);J.sort(G);for(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1)){if(i==2e3)a.fillText('Merry Xmas!',U,345);if(!(i%7))a.drawImage(M[13],((157*(i*i)+T(D*5+i*i)*5)%W)>>0,((113*i+(D*i)/60)%(290+i/99))>>0);}D+=.02},1)
// end of submission //
        </script>
    </body>
</html>

修改插件Flickr Gallery以支持缓存

子乌 — Sat, 13 Nov 2010 00:56:04 +0000

原本使用插件FlickrRSS来实现flickr页面的照片缓存加展示，不过那个插件的下载似乎存在一些奇怪的问题（照片经常更新失败，而且是特定的照片更新失败，诡异地都让我快认为国外也有功夫网了……），于是再次开始寻找合适的flickr展示用插件的路程。不过可能是因为我用的关键字不对或者是老外对缓存flickr觉得没有必要（一点都不了解中国国情），基本上没看到合适的带缓存功能的flickr wordpress插件，那就只能自己改了。

随便找了个插件，Flickr Gallery（也不算随便找的啦，至少这个插件支持3.0.1……），研究了半天，增加了一个自动缓存文件（只缓存一次，毕竟是缓存个人照片，基本上不存在更新的问题）的函数并更新了所有调用的地方（这个插件的代码并不好看，耦合度很高，只能一处处寻找修改的地方）。

修改的地方太多，不一一列出具体内容，只给自己一个备忘，避免下次直接升级废掉我几个小时的劳动成果（主要是替换好累啊）：

0 说明一下我调用到的flickr gallery内容：我只使用了flickr gallery的最基本的gallery功能，而且没使用设定大小功能，如果使用了size的话，可能会出现问题（因为我没修改相应的代码……）。

1 phpFlickr.php，这个是插件的核心文件，处理了flickr的交互方法，在这个文件中增加了一个自动缓存的方法：

Language: PHP

/* get cached image photo url by sheneyan 2010.11.13*/
 
function getCachedPhotoURL($photoURL,$type="photo"){
//这里我写死了缓存的绝对路径，请自行设定或者修改其配置页面，记得设置写权限
	$CACHE_PATH='/xxx/yyy/zzz/blog/wp-content/cache';
//md5文件名，我实在是懒得截取文件名……
	$cachedFileName = md5($photoURL).'.jpg';
//缓存文件绝对路径，以md5首字建子目录，如果你的照片超多，可考虑多层子目录（还是一样……我懒……）
	$cachedFilePath = $CACHE_PATH.substr($cachedFileName,0,1)."/".$cachedFileName;
//缓存文件访问链接
	$cachedFileURL = '/blog/wp-content/cache/'.substr($cachedFileName,0,1)."/".$cachedFileName;
//如果媒体类型是视频，则直接返回原来的链接
	if ($type=='video')return $photoURL;
//如果缓存文件不存在
	if (!file_exists($cachedFileName)){
//读取远程文件并保存到本地（呃，临时就想到这个写法，有更简单的吗？）
		file_put_contents($cachedFilePath,file_get_contents($photoURL));
	}
//返回缓存路径
			return $cachedFileURL;
		}

2 flickr-gallery.php，寻找所有的img src，将src复制一份，重命名为rel，src里面的链接套上$phpFlickr->getCachedPhotoURL(....)，rel里的链接套上$phpFlickr->getCachedPhotoURL(....,'medium')(为了放大用，如果打算看更大的图，把medium改成large)，如果有设定class=""的，则记得rel里面不要调用自定义函数(因为flickr gallery的原本的lightbox效果是直接取得原有缩略图的地址进行修改获得中等大小图片地址的，而缩略图地址已经被我md5，所以必须再提供一个新的地址供放大用，才使用了属性rel，并需要修改相应的js——见底下)。

3 flightbox/jquery.flightbox.js 修改其中的一处：

Language: Javascript

		if ( options.size_callback == null || $calling.hasClass("video") ) {
			$image.attr("src", $calling.attr("src").replace(/_[stm]\./g, "."));
		}

改为：

Language: Javascript

		if ( options.size_callback == null || $calling.hasClass("video") ) {
			if($calling.hasClass("video")){
				$image.attr("src", $calling.attr("rel").replace(/_[stm]\./g, "."));
			}
			else{
				$image.attr("src", $calling.attr("rel"));
			}
		}

其他的地方可改可不改（因为我目前只调用了最简单的flickr gallery shortcode，所以其他地方不影响到实际效果，以后有更新时再修改这篇备忘～）

这样就搞定了，效果见：我的照片。

PSD/HTML转换：简洁优雅的CSS3网页布局

子乌 — Thu, 14 Oct 2010 01:43:37 +0000

作者： Eric Hoffman
译者：Sheneyan(子乌)
时间：2010-10-13
英文原文：PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout

这是系列教程的第二部分。第一部分设计了一个简洁优雅的部落格设计。在开始这个教程之前你可以先看看第一部分以获得更大收获。

《简洁优雅的部落格网页布局教程》系列

这篇教程是一个系列的第二集。这个部分(第二集)展示了如何利用第一集中建立的PSD设计制作一个HTML/CSS网页模板。

第一集：使用Photoshop建立一个简洁优雅的部落格网页布局
第二集：PSD/HTML转换：简洁优雅的CSS3网页布局

最终成果

单击下面的最终成果预览图来查看在线演示。因为我们使用了部分CSS3，该示例在所有浏览器上看起来不会完全一致。

查看示例

创建基础文件

1我们要做的第一件事就是建立文件和文件夹。在你的计算机上建立一个新文件夹，命名为letterpress。这是我们的工作目录。

2在文件夹letterpress下创建2个文件夹，命名为images和styles。

3打开你最喜欢的HTML/CSS编辑器(如Dreamweaver或Notepad++)并创建一个HTML文档。命名为index.html或别的什么适合的名称。将这个HTML文档保存在文件夹letterpress下。

4创建一个样式文档并命名为style.css（或其他的名称）。保存至styles文件夹下。

基本HTML

5下面的代码来自于index.html。使用了常用的HTML标记。

Language: HTML


<html>
  <head>
  <title>Letterpress</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
 
</body>
</html>

PSD切片

6现在打开Photoshop并打开我们之前依照教程的第一部分制作的PSD文档。

7除了下列图层外其他全部隐藏：

Datebg 和 shadow
Headerdivider
Navbarbg
Logo
Sidebar
Sidebar divider
Background
Widgetbg
Footerbg
Image
imagebg

8使用矩形选框工具(M)选中代表活动页的书签。

9复制选中部分并执行编辑 > 合并拷贝(Ctrl/Cmd + Shift + C)。

10打开一个新的Photoshop文档(Ctrl/Cmd + N)；不要修改画板大小，因为它自动匹配在你剪贴板中内容的尺寸（在这个例子中，是那个书签。）

11单击 Ctrl/Cmd + V (编辑 > 黏贴的键盘快捷键)将复制内容黏贴到新的Photoshop文档中。

12选择文件 > 存储为Web和设备所用格式，将新文档以JPG格式存储至images文件夹。

撰写HTML标记

我通常会先实现HTML（包括class和id），然后才写CSS来设置站点样式。这样我就不必前后来回切换，可以保证我的工作顺畅进行。我们先给我们的设计中不同的部分编码，然后再来设置它们的样式。

容器

13创建一个id为container的div；它会用于容纳除了页脚之外的所有元素。通过这种方法我们可以在接下来的时候很容易地将其置为居中。

14为logo创建一个div并将网站的logo图片插入其中。你可以用我们之前讨论过的相同的方式从PSD样板中将LOGO切出来，或插入你自己的LOGO(推荐)。

Language: HTML


<div id="container">
  
<div id="logo">
    <img src="images/logo.jpg" width="348" height="60" title="logo" />
  </div>

导航栏

15接下来，我们创建导航栏。使用一个无序号列表，将每个导航栏链接加为列表项。给第一个列表项设置idfirstlink，顺便给当前链接加上一个背景图(从PSD中切出的书签)。还要加上分割线。

Language: HTML


<div id="navigationbar">
<ul>
<li id="firstlink"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="dividerheader"></div>

子乌注：完全没必要使用一个独立div来放分割线，设置navigationbar的背景即可，下同。

侧边栏

16创建新的div，设置id=sidebar。

17插入一个表单，带有元素input type="text"。

18改变文本框元素的默认值为Search，size属性设为 29 (29个字符)，给它绑定一个Javascript事件监听器，这样当文本框元素获得焦点或失去焦点时，会触发函数clearText()。

注:强烈建议静悄悄地写javascript。因为我们在这个教程中的重点不是JavaScript，我决定在行内实现函数。请使用不引人注目的JavaScript(子乌注：不太明白作者的意思……)。

Language: HTML

onFocus="clearText(this)" onBlur="clearText(this);"

这就是在搜索文本框中隐藏或显示“Search”文本的函数内容。

Language: HTML

<script type="text/javascript">
function clearText(field)
{
  if (field.defaultValue == field.value) field.value = '';
  else if (field.value == '') field.value = field.defaultValue;
}
</script>

下面是我们关于侧边栏和搜索表单的HTML标记。

Language: HTML


<div id="sidecolumn">
  
<form>
<input type="text" id="searchform" value="Search" size="29" onFocus="clearText(this)" onBlur="clearText(this)">
  </form>
<div id="dividersidebar"></div>

最近文章和最新回复

19创建两个div；设置id为recentposts和latestcomments。

20在他们之间加入一个分割线。输入一些示例内容包括添加标题和段落元素。双箭头引用(»)的HTML字符编码为»。你可以在这看到一个完整的html字符编码表：here. 我使用

标签来区分每个回复/文章名，待会再设置他们的样式。

Language: HTML


<div id="recentposts">
<h1>recent posts</h1>
<ul>
<li><a href="#">» lorem ipsum post</li>
<li><a href="#">» another post</a></li>
<li><a href="#">» i'm just writing things</a></li>
</ul>
</div>
<div id="dividersidebar"></div>
 

<div id="latestcomments">
<h1>latest comments</h1>
<ul>
<li><a href="#">» "blah blah blah..."</a></li>
<li><a href="#">» "blah blah blah..."</a></li>
<li><a href="#">» "blah blah blah..."</a></li>
</ul>
</div>

侧边栏网页横幅

现在每个部落格都有广告区域，我们为什么不放呢？

21在div #sidebar，添加另一个容纳所有网页横幅的div。

22前两个网页横幅需要设置id adrightfirst (右边的)和 adleftfirst (左边的)。因为我们的空间只够在一行放两个广告，你必须给每行加个换行。

Language: HTML


<div id="adrightfirst"></div>
<div id="adleftfirst"></div>
<div class="adright"></div>
<div class="adleft"></div>
<div class="adright"></div>
<div class="adleft"></div>
<div class="adright"></div>
<div class="adleft"></div>
</div>

文章

回到部落格文章的标记部分。

23创建三个div：date1、datetext1和post1。

24添加日期(日期使用

，月份使用
)，标题(使用

)，文章元数据(使用

)还有一些内容(使用

)。

子乌注：从语义的角度上来讲，日期使用h1、文章标题使用h1都是有问题的，因为在一个页面中应该只有唯一一个顶级标题，建议用字体大小来设定日期的格式，而文章标题使用h2级别的标题来标明——它应该是除了部落格名称之外级别第二高的标题（可多个），另外，div不该用id来标识，这样问题很多，应该直接用class来标识，前面的广告部分也存在类似的问题。

25复制整个文章div，黏贴到下面(创建另一篇部落格文章条目)。在两篇文章间插入分割线。别忘了修改数字(date1 改为 date2)。

子乌注：前面已经说过了，这样做的话没太大意义，除非要针对文章进行脚本处理或别的操作，别设置无意义的id！

Language: HTML


<div id="date1">
<div id="datetext">
<h1>13</h1>
<p>apr</p>
</div>
</div>
 

<div id="post1">
<h1>i enjoy reading six revisions</h1>
<h2>by eric hoffman  ·  1223 comments </h2>
 
  <img src="images/snowboard.jpg" title="snowboard" style="margin: 5px 0px 5px 0px"/>
<p> "lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="#"><i>continue reading... </i></a></p>
<div id="dividerpost"></div>
</div>

Language: HTML


<div id="date2">
<div id="datetext">
<h1>12</h1>
<p>apr</p>
</div>
</div>
 

<div id="post2">
<h1>who likes obama?</h1>
<h2>by george bush  ·  0 comments </h2>
 
    <img src="images/snowboard.jpg" title="snowboard" style="margin: 5px 0px 5px 0px"/>
<p> "lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="#"><i>continue reading... </i></a></p>
</div>
</div>

页脚部件

26创建div，id=footerwidgets。在其内部放置一个新的div，id=footerwidgettext。插入三个不同id的div。例如 footerwidgettextfirst, footerwidgettextmiddle,依此类推。使用不同的id以使得可以设置不同的margin，所以我们不使用class。

子乌注：设置不同的margin不是不使用class的原因……不过这里影响不太大。另外，id的命名真的很烂，我知道你是示例，那也不该这么写啊……

Language: HTML


<div id="footerwidget">
<div id="footerwidgettext">

<div id="footerwidgettextfirst">
<h1>Widget title </h1>
<p>Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...</p>
</div>
 

<div id="footerwidgettextmiddle">
<h1>Widget title </h1>
<p>Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...</p>
</div>
 

<div id="footerwidgettextlast">
<h1>Widget title </h1>
<p>Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...</p>
</div>
</div>
</div>

页脚

我们接下来做个简单的页脚节点。

27和div#footerwidgets一样，div#footer设为100%宽度，不过文本将和其余内容对齐(居中)。这就是我们为什么要在其中创建另一个id=footertext的div。将页脚内容添加进#footertext。

Language: HTML


<div id="footer">
<div id="footertext">
© 2010 Eric Hoffman. All rights reserved.
</div>
</div>
 

</body>

上面就是全部的标记内容，接下来是CSS。

撰写CSS

我们完成了HTML，现在来处理我们的样式。

28首先的首先：打开开始时创建的文件style.css。确保你的HTML文件正确链接到这个文件。

重置CSS

29首先，我们使用一个简单的CSS将我们的样式进行重置。我建议你针对CSS重置进行更进一步的阅读以充分了解它的优势；CSS Reset 是个不错的开始。简单起见，我这里只使用了选择器 *。

Language: HTML

* {
  margin:0;
  padding:0;
}

Body背景和 @font-face

30下一步，改变body背景为我们PSD样板中的杂色蓝色背景。学习将其从PSD样板中切出来(我也将它放到可下在的原文件包中——background.jpg).

31我们还使用了CSS3元素text-shadow。0是x轴偏移量，1px是y轴偏移量，2px是模糊效果而#555是阴影颜色。@font-face允许我们内嵌一个非网页安全的字体以使所有访客可以看到我们制作网页时的样子。你可以在 The Essential Guide to @font-face详细了解@font-size。

Language: CSS

body {
  background:url("../images/background.jpg") repeat;
  text-shadow:0 1px 2px #555;
}
 
&#64;font-face {
  font-family:"Museo Slab 500";
  src:url("http://hatchergraphics.com/MuseoSlab-500.otf");
}

包装/导航

32我们现在创建一个容器作为包装以使我们可以轻易地将我们的设计居中。我喜欢制作精确到像素的设计，所以我选择了固定宽度布局。如果你想看看其他布局样式，你可以看看A Guide on Layout Types in Web Design。为了居中容器，只要使用margin: 0 auto; (子乌注：删掉了一个ad XD)。

33给导航栏设置样式。#firstlink是当前链接。如果你想扩展设计并添加所有的四个页面，你必须修改列表的id。例如，如果我现在在“About”页面，列表项About必须有idfirstlink。为了居中背景图，使用 background-position: center;。

子乌注：嗯……用class的话更利于语义，因为id不应该随意变更……

Language: CSS

#container {
  height: 1000px;
  margin:0 auto;
  width:890px;
}
 
#navigationbar {
  height:auto;
  margin:50px 0 80px 390px;
  width:650px;
}
 
#navigationbar ul li {
  display:inline;
  font-family:"Museo Slab 500";
  font-size:15px;
}
 
#navigationbar ul li a {
  color:#FFF;
  padding:74px 30px;
  text-decoration:none;
}
 
#navigationbar ul li a:hover {
  color:#DBDBDB;
  text-decoration:none;
}
 
#firstlink {
  background:url("../images/linkbg.jpg") no-repeat;
  background-position:center;
  color:#FFF;
  padding:74px 30px;
  text-decoration:none;
}

Logo/分割线

34Logo的高度和宽度取决于你的网站名称。我们的“Letterpress”字体为65pt(Photoshop中)，高度60px而宽度为348px。

35接下来设置分割线的样式。你可以使用2px高的空白div、span或者设置你的标题的样式以让其有2px高的底部边框。我使用了和文章分割线一样的背景图。

前面提到过了，完全没必要使用独立div来做分割线，无意义的元素，无意义的流量消耗。

Language: CSS

#logo {
  float:left;
  height:60px;
  width:348px;
}
 
#dividerheader {
  background:url("../images/dividerpost.jpg") repeat-x;
  height:2px;
  margin-bottom:20px;
  width:890px;
}

侧边栏

36下一步，设置侧边栏的样式。因为部落格div会有500px宽，而我喜欢在文章和侧边栏之间有些留白，我设定侧边栏的宽度为250px。

37设置分割线的样式，recentposts和latestcomments以及搜索栏。这里我们会使用另一个CSS3属性：border-radius。这意味着我们可以只使用CSS创建圆角边角。不幸的是这个功能并不被所有浏览器支持，所以它不会在所有浏览器下看着都圆圆的(例如IE8及以下版本)。

38给所有的广告元素设置样式以确保算数正确(他们的宽度加起来不能超过250px)。

Language: CSS

#sidecolumn {
  background-color:#2c7c88;
  border:1px solid #116678;
  float:right;
  height:240px;
  padding:25px 0;
  width:250px;
}
 
#dividersidebar {
  background:url("../images/dividersidebar.jpg");
  height:2px;
  margin-bottom:10px;
  margin-left:25px;
  margin-top:10px;
  width:200px;
}
 
#recentposts,#latestcomments {
  margin-bottom:10px;
  margin-left:25px;
  width:200px;
  word-wrap:break-word;
}
 
#recentposts ul a,#latestcomments ul a {
  color:#FFF;
  display:block;
  font-family:"Trebuchet MS";
  font-size:13px;
  line-height:22px;
  list-style-type:none;
  text-decoration:none;
}
 
#searchform {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  background-color:#FFF;
  border:0;
  font-family:"Trebuchet MS";
  font-size:13px;
  margin-left:25px;
  padding:2px 6px;
}
 
#adrightfirst {
  float:right;
  margin-right:-1px;
  margin-top:31px;
}
 
#adleftfirst {
  float:left;
  margin-left:-1px;
  margin-top:31px;
}
 
#adright {
  float:right;
  margin-right:-1px;
  margin-top:16px;
}
 
#adleft {
  float:left;
  margin-left:-1px;
  margin-top:16px;
}
 
#adright,#adleft,#adrightfirst,#adleftfirst {
  background-color:#f6f6f6;
  border:1px solid #e7e7e7;
  height:117px;
  width:117px;
}
 
#adright:hover,#adleft:hover,#adrightfirst:hover,#adleftfirst:hover {
  background-color:#e7e7e7;
  border:1px solid #dbdbdb;
}

文章

39再下来：文章。我们将创建2个文章div：一个叫做post1另一个叫做post2。

40接下来我们对日期做同样的处理。如我之前提及的，两个文章div有500px宽。通过margin来定位他们，设置padding-left为-90px。position设为absolute。

41创建另一个分割线，但这次它将和文章一样宽。

子乌注：从下面的css来看就明白这种情况下用id来设css是多么的傻……

Language: CSS

#post1 {
  color:#FFF;
  float:left;
  height:auto;
  margin:10px 0 0 10px;
  padding-left:90px;
  position:absolute;
  width:500px;
}
 
#post2 {
  color:#FFF;
  float:left;
  height:auto;
  margin:525px 0 20px 10px;
  padding-left:90px;
  position:absolute;
  width:500px;
}
 
#dividerpost {
  background:url("../images/dividerpost.jpg") repeat-x;
  height:2px;
  margin-bottom:20px;
  margin-top:16px;
  width:495px;
}
 
#date1 {
  background:url("../images/datebg.jpg")no-repeat;
  float:left;
  height:123px;
  width:90px;
}
 
#date2 {
  background:url("../images/datebg.jpg")no-repeat;
  float:left;
  height:123px;
  margin-left:-90px;
  margin-top:500px;
  width:90px;
}
 
#datetext {
  height:46px;
  margin:0 auto;
  padding-top:38.5px;
  width:31px;
}
 
#datetext p {
  color:#FFF;
  font-family:"Museo Slab 500";
  font-size:20px;
  text-transform:uppercase;
}
 
#datetext h1 {
  color:#FFF;
  font-family:"Museo Slab 500";
  font-size:35px;
  line-height:22px;
}

页脚部件

快好了！

42页脚部件：正如你在HTML那看到的，页脚和页脚部件都放在容器外，所以他们不会被我们的包装限定为890px宽。它们俩都是100%宽。

43添加背景、高度(240px)，以及顶部margin。我新增了个#footerwidget div，一个文本div，以及其他三个放不同部件的div。给它们设置相同的样式，唯一的区别就是它们的边框和margin。

Language: CSS

#footerwidget {
  background:url("../images/widgetbg.jpg");
  height:240px;
  margin-top:110px;
  width:100%;
}
 
#footerwidgettext {
  height:240px;
  margin:0 auto;
  width:890px;
}
 
#footerwidgettextfirst {
  border-right:1px dotted #FFF;
  float:left;
  height:165px;
  line-height:22px;
  margin-top:15px;
  padding:10px 10px 20px;
  position:absolute;
  width:276px;
}
 
#footerwidgettextlast {
  float:left;
  height:165px;
  line-height:22px;
  margin-left:594px;
  margin-top:15px;
  padding:10px 10px 20px;
  position:absolute;
  width:276px;
}
 
#footerwidgettextmiddle {
  border-right:1px dotted #FFF;
  float:left;
  height:165px;
  line-height:22px;
  margin-left:297px;
  margin-top:15px;
  padding:10px 10px 20px;
  position:absolute;
  width:276px;
}

页脚

44页脚的高度是44px。设置背景。属性position设置为absolute以使它永远在底部。类似页脚部件，我为文本创建了另一个div以让我能够让它们居中并让它和主体内容区域对齐。这里我使用了margin: auto 0;属性来居中它。top-margin设为10px。

Language: CSS

#footer {
  background:url("../images/footer.jpg") repeat-x;
  height:44px;
  position:absolute;
  width:100%;
}
 
#footertext {
  height:44px;
  margin:10px auto 0;
  width:890px;
}

45接下来的样式会应用到不同的元素上；我只是将它们放到一起而已。

Language: CSS

#recentposts h1,#latestcomments h1,#footerwidgettextfirst h1,#footerwidgettextmiddle h1,#footerwidgettextlast h1 {
  color:#FFF;
  font-family:"Georgia";
  font-size:18px;
}
 
#post1 h1,#post2 h1 {
  font-family:"Georgia";
  font-size:30px;
}
 
#post1 h2,#post2 h2 {
  font-family:"Trajan Pro";
  font-size:18px;
}
 
#post1 p,#post2 p {
  font-family:"Trebuchet MS";
  font-size:13px;
  line-height:22px;
}
 
#post1 a,#post2 a {
  color:#FFF;
  text-decoration:none;
}
 
#post1 a:hover,#post2 a:hover {
  border-bottom:1px dotted #FFF;
}
 
#footerwidgettextfirst p,#footerwidgettextmiddle p,#footerwidgettextlast p,#footertext p {
  color:#FFF;
  font-family:"Trebuchet MS";
  font-size:13px;
}

完成了！

我希望你喜欢这部教程。请在下面提出你的问题和想法。

下载源文件

《简洁优雅的部落格网页布局教程》系列

这篇教程是一个系列的第二集。这个部分(第二集)展示了如何利用第一集中建立的PSD设计制作一个HTML/CSS网页模板。

第一集：使用Photoshop建立一个简洁优雅的部落格网页布局
第二集：PSD/HTML转换：简洁优雅的CSS3网页布局

使用Photoshop建立一个简洁优雅的部落格网页布局

子乌 — Wed, 13 Oct 2010 02:00:05 +0000

作者： Eric Hoffman
译者：Sheneyan(子乌)
时间：2010-10-13
英文原文：Make an Elegant and Simple Blog Web Layout Using Photoshop

这篇网页设计教程会为你展示制作一个干净简单的部落格布局的PSD模板的过程。我们会制作这个部落格的首页设计。而教程的第二部分会引导你将PSD转换成HTML/CSS。

《简洁优雅的部落格网页布局教程》系列

这篇教程是一个系列的第一集。这部分(第一集)展示如何在Photoshop中制作模板，而在下一个教程(第二集)里你会看到如何利用这个PSD设计来制作HTML/CSS网页模板。

第一集：使用Photoshop建立一个简洁优雅的部落格网页布局
第二集：PSD/HTML转换：简洁优雅的CSS3网页布局

最终成果

点击下图可看到完整大小的工作成果。

创建一个新的PSD文件

1让我们直接开始吧。首先，打开Adobe Photoshop(废话)。我使用的是CS4，但其他CS版本也能做得很好。先创建一个新文档(Ctrl/Cmd + N)；设置文档大小为1046×1630 px，白色背景。

制作背景

2你的新PSD的背景图层应该是被锁定且无法编辑；我们需要为此做一些事。双击图层面板上的背景图层缩略图；会弹出一个新的图层对话窗口，点击OK按钮以使该图层可编辑。

3现在按住Ctrl(或Cmd键)单击图层面板上的背景图层缩略图(默认情况下Photoshop会将其更名为Layer 0)以在画板周围放置一个选择框。

4在工具面板中设置背景色为蓝色(#45a0ac)并使用快捷键Ctrl/Cmd+Backspace，让选中的部分填充上该背景色。

5你的背景色现在应该已经设置为暗影蓝。确保背景图层仍被选中的情况下选择菜单滤镜 > 杂色 > 添加杂色。将数量改为2%并应用滤镜。

设置一些Photoshop初始参考线

6 为了方便我们的作品对齐，设置三条垂直参考线(视图 > 新参考线)在这几个位置：60.5px，505px 和 955px。

技巧：使用快捷键Ctrl/Cmd + ; 来切换你的Photoshop参考线是否可见。

7在40px处也设置一条水平参考线。

添加部落格名称

8选择工具面板上的横排文字工具(T)，然后在左上角输入你的部落格名称。在这里，我使用字体Museo Slab 500，字体大小65pt。字体颜色设置成了暗灰(#252525)，与我们暗蓝色的背景形成不错且有些微妙的对比。顺便说一下，当你选中横排文字工具后，你可以在选项栏中设置所有这些类型的选项。

9在位于图层面板的你部落格名称的文本图层上双击鼠标，弹出图层样式对话框窗口。勾选投影和内投影样式以让文本有活版/插图排版效果。

修改投影的颜色为亮蓝(#3f9cb0)，混合模式为屏幕(我猜是第一个“正常”，不过不是很确定)，并把距离和大小设置为1px。

修改内投影的距离和大小为2px。

10使用移动工具(V)将文本对齐到刚才设置的参考线以定位文本。

添加主页导航菜单链接

11再次使用横排文字工具，使用和刚才相同的字体创建四个(独立的)导航栏链接，字体大小缩小为20pt。将他们写在不同的图层里。在这个教程中，菜单项分别为“Home”，“About”，“Archives”和“Contact”。

12将第四个导航栏链接(“Contace”)对齐到参考线最右端，而第一个导航栏链接与部落格名称右侧的参考线对齐。其他两个链接在他们之间。

13为了将他们对齐，在图层面板中选中这四个图层，然后选择图层 > 对齐 > 垂直。

14为了保证导航栏链接之间有相同的空白，在图层面板上选中这四个图层，然后选择图层 > 分布 > 水平居中。

15在88px处添加一条水平参考线(视图 > 新参考线)，使用移动工具(V)将这些链接放置于参考线之上。

制作活动导航菜单链接背景

16我们将用不同的背景色、字体颜色和阴影来高亮用户所在的页面。背景将会饰以类似“书签”的阴影(赋予我们布局一些视觉上的语义)。我会向你展示如何制作这个“书签”阴影。首先，创建一个新图层(将其命名为“linkbg”)。从工具面板中选中矩形选框工具(M)。在这个矩形选框工具的选项栏中，将样式选项改为固定大小并设置宽度选项为100px，高度选项为148px。将你的矩形选框置于画板上我们导航菜单栏周围。

17改变背景色为我们的暗灰(#252525)，点击Ctrl/Cmd + Backspace 填充矩形阴影。

18现在选中自定义形状工具(U)并在选项栏中设置形状选项为Arrow 2(是Photoshop于封装的自定义形状，子乌注：不知道是不是我用的版本是简化版，没找到Arrow 2，我用Arrow 9代替)。

19使用自定义形状工具在你的画板上画这个箭头，然后在图层面板上选中它所在的图层，将其旋转以朝上 (编辑 > 变换 > 旋转90^o 逆时针).

20右键单击箭头图层，选择栅格化图层将其转换成普通图层。

21在图层面板上修改图层的顺序以确保箭头图层在灰色“linkbg”层之上。

22在图层面板上选中箭头图层和“linkbg”层，选择图层 > 对齐 > 水平居中。

23Ctrl/Cmd + 单击图层面板的箭头图层缩略图以选中该图层，切换到“linkbg”图层，单击backspace或delete删除箭头图层下的区域。

做完之后，你不再需要这个箭头图层啦，干掉他就是了。

24现在你的活动导航菜单连接已经有了一个看着像书签的背景。通过应用内发光、颜色叠加和描边来设计这个图层以匹配我们logo的观感。

内发光颜色设为暗灰 (#2e2d2d).

颜色叠加再次使用我们的暗灰 (#252525)。你并不一定需要这个图层样式，因为之前我们已经使用了这个颜色填充图层。

描边颜色设为黑色 (#000000).

现在我们的“书签”活动链接指示看起来应该像这样：

设定导航菜单链接的样式和位置

25现在该给我们的菜单栏链接设置一些样式。首先，添加一个投影样式到其他三个非激活连接上(“About”、“Archives”和“Contact”)。

26下一步，使用横排文字工具(T)改变第一个链接(“Home”)的文本颜色为白色。

27使用 图层 > 对齐 > 水平居中来水平对齐第一个链接和书签形状。我在“Home”文本下加了个在Adobe Illustrator下制作的小小的波浪矢量形状，不过可以不管它。

制作水平内陷分隔线

28在160px处添加另一条水平参考线。

29选中矩形选框工具(M)并创建一个 890×1px 大小的瘦长选框。

30添加新的图层(命名为“dividertop”)，在这个新图层上，单击Ctrl/Cmd+Backspace用任意颜色填充刚才的矩形。

31给“dividertop”图层应用一个颜色叠加图层样式以使该矩形的颜色比我们的暗蓝背景颜色稍亮(#2c7c88)。

32使用移动工具(V)将这个矩形与参考线左对齐和上对齐。

33复制图层并将它向原有矩形的右下方移动。重命名图层为“dividerbottom”。

34给它设置一个亮蓝颜色叠加图层样式(#4fbaca)。

在图层面板中同时选中“dividertop”和“dividerbottom”图层来链接它们——右键单击它们其中一个，从右键菜单中选择链接图层。这样当我们需要移动它们的时候它们会一起移动。

设计发布日期背景

35我们现在完成了布局的头部区域。接下来是主体内容部分，先是第一个部落格文章条目的日期。再首先：我们需要在210px处添加另一条水平参考线。

36在工具面板中选中圆角矩形工具(U)，在它的选项栏中，改变半径为10cm。

37使用那个圆角矩形工具创建一个75×150px大小的圆角矩形。

38给刚才的圆角矩形图层应用一个内阴影样式——设置内阴影的颜色为蓝色(#3793a0)。

39应用一个比内阴影更深的蓝色叠加图层样式(#2c788).

40给这个形状应用一个描边图层样式——使用比内阴影更深的蓝色线条颜色(#1a5a64)。

41将这个图层重名为“datebg”(意即“日期背景”)以使你的作品有组织，接着栅格化这个图层(右键单击，选择栅格化图层)。

42使用矩形选框工具，选中形状右边部分的1/3，删除选中区域。

43还是在图层“datebg”，通过滤镜 > 杂色 > 添加杂色添加一个杂色滤镜，数量选项设置为2%。

制作发布日期的垂直阴影

44现在给日期背景的阴影创建一个新图层。使用椭圆选框工具(M)，做一个大约17px宽100px高的椭圆形；最精确的方式是使用椭圆选框工具样式选项里的固定大小并输入宽和高的维度。

45将这个选框置于日期背景的右端。使用黑色(#000000)填充选框(Shift+F5)并将图层命名为“shadow”。

46在“shadow”图层上应用一个高斯模糊(滤镜 > 模糊 > 高斯模糊)，设定半径选项为3px。

47使用矩形选框工具，选中该模糊椭圆阴影的右半部分，单击backspace或delete删除这半部分。

48降低图层的透明度至55%，结束。

添加日期文本，文章标题，元数据

49日期背景完成后，接下来是添加部落格文章发布的日期。点击工具面板上的横排文字工具(T)，使用字体Museo Slab 500写下你的日期。数字天数的字体大小应该是42pt，而月份——位于数字天数下的一行——为20pt。我输入的是“13 APR”，APR另起一行。

50使用移动工具和之前使用过的图层对齐命令对齐半椭圆阴影(图层“shadow”)、日期背景(“datebg”)和日期文本图层。

51至于文章的标题，我选择Georgia系列字体，35pt大小。而元数据(作者、回复数)，我使用20pt的Trajan Pro。你可以看到我用middle dot/Georgian comma来分隔作者名与回复数——直接复制并将其黏贴到Photoshop中。另外，修改文本行高为28px。你可以在窗口 > 字符面板中修改。

下面是我们的日期，部落格文章标题，以及文章元数据。

52在165px处添加一条垂直参考线。将你的文本与参考线和日期对齐。

添加部落格文章前置图像

53使用矩形选框工具(M)，创建一个480×150px 矩形(高取决于你使用的图像尺寸，但针对这个模板，最大宽度为480px)。

54在一个新图层上使用随便一种颜色填充你的选框，然后应用一个描边图层样式来给我们的图片加个边框。边框的颜色是暗灰(#1b1b1b)。

添加并定位部落格文章内容

55照一张你的图片并将其黏贴到你的PSD文件中。我用了一张滑雪板的图，不过你选什么样的图片并不重要；它只是我们PSD样板中的小点缀(eye candy，华而不实的东西)。使用自由变换(Ctrl/Cmd + T)调整你图片的大小以使其恰好塞进我们的矩形框中。

56切换到横排文字工具(T)并在图片下黏贴一些文本。你可以使用类似这个的Loerm Ipsum生成工具(用于排版的常用无意义文字)在一瞬间生成些文本，不过用一些网页副本来让这个样板尽可能的真实不会是个坏主意。我为文本内容选用的字体是Trebuchet MS，17pt大小，并设置行高为28pt。

57在图层面板中选中所有的部落格文章设计元素并以我们创建的参考线为基准对齐。

58在450px处添加一条新的水平参考线。让文本与左侧参考线和新参考线对齐。

59从图层面板中选中所有的部落格文章图层(“datebg”、“shadow”、“date”、部落格文章标题文本、元数据文本、图片背景、图片以及部落格文章文本)，试用图层编组(Ctrl/Cmd + G)将他们一起分组，这会让所有的所有这些图层位于同一个文件夹下。命名这个图层分组为“Post 1”。

在部落格文章底部加一条内陷水平分割线

60在700px处添加另一条水平参考线。复制我们刚才创建的分割线并命名该图层为“dividerpost”。

61使用自由变换调整这个分割线的尺寸让它和前置图像一样宽度。接着使用移动工具(V)将其挪动到我们刚创建的水平参考线位置。

添加另一篇部落格文章

62复制图层分组“Post 1”并重命名为“Post 2”。

63在720px处添加新的水平参考线，将Post 2的日期框的阴影与新参考线对齐。

64改变图层分组“Post 2”的元素以使它与第一篇部落格文章区分开来；比如，改掉回复数，日期，和部落格文章标题。

制作侧边栏背景

65使用矩形选框工具创建一个250×350px大小的矩形(在一个新图层将这个矩形选框用随便一种颜色填充，并将新矩形命名为“sidebar”)。这个矩形是我们的侧边栏背景。

66让这个侧边栏与位于210px的水平参考线和我们之前创建的最右边的垂直参考线对齐。

67给这个侧边栏背景设一个颜色叠加图层样式；颜色叠加的颜色设为暗蓝(#2c7c88)。

68另外，给侧边栏背景也设一个描边图层样式，描边颜色更暗一些(#116678)。

69在730px和930px各设置一条垂直参考线；我们利用这些参考线确保在我们的侧边栏内部有一些留白。

制作搜索栏

70使用圆角矩形工具(U)从左边的垂直参考线(730px位置)画至右边的垂直参考线；这个圆角矩形大约25px高。将这个阴影图层命名为“searchbar”。给这个圆角矩形设一个白色(#ffffff)的颜色叠加图层样式。

71找一个放大镜图标来充当搜索按钮(你可以使用类似IconFinder的在线工具来寻找免费图标)。

72将这个图标定位在白色圆角矩形内部(在其左部)。

73创建一条就像我们之前做的水平分割线。跨度从730px的垂直参考线到930px的垂直参考线。在它和搜索栏之间保留一点小小的空白。

添加侧边栏文字

74现在轮到文字了。我使用横排文字工具(T)加了一个侧边栏标题(“最近文章”)——Georia字体，字体大小23pt。其下我列了最近发布的三篇部落格文章，使用字体Trebuchet MS，大小17pt，行高28pt。将这个文本图层命名为“recent posts”。

75复制上面的水平分割线并将它移动到“recent posts”的底部。

76创建另一个类似的文本图层，命名为“recent comments”。

77将这两个文本块与左侧参考线对齐。

设计侧边栏广告位

78使用矩形选框工具画一对118×118px大小的正方形。按住shift键以确保你的方块的宽和高完全一致。

79将一个方块右对齐(靠向右边参考线)而另一个左对齐(靠向左边参考线)。

80使用灰色(#f6f6f6)颜色涂层叠加样式填充这两个正方形。这是给我们的部落格放置 banner广告的地方。

81将这两个灰色方块复制两次或更多，这取决于你打算放几个广告。

侧边栏整理

82将所有的侧边栏元素图层编组并命名这个图层分组为“sidebar”以保持我们的样板整洁(如果你和一个将你的PSD转成HTML/CSS的前端工程师一起工作，他会因此爱死你的)。

布局主体页脚

83新增两条新的水平参考线：一条在1220px而另一条位于1550px。

84使用矩形选框工具(M)，横跨整个页面布局宽度——两条新参考线之间——画一个矩形，这就是我们的页脚呆的地方。使用暗灰(#2c7c88填充矩形。这是我们的页脚背景。

85给我们的页脚背景应用一个杂色滤镜(滤镜 > 杂色 > 添加杂色)，数量设为1%。

86给页脚背景应用一个黑色(#000000)内阴影图层样式。

87现在添加三个一样尺寸的文本栏，全都一样宽度。在这里，我为页脚文本的真实网页副本而从维基百科复制了一些有趣的内容。标题(“Widget title”)设为Georiga，23pt，普通文本则为Trebuchet MS，17pt。别忘了将行高改为28pt！

制作主体页脚栏目分割线

88为了制作页脚文本栏目之间的白色垂直分割线，我们将使用图案(pattern)。第一部是创建一个新的PSD文件(Ctrl/Cmd + N)，宽度为1px、高度为3px。

89放大到足够近以让你能看清你的作品(使用缩放工具)。

90使用矩形选框工具和编辑 > 填充将第一个像素(顶端)染为黑色(#000000)。

91选中整个画板(Ctrl/Cmd + A)然后选择编辑 > 定义图案(子乌注：CS4中将Define Pattern翻译为定义图案)。命名你的模式，如“Vertical Dots”。

92切换回我们的主要Photoshop文档。

93创建垂直的矩形选框(1×280px)。

94添加新的图层并单击Shift + F5查看填充对话框窗口。在使用选项下拉菜单中，从列表中找到我们刚创建的图案(“Vertical Dots”)并单击OK，使用它来将我们的矩形选框填满。

95复制这个虚线垂直分割线图层并将它们放置于三个页脚栏目之间。

96将这些文本栏目进行编组，垂直对齐。

97添加一个白色颜色叠加图层样式到每一个虚线垂直分割线上，让他们显示为白色。

创建辅助页脚

98就在布局的正底部创建一个短的矩形选框，并用暗灰(#1f2024)填充。

99应用杂色滤镜，数量设为1%。

100输入一些文本，例如你的版权信息，使用字体Trebuchet MS，17pt。将文本与最左边的参考线水平对齐。

结束！

大功告成！这不是很简单吗？(照着做很简单……我翻这100条翻了好久……)

简洁优雅的部落格网页布局教程系列

第一集：使用Photoshop建立一个简洁优雅的部落格网页布局
第二集：PSD/HTML转换：简洁优雅的CSS3网页布局

下载源文件

psd文件 (ZIP, 1.61 MB)

子乌注：以后我都会用部落格来翻译blog，还是喜欢这个台湾的译法。

简单实用的wp插件:ozh-random-words

子乌 — Sat, 09 Oct 2010 14:08:41 +0000

ozh-random-words是一个很简单但是很实用的wordpress插件，它的功能很简单，就是随机输出设定好的一系列html字符串。而用途就大了，比如可以随机更换banner，随机更换广告，随机更换与访客的问候语，随机更换皮肤……
例如，我想随机更换我“华丽的分割线”，我只需要在ozh-random-words的配置后台配置一系列的分割线图片html（假设这组html叫做split，具体的配置方法参见作者的说明，就上面那个链接），我只要在我的post中写下（[]之间没空格！）:

Language: HTML

[ random:split ]

然后刷新页面就会看到输出一个随机的分割线来(如下图，每次刷新都会变)：

不过这样一来就会有一个问题，假如随机输出内容很多，那每次加载页面时速度会很慢；或者说当你不希望每次刷新时都改变输出内容（而只想一天改一次），那你可以试着像我这样对插件进行修改（这个插件上次更新是一两年前，看作者的意思除非不兼容最新版本的wordpress他就不会再更新了，所以就放心大胆地改吧~），修改ozh-random-words/wp_ozh_randomwords.php文件，增加如下函数：

Language: PHP

//这个函数的作用是一天生成一个缓存文件然后直接读取缓存内容，
//这样会大大减少对超长字符串的处理。
/**added by Sheneyan 2010.10.09**/
function wp_ozh_randomwords_perday($input='', $display=1) {
//取得当前路径
	$self_path = dirname(__FILE__).'/';
//如果入参为空,直接返回空字符串
	if ($input=='')return '';
//取得缓存文件名(当前路径/入参名_当前日期)
	$today_cache_file = $self_path.$input.'_'.date('Ymd');
//如果缓存文件不存在（不能够从文件中读出数据）
	if (!($result=file_get_contents($today_cache_file))){
//调用原有函数取得随机字符串
		$result = wp_ozh_randomwords($input,0);
//将随机字符串存入缓存文件中
		file_put_contents($today_cache_file,$result);
	}
//昨天的缓存文件名
	$fn = $self_path.$input.'_'.date('Ymd',strtotime('-1 day'));
//如果昨天的缓存文件还存在，则删除（忽略错误）
//如果担心删除文件影响性能，可以放在cron中执行或者
//放到wordpress的定时执行中执行。
	if (file_exists($fn))@unlink($fn);
//如果需要立刻显示则打印到屏幕，否则返回。
	if ($display)
		print $result;
	else
		return $result;
}

这样修改完后可以在模板中直接这样调用：

Language: PHP

wp_ozh_randomwords_perday('split',1)?>

不过如果想在post直接实用shortcode调用的话，还需要进一步修改插件源码。先增加如下函数：

Language: PHP

function wp_ozh_randomwords_returnword_perday($input) {
//直接调用刚才写的函数，记得设定不立刻显示
	return wp_ozh_randomwords_perday($input[1],0);
}

找到函数wp_ozh_randomwords_postcontent，做如下修改（在patch_start和patch_end之间的代码是新增的）：

Language: PHP

function wp_ozh_randomwords_postcontent($input) {
	/* replace [random:animals] inside posts */
	$input = preg_replace_callback ("/\[random:([^\]]+)\]/", "wp_ozh_randomwords_returnword", $input);
/**added by Sheneyan 2010.10.09**/
/**patch_start*/
//过滤shortcode randompd
	$input = preg_replace_callback ("/\[randompd:([^\]]+)\]/", "wp_ozh_randomwords_returnword_perday", $input);
/**patch_end*/
	return ($input);
}

经过修改，我们增加了一个新的shortcode randompd，只要这样调用即可（记得去掉[]前后空格）：

Language: HTML

[ randompd:split ]

如何？效果出来了吧？我页面上的Daily English也是调用这个插件生成的。

这个插件很简单，甚至可以说有些简陋，但是这样留给我们的运用空间就相当的大了，怎么用，就看你的了

给wp-syntax插件增加标题

子乌 — Fri, 08 Oct 2010 12:22:50 +0000

wp-syntax估计是每个技术类blog都会使用的代码高亮插件（你没用？嗯……当我没说），不过却有一个小小的缺陷：没有提供标题，而这个功能在插件内使用的GeSHi中是可以设定的，下面就简单说一下如何修改源码，让你的高亮源码块的标题头显示出高亮代码的所属语言。

我对源码做了三个修改：

增加显示当前语言的标题栏（有兴趣的童鞋可以加上复制代码、收缩代码、打印啥的……）
将原来的行数标记的实现改变（原来的实现是只有当设定line="1"时才显示行数），当没有设定行数或者设定行数为1的时候，显示行数，当行数设置为0的时候才不显示行，这样省得我在每个代码块中加上参数line="1"…
修正了显示行数时代码不宽显示的小问题。

增加标题栏

在wordpress控制台找到编辑插件的地方，编辑wp-syntax的文件wp-syntax.php(喜欢在直接修改源文件的就去/wp-content/plugins/wp-syntax/目录下找吧)，找到下列代码：

Language: PHP

if ($line)
{//显示行数
	$output .= "\"line_numbers\">";
	$output .= wp_syntax_line_numbers($code, $line);
	$output .= " \"code\">";
	$output .= $geshi->parse_code();
	$output .= "
";
}
else
{//不显示行数
	$output .= "\"code\">";
	$output .= $geshi->parse_code();
	$output .= "
";
}

稍微修改一下：

Language: PHP

if ($line)
{
	$output .= "Language:  ";
	$output .= $geshi->get_language_name();
	$output .= "
\"line_numbers\">";
	$output .= wp_syntax_line_numbers($code, $line);
	$output .= " \"code\">";
	$output .= $geshi->parse_code();
	$output .= "
";
}
else
{
	$output .= "\"code\">";
	$output .= "Language:  ";
	$output .= $geshi->get_language_name();
	$output .= "
";
	$output .= $geshi->parse_code();
	$output .= "
";
}

然后找到wp-syntax.css文件，在最后面增加一行：

Language: CSS

.code_header{
  font-size:12px;
  font-weight:bold;
  background:#eee;
  border-bottom:solid 1px gray;
}

一个很简单但我觉得还算实用的标题头就出现了（因为wp-syntax将代码的高亮展示部分完全自行实现，所以没法直接使用GeSHi的方法set_header_content）。

默认显示行数

那个啥，我觉得默认显示行数的话会更实用，因为显示行数的话看起来比较专业

还是刚才的wp-syntax.php，就在我们刚才修改的第一句：

Language: PHP

if ($line)
{
...
...
...
}

修改为:

Language: PHP

if (!$line||$line=="1")
{
...
...
...
}

这样就搞定了~~下面的代码分别是设定是否显示行数的示例，看看：

Language: HTML

<pre lang="html4strict" escaped="true">
<p>这个代码块我默认没提供line参数，不过依然会显示行数</p>
</pre>

Language: HTML
1 2 3	<pre lang="html4strict" escaped="true" line="1"> <p>这个代码块我设定了line="1"，会显示行数</p> </pre>

Language: HTML

<pre lang="html4strict" escaped="true" line="0">
<p>这个代码块我设定line="0"，不会显示行数，
<strong>需要注意的是：只要是"非0"的值我就不显示行数！</strong>，
想显示行数的话就将前面的$line=="1"改成$line!="0"即可。</p>
</pre>

关于上面三个demo，我有两点需要说明一下：

html的lang是html4strict而不是html或htm，注意一下，否则无法高亮，标题也会显示“unknown language”，觉得不爽的童鞋可以修改一下GeSHi的声明……
上面的代码块我都使用了参数escaped="true"，这样可以让正常显示，不过需要写成</pre>，而且bt的wordpress的编辑器会自动帮助你把<修改成<，写代码时要注意一下……

带行数时显示问题

如果像我一样一直都没设置过line参数的话，估计都不会发现wp-syntax的这个小小bug，当代码不够宽的时候，他无法将代码内容占满整行，下面是错误图例：

修改的方式很简单（只在chrome 6.0.472.63/ie 8/firefox 3.6.2下测试通过……不过估计只要是常规的浏览器应该没太大问题，这不涉及css hack吧），找到刚才修改过的文件wp-syntax.css的如下代码：

Language: CSS

.wp_syntax table {
  border-collapse: collapse;
}

修改为：

Language: CSS

.wp_syntax table {
  border-collapse: collapse;
  width:100%;
}

好了，应该无问题了~

补充说明

wp-syntax的现有代码相当简洁，很好理解，如果够闲，还可以给它写一套dashboard下使用的配置界面以控制其显示的效果 ……

两张壁纸

子乌 — Fri, 08 Oct 2010 01:20:40 +0000

第一张是基本linux命令的壁纸，扔桌面上，碰到想不起什么命令的时候看看桌面即可-_-(via tuxtraining.com)

第二张是vim的常用命令（via riku）

招聘经理希望程序员拥有的5个素质

子乌 — Thu, 07 Oct 2010 05:33:56 +0000

译者：Sheneyan(子乌)
时间：2010-10-07
英文原文：5 Qualities Every Hiring Manager Wants in a Developer

当提及程序员的工作技能或必备素质的时候，在互联网上会看到充斥着各种各样的列表。而涉及到程序员的工作说明时，很多人并不具备那些相同的品质，怎么办？

招聘理念影响程序员的必备素质

从某种程度上讲，这取决于公司的招聘理念及认为哪个更有价值：开发技能还是其他无形的品质。Rob Mallery在洛杉矶的Originate Labs, Inc.（中文站）任企业发展经理(Director of Corporate Development)。Originate Labs是一家创投资源公司，其雇员是该领域中最优秀的。“我们与创业公司合作并投资我们的工程技术人才以换取股权或现金/股票。所以我们的工程师们必须达到或超过创业公司会雇佣的第一个或第二个‘建设工程师’这种类型人员的水平。所以我们的标注与那些大而‘稳’的公司不同”，Mallery解释道，“我宁可要那些拥有所有我们所期望的素质而完全没有我们所期望技能的任”。

在行业里许多招工启示中所缺少的是素质——而非开发技能或IT证书——负责招聘程序员的人们都同意这点。虽然名称不尽相同，这个列表将各种列表和说明的元素归纳为五个素质——每个人事经理希望程序员拥有的。

1、智力

虽然在招工启示中很少出现“更聪明”这样的字眼，但这是一个程序员工作必备的。Mark Herschberg是ZepFrog的CEO以及麻省理工学院(MIT)兼职讲师，在他的职业生涯中进行过很多次的招聘。实际上，他用了10个礼拜时间创建了一个20人的部门并招聘了许多来自创业公司或大企业如NBC和Sears的程序员。Herschberg解释说：“聪明的人会好的多。你可以教他们技能或知识但你没法教给他们智慧。”

Mallery同意这一点。“我们的工程师中前百分之一到百分之二的人与其他人最大的不同在于他们可以利用其高超的智慧来攻克问题而其他人则要用百分之九十的时间来纠正自己的错误。仅有的一些坏苹果会脱慢一个团队的效率因为所有人都需要为他们写的坏代码。”

2、把事情做好（GTD——Get Things Done）

Joel Spolsky，Fog Creek Software的创始人，有一个在技术产业被经常引用的两段式招聘理念：“聪明，而且能把事情做好”。他在文章（The Guerrilla Guide to Interviewing (version 3.0)）中如是说。Spolsky阐释了为什么只有聪明还是不够。“那些聪明但没法把事情做好的人经常是有博士学位且在没有人会听他的大公司工作，因为他们完全不切实际。”一些人称之为“自我驱动”或“内部动机”，但落实到开发工作上则需要产生结果。

3、算法和分析技能

一个求职者能够思考并不够，还需要他懂如何思考。大多数招工启示称之为“过硬的分析技能”。Herschberg将其更进一步，寻找不同的思维模式，因为求职者所熟悉的其他类型的思维，不止是抽象层或面向对象原则，可以增加团队的维度。

4、沟通技巧

Puramu，拥有五年技术管理经验的Arizona的社交媒体经理，在IT.Toolbox.com上指出一些程序员“自傲于不善沟通”并认为他们的代码能独立运行且完全不需要进行解释。Puramu简单地评论：“这很傻”。

Herschberg说：“软件开发更多的是一个社会学挑战而不是简单的技术挑战。成员之间交流的顺畅以共享思路与问题是非常重要的。他们至少要能够与其他工程师进行交流；最理想的是能够与非工程师交流。”

5、正确的个人理念

正确的个人理念每个公司都不相同，但都包括了以团队为重心的态度，胜利的姿态，谦逊以及好奇心。Herschberg描述了他所寻找的：“不止是一个积极的态度，还要如某人所说，‘我会找到一个方法来获得成功。’”

同样，Mallery的观点也是类似的。“缺乏自我是构造一个成功的由优秀工程师组成的团队的重要部分。这往往可以在那些敏捷或其他基于合作的环境下工作良好的工程师身上发现。他们并不考虑关于‘自己’的事情，而是考虑‘我们’的事情，而且他们会努力让最终结果变得更好，即便他们没有获得全部的荣誉。”

11个最常用的MySQL语句

子乌 — Thu, 07 Oct 2010 02:02:39 +0000

作者： Sachin Khosla
译者：Sheneyan(子乌)
时间：2010-10-06
英文原文：The 10 Most Common MySQL Queries

子乌注：嗯，纯入门的mysql教程。

1、创建表

在正常情况下估计没几个人会每次都使用脚本创建表(嗯，深得我心……)。不过，当你开始创建一个应用的时候，你需要创建数据库表。你可以使用下列语句来创建一个带主键的表。

Language: MySQL

CREATE TABLE  'emp' (
  'id' INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  'name' VARCHAR(45) NOT NULL,
  'lastname' VARCHAR(45),
  'dept' VARCHAR(45) DEFAULT 'sales',
  PRIMARY KEY ('id')
)
ENGINE = InnoDB;

上述语句在指定数据库中创建了一个名为“emp”的表。同时会有一个有主键约束的自增长字段“id”，自增保证了每次插入新行的时候id都会加1，而主键约束则用来检验重复值。字段“dept”被赋予了默认值（当没设定内容时为“sales”）。你可以在创建表的时候指定“引擎”。否则会使用默认引擎（MyISAM）。我们在这里使用“InnoDB”是因为它支持外键和事务处理。

2、插入语句

现在你的数据库里有了一张表，我们接下来看看如何在表里插数据。你可能已经使用插入语句很多次了，不过你用过既可以插入也可以更新（需要的话）的语句吗？这可以使用关键字“on DUPLICATE KEY”实现。下面是个例子：

简单的插入语句

Language: MySQL

insert into emp (name,lastname,dept) values('new name','new last name','Accounts');

插入/更新语句

Language: MySQL

insert into emp (id,name,lastname,dept) 
values('key that already exists', 'new name','new last name','Accounts')
on duplicate KEY UPDATE  name='default name', lastname='default last name';

在上面的查询语句中，如果传递给“id”的值已经存在，我们可以更新该行的内容而不是插入新行。当你需要检验字段而不是直接插入自增值时这会相当有用。

3、连接

因为连接有太多类型而显得很复杂。在不同的数据库中连接拥有不同的名称：自连接（self join），外连接（outer join），内连接（inner join），自然连接（natural join）等等。我们通常在两张表之间使用连接以获取数据。

让我们假设我们有另一张叫做“departments”的表，在其中存放了所有部门的数据。如果你想要获取带部门信息的雇员信息，查询语句应该是长这样子：

常规连接（Regular join子乌注：这并不是连接的一种定义，只是来与左连接和右连接区分而已）

Language: MySQL

select emp.name,department.name from emp 
join department on emp.dept = department.name

左连接（Left join）

Language: MySQL

select emp.name,department.name from emp 
left join department on emp.dept = department.name

右连接（Right join）

Language: MySQL

select emp.name,department.name from emp 
right join department on emp.dept = department.name

常规连接会取得两张表中满足条件的全部数据。左连接会匹配符合条件的记录，不过它也会返回左表中不符合条件的数据。另一方面，右连接会取得右表中所有不符合条件的数据。（子乌注：话说我还是喜欢oracle中外联的简化写法(+)，多好看啊）

4、创建和删除约束

如果你经常需要编辑/创建/删除表的约束，你可以这么写：

添加主键

Language: MySQL

ALTER TABLE 'TABLE_NAME'  
DROP PRIMARY KEY, ADD PRIMARY KEY ('COLUMN_NAME');

删除主键

Language: MySQL

ALTER TABLE 'TABLE_NAME'  DROP PRIMARY KEY;

在添加主键的时候，我们需要先删除已经添加的主键然后将新主键加到新字段上。否则将不允许加主键。

5、 Order by，having子句

Order by用于将数据按照指定字段重新整理，而having则用于过滤结果集。当你需要从一个大数据库中获取特定信息时这会非常有用：

Language: MySQL

Select * from TABLE_NAME 
group by dept  having salary > 10000;

上述查询语句中会返回根据部门进行组织且工资大于10000的员工数据。值得注意的是当我们使用没有“order by”的“having”子句时，它更像“where”子句(子乌注：对于oracle用户来说（我忘记sqlserver是不是也是这样了……）需要注意的地方是，mysql的group by可以不用将字段列明！而且结果也不太一样！确实更像where一些)。

6、添加索引和搜索查询

为一个字段创建索引毫无疑问会减少（原文是increase……）对数据库的查询，而索引是基于字段基础创建。例如，在我们的示例表“emp”，如果我们大部分获取数据的查询都是使用字段id，那为字段id建一个索引会是个明智的决定。

查询时，MySQL首先在已建立的索引中搜索ID，如果找不到则会在表级上运行查询。所以，正确地建立索引将提高这个过程的速度。

为了创建索引，可以使用以下语句：

建表时创建索引

Language: MySQL

CREATE TABLE  'emp' (
Name varchar(45),
  'id' INT, INDEX(ID)
)

子乌注：如果已经是主键则无须创建索引。

为已存在的表创建索引

Language: MySQL

Create Index id_index on emp(ID);

7、复合函数查询

复合函数用于对从数据库取得的数据进行数学运算。这些函数包括：sum(总和)、count(总数)等。例如，如果你想计算工作于特定部门的雇员数，你可以这么写：

Language: MySQL

select distinct name,count(dept) as cnt from emp
 group by dept  order by cnt DESC;

上述语句会返回员工姓名及部门数，并会根据返回的总数对数据进行逆序组合。(子乌注：对oracle用户来说（呃……我主要用oracle工作），order by的参数得是count(dept)而非cnt)

8、变更及修改表字段

表创建后可能会频繁修改。通过下面的语句我们可以看到如何给一个已存在的表添加/修改字段。

添加字段

Language: MySQL

Alter table 'emp' add column salary varchar(45);

修改字段

Language: MySQL

Alter table 'emp' modify column salary int(10);

重命名字段

Language: MySQL

Alter table 'emp' change salary salary2 varchar(45);

删除字段

Language: MySQL

Alter table 'emp' drop column salary;

子乌注：对oracle用户来说（我又来了……），尽量不要随意修改表结构，否则与该表相关的所有对象（存储、触发器、索引、函数等等）全部会失效，需要重新编译。

9、使用非重复值创建新表

假设你的数据库表中已经有了上千的数据，而你发现数据录入并不正确，存在着重复记录。现在你打算清理所有的垃圾并创建一个新表。让我们看看该如何做吧：

Language: MySQL

create table 'emp2' as select * from emp
 where 1 group by 'lastname';

嗯，现在创建了一个只有唯一“last name”的雇员信息的新表“emp2”。你可以使用不同的接口来排序你的表。

10、复制数据库并优化表

很多时候你的应用需要进行计划备份并通过邮件发送或将其存放在安全的地方。你可以写个脚本执行并设置一个cron来做这事情。这会节省大量用于备份你的数据的工作并避免发生无可挽回的错误。让我们看看你该如何创建数据库的备份并同时优化表。

Language: Bash

mysqldump –h localhost –u username –ppassword databasename > backup_file.sql

这会创建一个sql dump文件，可以将其再次导入以恢复数据库。

11、优化表

在MySQL中优化表相当的简单，就像标题所说的那样：

Language: MySQL

Optimize table TABLE_NAME

结论

你已经学会了这些在每天编码中都会用到的最常用的MySQL语句。你可以针对自己的工作场景来改进他们。

Language: "; $output .= $geshi->get_language_name(); $output .= "
\"line_numbers\">"; $output .= wp_syntax_line_numbers($code, $line); $output .= "	\"code\">"; $output .= $geshi->parse_code(); $output .= "

子叶：子乌的叶子 » 技术

『子乌书简』的建立及更新日志

建站缘由

建站日志

待完成功能

js版圣诞树

修改插件Flickr Gallery以支持缓存

PSD/HTML转换：简洁优雅的CSS3网页布局

《简洁优雅的部落格网页布局教程》系列

最终成果

创建基础文件

基本HTML

PSD切片

撰写HTML标记

容器

导航栏

侧边栏

最近文章和最新回复

侧边栏网页横幅

文章

，月份使用)，标题(使用

页脚部件

页脚

撰写CSS

重置CSS

Body背景和 @font-face

包装/导航

Logo/分割线

侧边栏

文章

页脚部件

页脚

完成了！

《简洁优雅的部落格网页布局教程》系列

使用Photoshop建立一个简洁优雅的部落格网页布局

《简洁优雅的部落格网页布局教程》系列

最终成果

创建一个新的PSD文件

制作背景

设置一些Photoshop初始参考线

添加部落格名称

添加主页导航菜单链接

制作活动导航菜单链接背景

设定导航菜单链接的样式和位置

制作水平内陷分隔线

设计发布日期背景

制作发布日期的垂直阴影

添加日期文本，文章标题，元数据

添加部落格文章前置图像

添加并定位部落格文章内容

在部落格文章底部加一条内陷水平分割线

添加另一篇部落格文章

制作侧边栏背景

制作搜索栏

添加侧边栏文字

设计侧边栏广告位

侧边栏整理

布局主体页脚

制作主体页脚栏目分割线

创建辅助页脚

结束！

简洁优雅的部落格网页布局教程系列

下载源文件

简单实用的wp插件:ozh-random-words

给wp-syntax插件增加标题

增加标题栏

默认显示行数

带行数时显示问题

补充说明

两张壁纸

招聘经理希望程序员拥有的5个素质

招聘理念影响程序员的必备素质

1、智力

2、把事情做好（GTD——Get Things Done）

3、算法和分析技能

4、沟通技巧

5、正确的个人理念

11个最常用的MySQL语句

1、创建表

2、 插入语句

，月份使用
)，标题(使用

2、插入语句

3、连接

4、创建和删除约束

6、添加索引和搜索查询

7、复合函数查询

8、变更及修改表字段

9、使用非重复值创建新表

10、复制数据库并优化表

11、优化表