<![CDATA[我遇见你]]> http://www.imeetyou.net/ zh-cn PBlog2 v2.4 我遇见你 http://www.imeetyou.net/images/logos.gif http://www.imeetyou.net/ 我遇见你 http://www.imeetyou.net/article.asp?id=466 <![CDATA[DIV上中下布局高度自适应的研究[转]]]> zyj10222@126.com(admin) Tue,15 May 2012 10:48:50 +0800 http://www.imeetyou.net/default.asp?id=466     在采用基于DIV+CSS的布局开发时，经常需要考虑各种浏览器版本的兼容性问题。
    常用的布局模式主要包括：左中右、上中下，以及两种模式的结合。
    在早期的开发，一般都采用Table标记的方式实现。
    当尝试采用基于DIV的模式，发现一切都变的似乎没那么简单了。特别是浏览器的兼容性问题，更加突出了。
二、需求
    本文只讨论上中下布局模式的实现，关于左中右模式的实现，相比较来说要简单得多了。如果时间充，我会另文详述。
    1.上部（top）Div高度固定100px，宽度100%；
    2.下部（footer）Div高度固定100px，宽度100%；
    3.中部（middle）DIV高度根据屏幕高度，自适应充满，宽度100%；
    4.用纯DIV+CSS实现，不采用脚本计算高度的方式；
    5.调整浏览器大小时，中部DIV能随着屏幕高度自适应。
三、HTML部分
    本部分非常简单，只是定义了三个DIV，分别对应：top、middle、footer
    <div id="header">
        抬头</div>
    <div id="middle">
        1页中<br />
        2页中<br />
        3页中<br />
        4页中<br />
        5页中<br />
        6页中<br />
        7页中<br />
        8页中<br />
        9页中<br />
    </div>
    <div id="footer">
        页脚
     </div>
四、CSS实现
    为了便于理解实现原理，分两部分说明：
    1.IE6下的实现
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
padding:100px 0;  
width:100%;
height:100%;
overflow:hidden;
}
#header{
position:absolute;
top:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
#middle{
position: relative;
top:-100px;
height:100%;
  
bottom:100px;
width:100%;
background:#ffc;
text-align:center;
overflow: auto;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
</style>  
    2.IE7、IE8下的实现
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
overflow:hidden;
}
#header{
position:absolute;
top:0;
width:100%;
height:100px;
background:#ccc;
}
#middle{
position: absolute;
top:100px;
height:auto;
bottom:100px;
width:100%;
background:#ffc;
text-align:center;
overflow: auto;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
</style>
五、全部CSS代码
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{

padding:0 !important;

padding:100px 0;
  
width:100%;
height:100%;
overflow:hidden;
}
#header{
position:absolute;
top:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
#middle{

position: absolute!important;
top:100px!important;
height:auto!important;

position: relative;
top:-100px;
height:100%;
  
bottom:100px;
width:100%;
background:#ffc;
text-align:center;
overflow: auto;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
background:#ccc;
line-height:100px;
text-align:center;
}
</style>
本文转自：http://blog.sina.com.cn/s/blog_4b8d35b70100mfy2.html]]> http://www.imeetyou.net/article.asp?id=465 <![CDATA[在Mac OS X Lion下修改Hosts 的4种方法]]> zyj10222@126.com(admin) Sat,28 Apr 2012 11:07:35 +0800 http://www.imeetyou.net/default.asp?id=465
个人觉得第二种比较简单，嘿嘿～！

1、通过 VI 编辑器修改

打开终端（应用程序——实用工具），运行：sudo vi /etc/hosts

屏幕上会提示你输入密码（输入密码的时候不会有任何字符显示，甚至*都不会显示，输完之后按回车就是了），打开 hosts 文件之后按 i 键进入插入模式（可理解为编辑模式），然后按照你的需要对该文件进行编辑，编辑完成之后按 ESC 键退出插入模式，之后按 :wq+回车保存退出，记得英文的冒号也是要输入的哦。

这是笔者一直都在使用的方法，VI 编辑器对于经常使用 Linux 的用户应该不会陌生，而且该编辑器是默认内置在 Mac 系统中
的。但是，对于没有使用过 VI 的用户，还真得花一会儿功夫来学习其基本使用方法。另外VI编辑器是一个很好很强大的工具，想要玩好 Mac 的话，最好掌握这个工具的使用。

2、使用 nano 编辑器修改

和上面的方法类似，这个编辑器相比 vi 更加简单易用，但是功能不强大，似乎也没有 vi 流行。方法同样是在终端中运行：
sudo nano /etc/hosts

同样是输入密码，打开 hosts 文件，按照你的需要对该文件进行编辑，编辑完毕之后按 ctrl+o 保存，出现 File Name to Write: /etc/hosts 的时候按回车确认，再按 ctrl+x 退出即可。

3、使用 cat 命令合并文件

这个方法比较适合当你想往 Hosts 文件中添加一些内容的情况，首先你需要把需要添加到 Hosts 文件中的内容保存为一个TXT文本文件（建议直接保存在你的用户目录），我这里拿保存在用户目录中的123.txt为例说明。
同样是启动终端，然后运行下面两条命令：
sudo -s
cat ~/123.txt>>/etc/hosts

顺便说一下，~ 符号在 Mac 甚至所有基于 Unix 和 Linux 的系统中都是代表当前用户的用户目录，.代表当前目录，这回你就应该明白上面的命令中为什么是 ~/123.txt 了吧。

4、直接在图形界面中修改

打开 Finder，然后点击菜单栏中的 前往——前往文件夹（或者快捷键 Shift+Command+G），在路径中输入 /private，进入之
后在 etc 文件夹上点击右键——显示简介，在文件夹简介窗口的最下面找到“共享与权限”，将 everyone 的权限修改为“读与写”，如果你发现不能修改的话，将右下角的那把小锁解开就可以修改了。


修改 etc 文件夹的权限之后，再进入 etc 文件夹下面，修改名为 hosts 文件的权限（同样是everyone读与写），修改完成之后，你就可以直接在 hosts 文件上点右键，通过“文本编辑”打开并编辑该文件了，不会出现没有权限的提示。修改并保存完成之后，记得将该文件和 etc 文件夹的权限还原。


最后的话

本文分享的这几种 Lion 系统下修改 Hosts 的方法都不会出现没有文件修改权限的提示，这个提示其实也是 Lion 安全性更高的表现，以上几种方法在 10.6 系统中都可以使用，至少算得上 Lion 系统下几个最简单修改 Hosts 文件的方法了。另外大家可以看到以上三种方法都需要在终端中操作，而对于刚刚使用 Mac，且没有玩过 Linux 的用户来说可能会觉得很麻烦，实际上终端很简单，莫非就是几个命令，并且功能非常强大，能够实现很多意想不到的功能。所以，对于刚刚用 Mac 的同学来说一定不要被终端这种命令行操作所吓倒，基本上你只需要复制命令，然后粘贴进去按回车就可以了，这有什么难的呢？]]> http://www.imeetyou.net/article.asp?id=464 <![CDATA[我想跟你去好多地方]]> zyj10222@126.com(admin) Thu,29 Mar 2012 13:06:07 +0800 http://www.imeetyou.net/default.asp?id=464 去看看海，从没见过海的颜色，想和你去见见
脚踩着沙滩的感觉肯定特别棒，
想和你一起去踩踩沙滩，捡捡贝壳
想跟你去好多地方
去爬爬山，
就泰山吧，五岳之尊毕竟
爬到最顶峰，一起享受一览众山小的感觉
还要看日出，一起迎接那一天的到来
想跟你去好多地方
哈尔滨吧，
最冷的时候，感受那里最纯净的冷
想跟你去好多地方
好多，好多，
下面的你来填吧.]]> http://www.imeetyou.net/article.asp?id=463 <![CDATA[界面设计规范［转］]]> zyj10222@126.com(admin) Wed,15 Feb 2012 13:50:07 +0800 http://www.imeetyou.net/default.asp?id=463 一：遵循一致的准则，确立标准并遵循

无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。

这样得到的好处：

1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解

2：降低培训、支持成本，支持人员不会行费力逐个指导。

3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加

做法：

项目组有经验人士，确立UI规范：

1.视觉设计师提供色调配色方案，提供整体配色表

2.界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范：

控件功能遵循行业标准，Windows平台参见《Microsoft 用户体验》(MSDN中有，中文已经翻译发行，项目组必须有一本)

控件样式在允许的范围内可以统一修改其样式、色调

参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。

根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的

3.界面实施人员与视觉设计师商榷控件可实现性,(如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱)。重复叠代上述工作。

4.建立合理化文档《UI标准》描述上述规范；

5.强行界面设计者理解之，并作为开发准则；

6.SQA人员进行监控开发人员是否遵循，及时告诫开发人员。

二：(Color)颜色使用恰当，遵循对比原则：

1：统一色调，针对软件类型以及用户工作环境选择恰当色调：

如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等

2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表

3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?Quot;!，?着重号，以及图标等

4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试

5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。

6：整个界面色彩尽量少的使用类别不同的颜色

Itop色表

具体标准参考美术学统计学术标准。
色表的建设，对于视觉设计师在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

三：(Resource)资源

一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。

1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考Itop的Outlookbar图标设计标准

2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格

3：底图应该融于底图，使用浅色, 低对比，尽量少的使用颜色。

4：图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出默认奇妙的图案。

5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4钟不同的样子。
如：《如何创建XP图标》链接失效
附件：Itop Outlook Howto.Doc 描述Itop项目中，Outlookxp风格图标的制作方法

四：(Font)字体

使用统一字体，字体标准的选择依据操作系统类型决定。

中文采用标准字体，“宋体”，英文采用标准 Microsoft Sans Serif 不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。

字体大小根据系统标准字体来，例如Microsoft Sans Serif字体8磅，宋体的小五号字(9磅)五号字(10.5磅)。

所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况

Itop采用BCB，所有控件默认使用 Parent Font，不允许修改，这样有利于统一调整。

1.系统大小字体属性改变的处理。

Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。

但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。

这个情况下，应该做相应处理：

1：写程序自动调节大小，点阵值乘以一个相应比例

2：全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法，但是必然结果是和系统不统一。

五：(Text)文字表达

提示信息、帮助文档文字表达遵循以下准则：

1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字

2：断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段，

3：警告、信息、错误 使用对应的表示方法

4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。

5: 根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为儿童：这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。

六：(STYLE)控件风格，不要使用错误控件，控件功能要专一

有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无章

1.不要错误使用控件，例如：

使用Button样式做Ttable的功能，拿主菜单条显示版权信息，

2.统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映

3.一个控件只做单一功能，不复用

很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理解增加难度，只有用户熟悉后才能理解。

例如：改变红色选项，左边的参数代表不同的设置，可能由于为了节省控件或者编程量，但是只有熟练用户才回使用，这种情况下解决方法：

1:分组，使用双份控件.

2：使用TABLE页，给用户很明显的视觉变化

七：(ALIGN)控件布局，窗口不拥挤，按功能组合控件

1：屏幕不能拥挤

拥挤的屏幕让人难以理解，因而难以使用。试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40％，而分组钟覆盖度不应该超过62％。

让人看上去，不能太拥挤，也不能太松散。

整个项目，采用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。

2：区域排列

一行控件，纵向中对齐, 控件间距基本保持一致

行与行之间间距相同，靠窗体Border距离应大于行间间距(间距加边缘留空)。

当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。

3：数据对齐要适当

说明文字，中文版应使用中文全角冒号，纵向对齐时，并按冒号右对其，如图。纵向控件宽度尽量保持相通。并左对齐。

例如金额等字符穿应根据小数点对齐，或者右对齐

4：有效组合

逻辑上相关联的控件应当加以组合，以表示其关联性，反之，任何不相关的项目应当分开，在项目集合间，用间隔对其进行分组，或者使用方框划分各自区域。

例如：以下界面，选择搜索方式来判断号码范围是表示主叫号码范围还是被叫号码范围，和入帐方式无关，

则应该修改为：搜索方式和入帐方式调换位置。以免用户产生误解。

5：窗口缩放时，控件位置、布局：

为了使界面不出现跑版或者难看的局面，解决方法：

1：固定窗口大小，不允许改变尺寸，

2：改变尺寸的窗口，在Onsize的时候做控件位置、大小的相应改变。

BCB/DELPHI的VCL中，大部分控件有布局属性：

某些控件拥有Alignment属性，可以用来做布局调节：Tcustompanel，Tmemo等，考左靠右靠上靠下以及撑满(Client)属性，用来根据版面自动调节。

大部分控件有属性Anchors，里面上下左右Akleft, Aktop等如果为True，则表示相对各个边缘的距离是否改变。这个可以进一步设计好排版工作。

八：(TAB orDER)TAB顺序

习惯用法，阅读顺序，从从左到右，从上到下

窗体中控件的Tab按键激活顺序，Taborder,. BCB/DELPHI中使用窗体设计右键菜单选择Taborder设置，VC中窗体RES编辑区域使用Ctrl+D

九：(Shortcutkey & Accelerator& Popmenu)快捷键、加速键和弹出菜单

1.快捷键：

1：全局快捷键菜单中加以描述 CTRL+XXX 并入帮助列表。

2：快捷键写入帮助，特殊说明，并在使用培训时强调使用

2.加速键：

1：使用非破坏性缺省按钮，回车、ESC键的正确使用 一个窗体，有默认加速键，如回车表示激活当前窗口设置为Default的按钮动作，Esc表示关闭窗口。

在调用Default按钮动作和关闭动作时候，不应该做有破坏性的操作，避免用户错误操作产生危害程度，例如不能把删除数据等功能的按钮作为缺省按钮。当用户要提交很多数据时，应该屏蔽Esc，或者做退出提示，告诫用户是否保存提交。

2：可接收动作控件必须拥有加速键，统一加速键描述

为结合键盘使用，可操作控件都应该有加速键，加速键定义准则，为英文单词第一个字母，如果同一窗体重复则用第二个字母，以此类推，则加速方式为Alt+这个加速键，用统一的方法标识在界面中，如XXX(A) 或者Wps的 A.XXX 英文可直接在字母下标识下划线 Cancel，

对于无法像Button一样显示快捷键的Edit等控件，则在Edit描述的Label中显示快捷键。

3.弹出菜单

辅助菜单必须在可视化界面上拥有对应的按钮或者菜单选项。

由于辅助菜单由用户点击鼠标左右键或者别的动作才能调出来显示给用户。无法清晰的显示给用户，所以对应选项应该可以通过别的途径得到,例如界面上有相应控件或弹出右键菜单的按钮等。

十：(ACTION)用户交互

1：Disable而不是Not Visible

要使一个功能有时允许有时不允许用户使用，则这个控件的不能随便隐藏，应该使用Disable属性进行表示，以免用户发现控件失踪后措手无策

2：窗口弹出位置要明显

点击一个控件，弹出窗口或者菜单，应该给人明显提示，最低要求是覆盖刚才点击的位置，让用户轻松跳转到新的界面。

3：执行动作要提示

给用户一个视觉感受的同时，写程序的时候应该注意用户的交互感受，UI作为人机对话的工具，用户做了任何动作，应该给用户一个视觉或者听觉、触觉提示。而且这个提示应该行明显，但不应提示过长，可以有以下几种方法：

当用户点击按钮等动作进行一个工作时：

1：弹出交互对话框让用户点击确认。

2：改变UI中控件参数提示：(处理不用用户确认的提示，有一定延时，或者用户按键后自动清除。)

如：改变标题栏字符串，显示“信息：提交成功”,或者专门设置一个状态栏、Tlable等用来进行提示。

3：听觉提示：

在确定有声卡，用户可以听到声音的时候，发出特殊声音提示。一般作为重要提示的辅助。声音不应过长，紧急错误提示应该短促，频率较高，成功提示应该舒缓，轻松。等等……

十一：(HELP)联机帮助：

什么时候要帮助，什么时候不要帮助

1：系统默认、行业标准的控件操作不需要逐一描述，只需要对特殊控件加以描述 2：特殊操作、特殊功能界面，在界面上加控件直接连接到对应的HELP文件中

3：特殊设置详细，应该在界面上用简洁明了的语句说明，或者是好用Tiptool，并由第二步帮助

帮助文档：

结构化，按功能模块划分

必须阐述功能通过什么方法可以在软件中实现

帮助文件是帮助用户更好的使用软件，措辞要恰当、简捷、通俗易懂,每一句话都应该有目的，帮用户解决问题

帮助文件不是广告、商业软件不允许打广告。描述公司信息目的是为了方便用户在没有办法的情况下找到售后支持，网址连接、信箱地址、电话号码绝对不允许无效。

十二：发行时阐明规则

对统一的东西进行逐一阐述，并加以典型描述，放入HELP和用户手册中，同时加有词汇表


附录：

视觉设计师何时参与进来：

视觉设计师作为界面美化的主要人员，不但拥有艺术设计、包装设计的才能，还应该穿插整个项目，给界面程序设计人员提出系统参考意见。

1：软件设计前期，视觉设计师参与需求了解，分析同类软件界面有缺点，提出主色调、典型界面风格、以及构思整个美术包装等。

2：界面原型设计过程中，与开发人员共同修改、商榷最终表现样式，以及确立UI标准。

3：程序开发过程中，提供标准风格的资源文件(Icon,Cur,Bmp等)，并总结出统一风格的资源的设计过程，形成规范文档。

4：产品化方面，协助制作帮助文件、网站风格以及参与制作，制作附带宣传图片、动画、产品包装、海报等。

来源：思绪飞扬  http://lylmsdn.blog.163.com/blog/static/2418528320095164216441/
]]> http://www.imeetyou.net/article.asp?id=462 <![CDATA[国外设计师ui站网址分享]]> zyj10222@126.com(admin) Fri,03 Feb 2012 16:47:42 +0800 http://www.imeetyou.net/default.asp?id=462
丹麦Icon设计师的主页 http://jonas.seph.ws/
生活在澳洲的19岁中国UI设计师 http://www.istartedsomething.com/
韩国icon工作室 http://www.zzve.com/
又一俄罗斯icon工作室 http://www.turbomilk.com/
还有fasticon http://fasticon.com/ http://topstyles.net/
来个小日本的icon工作室 http://www.hybridworks.jp/这个我喜欢，清爽但很精致
此站偶每天必看 http://www.enhancedlabs.com
来个icon国王吧 http://icon-king.com/
这里图标画的及其细致， http://www.icondrawer.com/main.php
类是于wincustomize，超级棒 http://customize.org/
美国18岁的天才icon大学生 http://www.louiemantia.com/icon/
国内一女孩，还是学生，做皮肤，还有适量插画不错 http://www.alexhill.cn/
法国icon设计师 http://blog.tpdkdesign.net/
图标海论坛大家都有吧 http://bbs.icosea.com/ iconbuffet的站点 www.iconbuffet.com
加拿大的，华丽 http://www.ndesign-studio.com/
波多黎哥的UI设计师 http://-kol.deviantart.com/
印度一位估计才10多岁的天才 http://sreeejith.deviantart.com/gallery/
网易的设计师 http://www.abloxo.com/blog/
瑞士18岁的icon少年，他的作品海波师傅收藏过 http://nelson-tux.deviantart.com/ 帅气的插画
http://www.35766.com/User/?uid=Ginger
这个是我收集的，点ui相关 他的作品uirss上发布过 http://deleket.deviantart.com/gallery/
一个美国老，AI的汽车画的真是………. http://dr-phoenix.deviantart.com/
新加坡超级有视觉冲击的漫画家 http://artgerm.deviantart.com/
一个波兰MM的 http://artgerm.deviantart.com/
德国老 http://ld-sign.deviantart.com/gallery/]]> http://www.imeetyou.net/article.asp?id=461 <![CDATA[【方法总结】画图标-对抗锯齿的方法]]> zyj10222@126.com(admin) Fri,03 Feb 2012 16:43:55 +0800 http://www.imeetyou.net/default.asp?id=461 1.【编辑】-【首选项】-【常规】（快捷键ctrl+K）请确保你的[图像插值]设置为“两次立方（适用于平滑渐变）”。
2. 画图的时候，注意勾选“消除锯齿”。
3. 尽量使用【矩形工具】来画图，调节图形的时候，选用【路径选择工具】来调整，需要填充渐变的时候，选用【图层样式】中的【渐变叠加】。
提示：只要不是画像素图标，就必须要使用【矩形工具】、【钢笔工具】等等矢量工具来画图！只有矢量蒙版和剪贴蒙版的熟练使用才可以画出好看的图标。也只有这样，你的图标才不会处处出现锯齿！（如果只是长方形和正方形，那用普通的填充位图都是OK的。）
4. 最好是在100%画面中画矢量图形，但如果要放大画面，最好在整数倍的情况下画图，比如200%、400%、800%等。。不然，在描边后可能会出现边缘虚化的现象。
5. 如果是普通的位图，千万不要反复的ctrl+T，如果非要使用ctrl+T，要注意，先调整位置，最后再放大缩小。使用次数越少越好。
6. 我自己觉得十分有效的一个消除锯齿的办法是，使用【图层样式】-【描边】！这个办法的关键就在于选择描边时所选用的颜色，这个颜色最好和图形比较接近，又跟底色环境比较和谐的颜色。使用描边之后，不仅图形轮廓显得更清晰了，而且也看不出来有锯齿。强力推荐！试试看吧！
...



初学画图标，我自己总结了这样的方法：
像素图标：
1.找一些16X16的简单像素图标来分析，看一些基本几何形状是如何画的，再看圆角，曲线等等是如何处理的，看懂之后，你就可以举一反三了。
2.然后找一个教程，跟着一步一步画出来，加深体会。

一般图标：
1.找一些PSD的原始分层文件（在许多素材网站上都很容易找到），分析别人是如何使用剪贴蒙版和矢量蒙版的。
2.分析当下流行的表现手法。
（一层层，到处多点一点，多思考，就会有收获。）
3.选择一个你喜欢的图标，跟着教程，从头到尾画出来。（在这个过程中你有可能遇到困难，但千万不要放弃，多请教别人，多从别人的PSD原始文件中找方法，或者到网上搜索。当问题解决之后，你会发现，其实也不是那么困难。）
4.临摹一个图标（无教程的）。
做完这些事情，再读一些关于图标设计原则的文章，十分有必要。因为这些文章能让你知道什么样的图标美观且实用。
比如：http://pcedu.pconline.com.cn/sj/design_area/idea/0711/1169283.html
http://edu.itbulo.com/200709/120230.htm
原文作者http://hi.baidu.com/jessie081109/blog/item/2acd190ad6a74fdb63d98672.html]]> http://www.imeetyou.net/article.asp?id=460 <![CDATA[2012来了]]> zyj10222@126.com(admin) Tue,17 Jan 2012 12:59:14 +0800 http://www.imeetyou.net/default.asp?id=460 春节前再记一下。
]]> http://www.imeetyou.net/article.asp?id=459 <![CDATA[WEB前端开发工具整理【转】]]> zyj10222@126.com(admin) Fri,14 Oct 2011 13:07:35 +0800 http://www.imeetyou.net/default.asp?id=459
•IE Developer Toolbar (DOM, CSS)
•Web Accessibility Toolbar (可读性及更多功能)
•XRAY, MRI (CSS)
•Companion.JS(JavaScript)
•Microsoft Script Debugger (JavaScript)
•HttpWatch

Firefox浏览器插件
•Web Developer Toolbar (多用途)
•Firebug (DOM, CSS, JavaScript, 流量)
•Modify Headers (Ajax)
•Poster (Ajax)
•XRAY, MRI (CSS)
•Firefox Accessibility Extension
•LiveHTTPHeaders

Opera浏览器插件

•Opera developer tools (DOM, CSS, JavaScript)
•Opera Error Console (HTML, CSS, JavaScript)
•XRAY, MRI (CSS)
•Web Accessibility Toolbar (可读性及更多功能)


Safari浏览器插件
•Safari Debug Menu (JavaScript)
•XRAY, MRI (CSS)
•Web Inspector (Safari 3) (CSS, DOM)

开发工具
Dreamweaver、Microsoft Expression Web 3 ---网页制作
TopStyle、Visual CSS---CSS编辑器
EditPlus---文本编辑器
Aptana Studio、1st JavaScript Editor--- Javascript集成开发环境
FastStone Capture--截图，取色，量尺寸，屏幕录制工具

调试环境
•MultipleIEs(IE5、IE6、IE7、IE8)、IETester
•Firefox 2/3
•谷歌 Chrome
•Opera 9
•Safari 3-- Mac OS平台
•虚拟浏览器（分别有IE6、IE7、IE8、FF、Chrome、Safari的）-----推荐使用

调试（Debug）工具
•Internet Explorer Developer Toolbar（IE6插件，IE8内置该功能）--DOM、CSS
•Companion.JS（IE）--JS调试工具
•Web Developer和Firebug插件（Firefox）
•WebDev Toolbar（Opera）

•ViewPage插件（遨游）--资源提取
•IETester--浏览器集成测试工具
•HttpWatch--对网络通讯的数据进行监控和分析
]]> http://www.imeetyou.net/article.asp?id=458 <![CDATA[关于P3P同源策略的问题【cookie被阻挡或限制】]]> zyj10222@126.com(admin) Thu,21 Jul 2011 17:31:37 +0800 http://www.imeetyou.net/default.asp?id=458 在IE浏览器 附加组件栏 出现一个 小眼睛 而且 我们的js无法在外部网站正常调用执行。
点击小眼睛发现提示 【基于您的隐私设置，某些Cookie限制或被阻挡】
然后列表里看到了，访问我们网站的路径，无论图片还是样式css,js等都让阻挡了。

之后就百度，谷歌大神的搜索，终于发现了是因为p3p 同源策略问题，下面我来说一下对遇到这样问题的解决方法：

先列问题：
1、什么是p3p,有什么用？
2、怎么在自己的网站上实现p3p策略？
3、p3p文件如何编写，部署，验证等？
4、如何检测自己的网站是否实现了p3p?

基本上主要就是以上所罗列的问题，下面分布来解答；
1、什么是p3p?
P3P是万维网联盟（W3C）公布的一项隐私保护推荐标准，旨在为网上冲浪的Internet用户提供隐私保护。现在有越来越多的网站在消费者访问时，都会收集一些用户信息。制定P3P标准的出发点就是为了减轻消费者因网站收集个人信息所引发的对于隐私权可能受到侵犯的忧虑。P3P标准的构想是：Web 站点的隐私策略应该告之访问者该站点所收集的信息类型、信息将提供给哪些人、信息将被保留多少时间及其使用信息的方式，如站点应做诸如 “本网站将监测您所访问的页面以提高站点的使用率”或“本网站将尽可能为您提供更合适的广告”等申明。访问支持P3P网站的用户有权查看站点隐私报告，然后决定是否接受cookie或是否使用该网站。

以上我们简要地谈了一下什么是P3P，有兴趣的不妨点击
http://www.w3.org/P3P，访问官方P3P网页以获取更多技术信息

我们为什么需要了解一点P3P？
您一定听说过cookie，cookie 是由 Web 站点创建的小文本文件，存储在您的计算机上。这样，当您下一次访问该站点时，它可以自动获取有关您的信息，例如浏览喜好，或您的姓名、地址及电话号码。过去一般认为绝大多数Internet用户能够接受cookie，毕竟，只有那些患有妄想狂的人才会因恐惧而拒绝cookie，不是吗？然而，这种假设在过去或许能够成立，而现在则未必。

注：IE浏览器默认的隐私安全策略是中，可以点击【Internet选项】【隐私】查看。
它的提示为：“阻止没有合同隐私策略的第三方cookie；阻止使用个人可标识信息而没有您的隐含许可的第三方cookie；限制使用个人可标识信息而没有隐含许可的第一方cookie”

我们上面遇到的问题就是没有合同隐私策略的第三方cookie; 问题的原因找到了，

-------------------------------------------------------------------------------------

2、下面我们该想如何让自己的网站实现p3p策略？
这个时候我找到一篇文章【关于p3p 简洁策略,以及浏览器的支持情况】
连接：http://www.cnblogs.com/_franky/archive/2011/03/16/1985954.html
作者很详情的说了p3p以及 各个浏览器对p3p的支持，但对如何给本站编写一个p3p文件，如何部署没有更详细。

P3P的实现
P3P的功能有三个部分组成：一个或者多个策略文件、策略参考文件和源自服务器的HTTP报头。策略文件应该存放在Web服务器的w3c目录下（/w3c）。
我们创建以下三个文件：
1. 策略参考文件（P3P.xml）
复制内容到剪贴板程序代码 程序代码

<?xml version="1.0" encoding="UTF-8"?>
<META xmlns="http://www.w3.org/2001/09/P3Pv1">
   <POLICY-REFERENCES>
      <POLICY-REF about="/w3c/policy.p3p#PrivacyPolicy">
      <INCLUDE>/*</INCLUDE>
      </POLICY-REF>
   </POLICY-REFERENCES>
</META>

2. 创建策略文件（Policy.p3p）、
复制内容到剪贴板程序代码 程序代码

<?xml version="1.0"?>
<POLICIES xmlns="http://www.w3.org/2002/01/P3Pv1">
<!-- Generated by IBM P3P Policy Editor version Beta 1.10 built 2/19/02 2:42 PM -->
<!-- Expiry information for this policy -->
<EXPIRY max-age="604800"/>
<POLICY name="PrivacyPolicy">
    <!-- Description of the entity making this policy statement. -->
    <ENTITY>
    <DATA-GROUP>
        <DATA ref="#business.contact-info.online.email">zyj10222@126.com</DATA>
        <DATA ref="#business.contact-info.online.uri">http://www.imeetyou.net</DATA>
        <DATA ref="#business.name">test</DATA>
    </DATA-GROUP>
    </ENTITY>
    <!-- Disclosure -->
    <ACCESS><nonident/></ACCESS>
    <!-- Disputes -->
    <DISPUTES-GROUP>
        <DISPUTES resolution-type="service" service="http://www.imeetyou.net" short-description="New Dispute">
            <LONG-DESCRIPTION>test.</LONG-DESCRIPTION>
            <REMEDIES><correct/></REMEDIES>
        </DISPUTES>
    </DISPUTES-GROUP>
    <!-- Statement for group "Basic information" -->
    <STATEMENT>
        <EXTENSION optional="yes">
            <GROUP-INFO xmlns="http://www.software.ibm.com/P3P/editor/extension-1.0.html" name="Basic information"/>
        </EXTENSION>
        <!-- Consequence -->
        <CONSEQUENCE>Data collected from all Web users: access logs, and search strings (if entered).</CONSEQUENCE>
        <!-- Use (purpose) -->
        <PURPOSE><admin/><develop/></PURPOSE>
        <!-- Recipients -->
        <RECIPIENT><ours/></RECIPIENT>
        <!-- Retention -->
        <RETENTION><stated-purpose/></RETENTION>
        <!-- Base dataschema elements. -->
        <DATA-GROUP>
            <DATA ref="#dynamic.clickstream"/>
            <DATA ref="#dynamic.http"/>
        </DATA-GROUP>
    </STATEMENT>
    <!-- Statement for group "Cookies" -->
    <STATEMENT>
        <EXTENSION optional="yes">
            <GROUP-INFO xmlns="http://www.software.ibm.com/P3P/editor/extension-1.0.html" name="Cookies"/>
        </EXTENSION>
        <!-- Consequence -->
        <CONSEQUENCE>Cookies are used to track visitors to our site, so we can better understand what portions of our site best serve you.</CONSEQUENCE>
        <!-- Use (purpose) -->
        <PURPOSE><admin/><develop/></PURPOSE>
        <!-- Recipients -->
        <RECIPIENT><ours/></RECIPIENT>
        <!-- Retention -->
        <RETENTION><stated-purpose/></RETENTION>
        <!-- Base dataschema elements. -->
        <DATA-GROUP>
            <DATA ref="#dynamic.cookies" optional="yes"><CATEGORIES><state/></CATEGORIES></DATA>
        </DATA-GROUP>
    </STATEMENT>
<!-- End of policy -->
</POLICY>
</POLICIES>


验证：
将以上文件放到 网站根目录的w3c 目录下。这个时候可以通过  w3c 的检测工具来 验证你写的是否正确： http://www.w3c.org/P3P/validator.html
对于站点的设置就完成了。

接下来对于服务器端的设置：

服务器端不听的服务器会面临不同的问题

如是iis 那么 如何将 IIS 配置为使用平台的隐私首选项 (P3P)？
在微软这里找到了支持： http://support.microsoft.com/kb/324013/zh-cn；
如果是Apache
查看这里 ： http://kb.cnblogs.com/a/1295695/


如果你在服务器端也设置好了。那么最好我们来验证一下我们的设置是否成功

这下 用 chorme 浏览器 的开发人员工具

刷新页面，在之前的图片，以及连接上查看header 信息就会出现你在 iis里设置的P3P 信息。

这样在用户访问的时候就不会出现 cookie被阻挡或限制 这样的提示了~！

关于p3p还有很多有意思的问题 比如
1、【用P3P解决第三方COOKIE存取的问题】
2、【过设置p3p头来实现跨域访问cookie】
而且有一本关于p3p 的书籍 O'Reilly的书《Web Privacy with P3P》

以上略叙遇见的问题，希望能对读者有所帮助。










]]> http://www.imeetyou.net/article.asp?id=457 <![CDATA[关于Internet Explorer 无法打开 站点已终止操作的问题]]> zyj10222@126.com(admin) Thu,21 Jul 2011 16:51:44 +0800 http://www.imeetyou.net/default.asp?id=457 http://www.xxx.com/xxx.html 已终止操作",而且发现这个问题只在IE6下出现
这是因为在IE下,在加载文档的过程中,整个HTML文档的DOM结构尚未生成完整,而此时正在执行的JS就已创建出新的DOM结点了,致使DOM树的结构发生紊乱。
解决方法大概有两种:
　1、加载完成判断
　　　 if (document.readyState=="complete"){
　　　　　....
　　　 }else{
　　　　　document.onreadystatechange=function(){
　　　　　if(document.readyState=="complete")...;
　　　 }
　2、加载完后执行
　　　window.onload=function(){
　　　　 ...
　　　}

更多引起此问题的操作原因：
以下 转载自：http://blog.csdn.net/wangjj_016/article/details/5304780

1.  在DOM加载完之前进行了增加删除节点的操作，例如appendChild，removeChild。innerHTML操作目前还没发现有这个问题。

解决办法：在jQuery(document).ready()或者在body的onload事件里执行这些操作。

2.  head包含<base target="_blank"/>，有对head对象的DOM操作也会出现这个问题。

解决办法：1)<base target="_blank"/>改为<base target="_blank"></base>，没找到相关资料解释这个问题。

                 2)使用head.insertBeforeChild()代替appendChild，insertBeforeChild不会造成DOM紊乱。
]]>