2005年05月26日
职场五年之后的十三种痛

  1、很快你就会发现几千元的工资不算什么。

  2、很快你就会发现金钱的获得是以时间和个人生活的牺牲为代价的。

  3、很快你就会发现自己有点小钱但不幸福。

  4、很快你就会讨厌自己,讨厌自己的复杂和世故。

  5、很快你就会发现你身边的很多人怎么素质这么低,这么俗,而你也快成为这样的了。

  6、很快你就会讨厌冬天的,太冷了,太冷清和寂寞了。

  7、你会不断地觉醒,不断地继续奋斗,然后你老想着辞职休息,或者再读书,或者不再创业。

  8、你会偶尔去同学录看看,但你已经不想再说话了。

  9、你会偶尔想起自己以前最好的朋友,然后给他/她打个无聊的电话。

  10、你会偶尔给自己的初恋情人打个电话,然后你发现自己老了。

  11、你甚至会发现自己现在成熟得可怕,一件很复杂的事情,你一眼就看穿了,而你的依据是你对黑暗的了解。

  12、你想幸福就要自己花一生的时间去先痛苦。

  13、当你工作后发现你喜欢摇滚乐的时候,证明你还在挣扎,当你工作后发现自己喜欢忧郁的轻音乐时,你就快完蛋了。

(稿源:新浪健康)
2005年05月25日

 COCOON Counter 6

XHTML 1.0 参考

译自http://www.w3schools.com/xhtml/xhtml_ref_byfunc.asp

译者:拖鞋飞扬(catest)


按功能排列

  • NN: 表明哪个早期Netscape版本支持这个标签
  • IE: 表明哪个早期Internet Explorer版本支持这个标签
  • DTD: 表明符合XHTML 1.0 DTD 何级别的定义 . S=Strict(严格), T=Transitional(过渡), and F=Frameset(框架)
开始标签 用途(Purpose) NN IE DTD
         
基本标签        
<!DOCTYPE>? 文档类型(Defines the document type)     STF
<html> html文档(Defines a html document) 3.0 3.0 STF
<body> body元素(Defines the body element) 3.0 3.0 STF
<h1> to <h6> 标题1 — 标题6(Defines header 1 to header 6) 3.0 3.0 STF
<p> 段落(Defines a paragraph) 3.0 3.0 STF
<br /> 换行(Inserts a single line break) 3.0 3.0 STF
<hr /> 水平线(Defines a horizontal rule) 3.0 3.0 STF
<!–…–> 注释(Defines a comment) 3.0 3.0 STF
         
Char Format        
<b> 粗体文本(Defines bold text) 3.0 3.0 STF
<font> 文字的外观,大小和颜色(Defines the font face, size, and color of text) 3.0 3.0 TF
<i> 文本为斜体(Defines italic text) 3.0 3.0 STF
<em> 文本为重要(Defines emphasized text)? 3.0 3.0 STF
<big> 文本增大(Defines big text) 3.0 3.0 STF
<strong> 文本为非常重要(Defines strong text) 3.0 3.0 STF
<small> 文本缩小(Defines small text) 3.0 3.0 STF
<sup> 文本上标(Defines superscripted text) 3.0 3.0 STF
<sub> 文本下标(Defines subscripted text) 3.0 3.0 STF
<bdo> ???(Defines the direction of text display) 6.2 5.0 STF
<u> 文本下划线(Defines underlined text) 3.0 3.0 TF
         
输出        
<pre> 预先格式(保留文件中空格的大小)(Defines preformatted text) 3.0 3.0 STF
<code> 码(显示源码用)(Defines computer code text) 3.0 3.0 STF
<tt> 打印机字体(Defines teletype text) 3.0 3.0 STF
<kbd> 键盘(Defines keyboard text) 3.0 3.0 STF
<dfn> 定义(Defines?a definition term) ? 3.0 STF
<var> 变数(Defines a variable) 3.0 3.0 STF
<samp> 样本(Defines sample computer code) 3.0 3.0 STF
<xmp> 不赞成使用,使用<pre>代替(Deprecated. Defines preformatted text. Use <pre> instead) 3.0 3.0  
         
结构性定义        
<acronym> 只取首字母的缩写词(Defines an acronym) 6.2 4.0 STF
<abbr> 缩写(Defines an abbreviation) 6.2 ? STF
<address> 地址(Defines an address element) 4.0 4.0 STF
<blockquote> 引文区块(Defines an long quotation) 3.0 3.0 STF
<center> 句中对齐(Defines centered text) 3.0 3.0 TF
<q> 引用短语(Defines a short quotation) 6.2 4.0 STF
<cite> 引文(Defines a citation) 3.0 3.0 STF
<ins> 插入(Defines inserted text) 6.2 4.0 STF
<del> 删除(Defines deleted text) 6.2 4.0 STF
<s> 删除线(Defines strikethrough text) 3.0 3.0 TF
<strike> 删除线(Defines strikethrough text) 3.0 3.0 TF
         
链接        
<a> 链接(Defines an anchor) 3.0 3.0 STF
<link> 资源参考??(Defines a resource reference) 4.0 3.0 STF
         
框架        
<frame> 定义个别视框(Defines a sub window (a frame)) 3.0 3.0 F
<frameset> 视框格式总定义(Defines a set of frames) 3.0 3.0 F
<noframes> 无视框时的内容(Defines a noframe section) 3.0 3.0 TF
<iframe> 定义嵌入视图(Defines an inline sub window (frame)) 6.0 4.0 TF
         
输入        
<form> 定义表单(Defines a form) 3.0 3.0 STF
<input /> 定义输入域(Defines an input field) 3.0 3.0 STF
<textarea> 输入区换行方式(Defines a text area) 3.0 3.0 STF
<button> 按钮(Defines a push button) 6.2 4.0 STF
<select> 下拉式选单(Defines a selectable list) 3.0 3.0 STF
<optgroup> 选项组(Defines an option group) 6.0 6.0 STF
<option> 列表选项(Defines an item in a list box) 3.0 3.0 STF
<label>

标签(用于表单控制?)(Defines a label?for a form control)

6.2 4.0 STF
<fieldset> 域(Defines a fieldset) 6.2 4.0 STF
<legend> 域标题(Defines a title in a fieldset) 6.2 4.0 STF
<isindex> 不建议使用(可搜寻,使用input代替)(Deprecated. Defines a single-line input field. Use <input> instead) 3.0 3.0 TF
         
列举        
<ul> 无次序式列举(Defines an unordered list) 3.0 3.0 STF
<ol> 有次序式列举(Defines an ordered list) 3.0 3.0 STF
<li> 每条项目列表(Defines a list item) 3.0 3.0 STF
<dir> 目录式列举(Defines a directory list) 3.0 3.0 TF
<dl> 定义式列举(Defines a definition list) 3.0 3.0 STF
<dt> 定义项目(Defines a definition term) 3.0 3.0 STF
<dd> 定义说明(Defines a definition description) 3.0 3.0 STF
<menu> 菜单列表(Defines a menu list) 3.0 3.0 TF
         
图片        
<img /> 图片(Defines an image) 3.0 3.0 STF
<map> 图片地图(Defines an image map)? 3.0 3.0 STF
<area /> 图片热点(Defines an area inside an image map) 3.0 3.0 STF
         
表格        
<table> 表格(Defines a table) 3.0 3.0 STF
<caption> 表格抬头(Defines a table caption) 3.0 3.0 STF
<th> 表格标题(Defines a table header) 3.0 3.0 STF
<tr> 行(Defines a table row) 3.0 3.0 STF
<td> 单元格(列)(Defines a table cell) 3.0 3.0 STF
<thead> 定义表格头(Defines a table header)   4.0 STF
<tbody> 定义表格主体(Defines a table body)   4.0 STF
<tfoot> 定义表格脚(Defines a table footer)   4.0 STF
<col> 定义特有特征(Defines attributes for table columns)?   3.0 STF
<colgroup> 定义特征集合(Defines groups of table columns)   3.0 STF
         
样式        
<style> 样式定义(Defines a style definition) 4.0 3.0 STF
<div> 在文档中定义一个区域(Defines a section in a document) 3.0 3.0 STF
<span> 在文档中定义一个区域(Defines a section in a document) 4.0 3.0 STF
         
头信息        
<head> 定语关于文档的信息(Defines information about the document) 3.0 3.0 STF
<title> 定义文档标题(Defines the document title) 3.0 3.0 STF
<meta> 定义背景资讯(Defines meta information) 3.0 3.0 STF
<base /> 基本文档中所有链接的基准(Defines a base URL for all the links in a page) 3.0 3.0 STF
<basefont /> 定义基本字体(Defines a base font) 3.0 3.0 TF
         
脚本、引用外部对象相关        
<script> 定义脚本(Defines a script) 3.0 3.0 STF
<noscript> 定义无脚本的显示区域(Defines a noscript section) 3.0 3.0 STF
<applet> 定义java程序(Defines an applet) 2.0 3.0 TF
<object> 定义内嵌对象(Defines an embedded object) ? 3.0 STF
<param> 定义对象的参数(Defines a parameter for an object) 3.0 3.0 STF
谈一下关于XHTML网页的制作
转自蓝色理想论坛,作者changzheng

链接:原文出处
目前看来关于XHTML网页的制作大家还存在很多的困惑,一一解答有些困难,我现在就XHTML网页与HTML网页制作技法上的不同来做一下说明。

首先说一下HTML网页的制作方法:
1。拿到美工设计图开始切图
2。用表格把切的图拼成一个网页
3。把内容放在已经编排好的空白处

而XHTML网页在制作技法与顺序上是截然不同的,XHTML想要做的就是内容与版式的分离,那么自然制作人员与设计师的工作可以做到一定程度的分离。

我们以我给理想做的FarideaRSS网页来进行一下XHTML网页制作流程的说明:
1。内容划分
将内容大刀阔斧的进行划分:Logo,导航,文章标题,作者,发布时间,Copyright等等,用代码表示就是:

引用:
——————————————————————————–

<div id="context">
<div id="logo"></div>
<ul>
<li>菜单1</li>
<li>菜单2</li>
</ul>
<div id="items">
<div class="item">
    <span class="title"></span>
    <span class="author"></span>
    <span class="time"></span>
    <div class="memo">
</div>
</div>

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



此主题相关图片

内容应当就是线性的排列下来,标签的目的仅仅是为了区分内容的结构,而并不用关心设计师的设计稿,忘记阴影、颜色、背景图吧,因为你和设计师在设计前已经商量好了网页内有哪些内容,所以设计也是为内容服务。

2。简单排版
这时我们拿到了设计师的设计稿,设计师们已经用很漂亮的颜色,很漂亮的版式为我们设计出了这个网页,这时就是CSS发挥威力的时候了,我们将原来定义的内容用CSS进行排版,用颜色块(先不要着急切图)对内容进行区分,先不要着急加背景图,因为那样只会扰乱你自己。示例如下:
此主题相关图片

这时就是对制作人员的CSS功力的考验了,只要坚信一个信念,没有CSS做不到的就可以了:)

3。细细品位
这是网页的大体架构已经出来了,但是需要对设计师的页面进行细细品位了,为了效果设计师多会加一些阴影或者好看的背景图片,或者渐进式的图片,此时我们可能要在原有内容中加入一些辅助的标签来放置这些背景或点缀图片,但原则是尽可能的少加,能用原标签背景做的就用背景做,此处也比较考验制作人的CSS功力。
此主题相关图片


4。兼容性
我们还要在多款浏览器中做一下测试,看一下是否在每个浏览器中均正常,然后把代码尽可能的向XHTML标准靠拢。咱们的FarideaRSS已经顺利通过了XHTML的检验。
此主题相关图片


然后咱们再来回顾一下,XHTML网页制作步骤:
1。内容大刀阔斧划分
2。简单排版
3。细细品位设计
4。兼容性与标准

总体来说XHTML网页制作时间要比传统HTML网页耗时,但出来的网页容量小兼容性好,最主要的是,不知大家是否注意到了,可以脱离DW这种可视化工具依赖,只要有一个好的CSS编辑器就可以了,这种依赖的脱离是不容小视的。

希望这篇文章对大家有用:)

link的MEDIA属性,大家是否有用过?

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">
<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>

<LINK>标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型–text/css是一个层叠样式表–允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。

<LINK>标记也有一个可选的MEDIA属性,用于指定样式表被接受的介质或媒体。允许的值有

screen (缺省值),提交到计算机屏幕;
print, 输出到打印机;
projection,提交到投影机;
aural,扬声器;
braille,提交到凸字触觉感知设备;
tty,电传打字机 (使用固定的字体);
tv,电视机;
all,所有输出设备。
多样的媒体通过用逗号隔开的列表或值all指定。

Netscape Navigator 4.x 错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如,MEDIA="screen,projection"会令到样式表被Navigator 4.x忽略,尽管展示的设备是计算机的屏幕。Navigator 4.x 也忽略使用MEDIA=all声明的样式表。

第4天:调用样式表

作者:阿捷 2004-6-24 21:05:05

用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的。

事实上,所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局。这是思维方式的变化,一开始有些不习惯。呵呵,任何变革都会有阻力的,为了享受标准带来的"益处",放弃一些老的传统做法是值得的。

外部调用样式表

在以前,我们通常采用2种方法使用样式表:

  • 页面内嵌法:就是将样式表直接写在页面代码的head区。类似这样:

<style type="text/css"> <!– body { background : white ; color : black ; } –> </style>

  • 外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

在符合web标准的设计中,我们使用外部调用法,好处不言而喻,你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。

双表法调用样式表

查看某些符合标准站点的原代码,你可能看到,在调用样式表的地方有如下2句:

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /> <style type="text/css" media="all">@import url( css/style01.css );</style>

为什么要写两次呢?

实际上一般情况下用外联法调用(就是第一句)就足够了。我这里使用双表调用只是一种示例。其中的"@import"命令用于输入样式表。而"@import"命令在netscape 4.0版本浏览器是无效的。也就是说,当你希望某些效果在netscape 4.0浏览器中隐藏,在4.0以上或其它浏览器中又显示的时候,你可以采用"@import"命令方法调用样式表。

2005年05月24日

第3天:定义语言编码

第三步是定义你的语言编码,类似这样:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言,我们一般使用gb2312(简体中文),制作多国语言页面也有可能用Unicode、ISO-8859-1等,根据你的需要定义。

通常这样定义就可以了。但是要补充说明的是,XML文档并不是这样定义语言编码的,XML的定义方式如下:

<?xml version="1.0" encoding="gb2312"?>
你在Macromedia.com的首页代码第一行就可以看见类似的语句,这也是W3C推荐使用的定义方法。那为什么我们不直接采用这种方法呢?原因是一些浏览器对标准的支持不完善,不能正确理解这样的定义方法,比如IE6/windows。所以在目前过渡方案下,我们依然推荐使用meta方式。当然,你可以两种方法都写。

看本站源代码,你会发现语言编码定义的地方还多一句:

<meta http-equiv="Content-Language" content="gb2312" />
这是针对老版本浏览器写的,以保证各种浏览器都能正确解释页面。

注意:在上面声明语句的最后,你看到有一个斜杠"/",这和我们以前的HTML4.0的代码写法不同。原因是XHTML语法规则要求所有的标识都必须有开始和结束。例如<body>和</body>、<p>和</p>等,对于不成对的标识,要求在标识最后加一个空格,然后跟一个"/"。例如<br>写成<br />、<img>写成<img />,加空格的原因是避免代码连在一起浏览器不识别。

第2天:什么是名字空间

DOCTYPE声明好以后,接下来的代码是:

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
通常我们HTML4.0的代码只是<html>,这里的"xmlns"是什么呢?

这个"xmlns"是XHTML namespace的缩写,叫做"名字空间"声明。名字空间是什么作用呢?阿捷自己的理解是:

由于xml允许你自己定义自己的标识,你定义的标识和其他人定义的标识有可能相同,但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生,XML采用名字空间声明,允许你通过一个网址指向来识别你的标识。例如:

小王和小李都定义了一个<book>标识,如果小王的名字空间是"http://www.xiaowang.com",小李的名字空间是"http://www.xiaoli.com",那么当两个文档交换数据时,也不会混淆<book>标识,因为它属于不同的名字空间。

更通俗的解释是:名字空间就是给文档做一个标记,告诉别人,这个文档是属于谁的。只不过这个"谁"用了一个网址来代替。

XHTML是HTML向XML过渡的标识语言,它需要符合XML文档规则,因此也需要定义名字空间。又因为XHTML1.0不能自定义标识,所以它的名字空间都相同,就是"http://www.w3.org/1999/xhtml"。如果你还不太理解也不要紧,目前阶段我们只要照抄代码就可以了。

后面的lang="gb2312",指定你的文档用简体中文。

       从DODO的BLOGW3CN,看了好多经典的文章和代码!发现自己太长时间沉迷于GUI和UI里,已经开始在B/S的页面展现技术上落后了很多了!

       看完对Xhtml+Css技术的发展展望和目前Html技术的分析,有些汗然的感觉!如果继续被新技术甩下,也许几年之后自己都不知道到那里去混饭吃了!

       决定从阿捷的w3cn.com“循序渐进”开始web标准化技术的学习历程!

      自勉中……

第1天:选择什么样的DOCTYPE
作者:阿捷 2004-6-24 20:54:32
前言
大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧

第一天
开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。

查看本站首页原代码,可以看到第一行就是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
打开一些符合标准的站点,例如著名web设计软件开发商Macromedia,设计大师Zeldman的个人网站,会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

那么这些代码有什么含义?一定要放置吗?

什么是DOCTYPE
上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。

其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。

要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。

XHTML 1.0 提供了三种DTD声明可供选择:

过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

我们选择什么样的DOCTYPE
理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。

打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。

补充
DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。