WEB标准网站设计心得 http://blog.donews.com/dodo Dodo's Blog @ DoNews.com Tue, 30 Oct 2007 10:21:00 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 照片:新藏-阿里 http://blog.donews.com/dodo/archive/2007/10/12/1218688.aspx http://blog.donews.com/dodo/archive/2007/10/12/1218688.aspx#comments Fri, 12 Oct 2007 08:58:00 +0000 dodo http://blog.donews.com/dodo/archive/2007/10/12/1218688.aspx 藏羚羊

藏族孩子

古格

土林

]]> http://blog.donews.com/dodo/archive/2007/10/12/1218688.aspx/feed 1 照片:扎达土林 http://blog.donews.com/dodo/archive/2007/10/12/1218678.aspx http://blog.donews.com/dodo/archive/2007/10/12/1218678.aspx#comments Fri, 12 Oct 2007 08:49:00 +0000 dodo http://blog.donews.com/dodo/archive/2007/10/12/1218678.aspx (点击看大图)

]]> http://blog.donews.com/dodo/archive/2007/10/12/1218678.aspx/feed 0 神山–岗仁波齐 http://blog.donews.com/dodo/archive/2007/10/12/1218672.aspx http://blog.donews.com/dodo/archive/2007/10/12/1218672.aspx#comments Fri, 12 Oct 2007 08:42:00 +0000 dodo http://blog.donews.com/dodo/archive/2007/10/12/1218672.aspx (点击看大图)

壁纸,雪山,冈仁波齐,2007新藏,dodo,图片尺寸:1024X681

壁纸,雪山,冈仁波齐,2007新藏,dodo,图片尺寸:1024X681

壁纸,雪山,冈仁波齐,2007新藏,dodo,图片尺寸:1024X576

]]> http://blog.donews.com/dodo/archive/2007/10/12/1218672.aspx/feed 1 让DIV里面的文字垂直居中 http://blog.donews.com/dodo/archive/2007/06/20/1177832.aspx http://blog.donews.com/dodo/archive/2007/06/20/1177832.aspx#comments Wed, 20 Jun 2007 07:55:00 +0000 dodo http://blog.donews.com/dodo/archive/2007/06/20/1177832.aspx <!--
.con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff
}
/*FOR IE*/
.fixie{
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
-->
</style>

<div class="con_div">
<span class="fixi]]> <style type="text/css">
<!–
.con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff
}
/*FOR IE*/
.fixie{
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
–>
</style>

<div class="con_div">
<span class="fixie"></span>
测试内容

</div>

]]> http://blog.donews.com/dodo/archive/2007/06/20/1177832.aspx/feed 7 li标签的间距问题 – 兼谈书写li的最佳方式 http://blog.donews.com/dodo/archive/2007/04/15/1156062.aspx http://blog.donews.com/dodo/archive/2007/04/15/1156062.aspx#comments Sun, 15 Apr 2007 07:47:00 +0000 dodo http://blog.donews.com/dodo/archive/2007/04/15/1156062.aspx 新建一个简单的HTML测试文件，下面来测试ul li标签

引用
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
</ul>

测试一，定义css为如下代码，效果如下

引用
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;width:120px;}
ul li{background:green;height:20px;}
ul li a{color:#fff;padding:0 0 0 10px;}

发现在IE5和IE5.5下左边都产生了空白，并且在IE5下，LI之间的行距产生空白,如下图
uploads/200704/13_011917_snap3.gif

测试二，定义css为如下代码，

引用
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;}
ul li{background:green;height:20px;width:120px;}
ul li a{color:#fff;padding:0 0 0 10px;}

和测试一相比，只是将width:120px;从ul的定义放置到li的定义，解决了IE5和IE5.5左边产生空白的问题，而IE5的li之间的间距还是有,如下图
uploads/200704/13_012050_snap2.gif

测试三，定义css为如下代码，(最佳写法)

引用
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;}
ul li{background:green;height:20px;width:120px;vertical-align: bottom;}
ul li a{color:#fff;padding:0 0 0 10px;}

和测试二比较，在li的定义中加上vertical-align: bottom;ie5下正常，li之间的空白行距消失了，取得各个浏览器的效果一样，如下图
uploads/200704/13_012538_snap1.gif

总结
1.解决li在IE5下产生空白行距的方法：如果li定义了宽度，那么需要在li里面再定义vertical-align: bottom;
2.宽度最好不要定义在UL，定义在LI或者UL外层的DIV里面
3. 书写LI的最佳方式，li里面要书写高度和宽度，以及vertical-align: bottom;（for ie5/win bug），或者在ul外面加上一层div，并定义宽度，那么在li里面不用定义宽度和vertical-align: bottom;，也显示正常(IE5下不会产生空白行距)，不过高度还是要定义一下的。

]]> http://blog.donews.com/dodo/archive/2007/04/15/1156062.aspx/feed 15 招聘网页设计师 http://blog.donews.com/dodo/archive/2007/04/12/1154833.aspx http://blog.donews.com/dodo/archive/2007/04/12/1154833.aspx#comments Thu, 12 Apr 2007 07:20:00 +0000 dodo http://blog.donews.com/dodo/archive/2007/04/12/1154833.aspx 网页设计师

必须条件：
1.有良好的设计理念及色彩感觉
2.良好的沟通领悟能力
3.能承受工作压力，具备团队精神

其他条件：具备以下任何3条即可
1.精通photoshop,illustrator等
2.熟悉web标准，能使用div+css设计网页，手写html代码
3.精通flash动画制作
4.精通javascript或者ajax交互设计
5.了解一门编程语言。

加分条件：
1.手绘能力强者优先
2.有平面广告设计经验者优先
3.有个人站点及作品展现者优先

补充条件：
如果你对网页设计有浓厚的兴趣，以及有一定的基础，并有信心在这个领域做的很出色,那么265设计部欢迎你来实习，与我们共同提高成长。
应届毕业生优先

有兴趣的朋友可以发邮件给我
dodoing@gmail.com
谢谢
265上网导航 — www.265.com

]]> http://blog.donews.com/dodo/archive/2007/04/12/1154833.aspx/feed 8 让IE6和IE7同时运行在一台机器上 http://blog.donews.com/dodo/archive/2007/04/03/1149965.aspx http://blog.donews.com/dodo/archive/2007/04/03/1149965.aspx#comments Tue, 03 Apr 2007 12:22:00 +0000 dodo http://blog.donews.com/dodo/archive/2007/04/03/1149965.aspx 工作需要，我的X60S上装了IE5.0,IE5.5的绿色版，IE6以及FIREFOX2和OPERA9的绿色版，用来调试网页
今天为了测试页面在IE7下的效果，去网上找了找IE7和IE6共存的办法，并把IE7英文版整理打包在一起
据说IE7的基本功能都有了，还有一些小BUG，就用来看网页，到没什么大影响，主浏览器还是firefox和IE6
英文原文：http://tredosoft.com/IE7_standalone
注意：不要偷懒，直接解压缩放在桌面上，最好在别的盘里面，然后看里面的说明文件，一个文件自动安装。
我的系统是Windows XP SP2  
下载链接：下载
截图如下：

update：
ie5+ie5.5 绿色版本的下载地址。6M左右
http://www.iqoo.com/ie5+5.5.rar

]]> http://blog.donews.com/dodo/archive/2007/04/03/1149965.aspx/feed 14 来自www.p.cn,一只不烧香的熊猫 http://blog.donews.com/dodo/archive/2007/01/29/1121846.aspx http://blog.donews.com/dodo/archive/2007/01/29/1121846.aspx#comments Mon, 29 Jan 2007 10:14:00 +0000 dodo http://blog.donews.com/dodo/archive/2007/01/29/1121846.aspx 来自www.p.cn的一只熊猫，此熊猫非烧香那只，它是一款工具软件而非病毒，不过这个时候推出，赶上熊猫烧香病毒横行肆虐，不知道是福还是祸

软件还是不错，全部采用浏览器操作界面，很方便。电脑里把杆子打不着的图片也能检索出来，能对图片进行标签归档，能在浏览器里对图片进行编辑，这个 功能很方便，不需要安装或者打开photoshop软件了，还能和网上的相册服务商进行同步，比如yahoo相册和163相册等等。试试吧

点击进入下载页面


下载

软件的介绍

智能相册（Smart Albums）是一款简单易用的图片管理软件，集分类相册、图片标签、图片搜索等功能于一体，并以日历方式进行展现。此外还可以对图片进行加密保存、 FTP上传至网络空间等应用。软件具有傻瓜化的图片编辑功能，无需任何专业知识就可以轻松处理您的照片。并且也可以通过电子邮件、个人网络相册发布等方式 来和别人分享你的照片。软件基于DWS（Desktop Web System） Framework，采用零客户端的设计方式，将全部的功能集中于浏览器当中，在降低了用户学习成本的同时使用户获得了更好的体验。充分体现了 Web2.0的先进特性。

智能相册不同于传统客户端的相册管理软件,也不同于目前市场上存在的Web浏览方式的像册管理服务。

传统的单机相册管理软件注重于对本地图片文件的管理，多数采用标准客户端作为软件的表现形式，该类软件缺乏与网络资源的互动，基本上把管理的范围局限于用户的个人计算机上，并且不同的客户端之间表现形式差异很大，用户的学习成本较高。

而目前在网络上很常见的各类网络相册，则将功能完全集中于网络之中，脱离网络之后就无法使用任何功能，且在操作过程中受网络质量的影响很大。由于完全脱离单机，这类相册对于一些高级的功能支持有限。

智能相册在吸收了两者的优点之上，最大程度的克服了它们的缺点。这其中最重要的就是它将软件界面完全集中在浏览器里，在浏览器Web页面上使用与传 统客户端相似的界面操作方式,既采用了易用的Web页面操作界面,又具有客户端应用的强大功能，从而使任何用户都可以在最短的时间内学会如何使用它。当用 户联网之后，软件可以无缝的转移到网络应用之中，用户无需在两种不同的模式之间切换。同时软件在浏览器的兼容方面做了很大的改进，使得智能相册可以在当前 绝大多数的浏览器中正常使用（包括IE6、IE7、FireFox、Maxthon遨游等等）。

]]> http://blog.donews.com/dodo/archive/2007/01/29/1121846.aspx/feed 8 用flash+javascript实现网页中复制数据功能 http://blog.donews.com/dodo/archive/2006/12/06/1091065.aspx http://blog.donews.com/dodo/archive/2006/12/06/1091065.aspx#comments Wed, 06 Dec 2006 01:25:00 +0000 dodo http://blog.donews.com/dodo/archive/2006/12/06/1091065.aspx 下面的例子使用flash(as)+javascript实现了在不同浏览器里复制的功能，这样做的好处就是规避了浏览器兼容的问题。也就是说支持firefox,IE,OPERA

看演示：用firefox和ie分别测试
点这个页面最下面的复制按钮，然后粘贴在QQ，或者MSN等文本框内

怎样使用？
1.先下载这个FLASH文件：下载,右键另存

2.代码如下：
<html>
<head>

<title&]]> 经常在网页上看见“复制本页网址，给你的朋友分享”之类的话，点按钮，在IE下能复制成功，而在firefox和opera等其他浏览器就不行
下面的例子使用flash(as)+javascript实现了在不同浏览器里复制的功能，这样做的好处就是规避了浏览器兼容的问题。也就是说支持firefox,IE,OPERA

看演示：用firefox和ie分别测试
点这个页面最下面的复制按钮，然后粘贴在QQ，或者MSN等文本框内

怎样使用？
1.先下载这个FLASH文件：下载,右键另存

2.代码如下：
<html>
<head>

<title>用flash+javscript实现网页上的文本复制</title>

</head>
<body>
<script type="text/javascript" language="javascript">
function copyit(textit) {
if (window.clipboardData) {
window.clipboardData.setData("Text",textit);
} else {

var flashcopier = ‘flashcopier’;
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement(‘div’);
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = ”;
var divinfo = ‘<embed src="_clipboard.swf" FlashVars="clipboard=’+textit+’" width="0" height="0" type="application/x-shockwave-flash"></embed>’;
document.getElementById(flashcopier).innerHTML = divinfo;
}
}
//copyit("")

</script>
<input type="text" value="用flash+javscript实现网页上的文本复制" id="g">
<a href="javascript:copyit(document.getElementById(‘g’).value);">复制一下</a>
</body>
</html>

]]> http://blog.donews.com/dodo/archive/2006/12/06/1091065.aspx/feed 9 IE7来了，对网页交互设计未必是好事 http://blog.donews.com/dodo/archive/2006/12/01/1088475.aspx http://blog.donews.com/dodo/archive/2006/12/01/1088475.aspx#comments Fri, 01 Dec 2006 01:48:00 +0000 dodo http://blog.donews.com/dodo/archive/2006/12/01/1088475.aspx 今天看到IE7中文版发布了，IE7的英文版我倒是装了，为了测试用，用户体验和IE6变化很大，学习成本增加了，估摸着用户未必喜欢，特别是低端用户（别和我说现在低端用户早就用过MYIE，^_^），最明显，也是最跟风的改变就是也用了TAB的方式浏览多网页，不过这对以WEB上交互设计未必是好事
做过WEB交互的人都知道，很多时候会用到javascript来window.open弹出一个Mini window,来做一些交互的中转等，现在有了TAB，window.open是弹出到TAB还是new WINDOW里面呢。tab其实就是把很多的window用一个盒子装起来，然后用TAB标签上.
IE7的设置里面有灵活的给用户的TAB和WINDOW的强制设置，也就是说如果用户选择了全部用TAB打开，你怎么open都是在TAB里面，当原来mini window的交互界面出现在TAB里，然后在切换回触发页的时候，用户体验极差，每个TAB显示的网页对用户来说是平级的，而原来是opener的关系,至于以前的父窗口和子窗口之前的交互。在TAB之间还能实现么？
很多采用window.open做交互的网站在用户体验都要变差了，当然也许会有人会说我们本来就不喜欢window.open
也许javascript也要升级一下.来个tab.open
（个人看法）
BTW:
about:blank 也变成了about:tabs,
默认Tab的介绍页还是全部用的table布局设计：（

]]> http://blog.donews.com/dodo/archive/2006/12/01/1088475.aspx/feed 14