译者：alswl

* * * * * * * * * * * 以下为译文 * * * * * * * * * * * * *

项目范围和规模各不相同，他们带来的挑战各不相同一样。作为一个独立的网页设计师，我最大的职责就是负责FlashDen。随着成千上万的活动用户聊天，上传和购物，网站处理着大额的金钱和巨大的流量。

设计，重构，维护和开发团队的工作给了我一些能使事情变得更容易的用用的见解和技巧。而且，就在昨天，我们开始了对网站最大的一次重构，着看上去是一次很好的机会来记录我最有用的7个秘诀。

1. 可维护的设计和代码

我给的第一条也是最条一条秘诀是设计站点保证可以轻松维护。很多时候，当你设计一个站点，你可能为了美学牺牲一些东西。例如，你可能使用一个图片而文字或者样式就可以应付。或者你可能故意使用一个没有空间缩放的菜单结构。当网站变大时，这将将成为一个非常糟糕的设计。

当我两年前建成FlashDen的第一个版本时，我使用图片按钮。他们看起来很漂亮，但同时我被100多个不同的按钮图片库拖累着，更谈不上修改图片了。之后在接下来的几个月中，当一个开发者需要一个新按钮时候他们向我要一个新图片。不用说，我学到这个教训很快，我们切换到一个单独的按钮类，虽然看上去不是很好，但是这种情况更能安心。

可维护性的另一面是考虑站点将会怎样成长和变化。比如，当一个新页面增加时，它到哪里去？我一直想要一个横向的导航栏，但是经过一些尝试，我们限制地使用了加入子栏目的垂直的导航栏，从而加入一个标签结构到页面来保证相关的页面能被归类到一起。我不敢说这是世界上最好的导航栏，但是它肯定能够让我们不用重新设计在一个新的节点加入网站的时候。

所以当你在设计大型站点时候，设法让它变得简单，你会为此而感到高兴的！

2. 找出你的用户群和任务

大型网站网站和小型站点的最大一个区别就是使用网站的不同用户类型的数量。例如在FlashDen上，有买家、作家、访客、管理员和会员。每个用户组都有他们各自不同的目标和任务。有时候他们的任务重叠，但是他们有很大的不同。

一个地方的用户任务在相互对立的观点最好的例子是在一个网页。网站上没有任何一个地方不衔接的每个用户组，并在其他地方是如此的重要，以确保每个人都会有他们想要的。当然，你要小心，在服务一个用户组你不忽略另一个。

在这次最新一次FlashDen重新设计时候，我所作工作最大的地方是主页。我做的第一件事情是给自己列出每个用户组需要做的事情：

1. 买家 – 在FlashDen上购买文件的人
   浏览项目，搜索，访问他们的个人主页，存款，学习使用网站（新买家）
2. 作者 – 在FlashDen上卖商品的人
   与其他会员聊天，在主页上展示他们项目的功能，了解网站的新闻，快速的获取他们的投资搭配和收益
3. 新访客 – 潜在的买家/作者/会员，刚到站点的人
   快速了解到站点是干嘛的，起步教程，查看不同类别的文件和价格
4. 会员 – 不是真正的买家或作者，而是在社区中活跃
   和其他会员聊天，查看站点新闻，浏览文件
5. 管理员/审稿人 – 我们的工作人员，管理文件的批准，主持论坛，参与大部分活动
   快速批准文件，查看最新论坛主题，添加站点新闻

当你知道不同的用户群体想要做什么，那么你可以设计一个网页，解决了他们所有的需要。不用说，这是随着用户组和任务数量指数级增加的困难的任务。在该网站的其他网页，你会经常为部分用户组而苦恼，而在主页上，他们却又都集中在一起。不用怀疑，主页是你设计一个网站时候最重要的一项工作。

在你解决不同需求之前，你需要先考虑用户群。为了做到这个，你需要了解该网站是要实现的目标。

3. 了解网站目标

虽然每个用户组会很自然地认为他们是最重要的，但是你应该根据他们的优先度来判别站点要实现的目标。比如在FlashDen上，我们给候补人员列出下面几条结论：

• 该网站的首要任务是为买家服务。为买家服务可以带来不断的收入，同时也可以为作者群服务。
• 让游客更快的了解网站进而成为会员也是至关重要的。FlashDen还处在一个比较新兴的市场，不断有新竞争对手出现，如何将注册会员变成买家或者作者是相当重要的。
• 创作者是FlashDen的核心部分，他们也是非常重要，和其他用户群不同的是，他们是网站坚定的拥护者。
• 注册会员虽然没有创作者或者买家这么重要，但是他们也在为周边的社群作出贡献。
• 作为雇员，管理员/审稿人是相对最不重要的。

因此，从以上所说可以得出结论，网站服务的的用户需求优先顺序：访客>买家>作者>成员“>管理员。

认识你的网站正在努力实现的却是最终用户线程的缝制任务一起，并告诉你什么你应该尝试把页面上。

理解你的网站目的可以把你的所要作的任务贯穿在一起，并且能告诉你应该在页面上放些什么东西。在每个关键性页面你要能区分识别出用户组、任务和优先级别。对于重要的页面比如主页我慎重的在纸上设计，而一些小的页面则是在脑子里面思考一下。

4. 设计，精炼，精炼，精炼 …

在你找到你的用户组别，任务，网站目标，优先级别等等之后，到了设计的时间了！这是至关重要的步骤，因为在实际操作中，这一步可以大幅降低一些将必要的返工设计工作量。每当我刚开始设计并没有真正分析第一大网站，我已不可避免地要大量的返工，甚至整个屏幕交互界面。

很多设计师喜欢在这点用线框，这可以简单地用线条和框勾勒大约内容应该显示的地方。我个人更喜欢一开始用Photoshop，因为我速度不够快，这样能让我细致地看到细节的改变。我也认为详细细节信息设计比在纸上显示更直观。简单地改变颜色和背景颜色可以使整个网页页面元素立马看上去更为重要。

一旦你有一个怎样的信息需要共同努力粗略的想法，你应该拿出一个工作的设计，一般是确定，然后再精炼，精炼，精炼。我经常会起草5到6相同的外观，然后在之上尝试不同类型、大小、图像，布局的改动，背景等等，看看你对它的直观感受。

不管你觉得第一个布局有多好，我可以保证，在花费一段时间进行数次版本升级之后，你会发现了你原来的版本不是和你最初想到的那么好。有时你甚至抛弃整个设计并重新开始。而如果你有一个良好的基础，然后精炼细化能让你有一个漂亮的成果。

5. 听取别人的意见，自己下最后的主意

任何一个大型的工作中，你都会被其他很多意见所影响。在开始FlashDen工作之前，我曾经与各种网站设计公司合作。期间我也有不幸设计一些大型保险公司和一些政府组织。我说不幸，因为当你到该客户和牵扯很多利益的人打交道，同时在许多当时还不清楚真正的决策权的情况下作出错误决策。这会导致无休止的会议，无穷无尽的变化，并极大的混淆你的眼光。

不管是什么用户，真正重要的只是得到他们的意见。在大多数情况下，他们比你更知道了很多与业务有关的事。但愿他们比你还了解用户，这些知识将能够向你提供建设性的意见。

得到与你一起工作的开发团队的意见也同样重要。在FlashDen我们很幸运，因为有两个开发者在用户界面和可用性设计方面经验丰富。随着他们的投入，和其他团队成员，向最终的产品提出了很多不同的想法。

但到最后，就是你这个设计专家作出最后决定的时候了。如果你有一个难对付的客户这可能会非常棘手，因为这些客户往往认为他们应该作最后的决策。如果是这样的话，你需要想办法向他们解释，灌输并且展示出你的选择会带来最好的收益。;有时候硬着头皮把客户的意见接受，并作为项目中的一个长期建设性功能。

6. 为将来做组织

当您为一个大网站编码设计时，它是真正重要的是反复思考未来的变化。如何管理您的文件和文件夹将极大地影响之后的工作。例如最近我们决定建立一个着重音乐的FlashDen的姊妹网站，即AudioJungle。为了简化，这个网站是将使用相同的HTML，只是改变样式来使它看起来像一个不同的网站。这里有一些事情要记住：

1. 整理一个良好的文件夹结构
   脚本，样式表，界面的图片，图片内容，等等，都需要分开存放。如果一个小网站，你也许可以把这些东西杂糅到一起，但在大型站点中，找到你需要的内容变得更为重要。
2. 给你的文件使用有规则、良好的命名规范
   没有什么比按名字“gd_l3.jpg”寻找一块图片更为糟糕。你怎样做即基本是个人的事，但我觉得使用通用命名描述性文件名的前缀会有更大的帮助。比如：我可能会给头部的每张图片加上前缀'header_'，每一个背景加上'bg_'，头部菜单中的背景可能称为'header_bg_menu.jpg'。前缀有一个好处，当您的文件按名称排序，他们都出现在一起。
3. 使用Subversion
   这是被我们的开发人员逼得，但幸亏我们用了它！Subversion可以跟踪文件和档案的变更，同时可以防止覆盖其他设计者/开发者在同一个项目中的文件。这需要一些时间来适应，但即使没有开发者使用它的原因，在HTML / CSS的设计上用它也是值得的。还不知道Subversion？赶紧去使用吧。
4. 在你写HTML和CSS深入思考写法
   很容易写出垃圾HTML和CSS代码，而且很难清除它们来获得原先版本。经过4个重设计，我仍然使用很多相同的CSS文件，必须规划地清理不再使用的或者带来混淆布局定义CSS类。通过大量的意见，甚至可能是多个样式表，并确保你有良好的命名风格！ 
5. 早点开始浏览器差异兼容工作
   我在FlashDen这方面的工作听失误的，至今我们已经为此付出了很大的代价。我最初的布局设计在IE7上，直到我们完成整个网站才发现忽略了IE6。之后我们已经加入IE浏览器条件式，和CSS Hack和其他解决方法。在你建立一个庞大的站点时候，在页面上只有少量元素时候可以更轻松的处理浏览器兼容性，，所以不要重蹈覆辙！

7. 确保可以简单的扩展你的样式表

网站越大，设计师就越有可能看到或修改每一个单独页面。如果你是一个大型网站上唯一设计师 – 比如我 – 你可能不想在每个页面上重定义。因此，多花精力在样式表上，可以通过默认的属性让页面看起来不错。

• 确保你定义了<input>，<strong>等元素的默认样式。
  这样的页面可以自动呈现的不错。如果你想指望别人做<strong class="my_bold">这样的事情，那么不可避免的会和其他页面产生差异
• 创建可让开发人员重复使用的元素
  比如在FlashDen上我们有一个CSS表类称为“general_table”，可以确保一个不错的填充数据时候使用的样式。当我有机会设计网页样式时候，我可以使用个性的表和数据高亮呈现的类型，但是很少会有开发人员吧页面制作成全能的样式去使用。
• 请确保您的网页布局有一个不错的结构，即使他里面只有文字。
  总是会有些网页还没能往里面添加图像，可能看起来有点沉闷。通过使用诸如标题样式，工具条等等，你可以确保他们也很美观，并且有一定的视觉风格。有关FlashDen在大多数例子中，我们文本块总结如下：

<fieldset>
<legend>Heading</legend>
Content
</fieldset>

默认情况下，文字外面包围着一个漂亮的边框和标题。这样很容易和开发人员协调工作，文字和表现有了不错的分离，使之看起来更具可读性。我们同时也有一个侧边栏组件，仅仅把文字内容额外包起来，但是这能使网页看起来更加直观。

经过设计师的设计，每一个页面基本都是优化过的，但是他们可能不是那么健壮，它仍然看起来很专业和统一。

你的观点呢

所以这些都是我的秘诀，如果你在更大的站点从事你的工作，发表你的评论吧！

• WordPress代码高亮插件指南[译文]
• 使用Firebug和FirePHP调试PHP[译文]

PS:之前已经有过3篇相关毕设的文章：

CakePHP的全局变量

FMS的80端口占用

SWFObject 一款JavaScript的Flash检测与插入模块

—- 正文开始 —-

问题背景

系统要实现一个操作，即每次向同一个url 请求一个GET方法获取一个xml文件，这个xml文件记录着聊天数据并且是即时生成的。当用FireFox或者Chrome请求时候都能获得正确的数据，而IE则常常出现无法获取实时的XML数据。

而如果在地址栏中填入 http://localhost/AzaAjaxChat/src/Chat/getXml?messageId=41 这个原始的XML文件地址，就可以获取正确的XML文件。并且在下次IE 的 HTTPRequest请求时候就正常了。看来问题出在IE自身的缓存上面。

解决方法

1.使用URL参数随机事件

在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数，在javascript发送的URL后加上t=Math.random()。

当然，不是直接把t=Math.random()拷贝到URL后面,应该像这样:

url = url + "& amp;" + "t=" + Math.random();

2.修改Header缓存时间

在XMLHttpRequest发送请求之前加上 XMLHttpRequest.setRequestHeader("If-Modified-Since","0")。一般情况下,这里的 XMLHttpRequest 不会直接使用。

你应该可以找到这样的代码
XXXXX.send(YYYYYY);

那么,就把它变成
XXXXX.setRequestHeader("If-Modified-Since","0");
XXXXX.send(YYYYYY);

a Sample

我选择的是第一种方法，我觉得这种更为直观。我的具体代码如下（使用jQuery）：

jQuery.get("http://localhost/AzaAjaxChat/src/Chat/getXml", {
	messageId: aacGlobal.currentMessageId,
	version: Math.random()
}, getRemoteDataCallBack);

• AzaAjaxChat笔记-实现
• SWFObject 一款JavaScript的Flash检测与插入模块
• AzaAjaxChat笔记-框架
• CakePHP的全局变量
• 开发跨浏览器JavaScript时要注意的问题
• jQuery图片圈人功能在ASP.NET下的改进
• 关于禁用Javascript的讨论

Flash在各个浏览器中的实现始终是个麻烦的事情，什么Object Embed~，似乎没有什么标准的格式，一般都要做一些浏览器Hack，我对这些深痛恶绝，在泡了一下午前端相关的论坛后，偶然发现一款JavaScript交互的神器。

SWFObject: 基于Javascript的Flash媒体版本检测与嵌入模块

SWFObject是一个用于在HTML中方面插入Adobe Flash媒体资源（*.swf文件）的独立、敏捷的JavaScript模块。该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外，它能够避免您的 HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。
（即：通过text/html应答页面， 而非application/xhtml+xml）

官方在Google Project Host中，下载的代码包中有一个简单的Example，也包含了SWFObject的源码，感兴趣的同学可以研究一下。

相关链接：

swfobject – Project Hosting on Google Code

SWFObject中文的帮助文档

如果你也像我这样为Flash发愁，不妨试试这个小巧的js~

• AzaAjaxChat笔记-实现
• IE XML 缓存问题
• AzaAjaxChat笔记-框架
• CakePHP的全局变量
• 开发跨浏览器JavaScript时要注意的问题
• jQuery图片圈人功能在ASP.NET下的改进
• 关于禁用Javascript的讨论

之前很多次接触过Balsamiq Mockups 这款界面设计利器（delicious最早收藏是在09年5月），也曾经试用过Demo版本，因为我本身是后台码代码的，所以用到UI设计的机会并不多，也没有特意去申请Mockups的许可证。

介绍

Balsamiq Mockups 提供了 9 大类共 50 多个控件，涵盖了几乎所有常用的 UI 控件。不管是桌面软件、手机软件还是 Web 站点，都能搞定。且软件极易上手，如上图的豆瓣新主页，是我首次使用 Balsamiq Mockups 时随手画的，仅用 15 分钟。另外必须一提的是，Balsamiq Mockups 涂鸦式的手绘风格，能使人集中注意力，专注到于原型的原始目的，而不是对外观挑三拣四。

via Balsamiq Mockups – 产品原型设计工具

功能

1. 操作方面，拖拽，控件分组，甚至元素之间的对齐都做得很贴心；
2. 预制了很多界面元素，从简单的输入框，下拉框，浏览器主要元素，到经常用得到的导航条，日历，表格，到复杂的Tag Cloud，Cover Flow, 地图，WYSWYG的格式工具栏等，有了这些不用从头画起，往往比用白板都快；
3. 界面元素的修改很简单，比如导航条的几个标签页的label，就是用逗号分隔的文字，下拉框的选项就是分行的文字；
4. 使用xml语言来记录和保存界面元素和布局，
   1. 这使得每个设计都能被很好得放进SVN，Git，和CVS等工具中进行管理和跟踪；
   2. 可以设计复杂的界面元素，保存后，以后可以重复使用（包括修改）；
5. 可以将设计导出成PNG格式的图片；
   
6. 可以用命令行进行导出操作，这样就能让我写个脚本，从svn里checkout某个目录下的所有设计文件后，导出图片，打包后用邮件发到项目经 理，工程师甚至客户那；
7. 跨平台，Balsamiq Mokups是用Flex和Air实现的，所以在Mac OS, Linux和Windows下都能使用；
8. 不仅仅有桌面版本，还有能集成在Confluence，JIRA，和XWiki中的版本，使得异地在线协作更方便有效；

via 推荐一款界面设计工具 Balsamiq Mockups

试用

点击myBalsamiq, the Balsamiq Mockups Web App | Balsamiq 即可尝试一下在线版本，看看它合不合你胃口。

点击Balsamiq Mockups For Desktop | Balsamiq 可以下载桌面Demo版本。这是AIR下的软件，需要AIR环境支持。

获取免费的版本

不过让国内用户不习惯的是，这款软件定价为 $79 ，偏高。当然 Balsamiq Studios 也为用户提供了 5 种免费获得 license key 的机会，其中之一就是针对科技/软件 Blogger 或媒体从业者，鼓励这类用户通过写 Blog 口碑传播的方式帮助 Balsamiq Mockups 营销。写完本文，我也会尝试向作者申请一个 license key。

via 产品原型设计软件Balsamiq Mockups | 黄海均的互联网志

PS：我对作者这种做法表示很欣赏，通过一些可行的手段支持正版，同时提高了产品的口碑。

更多

使用Napkee插件可以将设计导出为Html+CSS+JS或者Flex格式，详情请参见Napkee – 导出Balsamiq Mockups网页原型

2010-04-14 Update:
已拿到作者发送注册码～～～终于到了。。。

• char nchar varchar nvarchar 区别
• VS2005无法创建或打开”智能设备”项目的一个问题的解决方法
• IBM publib 最强大资料中心
• 解决windows server 2003不认U盘或移动硬盘
• 恼人的美工
• 给WordPress加上robots.txt
• 下雨天
• WordPress的中文主题
• Delphi学习笔记02
• Ajax 好玩的拖拽（顺便测试chrome下文字编辑的代码高亮）

在99款高质量免费(X)HTML/CSS模板-DIV+CSS模版下载 | 彬Go看到很多款极佳的网页设计，反复删选后，决定选用一款Flower Shop的作品。

原始预览：http://csscreme.com/freetemplates/flower_shop/
原始下载：http://csscreme.com/tpsaveas.php?tp=flower_shop.zip

花了1个小时汉化了页面，想了想，还是把这个汉化发布吧。

页面预览：http://labs.dddspace.com/other/html/fenflowershop/
下载：http://workspace4alswl.googlecode.com/files/Feng's_Flower_Shop_v_1_1.zip

• iNove下的heading样式修改
• 测试在Google Reader下使用Flash
• AjaxControlToolkit中CalendarExtender样式修正

晚上花了一点时间稍微研究了一下跨浏览器开发JavaScript时要注意的问题，的确好多学问。我对JavaScript的认识还太浅，得花时间做一些功课了。

顺便推荐一本JavaScript书《JavaScript语言精粹 》，是大名鼎鼎的“O’Reilly”系列，我只看了试读的第一章节，斗胆推荐
在随网之舞的《JavaScript语言精粹》 @ 随网之舞有更详细的介绍。

传送门：
购买《JavaScript语言精粹 》via China-Pub
评论 《JavaScript语言精粹》via 豆瓣
样章阅读：第一章. 精华 第十章. 优美的特性

以下文章没有URL出处，作者 liqun，来源：www.comecode.com（连接已失效）

××××××××××想回家的分割线××××××××××

1、向表中追加行

定义table时使用tbody元素，以保证包括IE在内的所有浏览器可用
例：定义如下一个空表
<table id=”myTable”>
      <tbody id=”myTableBody”></tbody>
</table>
向这个表中增加行的正确做法是，把行增加到表体，而不是增加到表。
Var cell = document.createElement(“td”).appendChild(document.createTextNode(“foo”));
Var row = document.createElement(“tr”).appendChild(cell);
Document.getElementById(“myTableBody”).appendChild(row);
*IE中需要先创建行，再创建列，再创建内容

2、设置元素的样式

Var spanElement = document.getElementById(“mySpan”);
//下面写法保证出IE外，所有浏览器可用
spanElement.setAttribute(“style”,”font-weight:bold;color:red;”);
//下面的写法保证IE可用
spanElement.style.cssText=”font-weight:bold;color:red;”;

3、设置元素的class属性

Var element = document.getElementById(“myElement”);
//下面的写法保证除IE外，所有浏览器可用
Element.setAttribute(“class”,”styleClass”);
//下面写法保证IE可用
Element.setAttribute(“className”,”styleClass”);

4、创建输入元素

Var button = document.createElement(“input”);
//单行文本框、复选框、单选框、单选钮、按钮需要此属性区别
Button.setAttribute(“type”,”button”);
Document.getElementById(“formElement”).appendChild(button);

5、向输入元素增加事件处理程序

Var formElement=document.getElementById(“formElement”);
//所有浏览器可用
formElement.onclick=function(){doFoo();};
//除IE外，所有浏览器可用
formElement.setAttribute(“onclick”,”doFoo();”);

6、创建单选钮

If(document.uniqueID){
      //Internet Explorer
      Var radioButton=document.createElement(“<input type=’radio’ name=’radioButton’ value=’checked’>”);
}else{
      //Standards Compliant
      Var radioButton=document.createElement(“input”);
      radioButton.setAttribute(“type”,”radio”);
      radioButton.setAttribute(“name”,”radioButton”);
      radioButton.setAttribute(“value”,”checked”);
}

7、insertRow,insertCell,deleteRow

在IE中，table.insertRow()如果没有指定参数，则在表格后面添加行，默认参数位-1；如果在Firefox中，则一定要加参数，如：insertRow(-1)。

• AzaAjaxChat笔记-实现
• IE XML 缓存问题
• SWFObject 一款JavaScript的Flash检测与插入模块
• jQuery图片圈人功能在ASP.NET下的改进
• 关于禁用Javascript的讨论

原始Code:

运行环境： 1.jQuery支持 2.DragResize类（czy1121作者写的一个js类，更多信息可以参照《Javascript Resize和Drag类,基于jQuery》）

样式：

#enclose-wrapper {
	position: relative;
	z-index: 0;
	border: 4px solid #DDD;
	background-color: #FFF;
}
#form-add-tag {
	margin-left: 8px;
	position: absolute;
	padding: 5px 3px;
	border: 1px solid #005EAC;
	float: left;
	display: inline;
	background-color: #FFF;
}
#select-area-box {
	position: absolute;
	border: 5px solid #D8DFEA;
	float: left;
}
#select-area {
	position: relative;
	padding: 0;
	border: 2px solid #005EAC;
	z-index: 15;
	cursor: move;
	background: url(spacer.gif) no-repeat -1px -1px;
}
#select-area-box span {
	position: absolute;
	border: 1px solid #005EAC;
	width: 8px;
	height: 8px;
	background-color: #FFF;
	font-size: 0;
	z-index: 18;
}
#select-area-box span.north-west-resize {
	cursor: nw-resize;
	left: 0;
	top: 0;
	margin-left: -1px;
	margin-top: -1px;
}
#select-area-box span.north-east-resize {
	cursor: ne-resize;
	right: 0;
	top: 0;
	margin-right: -1px;
	margin-top: -1px;
}
#select-area-box span.south-west-resize {
	cursor: sw-resize;
	left: 0;
	bottom: 0;
	margin-left: -1px;
	margin-bottom: -1px;
}
#select-area-box span.south-east-resize {
	cursor: se-resize;
	right: 0;
	bottom: 0;
	margin-right: -1px;
	margin-bottom: -1px;
}
#enclose-wrapper ul#tag-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	float: left;
}
#enclose-wrapper ul#tag-list li {
	list-style: none;
	float: left;
}
#enclose-wrapper ul#tag-list li a {
	color: #F60;
}

js实现代码：

var photoTag = {
    show: function(left, top, width, height, show_resize_square) {
        $('#select-area-box').css({
            'left': left - 7,
            'top': top - 7
        })
        $('#select-area-box').width(width + 4).height(height + 4).show();
        $('#select-area').width(width).height(height);
        if (show_resize_square) $('#select-area-box span').show();
        else $('#select-area-box span').hide();
    },
    hide: function() {
        $('#select-area-box').hide();
    },
    add: function(tag_name, tag_value, left, top, width, height) {
        var json = {
            id: Math.floor(Math.random() * 10000)
        };
        var args = left + ',' + top + ',' + width + ',' + height;
        var li = '

';         li += '';         li += '(删除)';         li += '
';         li += '


';
        $('#tag-list').append(li);
    },
    remove: function(id, li) {
        li.parentNode.removeChild(li);
    }
};
$(function() {
    var is_started = false;
    // 选区左上角,和高宽
    var info = {
        'left': 0,
        'top': 0,
        'width': 0,
        'height': 0
    };
    var origin = {
        x: $('#enclose-wrapper').offset().left + (parseInt($('#enclose-wrapper').css('border-left-width')) || 0),
        y: $('#enclose-wrapper').offset().top + (parseInt($('#enclose-wrapper').css('border-top-width')) || 0)
    };
    var dnr = new DragResize($('#select-area-box')[0], {
        minWidth: 20,
        minHeight: 20,
        bound: {
            left: 0,
            top: 0,
            right: 9999,
            bottom: 9999
        },
        callback: function(i) {
            // 7为左(上)边两个边框的宽度的和, 4为左右(上下)篮色边框宽度的和
            info = {
                'left': i.left + 7,
                'top': i.top + 7,
                'width': i.width - 4,
                'height': i.height - 4
            };
            $('#select-area').width(info.width).height(info.height);
            // 将添加标签的表单定位在选区的右边
            $('#form-add-tag').css({
                'left': i.left + i.width + 10,
                'top': i.top
            });
        }
    });
    // 拖动选区
    $('#select-area').mousedown(function(e) {
        dnr.drag(e);
    });
    // 调整选区大小
    $('#select-area-box span').mousedown(function(e) {
        dnr.resize(e, this.className.replace('-resize', ''));
    });
    // 在图片上点击一下,开始获取选区
    $('#photo-wrapper img').mousedown(function(e) {
        if (is_started) return;
        is_started = true;
        var left = e.pageX - origin.x - 50 - 7;
        var top = e.pageY - origin.y - 50 - 7;
        info = {
            'left': left + 7,
            'top': top + 7,
            'width': 100,
            'height': 100
        };
        photoTag.show(info.left, info.top, info.width, info.height, true);
        $('#form-add-tag').show().css({
            'left': left + 100 + 4 + 10,
            'top': top
        });
    });
    // 鼠标进入图片内时,显示选区
    $('#photo-wrapper img').bind('mouseenter',
    function(e) {
        if (!is_started) return;
        photoTag.show(info.left, info.top, info.width, info.height, true);
    });
    // 确定添加一个标签,或取消
    $('#btn-add-tag, #btn-cancel').click(function(e) {
        if (this.id == 'btn-cancel') {
            $('#form-add-tag, #select-area-box').hide();
            is_started = false;
            return false;
        }
        if (!$('#tag-name').val()) {
            alert('标签名不能为空！');
            return false;
        }
        // 添加标签
        photoTag.add($('#tag-name').val(), $('#tag-value').val(), info.left, info.top, info.width, info.height);
        // 隐藏选区和表单
        $('#form-add-tag, #select-area-box').hide();
        is_started = false;
    });
    photoTag.hide();
});

Html代码

<div id="enclose-wrapper">
  <div id="photo-wrapper" style="margin:15px auto;text-align:center;"> <img id="photo" src="heroes_s3_peter.jpg" /> </div>
  <div>
    <ul id="tag-list">
      <li>相片中：</li>
      <li> <span onmouseover="photoTag.show(0,0,85,66);" onmouseout="photoTag.hide();">aaa</span> (<a href="javascript:;" onclick="photoTag.remove('342',this.parentNode);" onmouseover="photoTag.show(0,0,85,66);" onmouseout="photoTag.hide();">删除</a>) </li>
    </ul>
  </div>
  <div id="select-area-box">
    <div id="select-area"></div>
    <span></span><span></span> <span></span><span></span> </div>
  <div id="form-add-tag" style="display:none;"> 输入标签：

    <input id="tag-name" name="tag-name" type="text"  />

    <button id="btn-add-tag" type="button">确认</button>
    <button id="btn-cancel" type="button">取消</button>
  </div>
</div>

改进

在Asp.NET下这段代码存在几个问题（毕竟这段代码应该只能算是Demo）：1.无法和服务器进行数据交互。2.无法在ASP.NET环境下获取相关id。3.只能提交到服务器一个“标签”，不足以完成需求。

修改后js:

var photoTag = {
    show: function(left, top, width, height, show_resize_square) {
        $('#select-area-box').css({
            'left': left - 7,
            'top': top - 7
        })
        $('#select-area-box').width(width + 4).height(height + 4).show();
        $('#select-area').width(width).height(height);
        if (show_resize_square) $('#select-area-box span').show();
        else $('#select-area-box span').hide();
    },
    hide: function() {
        $('#select-area-box').hide();
    },
    add: function(tag_name, tag_value, left, top, width, height) {
        var json = {
            id: Math.floor(Math.random() * 10000)
        };
        //$.getJSON('add_tag.php', {'name':tag_name,'left':left,'top':top,'width':width,'height':height}, function(json) {
        //reflesh tag list
        //    if(json.message) alert(json.message);
        //    if(json.error == 0) {
        var args = left + ',' + top + ',' + width + ',' + height;
        var li = '

';         li += '';         li += '(删除)';         li += '
';         li += '


';
        $('#tag-list').append(li);
        //    }
        //});
    },
    remove: function(id, li) {
        //$.getJSON('remove_tag.php', {'tag_id':id}, function(json) {
        //reflesh tag list
        //    if(json.message) alert(json.message);
        //    if(json.error == 0)
        li.parentNode.removeChild(li);
        //});
    }
};
$(function() {
    var is_started = false;
    // 选区左上角,和高宽
    var info = {
        'left': 0,
        'top': 0,
        'width': 0,
        'height': 0
    };
    var origin = {
        x: $('#enclose-wrapper').offset().left + (parseInt($('#enclose-wrapper').css('border-left-width')) || 0),
        y: $('#enclose-wrapper').offset().top + (parseInt($('#enclose-wrapper').css('border-top-width')) || 0)
    };
    var dnr = new DragResize($('#select-area-box')[0], {
        minWidth: 20,
        minHeight: 20,
        bound: {
            left: 0,
            top: 0,
            right: 9999,
            bottom: 9999
        },
        callback: function(i) {
            // 7为左(上)边两个边框的宽度的和, 4为左右(上下)篮色边框宽度的和
            info = {
                'left': i.left + 7,
                'top': i.top + 7,
                'width': i.width - 4,
                'height': i.height - 4
            };
            $('#select-area').width(info.width).height(info.height);
            // 将添加标签的表单定位在选区的右边
            $('#form-add-tag').css({
                'left': i.left + i.width + 10,
                'top': i.top
            });
        }
    });
    // 拖动选区
    $('#select-area').mousedown(function(e) {
        dnr.drag(e);
    });
    // 调整选区大小
    $('#select-area-box span').mousedown(function(e) {
        dnr.resize(e, this.className.replace('-resize', ''));
    });
    // 在图片上点击一下,开始获取选区
    $('#photo-wrapper img').mousedown(function(e) {
        if (is_started) return;
        is_started = true;
        var left = e.pageX - origin.x - 50 - 7;
        var top = e.pageY - origin.y - 50 - 7;
        info = {
            'left': left + 7,
            'top': top + 7,
            'width': 100,
            'height': 100
        };
        photoTag.show(info.left, info.top, info.width, info.height, true);
        $('#form-add-tag').show().css({
            'left': left + 100 + 4 + 10,
            'top': top
        });
    });
    // 鼠标进入图片内时,显示选区
    $('#photo-wrapper img').bind('mouseenter',
    function(e) {
        if (!is_started) return;
        photoTag.show(info.left, info.top, info.width, info.height, true);
    });
    // 确定添加一个标签,或取消
    $('#btn-add-tag, #btn-cancel').click(function(e) {
        if (this.id == 'btn-cancel') {
            $('#form-add-tag, #select-area-box').hide();
            is_started = false;
            return false;
        }
        if (!$('#tag-name').val()) {
            alert('标签名不能为空！');
            return false;
        }
        // 添加标签
        photoTag.add($('#tag-name').val(), $('#tag-value').val(), info.left, info.top, info.width, info.height);
        // 隐藏选区和表单
        $('#form-add-tag, #select-area-box').hide();
        is_started = false;
    });
    photoTag.hide();
});

Html代码：

<div id="enclose-wrapper">
  <div id="photo-wrapper">
    <asp:Image ID="ImgPhoto" Visible="false" runat="server" />
  </div>
  <div>
    <ul id="tag-list">
    </ul>
  </div>
  <div id="select-area-box">
    <div id="select-area"> </div>
    <span></span><span></span><span></span><span></span> </div>
  <div id="form-add-tag" style="display: none;"> 名称：
    <input id="tag-name" name="tag-name" type="text" />

    数值：
    <input id="tag-value" name="tag-value" type="text" />

    <button id="btn-add-tag" type="button"> 确认</button>
    <button id="btn-cancel" type="button"> 取消</button>
  </div>
</div>

这边的主要修改在于把框子的右边的内容增加为名称和数值，方便数据的识别。

后台ASP.NET文件读取

string[] fields = Request.Params.GetValues("photoField");

这里呢，由于上传的元素name相同，都是photoField，所以通过Params.GetValues()就可以取出string数组，这样就能获取所有数据了。数据格式是"ddl:小楠,x:98.88333129882812,y:146,width:100,height:100"这种形式，依靠","分割。

相关下载

DragResize.js template.js css.css

• AzaAjaxChat笔记-实现
• IE XML 缓存问题
• SWFObject 一款JavaScript的Flash检测与插入模块
• 开发跨浏览器JavaScript时要注意的问题
• 数落一下校内
• GAE+校内App初接触
• 当Google APP Engine遇上校内
• 校内更名为人人
• 校内网日志导入功能
• 校内踩踩小工具v0.1

我现在使用的其中一款控件叫做CalendarExtender，其实是一个DatePicker（日期选择器），这个控件可以直接在Input控件上添加“扩展程序”，就完成了所有工作。

让我意外的是，这个控件在我的页面上工作时候样式似乎有些不正常。

页面漂移了！我仔细检查了FireBug，发现下面的样式中的padding影响了其td。(页面可不是我设计的“`)

如果修改CSS，就带来了大量的页面需要修改class/id，所以我只能修正CalendarExtender。（话说人家jQuery在这儿丝毫不受影响，全部元素都覆盖了样式，AJAX Control Toolkit在样式上还是不如jQuery）

我在CalendarExtender外面包了一层div，再覆盖CalendarExtender的td属性。

Html代码：

<div>
<asp:TextBox ID="TbBirthday" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="TbBirthday_CldEx" runat="server" Enabled="True" TargetControlID="TbBirthday" FirstDayOfWeek="Monday" Format="yyyy-MM-dd" PopupPosition="BottomRight">
</cc1:CalendarExtender></div>

CSS代码：

/*bugs for CalendarExtends*/
.content .table .calendar td {/*.calender td 前的类是我网页中的上层元素*/
margin: 0px;
padding: 0px;
}

这样一来，就可以解决这个问题了。

最后，附送一个汉化控件的技巧：其实下载后，已经有语言包在下载包里面，之所以没有启用中文，是因为没有打开ScriptManager的全球化控制，把ScriptManager的EnableScriptGlobalization改为true即可。

Asp.NET代码：

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True">
</asp:ScriptManager>

• flower shop 汉化
• ThisHouse房屋销售系统
• AjaxControlToolKit控件介绍[转载]
• iNove下的heading样式修改

Google了一下，找到一篇06年的帖子。当客户端把Javascript禁用后，猛击这里打开

最让我吃惊的是这篇神奇的帖子从06年被讨论到09年，从挖坟N次，好狠…

摘录部分语句如下：

所以我会做一个纯HTML的首页，告诉人家不要屏蔽javascript，不要屏蔽ActiveX，不要…………:( :(

看看Gmail怎么做的。我觉得那就是答案（的一种）。

禁止JS上在功能的使用上致少不该受到影响，但是国内的许多网站不去考虑这个。　只是盲目的跟风，　什么AJAX、什么体验，很多都是建立在JS上的，一旦使用的浏览器不支持JS，就什么都没了。google做得不错，可是国内一些所谓的门户网站，像sina\sohu\163\yahoo或多或少都存在一定的问题，这些站的首页或许没什么问题，但看看其它的页面就知道。　既然浏览器提供了禁用JS、禁用COOKIE的功能，那我们就不得不考虑禁用后对我们的影响。

CJJ 老是走极端。
什么网站能满足１００％的用户需要？
GOOGLE搜索，只能说第一页的排序满足８０％的人的需要。
所以，做一个检查，低于１０％的人没有打开JS，就不用专为他们搞一个版本了。
什么用户都想抓住，往往什么用户都抓不住。
当你的消耗和价值不相等的时候，选择放弃，是最好的解决方案。
很多事，不是人们不想做。而是在商业环境下，不允许这样去做。
当然，追求完美是我们的目标，如果能在条件许可的情况下，可以做这样的工作。
但现在网站，往往都没有这样的许可。

我支持蓝色。

我认为是这样的：

一个运营网站为主导思想的人（比如蓝色）不应该赞同这个问题，关闭JS 和 Cookies的人实在太少，缺了这个东西，说明他们不在乎用户体验，他在网上寸步难行。
而一个以技术为主导思想的人（比如技术总监），就必须考虑一下这个问题。

而最关键的问题是： [color=Blue]他是你的目标客户吗？[/color]

从技术角度讲，解决这个问题不难。现在争论的焦点是：是否有必要去做。
答案很简单： 如果你的人力成本允许，并且你在乎这部分变态的人，就去改善把～

Google这么做就是考虑到这个因素。总体来说这个问题不是一个问题，而是一个普遍问题：

如果用户关闭JS怎么办？
如果用户不支持Cookies怎么办？
如果用户没有安装flashpleyer怎么办？
如果用户使用的是 IE5怎么办？
如果用户是 800*600分辨率怎么办？
如果用户是 FF或者OP或者其他浏览器怎么办？
如果用户视力障碍怎么办？
如果用户没有耳机或音箱怎么办？

哦……你去死把～～天哪～

呵呵，现在有多少网站用的em呢，我想大多是px吧，那些中老年人只有戴老花镜上网咯。。。。

说用户体验性，我想还是要针对人群来说，大家都在这里谈论什么js，css。可是你的最终用户会谈论什么呢？处于这个领域，懂这些技术，你会去说，会去讨论，可用户不会关心这些吧，一些普通的网民谁会自己主动去把js禁用掉，他们就不知道这些。也许他们关注的只是我要找的信息好不好找，你这页面我看舒服不舒服，你这里速度是不是很快……
如果像某些同志那样的要考虑没有css，js，flash等等该怎么去做网页，那可以假想一下做出来的东西会是什么样子的，我说不好，也没尝试过。
现在的这技术，那技术是为了什么而出现的呢，某位同学比喻的很好：某天砍掉自己的脚，会问我怎么不会走路了呢…….
话又说回来，做web开发本来就是个敏捷性要求很高的开发，我们把过多的精力放在那些边边角角的问题上，会得不偿失。
针对你的用户去处理问题….

=====注意时间！！！====
ujam 发表于 2009-2-18 17:38
js很重要，现在js正在越来越受重视中，开源库jquery,prototype这些都是随着时代的变化而产生的，打个比方js版星际争霸，都比软件版的小,占用空间小，跨平台，所以我觉得以后的软件会网页化。
网页化还可以减少成本

• AzaAjaxChat笔记-实现
• IE XML 缓存问题
• SWFObject 一款JavaScript的Flash检测与插入模块
• 开发跨浏览器JavaScript时要注意的问题
• jQuery图片圈人功能在ASP.NET下的改进

本来关于Ajax的学习可以告一段落，原因是看的一本国内的教材有点错误，耗了好多时间才改对，让我对Ajax的热情稍微降低

不过很“可惜”的是，今天在China-pub上看到一本五星评价的书，《Ajax实战》，抱着试一试的态度，居然在图书馆找到了这本书。

略微一看，是ajaxcn.org做的翻译，还是不错的，而且是Ajax领域的开山之作，读完前言，又激发我读下去的乐趣。

在此感谢矿大的图书馆，总是留下最后一本书给我借，谢谢““

链接地址：

Ajax实战:实例详解 全场购物满58元免配送费！

　进入免费试读

精彩评论

• amazom    评论： 来自Ajax中国的读者的书评： 本书是Ajax实战系列中的一本，正如前言所说，《Ajax in Practice》是“第二代”的Ajax图书，相比上一代如《A..
• uf    评论： 知识点的讲述简明扼要，论述清楚 ，没有浪费太多篇幅，但是问题描述的很清楚。适合具备一定基础的人学习 ，能巩固和更新知识结构，有大..

点击看大图

市场价 ： ￥59.00 普通会员 ： ￥47.20 1-3星会员： ￥46.02 4-5星会员： ￥44.25(75折) 校园优惠价 ： ￥44.25(75折)     (马上了解) 加入教材预订单 new   （50天教材预留服务） 选择购买数量(更多数量请在购物车中修改) 购买 团购 收藏 全场购物满58元免配送费！

基本信息

【评　　价】 (共 11 条) 参与评论

【原 书 名】 Ajax in Practice

【原出版社】 Manning Publications

【作　　者】(英)Dave Crane;(美)Bear Bibeault;Jord Sonneveld [同作者作品] [作译者介绍]

【译　　者】 贺师俊;许超;金擘[同译者作品]

【丛 书 名】 图灵程序设计丛书

【出 版 社】 人民邮电出版社      【书 号】 9787115187659

【出版日期】 2008 年11月 【开 本】 16开 【页 码】 382      【版 次】1-1

【所属分类】

计算机 > 软件与程序设计 > AJAX

• 新手入厨好书-《从零开始学下厨》
• 最近在看的书
• Java入门好书《Java JDK6学习笔记》
• Struts2中Ajax的使用
• 关注一下Ext JS
• Ajax起步：使用DOM解析XML
• Ajax 好玩的拖拽（顺便测试chrome下文字编辑的代码高亮）