推荐阅读
Photoshop调色制作动漫色彩效果的古堡照片
本教程介绍鲜丽图片调色方法。效果图虽然有点曝光过度，不过恰到好处。作者正是用这种稍微过曝的色调来表现自己独特的风格。 最终效果原图一、打开原图素材，适当裁剪大小，然后创建曲线调整图层，参数设置如下图。二、新建一个图层，按Ctrl + Alt + Shift + E 盖印图层。执行：滤镜 > 杂色 > 减少杂色，数值：强度为：9；保留细节为：60%；减少杂色为：45%；锐化细节为：12%。三、新建一个图层盖印图层，适当把图层锐化一下。新建一个图层，填充颜色：#5cf0ee，图层混合模式改为“颜色减淡”，不透明为：30% 打开下图所示的云彩素材，拖进来图层混合模式改为“滤色”，加上图层蒙版，用黑色画笔把城堡部分擦出来。
曲奇饼效果字
第一步：建一个宽10cm高5cm、模式为RGB Color、背景色为白色的新文件。选中通道面板，点击右边的小三角形，在弹出的菜单中选择新通道，保持默认值按确定按钮，得到一个新的通道Alpha1。使Alpha1通道成为当前通道，选择直行文本输入工具，单击图像，在弹出的文字工具窗口中输入英文字母mm，字体选择Arial Black、大小选择120点，确定。用鼠标右键单击通道面板中的Alpha1通道，选择复制通道，保持默认值按确定按钮，这样我们就建立了一个Alpha1通道的副本。 第二步：选中Alpha1通道副本，选择滤镜菜单下的风格化子菜单，选择拼贴选项，在弹出的窗口设置拼贴数为5、最大位移为1、填充空白区域为背景色，单击确定。 第三步：保持对Alpha1通道副本的选择，点击选择菜单，选择修改下的扩展选项，在弹出的窗口中设置扩展量为1象素，单击确定，此时可以看到图像向外扩展的效果。然后再选择滤镜菜单的其它子菜单，再选最小值，在最小值窗口中设置半径为3像素，单击确定，此时可以看到图像中白色的色块变小了，这是为了显示曲奇饼点状效果。 第四步：取消对文字的选择，回到通道面板，用鼠标右键单击Alpha1通道，选择复制通道，保持默认值按确定按钮得到Alpha1通道副本2。保持对Alpha1通道副本2的选择，选取滤镜菜单的模糊项再选择高斯模糊，在窗口中设置模糊半径为3像素，确定。选取选择菜单的载入选区项，在窗口中设置通道为Alpha1通道副本，不选反相，选中新选区，单击确定按钮，此时复合图像具有虚线边缘文本。然后再点击选择菜单的修改子菜单下的平滑选项，窗口中设置取样半径为1像素。接着按Ctrl+Alt+D，弹出羽化半径属性框，设置羽化半径为1像素，确定。选择前景色为灰色，选择编辑菜单中的填充项，以前景色填充，其它选项保持默认值按确定按钮。取消对文字的选择。 第五步：选中RGB复合彩色通道，点击选择菜单下的载入选区项，在窗口中设置通道为Alpha1，其它保默认值，确定。点取选择菜单下修改中的扩展，扩展量为1像素。再选择修改中的平滑项，取样半径为1，确定。选择一种你喜欢的颜色做为前景色并用它填充文本前景。然后选择滤境菜单下渲染的光照效果，参数设置为：样式Default、光照类型为点光、强度13、聚焦100、光泽59、材料41、曝光度17、环绕4、纹理通道为Alpha1副本2、选中白色部分凸出、高度15。 第六步：选中工具条中的矩形框选工具，先后按两 下键盘上的向右键和向下键。再次选择载入选区菜单，设置通道为Alpha1，不选反相，选中从选区中减去，按确定按钮。然后按Ctrl+Alt+D，弹出羽化半径属性框，设置羽化半径为2像素，确定。再单击移动工具，先后按两下键盘上的向上键和向左键。设置前景色为灰色，选择填充，把文本的前景色填满。最后取消选择，至此全部完成。
最新发布
HTML标记em和strong的区别
em 和 strong 的区别，可以从三个层次上来谈。首先看 HTML 4.01 中的说明：EM: Indicates emphasis.STRONG: Indicates stronger emphasis. em 表示强调，strong 表示更强烈的强调。言简意赅，表明了 em 和 strong 的命名来历。并且在浏览器中，em 默认用斜体表示，strong 用粗体表示。这是第一个层次上的区别。第二个层次上，在 Emphasis in context versus overall highlighting 和 em vs. strong 这两篇文章中，做了很好的总结：em 用来局部强调，strong 则是全局强调。从视觉上考虑，em 的强调是有顺序的，阅读到某处时，才会注意到。strong 的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果，因此也就成了 em 和 strong 的默认样式。感觉上面已经解释得很清楚了？我们再来看看第三个层次上的区别。HTML5 草案 中做了详尽解释：em 表示内容的着重点（stress emphasis），strong 表示内容的重要性（strong importance），strong 不会改变所在句子的语意，em 则会改变所在句子的语义。并且举了一个非常好的例子：<p><em>Cats</em> are cute animals.</p>强调猫，讨论的是哪种动物聪明可爱。
HTML教程：DOCTYPE 的缩写
写HTML代码的时候，第一行就要写DOCTYPE，而DOCTYPE一般都很长，大家也懒得去记，所以基本都是直接去复制以前写过的。不过今天了解到一种 DOCTYPE 的缩写，如果你的 DOCTYPE 是下面这样的话：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">可以用下面的缩写来代替：<!DOCTYPE HTML> 简单，好记，这样以后就不需要去复制了。BTW，我想举一反三试一下 <!DOCTYPE XHTML> ，结果失败，页面成了“混杂模式”，大家有什么其他的技巧欢迎提供。
HTML教程：title属性与alt属性
XHTML是CSS布局的基础，poluoluo.com一直强调XHTML知识的学习，重视语义和文档的结构。title 和alt 属性，给我最直观的感受就是，可以提高文档的适应性，并合理提高关键词密度。在XHTML标准里，图片的alt 属性是必须的。alt属性 为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。 比如：使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。 在写替换文字前仔细想想，保证那些文字确实为那些看不到图像的人提供了说明信息，并且在上下文中有意义。对于那些装饰性的图片可以使用空的值（alt=""，引号中间没有空格），而不是使用不相关的替换文字比如“blue bullet”或者“spacer.gif”。不要忽略它，如果你忽略了，那么一些屏幕阅读器会直接阅读图像文件的文件名，那些文字浏览器，比如Lynx会显示图像文件的文件名，而那对于你的浏览者就没什么用了。 包含文字的图像图片设置替换文字是最简单的，图像中包含的文字一般来说就可以作为alt属性值。title属性 title属性为设置该属性的元素提供建议性的信息。 title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。 使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息（tool tip），然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。比如早期版本的Safari浏览器。
网易博客中用到的简单网页代码
代码在网易博客中的用法：首先登录博客--- 点击博客主页左上方的绿箭头---装扮博客----设置首页内容----添加自定义模块---这时窗口就会打开，代码就是在这里写的。把你复制的代码粘贴在这里，取一个模块名字确定即可这时就会马上在上页的第一行出现，如果你的代码没有语法错误的话，然后你把模块拖到放在你想要的地方就行，然后别忘记点上保存。 一、超级链接 1、普通的超级链接（一点链接就从一个网页转到另一个网页） <a href= "地址" target=_blank ><font size="3" color="#D9D919"> 显示的名字</font></a> <br> 解释： 地址：你要写上你要转到的目标，一定不要忘了半角引号。 target=_blank ：为在新的窗口中打开 size="写号" color="字体颜色" #D9D919为黄色 <br> 使用多行时换行命令
UTF-8和GB2312网页编码
最近有好多学生问我网页的编码问题，gb2312和utf-8编码有什么区别呢？今天总结下： 不知道大家在做页面的时候会不会遇到样式定义不生效的问题，基本的表现就是怎么改样式都没显示或只有某些浏览器正常，这时通常需要做下面的几步： 确认所修改的样式文件是否是当前页面的样式文件(多个环境的情况) 确认文件中的路径是否正确(可能手误多写或少写) 如果上面两点都确认没问题或只是一部分样式失效，基本可以确定是文件的编码问题 大家都知道使用“UTF-8”比“GB2312”跨平台的兼容性更好，却不一定知道文件的编码跟文件编码的申明不是一回事，以为只要申明了文件的编码类型就是改了文件的编码，导致很多时候只是简单的申明了文件的编码类型，而并没有真的修改文件编码类型，当浏览器以申明的编码类型去解析文件时，由于文件的实际编码跟申明不同，出现解析不正确的问题。 以上问题如何产生呢? 只修改了申明，没有保存与申明对应的文件编码类型 在不同文件间拷贝时，两个文件间的编码不一样 上面的问题只要再另存一份，选择跟申明一样的编码类型即可解决。
如何通过W3C验证？
前言W3C除了订出各标签规定外, 还提供了验证功能,让网页的制作者检查是否真正都有依照W3C规定如何达成W3C XHTML1.0标准网页目前较常用的以XHTML1.0及HTML4.01为主由于XHTML1.0是由HTML4.01演变而来, 几乎算是HTML4.01的修正版若以严格角度来看的话, XHTML1.0算是较严格的了虽然XHTML1.0和HTML4.01的规则十分相似, 但由于XHTML1.0是后者的修正版前者的规定当然会较HTML4.01来得严格较容易发生之错误1.所有标签都必需使用小写错误：<HTML> <Title> <BODY> <FonT>正确：<html> <title> <body> <font>2.所有卷标内之属性都要有值且不可省略双引号或单引号错误：<a href=index.htm>连结</a>正确：<a href="index.htm">连结</a>若没有属性值就必需重复属性作为值, 如： 错误：<frame noresize>正确：<frame noresize="noresize">3.所有标签必须成对, 若非成对需加上/在最后错误：<li>米奇<li>米妮<li>布鲁托正确：<li>米奇</li><li>米妮</li><li>布鲁托</li>错误：<br>正确：<br />4.一个网页最少要包含的标签<html><head><meta http-equiv="Content-Type" content="text/html; charset=big5" /><title>标题</title></head><body>内容</body></html>说明：通常中文网页以big5编码, 需加上以下这行于<head>与</head>之间： <meta http-equiv="Content-Type" content="text/html; charset=big5" />5.若要显示【<】【>】【&】的话, 需以其它值输入例如要显示< >于网页中的话, 需填入： < >若要显示&于网页中的话 错误：&正确：&6.卷标顺序不可错乱错误：<b><p>文字</b></p>正确：<b><p>文字</p></b>7.批注文字中不可包含----错误：<!--米奇实在是---太可爱了-->正确：<!--米奇实在是太可爱了-->8.图片卷标中都必需包含批注文字批注文字就是当你把鼠标指针移至图片上时会出现的文字： 错误：<img src="mickey.jpg">正确：<img src="mickey.jpg" alt="这张图是米奇" />8.XHTML1.0文件标头加于第一行一般网页： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">框架页： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">验证W3C提供网页或上传验证, 进入后填入网址若不成功则会出现红色警示, 并会告知哪里有错误, 再依错误慢慢修改W3C标准验证网页：http://validator.w3.org/后记讲到这里, 你有没有试着把其它的人网址贴上去验证看看呢?因为大部份网页是制作给IE使用者, 所以几乎都不会完全通过W3C, 只要IE可以正常显示即可若你已经试着把我的网页的任何一页都贴上去的话, 应该都会通过验证举老师的教学网页当作例子, 除了首页之外, 大部份都不通过左页选单的第39行未加双引号： 错误： aux1 = insFld(foldersTree, gFld("<font color=blue>中文</font>输入"))正确： aux1 = insFld(foldersTree, gFld("<font color="blue">中文</font>输入"))基础网页制作-01认识HTML中的图片卷标都未加上批注(较容易出现的错误第8点)其实真的要符合W3C规定吗?符合W3C规定可以让你的网页用任何浏览器浏览都是一样的像有人如果针对IE在做网页的, 用Firefox浏览时可能就会出现不少与原来不同的设计所以, 尽量符合W3C规定吧！
网页前端开发CSS相关团队协作
前端开发部门在壮大，人员在增加，技术在进步。CSSer虽然不能代表前端开发团队，但CSSer是前端开发中非常重要的组成部分。我们学习了解相关团队协作的知识，让工作得加自如，在Webjx.com中将在以后增加相关的知识。 这里我一些零散的体会。 一、文档 写程序的人都知道文档的重要性，每次项目总结都会说到要文档，但是都由于受到时间的限制，而没有详尽的文档。造成后期维护成本增加，或者干脆重写。所以，一定要写注释，和产品文档。 二、面向对象 好象是废话。但是面向对象在AS，JS中，绝对不像教科书中的面向对象那样。比如脚本语言中的继承、接口，都没有JAVA来得好。怎么办？没关系，设计模式的灵活应用，可以让团队更加好的运作。工厂、单职责、多态，这几个原则把握好，基本上就能让JS系统灵活很多。 三、工具、敏捷开发 人是因为使用了工具，所以和猩猩产生了差别。我想，不能有传统程序员的观念，搞定复杂的事情，就显得很厉害。把复杂的东西简单话，那才叫厉害。 其他想不出来了，想到了再发上来，欢迎大家多多在poluoluo.com发表评论，共同分享您的经验。
网页制作前先来看看这些所谓的规范
01文件命名规范文件命名的原则：以最少的字母达到最容易理解的意义。 一般文件及目录命名规范：每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm 文件名称统一用小写的英文字母、数字和下划线的组合 尽量按单词的英语翻译为名称。例如：feedback(信息反馈)，aboutus(关于我们) 多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。例如：news_01.htm。注意，数字位数与文件个数成正比，不够的用0补齐。例如共有200条新闻，其中第18条命名为news_018.htm图片的命名规范 ： 名称分为头尾两两部分，用下划线隔开。 头部分表示此图片的大类性质。例如： 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。 尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg. 有onmouse效果的图片，两张分别在原有文件名后加"_on"和"_off"命名。其它文件命名规范js的命名原则以功能的英语单词为名。例如：广告条的js文件名为:ad.js 所有的CGI文件后缀为cgi。所有CGI程序的配置文件为config.cgi02 目录结构规范目录建立的原则：以最少的层次提供最清晰简便的访问结构。 目录的命名以小写英文字母，下划线组成。(参照命名规范) 根目录一般只存放index.htm以及其他必须的系统文件 每个主要栏目开设一个相应的独立目录 根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片 所有JS,ASP,PHP等脚本存放在根目录下的scripts目录 所有CGI程序存放在根目录下的cgi-bin目录 所有CSS文件存放在根目录下style目录 每个语言版本存放于独立的目录。例如：简体中文gb 所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录03 尺寸规范尺寸规范请根据您的实际情况调整： 页面标准按800*600分辨率制作，推荐尺寸为766*430px页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px，另外120*90，120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 04 首页代码规范
链接A的语义、写法和最佳实践
在JavaEye看见这个话题，讨论挺有意思，忍不住也掺和一把。首先，链接a和按钮button是有语义的，不能因为使用上的方便而替换。a是anchor的缩写，是一个锚点，用来导航或定位。典型用法为：<a href="http://www.w3c.org/">W3C Web Site</a> <a name="anchor-one">This is the location of anchor one.</a> <a href="#anchor-one">Link to anchor one</a> 还可以同时指定name和href属性，这是基础知识，若有疑问请参考HTML 4.01规范。再说按钮（包括 button 和 <input type=”button/submit” />）。从语义上讲，按钮是表单的一部分，触发的动作和表单是有关联的。如果根本就没有表单操作，就不应该使用按钮。举些例子：上图是一些链接，虽然长得像button，但语义上是a.上图中的显示和排序按钮，是操作表单。从语义上讲，用button或input更合适。（注意：淘宝搜索结果页目前采用的是a, 这是出于渐进增强的考虑，下面会提及）总之链接和按钮有各自的语义和使用场景，不能随意替换使用。世界永远没那么简单，在当今JavaScript如日中天的Web世界里，链接a经常用来触发js事件：<a href="" onclick="something()">test 1</a> <a href="#" onclick="something();return false">>test 2</a> <a href="javascript: void(0)" onclick="something()">>test 3</a> <a href="javascript: void something()">test 4</a> 首先，第一种写法在ie下是有问题的，原因是 ie下会自动补全href.第二种写法直接在onclick事件中阻止掉默认事件，因此href="#"中的#实际上可以为任意值。用#，是考虑没有js时，点击后停留在本页（注意：当a在一屏以下时，这种写法会导致页面回滚到顶部）。第三种写法，href值是一个javascript伪协议，void是javascript的一个一元操作符（比如!, typeof）。void操作符的作用是，只执行后面的表达式，不返回任何值。看起来好像是void(0)阻止了默认事件，实际上，下面这些写法都没问题：<a href="javascript: void(1)" onclick="something()">>test 3</a> <a href="javascript:;" onclick="something()">>test 3</a> <a href="javascript:" onclick="something()">>test 3</a> <a href="javascript: return true" onclick="something()">>test 3</a> 因为a的默认操作就是javascript伪协议的内容，里面加不加void都不会触发其它事件。（注意：Opera下，当伪协议里有返回值时，会改变href, 因此我们一般写void(0)或空语句）
网页布局设计的简单原则
重复：在整个站点中重复实现某些页面设计风格。重复的成分可能是某种字体、标题logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。颜色作为重复成分也很有用：为所有标题设置某种颜色，或者在标题背后使用精细的背景。・用对比来吸引读者的注意力。通过对比来抓住读者的注意力，例如，你可以让标题在黑色背景上反白，并且用大的粗体字（比如黑体），这与下面的普通字体（比如宋体）行成对比。另一个方法是在某段文本的背后使用一种被景色。・在文本周围留出空白以便更容易阅读，布局更优美。留白是一种美德。满屏幕密密麻麻的字会让人头晕眼花，适当地留出边距及行距，让阅读变得轻松些。・保持简单。避免只是为了试验一种技术或新技巧而采用它们，把会使人分心的东西减到最少。不要期望人们会下载插件，很多人会因此转到别的地方去。