介绍一款WEB方式的图片处理编辑器，所谓WEB方式，那当然是说需要使用浏览器来打开这个图片编辑器，什么IE啊，Firefox，Chrome之类都行，打开之后，会提示你创建新图片还是打开本地图片，或者从网址打开图片，抑或是在线图库中的图片，比如picsa、flickr之类。点击图片就可以访问这个在线编辑器了。
　　咱就选择新建一个吧，新建的时候起名，图片宽高，是否透明。
　　然后就进入编辑器的主界面了，怎么样，界面还不错吧，类似Photoshop哦，界面语言是可以切换的，有简体中文，呵呵，老外想的还是相当周到，中国用户也不放过，很给力。
　　至于具体怎么使用，自己个摸索一下吧，基本上日常处理的工具都有，俺就随便画了一个渐变的矩形长条，然后试了一下文字工具，居然，竟然，丫的支持中文，这还不算，字体设置居然读的是本地系统的字库，也就是说，你电脑上安装的有什么字体，用这编辑器就可以使用这种字体，这点出乎我的意料，测试了一下，确实可以使用，编辑完成之后，图片可以保存到本地你的电脑上，也可以保存到picsa、flickr之类的在线图库，当然，你得有相应的帐号和密码才行。
　　这玩意对我来说用处不大，基本上是属于出门在外临时突然需要使用的时候，别人电脑上又没有图片编辑软件，但能上网，这时候它就派上用场了，临阵磨枪，不快也亮啊^_^

　　既然要学习研究DIV+CSS，那当然逃不掉要去编写CSS样式表文件，所以就涉及到一个关于样式表里定义样式的名称问题，标准说法是Selector，选择器。这名字我觉得别扭，我暂且理解为样式名称吧。定义一个样式，你可以使用ID，也可以用Class，用于给HTML的各种元素定义显示效果。ID的CSS定义是以"#"开头，Class的CSS定义是以"."开头的。
　　先说id这个东东，由它定义的样式，理论上（W3C标准）只能给拥有这个id的唯一的元素使用，实际上其他元素要是被指定了这个id，也是可以用的，不过由于很多JS或者程序动态的功能实现是依靠id来进行的，那你就要注意了，到时候页面会出乱子的，有些浏览器也不支持多个元素使用同一个id。所以最好还是页面上只有一个元素使用这个id，毕竟规范之后，什么都好办。基于此，在咱们布局页面大框架的时候，可以使用id方式来定义，比如页面的头部header，内容部分content，页脚footer，导航nav等等，或者为同一个页面上不同的栏目块来定义样式，因为页面上这些框架部分是唯一的，基本就出现一次，如果有子内容，也可以用使用子id来命名，尽量避免多个元素使用同一个id来控制样式。id的css定义方式如下：

　　页面中HTML代码里使用的话这样既可：<div id="header">页头部分</div>、<div id="footer">页头部分</div>。
　　再说class这个东东，由它定义的样式，可以给页面上多个元素使用，使用次数不限，基本上网页上的各种具体细节的东西，都可以用class来，比如文字大小，颜色，粗细，背景色，背景图像，图片的边框等等，根据你自己的实际需要来决定。
　　例如下面的：

　　页面中HTML代码里使用的话这样既可：<div class="headertext">页头部分</div>、<div class="contenttext">内容部分</div>、<div class="footertext">页头部分</div>。
　　也可以使用HTML的元素名来定义样式，比如下面这种：

　　上面这种定义范围很大，如果没有单独指定class，页面上所有<p><span><pre>开头的元素都使用上面对应的样式定义，所以为了你后期能维护更新方便，还是给不同位置不同用途的同一种HTML元素，指定不同的class样式，而不用牵一发而动全身。
　　最后说说这样式名称命名的问题，不管是id也好，class也好，起名的时候最好是你自己能一眼干出来是干嘛用的，是用在页面上那个地方的，这样便于你以后查找更新，或者在css文件里加上注释，这样对以后非常有好处。按规矩，名称里第一个字符不要是数字开头，很多浏览器不支持，最好用英文或者拼音，看你自己的使用习惯吧。
　　我学习的时间也不长，还不到一个月，所以样式表里的很多技巧和写法我还不是很清楚，只能自己慢慢摸索，碰到迷惑的地方就Google一下，基本上很多问题都能解决，所以，善用搜索，很多问题肯定不止咱们遇到，初学者都会有很多疑问，我学习也基本上就是自己搜索＋在DW里实验，然后用在具体的页面上，最后在看看同一个页面的样式定义在不同浏览器里有啥不同，为了这兼容性的问题，俺现在电脑上成了浏览器大全了，IE8、Chrome、Chromium、Opera、Firefox、Safari一个不差，等IE9正式发布了，还得整一个，因为系统用的是Windows7，所以要用IE6或IE7的话，只能装个虚拟机了，或者干脆抛弃IE6和IE7算了，与时俱进吗。毕竟HTML5和CSS3出现的时间也不短了，希望大家都能体验一下HTML5和CSS3的强大。这次就罗嗦到这吧。
　　另外说明一下，这些个心得都是个人体会，如果有错误的地方麻烦高手指出，多谢您的支持。

　　其实早就想研究一下DIV+CSS，因为从最初自己学习做网页开始，就一直是用TABLE+CSS方式，那会儿最早接触的是微软的Frontpage，记不清是1999年还是2000年，大概那会就是从它开始做自己的个人主页，用了一段时间之后，才转向Dreamweaver。不过还是继续在用Table表格的方式来布局页面，但页面样式是CSS方式来控制。当时初学那会儿并不知道有DIV这个么东西，就一直在用表格折腾页面，倒也觉得表格也挺好布局的，至少想到什么样子，PS里做好模板，然后DW里面去使用TABLE来弄出大框架，之后PS里切图分割，再到DW去用图片之类去填充框架，最后就是写好各部分的CSS样式表定义，我自己折腾页面的大致流程是这样，也就这么着用了好多年，因为我不是专门学这个，都是自己学的，没人教，也没看过什么关于做网页的书，就是当年为了学习Flash做动画，买过两本动画制作实例的书，做些简单的Flash动画，太复杂的多场景的，需要ActionScript的那种的研究不来，本身我对编程就一点兴趣没有，看到代码就头疼，当然，HTML代码除外，其他什么ASP，PHP代码看到就头晕，呵呵，不知道为什么，可能天生就不是编程搞开发的那块料。好了，就罗嗦这么多吧，下面开始自己学习DIV+CSS的一点心得，用博文记录一下，也希望对想学习的人有个帮助。
　　先说说DIV吧，网上搜索说是division的简写，金山词霸上的解释：1. 分开; 分配2. 部门3. 界限4. 分歧, 分裂5. 除(法)6. 分组表决7. 分离；分切；划分；分隔8. 分享；分配；分发，分派；分担9. 划分物；分隔物，分割物，隔开的，栅栏隔板，隔墙10. 分界线；分界标志，分界记号11. 刻度，标度，分度。按照我自己的理解，DIV应该是第9个意思，作为网页里分割用的，暂且理解为块吧，有些人称之为盒子，不管咋样，你自己有个理解就好，我理解的就是一个块，网页中的一个块元素，可以用来布局页面框架，定位页面上的各种元素，文字、图片、动画什么的等等。
　　经过Google之后得知，HTML的各个元素是有自己的显示属性的，显示属性有三种：Block、Inline、None，Block的意思就是元素以块的方式显示，这种显示方式的元素独占一行，如果没有定义宽度，那它的宽度就是页面当前的宽度，或者是它的父元素的最大宽度，它的前后各有一个换行，如果它上面有一个块或者其他元素，它要新换一行来显示自己，它之后的元素也会在它下面一行显示。我们熟知的DIV的显示属性默认就是这种Block方式。Inline是行内显示，有些元素默认就是这种显示方式，比如Span，比如，Span内的文字，有多少字，它的宽度就是多少，只占用它需要的宽度，但是它不是独占一行，Span后面你还可以接着再来一个Span，后一个Span内的内容会紧接着上一个之后显示，不会自动换行，除非遇到父元素宽度的限制，或者换行符。None就是不显示，有些HTML元素默认就是这种属性，是那些用来定义HTML特殊内容的，比如META和Style等标签，是不会显示在页面上的。当时看完这些内容，我第一个想知道的就是哪些HTML元素天生或者默认是Block方式显示，那些是Inline显示呢？嗯，我想你也有着想法，看下面吧。
　　默认以Block方式显示的HTML元素：

　　默认以Inline方式显示的HTML元素：

　　这样看来，我自己对DIV的理解稍微有一点点问题，也不算大问题，它确实是一个块，默认情况下，但是它的显示属性是可以定义的，如果是display:inline的话，那div换了一种显示方式，它的后面还可以继续有其他的元素显示。同样，默认是inline显示方式的元素，同样可以通过display:block来定义它作为一个块来显示。不是一成不变，根据自己的实际需要来决定吧，我想DIV+CSS的优势就体现在这里吧，很灵活，可控，按需配置。所以现在想想，即便说是DIV+CSS也做页面，其实你也可以用使用其他元素，并不一定非要用DIV这个元素，可用的HTML元素可是很多哦。
　　弄明白了上面说的，我自己就大致已经清楚了怎么用DIV+CSS来给网页搭框架了，春节前，博客改版了一下（之前是TABLE+CSS的），就是边研究，边用DIV+CSS把博客模板从新布局了一下，基本上和以前的TABLE+CSS的框架一样，但是细节上改进了很多，毕竟DIV+CSS可控制的东西很多，只要你定义好了CSS，页面上的各种东西，你都可以用CSS来控制它的显示效果。对于后期维护和更新内容，无疑DIV+CSS有着更好的灵活性和可控性。在改版博客页面架构的时候，还是有很多CSS的属性定义和写法没搞明白，什么position，float啊等等，等我搞明白了再写出来吧。还有就是DIV+CSS这玩意浏览器的兼容性问题让人很头疼，同一个页面，各种浏览器显示的效果会有差别，当然，这牵扯到W3C的标准问题，最变态的浏览器当属Firefox，丫的是最W3C的，连HTML里注释行的要求都非常严格，如果你的注释方式不符合W3C标准的注释方式，那你的页面在Firefox里显示的就面目全非了，没事的话，可以自己试试看，我就不献丑了。

　　A powerful Photoshop-like CSS gradient editor from ColorZilla.
　　一款在线的CSS渐变效果编辑器，很强大，可以使用已有的渐变样式，也可以自己定义自己喜欢的样式，然后CSS的代码是实时生成和变化的。不过，这个编辑器生成的CSS是基于HTML5和CSS3的，不是所有浏览器都能支持这个渐变效果，Firefox、Safari、Chrome基本没啥问题，能很好的支持，Opera11和IE8就傻眼了，不支持这个渐变效果。只能简单的用纯色或者两色渐变背景显示。希望IE9没问题，抽空我装个IE9的测试版试试看。

编辑器地址：http://www.colorzilla.com/gradient-editor/

　　刚又遇到一件郁闷的事情，折腾相册呢，因为相册升级，需要PHP5的环境，就把域名换了一个IP，DNS从新解析也生效了，可是Chrome这个顽固分子，死活还是指向原来的页面，因为原来的首页中做了一个跳转，结果现在访问相册，还是那个跳转，新版的相册是不需要跳转的，何况IE、Chromium、Opera、Safari、Firefox都能正常解析和访问，唯独Chrome出错，除非地址栏里完整输入地址和默认首页文件名及扩展名才可以。于是Google之，如何清理Chrome的DNS缓存，结果试了几种方法都不管用，甚至我自己修改本机的hosts文件都不管用。没办法，自己还是研究一下Chrome的选项设置吧，结果还真被我找到了，点击Chrome的那个扳手图标，然后选项，下面就看下面的图片吧，修理之后就正常了。