1 2 3 4  下一页

3108, 博客们的节日

Published on 21:58, 08/31,2006

  据说 3108 这个数字很像英文中的 Blog,所以 每年的 8 月 31 日就被定为 Blogday 了。个人觉得这个联系很牵强,必须懂英文还要把月份放在日期的后面才能看出 3108 来,比起 11 月 11 日的光棍节真是差得远。不过博客日也不是徒有虚名,按照传统,要在这一天做以下几件事,说白了就是向别人推荐新鲜的博客:

  • 找出五个你觉得有趣的新鲜博客。
  • 在 BlogDay 当天,留言给这五位博客的主人,告知你推荐了他们的博客。
  • 为推荐的博客写下简短的介绍,并在文中放置这些链结。
  • 在 8 月 31 日当天发布推荐文章。

  做为博客南开站的创办者之一,我当然希望有更多人了解站内的优秀博客,所以今天要推荐的都是 南开博客

1. 清风拂过麦田:南开 BBS 的原创写手,读过的书和写过的文章太多了,每天都在出产精彩原创。

2. 三万英尺:写作欲望强盛的网络写手,紧随各领域前沿消息,很有传媒资质的博客新秀。

3. 糊涂@NK:为大家献上最新的影视资源,其实他本人就是负责校内 BT 影视资源的,所以这方面的信息还是大大的有。

4. 月下飘零雪:虽然不是资深博客,但写的内容大多很吸引人,启发读者思考。

5. 难以抉择:不要误会,这不是一个人的博客名称,而是说我实在难以在一些专心写作的博客里面主观地挑选出一个,同时在做推荐的时候也希望对读者负责,上面的四个博客绝对是内容丰富的,而其它的南开博客虽然更新不那么频繁,但仍然是值得一看的。

  各位读者如果要借 Blogday 机会推荐博客的话,要抓紧时间哦,只有不到两个小时了。


用 CSS 样式表美化博客模板

Published on 00:52, 08/31,2006

  前面的文章讲到了编辑博客模板所需的 HTML 基础知识 和对博客进行 模板布局的基本方法,文中给出的示例都是简陋的,只能勉强将页面框架构建起来,很难达到美观的要求。那么怎样才能将博客模板修饰漂亮一些呢?方法有很多,但我推荐您使用 CSS 样式表进行控制。

  CSS 样式表是一种非常简单易用的控制网页外观的语言,尽管它被称作语言,但比那些编程语言简单易用得多,因为它和 HTML 一样是描述性的,而且采用直观易懂的英文,比如 background-color: red; font-weight: bold; 等等。而且这些样式代码既可以方便地嵌入网页内部,又可以独立于网页存储在一个单独的样式表文件中。在后面的情况下,只要网页的布局结构没有发生变化,甚至可以为同一个博客模板设计多个样式表文件,为博客实现 瞬间换肤效果

  讲了这么多概括性的东西您也许还是不能立刻理解样式表的用法,我们不妨先来看一个例子:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>这是一个简单的博客模板页面</title></head>
<body>
<div id="banner" style="width:600px;height:200px;background-color:red;">
<h1>大家好,我也开始写博客啦</h1>
</div>
<div id="left" style="width:400px;background-color:green;float:left">
<h2>博客文章标题</h2>
<h3>文章小标题</h3>
<p>  今天终于开始写博客了,好高兴啊!!我的大作即将诞生,敬请关注~。</p>
<blockquote>有一句话说得好:失败只有一种,那就是半途而废--</blockquote>
<p>  后面还没有想好,还是下次再写吧!感谢凤凰卫视,感谢 CCTV,感谢盖茨大叔的晕倒死操作系统。</p>
</div>
<div id="right" style="width:200px;background-color:blue;float:left">
<h3>我的好友列表</h3>
<ul>
<li>傻大木</li>
<li>乔布什</li>
<li>芙蓉姐夫</li>
</ul>
</div>
</body>
</html>

查看实际显示效果

  看上去很眼熟吧,是的,这就是上一篇介绍模板布局时所用的例子,丑陋得让人无法忍受,不仅配色非常糟糕,文字版式也过于贴近边界,部分文字边缘还有毛刺,整体视觉效果很差。怎样改变这种情况呢?只要设计一个 CSS 样式表附加在这个网页上就会有所改观,下面就是一段样式代码,您可以先凭自己的分析判断这段代码能够实现什么显示效果。

首先将原来网页中的 style 代码去掉,因为我们将用另一种方式控制网页的外观:

<div id="banner" style="width:600px;height:200px;background-color:red;">
<div id="left" style="width:400px;background-color:green;float:left">
<div id="right" style="width:200px;background-color:blue;float:left">

其次在网页代码的 <head>...</head> 之间添加下面的代码:

<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>这是一个简单的博客模板页面</title>

<style>
body { // 这对大括号里描述网页的背景
margin-top:0px;
background:#f3f6ed url(http://www.nklog.org/templates/connections/img/rap.jpg) left repeat-y;
}
h1 { // 这对大括号里描述 <h1></h1> 标签中的部分
font-family: simhei;
font-size: 26px;
font-weight: bold;
text-align: right;
color: white;
margin-top: 0px;
padding-top: 50px;
padding-right: 30px
}
h2 { // 这对大括号里描述 <h2></h2> 标签中的部分
font-family: tahoma;
font-size: 26px;
padding-left: 10px;
}
h3 { // 这对大括号里描述 <h3></h3> 标签中的部分
font-family: tahoma;
font-size: 14px;
padding-left: 20px;
}
blockquote { // 这对大括号里描述文章中的块状引用
background: url(http://www.nklog.org/templates/connections/img/blockquote.gif) no-repeat left top;
padding: 20px;
font-size: 12px;
}
p { // 这对大括号里描述文章中的段落版式
line-height: 150%;
font-size: 14px;
}
#banner { // 这对大括号里描述模板顶部的 Banner
background: #fff url(http://www.nklog.org/templates/connections/img/top.jpg) no-repeat bottom;
margin-top: 0px;
margin-left: 0.2em;
height: 183px;
width: 760px;
border: #fc9 0px solid;
}
#left { // 这对大括号里描述左侧显示文章的面板
background:url(http://www.nklog.org/templates/connections/img/content_bg.gif) repeat;
width: 510px;
float: left;
color: #333;
margin-left: 12px;
margin-right: 12px;
padding: 10px;
overflow: hidden;
}
#right { // 这对大括号里描述右侧的面板
font-size: 12px;
color: #333;
width: 186px;
float: left;
}
#right h3 { // 这对大括号里描述右侧面板中的 <h3></h3> 标签中的内容
background: url(http://www.nklog.org/templates/connections/img/sidenav_top.jpg) no-repeat center;
font-size: 12px;
font-weight: bold;
color: #676E04;
margin: 0px;
text-align: center;
border: #ccc 0px solid;
height: 22px;
}
#right ul { // 这对大括号里描述右侧面板中的无序列表
list-style-type: none;
padding: 5px;
margin: 0;
font-size: 0.9em;
padding-bottom: 20px;
background: #F3F6ED url(http://www.nklog.org/templates/connections/img/sidenav_bottom.jpg) no-repeat bottom;
border: #E1D6c6 1px solid;
border-top: #f3f6ed 1px solid;
}
#right ul li { // 这对大括号里描述右侧面板中的无序列表子项目
color: #909D73;
font-size: 12px;
}
</style>
</head>

查看实际显示效果

上面这段代码看起来有些长,但您未必需要看懂每一行内容,重要的是找到语法规律。点击查看实际显示效果时发现虽然网页正文<body>...</body>之间的内容没有任何改动,但整个页面的外观都发生了很大变化,而这些完全是上面列出的样式代码的功劳。

那么怎样才能读懂它们呢?上面代码中的说明也许能够帮助您:首先对于 <p> <body> <h1> <blockquote> 这样的标签,我们只要用 标签名 { ... } 这样的代码段就可以描述其中的样式,比如 p {color: red;} 就表示位于 <p></p> 之间的文字颜色都是红色的;而对于 <div id="left"></div> 这样的标签,我们则可以用 #left {...} 去描述,比如 #left {font-size: 14px;} 就表示左侧面板中默认的文字大小是 14 像素的。您也许会奇怪我在上面把一个大括号中的内容分写在好几行中,怎么现在都写在一行里面了?其实这并不影响实际效果,因为样式表语言是不在乎有没有换行的,只要把要描述的属性写在一对大括号里就可以。其它的内容大部分可以"望文生义":color 表示文字颜色,background-color 表示背景颜色,font-size 表示字号大小等等。当然了,这只是入门级的代码,要设计出专业的博客模板还需长期实战训练才行。

短短一篇网志实在很难把 CSS 样式表的基础知识都串起来,也不能指望它为您带来多少价值。个人认为只要读过本文后您能够从总体上了解样式表的功能,并对学习它产生兴趣和信心就 OK 了。

延伸阅读:CSS2 中文手册 by 苏沈小雨CSS2 中文手册电子版CSS 资料网站链接


活页小人的幽默:叮叮与当当

Published on 14:19, 08/29,2006

Tim Tom吃午饭时在食堂的电视上偶然看到了这个有趣的动画短片,虽然屏幕上没有标出片名,但经常上网的我知道只要随便 放狗搜一下 就能找到它的出处,甚至可以找到截取的动画视频。

必须承认欧美动画制作者的独具匠心之处,居然能在司空见惯的活页本上创作出一段令人忍俊不禁的幽默动画。在这部短片中,所有的人物表情都是用活页本表达的,并经过精心安排将舞台的布景、电影胶片的切换和同步音频波形的移动巧妙融入整个作品中,令人拍案叫绝。罗嗦这么多您都听烦了吧,还是请您自己来欣赏一下,眼见为实吧。


相比之下,我不能理解为什么曾经辉煌中国的动画产业到了今天非但没有多少创新,还养成了 炒作的坏毛病粗枝大叶生产出来的片子 还指望大受欢迎,简直是做梦。


仓鼠 GG 的幸福生活

Published on 00:02, 08/29,2006

  我的博客朋友 iqwolf 闲来无事养了只小仓鼠,本来以为他就是随便玩几天,没想到最近突然在他个人签名档里赫然出现“搞了两个月终于怀上了”几个大字,经查证原来是仓鼠 GG 弄大了隔壁屋仓鼠 MM 的肚子,今天已经 成功产出 6 只仓鼠宝宝,很是可爱。

  为庆祝仓鼠 GG 喜得后嗣,iqwolf 特别制作了下面的 仓鼠 GG 家庭录像,并骄傲地自封“全国优秀仓鼠饲养员”称号。如果大家喜欢仓鼠 GG 一家,一定到饲养员那里去表达祝愿哦。


博客模板布局的基本知识

Published on 19:59, 08/27,2006

  本来很好的心情让一个劣质的 D-Link 路由器搞坏了,今天下午刚到实验室就听说路由器因为断电烧掉了,于是大家就花了一下午时间配置服务器,试图通过交换机直接上网。到后来才明白交换机其也是很复杂的,并不仅仅是一个"大号的"集线器,要利用昂贵的专业设备才能控制,最终只好作罢。

  回归正题吧,上一篇文章 介绍了 HTML 网页语言的基本知识,它们看起来很简单,几乎无法想象可以用它们构造多姿多彩的博客模板。不错,HTML 标签只是给网页上的每部分内容做了语义上的描述--这是一个标题,那是一个段落,图片,音频等等--并没有提供多少布局和修饰的信息,所以我们还需要更多的知识才能开始修改博客模板的布局。

  在解说无聊的网页语法之前,还是先来看一个实例性的网页,说不定您自己就可以发现其中的规律。

<html>
<head>
<title>这是一个简单的博客模板页面</title>
</head>
<body>
<div id="banner" style="width:600px;height:200px;background-color:red;">
<h1>大家好,我也开始写博客啦</h1>
</div>
<div id="left" style="width:400px;background-color:green;float:left">
<h2>博客文章标题</h2>
<h3>文章小标题</h3>
<p>  今天终于开始写博客了,好高兴啊!!我的大作即将诞生,敬请关注~。</p>
<blockquote>有一句话说得好:失败只有一种,那就是半途而废--</blockquote>
<p>  后面还没有想好,还是下次再写吧!感谢凤凰卫视,感谢 CCTV,感谢盖茨大叔的晕倒死操作系统。</p>
</div>
<div id="right" style="width:200px;background-color:blue;float:left">
<h3>我的好友列表</h3>
<ul>
<li>傻大木</li>
<li>乔布什</li>
<li>芙蓉姐夫</li>
</ul>
</div>
</body>
</html>

查看实际显示效果

  点击查看实际效果,您将看到一个简单的两栏式模板,最上方还有一个 Banner。什么是 Banner?把这东西当作您博客的招牌就好啦,就像街头店面为了吸引注意而挂的大牌子一样。 在这段网页代码中出现了一些新玩意,一个是 <div> 标签,另外就是 id="xxx" 和 style="xxx"。毫无疑问,是这些代码为网页添加了布局功能,可以把 div 理解为一张可以伸缩的长方形"纸板",您可以控制它的大小和颜色等属性以满足需要,另外还可以创建多个 div 以便实现 Banner 和文字分栏等布局。

  您也许会奇怪,浏览器怎么知道该怎么摆放这些 div 呢?这确实很令人迷惑,您分析了 style 这部分内容,发现它可以控制 div 的尺寸和颜色,但是并没有指定 div 的摆放位置。另外 float:left 这段代码也令人琢磨不透,难道这里面有什么玄机?不错,正是因为有了 float:left 这段代码,Banner 下面的两个 div 才能一左一右地排列整齐,因为 float 的意思是 div 自身向左漂移,并允许它后面的 div 漂移到其右侧,而不是被它挡在脚底下。事实上,网页上的元素默认都是从上排到下的,没有前方 div 的允许,后方的 div 是无法跟前面的 div 站一排的,这也是 Banner 能够高高在上不被后来者"抢占地盘"的原因。

  那么 id="xxx" 又是做什么用的,是不是仅仅为了给 div 取个名字呢?我认为您真是非常聪明,就是这个理由。有了名字我们才好控制它啊,才好告诉浏览器我们需要修改哪个 div 的属性啊。此外,您在查看网页源代码的时候也许还看见过 class="xxx" 的代码,这里 class 表示的是一类元素,与 id 不同的是,网页上可以有多个 div 元素都用同样的 class="red-paper" 命名,这样就可以一次控制多个 div。反过来说,id 是不允许重复的,一个网页里不能有两个 div 都叫做 id="number-one"。

  细心的读者还会有疑问,style 看起来很有趣哦,但是它好像有一种特殊的语法规则,不知道除了 width, height, background-color, float 之外还有什么可以用的修饰词呢?我在这里非常兴奋地告诉您,这个 style 将是制作博客模板过程中最有趣的地方了,很多修饰的需求都可以通过简单的 style 代码搞定。如果非要问这个东西叫什么的话,我会告诉您它叫做 CSS 样式表,没有英文缩写说明,知道也不告诉您,因为我最恨英文缩写!

延伸阅读:CSS2 中文手册 by 苏沈小雨CSS2 中文手册电子版同步预览 CSS 样式表显示效果的小工具


玩博客的基础:HTML 语言

Published on 04:50, 08/27,2006

博客南开更换服务器着实忙活了一阵子,现在终于可以喘口气写点东西了,然而写作的冲动好像总是在比较忙的时候出现,空闲时反到没多少感觉,很是矛盾。

言归正传,最近常有网友询问如何修改博客模板的问题,从提问方式上看明显是习惯了傻瓜型博客服务的操作方式,拖拽,选颜色,选样式等等,以至于完全忽略了 HTML 语言的存在,即使模板代码完全可编辑,他们都不知该从何入手。有些人或许认为博客本来就该弄得越简单越好,用户所要做的只是每天写写文章,贴贴图片。如果真的变成那样子,博客就成不了一种文化了:饭煮熟了就可以吃,但还是有人研究烹饪;水烧开了就能喝,但还有人会学习茶道…… 玩博客也是一样的,您可以仅仅把它当作个人日记,也可以玩出各种花样,前提是必须用心学习一些基础的东西,比如 HTML 语言。

那么 HTML 究竟是什么鬼东西呢?按照老规矩,我不会去解释它的英文含义的(因为早就忘记了),只要将其理解为网页描述语言就好。网页描述语言是玩博客的最基础知识,其作用是通过既定的语法告诉浏览器如何显示您的博客页面。浏览器能够识别的语言一定很怪异吧?虽然样子上的确有点怪,但实际使用起来并不困难。为了帮您快速进入思考状态,请先看下面的示例:

<html>
<head><title>这里的内容会显示在浏览器的标题栏(title bar)上</title></head>
<body>
<h1>大家好,我是一坨 HTML 网页</h1>
<h2>这是 2 号标题(header)</h2>
<h3>这是 3 号标题</h3>
<p>这是一个段落(paragraph),同一个段落里面可以用<br>换行(break line)</p>
<p>又一个段落的第一行<br>第二行了<br>第三行了<br>其实 HTML 很容易理解的。</p>
<ol>
<li>这是有序列表(ordered list)中的第 1 项</li>
<li>有序列表的左侧会有数字序号</li>
<li>这些数字序号是自动递增的,不用我们操心</li>
</ol>
<p>下面我要画一条横线(horizontal rule)</p>
<hr>
<ul>
<li>这是无序列表(unordered list)中的第 1 项</li>
<li>无序列表的左侧没有数字序号,可能会有一个小圆点</li>
<li>除了把 ol 换成了 ul,两者没啥区别</li>
</ul>
</body>
</html>

查看实际显示效果

看过了上面的 HTML 网页代码和实际显示效果后您是不是发现了很多规律呢?是的,HTML 中很多东西都是用一前一后两个标签包裹起来的,后面的标签通过一个反斜杠表示它是个结束标签,某些标签里面还可以再套标签。浏览器从上到下读取 HTML 代码,并把它们解释成实际的显示格式呈现给读者,一张网页就这样完成了使命。从英文单词的开头字母您也能猜到这些标签是如何命名的,因此将它们记住也就不难了。

HTML 的标签并不止这些,您还可以在文章中插入图片,超链接和其它一些更有意思的东西,下面又是一例:

<html>
<head><title>网页里还可以插入更有意思的东西</title></head>
<body>
<p>我希望插入一幅图片(image):<img src="http://www.nklog.org/imgs/header_img.gif"/></p>
<p>我还要一个超链接(anchor):<a href="http://www.nklog.org/">超链接文字</a></p>
<p>还有音乐!!<embed src="http://www.nklog.org/test.mp3" autostart=true/></p>
</body>
</html>

查看实际显示效果

看了这些简单的代码之后您是不是已经打算自己试试看了呢?非常乐意满足您的愿望,这里有一个 同步预览的 HTML 编辑器,您可以在上面随意练习一下。为了让您将精力在主要的标签上,这个编辑器不需要您去书写 <html> <head> <title> <body> 那样的标签,直接拿 <h1> <p> <br> <hr> <ul> <ol> <li> <img> <a> 这类标签进行练习就是了。

您也许会问,这些网页怎么会这么丑呢,一点也不像我正在使用的博客首页啊?网页里面一定有一些有魔力的东西在起作用吧?当您不了解网页背后的基础知识时,那些绚丽多彩的网页永远像魔术师从帽子里掏出的东西一样,不过看过本文之后,您已经有机会到幕后去看个究竟了,千万不要错过哦。

延伸阅读:网络维他命翻译的 HTML 教程清华大学 HTML 教程

人工智能:猜出您头脑中的物件

Published on 04:24, 08/24,2006

人工智能总是一个令人着迷的话题,遗憾的是目前的人工智能无论从理论还是技术上都没有接近实用。不过,用它来做点小游戏还是不成问题的,这个网站上 就有一个有趣的人工智能游戏,它要求您先在头脑中想好一样东西,然后通过点选预定答案回答网页上的问题,如果 20 个明确解答的问题还不能让它找到答案的话,您就胜利了。我打开这个网站时直接想到了黄瓜,于是就有了下面的问答:

  1. 它是分类为蔬菜。
  2. 它是否有很多不同种类? 否.
  3. 它有种籽吗? 是.
  4. 它是否含有大量水分? 是.
    它的茎上是否长满叶子? 不了解.
  5. 它有粗糙的表皮吗? 是.
  6. 它是机械化的吗? 否.
    它有短毛吗? 不了解.
  7. 它可否令人欣慰? 不相关的.
  8. 它可以放在口袋里吗? 视乎情况.
  9. 它是常用品吗? 是.
  10. 它可否放置在您的头上? 罕见的.
  11. 它是屋子里的东西吗? 否.
  12. 它的气味怡人吗? 有时.
  13. 它是一种水果吗? 否.
  14. 它的味道甜美吗? 或许.
  15. 它是否很大? 否.
  16. 它是不是小型哺乳动物? 否.
  17. 我会猜它是黄瓜? 正确!

在数据挖掘里这个猜物件的过程可以用分类决策树算法来完成,而提高精度的关键就是问题的选取和出现顺序了,这个游戏的算法能够在 20 个问题里正确分类,在这方面应该是经过优化的。而如果让人随意做提问的话,可能还比不上“人工智能”呢!

PS: 此信息来自 无聊布棉的博客

博客南开度过服务器难关

Published on 10:41, 08/22,2006

  博客南开 服务中断事出突然,首要原因是同一服务器上的论坛因为出现不合宜的内容引起了网警的关注,造成服务器频频 关机整顿;其次就是随着访问量的增多我们的博客程序占用的资源超出了虚拟主机的承载能力。总之,搬家到高性能服务器势在必行,然而我们的时间却非常紧迫。网站无法访问是非常糟糕的事情,大家每天都要在博客上写文章,一旦服务中断,直接影响创作心情不说,还会间接影响到用户对网站的信心。在这种情况下,最大的难题就是短时间内难以到可靠的服务商。

  为了尽快找到可靠的服务商,我们想尽了办法。首先是向素未谋面的资深博客 herock 咨询,得到了热情的答复;在日志中记录了这件事之后,又意外地在回复中得到了 earlzhang 关于服务商的建议;此后在 LifeType 官方论坛我又从高级玩家 ajer001 那里得到了 VPC 主机的推荐,就这样一步步地接近问题的解决。而就在我决心购买 VPC 主机之前,我们幸运地得到了一位已经毕业的南开校友 onebird 的鼎力支持——他同意将我们的博客服务程序暂时安置在他个人的服务器上,还承诺提供一些技术上的帮助,至此我们才算度过难关。

  博客南开更换服务器这段时间每天都在见到新面孔,结识新朋友,我也越来越体会到朋友的难得,没有他们的热心帮忙,博客南开站的快速恢复几乎是不可完成的任务。此外,我们必须对所有支持博客南开的作者和读者们致以歉意,并将继续改进服务满足大家的需求。


1 2 3 4  下一页
独立浏览者统计: