2005年05月31日

豆腐做了一个新的模板,我改了一点点.


还是选系统的Lighty

然后再自定义CSS加入以下代码:

body, html {
    background: url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowbg.jpg) #000000 center top;
    color: #787878;
    font-family:ms shell dlg;
    font-size:12px;
    margin: 0;
    line-height:150%;padding:0px
}
#nadframe{display:none}
form{
magrin:0;
font-size:14px;
padding:0px
}

.pagelayout{
    margin: auto;
    padding:0px 0px 0px 0px;
    width: 100%;
    font-size:14px;
}
a:visited, a:active, a:link {  
    color : #70472A;
    text-decoration : none;
}

a:hover {
    color: #999966;
}

blockquote {
    font-style : italic;
}

#header {
  text-align:center;
  color:#000000;
  font-size:12px;
  font-family:ms shell dlg;
  padding-top:0px;
  padding-right:20px;
  height:150px ;
  background: url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowhead.jpg) #000000 no-repeat center top;
  border-bottom: 0px solid #E4E5E5;
}
#header span{float:left;padding-top:38px;text-align:center;width:100%;}
#header #Header1_HeaderTitle{
    color: #000000;
    font-size:14px;font-family:arial;line-height:120%;font-weight:bold;color:#FABB0B
}
#main {
   float:left;padding: 10px 0px 0px 25px;width:65%;font-size:14px;line-height:160%;color:#333333;word-wrap:break-word;
}
#footer{clear:both;text-align:center;font-size:12px;width:100%;
    height:100px;
    padding-top:60px;margin:0px;
    background: url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowbg_foot.jpg) #000000 no-repeat;
}

#menu {clear:both;padding:0;
    float:left;
    width:250px;
    padding-top:10px;
    word-wrap:break-word;
    border-right:1px dotted #c0c0c0;
}

#menu h1 {
    color:#E3D8B7;
    padding:8px 0px 0px 18px;
    font-size: 14px;
    font-weight: bold;
    margin: 0px 0px 15px 60px;
    height:30px;
    background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowmenu_bg_blue.jpg) no-repeat;
}

#menu h3 {
    color:#E3D8B7;
    padding:8px 0px 0px 18px;
    font-size: 14px;
    font-weight: bold;
    margin: 0px 0px 15px 60px;
    height:30px;
    background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowmenu_bg_red.jpg) no-repeat;
}
#menu ul {
    list-style: none;
    padding: 0px;
    margin: 0px 0px 15px 60px;
    font-size: 12px;

}
#comments{font-size:12px;line-height:150%}
#comments a{font-weight:bold}
.postTitle{font-weight:bold;background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowwhite_icon_ball.gif) no-repeat;padding-left:20px}
.postTitle a,.postTitle a:link,.postTitle a:visited{color:#999966;font-size:14px}
div,select,input{font-size:12px;word-wrap:break-word;}
div.block {
  background-image: url(images/main_background.gif);
  background-position: top left;
  background-repeat: repeat-y;
  font-size: 12px;
  text-align: justify;
}

div.block_footer {
  background-image: url(images/day_footer.gif);
  background-position: top left;
  background-repeat: no-repeat;
  height: 67px;
}

div.post {
  padding-left: 0px;
}
.dateTitle{padding-left:0px;font-size:12PX;color:#454545;line-height:150%;font-weight:bold}
div.posttitle {
  color: #73AF1D;
    font-family: "ms shell dlg";
    font-size: 14px;
    font-weight: bold;
}
div.postText{line-height:150%;}
.posttitle a:visited, .posttitle a:active, .posttitle a:link { 
    color:#999966;
    text-decoration : none;
    padding:2px;
}

.posttitle a:hover {
    color: #999966;
    text-decoration : none;padding:3px;
    border-bottom:1px dotted #999966;
}
.postFoot{line-height:120%;border-bottom:1px dotted #808080;font-size:12px;}
div.itemdesc {
  color: #808080;
  font-size: 12px;
    text-transform: uppercase;
}

div.seperator {
 
  background-position: top left;
  background-repeat: no-repeat;
  margin: 15px 0px 10px 0px;
}

div.entrylistitem {
  padding-left: 20px;
  padding-bottom: 10px;
}

a.entrylisttitle, a.entrylisttitle:visited, a.entrylisttitle:link, a.entrylisttitle:active {
  color: #FF6600;
    font-size: 14px;
    font-weight: bold;
}

div.moreinfo {
  font-size: 12px;
  text-align: justify;
}

div.moreinfotitle {
    color: #FF2a00;
    font-size: 12px;
    font-weight: bold;
}

div.comments {
  font-size: 12px
}

div.comment {
    background-color: #FBFBFB;font-size:12px;
  border: 0px dotted #DDDDDD;
  margin: 10px 0px 10px 0px;
  padding: 10px;
}

div.comment_author {
  margin: 5px 0px 5px 0px;font-size:12px;
}

div.comment_content {
  margin: 5px 0px 5px 0px;font-size:12px;
}

#postcomment {
    border: 0px solid #DDDDDD;
    background-color: #FBFBFB;
  font-size: 12px;
  padding: 10px;
  text-align: justify;
  margin-top: 15px;
  width: 435px;
}

#postcomment div {
    color: #808080;
  font-size: 12px;
    font-weight: bold;
  margin: 5px 0px 5px 0px;
}

#postcomment input.text, textarea {
  border: 1px solid #DDDDDD;
  font-size: 12px;
}

input.text {
    width : 300px; 
}

textarea {
    width : 300px;
    height : 200px; 
}

#relatedlinks ul {
    list-style : none;
    margin-left : 10px;
    padding : 0px;
}

span.highlight
{
    background-color:Yellow;     
}
.block_title{font-size:14px;font-weight:bold}
.code{float:left;width:80%;padding:10px;border:1px dotted #d9d9d9;background:#f4f4f4;}
.postFoot{clear:both;padding-top:6px}
br{clear:both;}

2005年05月30日

周日下午去了DoNews的新办公室.
之前看有牛友的BLOG说办公室内不穿鞋子,于是头一天晚上,洗脚特别仔细,以免嗅觉污染,影响到他人.
进到屋子里面,首先是大桌子,类似会议室,估计每次的编辑会议就是在这里开的.
直走进去是刘韧的办公室,一张大班台.一套沙发,我终于坐上了传说中的沙发,软软的,还有小机关可以弹出一个架脚的,坐在上面,2脚一架,喝着很特别的竹叶青(是茶叶,不是酒),惬意,小资不过如此.
外间是KESO的办公室,人没在,我1:40到的,据说他还在网上,还没睡觉,还没睡28号的觉,他办公室里最引人注目的是桌上一个烟灰缸,(KESO是刘韧特许可以在办公室吸烟,哈)
PS:
1.沙发一定要坐
2.脚一定要洗干净,一定别穿漏脚趾头的袜子,因为你坐在沙发架着腿的时候,双脚最显眼
3.竹叶青的茶一定要喝





2005年05月25日

这个是我写了一个JS处理的,能在线运行演示代码.这样的话,直观一点.令狐葱 同学说SHARE一下,那就SHARE一下

JS代码:

<script language="javascript" type="text/javascript">
function rundemo(k){
var democode=document.getElementById(k).value
var demowin=window.open()

demowin.document.open();
demowin.document.write(democode)
demowin.document.close();
}
</script>


1.将这段代码放在公告栏里面,这样发文章的时候不用每次都引用
2,在发文章的时候,切换到"代码"编辑模式下,加入下面代码:

<textarea style="padding: 8px; width: 80%; height: 400px; font-size: 14px; line-height: 150%;" id="navmenu">



</textarea>

中间放置你的演示代码,.ID="navmenu"里面的navmenu你自己可以设置,不过要和下一步的ID对应一致

3.加入点击"运行演示"的连接,这个也要在代码模式下插入编辑
<a href="javascript:rundemo(‘navmenu’)" style="color: rgb(255, 102, 0); font-weight: bold;">在线运行演示</a>

run(‘navmenu’)中的navmenu要和上面对应,建议每次用不一样的ID.这样是为了避免在首页每篇文章都完全显示的时候,如果有多篇有运行演示的代码.ID重复

阿捷(www.w3cn.org)发给我的,不错的东西
代码如下:

在线运行演示



2005年05月24日

kenton留言说想在Donews Blog上加一个GOOGLE的站内搜索
我看了一下源码,页面body后面紧跟了一个form.所以如果直接加GOOGLE的代码的话,是FORM里面嵌套FORM,起不了作用。我用JS处理了一下,先分成了3个FORM,然后在最后一个留言提交的Form,用JS去获得第一个FORM 的ACTION。测试了一下,留言和站内检索都可以,不过也许还会有其他的问题

小宇发邮件来说在OPERA下页面乱了。我看了一下代码,是加了GOOGLE搜索以后导致的,OPERA对标签识别可能是按<a><b></b></a>这样的形式严格解释,IE和FF容错好一点。我写的这个GOOGLE站内搜索是打补丁形式来处理,页面标签结构控制不了。

在公告栏补加入以下代码:
代码中有2处www.donews.net/dodo记得换成你自己的,不然是搜索我这个BLOG

<script language="JavaScript">
<!–
document.write("</form><h3>本站站内搜索</h3><FORM method=GET action=\"http://www.google.com/search\">");
document.write("<INPUT TYPE=hidden name=ie value=utf-8>");
document.write("<INPUT TYPE=hidden name=oe value=utf-8>");
document.write("<INPUT TYPE=hidden name=\"hl\" value=\"zh-CN\">");
document.write("<TABLE  style=’font-size:12px’><tr><td>");
document.write("<IMG SRC=\"http://www.google.com/logos/Logo_25wht.gif\" ");
document.write("border=\"0\" ALT=\"Google\" align=absmiddle> 提供");
document.write("</td></tr>");
document.write("<tr><td>");
document.write("<INPUT TYPE=text name=q size=20 maxlength=255 value=\"\"><br>");
document.write("<INPUT TYPE=submit name=btnG VALUE=\"搜索\">");
document.write("");
document.write("<INPUT TYPE=hidden name=domains value=\"www.donews.net/dodo\"><br>");
document.write("<INPUT TYPE=radio name=sitesearch value=\"\"> 搜索WWW ");
document.write("<INPUT TYPE=radio name=sitesearch value=\"www.donews.net/dodo\" checked> 搜索本站<br>");
document.write("</font>");
document.write("</td></tr></TABLE>");
document.write("</FORM><form method=post id=form2 name=form2 onsubmit=chggo()>");
document.write("<input type=\"hidden\" name=\"__VIEWSTATE\" value=\"\" />");
function chggo(){
document.getElementById("form2").action=document.getElementById("Form1").action
}
//–>
</script>


2005年05月23日

自打KESO写一篇我的烦恼,我忙了很多,感谢KESO让更多的人关注网页设计这个领域
之所以说2句,因为看了有些其他相关的文章
1。伸懒腰的秘密同学说我感慨怀“才”不遇,其实我那有什么才,所以无才也就无不遇之说。
2。我对我现在的工作状态很满意,无论是职位还是待遇,木有抱怨过什么
3。keso写这篇文章的标题其实应该是“美工的烦恼”,恰巧他认识我这么一个“美工”,于是我就成立他文章的例子。他写这篇文章的目的是让大家关注WEBUI在中国的发展,而不是我
4。至于DONEWS的新版,有很多不足的地方,希望大家能找BUG,提意见,让DONEWS越做越好

2005年05月20日

做了一个简约的
还是选择Lighty模板,将代码复制到“自定义CSS”里面


body, html {
background:#f5f9fb;
    color: #787878;
    font-family:ms shell dlg;
    font-size:12px;
    margin: 0;
    line-height:150%;padding:0px
  
}
#nadframe{display:none}
form{
margin-right: auto;
margin-left: auto;
font-size:14px;
}

.pagelayout{
    margin: auto;
    padding:0px 0px 0px 0px;
    width: 100%;
    font-size:14px;

}
a:visited, a:active, a:link {  
    color : #64b1d8;
    text-decoration : none;
}

a:hover {
    color: #64b1d8;
    text-decoration :none;padding:3px;
    border-bottom:1px dotted #333
}

blockquote {
    font-style : italic;
}

#header {
  text-align:right;
  color:#ffffff;
  font-size:12px;
  font-family:ms shell dlg;
  padding-top:0px;
  padding-right:20px;
 height:110px ;background:#aaddff;border-bottom:6px solid #e4e4e4;
 background:#aaddff url(http://www.donews.net/images/www_donews_net/dodo/54776/o_lanbj.gif) 0px 10px no-repeat;
}
#header span{float:left;padding-top:35px;text-align:right;width:100%;}
#header #Header1_HeaderTitle{
color: #000000;
 font-size:14px;font-family:arial;line-height:120%;font-weight:bold;color:#fff
}
#main {float:left;padding: 10px 0px 0px 25px;width:75%;font-size:14px;line-height:160%;color:#666666;word-wrap:break-word;

}
#footer{clear:both;border-top:3px solid #c0c0c0;padding-top:10px;text-align:center;font-size:12px;width:100%}

#menu {clear:both;padding:0;
    float:left;
    width:17%;padding-top:10px;
word-wrap:break-word;
padding-right:5px;padding-left:5px;
background:#EBF7FF;border-right:1px dotted #c0c0c0;
}

#menu h1 {
    color:#666;padding:0px 0px 0px 18px;;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    height:20px;
    border-bottom:1px solid #d0f3fc;background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_flag_blue.gif) no-repeat;
}

#menu h3 {
 color:#666;padding:0px 0px 0px 18px;;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    height:20px;
    border-bottom:1px solid #d0f3fc;background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_flag_blue.gif) no-repeat;
}
#menu ul {
    list-style: none;
    padding: 0px;
    margin: 0px 0px 15px 5px;
    font-size: 12px;

}
#comments{font-size:12px;line-height:150%}
#comments a{font-weight:bold}
.postTitle{font-weight:bold;background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_em_38.gif) no-repeat;padding-left:25px}
.postTitle a,.postTitle a:link,.postTitle a:visited{color:#64b1d8;font-size:14px}
div,select,input{font-size:12px;word-wrap:break-word;}
div.block {
  background-image: url(images/main_background.gif);
  background-position: top left;
  background-repeat: repeat-y;
  font-size: 12px;
  text-align: justify;
}

div.block_footer {
  background-image: url(images/day_footer.gif);
  background-position: top left;
  background-repeat: no-repeat;
  height: 67px;
}

div.post {
  padding-left: 0px;
}
.dateTitle{background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_12.gif) no-repeat;padding-left:40px;font-size:12PX;color:#808080;line-height:250%;font-weight:bold}
div.posttitle {
  color: #73AF1D;
    font-family: "ms shell dlg";
    font-size: 14px;
    font-weight: bold;
}
div.postText{line-height:150%;}
.posttitle a:visited, .posttitle a:active, .posttitle a:link { 
    color:#64b1d8;
    text-decoration : none;
    padding:2px;
}

.posttitle a:hover {
    color: #64b1d8;
    text-decoration : none;padding:3px;
    border-bottom:1px dotted #64b1d8;
}
.postFoot{line-height:120%;border-bottom:1px dotted #808080;font-size:12px;}
div.itemdesc {
  color: #808080;
  font-size: 12px;
    text-transform: uppercase;
}

div.seperator {
 
  background-position: top left;
  background-repeat: no-repeat;
  margin: 15px 0px 10px 0px;
}

div.entrylistitem {
  padding-left: 20px;
  padding-bottom: 10px;
}

a.entrylisttitle, a.entrylisttitle:visited, a.entrylisttitle:link, a.entrylisttitle:active {
  color: #FF6600;
    font-size: 14px;
    font-weight: bold;
}

div.moreinfo {
  font-size: 12px;
  text-align: justify;
}

div.moreinfotitle {
    color: #FF2a00;
    font-size: 12px;
    font-weight: bold;
}

div.comments {
  font-size: 12px
}

div.comment {
    background-color: #FBFBFB;font-size:12px;
  border: 0px dotted #DDDDDD;
  margin: 10px 0px 10px 0px;
  padding: 10px;
}

div.comment_author {
  margin: 5px 0px 5px 0px;font-size:12px;
}

div.comment_content {
  margin: 5px 0px 5px 0px;font-size:12px;
}

#postcomment {
    border: 0px solid #DDDDDD;
    background-color: #FBFBFB;
  font-size: 12px;
  padding: 10px;
  text-align: justify;
  margin-top: 15px;
  width: 435px;
}

#postcomment div {
    color: #808080;
  font-size: 12px;
    font-weight: bold;
  margin: 5px 0px 5px 0px;
}

#postcomment input.text, textarea {
  border: 1px solid #DDDDDD;
  font-size: 12px;
}

input.text {
    width : 300px; 
}

textarea {
    width : 300px;
    height : 200px; 
}

#relatedlinks ul {
    list-style : none;
    margin-left : 10px;
    padding : 0px;
}

span.highlight
{
    background-color:Yellow;     
}
.block_title{font-size:14px;font-weight:bold}
.code{float:left;width:80%;padding:10px;border:1px dotted #d9d9d9;background:#f4f4f4;}
.postFoot{clear:both;padding-top:6px}
br{clear:both;}


MSN MESSENGER 7.0支持动画的头像,应该是FLASH格式的,试试MSN Content Installer 1.0吧,还可以鼠标右键还可以选择头像的心情,Standtard,Happy,Winking,Laughing,Sad,Angry

MSN Content Installer 1.0可提供﹕

  • 130个 Winks
  • 30个 Moods
  • 30个 Packs
  • 85个 Backgrounds
  • 1300个 Emoticons

表情和背景就没必要了,点击软件界面的"Get Winks"和"Get Moods"就可以了

备注﹕

  • 只支持MSN Messenger 7.0.0777
  • 安裝MSN Content Installer 1.0时候请勿关闭MSN Messenger
  • 要先安装Microsoft .NET Framework

相关下载﹕

不过如果能DIY就好了,装好以后也可以把.net Framework卸载掉

2005年05月18日

DoNews的这个BLOG只支持上传图片格式到相册,不支持上传其他文件,所以只好把CSS样式表放在自己的服务器空间里。期待韩磊后续版本中加入文件夹功能。


效果可以点击本页右边导航的 “切换页面样式”中的不同样式,网络不好时会有点慢,因为在调用相关图片等文件

下面说说怎么和我这里同步更新页面风格皮肤

怎样和本BLOG同步  donews Blog的页面风格(就是说我这里增加了新的风格,你那里也同时回显示

1。首先进入“选项”--“配置”

2。选择“皮肤”的样式为:Lighty

3。在"自定义CSS"那里输入一下代码:
/**/

4。在"公告栏"处输入一下代码:

<script language="JavaScript" src="http://www.iqoo.com/doblog/skin.js">
</script>
<script language="JavaScript">
<!–
setActiveStyleSheet("4")
//–>
</script>


第四步中的setActiveStyleSheet("4")的数字可以自己选择,目前为1-4,注意本BLOG的更新信息。

到此这样就可以了

如果你不是懒人的话,可以在第三步中贴上本BLOG DIY的任何一种风格皮肤的完全代码(具体见DIY donews Blog系列的文章中的代码),然后将第四步中的
<script language="JavaScript">
<!–
setActiveStyleSheet("4")
//–>
</script>,这段去掉,这样做的好处就是不会先出一个系统默认的皮肤






saivan留言问到这个问题,应该很多人都遇到过.
如何避免表格因为图片尺寸或者过长的英文字符而变形撑开,在CSS加入以下代码就可以防止,同时英文单词也会按单词断行,不是按字母

看了BINGU的留言,加一句,这个在CSS2.0是不支持,但是能解决一些实际问题。页面设计不是为了标准检验而设计,还是以用户使用为主,在目前有些WEB标准无法解决的一些问题上,我会采用一些非标准的方法处理,只要主流BROWSER如IE,Firefox,Netscape,Opera等上能正确显示,我会把通过WEB表准的校验放在次要位置,并且MS已经建议在CSS3。0中加入这个属性了,也许CSS3。0会支持。WEB标准也是在发展的,也许明天的标准就加入了这个属性,或者出现新的属性来解决。
看看这个连接吧

http://www.w3.org/TR/2003/CR-css3-text-20030514/#wordbreak-props

<style>

table {

table-layout: fixed;

word-wrap:break-word;

}

div {

word-wrap:break-word;

}

</style>