推荐阅读
CorelDRAW绘制绿色的森林一角场景
该实例制作了一幅森林场景画面，画面以绿色调为主，通过不同绿色之间的搭配关系营造出丰富的色彩关系。在处理手法上要注意表现画面的纵深感，并且要层次分明、主次有序。图3-2为本实例的完成效果。图3-2 本实例完成效果3.1.1 技术提示本实例的画面具有一定的纵深感，制作时通过为图形添加阴影效果，拉开了画面的层次，给人一种纵深的空间感。如图3-3所示，为本实例的制作流程。图3-3 本实例制作流程3.1.2 制作步骤：绘制远景植物(1)启动CorelDRAW，新建一个工作文档，在属性栏中将“微调偏移值”设为0.1mm，其他参数保持系统默认。然后使用“矩形”工具，在视图中绘制矩形。如图3-4所示。
Photoshop调出唯美冷色效果的外景人像
最终效果原图1、打开素材图片渐变映射调整图层，参数如下 选用较暖的明暗色作为叠加层，确定后把混合模式改为“叠加”，不透明度改为：30%，如下图。2、创建色彩平衡调整图层，参数及效果如下图。
(10-2):使用字符调板
1012以上是在文字工具的公共栏中出现的选项。在点击了字符调板按钮后即会出现字符调板【窗口_字符】，如下图。在其中可以对文字设定更多的选项。在实际使用中也很少直接在公共栏中更改选项，大多数都是通过字符调板完成对文字的调整的。其中的字体、字体形式、字号、颜色、抗锯齿选项就不重复介绍了。注意其中的为亚洲文本选项，需要在Photoshop首选项〖CTRL_K〗的常规选项中开启“显示亚洲文本选项”才会出现。1013拼写检查选项是针对不同的语言设置连字和拼写规则，如下右图显示了英国英语和美国英语对同样文字的不同连字方式。注意，末尾连字只有在框式文本输入时才有效。因为框式文本是自动换行的。通过手动换行的文字是不会有连字效果的。有关框式文本的输入方法在本节后面部分介绍。连字和拼写规则对于中文是没有意义的。因为汉字为单体结构，即一个汉字字符已携带完整含义，而字母系语言需要多个字符组合才能携带完整含义。也正是因为汉字携带的信息巨大，因此现在电脑的计算能力还不足以完美处理中文化的信息结构。-1014行间距控制文字行之间的距离，若设为自动，间距将会跟随字号的改变而改变，若为固定的数值时则不会。因此如果手动指定了行间距，在更改字号后一般也要再次指定行间距。如果间距设置过小就可能造成行与行的重叠。如下左图是自动行距与手动指定为12像素行距的比较。如果有重叠发生，下一行文字将会遮盖上一行。1015竖向缩放相当于将字体变高或变矮，横向缩放相当于变胖和变瘦，数值小于100%为缩小，大于100%为放大。如下右图中3个字分别为标准、竖向50%、横向50%的效果。-1016在字符调板中有比例间距和字符间距，它们的作用都是更改字符与字符之间的距离，但在原理和效果上却不相同。我们可以动手来理解它们的区别，新建一个足够大的图像，打上simple这几个字母，字体为黑体，大小为72像素。如下图左端所示，我们看到整个文字的宽度是由字符本身的字宽与字符之间的距离构成的。这两者都是在制作字体的时候就定义好的。有的字符本身较窄，但其左右的字距也较大，这样做是为了保证每个字符占用的宽度一致。否则，较窄的字符就只能占用较小的宽度。但这种设计却也造成了字符之间疏密不同。如下图中的mp之间与pl之间的疏密就不同。这种情况一般出现在使用中文字库输入字母的时候，Windows系统自带的黑体、宋体、楷体字体都存在这种现象。因此输入英文时应避免使用这些字体。字宽与字距间的比例将随着字号的大小相应改变，也就是说，对于同一个字体来说，字号越大，字符之间的距离也越大。反而反之。那么，字符间距选项的作用相当于对所有字距增加或减少一个相同的数量。可手动输入数值。如下图中将字符间距减去100，所有的字符间距都减去100，字符就互相靠拢了。但是这样做并没有改变疏密不同的情况，尽管mp已经是互相紧靠着密不透风，但pl还是有很大的距离。当然，如果继续减少字符间距也可以最终令pl之间也“密不透风”(设为-300左右)，但mp之间却会产生重叠的效果了。我们可以用一个简单的算式来理解：假设mp原来的距离为100，pl之间的距离为300，当字符宽度设置为-100的时候，mp之间的距离为0，pl之间的距离还有200。要令pl之间的距离为0，字符宽度必须设置为-300，但同时mp的距离必须为-200，所以mp产生了重叠的现象。比例间距选项的作用是同比例地减少(注意，只能是减少而不能增大)字符的间距。按照上一个算式中的前提来假设计算的话就是：当比例间距设为50%，相当于所有字符间距减半(mp间距为50，pl间距为150)，当设为33%的时候，所有字符间距减为原先的三分之一(mp间距约为30，pl间距为100)，当设为100%的时候，所有字符的间距就都被降为0了。因此我们看到的效果是所有字符都彼此依靠(抗锯齿选项及字体形式的不同可能带来微小差异)。1017间距微调选项是用来调整两个字符之间的距离，使用方法与字符间距选项相同。但其只能针对某两个字符之间的距离有效。因此只有当文本输入光标置于字符之间时，这个选项才能使用。1018竖向偏移(也称基线偏移)的作用是将字符上下调整，常用来制作上标和下标。正数为上升，负数为下降。一般来说作为上下标的字符应使用较小的字号。如下图。1019强迫形式的名称是我们为了与文字形式相区别而起的，它的作用也和文字形式一样是将字体作加粗、加斜等效果，但选项更多。即使字体本身不支持改变形式，在这里也可以强迫指定。它与字体形式可以同时使用，效果加倍(更斜、更粗)。其中的全部大写字母选项的作用是将文本中的所有小写字母都转换为大写字母。而小型大写字母选项的作用也是将所有小写字母转为大写，但转换后的大写字母将参照原有小写字母的大小。如下图所示。上标与下标选项的作用与竖向偏移类似，就是增加了可同时缩小字号的功能。下划线选项与删除线选项的作用是在字体下方及中部产生一条横线。
用PS完美抠出复杂的羽毛头饰的简单教程
打开如下图片，复制图层，将 背景 层锁定。我们将在复制层进行抠图，隐藏背景层。选择 >> 色彩范围，打开色彩范围窗口，选择最左边的吸管工具并点击图像背景，这时在色彩范围窗口中你会发现被选择部分变成了白色，移动颜色容差滑杆，使得图像大部分区域变成黑色，并且背景易于选取。提示：要添加颜色到选区时，应使用中间的吸管工具点击要添加的色彩部分2 获得选区，在通道面板中，按下“将选区存储为通道”按钮，得到一alpha通道，取消选择（Ctrl+D），点击“Alpha 1”层，这时图像变成黑白色。提示：图像中的黑色区域是我们要保留的部分，白色为要扣除的部3 这时我们发现图像中还有部分灰色区域，这些将成为半透明区域，所以必须将他们调整为纯黑色或纯白色。图像 >> 调整 >> 色阶，打开色阶窗口，由左向右拖动黑色滑杆直到灰色区域变为纯黑色为止。由右向左移动白色滑杆将白色区域变的更清晰4 选择黑色笔刷并提高笔刷边缘硬度，涂抹需要保留的区域，用白色笔刷涂抹羽毛边缘，根据涂抹区域大小的不同使用不同粗细的笔刷
最新发布
Dreamweaver CS3 Beta界面功能大曝光
包含在Adobe Creative Suite 3.0中的Dreamweaver 9究竟如何?让我们来一探究竟。首先，安装界面给人的感觉比Macromedia门下的8.0要漂亮许多，Splash也很有质感。笔者一直很讨厌8.0的Splash画面，但随后笔者就发现一个问题，DW的Logo好像不见了。 图1 Dreamweaver 8与9(Alpha1)的启动封面对比这次Dreamweaver新增了SprySpry。Spry是Adobe推出的Ajax Framework(Spry DemoSpry Demo)，它能与Dreamweaver无缝的整合，直接用拖拉的方式完成程序代码的编写。但笔者一直认为DW是留给网页设计师的东西，如果你是一个Web程序员还是不要期待它会给你带来多大的惊喜。 据说Adobe Dreamweaver 9(CS3) Alpha 1为期2周的测试之后将放出Beta版，到时大家都能下载尝尝鲜了。相信它肯定是支持微软最新发布的Vista系统，但是否和Photoshop CS3一样原生支持Intel-MacPhotoshop CS3一样原生支持Intel-Mac就不太清楚了。 图2 DW CS3的主界面 更多Adobe Dreamweaver 9(CS3) Alpha 1截图。在为期2周的测试之后，Adobe将放出Beta版的DW 9。 图3 安装向导正在初始化
使用Dreamweaver MX表格排序功能
教育信息化时代，考试成绩也要求上网公布。一次我将考试成绩制作成一个HTML文件，如图1所示，领导审查的意见是“将成绩按名次排列”，可是所有的成绩已经用Dreamweaver MX制作好了，若先用Execl按要求排序，再导入到Dreamweaver MX制作，呵呵！太麻烦了，早就知道Dreamweaver具有排序功能，一直没有实战，何不利用Dreamweaver MX演练一番？ 在Dreamweaver MX中，您可以对一列的内容进行简单排序，也可以对两列的内容进行更为复杂的排序。您不能对包含有Colspan或Rowspan属性的表格进行排序的，也就是说，不能对那些包含有合并单元格的表格进行排序。 下面就看一下具体的排序过程吧！ 1.将光标移动到表格内任一单元格内，或选定表格，单击“Command/Sort Table…”，打开Sort Table对话框，如图所示。 2.在对话框中进行如下的选择： 在Sort By选项中选择要排序的Column(列)。 在Order选项中选择是根据alphabetically(字母)还是根据Numberically(数字)进行排序。 当列的内容是数字的时候这个选项是非常重要的。数字的排序是对列表按照一位和二位这样进行的(如 1, 10, 2, 20, 3, 30)，而不是一个整齐的数字序列(如 1, 2, 3,10, 20, 30)。
网站设计中标准网页广告规格
现在许多商家将广告战开始移到网络，于是乎只要是稍有名气的网站，其网页的每一个角落都挤满了各式广告，有大有小，有动有静，实在也是屏幕上的一大“风景”，但只要你稍加注意，便会发现这些广告的尺寸都有一定的规格，并不是任意而为的。国际上规定的标准的广告尺寸有下面八种，并且每一种广告规格的使用也都有一定的范围。 一、120*120，这种广告规格适用于产品或新闻照片展示。 二、120*60，这种广告规格主要用于做LOGO使用。 三、120*90，主要应用于产品演示或大型LOGO。 四、125*125，这种规格适于表现照片效果的图像广告。 五、234*60，这种规格适用于框架或左右形式主页的广告链接。 六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。 七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。 八、88*31，主要用于网页链接，或网站小型LOGO。
理解Web框架，和如何构建一个CSS框架
什么是框架? 为了便于沟通，我们给“框架”统一一个定义（至少在本篇文章中是统一的）：一套包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，目标是使设计师和开发人员把重点放在任务项目所特有的方面，避免重复开发。通常的讲，框架就是上面提到的JavaScript框架和Web应用框架。 需要强调说明的是，我们不必讨论构造、打包发布，相反，一个框架只为你或你的团队使用即可。CSS框架 有些时候，你可能尝到了抽象类似的CSS代码的甜头，在那些同时设计几个类似网站的设计师身上表现最为明显。此外，团队中的设计师们从框架的方法上有很多的获益。比如，我在一家报馆工作，所有的20多个网站保持着很多的共同点，基于新闻网站的特点，它们趋向于更加相似，而不是差异。但是，即使单独一个设计师，设计一个从表面上看有差异很大的项目，也可以为CSS框架抽象出一些通用的小碎片。 劳伦斯日报（Lawrence Journal-World），我在那里工作，我们最近建立了一个CSS框架，并发现它是一个巨大的效率倍增。当然，我们花了数天时间自己创建了一个CSS框架，但一旦框架完工，开发高质量网页的速度是极快的。更何况，既然团队每一个设计师现在都使用这个框架，当一个设计师修改另一个团队成员网页时，他们不再需要花20分钟理解别人的构建思路，可以马上上手。 有那些可以忽略? 当投入到一个整体性很强的CSS框架，你想寻找的东西，是每个项目都做了一遍又一遍的重复通用的代码，目标是巩固这些代码核心地位，遵循“不重复自己（Don’t Repeat Yourself）”编码方法。这使得维护工作容易了许多，还可以帮访问者节省带宽开销。 几乎每个我参与的项目中，我必须声明的几个CSS问题： “大量重置”浏览器默认风格，比如，设置所有元素的margin和padding为0，去掉框架（framesets）和图片（images）的border，等等。 以基线对齐。这包括诸如设定块级元素的margins相同的(或多个)基准行高，如段落（paragraph）、头（header）、以及列表（list）。 创建表单（Form）的基本样式。 创建几个常用的CSS 类，例如，.hide(把display置为none，即隐藏元素)、.mute(设定为一个较小的字体和较亮的颜色)。 还有更有趣的事情，许多网站设计师发现自己不断重复使用着相同的基本结构，为什么不动它整理成自己的，在某种程度上可以非常灵活的用于多个网站?Yahoo这样做了，这就是YUI。当我们为的劳伦斯日报网站（the Journal-World）建立CSS框架的时候，我先看看Yahoo是怎么做的。我们很肯定那不是我们想要的，但作为一个很好的例子，给我们提供了很多思考和如何建构自己框架的想法。我们解决了16个单元格的问题，它具有足够的灵活性使我们的每一个网站都可以应用，即使每个网站看上去与下一个版本有些差异。另外大多数网站共用widgets ，象下拉菜单、导航菜单、按钮等，这些也是主要的需要抽象提取的对象。除此之外,你可能有共同的内容名称，如图片列表的缩略图，你可以规范对CSS命名，如“thumbnail-list”，让所有显示缩略图的都使用这个CSS类。
空格的宽度问题
首先对空格宽度的定义：空格，由于每个浏览器处理会有微小的不同，在这里我将可以选中的宽度作为空格的宽度。视觉宽度和可选中的宽度有 0~3px 的差异（由于 kerning table 的不同），但以下测试的三种浏览器中相同。又因在 ClearType（次像素平滑）情况下视觉宽度有所不同（据猜测可选中的宽度应该和不开 ClearType 一致），简单起见，本文仅研究不开 ClearType 的情况。 测试环境：Firefox 2.0.0.6 / IE 6.0.2900 / IE 7 on WinXP, XHTML transitional （经测试与DTD无关），以下表格中的数字如无单位，均表示像素（px）。 测试方法：利用 CSS 定义字体和字号，选中空格（中-中、英-英、中-英、英-中四种情况），截图并计算宽度。 另外以下提到的 font-size: 11px; 都是指定义的字号，在 Firefox 下忠实显示，在 IE 下实际显示的字号有所不同，经测试如下图： FF下的11px和13px汉字 IE6下的11px和13px汉字 IE7下的11px和13px汉字
制作网页必须注意的几个问题
1.配色问题一个网页的色彩最好不要超过3种，一面视觉效果混乱，用色柔和，对比度强的色彩不能应用于一般网站，时尚网站使用还可以。一般不好搭配的颜色，用灰度搭配。2.字体问题很重要的一个问题， 用标准字标准色，这是一个规范，行距一般控制在20px左右，不要太小，也不要太大，自己大小注意，中文12px，英文11px或者10px。不要用黑色字，可以用灰度或者其它柔和颜色，统一整个网页字体的色彩以及大小，规范整体。3.布局规范布局是非常重要的，考虑客户浏览习惯以及他们想展现的内容，并且优化。一个网页，如果布局不合理的话不但影响浏览，而且非常难看。4.制作习惯必须非常熟悉各种网站的功能，要做得非常全面，比如说一个商城的网站应该有哪些内容必须非常清楚，不要等客户提出之后才补充上去，会显得自己非常不专业。5.不可忽视细节客户对网站的感觉不好，不过又说不出，多半是细节处理问题，细心的处理网页的每一个象素，力求完美。
XHTML1.0、XHTML Basic、XHTML1.1及XHTML2.0区别
首先基于HTML 4在XML中的再次阐述，结果产生了XHTML1.0。随着XHTML1.0规范的附录C发布的HTML Compatibility Guidelines（HTML兼容性指导），使XHTML1.0文档一致的存在于HTML用户代理。 接下来一步，为了便于在文档中集成使用，模块化了元素属性，通过整合XHTML和其他标记集合。这个模块在 Modularization of XHTML一文中规定。XHTML Basic是在这些模块中公认的最小架构及目标是移动应用程序开发方向的一种语言。 XHTML1.1是大型架构模块的一个实例，消除了许多表现层的特征。虽然XHTML1.1看起来非常类似于XHTML 1.0 Strict，但他被计划用来充当将来扩展XHTML家族系列文档类型，以及其模块设计使他更容易的增加其他必须模块或将其本身整合到其他标识语言中去。XHTML 1.1 plus MathML 2.0 文档类型是类似XHTML家族系列文档类型的一种。 Www.Chinaz.com XHTML2.0是打算给丰富的，可移植的基于web的应用程序使用的。虽然XHTML的祖辈来自HTML 4, XHTML 1.0,和XHTML 1.1,但并不打算同早先的版本进行向后兼容。他是作为Modularization of XHTML中规定的一种XHTML宿主语言。同样的，他由一系列XHTML共同描述语言的元素和属性，及他们的内容模型的模块组成。XHTML 2.0更新了定义在Modularization of XHTML的许多模块,及包含了所有那些模块及语义的更新版本。XHTML2.0也使用来自Ruby, XMLEvents,和 XForms的模块。
HTML 5 新增的元素
在本人看来，HTML 5是一个妥协方案，虽不激进，但更能推动技术的继续进步。没有命名空间，元素也不要求闭合（当然这并不是优点），浏览器也可以宽大处理一些错误。一切沿袭上个世纪HTML 4的做法。对于HTML的渲染，浏览器一直停留在1999年的水平。为此，HTML 5是一个实用主义方案，这样不仅可以继续处理这么多年来散落在世界各个角落的HTML，也可以让浏览器厂商更容易添加新特性。这就叫degrade gracefully（优雅降级）。让我们来看看HTML 5增加的一些新元素。 结构元素 这真是大快人心。目前，我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部，底部或者侧栏等。有了它们，代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。HTML 5增加了新的结构元素来表达这些最常用的结构： Www_Chinaz_com section: 这可以表达书本的一部分或一章，或者一章内的一节 Www@Chinaz@comheader: 页面主体上的头部。并非head元素
JavaScript的9个陷阱及评点
来自 Nine Javascript Gotchas , 以下是JavaScript容易犯错的九个陷阱。虽然不是什么很高深的技术问题，但注意一下，会使您的编程轻松些，即所谓make life easier. 笔者对某些陷阱会混杂一些评点。1. 最后一个逗号如这段代码，注意最后一个逗号，按语言学角度来说应该是不错的（python的类似数据类型辞典dictionary就允许如此）。IE会报语法错误，但语焉不详，你只能用人眼从几千行代码中扫描。<script> var theObj = { city : "Boston", state : "MA", }</script> 2. this的引用会改变如这段代码：<input type="button" value="Gotcha!" id="MyButton" ><script>var MyObject = function () { this.alertMessage = "Javascript rules"; this.ClickHandler = function() { alert(this.alertMessage ); }}();document.getElementById(”theText”).onclick = MyObject.ClickHandler</script>并不如你所愿，答案并不是”JavaScript rules”。在执行MyObject.ClickHandler时，代码中红色这行，this的引用实际上指向的是document.getElementById("theText")的引用。可以这么解决：<input type="button" value="Gotcha!" id="theText" ><script>var MyObject = function () { var self = this; this.alertMessage = “Javascript rules”; this.OnClick = function() { alert(self.value); }}();document.getElementById(”theText”).onclick = MyObject.OnClick</script>实质上，这就是JavaScript作用域的问题。如果你看过，你会发现解决方案不止一种。
科学与艺术兼顾的有效网页视觉设计
上面是来自澳洲 Hiser Group 的网页视觉设计元素归纳图示，他把网页中可能涉及的视觉设计分成了屏幕布局，图形用户界面和品牌形象三个模块。但是根据考虑角度的不同，我个人觉得应该稍微调整一下，可以把网页视觉设计简单分为两个类型：基于科学考虑的功能性图形设计和基于视觉艺术考虑的视觉冲击设计。