Dangbao's Blog

年度档案: 2009

Google AdWords的500元免费广告费

之前收到google的邮件也没在意,后来听群里的人说送广告费是真的。于是后来又不小心看到这个活动,那就申请试试吧。注册了以后没几天,就接到google中国上海总部打来的电话,客服小姐会简单的问问你注册时的基本情况,而后就是等给你开通后登陆。这里要注意的是,第一次登陆的时候需要设置AdWords的帐号是否与你已有的google帐号捆绑。设置成功后就能登陆了。那几天的网速特别慢,登陆后感觉很卡,客服小姐打了好几次电话问我的帐户ID都没成功,后来终于完成登陆才知道了,还根据提示设置了相关的帐户信息、制作广告牌、设置关键字及费用支付等等一系列,而且最重要的是要接受你的客户经理的管理邀请。这样才能让GG给你的帐号打钱,然后广告位才能生效。这里需要说明的是,AdWords的启动资金是需要50元,网络上流传的这50元是需要自己支付是不对的,我的50元就是GG给的,也就是说,除去启动金50元,GG给了我450元的广告费。广告位上价了俩天,点了4次,一共花了2块多。再观察几天看看。值得称赞的是GG的客服很是耐心,即使我这样的免费用户也是不厌其烦的打电话过来辅助客户操作。好了,更多的体会在之后奉上!

免费广告费申请地址

ps:有朋友也申请了,不过说是要预存50元启动金,一头雾水中…………

站在前端看静态网页

之所以这么写,是一直想写一个能完全实施和实现自己想法的一个站或者是一套页面。当然这个实现起来对于我来说确实有一定的难度,也需要网站各个职能的人员去集思广议,而且也需要很大的精力去弄。我也只能是站在前端人员的角度谈谈,下面我具体来说说。
1.策划设计。
一个好的策划方案是一个完美网页的根基。这个就不多说了,就按一般网页可体现的内容和形式来吧。先抛开设计的水平和效果不谈,光以写静态的角度来分析。
首先网页的图片要达到个性和共性并存,尽量用少的图片达到整体网页效果变化和统一。呵,这话意思有点模糊,比方说标题条是一个背景,那么所有的标题条背景都可以用这个背景,而变化就可以在标题上做图片装饰变化。
然后是合理利用图片表现文字,大家都知道网页的字体太大就不圆滑了,而想实现圆润绚丽或突出的字必须用图片。以前我们遇到这样的情况就直接切下来图片嵌到页面里去。现在大部分同仁开始重视页面代码的质量,这种情况一般都是把图片用背景来显示,而页面代码里则是图片上的文字,然后做了隐藏,这样在网页上显示是没问题的。所以,网页上显示的字用图片还是字符显示,这是一个值得探讨的话题,这就好象冬天时候女人是要身材还是要温暖,男人是要风度还是温度一样。只能是根据实际情况和策划需求来定。
还有一点就是内容块的间距margin和填充padding。个人认为,在大部分的时候要使用统一的尺寸来定义,这样的好处一是有了统一感,二是省了一些CSS代码,三是修改和维护方便,改一处则全局适用。以上几点做为一个有制作经验的设计师肯定是会考虑到的,这里想引申的就是事先综合的考虑和有效的沟通,避免页面已经设计好又去修改的返工。
2.静态页制作。
这个可谈的就太多了,只能是把一些大的方面拿出来说说,毕竟真正去写一个页面的时候遇到的情况是不一样的。我还是说一点共性的东西。
图片的合理切片。切图的时候注意图片的优化,在质量和文件体积之间找到平衡点。合理使用css spirit。尤其是涉及到垂直和水平重复平铺图片的时候,更应该考虑各个小图的摆放位置及生成的图片大小体积。
标签的合理运用。什么时候该用H1、H2,什么时候该用div和span,都要在充分了解页面内容和标签意义下使用。同时我们也要考虑在页面裸奔(网页没有加载CSS)的情况下的显示情况。而这一切,都需要你有扎实的HTML功底。
结构-行为-表现的分离。虽然我们谈这个话题很久了,虽然我们已经在绝大部分时候已经做到这一点了,但是,我想要的是真正的分离。不要告诉我你页面里有onmouseover和onmouseout就是纯CSS制作。即使禁了JS,页面还是那个样子的页面。而这是我要努力和方向。目前来说,jQuery会帮很大的忙。

广大的WEB团队在开发过程总是会遇到这样那样的不统一和理解错误而造成工作效率低下,而绝大部分中小型团队因为自身水平和其它客观因素,不能制订一套自己的页面规范,只能靠相互的默契或牺牲时间去弥补,导致做出来的东西完全不是自己想的那样,而网站本身就是一个团队配合的事情,如果能够更好的更有效率的完成项目,这真是个课题。希望我们能够在工作和学习中开发出自己心中的完美网页。

以上的想法纯属是个人愚见,太理想化了,对则勉,错请责:)

css+xhtml页面构建的心得总结

写了这么长时间的静态页面了,有必要来整理一下网页代码的书写心得,也许会对读者您有所帮助。我按照一般页面构成来说吧。
login:
头部一般会有登陆条。写用户名密码的地方,建议字和input分别用单独类的margin来控制。大家都知道文字和input在一起的时候用line-height并不会起什么效果。记得用户名和密码的文字用label标签。
logo:
这个可能有值得商榷的地方。有人喜欢把LOGO用H1来显示,有人喜欢背景显示LOGO而代码隐藏文字。具体对SEO的影响自己去体会吧,不妨都试试,不过LOGO上总要带链接的。
nav:
导行菜单一般都用LI来做,不过最好带上浮动float:left,而不仅仅是display:inline,这样控制起来可能更精确一点。至于象门户那样复杂的菜单就可以自由发挥,比如我之前写的一个菜单。.
search:
搜索的输入框和按纽用padding值来控制里面字的显示吧,用height和line-height的效果可能在各个浏览器里不尽相同。按纽如果都用系统默认的样式就别清除默认的border值,如果用图片就必须清除.line-height的值比height大点可能效果会好点,不过要溢出剪切哦。
banner:
这个其实没什么可说的,但是针对一行多个广告条,我还要补充一句,banner既可能是图片也可能是FLASH,写的时候套个DIV写个宽度和溢出剪切没坏处。
list:
列表是出现最多的。控制内容和边框的间距最好给ul用padding,并且加宽度和剪切。至于li就要用height和line-height来控制了,如果回行也要剪,保证标题内容代码的完整而又不破坏页面美观。前面加点那肯定是用背景图片来控制了,默认的项目符号真的不好用。
titleBar:
标题行一般就是单独居左出现,或者右面是more和tags。这个写法也是根据每个人习惯不同而有变化的。我最近试着标题用H3,more或tags用H4来写。以后关注一下效果如何。毕竟这样的话,在没有加载样式的情况下,某块内容的标题会突出显示。当然more和tags用span写也可以,这样看具体显示的内容而定了。
pictureWrap:
图文混排的表现形式比较多,语言描述也太麻烦就不说太多了。想说的就是图片配标题的时候,给标题加个class,定义一下宽高和行高,然后溢出剪切,这样标题太长也不会挤乱页面了。而且写动态程序的时候也不用去数截取多少个字了。毕竟,我们想留给读我们代码的爬虫一个完整的标题。
footer:
这个也没多少可说的,该怎么写就这么写,能用A标签的就不用li了。记得统计代码放在最后,而且最好给他一个dispaly:none的样式。

好了,就写这么多吧,虽然很多代码可能是需要重复敲打好多遍的,可是如何写出既让人又让机器读的舒服的代码,是我们需要逐步总结和研究的,而这更是我们努力的方向。

PS:以上纯粹是本人一个时期内的心得总结,如有不妥之处还请您不吝赐教,共同进步!

jQuery的隔行变色条纹效果

两种颜色交替的条纹比较常见,用jQuery写比较简单,这也得益于jQuery的两个内置的odd和even的奇偶函数。想想用纯JS要写多少代码,用jQuery才4行而已

$(document).ready(function() {
  $('li:odd').addClass('odd');
  $('li:even').addClass('even');
});

三色交替条纹:利用索引将3个类指定3个数字,然后求模运算,得出每行的数值和对应的类。

$(document).ready(function() {
  var className = {
      0: 'first',
      1: 'second',
      2: 'third'
   };
   $('li').each(function(index) {
    $(this).addClass(className[index % 3]);
   });
});
当然,对应的扩展到4、5、6或更多条的背景颜色,就需要给className添加对应的数字和类,并添加模运算的除数即可。

dedecms调用代码改动归纳

使用了一段时间DEDECMS了,对网上朋友们总结出来的修改DEDE功能的方法做个小的归纳。

1.在首页调用最新的分类信息:
{dede:arclistsg row='10' titlelen='50' orderby='pubdate' channelid='-8' typeid='7'}

  • [field:textlink/]
  • {/dede:arclistsg}

    2.在首页调用分类信息的联动类别,以下代码添加在common.func.php里:
    //根据InfoTypeID获取信息类别(求购、求租、出售等……)的名称
    //参数说明:第1个参数是从信息表里读取出来的类别ID,第2个参数是联动菜单类别
    //这样这个函数就不限于只调用分类信息的信息类别了,还可以用于其它地方
    function GetInfoType($tid,$bigt)
    {
    global $dsql;
    $typename = '';
    $query = "Select ename From `#@__sys_enum` where evalue=$tid and egroup='$bigt'";
    $dsql->Execute('ename',$query);
    while($row = $dsql->GetArray('ename'))
    {
    $typename .= ($typename=='' ? $row['ename'] : ','.$row['ename']);
    }
    return $typename;
    }
    //------ End--------

    首页添加代码
    [field:infotype function=GetInfoType(@me,'infotype') /]

    3.问答模块在首页的调用方法。
    {dede:ask row='10' qtype='' titlelen='60'}

  • [field:tidname/]:[field:title/]/a>
  • {/dede:ask}

    jQuery的hover

    我们都知道CSS的规范里有:hover的伪类,就是鼠标经过元素时,可以影响元素外观的样式。大家也都知道,在IE6中,只有在链接上才能看到hover的效果。那么今天介绍的jQuery则可以让我们实现鼠标经过元素触发.hover的样式。

    $(document).ready(function() {
    $('h1').hover(function(){
    $(this).addClass('hover');
    }, function(){
    $(this).removeClass('hover');
    });
    });

    在css里写一个.hover{background:#ccc;}的样式,那么,即使鼠标经过没链接的H1时,也会触发.hover的灰色背景。

    站在前端看jQuery

    目前jQuery比较流行,很多时候甚至已经成了考验前端人员的Javascript水平的一个标准了。jQuery以体积小、代码简洁幽雅而闻名。经过我一段时间的学习,今天站在前端人员的角度来谈谈jQuery的特点。

    • 1.体积小。jQuery的体积小,加载速度快,这是它最吸引前端人员的地方之一。
    • 2.代码简洁。一些用JS写稍微复杂的脚本效果用jQuery仅仅需要几行代码。比如隔行变色。
    • 3.查找页面元素的机制构建于CSS选择符上。查找和锁定元素更简单,取得页面元素很简单。
    • 4.无需更改xhtml和css,就可以修改页面外观,改变页面内容。
    • 5.事件处理的良好兼容性。这个不消多说,jQuery的代码很好的解决了浏览器的不一致性。
    • 6.内置动态效果。如淡入、擦除。

    当然,jQuery还有很多的优点,而以上几点足以令每个前端向往jQuery。

    css控制打印网页

    这个话题想谈很长时间了,之前做一个栏目需要让用户打印页面标题和正文的,而正文之外的东西都不需要打印。这个时候就用到了控制打印的样式表了。

    <link rel="stylesheet" type="text/css" media="print" href="print.css" />

    正因为xhtml和css是分离的,所以我们可以在print.css里自由书写需要打印显示的内容和表现形式。那么这也要求我们在书写xhtml的时候更多考虑到打印显示效果的需求,良好的扩展标记和结构嵌套,使得我们轻松的使用display:none将内容设置为不显示。然后就是去书写print.css内容的时候了,你象设置word一样去写你想打印的页面吧。

    需要注意的是,在打印样式表中,字体大小是以点(pt)来计的。

    观望alimama淘宝客

    今天说下alimama和淘宝客,alimama因为提现的金额没有下限、每月可提取的低门槛、便利而受到广大小站长的青睐,而且个人感觉alimama的图片广告比较精美,放在网站上提升美观效果。近期发现很多的专门的个人博客推荐淘宝的店铺或商品,然后用户消费之后就可以拿到相应的佣金。

    淘宝客是一种按成交付费的广告形式。淘宝客只需将推广代码放到网站、博客、论坛或其他地方,有买家通过此链接完成交易,淘宝客就能拿到1.5%至50%的佣金。

    看来又是一种潮流了,前段时间推荐小软件的博客可能要被冲击了。淘宝客有着各种形式的广告方式,最简代码只是一段带链接的文字,而且文字可以自定义,这点比较人性化。站长可是自己编辑广告词,而且适当增加一些自己对产品的了解和介绍,一些站长的推荐物品是挑选佣金相对高的同类产品,所以,货物的质量和价格,还需要消费者自己来甄别,也希望货物推荐的站长都能真心推荐一些好的产品,慢慢积累自己忠实的用户。

    Dangbao的CSS共用代码

    写了这么长时间的CSS,总归有一部分共用样式是重复出现机率最高的,花时间总结了一下,方便自己,也方便要学习的同志们,希望对大家有用.

    div,form,input,select,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
    h1,h2,h3,h4,h5,h6{font-size:12px;}
    li{list-style-type:none;}
    img{border:none;}
    body{font-family:simsun,Verdana, Arial;margin:0;padding:0;background:#fff;font-size:12px;color:#333;}
    /*link*/
    a{color:#333;text-decoration:none;}
    a:hover{color:#cc0000;text-decoration:underline;}
    /*public*/
    .left{float:left;}
    .right{float:right;}
    .clear{clear:both;height:0;overflow:hidden;display:block;}
    .clearfix:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:".";}
    .mt{margin-top:6px;}
    .blank{height:6px;display:block;overflow:hidden;}/*空白div*/
    .all{color:#cc0000;padding-left:3px;}/*全文*/
    .more{float:right;color:#cc0000;padding-right:10px;}/*标题右侧更多*/
    .pic{padding:1px;border:1px solid #ccc;}
    

    标签:

    android bom border css工具 css布局 display DW ff firefox fireworks fixed flashget html ie6 IETester IE开发人员工具 iis jQuery jq插件 win7 WordPress 分类信息 挂马 无线路由器