Archive for the 'Techniques' Category

成为优秀设计师应该做到的9点要求

想要设计出优秀的作品并不是一件容易的事情,不仅需要有技术,还要有审美观。有再好的技术但是没有好的审美做出来的作品也不好看。同样,没有熟练的技术只有优秀的审美观也没有办法把自己的创意表达出来。我也算不上优秀的设计师,但是我从事设计也有很长的时间了,根据我自己的经验总结出来成为优秀的设计师应该做到的9点要求。

1,留心观察生活中的事物。简单来说创意来源于生活,一切创意来源都是生活中的事物。这也是为什么好莱坞大片中的外星人永远都和人类差不多,有两个眼睛,一个鼻子,两个耳朵,但只是形状不同而已,再怎么想象都离不开现实生活。

2,将创意创作为作品。有好的创意就应该将它转换为作品。这样既能锻炼技术,还能加深印象,将创意牢记于心。

3,把灵感记录下来。灵感是一瞬间的,如果当灵感存在于脑中的时候不记录下来的话,事后就很难回想起来了。灵感在任何时候都会闪现,在走在路上,坐在车上。所以只要有可能,就把灵感用各种方式记录下来。比如用简短的文字描述一下,画个草图,或者用手机拍照再加上文字注释。

Read more »

关于网页反垃圾留言部分的易用性设计

目前只要是个可以留言的地方基本都会遭受垃圾留言的袭击。垃圾留言和垃圾邮件一样令人心烦。但是很多邮件服务商比如Gmail,Hotmail,Yahoo都可以过滤垃圾邮件。而网站都是网站所有者自己处理,所以应对垃圾留言比较麻烦。

针对垃圾留言,已经诞生出很多反垃圾留言的工具或者是插件。这些反垃圾留言的工具或者插件主要适用两种方式来屏蔽垃圾留言。一种是具有一定的算法,能够识别出是否是垃圾留言,然后根据结果进行判断,如果是垃圾留言就直接屏蔽,这一类的代表就是WordPress上用的比较广泛的Akismet。另外一种是使用CAPTCHA(Completely Automated Public Test to tell Computers and Humans Apart)方法,中文意思就是“全自动区分计算机和人类的图灵测试”。这个的表现形式就是在留言之前要输入验证码,就象这样:

captcha 关于网页反垃圾留言部分的易用性设计

这就是常见的验证码。另外还有一种方式也就是给出一道简单的计算题,算出结果才能通过留言,就象这样:

Read more »

用图片解释CSS盒子模型

CSSBoxModel 用图片解释CSS盒子模型

很多CSS初学者不太理解margin和padding的区别,用语言描述总是非常难懂,用一幅图片就能很好解释了。其实从这幅图基本就能理解了,但是我还是稍微的讲解一下。

由内而外开始,最里层是内容区域,一般都是在html中的<p></p>标签中。5的地方就是padding,4的地方是border,1的地方就是margin。如果说border(边框)是内阁内外的大门,padding就是内边距,也就是内容距离房屋大门的距离,margin就是外边距,是外面其他的房屋距离大门的距离。一切内容都是存在于border这个大门中的。3是背景图片,2是背景色。背景图片和背景色可以设置任何一个,也可以不设置,也可以两个都设置。当同时设置了背景图片和背景色的时候会像图上表现的一样,背景图像会覆盖住背景色,当背景图像不存在时才会显示背景色。

Read more »

怎样在Flash CS4中连接库中的声音

最近更新网站,发现Flash CS4中的元件没有了Flash CS3中的连接的选项。不过这可难不倒我,我一看没有连接选项了就直接去属性中找了,结果这家伙还真的藏在这。那我接着说明一下怎么在Flash CS4中连接库中的声音。

直接把声音拖到舞台上那是Flash 8和AS 2.0的习惯做法,可是到了面向对象的ActionScript 3.0的时代就显得很不合适。首先把你需要的声音元素倒入到库中,这个不要我教吧,就在文件菜单中。选择需要连接的声音文件,然后在右键菜单中选择属性,打开属性对话框。下面以图片说话。

由于我装的是Flash CS4 英文版,所以截图也是英文的,中文的可以对照相应的位置。Export for ActionScript和Export in frame 1打上钩。然后在Class中输入一个类名,这步最关键。ActionScript 3.0是面向对象的语言,所有东西都是以类的形式存在的,这个连接的声音也将创建为一个类,我这里起名为BGSound。

symollinkageinflashcs41 怎样在Flash CS4中连接库中的声音 

Read more »

IE6,IE7,IE8 CSS兼容查询表

微软的IE系列一直都让开发人员头疼不已,对很多网页标准都不兼容。尽管IE7和IE8相对IE6来说是有进步的,但对W3C的标准支持还是微不足道,所以对于不同版本的IE对标准的支持不同要搞清楚,因此,有人制作了兼容列表,分为GIF格式和PDF格式。

CheatSheetPAGE1 IE6,IE7,IE8 CSS兼容查询表 CheatSheetPAGE2 IE6,IE7,IE8 CSS兼容查询表

点击图片放大保存。PDF版下载

CSS中何时使用id何时使用class

CSS中的选择符除了可以选择HTML预定义的标签,比如<a>,<p>,<div>。但是可以选择用户自己定义的id或者class。id与class的最主要不同就在于id不能重复,只能使用一次,一个id只能用于一个标签。而class可以重复使用,同一个class可以定义在多个标签上。实际上从名称就能看出来id与class的区别,id是识别符,而class是类。

那么什么时候使用id,什么时候使用class?根据我的经验来看id用于特殊的标签上,因为这个部分就这么一个,没有与其他的地方重复的。而class主要用于一类有同样特征的元素上。因为id只能用一次,class可以无限次使用。

打个比方,就以一个Blog来说。一个Blog只会有一个头部,用于放置Blog的名称和Logo之类的信息。因为就只有这么一个,所以定义id是最适合的,没有其他的地方与头部类似。而在Blog首页可以显示多篇文章,一般都是10篇,那么每篇文章的内容区域都有一个类似的样式,所以定义class是最合适的,因为有10个同样样式的部分,为同一个class定义样式可以应用于10个拥有同样的class值得元素上。

也就是说,只有一个独立样式的元素适合用id,而有多个元素拥有同样的样式的话适合使用class。

用Illustrator做的新图

昨天用Illustrator做了一幅图,这也是开始学习Illustrator以来第一张完全由Illustrator制作的图。之前有不少图都是Illustrator中制作元素,然后再导入到Photoshop中处理。

IllustratorMonster 用Illustrator做的新图

用Java和Flex编写的彩票随机号码生成器

最近宿舍的人爱好买彩票。基本每次都是买随机,但是有些号买的看上去没有中奖的样。所以我用Java和Flex分别编写了彩票随机号码生成器,可以自己先算好看中的,一次看不中可以多点几次。这个生成的是体彩的7位数,娱乐性质大于实际意义。彩票这东西其实每个号码的中奖概率都是一样的,只有在人看来有不同的中奖可能性,只是心理安慰而已。

用Flex做出来的swf文件有253K,而用Java做的jar文件只有2K多一点,这个差距也太大了。估计是Flex中组件的主题也保存进swf中,导致文件体积庞大。为了节省流量,进入文章后才能看到swf版的生成器,如果你有兴趣可以试试,但是如果认为这个生成的号码一定能中,那你就是在做梦。至于Java版的,点击这里下载jar文件,前提是你的电脑中要安装了JRE运行环境。没有的话去这里下载安装

Read more »

很遗憾IE6仍然是占有率最高的浏览器

雅虎统计终于在一个多星期之前支持Windows 7和IE8的检测了。根据上一个星期的我的BLOG的统计结果,以UV独立访问者来比较,IE6仍然是占有率最高的浏览器。实在是令人失望。

browsersmarketshare 很遗憾IE6仍然是占有率最高的浏览器

表中看到IE6仍然有三成的市场占有率,之后就是IE7和IE8,Firefox3.5。IE6占有率居高不下在于很多人不懂或者懒得升级。另外有不少人知道有Firefox,Opera,Google Chrome这些浏览器,但是都从来不去尝试,死抱着IE不放。实在是可悲。

在HTML中给文字添加title属性

熟悉HTML的人中大部分都知道title属性存在于链接和图片中。title属性能够显示一个标题,也可能告诉人点击了链接或者图片之后会发生什么。但是有不少人都不知道文字也能添加title属性。其实这需要借助于abbr标签,abbr在英语中就是指缩略语的意思。而abbr标签中可以添加title属性,这样一个最大的用处就是在写一个缩略语的时候可以通过title属性来显示全称。

例如下面的这个例子:

<abbr title=”Cascading Style Sheets”>CSS</abbr>

接着再通过CSS修改abbr的样式让人知道这里是与众不同的:

abbr {
    border-bottom: 1px dotted #000000;
}

最终显示的就是下面的这个效果

CSS

« Previous PageNext Page »