推荐阅读
Photoshop制作可爱的蜜蜂纹理艺术字设计教程
最终效果1、把下面的蜜蜂图片保存到本机，再用PS打开。2、首先我们要抠出蜜蜂的身体部分，并细化处理，得到适合制作文字的素材，下面的步骤可能会很繁琐，如果嫌麻烦可以到视频教程下面下载现成的纹理素材。用钢笔工具把身体部分抠出来，转为选区后复制到新的图层，按Ctrl + T 把角度调正，然后在背景图层上面新建一个图层，用油漆桶工具填充白色。3、选择涂抹工具把左侧边缘的细毛涂出来，如下图。4、用钢笔工具勾出下面的部分，把选区反选后按Delete删除右半部分，如下图。
Fireworks MX 之初体验1-1
在编者的苦口婆心，盛情邀请下，风云设计 的两位高手 风筝 和 心动为谁 终于答应，为广大朋友奉献对 Fireworks MX 的亲密接触后带来的初体验，为喜爱 Fireworks 的 fans 们作出贡献，特此鸣谢！Fireworks MX 初体验 正如好多“专家”预料的那样，Fireworks Mx（Beta）[以后简称FWMX]终于在5月份左的时候出现了。估计刚刚拿到测试版的朋友们的心情肯定和我是一样的――激动得很、并且对她充满无限憧憬。我现在倒是真的很想知道各位在安装后，然后真正开始使用后的真实感受，呵呵~~~可能就没有当初想的那么美好了，至少我是这种感觉。 好了，个人的情愫暂且抛开，免得有骗稿费的嫌疑，下面我们就一起来对全新的FWMX做一个初次的体验。（注：我们本节的目的主要是通过和FW4的比较来实现的！如果您对FW4尚一无所知的话，可以对涉及到FW4的内容略过不看。） FWMX给我们最大的感受是视觉上带来的强烈的冲击，当然还有一些更加人性化、快捷化工具的设置。我们知道，MM公司基本上是在相同的时间同时推出了FLASH、DW、FW的MX版本，自然追求了风格的统一和完美，相关图标及其相关的启动画面，还有风格统一的属性面板，可拆分重组的面板窗口无一不给我们更舒适的视觉感受，说来说去，我们还是先一起来看看FWMX的启动界面吧！1、完美统一的启动界面： 这个东西想必我们不需要多废话了，奇怪的一点儿就是，我们可以清楚的看到版本号为6.0，呵呵，5.0没有了…… 2、透过刚刚打开的工作窗口，我们可以看出FWMX相比较FW4来讲，要“霸道”些了，怎么讲呢，我们可以看到在FW4中可供我们操作的区域在FWMX中被众多的面板瓜分的不轻，看来我现在800*600分辨率的烂机机是不能满足FWMX的要求了，调整到1024*768，看起来似乎舒服多了。 现在我们可以点击"file--new"新建文件了，看看在不同的FW版本中，会有什么不同，当然，我们还是要主要看看FWMX到底给了我们什么最新的感受！
教你用Flash制作不停转动的地球仪
上学那会儿，经常看到老师拿着地球仪给我们上课，当时看着漂亮的转动着的地球仪真想自己也拥有一个。现在这个愿望终于实现了！嘿嘿，不是花钱买，而是使用Flash制作！而且还是一个带有立体感的透明的地球(如图1)，它可以广泛地运用在很多Flash动画中，比如一些网站开头动画和Flash短片中。 素材准备 1、启动Flash后，按“Ctrl+N”新建一个动画，按“Ctrl+M”打开影片属性窗口，设置影片大小为80Px×80Px，背景色设为黑色。 2、现在我们来做一个地球前景。按“Ctrl+F8”插入一个“Graphic(图形)”，取名为“前景”，使用圆形工具画一个圆。设置圆形的填充色，选择“Windows→Panels→Fill和Mixer”打开填充和颜色控制面板，然后选择“Radial Gradient(射线)”，点选前面的小划块，把Mixer面板中的“Alpha”调节到“0%”，这样可以使圆圈中间透明，点选后边的小划块，把颜色设置为深蓝。默然的填充效果是正中的，我们可以选择漆桶选项中的“Transform Fill(转换填充)”把填充的中心向左上角移动一下，这样可以使地球看上去有些立体效果。 3、按“Ctrl+F8”插入一个图形，取名为“圆形”，画一个圆，填充颜色可随意。再插入一个图形，取名为“地图”，用铅笔工具(Pencil)在工作区勾勒出一个平面的世界地图(也可导入位图，然后进行打散扣图)，然后用油漆桶工具(Paint Bucket Tool)将其填充为绿色，把用铅笔工具画出的边缘删除，最后把整个地图再复制一个，将两个地图并排。到这里我们需要的素材就准备齐全了。 制作过程 1、返回到场景中，把图库中的“前景”拖拽到图层1中，然后在50帧处单击右键，选择“Insert Frame(插入帧)”。 2、新建一个图层，取名为“圆形1”，把图库中的“圆形”拖拽到该层中，调整位置使其和“前景”图层中的圆形重合，并在50帧处插入帧。新建一个图层，取名为“前景地图”，在第一帧插入关键帧，把刚才做好的图库“地图”拖入，调整地图的位置使非洲刚好超出圆形一点；在25帧插入关键帧，向左移动地图到南北美洲，使南北美洲在圆形的中心；最后在50帧处插入关键帧，继续移动地图，使第二个非洲刚好超出圆形一点，这样安排地图位置的好处是动画在播放时更加流畅，不至于有打更现象。然后分别把第1帧到25帧和25帧到50帧设置为“Motion (运动)”，最后在“圆形1”图层上点右键，选择“Mask(遮罩)”。 提示：在调整地图位置时，地图被圆形遮挡，不便于观看，可在“图形1”层上单击“Show/Hide All Layers(显示/隐藏图层)”隐藏圆形。 到这里已经有了大体的效果，下面我们要做的是背面转动的地球，有了这个效果动画会更加完美。
实例学用CorelDRAW9（七）
七、运用渐变工具（海鸥） “交互式渐变工具”位于工具箱自上而下倒数第四的位置（由很多个方块图案组成的那个图标）。他主要用来……怎么说呢？从一个对象到另一个对象的变形。我只能这样说了，事实上，他的功能也的确是这样，但至于实际工作中你要用于什么地方就得看你的了。现在，开始我们的实例，打开前面我们用过的一只茶壶，一只海鸥，我们就制作从茶壶到海鸥的变形，看看到底“交互式渐变工具”是怎样工作的（呵呵，越来越懒了……）。第一步：打开图形。如图32。（图32）这是两个对比非常鲜明的物体，马上你就会看到他们如何渐变的了。第二步：点取渐变工具，作出一个渐变来，如图33。（图33）这个工具使用起来很方便，先点取一个物体，拖动鼠标，到下一个物体，松开鼠标。你就会看到一个渐变产生了。你现在做的这个渐变是CorelDRAW9中的缺省控制的结果，所以，他中间有20个渐变的新对象，属于直接渐变。你试着自己控制一下属性条吧……是不是很简单？
最新发布
平面设计理论:创造视觉冲击力作品
译者的话】 无论是什么设计，首先是它必须能够引起别人的注意，也意味着它必须有某种视觉冲击力，否则没有人会有耐性看下去。本文从几个因素来讨论如何通过从尺寸变化、颜色运用及对比来使你的设计给人留下深刻的印象。本文共两页。一个平面设计主要有三种目的：要达到前面两种目的，最好的办法就是视觉冲击力。你的设计及版面会决定别人观看你的作品时间的长短，只有别人的注意力在你的作品中停留的时间较长，信息才能有效沟通。如果你的作品不能引起别人的注意，其它一切都是无意义的。字体、图片及各种设计元素的尺寸决定了你的作品是否具有冲击力。尺寸的使用技巧就是我们必须在设计中产生强对比。如果一个元素仅仅比其它元素大一点，并不会有什么效果出来。 在下面这个设计中，图片及标题的尺寸是这个设计中具有冲击力的一个决定元素。部分标题文字尺寸较小，使我们在对比中能够更直观感觉大的元素。 时钟的图片通过剪切后作为背景，而且放得很大，而没有剪切的时钟图片则放在前面，这种设计比简单地放上一个时钟的效果要好很多。记住，当我们对一件大家都熟悉的物品进行剪切时，人们在观看时会在脑海里将被剪切掉的部分自己补充上，这种视觉惯性对于我们设计来说是一个有利的因素，使我们可以设计出一些“看不见的空间”。虽然只是一个黑白设计，但冲击力非常强烈。很显然，下面的设计中插图非常简洁，而且插图元素非常大，虽然仅是一个黑白的低预算设计，但却非常吸引人的视线。
了解如何减少 reflow 次数
浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（geometries）的进程叫做 reflow。由于 reflow 是一种浏览器中的用户拦截（user-blocking）操作，所以了解如何减少 reflow 次数，及不同的文档属性（DOM 层级（DOM depth），CSS 效率，不用类型的 style 变化）对 reflow 次数的影响对开发者来说非常必要。有时 reflow 页面中的一个元素会 reflow 它的父元素（译注：这里是复数）以及所有子元素。有多种用户操作和 DHTML 变化可能会触发 reflow。调整浏览器窗口的大小，用 javascript 计算样式（computed styles），在 DOM 中创建删除元素，改变元素的 class 都会触发 reflow。值得注意的是，有些操作会多次触发 reflow，超出你的想象。下图源自 Steve Souders 的演讲 "Even Faster Web Sites"：从上表可以很明显的看出，在所有浏览器中并非所有 javascript 控制的样式都触发 reflow，即使触发了触发的次数也不尽相同。同时可以看出现代浏览器在控制 reflow 次数方面做的越来越好。在 Google，我们通过多种方式对我们的页面及 Web 应用测速，同时 reflow 是我们增加 UI 时考虑的一个关键因素。我们致力于传达轻快的（lively），交互性强的（interactive）和令人愉悦的（delightful）的用户体验。原则下面是一些减小 reflow 的原则：在下面的视频中（译注：引用自 youtube，无法观看，请到原文*），Lindsey 介绍了一些减少 reflow 的方法。延伸阅读
网页设计师如何应对客户无理要求
作为一个网页设计师，最头痛的事情是碰上“你不明白我的意思”这样的客户。这篇文章谈谈客户无理要求令网页设计师头疼的七大问题。当然并不会仅仅是发现这些常见的问题，我们将还会与大家分享如何避免这类问题的产生并向顾客解释清楚为什么无法满足他们的要求。最难应付的问题之一就是客户没有充分意识到你即将向他提供服务的价值。网页设计师也要谋生，如果项目的报酬太低，大多数情况下还是算了，因为这种低报酬的项目还会让你失去其它机会。如何应对 如果说你正要寻找更多的客户，那么积极做出回应也无妨，但是如果你有相当多的工作要做，还是考虑推掉这种项目。虽然关于项目的价格最终达成一致可能需要一点时间，一开始这么回复比较有帮助：“我最低时薪为$XX小时，如果你有兴趣，我很乐意给你一个更详细的报价。”如果他们对你比较感兴趣的话，他们可能会回复，如果没有回复的话，不要试图依靠调整时薪来获取这个用户，这是不明智的。还是等待更好的时机，花更多的时间和精力在你现有的客户身上。有些客户甚至可能还会进一步压低我们的报酬，说诸如“我儿子说只要50美元就可以做了，我只是打算找些更专业的人罢了，不过看起来好像太贵了，就算是专业人士也不值这个价。”碰到这种情况，一定要保持镇静同时显示出你的专业性，跟客户解释清楚专业网站设计师与业余设计师是有区别的。这类型的客户通常会是需要把工作外包的专业人士，也可能是一些业余的设计师却自认为自己达到了专业网页设计师的水准。他们的心态往往是这样的，”这 种工作我也可以做，不需要花费太多钱”。 除此之外，这类客户似乎知道如何把所有的事情做好，有点霸道或者无法放手发挥你的创造性。如何应对
HTML的sub,sup标签制作电子商务网站中的价格
HTML的sub,sup标签制作电子商务网站中的产品价格标签。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>html中的sub与sup标签</title> </head> <style type="text/css"> body { font:12px/1.8 Tahoma} span.price { font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:700; color:red;} span.price sub { vertical-align:baseline; font-size:12px;} span.price sup { vertical-align:text-bottom; color:#555} </style> <body> <span class="price"><sup>￥</sup>43.<sub>26</sub></span> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
让IE支持HTML5办法
HTML5预计是在2022年发布，但我认为它距离我们并不是那么遥远，因为在html5gallery就例举了大量正在使用HTML5的站点，当然包括本人BLOG在内。关于HTML5不得不提IE，在苹果、Google、Opera和Mozilla等主流浏览器厂商积极参与新版本HTML标准的制定和推广时，微软却对HTML 5规范不屑一顾。然而微软近期才表态要在IE中支持HTML 5，以致到今天为止的IE8及以下是无法支持HTML5标签的。但在sitepoint找到了让IE支持HTML5办法。以下是在的IE 8显示的例子,未作处理前：让IE(包括IE6)支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE在对象中创建对应的节点。<!--[if IE]> <script> document.createElement("header"); document.createElement("footer"); document.createElement("nav"); document.createElement("article"); document.createElement("section"); </script> <![endif]--> 添加以上代码后，在IE8中显示的效果如下：sitepoint例子中创建节点的JavaScript代码似乎过于臃肿，在smashingmagazine提供的代码似乎更简洁。Demo：http://blog.gulu77.com/demo/200908/html5_demo3.html<!--[if IE]> <script> (function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})() </script> <![endif]--> HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素，如下例：
IE9关键字:硬件渲染,新的JS引擎,CSS,标准
虽然IE6在依然是很重要的钉子户，但是我们不能放弃关注未来ie的变化。IE9 的几个关键字： 硬件渲染，新的JS引擎，CSS，标准大家期待已久的圆角也将支持了不过这里最让大家期待的是硬件渲染的支持。这可以让浏览器性能提高一个很高的档次。关于新的脚本引擎可以用下图来说明，这个测试是用著名的SunSpider来测试的更多信息可以从官方博客得到 :P
网页制作掌握的最常用的HTML标记
一、HTML常用标签的优化对于html，应该是网络编辑的基本技能，不熟悉是说不过的。作为网络编辑，所有的SEO参数没有必要全部掌握，但HTML基本标签中相关SEO的东西，大家有必要了解一下。 <html><head><title>页面标题</title><meta http-equiv=Content-Language content=zh-cn><meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”><meta name=“keywords” content=“关键词”><meta name=“description” content=“网页描述”>
网页设计教程:TabIndex元素
TabIndex就是按Tab键有顺序的获取定义过的TabIndex元素设置在各个元素之间的焦点。 做过表单或者填写过表单的人都会发现，使用Tab键可以逐一获得每个input的焦点。这个东东其实也是可以修改的，比如不想被获取，或者改变被获取的顺序。 在填写表单的时候（注册登录或其它），有很多用户都是不通过鼠标，而直接按Tab键跳到下一个文本框的，等到所有的东东都填好，然后是提交，这是一个非常好和方便的功能。我个人的习惯是，在填写完所有的东西时，提交一般都是用鼠标去点击提交按钮的，而且不希望Tab会使焦点跳到button上面，但我很少发现有使用Tab不会跳到button上的，不知道是不是个人习惯太BT了-_-!!! 如果不想某个东东被获取焦点，可以tabindex=-x，让tabindex的值为负，这样的话Tab就会直接跳过。下面用一个简单的表单做例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="gb2312" /> <title>TabIndex是干什么滴</title> <style type="text/css"> html,body { font:14px/200% Georgia, Verdana, Arial, "宋体"; } </style> </head> <body> <form method="post" action="#"> <p><label for="t1">The first pressing Tab to set focus to textbox </label><input type="text" id="t1" tabindex="1" /></p> <p><label for="t2">The Second pressing Tab to set focus to textbox </label><input type="text" id="t2" tabindex="2" /></p> <p><label for="t3">The Third pressing Tab to set focus to textbox </label><input type="text" id="t3" tabindex="3" /></p> <p>Press Tab, Not focusing to textbox <input type="submit" id="t4" tabindex="-1" value="SendInfo" /></p> </form> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]<form method="post" action="#"> <p><label for="t1">The first pressing Tab to set focus to textbox </label><input type="text" id="t1" tabindex="1" /></p> <p><label for="t2">The Second pressing Tab to set focus to textbox </label><input type="text" id="t2" tabindex="2" /></p> <p><label for="t3">The Third pressing Tab to set focus to textbox </label><input type="text" id="t3" tabindex="3" /></p> <p>Press Tab, Not focusing to textbox <input type="submit" id="t4" tabindex="-1" value="SendInfo" /></p></form> 使用Tab键，获取焦点的顺序就是通过tabindex的值大小来排序的。上面的例子依次获得焦点的是t1, t2, t3, 到t4的时候，由于TabIndex的值为-1，所以t4不会获得焦点，而是直接跳到下一个获取焦点的元素上。 t1, t2, t3, t4的TabIndex值可以根据实际需求任意更改，Tab焦点根据值由小到大被获得。 TabIndex就是用来做这些滴。。。
网页制作教程:TD也可以溢出隐藏显示
或许我这篇文章一取这样的名字，就会有人要问了：你怎么还在关注table啊，那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了，不知道还有什么好了。 table真的过时了么？你真的了解table么？你真的会用table么？ 打口水仗不是我们要做的，留给那些时间很充裕的人吧。 言归正传： 不记得是什么时候，有人在用table模拟DataGrid的时候说，为什么td超出设置为固定宽度的文字不能隐藏，而是会直接换行呢？ 是的，事实确实如此，如：<style type="text/css">table {width:500px;table-layout:fixed;}.col1 {width:100px;}.col2 {width:200px;}.col3 {width:200px;}td {white-space:nowrap;overflow:hidden;}</style><table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden"> <tr> <td class="col1">神舟 优雅Q400N</td> <td class="col2">优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td> <td class="col3">迅驰4平台，突出的性价比，漂亮的外观</td> </tr></table> 运行如上代码，你会发现单元格里超过固定宽度的文字不会被隐藏掉，而是换行显示了，显然，这并不是我的本意。 看起来，这似乎是table的一个特性，它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的组合，说到底就是white-space:nowrap这个东东没起作用，所以看起来overflow:hidden就失效了。{注：如果是一连串的无意义字符则可生效，例如：<td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>，这个时候就不需要{white-space:nowrap}来强制它在一行内显示，因为这一连串的a会被认定为是一个字而不发生换行，从而超出.col1宽度的a会被隐藏} ［解决方案一：］
网页页面实现自动刷新的3种代码
当你做网页时，是不是有的时候想让你的网页自动不停刷新，或者过一段时间自动跳转到另外一个你自己设定的页面？其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。1.页面自动刷新：把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面.2.页面自动跳转：把如下代码加入<head>区域中<meta http-equiv="refresh" content="20;url=http://www.poluoluo.com">,其中20指隔20秒后跳转到http://www.poluoluo.com页面3.页面自动刷新js版<script language="JavaScript">function myrefresh(){ window.location.reload();}setTimeout('myrefresh()',1000); //指定1秒刷新一次</script>