推荐阅读
Photoshop鼠绘高挑性感的外国美女图片教程
提供最初的线稿，想学习的朋友最好跟着来一遍，那会比你看一遍领悟得更多：好多朋友喜欢用线稿作为绘画的第一步，不然，不知道怎么画。我不喜欢最后的作品有墨线的痕迹，不过这次我做一个适合大家口味的。 一、起型，就像x光一样，先不考虑其他的，我们把人体的结构画出来……二、描绘衣服，头发……，加一点阴影，对塑造体积有个概念……三、在背景层上面涂上颜色，用的是cs自带的水彩画笔，但是在画笔属性里面添加了画笔压力…… 大致描绘背景……
PS打造朦胧意境之美的梦幻感外景婚纱照
本教程主要运用了Photoshop中的模糊滤镜、图层混合模式、图层样式以及调色处理等，制作出外景婚纱照片的朦胧梦幻感觉，使画面有一种意境之美，效果很不错。在此基础上，大家在处理类似照片时还可以尝试刷上一些星光笔刷之类的点缀，也许会有更好的效果。原图效果教程开始打开图像Ctrl+j复制一层滤镜.模糊.高斯模糊
实例学用CorelDRAW9（十）
十、阴影的建立（海鸥） 不要生气，实例又用海鸥，没办法，我只是太懒了……我不是说过吗？我希望用很简单的实例告诉你C9怎么用，而不是让你学会做这样或那样的实例……我保证下次再不了……这一次，我们将要用到的工具是“交互式下落阴影工具”，呵呵，一听名字就知道很专业……现在，我可以开始实例了？谢谢…… ^_^打开海鸥，启动“互动式下落阴影工具”，这时就可以开始了（就是“互动式渐变工具”菜单里最后一个图标，有阴影的那个）。第二步：做出阴影。在画面上点击鼠标，随意拖动一定距离，松开就可以了。注意，阴影控制线上的白色滑块离黑色块越近，则阴影越深，反之则越浅，你可以试着调节一下。这一步的效果如图51所示。
拍出专业玻璃照片的前期拍摄与后期PS处理技巧
在本教程中我将告诉你如何在前期拍摄和数码后期处理，用最少的照片来拍出专业玻璃照片。您将学习专业照明用光技巧来表现一些惊人的照片和时尚的背景。 使用相同的背景和道具，但使用不同的相机设置。首先，我将介绍两种常见的照片拍摄技巧，然后我会告诉你如何捕获每张照片和后期采取Photoshop的处理步骤。 先欣赏一下最终效果图： 最终效果 第1步：设备的准备 在我们开始之前，你应该准备以下几点： 玻璃(您可以分解成小块)、锤、一个或两个胶袋、手链、两张黑色A4纸或黑色文件夹、台灯、鼎、相机、图形程序。 第2步：收集碎片 在我们开始采取实际的照片，你要把你已经准备好的玻璃打破。这就是为什么你需要一个锤子和塑料袋，因为你肯定不希望这些碎片四处散落。放入袋(或两个杯子，如果你想成为完全相信他们会留在室内)，然后用锤子打几次。(图1) 图1
最新发布
CSS网页布局兼容性的要点与诀窍
IE vs FFCSS 兼容要点：DOCTYPE 影响 CSS 处理FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 widthFF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集使用XHTML+CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面。1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： 注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： 以下是引用片段：
CSS应用基础教程(3) 应用补充
挑选者特性的应用 在讲挑选者的特性之前，要提一下的是ＣＳＳ继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式，而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。 接下来就要讲挑选者特性的应用！其实这部份应该算是声明的一种方式，但是在您看过第二章的基本的声明与应用後，到这边再讲挑选者您会比较有概念点。在ＣＳＳ应用或设计的时候，有几种依据元素的关系或性质来设定显示特定性质的方法，就是挑选者特性的应用，能让您在控制与应用上更加灵活。一、前後文挑选者：依声明标签前後文关系显示特定性质的方法。 前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时，会考虑元素标签的前後关系，而去显示指定的样式声明。也就是说只要HTML原始码内的标签排列前後顺序符合时，该项声明便会发生作用了！元素A(标签A) 元素B(标签B) 元素C(标签C) ... { 样式规则}要注意的是，前後文挑选者的声明跟集体声明很像，但是集体声明的元素标签间要用逗号隔开，而用前後文挑选者声明时元素标签间要用空格隔开；而这两种声明方式您可以混合使用。 元素A 元素B, 元素C 元素D 元素E, ... { 样式规则}这样您就可以用集体声明的方式，声明数组前後文挑选者的样式规则。二、类别挑选者：让单一或数个标签使用同组样式规则的方法。 类别(class)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套 用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质，如下面范例所写即可。 <HTML><HEAD><STYLE><-- .blue { color : BLUE }--></STYLE></HEAD><BODY> ... <H1 class="blue">...</H1> ... <P class="blue">... </P> ...</BODY>要注意在声明时前面的小点，CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时，也可以应用类别特性来设定。 <HTML><HEAD><STYLE><-- P.blue { color : BLUE } P.red { color : RED }--></STYLE></HEAD><BODY> ... <P class="blue">...</P> ... <P class="red">...</P> ...</BODY>要注意同样是在声明时的小点，CLASS名称可任取。灵活运用类别特性，可以让您的样式设定更具机动性唷！三、ＩＤ挑选者：与类别挑选者类似，不同的是在『唯一性』。 ＩＤ特性的使用与类别特性十分雷同，但是，文件里的各个ＩＤ都是唯一的。换句话 说，类别特性可以重复套用在单一或数个元素标签之上，但是ＩＤ属性在一份文件里只能出现一次。如下面范例所写即可。 <HTML><HEAD><STYLE><-- #blue { color : BLUE }--></STYLE></HEAD><BODY> ... <P ID="blue">...</P> ...</BODY>可以看到，声明的方式是利用井字号『#』。而ＩＤ的这种『唯一性』正是让JavaScript或 VBScript能够对元素进行控制的关键。 透过以上的介绍的挑选者特性的声明与使用，可以让您的样式设定更具机动与变化 。其实您可以先熟悉上一章为您介绍的基本的声明与应用方法，再应用本章所讲的挑选者特性，一步步地去熟悉样式表的使用。 连 结 拟 似 特 性 的 应 用 还记得在HTML的基本语法，在BODY标签中可 以用link、alink、vlink属性去控制可连结或已连结的字体颜色吗？现在亦可用ＣＳＳ去控制这些性质，称为『拟似类别』（pseudo class）。您可以将其当作一般类别，声明其样式规则，而实际上，这些拟似类别并不用像上面讲的类别挑选者，在HTML原始码中再 行设定指向的类别（CLASS）。下面介绍拟似类别的声明与应用。
CSS应用基础教程(2) 应用方式
Ｃ Ｓ Ｓ 的 声 明 方 式 这章节将开始为您介绍ＣＳＳ的应用。当然一开始要介绍的是如何去建立个样式表 （Style Sheets），包括了声明的方式和应用在网页上的方法，最後还会为您概述一下ＣＳＳ的一些特性。概略来说，ＣＳＳ的声明有三种方式：一、基本声明：最典型的ＣＳＳ声明方式。 element {property: value} 用中文来表示的话，也就是元件(标签) {性质(属性)名称: 设定值}例如： H3 {COLOR: BLUE} 即为一组声明。二、集体声明：同时声明某个或数个元件(标签)（各元件(标 签)间以逗号分隔）的一组或数组样式规则(性质)（各组规则间以分号分隔）。 元件(标签) {性质(属性)名称1: 设定值1;性质(属性)名称2: 设定值2;... }或是元件A(标签A), 元件B(标签B), 元件C(标签C), ... {性质(属性)名 称1: 设定值1;性质(属性)名称2: 设定值2;...}例如： TD {COLOR: BLUE;font-size: 9pt;}或是TD,P,DIV {COLOR: BLUE;font-size: 9pt; }三、分项声明：将许多样式规则分组再分别声明。 元件A(标签A) {性质(属性)名称1: 设定值1; 性质(属性)名称2: 设定值2; }元件A(标签A) {性质(属性)名称3: 设定值3; 性质(属性)名称4: 设定值4; }例如： TD { COLOR: BLUE; font-size: 9pt}TD { font-family: "标楷体"; line-height: 150%}这样子的声明方式并不会互相抵触，因为所声明的性质是不同的。如果不小心对同样一个性质作了重复的声明，则只有後来声明的设定值才会发生作用。 要附带提一下的是，在您的声明中，只要您的格式正确就会被接受，而不论是大小写、空白或换行都不会对显示的结果 有影响的，您可依自己习惯来编写。 Ｃ Ｓ Ｓ 的 应 用 方 法 接下来要为您介绍的是将所建立的样式表应用在网页上的四种基本方法。一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。 <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如： <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。二、使用STYLE标签： 将样式规则写在<STYLE>...</STYLE>标签之中。 <STYLE TYPE="text/css"><!--样式规则表--> </STYLE>例如： <STYLE TYPE="text/css"><!--BODY { color: BLUE; background: #FFFFCC; font-size: 9pt}TD, P { COLOR: GREEN; font-size: 9pt}--></STYLE>通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以<LINK>标签引入。 假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入
CSS应用基础教程(1) 基本认识
ＣＳＳ是『Cascading Style Sheets』的简称，中文翻为「串接样式表」，也有人只翻为「样式表」。ＣＳＳ用以作为网页的排版与风格设计，在所谓的「新式网页」里 ，ＣＳＳ不容置疑是相当重要的一环。ＣＳＳ是以既有的基础，用以弥补既存ＨＴＭＬ 规格里的不足，也让网页的设计更为灵活。 这份教学文件就要来为您介绍ＣＳＳ的应用罗！在这边并不介绍ＣＳＳ的所有规格 ，仅就您在网页写作上较常用到，较可能用到的语法部份及应用的方法来为您作介绍。也 由於现在两浏览器的相容是渐行渐远，将贴心地为您注明支援该语法的浏览器。而ＩＥ从 3.0开始便支援部份语法了，这点也会为为您注明的。 各 章 节 的 概 略 介 绍 为了您参考与学习上的方便，在这里先为您大略地说明一下这份教学文件各章节所包含的内容吧！让您在参考时有个方向与概念。基本上，前两章著重於概念与基本认知的建立，也就是一些为您做一些札根的工作；第三章则为您补充在应用与设定上的一些其它方式或特性的说明与介绍。而第四章到第六章则著重於语法、参数与性质的介绍，也 就是真正建立在样式表里面的东东。第一章 ＣＳＳ的基本认识： 就是本章啦！就介绍您一些ＣＳＳ基本概念与认识。第二章 ＣＳＳ的应用方式： 为您介绍ＣＳＳ的基本宣告、应用方法与特性介绍。第三章 ＣＳＳ的应用补充： 为您介绍ＣＳＳ的其它宣告方式、应用与特性介绍。第四章 页面性质的ＣＳＳ： 为您介绍页面性质的ＣＳＳ相关语法、参数与性质。第五章 文字性质的ＣＳＳ： 为您介绍文字性质的ＣＳＳ相关语法、参数与性质。第六章 区块性质的ＣＳＳ： 为您介绍区块性质的ＣＳＳ相关语法、参数与性质。 应 用 上 的 基 本 认 识 应用ＣＳＳ并不困难，但是请您先参考这里的基本认识，对一些用语有了一点基本概念後，对於您在看後面的教学会有助益，看起来也才不会太吃力！一、基本用语的认识： 元件(element)：亦即HTML基本语法中的标签(tag)。属性(attribute)：用以描述标签特性的属性。例如： <HR WIDTH="90%">中，HR为标签，WIDTH为属性，而80%即为WIDTH属性的值。性质(property)：用以描述元件的特性。相当於HTML基本 语法中的属性。样式(style)：拥有一组或数组的性质，用以描述元件特性。挑选者(selector)：套用样式的元件。例如： H3{ COLOR : BLUE }中，H3为挑选者，COLOR为性质，BLUE为COLOR性质的值。二、基本单位的认识： 有相对单位与绝对单位两种单位 表达方式。相对单位： 『em』：相对於字母高度的比例因子。『en』：相对於字型大小的比例因子。『%』：相对於长度单位（通常是目前字型的大小）的百分比例。绝对单位： 『in』：英寸。『cm』：公分。『mm』：公厘。『px』：像素（系统预设单位）。『pc』：pica，印刷活字单位。『pt』：像点。相对关系：1in= 6pc= 72pt= 2.54cm= 25.4mm三、颜色使用的认识： 颜色的表示共有五种方式。『#RRGGBB』： 以三个00到FF的十六进位值分别表示0到255十进位值的红、绿、蓝三原色数值。『#RGB』： 简略表示法，只用三个0到F的十六进位值分别表示红、绿、蓝三原色数值。而事实上，浏览器会自动扩展为六个十六进位的值，如『#ABC』将变为『#AABBCC』。但是，显见这样的 表示法并不精确。『rgb(R,G,B)』： 以0到255十进位值的红、绿、蓝三原色数值来表示颜色。『rgb(R%,G%,B%)』： 以红、绿、蓝彼此相对的数值比例来表示颜色，如『rgb(60%,100%,75%)』。『Color_Name』： 直接以颜色名称来表示颜色，共有141种标准的颜色名称。
DropShadow属性、Chroma属性和blur属性效果
DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。看一看它的表达式： Filter：DropShadow（Color=color，Offx=Offx，Offy=offy， Positive=positive） 该属性一共有四个参数： Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。 Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。 同样，我们先来看一个例子（见下图）： 看，图中的文字就像是从页面上飞出来一样，并且留下了一层淡淡的影子。 实际上在这里应用的就是CSS的DropShadow属性，我们来看一下它的代码： <html> <head> <title>dropshadow </title> <style>//*定义CSS样式*// <!-- div {position:absolute；top:20；width:300； filter:dropshadow(color=#FFCCFF,offx=15,offy=10,positive=1)；} --> file://*定义DIV范围内的样式，绝对定位，投影的颜色为#FFCCFF， 投影坐标为向右偏移15个像素，向下偏移10个像素*// </style> </head> <body> <div> <p style=“font-family：matisse itc；font-size：64； font-weight：bold；color：#CC00CC；”> file://*定义字体名称、大小、粗细、颜色*// Love Leaf </p> </div> </body> </html> 和chroma属性一样，Dropshadow属性对图象的支持不好，我指的是JPEG、GIF格式的图象文件。不能支持的原因与Chroma一样，因为这种图象的颜色很丰富，很难找到一个投射阴影的位置。 Chroma属性 Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下： Filter：Chroma（color=color） 这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图： 图中显示两种字体，两种颜色，我们现在对“leaves”字体添加chroma属性，使其透明。代码如下： <html> <head> <title>chroma filter</title> <style> <!-- div{position：absolute；top：70；width：200； filter：chroma(color=green)} file://*定义DIV范围内绿色为透明色，另外设置DIV的位置*// p{font-family：bailey；font-size：48；font-weight：bold； color：green} file://*设置P的字体名称、大小、粗细、颜色*// em{font-family:lucida handwriting italic；font-size:48； font-weight：bold；color：rgb(255,51,153)} file://*设置EM的字体名称、大小、粗细、颜色*// --> </style> </head> <body> <div> <p>LEAVES <em>LOVE</em></p> </div> </body> </html> 通过上面代码中对chroma的属性设置，使绿色透明。显示效果如下图： 我们看到绿色的leaves字体不见了，实际上它是透明了，在IE下点击它所在的区域，它还是会显示出来（见下图）： 另外，需要注意的是，chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理（比如JPG、GIF等格式），所以它们很少有固定的位置可以设置为透明。
创建并引用样式类
在第一种方式中，我们可对某一类型的标志建立样式类，如： 上边的例子中，所有段落标志的字体都为宋体，大小为10pt，颜色为红色，由于排版的需要又分成了三个样式类，分别具有不同的排版属性，从这个例子你可以看出层叠样式单之所以为层叠，其意义也在于此。 第二种方式的用处则在于它规定的样式类，没有特定于某一类标志，而是其它类型的标志都可以用。 如： 它规定了三个样式类，几乎所有的类型都可以引用它们。 有一点要注意，样式类与我们上节所讲的统一风格形式并不相冲突，样式类更多地强调了风格的异，而统一的设置形式则强调了风格的同。两者常相互结合，实现样式风格的叠加，使网页风格在整体统一的基础上而各自又绚丽多彩。 二、样式类的引用 样式类的引用很简单，只需在标志后面设置Class属性值为样式类名即可，引用格式如下： <标志 Class="样式类名"> 如我们上边用第一种方式建立的样式类在一个段落标志中引用， <P Class="isLeft">你好，欢迎你来到网页制作学习园地</p>。 要再次提醒一下，用第一种方式设置的样式类只能用于样式类所属的标志类型的标志中；而第二种则没有限制。 如果我们要动态改变某个引用了样式类的标志风格， 可通过脚本语言来修改标志对象的className属性，具体方式如下： 所要修改标志的标识号.style.className="样式类名"，如对一标志<p id="p1" class="isLeft">hello</p>修改为右排列的样式，在脚本语言中修改语句如下： p1.style.className="isRight"
Invert属性、Glow属性和FlipH、FlipV属性
Invert属性 Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。 它的表达式也很简单： Filter：Invert 我们再来看一下加上Invert属性前后的图片效果变化（如下图）：原图 Invert属性效果图 我们看到Invert属性实际上达到的是一种“底片”的效果。 自己拿别的图来试试吧。 Glow属性 当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如下： Filter：Glow（Color=color，Strength=strength） Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。 让我们先来看一下加上Glow属性的效果图：
让网页中的字体美起来
你可能正建立自己在网上的家-WEB页，又或者它已经被你安置在网络某一角里。无论出于什么目的,你都希望有更多的指导,告诉你该如何更好的布置家。 在目前许多的指导中，他们都在诉说，应该加一点声音或者一个说话的场地。的确我们都需要它，但我希望关心更多WEB家里底层的东西，比如如何把字体弄的漂亮些，或者让页面颜色变的活泼些，让访问者增加“看欲”，还有更多你曾经都没有关注的细微之处。今天，我们首先来探讨页面的字体。一.HTML中定义字体 二.CSS(层叠样式表)改变字体 在过去页面上的字体是一成不变的，静静的呆在那。当DHTML(动态网页)出现后，我们能有更多方式控制字体了。一般来说，动态字体的实现核心是CSS(层叠样式表)加JavaScript。使用了以上两项技术后，字体就能产生许多变化。 三.让字体动起来 要让字体动起来，我们可以利用本身CSS的事件或者让JavaScript引发事件。 2.JavaScript引发事件。
WEB2.0标准教程:第九天 第一个CSS布局实例
接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，我们开始：w3cn的最初设计草图如下：用表格的设计方法的话，一般都是上中下三行布局。用DIV的话，我考虑使用三列来布局,成为这样。先定义整个页面的body的样式,代码如下：以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义:注意：定义中列和右列div我都采用了POSITION: absolute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。这时候整个页面的代码是：这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？