<![CDATA[xhlv's collect]]> http://www.xhlv.com/collect/ zh-cn PBlog2 v2.4 xhlv's collect http://www.xhlv.com/collect/images/logos.gif http://www.xhlv.com/collect/ xhlv's collect http://www.xhlv.com/collect/default.asp?id=262 <![CDATA[如何让Firefox2和Firefox3在Windows下共存并同时运行？]]> webmaster@xhlv.com(admin) Wed,25 Jun 2008 15:46:13 +0800 http://www.xhlv.com/collect/default.asp?id=262 相对于Firefox2来说，Firefox3除了采用全新的Gecko 1.9引擎外，在性能、稳定性和安全性方面进行许多改进，在我们最关心的对站点和网页应用的改进也相当多的。去年底，Firefox3 beta2就已经发布了，正式版的推出也为期不远了，是时候在网页开发中考虑它了，所以我们不仅在要同一系统中装多个浏览器、多个版本的IE（Multiple IE），现在我们也需要装两个版本的Firefox了。在网上很早就有Linux下让Firefox3与Firefox2共存的介绍，下面介绍一种Windows下两者共存的方法。
  1. 下载Firefox3，目前是 RC2 简体中文版。
  2. 打开命令运行窗口（开始>运行或快捷键win+R），然后运行命令firefox -profilemanager -no-remote，打开Firefox的配置文件管理器。–no-remote命名允许浏览器正在运行的时候打开配置文件管理器。

    命名运行窗口
  3. 点击“创建配置文件”按钮，创建一个名为Firefox3或者其他名字的配置文件。去掉对“启动时不询问”的选择。这一步是为Firefox3创建一个新的配置文件。

    创建新的配置文件
  4. 在Firefox2的快捷方式上点击右键，然后选择属性。在“目标”输入框中.exe"的后面输入一个空格和-p default，然后关闭。这步是告诉快捷方式使用默认配置文件来运行Firefox2。

    告诉快捷方式使用默认配置文件来运行Firefox2
  5. 安装Firefox3，“安装类型”选择“自定义”，这样就可以选择安装新的安装地方。虽然默认文件夹名是Mozilla Firefox 3 beta 2，但是最好还是自己重新定义一个，这样以后升级新的版本时候不用做什么修改。

  6. 在安装结束时，不选择“立即运行Firefox”选项。如果现在运行，它使用的是默认配置文件，这不是我们想要的。

  7. 在Firefox3的快捷方式上单击右键，选择“属性”，在目标输入框的-no-remote -p firefox3。这步是告诉这个快捷方式使用配置文件Firefox3来运行。
    使用配置文件Firefox3来运行

这样我们就可以在同一个系统中同时运行Firefox2和Firefox3了。遗憾的是Firefox3基本上不支持Firefox2上的add-on，包括Firebug，幸运的是已经有了适用于Firefox3的Firebug 1.1 beta。

这个方法来自于How to Run both Firefox 2 and Firefox 3 Together。


]]> http://www.xhlv.com/collect/default.asp?id=261 <![CDATA[Firefox font-size过小无效的问题]]> webmaster@xhlv.com(admin) Mon,16 Jun 2008 10:28:24 +0800 http://www.xhlv.com/collect/default.asp?id=261 给字体10px却显示12px，这是firefox默认最小字号设置的问题。

在地址栏输入about:config，然后找到“font.minimum-size.zh-CN”，将值改到自己需要的值。


]]> http://www.xhlv.com/collect/default.asp?id=260 <![CDATA[js实现最大化、最小化、关闭窗口功能。（利用html的object元素）]]> webmaster@xhlv.com(admin) Tue,03 Jun 2008 12:19:58 +0800 http://www.xhlv.com/collect/default.asp?id=260 <head>
<script language="JavaScript"><!--
function Expand(){
var filenum = 2;
file.insertAdjacentHTML('BeforeEnd','<br>文本框 <input type="text" name="File' + filenum + '">');
filenum++;
}
//--></script>
</head>
<body>
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" VALUE="Close"></OBJECT>
<input type=button value=最小化 onclick='hh1.Click()'>
<input type=button value=最大化 onclick='hh2.Click()'>
<input type=button value=关闭 onclick='window.close()'>
<input name="" type="button" value="添加文本" onClick="Expand()">
<div id=file>
文本框 <input type="text" name="File1">
</div>
</body>
</html>
]]> http://www.xhlv.com/collect/default.asp?id=259 <![CDATA[IE window对象——写hta时也许有用]]> webmaster@xhlv.com(admin) Wed,21 May 2008 09:56:34 +0800 http://www.xhlv.com/collect/default.asp?id=259 window对象表示浏览器中打开的窗口，提供关于窗口状态的信息。可以用window对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览器特性。 浏览器在打开HTML文档时生成window对象。如果文档定义一组帧，则浏览器对原文档生成 一个window对象，并对每个帧生成window对象。 这些对象是原父窗口的子窗口。父窗口中的动作会影响子窗口：例如，如果关闭父窗口，则子窗口也关闭。也可以通过用showModalDialog方法， 生成新窗口，从而生成新的window对象。

属性：

closed 窗口关闭时返回（true表示窗口关闭，否则为false）

dialogHeight 返回对话框的高度

dialogLeft 返回对话框左边坐标

dialogTop 返回对话框上边坐标

dialogWidth 返回对话框的宽度

document 提供窗口的文档对象引用

event 提供窗口的事件对象引用

length 提供集合中的元素个数

location 提供文档的URL

name 指定窗口或帧的名称

navigator 提供窗口的浏览器对象引用

offscreenBuffering 指定是否对文档使用屏外缓冲

opener 提供生成当前窗口的窗口引用

parent 返回父窗口：对于通过FRAME生成的窗口，父窗口是FRAMESET元素所在的窗口

returnValue 指定从模态对话框返回主窗口的数值

screen 提供窗口的屏幕对象引用

self 提供引用当前窗口或帧的办法

status 设置或返回窗口底部状态条中的消息

top 返回最上层窗口对象，它是自己的父对象

window 提供当前窗口的引用，与self相同

方法：

alert 显示带消息和OK按钮的alert对话框

blur 使对象失去焦点并激活onBlur事件

clearInterval 取消由setInterval启动的间隔

clearTimeout 取消由setTimeout设置的超时

close 关闭当前浏览器窗口

confirm 显示带消息和OK按钮及Cancel 按钮的确认对话框

execScript 执行指定的脚本

focus 使控件取得焦点并执行由onFocus事件指定的代码

navigate 显示某个URL，只用于VBScript

open 打开新窗口并装入指定URL文档

prompt 显示带消息和输入字段的提示对话框

scroll 相对于整个文档冼窗口滚动指定X和Y偏离量

setInterval 在指定毫秒数后重复求值一个表达式

setTimeout 在指定毫秒数后求值一个表达式

showHelp 显示指定URL的帮助文件

showModalDialog 将HTML文档作为模态对话框打开

事件：

onBeforeunload 页面删除之前。这个事件可以让用户不离开页面。可以用脚本编一个事件处理器，显示一个对话框，让用户选择不离开页面

onBlur 对象失去焦点时

onError 装入文档或图形发生错误时

onFocus 对象取得焦点时

onHelp 用户按F1键或单击浏览器Help按钮时

onLoad 浏览器打开指定对象之后

onResize 窗口调整尺寸时

onScroll 滚动框移动时

onUnload 页面删除之前


]]> http://www.xhlv.com/collect/default.asp?id=258 <![CDATA[PScs3"您此时无法使用此产品 您必须"的解决办法！！！]]> webmaster@xhlv.com(admin) Mon,19 May 2008 15:08:07 +0800 http://www.xhlv.com/collect/default.asp?id=258

时间在笔记本上安装了新版的Adobe Photoshop CS3 Extended，不过后来优化系统过后却出现如下提示：

您此时无法使用此产品 您必须

我以为是清理注册表时把PS的注册信息给清理了呢！便又重装了一边。

今天开机后想处理下头像，发现PS又出现了上面的提示。上次用的时候并没有清理注册表啊，怎么会这样。

于是在百度上搜索，原来出现这个问题的网友还不少，终于找到了答案，原来是我把Adobe 的一个服务给禁用了！

开始 --> 运行 --> 输入services.msc --> 找到 FLEXnet Licensing Service这项服务

点属性 --> 把已禁用改成手动 确定

再打开PS 一切搞定


]]> http://www.xhlv.com/collect/default.asp?id=257 <![CDATA[Iconka图标教程 Finding the idea]]> webmaster@xhlv.com(admin) Mon,19 May 2008 10:59:07 +0800 http://www.xhlv.com/collect/default.asp?id=257

寻找概念

第一辑：思考前请先思考

 

    * 尺寸越小，你的选择余地就越小。我们不可能把一架钢琴上完整的88个按键全都做到16个像素宽度中
    * 尺寸越小，图标的可读性要求就越高（不过有个好处就是小图标里我们可以减少一些元素，即使引喻和创意相交原来变得不那么完整）

比如这个代表圣诞节的图标：

 


Context 整体风格

图标只是界面的一个组成部分，所以他必须满足整体要求并且适应主体风格。如果整个界面需要尽可能多得用圆角，那图标里也得出现圆角。如果整体风格是明亮的，那尽可能让图标闪耀吧！

当然，如果你在给一个床上用品推介网站做图标，你完全可以忽略掉相对应的概念，用一个简单的咖啡杯来表示导航栏中的“关于我们”

Activity 动作

这是一个经常被我们忽略的重要特征。

你的图标是用来做什么的？他到底用来做什么动作的？

    * 当图标是用来描述或者报告某些事情 - 我们需要引导用户把更多的注意力放在这个图标的形象和细节。
    * 如果图标是引起某种动作的 - 你需要关注一下构成图标的各个表述动作的元素。
    * 如果图标是用来防止或禁止某些事情 - 那他必须是明亮的、明显的、可以被立刻识别的。
    * 如果图标只是作为点睛或者纯粹好看 - 那么你可以随意发挥你的想象寻找有创意的解决方案。

来看看这个例子，这是两个极其相似的引喻，但在不同的情况下也可以带来完全不同的效果：


再来看看另外一个例子。假如我们现在要用一个图标来表达“请不要延墙行走，因为屋顶上有工人正在施工，他们可能会丢下砖块”


所有这些准备工作看起来有些多余，似乎只是限制了我们的想法，遏制了我们的创意，难道就不能进行一下“无规则”的头脑风暴吗？

先别急着下结论。这些“限制”其实是给我们修建了一条轨道，帮助我们走上正确的方向。寻找正确引喻的过程可能缓慢，但只要沿着正确的方向，我们后续遇上的阻碍会少得多。

之后的内容，请听下回分解。

 

 

在我的上一篇文章中我都一直在讨论“如何画一个图标”。显然有些朋友感到困惑，为什么我们不是讨论“图标里要画什么呢？”，所以在我的这篇文章里我们就来讨论这个问题。

图标中应该画什么？我们应该用什么样的引喻？应该去哪里找创意？图标之所以被叫做图标，就是因为他们可以被解读，可以被识别，可以被理解。如果你是一个图标设计师，那你绝对不应该有这么个借口：“这是我的看法！”请别让你的客户看着你的作品就像母鸡看着用她的蛋做的蛋雕。

创造某种引喻的过程是可能是很长、很痛苦的。有些设计师能把这个过程融入他们的生活中，从身边任何事物中找到灵感。而另一些则慢慢地、持续地、甚至悲伤地努力去完成这个过程。但真正的结果其实取决于前期工作是否做得充分。

开展设计工作之前，你必须确切地明白你的的任务，各种条件限制以及你的目标，因为我们的设计常常是功利性的。就像一个厨师在烹饪之前必须买食材，准备菜谱，根据吃饭人的数量来决定烧多烧少，并且还要注意食客中的过敏情况。设计师在真正“烹饪”之前也应该做类似的准备工作。

那么，让我们来看看做图标之前我们应该想思考什么。

Size 尺寸

以前，图标的尺寸不是很小就是非常小，而现在，图标尺寸的限制越来越小，我们常常需要处理从几个像素到整个屏幕大的图标。

为什么那么重要？
]]> http://www.xhlv.com/collect/default.asp?id=256 <![CDATA[UI规范]]> webmaster@xhlv.com(admin) Mon,19 May 2008 10:06:21 +0800 http://www.xhlv.com/collect/default.asp?id=256 一　适用环境和对象
二　必要性
三　技术原则
四　代码编写规范
五　页面模版使用规范

一　适用环境和对象
本规范适用基于浏览器的B/S（）版软件项目开发工作。开发流程中的模版页面编写和模版文件套用工作必须遵照此规范执行。适用对象为开发编码人员、UI设计人员、模版编写人员、界面测试人员等。
基于客户端的C/S版软件开发工作不适用本技术规范。

 

 二　必要性
　　本规范旨在制订开发编码人员和UI模版编写人员之间在工作交叉部分的技术标准，使他们遵循同一操作规范，利于交叉工作的平缓顺利交接。以标准化方式，提高沟通和技术协作的水平，提高工作效率。减少和改变责任不明，任务不清，和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。

三　技术原则
代码规范化书写
代码规范化书写实现了脚本整体风格的一致，保证了同一个人不同时期写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致。因为开发不可能在孤立中进行，所以代码规范化书写是项目组人员合作沟通的前提。

数据层、结构层、表现层分离
数据内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。这里强调的“真正”，是指纯粹的数据信息本身。把信息内容以一种合适的方式格式化，简言之就是页面排版，例如：分成标题、作者、章、节、段落和列表等，使内容更加具有逻辑性，条理清晰易读易懂，叫做“结构(Structure)” 虽然定义了结构，但是内容还是相同的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，称之为“表现(Presentation)” “表现”的作用使内容看上去漂亮、赏心悦目、打动人心！

所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，人对页面内容的交互及操作效果叫做“行为（Behavior）”,示意草图如下：


 
对于数据、结构与表现相分离，最早是在软件开发架构理论中提出来的。UI设计师设计出页面模版，程序员负责内容数据的嵌入，数据可能是从数据库中提取出来，也可能是静态写入的提示性文字，最后形成一个新的页面展示给软件操作者。模版文件的结构利用HTML＋XHTML标签来定义，而所有涉及表现的东西通通剥离出来，把它放到一个单独的文件里，这个单独的文件就是CSS。

数据、结构与表现相分离的好处是：
程序员不需要过多的思考页面显示问题，而只需要根据模版效果把数据放入模版相应的位置。界面的结构和表现由UI设计师负责。填入结构的数据自觉套用设计好了的表现效果。最后呈现一个实现功能的完整界面。
表现层的分离保持整个软件界面视觉的一致性，使改版也变得非常简单，修改样式表就可以了；
由于结构清晰，数据层相对独立，对数据的集成、更新、处理和再利用也更加方便灵活；

四　代码编写规范

（一） 目录结构及命名规则

目录结构规范
1、 目录建立的原则：以最少的层次提供最清晰简便的访问结构。
2、 根目录一般只存放index.htm以及其他必须的系统文件
3、 在根目录中原则上应该按照系统的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片
4、 所有JS,ASP,PHP等脚本存放在根目录下的scripts目录
5、 所有CGI程序存放在根目录下的cgi-bin目录
6、 所有CSS文件存放在根目录下style目录
7、 每个语言版本存放于独立的目录。例如：简体中文gb
8、 所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录
9、 temp 子目录放客户提供的各种文字图片等等原始资料，以时间为名称开设目录，将客户陆续提供的资料归类整理。

文件和目录命名规范
1、 文件命名的原则：以最少的字母达到最容易理解的意义。
2、 每一个目录中包含的缺省html 文件，文件名统一用index.htm
3、 文件名称统一用小写的英文字母、数字和下划线的组合，不得包含汉字、空格和特殊字符
4、 尽量按单词的英语翻译为名称。例如：feedback(信息反馈)，aboutus(关于我们) 不到万不得已不要以拼音作为目录名称
5、 多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。例如：news_01.htm。注意，数字位数与文件个数成正比，不够的用0补齐。例如共有200条新闻，其中第18条命名为news_018.htm

图片的命名规范
1、 名称分为头尾两两部分，用下划线隔开。
2、 头部分表示此图片的大类性质。例如： 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。
3、 尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.

4、 有onmouse效果的图片，两张分别在原有文件名后加"_on"和"_off"命名

 

其它文件命名规范
1、 js的命名原则以功能的英语单词为名。例如：广告条的js文件名为:ad.js
2、 所有的CGI文件后缀为cgi。所有CGI程序的配置文件为config.cgi

（二） html编写规则
　　
一般原则
1、 在编写模版文件，排布结构表格之前，要思考一个最佳方案，表格的嵌套尽量控制在三层以内；要考虑程序套用的可实现性、通用性、灵活性、预见性，所有内容均采用积木式组织，可替换和删除，并对总体结构不会造成破坏性影响
2、 尽量避免 <colspan> <rowspan> 两个标记，经验表明，这两个标记会带来许多麻烦
3、 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内。因为浏览器在解释页面元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>标记，以便能够使这个大表格分块显示
4、 排版中经常会遇到需要进行首行缩进的处理，不要使用全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记
5、 原则上，我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议 <img> 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，务必在最后给 <img>附上 width 和 height 属性
6、 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中尽量不要使用<br> 来人工干预分段
7、 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外，汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号
8、 为贯彻结构层和表现层分离的原则，严禁使用传统的HTML3.2/4.0控制表现的标签，例如<font>,<b>，还有本意用于结构后来被滥用于控制表现的标签，例如：<h1>,<table>等。所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=?> 标记，<b>??</b>　<h1>??</h1>标记，严禁在结构页面写表现标签
9、 不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
10、 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体
11、 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%
12、 系统中的路径全部采用相对路径
13、 为保证系统和浏览器的兼容性，当设置背景图片时，要坚持用双引号。
14、 “网页大小”为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。页面大小保持在34K以下为合适

代码规则
head区标识（head区是指首页HTML代码的<head>和</head>之间的内容）
1、 公司版权注释
<!--
Generator: 中软融鑫
Creation Data: 2005-8-1
Original Author: 张三
-->

2、网页显示字符集
简体中文：
<META. HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁体中文：
<META. HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英 语：
<META. HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
 
3、 简介
<META. NAME="DESCRIPTION" CONTENT="这里填您网站的简介"> 

4、 网页的css文件定义，所有css文件尽量采用外部调用
<LINK href="style/style.css" rel="stylesheet" type="text/css">

5、 网页标题
<title>这里是你的网页标题</title>

7、所有的javascript脚本尽量采取外部调用
<SCRIPT. LANGUAGE="javascript" SRC="script/xxxxx.js"></SCRIPT>

head区可以选择加入的标识
7、设定网页的到期时间。一旦网页过期，必须到fwq上重新调阅。
<META. HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

8、禁止浏览器从本地机的缓存中调阅页面内容。
<META. HTTP-EQUIV="Pragma" CONTENT="no-cache">

9、用来防止别人在框架里调用你的页面。
<META. HTTP-EQUIV="Window-target" CONTENT="_top">

10、自动跳转。
<META. HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
5指时间停留5秒。

11、网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<META. NAME="robots" CONTENT="none">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。

12、收藏夹图标
<link rel = "Shortcut Icon" href="favicon.ico">

13、搜索关键字
<META. NAME="keywords" CONTENT="关键字1,关键字2,关键字3,...">

 

head区以下的标记
1、body标记
为了保证浏览器的兼容性，必须设置页面背景
<body bgcolor="#FFFFFF">

2、 table标记
在写 <table> 互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<tr>，<td>各缩进两个半角空格，结束标记和开始标记平齐。<td> 中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td> 结束标记应该与 <td> 处于同一行，不要换行。
　 正确写法：
a\
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
    <td>
       <table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
</td>
</tr>
</table>

b\
<td><img src=”../images/sample.gif”></td>

   错误写法
   a\
   <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>&nbsp;</td>
      </tr>
         </table>
   </td>
  　</tr>
</table>

   b\
  <td><img src=”../images/sample.gif”>
</td>
   这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：
<td><img src=”../images/sample.gif”> </td>

于同一个级别 的 <table> 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该 在 <td> 和 </td> 之间写一个&nbsp;，如果高度小于12px, 则应该 在 <td> 和 </td> 之间插入一个1*1 大小的透明的gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW中可以通过command->apply souce formatting进行重新整理！

3、 Width 和height标记
一般情况下只有一列的表格，width 写在<table> 的标签内，只有一行的表格，height 写在 <table> 的标签内，多行多列的表格，width 和height 写在第一行或者第一列的 <td> 标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。
A、只一列的表格的width标记
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
b、只一行的表格的height标记
<table width="100%" height="30"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
c、多行多列表格的width和height标记
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100" height="30">&nbsp;</td>
    <td width="200">&nbsp;</td>
    <td width="300">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

4、 table的width属性

为遵循页面结构灵活性、通用性原则，table的width属性原则上全部写成100％或者不写width属性，不推荐写成其他非100％宽度属性。留空显示效果通过其给外部td施加style的padding属性实现。

 
<table width="100%"  border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200" bgcolor="#FF0000" style="padding:20px; ">
       <table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
         <tr>
           <td>table宽度100％</td>
         </tr>
         <tr>
           <td>&nbsp;</td>
         </tr>
      </table>
 </td>
    <td>&nbsp;</td>
  </tr>
</table>

 

需要说明的是这里td的style虽然是css的写法，但不属于表现层的内容，而是属于结构层的内容，所以可以直接写在html标记中间。

5、数据列表表格代码写法
表格外加上一个<div>，并对<div>赋一个id，即<div id =list>，然后通过样式表对这个id下的所有html元素进行控制，
用<th>表示表头
设置每列宽度的位置在表头对应的<th>中，其中列表项中，字数最多或者字数不定的一项不设置宽度。
宽度的值依据列表项内容的多少来定，2个字的30px，三个字40px，时间、年月日（比如2004-11-11）80-120px,
类似于标题的列表项，表格对齐方式为左对齐（align=left）,时间，人名一般居中对齐，数据一般右对齐（align=right）。
对齐页面内容时不要用div来对齐，直接在td 或th中写align=…
表头文字一般不折行，方法是在<th>中加上nowrap,或者通过样式表来控制

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
     <th width="30" nowrap>选择</th>
     <th align="left" nowrap>标题</th>
     <th width="80" nowrap>发表人</th>
     <th width="120" nowrap>时间</th>
     <th width="40" nowrap>大小</th>
  </tr>
  <tr>
     <td>&nbsp;</td>
     <td align="left">&nbsp;</td>
     <td align="center">&nbsp;</td>
     <td align="center">&nbsp;</td>
     <td align="right">&nbsp;</td>
  </tr>
  <tr>
     <td>&nbsp;</td>
     <td align="left">&nbsp;</td>
     <td align="center">&nbsp;</td>
     <td align="center">&nbsp;</td>
     <td align="right">&nbsp;</td>
  </tr>
</table>


（三） css编写规则

css文件调用写法
1、所有的CSS的尽量采用外部调用，特殊情况才允许使用内置html写法。
<LINK href="style/style.css" rel="stylesheet" type="text/css">

css文件结构组织
1、 文件提头，css文件名称、时间、作者
/*--------------------------------------------------------------------
 *  CRM系统的标准样式
 *  DateTime: 2005-1-28 v1.1
 *  author: lizhi
 *--------------------------------------------------------------------*/

2、 将不同目的和效果的CSS选择符分别编组，编组分层级使结构清晰，便于查对。并恰当地成块注释，注释要说明施加的页面文件的对象。顶级注释用*TOP*打头，次级注释不用。
/* TOP* head文件的风格--------------------------------*/
  /*head导航文字风格*/
.headtext {
 font-size: 14px;
 color: #ffffff;
 font-weight: bold;
} 
.headtext a:link {
 color: #ffffff;
 text-decoration: none;
}
.headtext a:visited {
 color: #ffffff;
 text-decoration: none;
}
.headtext a:hover {
 color: FED078;
 text-decoration:none ;
}

/*客户简明信息文字风格*/
#clientcard {
   align:left;
}
#clientcard th {
 height:20;
 font-size: 12px;
 color: #737373;
 padding-left:10;
 font-weight: bold;
 background-attachment: fixed;
   background:url(images/dot2.gif);

 background-repeat: no-repeat;
 background-position: left center;
}
#clientcard td {
 height:20;
 font-size: 12px;
 color: #FD783A;
 padding-right:25;
}

 

3、选择符分组的顺序是重定义的最先，伪类其次，自定义最后。便于自己和他人阅读。
例如：
/*
 * 系统的背景部分和滚动条效果
 */
BODY {
 margin-left: 0px;
　…　
}

TD {
 font-size: 12px;
　　…
}

/*
 *  这个部分是超级连接部分
 */
a:link {
 color:  #484848;
 text-decoration: none;
}
a:visited {
 color: #484848;
 text-decoration: none;
}
a:hover {
 color:#BD0800;
 text-decoration: underline;
}

  /*左边树型结构名称文字风格*/
.ltreename {
 font-size: 14px;
　…
}

类和ID命名规则
1、以功能和定义对象的位置，而不是外观为类和ID命名。例如创建了一个 .smallblue 类，后来打算将文字改大，颜色变为红色，这个类名就不再有任何意义了。所以，用更有描述性的名字如 .copyright 和.info-list更加合适。

单位
1、0不用单位
2、非零值要指明单位，指定字体、边距或大小时，必须指明所用的单位
例如： padding: 0 2px 0 1em;
3、特例：line-height不需要单位

字号大小
1、为了保证不同浏览器上字号保持一致，字号像素px来定义，一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用14.7px 的字号比较合适
例如： font-size: 12px;

顺序
1、a:link a:visited a:hover a:actived 要按照规范顺序写
2、边框(border)、边距(margin)和补白(padding)的简写次序为：顺时针方向从上开始，即 Top, Right, Bottom, Left。
例如： margin: 0 1px 3px 5px;表示上边距为零，右边距为1px，依此类推。

组合选择符
1、保持CSS短小对减少下载时间非常重要。尽量为选择符分组、 利用继承(inheritance)以及使用简写(shorthand)来减少冗余。

使用图片
1、css中经常遇到使用图片的情况, 图片的路径一律采用相对路径。
例如：
/*信息分类td底图和文字风格*/
.hurdlename {
 font-size: 14px;
 color: #0B43C2;
 height:25px;
 font-weight: bold;
 background-image: url(images/rbar_bg.gif);
 background-repeat: repeat-y;
 text-indent: 12px;
}
/* 按钮风格*/
.but1{
   background-image: url(../images/but1.gif);
 font-size: 12px;
color: #000000;
 border: 0;
 width:85px;
 height:26px;
     cursor: hand;
}

2、使用图片替换技术时要考虑与系统和文件结构的亲和力。如果引用css的所有文件不在同一级相对路径，就会出现css指定的图片无法显示的问题。在这种情况下不支持使用图片技术。建议采用filter技术
例如：
/* TOP * 通用按钮风格---------------------------------------*/
input.buttton {
        filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#CFD1CF, endcolorstr=#EFEFEF);
 　　 border: #B5B6B5 1px solid; 
        font-size: 12px;
        color: #000000;
        cursor: hand;
        height:24px;
        background:#ffffff;
}


五　页面模版使用规范

页面模版使用规范的目的是统一和约定UI设计、界面工程师与不同的程序编码人员的行为方式，光有了书写代码的规范还不能完全解决界面套用的统一性问题。因为不同的编码人员对同一个模版的理解有可能不同，再加上个人工作习惯的不同，界面套用的结果往往很容易出现差异。哪怕是每人一点点差异，都可能使软件的质量收到很大的影响。

责任分工明确
1、 UI设计、界面工程师负责界面风格的设计和软件模版的编写，并监督界面套用的效果。对软件最终的界面负责。
2、 编码工程师负责软件业务逻辑的实现，软件模版的套用。对软件的数据和程序负责。
3、 现实的情况是个别编码工程师在模版套用出现偏差后，在界面工程师提出修改意见的时候拒绝修改，以开发进度、时间不够为由搪塞，甚至主观认为“这个（界面）不重要”致使界面工程师的作用得不到应有的发挥，影响软件产品质量。
4、 解决办法是各负其责。界面问题提高重视程度，并纳入开发流程和进度管理之中。

界面模版交界过程
1、 模版文件制作完成后，在提交给编码工程师时，要简要说明模版的文件的使用说明和提醒。
2、 编码工程师和界面工程师密切合作，完全理解模版使用说明。
3、 对界面结构层html的table嵌套关系理解清楚并明确和程序结合的用意。有和程序不相配合的情况，进一步和界面工程师讨论，获得解决方案。不得在界面工程师不知情的情况下随意修改table结构、定位属性和嵌套关系。这样做的坏处是虽然一个人解决了暂时的显示问题，但和其他编码工程师套用的结果出现不同。也不利于界面工程师控制总体界面。
4、 对表现层的界面元素和css文件选择符的对应关系。做到心中有数，理解一个模版文件，到套用其他文件时就能够举一反三。
5、 编码工程师完全理解了界面模版后，就能够顺畅的把数据层的内容放到结构层合适的位置，并指定表现层合适的选择符属性。完成界面套用工作。

模版说明的内容
1、 总体的界面结构
2、 页面板块的布局和定位table的写法
3、 table嵌套的方式的理由
4、 不同功能的界面显示单元说明和使用方法
5、 css文件中选择符的使用说明，一般的都能理解，个别特殊的要着重说明。

Css文件的版本控制
Css文件应引入版本控制的机制，项目组中应指定专人负责css文件的上传和修改。fwq的css文件和界面工程师的css文件应该同步更新。不支持编码工程师随意添加选择符修改css文件。谁都可以改就没有标准，没有版本控制就做很难做到界面统一。


]]> http://www.xhlv.com/collect/default.asp?id=255 <![CDATA[Tabla de equivalencias entre px, pt, % y em para w]]> webmaster@xhlv.com(admin) Sun,04 May 2008 22:41:21 +0800 http://www.xhlv.com/collect/default.asp?id=255

Interesante artículo de ateneupopular.com acerca de las equivalencias entre valores en pt (puntos), px (pixels), % y em cuando se declaran como propiedades de distancia en web.

Pts Px Em %
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%

Ver artículo en: http://www.ateneupopular.com/  y en: http://www.webadictos.com.mx

 

]]> http://www.xhlv.com/collect/default.asp?id=254 <![CDATA[键盘各个按键的代码]]> webmaster@xhlv.com(admin) Sat,05 Apr 2008 15:22:16 +0800 http://www.xhlv.com/collect/default.asp?id=254 A(65) B(66) C(67) D(68) E(69) F(70) G(71) H(72) I(73) J(74) K(75) L(76) M(77) N(78) O(79) P(80) Q(81) R(82) S(83) T(84) U (85) V(86) W(87) X(88) Y(89) Z(90) 0(48) 1(49) 2(50) 3(51) 4(52) 5(53) 6(54) 7(55) 8(56) 9(57) 

数字键盘上的键 
数字键盘0(96) 数字键盘1(97) 数字键盘2(98) 数字键盘3(99) 数字键盘4(100) 数字键盘5(101) 数字键盘6(102) 数字键盘7(103) 数字键盘8(104) 数字键盘9(105) 乘号(106) 加号(107) Enter(13) 减号(109) 小数点(110) 除号(111) 

功能键 
F1(112) F2(113) F3(114) F4(115) F5(116) F6(117) F7(118) F8(119) F9(120) F10(121) F11(122) F12(123) F13(124) F14(125) F15(126) 

其它键 
Backspace(8) Tab(9) Enter(13) Shift(16) Control(17) Caps Lock(20) Esc(27) 空格键(32) Page Up(33) Page Down(34) End(35) Home(36) 左箭头 
(37) 向上箭头(38) 右箭头(39) 向下箭头(40) Insert(45) Delete(46) Num Lock(144) ScrLk(145) Pause/Break(19) ; :(186) = +(187) - _(189) / ? 
(191) ` ~(192) [ {(219) \ |(220) ] }(221) " '(222) ,(188) .(190)<br/><div><iframe src='../ad.html' width=725 height=91 frameborder=0 scrolling=no></iframe></div>]]> http://www.xhlv.com/collect/default.asp?id=253 <![CDATA[创建性感CSS样式表的十个技巧(Sexy Stylesheet)]]> webmaster@xhlv.com(admin) Fri,28 Mar 2008 15:13:15 +0800 http://www.xhlv.com/collect/default.asp?id=253 如果你想成为一位CSS专家的话，光背出一堆选择器是不够的，还要能够提高CSS样式表的可读性，开发效率以及维护性。这里，Jina Bolton 将给我们分享一下她关于如何创建性感的CSS样式表的十个技巧。

本文主要内容为：CSS代码编码规范，教你如何写出整洁漂亮性感的css代码，如何清晰的组织你的样式表文件。闲言少叙，直接进入正题，完整文字请查看原文。

1. 不要在HTML文件中使用CSS样式定义
相信对于多数有一定工作经验的设计师来说，使用外部样式表来定义CSS样式是小菜一碟的工作。但我在这里仍然需要再次告诉你这点，因为我看到相当多的站点在最开始的时候，有着非常结构清晰，组织良好的代码。但是随着时间的推移，慢慢地内部定义乃至内联样式开始蔓延到站点的各个角落。也许是因为项目周期十分紧迫，抑或只是因为我们有点偷懒。

想象一下，当这样的坏习惯被我们保持了下来，一段时间后，如果老板希望在不改动网页内容的前提下重新设计网站的样式的话，OH，你将不得不去查找这些自己丢在各个角落的垃圾代码，如果项目碰巧规模又非常之大，那我恐怕只有祝你好运，或者推荐你去找黄健翔了。

千万别给自己找这样的麻烦，创建干净的代码，并始终让他们保持干净，这样你会让生活变得充满快乐。

注意：请小心使用过多的外部样式表，如果每次更改你都创建一个新的样式表，这不会给你带来任何好处。过多的样式表会让你将来的调试和更新工作变得更加复杂，当然我理解你希望将样式分组管理的初衷，后面的内容中我会专门和你一起讨论这个问题。

友情提醒：过多的样式表应用，会带来潜在的性能问题，并且在IE6下，最多只能引入32个外部样式表。

2. “语义学Semantics”不仅仅是一个让你迷惑的词语
我要告诉你们，“语义学Semantics”将是你们最好的朋友。在你选择最合适，语义最正确的元素来描述文档内容之外，也请选择语义清晰，合适的词语来定义你的class名称以及元素ID名称。不仅仅是做正确的事，这样做还能让你和你的团队成员的工作变得更加简单。让我们来看一条样式定义：

.l13k { color: #369; }

我相信你乍看到这条定义，你能否知道它是用来干嘛的吗？我想你肯定答不上来。这个名称应该是某个只有作者本人知道的缩写，即使作者现在知道含义，但一个月后，一年以后你还能知道它的含义吗？让我们再来看一条定义：

.left-blue { color: #369; }

这条定义，你可能立刻猜到它是用来干什么的了，页面左边区域，文字颜色为蓝色，表述的非常清楚明确。但是让我们来假设一下，不久的将来，老板希望重新设计样式，这个区域的内容位置将换到右边，文字颜色将换成红色。很显然，这个名称将变得不再合适，甚至变得不正确，现在你有两个选择，一是替换掉每个使用该class的地方，二是继续使用这个让人产生误解的名称。

这样看来，名称不是描述清晰就是好的，我建议你们最好是不要采用诸如颜色或者是高度宽度尺寸等非常具体的细节来命名样式定义，同样的也尽量避免使用具有具体形象的词汇来命名（比如使用 box），这样的做法某种程度上破坏了我们希望将内容和样式分离的初衷。怎样做才是最好的呢，让我们来看一下这个：

.product-description { color: #369; }

这个定义命名，无论你重构多少次，它都是非常合适的，美丽的东西永远是美丽的。


3. 善用代码注释
善用代码注释将会给你和你的团队成员带来极大的便利，不仅仅是通常的注解，我们还能非常创造性的去使用注释来帮助我们更好的完成工作。

* 提示和标注

代码注释最基本和最常见的用处就是用来提示和标注代码，告诉别人这是用来干嘛的。

/* Turn off borders for linked images */
img { border: 0; }

* 时间戳和署名

和我们写程序代码一样，是用注释在文件头部留下时间戳，版本号以及编辑者的署名，将更好的帮助我们追踪记录文件的历史记录。

/* Sushimonster  Typography  Styles
     Updated:  Thu 10.18.07 @ 5:15 p.m.
     Author:     Jina Bolton
   —————————————————-*/

* 组织代码

将样式定义按照不同的组别来分组是一个非常好的主意，如果我希望将页首的样式定义放在一起，我会使用这样的注释来帮助我提高代码可读性：

/* HEADER
   —————————————————-*/

* 注释标帜

如果你采用了我上面提及的使用注释来分隔不同分组的样式定义代码的方法的话，那使用注释标帜将是一个非常有用的技巧来帮助你更好的查找代码，迅速准确的定位到你想要的位置。我们可以使用一个特殊的符号（比如 [=]）来作为注释标帜

/* =HEADER
   —————————————————-*/
非常酷的一个小技巧，这样你不用上下拖动，就能迅速通过查找来定位到你想要编辑的位置了，查看更多关于注释标帜。

* 参考索引

虽然不常用，但是也是非常有用的一个注释使用方式就是作为代码的参考索引，比如在文件头部留下使用到的颜色代码：

/* COLORS
   Body Background:        #2F2C22
   Main Text:                     #B3A576
   Links:                              #9C6D25
   Dark Brown Border:     #222019
   Green Headline:            #958944
*/

4. 明确什么时候使用CSS Hack 什么时候使用IE条件注释
有很多关于使用CSS Hack带来的问题，或是使用IE条件注释来解决IE兼容性问题是更佳的方法的文章，以及两者都不支持的文章。以前，我一直认为使用IE条件注释解决这个问题要比CSS Hack来的合适，但是最近通过一些例证，我发现条件注释也不是最合适的解决方案。

原因在于，使用条件注释，必然需要维护同一样式的不同IE版本的副本，这样就带来了工作量的增加，而使用CSS Hack则没有这个问题，因此要具体问题具体分析。

但是不管采用哪种方法，请注意以下两点：

a) 如果使用了条件注释，请在主代码文件中留下注释，提醒自己以及其他设计师，如果修改了此处样式，则需要同时更新其他所有IE版本的样式定义。

b) 如果使用CSS Hack，也请留下注释，标明这里使用哪些Hack，对于什么版本浏览器生效，因为在可以预见的将来，随着浏览器版本的升级，这些Hack很有可能会失效。

5. 组织好你的选择器以及属性声明
切记，切记，请将你的样式表文件组织的结构清晰，我比较倾向于以下的代码组织方式：

reset styles  重置浏览器默认值 
typography styles  文字，版式定义 
layout styles (header, content, footer, etc.)  布局定义 
module or widget styles  模块定义 
etc. 
对于上面的分组之下，我根据元素DOM位置来分组：

any parent styles (containing elements, working outside-in)  容器元素 
block-level element styles (paragraphs, lists, etc.)  块级元素 
inline element styles (links, abbreviations, etc.)  行级元素 
etc. 
再之下，我根据元素类型来分组：

paragraphs  <p> 
blockquotes  <blockquote> 
addresses  <a> 
lists <ul> <dl> 
forms  <form> 
tables  <table> 
最后对于每一个样式定义，我会将属性声明根据不同的类型分组：

positioning (with coordinates) styles 
float/clear styles 
display/visibility styles 
spacing (margin, padding, border) styles 
dimensions (width, height) styles 
typography-related (line-height, color, etc.) styles 
miscellaneous (list-style, cursors, etc.) styles 
很多人喜欢将属性声明按照字母排序，这个就是看个人喜好，但是我喜欢这样的分组方式。

6. 创建CSS Framework
如果你发现你经常创建类似的样式表的话，那你可以创建属于自己的CSS Framework来积累大量的基础样式表，这样在将来可以大大简化你的工作。

screen.css - A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following: 
reset.css - A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.  （我的重置样式表 undohtml.css） 
typography.css - A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color. 
grid.css - A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up). 
print.css - A print CSS file would include your styles you want to be used when the page is printed. 
Blueprint framework 就是一个非常不错的CSS Framework，大家可以看一下。

7. 平衡可读性和代码优化
是将代码优化到极致（比如，没有注释，没有换行，压缩到体积最小），还是保留文档非常好的可读性。这个问题，每个人可以去找属于自己的平衡点。当然最理想的做法是，发布网站的时候再去压缩CSS样式表文件。

8. 熟练掌握你的文本编辑器
不管你是使用textmate，dreamweaver，vim，还是什么，请一定要熟练掌握他们。工欲善其事，必先利其器。

9. 使用版本控制
使用例如SVN或者CVS等版本控制程序来辅助我们更好的维护样式表。（对于我们程序员来说，可能这个再熟悉不过了，推荐使用SVN iloveit）

10. 创建并维护样式表文件指南
如果你想成为一名出色的设计师，坚持这点吧。]]>