共 7 页, « 第一页 ... « 1 2 3 [4] 5 6 7 »
刚刚为blog加了个面向打印的css，大家可以从浏览器的打印预览中看到效果。 之所以要加这个css，是因为blog显示的内容中有很多是不需要并且不便于打印的， 比如侧边栏、评论输入框等，打印时把这些无用的东西都隐藏掉， 对用户比较友好。
总结一下css的要点。参考的原文在这里。
阅读全文 »通常在制作网站首页时需要使页面内容在水平和垂直方向上都居中。 表格布局时代常用的方法是内容之前添加换行。实际上通过CSS有更方便的办法。
这个方法出自creamu.com。 先来看看代码和效果吧。
<style>
#warp {
position: absolute;
width:500px;
height:200px;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-100px;
border: solid 3px red;
}
</style>
<body>
<div id=warp>Test</div>
</body>
原理很简单：将left和top设置为50%来定位div到浏览器中央，再将margin-left和margin-top值设置为宽和高的一半， 使div居中显示。
原文链接。 这是一篇关于网站易用性的文章，作者以亲身体会讲述了43条 网站设计中常犯的错误，而无疑这些错误会大大影响网站的可用性。 如今网站易用性已成为一种趋势，但纵观国内的各大网站， 似乎易用性并未成为设计者们广泛理解的概念， 因此希望这篇文章对大家能有作用。
1. 用户必须在几秒钟知道网站是做什么的。注意力是因特网上最有价值的货币。 如果访问者无法在几秒钟之内得知你的网站的方向，他很有可能转而访问其他网站。 你必须迅速地告诉访问者为什么要在你的网站上花费时间。
2. 让网站易于速读。因特网不是书，因此没必要使用大段的文字。 也许我访问你的网站时我正在忙于其他工作，我不得不迅速读完所有内容。 项目符号、标题、副标题、列表，这些都能帮助读者迅速找到他想要的内容。
3. 不要使用难于阅读的花哨字体。当然，某些字体可以让网站精彩纷呈。 不过它们容易阅读吗？如果你的主要目的是传递信息并让读者阅读， 你应该让阅读过程舒服些。
4. 不要用小字体。如上一条所述，你得让读者阅读时感到舒服。 虽然我的Firefox有放大功能，但如果必须放大才能看清一个网站的话， 我就再也不会去访问它了。
5. 不要打开新浏览器窗口。我的第一个网站曾经经常这么做。 原因很简单，在新窗口中打开外部链接，用户就不必离开我的网站。 错！让用户决定如何打开链接，否则浏览器上大大的后退按钮就没必要存在了。 不用担心用户离开你的网站，在必要的时候他们会回来的。
6. 不要改变用户的浏览器窗口大小。用户有权控制自己的浏览器。 如果你改变窗口大小，你会在他们面前失去信用。
7. 不必要时不要让用户注册。直白地讲，我上网是为了获取信息，不是为了别的。 不要强迫我注册并留下我的电子邮件以及其他信息，除非特别必要（比如你 能提供的消息非常有价值）。
8. 不要在未经访问者同意的情况下为他们订阅电子杂志。 不要在访问者注册时自动给他们订阅电子杂志。 不请自来的邮件可不是个交朋友的好办法。
9. 不要过多使用Flash。Flash不仅会增加网站的读取时间， 过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时 才使用Flash。
10. 不要播放音乐。早些年Web开发者都喜欢在网站中集成音乐，结果他们失败了。 记住，永远不要使用音乐。
阅读全文 »原文在这里， 对于初学CSS布局的人也许会有很大的帮助。有经验的开发者在调试CSS布局时也能得到些启发。
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常， 即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界， 错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。 这是MacIE的著名的bug，倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何， 一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。 因此不要对float元素指定margin和padding属性 （可以在float元素内部嵌套一个div来设置margin和padding）。 也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。 因此请保证宽度之和小于99%。
9. 是否重设了默认的样式？
某些属性如margin、padding等，不同浏览器会有不同的解释。 因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10. 是否忘记了写DTD？
如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
最近一直在开发Ajax应用程序。众所周知Ajax的特点是客户端和服务器分离， 客户端通常由纯Javascript组成，通过XMLHttpRequest对象与服务器通信。 在调试客户端代码时，如果服务器开在本地，尚可通过samba等方式直接编辑 服务器上的客户端js代码，倘若服务器在异地，那么每次修改js代码后通过FTP等 方式上传之后再调试就十分费事。说到这里自然会想到将js代码放到本地， 然而XMLHttpRequest却只能访问同一域名下的URL，本地的js代码无法直接使用 远程服务器上的服务。
迷茫之际，同事介绍了delegate这款软件，利用它即可实现本地调试客户端代码。
delegate可以在这里下载。 delegate实际上是一个功能强大的代理服务器，它有个类似于Linux的mount功能， 能够将Internet上的URL映射到本地。利用这个功能， 即可将远程的服务器端和本地的客户端集成到同一个域名下， 实现客户端代码的本地调试。
方法如下：
- 将Apache配置到本机的8080端口，然后将客户端代码放在htdocs下， 使之能够通过 http://localhost:8080/client/ 访问。
- 下载delegate并解压缩。
- 编辑以下的配置文件 delegate.cfg。
-P80 ADMIN="yourname@yourmail.com" MOUNT="/client/* http://localhost:8080/client/*" MOUNT="/cgi-bin/* http://server-address/cgi-bin/*"
第一行的 -P80 指定delegate使用80端口；第二行的ADMIN指定管理员邮件地址， 可以随意设置；第三行将客户端映射到 delegate 的 /client/ 路径下； 第四行将远程服务器目录映射到 delegate 的 /cgi-bin/ 路径下。
另外，如果你需要通过代理服务器访问远程服务器，可以这样设置：MOUNT="/cgi-bin/* http://server-address/cgi-bin/*" PROXY="代理服务器地址:端口"
- 在命令行输入以下命令安装delegate。注意不同版本的delegate的可执行文件名不同。
dg9.4.1.exe +=delegate.cfg
- 打开浏览器，访问 http://localhost/client/。这样即可随时看到对js代码的修改。
实际上，用好这个方法还可以“盗用”许多网站的服务，即自己开发客户端， 再通过 delegate 将请求转发给服务器。其方法不再详述。
301就是HTTP协议中的应答状态301 Moved Permanently。 当你的网站更换地址后，应当在原地址上写个程序返回301， 以便让访问者能够知道你更换了地址，也让搜索引擎能迅速地收录新地址。 我的blog更改地址之后，经fcicq的提醒， 使用 mod_rewrite 返回301，三天后就有100多页面被Google收录。
下面是使用各种语言返回301的方法。调试时可使用Firefox+ Tamper Data插件， 也可以用IE的ieHTTPHeaders插件。
ASP
直接调用Response.Redirect函数会返回302 Object Moved。为了返回301， 我们需要手工设置信息。
<%@ Language=VBScript %> <% Response.Status = "301 Moved Permanently" Response.AddHeader "Location", "http://www.inspiremedia.org/" Response.End %>
PHP
简单地调用 header() 函数输出头信息即可。
<?php
header("301 Moved Permanently");
header("Location: http://www.inspiremedia.org/");
?>
Perl
#!/usr/bin/perl -w print "Status: 301 Moved Permanently\n"; print "Location: http://www.inspiremedia.org/\n\n";
mod_rewrite
如果你使用Apache，那么用mod_rewrite进行重定向是最简单的选择了， 只要在 httpd.conf 的全局配置或者虚拟主机配置中写一条规则即可。
RewriteEngine On RewriteRule ^/(.*) http://www.inspiremedia.org/$1 [R=permanent,L]
注意一定要使用 [R=permanent] 选项，仅用 [R] 选项会返回 302 。
box模型即由<div>等块元素的 margin、padding、border、width、height 等属性构成的显示模型， 它是CSS布局的基础。通过设置<div>的各种属性，可以得到任何想要的页面效果。
各个元素的含义如下：
- margin: box外边界到外层元素的距离，即余白。
- border: box的边界宽度。
- padding: box内的内容到box内边界的距离，即边距。
- width: box的宽度。
- height: box的高度。
其中有问题的就是 width 和 height 的定义。一般的浏览器将 width 和 height 定义为 除掉 margin、padding、border 之后的box内容的大小，实际上 box 所占有的面积 为定义的 width/height 再加上 margin、padding、border的大小。
阅读全文 »/div></div
或许这个已经不是什么新闻了。以data:开头，后面加入MIME类型和内容，即可将一个文件包含在一个URL内。包含二进制文件的格式为 data:image/gif;base64,BASE64编码。例如下面的图像文件包含了本站的图标。（请查看源代码以查看data:URLs的格式）
这个协议由RFC2397制定，目前Firefox、Opera、Konqueror、Safari都支持。IE不支持。唉，又是IE。
Firebug开发小组终于发布了激动人心的Firebug 1.0 Beta版。 与当初的Firebug 0.4版相比，这次的正式发布版已经不仅仅是简单的Javascript控制台， 而是集控制台、调试器、DOM查看/编辑器、网络监视器于一身的强大调试工具。 而使用者也不再限于Javascript开发者，内置的Box模型查看功能让网页设计师也受益匪浅。 下面我们来看看它的新功能吧。
阅读全文 »前两天在 del.icio.us 上看到了《The visual design of Web 2.0》这篇文章，读完之后觉得甚有道理，于是发信问原作者Jonathan能否将其翻译成中文，作者爽快地答应了，只要求链接到他的原文。忙了一个晚上终于翻译完了，才发现我的英文水平真的下降了很多很多，甚至连 as far as … be concerned 都不知道是什么意思了……虽然蹩脚的翻译使原文减色许多，但希望能够传达原文的意思。
翻译文如下。（Original article）
前一阵子维基百科的Web2.0条目包含了一节内容，专门描述Web 2.0的视觉元素，讲述了渐变色、绚丽的图标、反射效果、阴影以及大号字体等等。
但是几天之后维基人投票决定撤掉“视觉元素”这一部分。推究其原因，可能是Web 2.0的特性不能通过一系列的视觉规则来精确地定义。如果 Web 2.0 被理解为一种内容生成和发布的途径，那就没必要将其禁锢在视觉效果的框框里。
尽管如此，事实上大多数 Web 2.0 网站都有某种独特的艺术风格。也许维基人觉得这不属于Web 2.0的讨论范畴，但我却认为这十分必要。让我们开始 Web 2.0 的视觉之旅，看看所谓“Web 2.0风格”起着怎样的作用。
