芸轩草堂 - 技术文章

[下载]FlashFXP 简体中文版 3.7.4 Build 1286 Beta [烈火]

zhouyuming@vip.sina.com(石血) — Tue,16 Sep 2008 08:20:44 +0800

FlashFXP 是一个功能强大的 FXP/FTP 软件，融合了一些其他优秀 FTP 软件的优点，如像 CuteFTP 一样可以比较文件夹，支持彩色文字显示；像 BpFTP 支持多文件夹选择文件，能够缓存文件夹；像 LeapFTP 一样的外观界面，甚至设计思路也差相仿佛。支持文件夹(带子文件夹)的文件传送、删除；支持上传、下载及第三方文件续传；可以跳过指定的文件类型，只传送需要的文件；可以自定义不同文件类型的显示颜色；可以缓存远端文件夹列表，支持FTP代理及 Socks 3&4；具有避免空闲功能，防止被站点踢出；可以显示或隐藏“隐藏”属性的文件、文件夹；支持每个站点使用被动模式等。

FlashFXP v3.8 BETA - (3.7.4 build 1286)

* 修正了 SFTP 上传损坏的问题 (当传送的文件大于 256KB)
* 添加了扩展工具栏托盘工具提示 (显示详细传送信息)
* 添加了传送进度栏是否使用 Windows 主题的选项 (参数设置 > 显示 > 颜色和字体 > 使用 Windows 主题)
* 修正了在 SFTP 传送期间某些键盘快捷键被过滤的问题
* 新增全局默认和会话的传送完成选项 "重试失败的传送"
通过 "主菜单 > 会话 > 重试失败的传送" 设置每个会话
通过 "参数设置 > 传送 > 重试失败的传送" 设置全局默认
* 新增选项 "重试前，移动失败的传送到队列的底部"
通过 "参数设置 > 传送 > 选项" 设置
* 修正速度限制问题
* 修正某些情况下退出时出现访问违反的问题

[下载]QQ影音1.0 Beta1

zhouyuming@vip.sina.com(石血) — Thu,11 Sep 2008 08:56:26 +0800

我的笔记本已经抛弃了快乐影音，安装了QQ影音1.0 Beta1。我个人比较喜欢尝鲜，另外一般大公司的产品的质量还是有保证的。正如我抛弃了极点五笔，现在用搜狗五笔一样。喜欢的可以试一下。

[下载]IObit SmartDefrag 1.0 Final - 高速磁盘整理

zhouyuming@vip.sina.com(石血) — Thu,11 Sep 2008 08:33:13 +0800

原来石血只用diskeeper整理磁盘，后来diskeeper越来越难注册，所以放弃了，终于发现了一款更好的磁盘整理软件-IObit SmartDefrag 1.0 Final 。并且它是免费的，并且还是中文版！很好用，请大家下载。

单个日志页面地址已完全静态化

zhouyuming@vip.sina.com(石血) — Mon,21 Jul 2008 16:50:03 +0800

[改程序也是麻烦事儿啊......]

如图所示，地址栏的地址已经完全静态化了，不再是一串符号！

[测试FCKeditor]新产品上线，雅虎奥运生活服务！

zhouyuming@vip.sina.com(石血) — Wed,16 Jul 2008 08:49:00 +0800

经过半个月的努力，这个页面终于上线了。这个页面涉及到整个集团很多的子公司及各部门。改了几版，虽然还是散，但是终于先是上线了。

地址：http://2008.cn.yahoo.com/fuwu/index.html

第一版原型图。后发展了几版！搞得我也很累。联络了各部门的人员。但是最累的还是工程师！

这两年搞得东西太多，实在是懒得发上来，以后有空发些作品聊以自慰！！！！！！！

[测试结果]发文发图均没有问题。

[测试结果]编辑文章没有问题。

博客系统升级,准备体验全静态化页面,皮肤暂时初始！

zhouyuming@vip.sina.com(石血) — Wed,16 Jul 2008 08:35:57 +0800

由于博客系统升级，皮肤暂时先撤下来，代码需要重做。先测试一下发文章！！！
[测试结果]发表文章没有问题，编辑文章没有任何的问题。发表文章后，程序自动跳转至当前页面，而不再用选择跳转至首页或当前页。
文章读不出数据解决，新程序上线需要清除原来程序缓存，最好同时也清除一下服务器的缓存信息。

十二天学会DIV+CSS之第十二天

zhouyuming@vip.sina.com(石血) — Wed,02 Jul 2008 11:29:01 +0800

第十二天校验及常见错误

辛苦了好多天，我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合web标准？W3C和一些志愿者网站提供了在线校验程序，来帮助我们检查页面是否符合标准，并提供了修正错误的帮助信息。这些校验非常有用，是我调试页面第一步要做的事情。

1.XHTML校验

● 校验网址：http://validator.w3.org/
● 校验方式:网址校验、文件上传校验
● 校验成功，会显示"This Page Is Valid XHTML 1.0 Transitional!",如图：

● 校验失败，会显示更多校验选项和错误信息，如图：

一般选择"Show Source"和"Verbose Output"可以帮助你找到错误代码所在行和错误原因。

XHTML校验常见错误原因对照表
● No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。
● No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。
● end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。
● an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。
● element "DIV" undefined---DIV标签不能用大写，要改成小写div。
● required attribute "alt" not specified---图片需要加alt属性。
● required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。

其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的，比如忘记了一个其他

标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，其他的错误也都没有了。

如果你的页面通过XHTML1.0校验，可以在页面上放置这么一个图标：

代码如下：

2.CSS2校验

● 校验网址：http://validator.w3.org/
● 校验方式:网址校验、文件上传校验
● 校验成功，会显示"This Page Is Valid XHTML 1.0 Transitional!",如图：

校验失败，会显示两类错误：错误和警告。错误表示一定要修正，否则无法通过校验；警告表示有代码不被W3C推荐,建议修改。

CSS2校验常见错误原因对照表
● (错误)无效数字 : color909090 不是一个 color 值 : 909090 ---十六进制颜色值必须加"#"号，即#909090
● (错误)无效数字 : margin-topUnknown dimension : 6pixels ---pixels不是一个单位值，正确写法6px
● (错误)属性 scrollbar-face-color 不存在 : #eeeeee --- 定义滚动条颜色是非标准的属性
● (错误)值 cursorhand不存在 : hand是非标准属性值，修改为cursor:pointer
● (警告)Line : 0 font-family: 建议你指定一个种类族科作为最后的选择 --W3C建议字体定义的时候，最后以一个类别的字体结束，例如"sans-serif"，以保证在不同操作系统下，网页字体都能被显示。
● (警告)Line : 0 can't find the warning message for otherprofile --表示在代码中有非标准属性或值，校验程序无法判断和提供相应的警告信息。

同样，通过检验后，可以放置一个CSS校验通过图标，代码如下：

十二天学会DIV+CSS之第十一天

zhouyuming@vip.sina.com(石血) — Wed,02 Jul 2008 11:28:09 +0800

第十一天不用表格的菜单

布局初步搭建起来，我开始填充里面的内容。首先是定义logo图片：

样式表：#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
页面代码：

以上代码现在应该容易理解。先在CSS定义了一个logo的层，然后在页面中调用它。需要说明的是，为了使网页有更好的易用性，web标准要求大家给所有的、属于正式内容的图片，加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字)，所以不要只写成无意义的图片名称。
接下来是定义菜单：

1.不用表格的菜单(纵向)

我们先来看菜单的最终效果：

通常方法我们至少嵌套2层表格来实现这样的菜单，间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现；背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码，你会看到只有如下几句：

什么是网站标准

使用标准的好处

怎样过渡

相关教程

工具

资源及链接

没有用任何table,而用的是无序列

，整个菜单的效果实现的秘密完全在于id="menu"，我们再来看CSS中关于menu的定义：

(1)首先定义了menu层的主要样式:

#menu {
MARGIN: 15px 20px 0px 15px;  /*定义层的外边框距离*/
PADDING:15px;    /*定义层的内边框为15px*/
BACKGROUND: #dfdfdf;   /*定义背景颜色*/
COLOR: #666;    /*定义字体颜色*/
BORDER:#fff 2px solid;  /*定义边框为2px白色线条*/
WIDTH:160px;    /*定义内容的宽度为160px*/
}

2)其次定义无序列表的样式：

#menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none; /*不显示边框*/
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: none;
}
#menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}

说明：这里用的是id选择器的派生方法定义(参考第7天：CSS入门的介绍)了在menu层中的子元素

和

的样式。LIST-STYLE-TYPE: none一句表示不采用无序列表的默认样式，即：不显示小圆点（我们后面用自己的图标来代替小圆点）。BORDER-TOP: #FFF 1px solid;则定义了菜单之间的1px间隔线。

(3)定义onmouseover效果
说明：这里用的是id选择器的派生方法定义(参考第7天：CSS入门的介绍)了在menu层中的子元素
和
的样式。LIST-STYLE-TYPE: none一句表示不采用无序列表的默认样式，即：不显示小圆点（我们后面用自己的图标来代替小圆点）。BORDER-TOP: #FFF 1px solid;则定义了菜单之间的1px间隔线。

(3)定义onmouseover效果
menu li a {
PADDING:5px 0px 5px 15px;
DISPLAY: block;
FONT-WEIGHT: bold;
BACKGROUND: url(attachments/month_0612/d2006122221544.gif) transparent no-repeat 2px 8px;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
#menu li a:hover { BACKGROUND: url(attachments/month_0612/42006122221553.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }

解释如下：

● "display:block;"表示将标签a当作块级元素来显示，使得链接变成一个按钮；
● "BACKGROUND: url(attachments/month_0612/d2006122221544.gif) transparent no-repeat 2px 8px;"这一句定义了替代li的小圆点的图标。"transparent"指背景为透明，"2px 8px"指定图标的位置是距左边2px，距上边8px。这一句也可以拆分写成四句："BACKGROUND-IMAGE: url(attachments/month_0612/d2006122221544.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"
● "#menu li a:hover"定义了当鼠标移动到链接上以后的颜色变化和小图标变化。
ok，不用表格的菜单就这样实现了。大家可以明显感觉到，原来写在HTML里的表现样式全部剥离放到CSS文件里去了。页面代码节约了大半。通过CSS要修改菜单样式就很简单了。

2.不用表格的菜单(横向)

上面是纵向的菜单,如果要显示横向菜单，用li也可以吗？当然是可以的，下面给出代码。
效果如下:

Homehttp://www.yzci.com/">Home>
http://www.yzci.com/aboutus.html">关于我们

http://www.yzci.com/webstandards.html">网站标准

http://www.yzci.com/benefits.html">标准的好处

http://www.yzci.com/howto.html">怎样过渡

http://www.yzci.com/tutorial.html">相关教程

http://www.yzci.com/tools.html">工具

http://www.yzci.com/resources.html">资源及链接

http://www.yzci.com/faq.html">常见问题

页面代码

Home
关于我们
网站标准
标准的好处
怎样过渡
相关教程
工具
资源及链接
常见问题

样式表代码

#submenu {
MARGIN: 0px 8px 0px 8px;
PADDING: 4px 0px 0px 0px;
BORDER: #fff 1px solid;
BACKGROUND: #dfdfdf;
COLOR: #666;
HEIGHT:25px; }

#submenu ul {
CLEAR: left;
MARGIN: 0px;
PADDING:0px;
BORDER: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
DISPLAY:inline;
}

#submenu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center}

#submenu li a {
DISPLAY: block;
PADDING:2px 3px 2px 3px;
BACKGROUND: url(attachments/month_0612/d2006122221544.gif) transparent no-repeat 2px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}

#submenu li a:hover {
BACKGROUND: url(attachments/month_0612/42006122221553.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }

#submenu ul li#one A { WIDTH: 60px}
#submenu ul li#two A { WIDTH: 80px}
#submenu ul li#three A { WIDTH: 80px}
#submenu ul li#four A { WIDTH: 90px}
#submenu ul li#five A { WIDTH: 80px}
#submenu ul li#six A { WIDTH: 80px}
#submenu ul li#seven A { WIDTH: 60px}
#submenu ul li#eight A { WIDTH: 90px}
#submenu ul li#nine A { WIDTH: 80px}

以上代码不逐一分析了。横向菜单的关键在于：定义

样式时的"FLOAT: left;"语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔。好了，你也可以动手试试，用li实现各种各样的菜单样式。

Tips:如果你子菜单的宽度总和大于层的宽度，菜单会自动折行，利用这个原理可以实现单个无序列表的2列或者3列排版，这是原来HTML很难实现的。

十二天学会DIV+CSS之第十天

zhouyuming@vip.sina.com(石血) — Wed,02 Jul 2008 11:26:25 +0800

第十天自适应高度

如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)：

http://www.yzci.com/

#body,div{FONT-SIZE:12px;}
#pagebox{
margin:0px;
PADDING:20px;
BACKGROUND: #FFF;
FONT-FAMILY: arial,'宋体','新宋体',verdana,sans-serif;
WIDTH:600px;
}
#header{
MARGIN: 0px;
BORDER: 0px;
BACKGROUND: #ccd2de;
WIDTH: 580px;
HEIGHT: 60px;}
#mainbox {
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: #FFF;
}
#menu{
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px 0px 0px 0px;
WIDTH: 400px;
BACKGROUND: #ccd2de;
}
#content{
FLOAT: right;
MARGIN: 1px 0px 2px 0px;
PADDING:0px;
WIDTH: 400px;
BACKGROUND: #E0EFDE;}
#sidebar{
FLOAT: left;
MARGIN: 2px 2px 0px 0px;
PADDING: 0px;
BACKGROUND: #F2F3F7;
WIDTH: 170px;
}
#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 40px;
WIDTH: 580px;
}

这里是#header{
MARGIN: 0px;
BORDER: 0px;
BACKGROUND: #ccd2de;
WIDTH: 580px;
HEIGHT: 60px;}

这里是#mainbox {
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: #FFF;
}包含了#menu,#sidebar和#content
这里是#menu{
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING:0px 0px 0px 0px;
WIDTH: 400px;
BACKGROUND: #ccd2de;
}

这里是#sidebar{
FLOAT: left;
MARGIN: 2px 2px 0px 0px;
PADDING: 0px;
BACKGROUND: #F2F3F7;
WIDTH: 170px;
}，背景颜色用的是#main的背景色

这里是#content{
FLOAT: right;
MARGIN: 1px 0px 2px 0px;
PADDING:0px;
WIDTH: 400px;
BACKGROUND: #E0EFDE;}

这里是主要内容，根据内容自动适应高度

这里是#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: #ccd2de;
HEIGHT: 40px;
WIDTH: 580px;
}。

这里是#mainbox {
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: #FFF;
}包含了#menu,#sidebar和#content

这里是#content{
FLOAT: right;
MARGIN: 1px 0px 2px 0px;
PADDING:0px;
WIDTH: 400px;
BACKGROUND: #E0EFDE;}

这里是主要内容，根据内容自动适应高度

这里是主要内容，http://www.yzci.com/>

这个例子的页面主要代码如下：

具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加，#content的高度就会增高，同时#mainbox的高度也会撑开，#footer层就自动下移。这样就实现了高度的自适应。

另外值得注意的是：#menu和#content都是浮动在页面右面"FLOAT: right;",#sidebar是浮动在#menu层的左面"FLOAT: left;"，这是浮动法定位，还可以采用绝对定位来实现这样的效果。

这个方法存在另一个问题，就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满。(不能使用#mainbox的背景色，因为在Mozilla等浏览器中#mainbox的背景色失效。)

好了，主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦。

十二天学会DIV+CSS之第九天

zhouyuming@vip.sina.com(石血) — Wed,02 Jul 2008 11:23:35 +0800

接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。
注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，我们开始：

1.确定布局
w3cn的最初设计草图如下：

用表格的设计方法的话，一般都是上中下三行布局。

用DIV的话，我考虑使用三列来布局,成为这样

2.定义body样式
先定义整个页面的body的样式,代码如下：

body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }

以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。

3.定义主要的div
初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义:

/*定义页面左列样式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定义页面中列样式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定义页面右列样式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }

注意：定义中列和右列div我都采用了POSITION: absolute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。

这时候整个页面的代码是：
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" lang="gb2312">

欢迎进入新《网页设计师》:web标准教程及推广

www.yzci.com,自由版权,任意转载" />

http://www.yzci.com/favicon.ico" type="image/x-icon" />

页面左列

页面中列

页面右列

这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？

4.100%自适应高度?
为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中详细介绍。