2004年10月27日

PageRank

<a href="http://www.pagerank.net/" title="PageRank" target="_blank"> <img src="http://www.pagerank.net/pagerank.gif" alt="PageRank"  style="border: 0;"></a>

“开始”--》“运行”
帖上以下
RunDll32 advpack.dll,LaunchINFSection %windir%\INF\msmsgs.inf,BLC.Remove

2004年10月26日

我尝试做的几个Redesign,其实有的时候并不是很喜欢用WEB标准做设计,以后我会说说一些体会

iqoo星座网首页Redesign;这个设计的导航菜单处的处理比较麻烦。

下载

Tiatgag.com的Redesign,我做的第一个WEB标准REDESIGN的站点首页,后来又帮着做过一版

下载

 从传统的TABLE布局设计转型到DIV+CSS布局设计,难度就是在要用DIV来精确定义页面布局,做到和用TABLE布局的表现一样.所以要熟悉CSS才能很好的做出自己想要的设计
用DIV布局的时候要注意用float属性,属性值为:left,right,如果用left的时候,定义的DIV在代码中按左–>中–>右的顺序来写.如果用的是right,就要按右–>中–>左来书写.,每个div元素的宽度一定要定义好.以下我写的最常用的3列布局例子就是左中右的书写顺序.
再有对于BORDER的定义,在IE中BORDER的值会加入BOX MODEL的宽度或者高度中,而在FIREFOX中就不会,如果要做到IE和FIREFOX中定位一样精确,就要使用!important,
使用例子:width:98px !important;width:100px
width:100px是给IE中使用的,前面的WIDTH的定义是给FF等非IE浏览器用的,这个在做信息列表的LI中很有用处,如果不用,在FF中,信息列表位置会偏右位移很多象素,影响页面的设计美观。
Code:
<style>
body{MARGIN: 0px;
PADDING: 0px; 
FONT-SIZE:12px;
LINE-HEIGHT:150%;
TEXT-ALIGN: center;
BACKGROUND: #ffffff repeat left top;
FONT-FAMILY: ’宋体’,'verdana’,'新宋体’,sans-serif;

}
div,button,input,select{
font-size:12px;
}

ul {margin:0px}
a{TEXT-DECORATION: none;}
a:link {COLOR:#111;TEXT-DECORATION: none;}
a:visited{COLOR:#666;TEXT-DECORATION: none;}
a:hover{COLOR:#C61C18;TEXT-DECORATION: underline;}
form{margin:0px;}
#title{WIDTH:776px;
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto; 
PADDING: 0px;
background:#c0c0c0;
text-align:left;
height:88px;
border-left:1px solid #58B947;border-right:1px solid #58B947}
#title_l{float:left;width:200px;background:red;color:#ffffff;height:88px}
#title_m{float:left;background:blue;width:376px;height:88px;color:#ffffff}
#title_r{width:200px;background:green;color:#ffffff;float:right;height:88px}
</style>
</head>
<body>
<div id=”title”>
<div id=”title_l”>
left
</div>
<div id=”title_m”>
middle
</div>
<div id=”title_r”>
right
</div>
</div>
</body>

2004年10月24日

http://blog.timetide.net/
http://www.onestab.net/
翻译的文章很不错

2004年10月23日

作者: BUILDER.COM 
来源: www.BUILDER.COM 
类型: 翻译 

 最近,我不得不对我的一个 客户的旧网站进行更新,使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适 用,特别是从可访问性上来讲。我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配。  

像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文 本。它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是CSS可访问性的主要优点之一。 

问题是如何出现的? 

在我概述使网站更加具有可访问性的方法之前,了解现今众多的访问性问题的起因也许是很有帮助的: 

对HTML肤浅的理解:在1990年代的互联网大发展时期中,所有人都开始建构网站。WYSIWYG编辑器使得几乎每个人都可以很容易地建构一个网站,而不用费心去学习HTML。但不幸的是,这种在使用上的便利带来了一些蹩脚的代码,对可访问性造成了妨碍。 

HTML在设计方面的局限性:开发者和设计者经常会故意错用HTML标签,特别是<table>标签,来克服HTML在版面和设计上的局限性。这种设计方式也会带来妨碍可访问性的代码。 

什么使得CSS更具有访问性? 

CSS在1996年出现,用来解决上述的问题。通过使用CSS,你可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来。这就使你可以应 用准确的格式化并达到想要得到的版面设计,而无需使用可能会让屏幕阅读器和专门的浏览器软件产生困惑的HTML代码。 

例如,虽然HTML表格是用来排列表格式数据的,但他们也经常被用来排列对齐一个页面上的元素的。但是阅读器和例如语音合成器的软件要求有效的HTML代码。因此当他们遇到一个页面错误地使用了诸如一个表格的元素,产生的结果就会让使用者感到莫名其妙。 

CSS 的另一个可访问性的优点就是它允许使用者定义他们自己的风格单,这个风格单可以与网站的风格单共同工作。因此,例如一个使用者可以设定,所有通过< p>标签定义的文本都应该是1.5em Arial,即使这个网站的风格单表示它应该是18px Verdana Bold。 

要 注意用户定义的风格只有在用户的风格名称与HTML页面中的标签相符时才会起作用,这是很重要的。这就将确保兼容性的责任交到了开发者的手中。例如,如果 用户的风格单指定<p>标签应显示1.5em Arial文本,但是HTML页面并不使用<p>标签来从风格单中调用一个风格 (也许它使用<font class=”bodytext”>),用户对于<p>标签定义的风格将会被忽略。因此要确保你对你的 标题和段落使用标准的HTML标签,这将减少用户定义的风格单被忽略的机会。 

开始 

如果你是从头开始建构一个新的网站,那么通过CSS来改善可访问性就会很容易。但你仍然可以轻松地将现有的网站转变为CSS形式。 

步骤1:检查现有代码 

为了更好地说明,我将用在表A中这个简单的HTML代码来代表一个使用CSS的页面。这个例子假设页面还没有使用CSS,不过你也可以使用相似的方法来评价一个基于CSS的站点。主要的不同点就是大多数的改变将发生在CSS文件中而不是HTML文件中。 

步骤2:从HTML中去掉所有特殊风格标签 

要在这个页面中加入CSS,我首先需要去掉所有要控制内容表现的标签。样本代码使用了字体标签来定义字体外观,风格和颜色。去掉这些元素使得样本代码如表B所示。 

步骤3:从HTML中去掉并替换任何错用的标签 

现在我要去掉任何错用的HTML标签。在样本代码之中,一个表格用来在页面的内容创建一个15象素的边缘,代码还使用<br>标签来创建段落。 

在 我去掉表格和<br>标签之后,我将他们替换为适当的标签。例如,我对页面标题使用<h2>标签,用<p>标签来显 示段落。使用这些标准HTML标签使得之后的CSS的应用变得非常容易,而且与用户定义的风格单更加兼容。现在的样本代码如表C所示。 

步骤4:建构一个CSS文件来覆盖风格信息 

现在我已经从HTML文件中去掉了所有风格信息,我需要将这些信息转移至一个CSS文件中。CSS文件仅仅是一个存为.css扩展名的文本文件,因此它可以在任何一个文本编辑器中进行创建。我使用的是Dreamweaver MX。 

为 了使在HTML中应用CSS文件变得容易,我使用了名为p和h2的风格来对应标准HTML标签。我使用了可变的字体大小,使得用户可以轻松地在浏览器中增 大或缩小字体大小。使用绝对大小可以防止浏览器对字体进行大小的调整(除了Netscape 6或以后的版本之外,它将不考虑绝对字体大小)。我还在需要 的地方指定了字体的种类,重量和颜色。 

要重新产生由HTML标记代码创建的版面,我需要将<p>和<h2>标 签设置宽度为780象素。然而,由于我们的目的是将可访问性最大化,因此我将去掉宽度设置使得页面能符合浏览器窗口的大小。而且我将让HTML页面使用浏 览器的缺省边缘,而不是用原始代码的<table>标签来重新创建15象素的空白,这也使得其它例如打印机等的设备来使用它的缺省边缘设置。  

表D显示了我创建的CSS文件。我将它命名为Mystylesheet.css并将它放置在网站根目录下的一个风格文件夹之中。 

步骤5:在HTML文件上附加新的风格单 

在 创建了CSS文件之后,我在HTML文件中插入了它的风格。因为HTML文件已经包括了所有在CSS文件中引用的标签(<h2>和< p>),所以我只需要连接到HTML文件头部的风格单上就可以了。HTML文件从CSS文件中获得风格并将他们应用到<h2>和 <p>标签当中,如表E所示。 

步骤6:验证代码 

整个过程的最后一个步骤就是验证HTML代码的可访问性。如果你对于CSS来说是个新手的话,你最好对CSS代码也进行验证。有很多种的工具都可以帮你对二者进行验证。 

我 使用Dreamweaver MX来检查我的样本代码的可访问性。你可以通过在文件菜单中选择Check Page然后选择 Check Accessibility来实现。任何错误或是警告都会显示出来,还包括出现位置的行号以及对问题简要的解释。你可以在 Dreamweaver MX的Reference工具中找到更多关于这些错误和警告的内容。你只要从Dreamweaver的Windows菜单中选择 Reference然后从Book菜单中选择UsableNet Accessibility Reference就可以了。 

此外,World Wide Web Consortium (W3C)提供了超过30个的可访问性评估工具的链接。W3C还提供了针对HTML和CSS的基于Web的免费验证器。 

可访问性和简单的管理 
虽然这里给出的例子是很简单的,但它说明了利用CSS使你的站点更加具有可访问性是非常容易的。而且,对于CSS的使用不止这一个优点而已。 

基于CSS的网站要比仅仅只有HTML的网站要好管理得多。CSS文件中的风格上的变化可以应用到整个网站中而不需要改变网站中任何的HTML文件。而且CSS的使用缩小了每一个HTML文件的整体文件大小,因为所有的风格信息都存储在了CSS文件之中。 

因此如果你想要改善可访问性的话,将其视为一个机会,而不是一个障碍。要了解更多关于CSS和可访问性的内容,你可以去看一看World  Wide Web Consortium中的Web Accessibility  Initiative (WAI)。

 LR告诉我Donews的blog开了,让我去试试,于是注册了一个,不过没有用过,主要是不知道写什么,本来就不会写:)
不过倒是经常看KESO的blog
以后也尝试写写吧

不过用firefox发表BLOG有问题