点击这里给我发消息 点击这里给我发消息
首页 > 行业资讯 > IT风云>详细内容

网页新手30条进阶秘技(下)

添加时间:2010-1-5
    相关阅读: 企业网站 企业网站 网页 设计 开发 页面 搜索引擎

许许多多的网页新手正徘徊在专业编码的门槛前,而网上的教程参差不齐,鱼龙混杂,很容易让新手迷茫。这里总结了30条网页编码的“秘技”,只要在编码过程中牢记它们,灵活运用,你一定会写出一手漂亮的代码,早日迈入专业开发者的行列。参看《网页新手30条进阶秘技(上) 》

16. 使用一个好的代码编辑器

choose a great code editor

不论你是Windows还是Mac用户,这里都有很多优秀的编辑器供你选择:

Mac 用户

  • Coda
  • Espresso
  • TextMate
  • Aptana
  • DreamWeaver CS4

    PC 用户

  • InType
  • E-Text Editor
  • Notepad++
  • Aptana
  • Dreamweaver CS4
  •  17. 压缩前端代码!

    Compress

    通过压缩CSS和JavaScript代码,通常可以减小25%以上的文件体积,在某种情况下,这会大大减轻你的带宽压力,提高加载速度。

    Javascript 压缩服务

  • Javascript Compressor
  • JS Compressor
  • JS代码在线压缩( 中文 )

    CSS Compression Services

  • CSS Optimiser
  • CSS Compressor
  • Clean CSS
  • CSS代码在线压缩( 中文 )
  • 18. 缩减,缩减,缩减

    回望我们大多数人写的第一个页面,一定会发现严重的 “DIV癖”( divitis ),通常初学者的本能就是把一个段落用DIV包起来,然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。

    网页写完后,一定要多次回头检查,尽量的减少元素的数量。
    能用UL布局的列表就不要用一个个的DIV去布局。

    正如写文章的关键是“缩减,缩减,缩减”一样,写页面也要遵循这个标准。

    19. 为所有的图片加上Alt属性

    为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息,并且对图像搜索引擎友好。

    Firefox不支持显示图像Alt属性,可以加入title属性:

    <img src="cornImage.jpg" alt="图片标题" title="图片标题" />  

    20. 学会熬夜

    我经常不知不觉的学习工作到凌晨,我认为这是个很好的状况。

    我的“啊~哈!”时间( “AH-HA” moments,指柳暗花明或豁然开朗的时刻)通常都发生在深夜,比如我彻底理解JavaScript的“闭包”概念,就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻,那就马上试试吧!

    21. 查看源代码

    view source

    没有什么比模仿你的偶像能让你更快的学习HTML。起初,我们都要甘做复印机,然后慢慢得发展自己的风格。研究你喜欢的网站页面代码,看看他们是怎么实现的。这是高手的必经之路,你一定要试一下。注意:只是学习和模仿他们的编码风格,而不是抄袭和照搬!

    留意网络上各种炫酷的JavaScript效果,如果看上去是使用了插件,那根据它源码中head标签内的文件名,就可以找到这个插件名称,然后就可以学习它据为己用。

    22. 为所有的元素定义样式

    这一条在你制作其他公司企业网站时尤为必要。你自己不使用blockquote标记?那用户可能会用,你自己不使用OL?用户也可能会。花时间做一个页面,显示出ul, ol, p, h1-h6, blockquotes, 等等元素的样式,检查一下是否有遗漏。

    23. 使用第三方服务

    译者注:英文原文标题为“使用Twitter”

    现在互联网上流行着许多可以免费加在网页中的API,这些工具非常强大。它可以帮你实现许多巧妙的功能,更重要的是可以帮你宣传网站。

    Twitter Snippet

    24. 学习Photoshop

    Learn Photoshop

    Photoshop是前端工程师的一个重要工具,如果你已经熟练掌握HTML和CSS,那不妨多学习一下Photshop。

    Psdtuts+上有许多英文的饰品教程:Videos section

    Lynda.com  也有大量教程,不过要支付$25美元
    "You Suck at Photoshop" 系列教程
    花费几个小时的时间学习Photoshop的快捷键操作

    25. 学习每一个HTML标签

    虽然有些HTML标签很少用到,但你依然应该了解他们。比如“abbr”、“cite”等,你必须学习它们以备不时之需。

    顺便说说上面两个标签:

    abbr:
    表示一个缩写形式,比如 "Inc."、"etc."。通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
    url:http://www.w3school.com.cn/tags/tag_abbr.asp

    cite:
    通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
    按照惯例,引用的文本将以斜体显示。
    url:http://www.w3school.com.cn/tags/tag_cite.asp

    26. 参与社区讨论

    网络上有许许多多优秀的资源,而社区中也隐藏着许多高手,这里你既可以自学,也能请教经验丰富的开发者。

    27. 使用CSS Reset

    Css Reset也就Reset Css ,就是重置一些标签样式,或者说默认的样式。

    关于是否应该使用CSS Reset,网上也有激烈的争论,笔者是建议使用的。你可以先选用一些成熟的CSS Reset,然后慢慢演变成适合自己的。这里有一些好用的CSS Reset(中文)。

    28. 对齐元素

    Line em up

    简单来说,你应该尽可能的对齐你的网页元素。可以观察一下你喜欢的网站,它们的LOGO、标题、图表、段落肯定是对得非常整齐的。否则就会显得混乱和不专业。

    29. 关于PSD切片

    Slice a PSD

    现在你已经掌握了HTML、CSS、Photoshop知识,那么你还需要学习如何把PSD转换为网页上的图片和背景,下面有两个不错的教程:

  • Slice and Dice that PSD
  • From PSD to HTML/CSS
  • 30. 不要随意使用框架

    Javascript和CSS都有许多优秀的框架,但如果你是初学者,不要急于使用它们。如果你还没能熟练的驾驭CSS,使用框架会混淆你的知识体系。

    CSS框架是为熟练开发者设计的,这样会节省它们大量的时间。(Oncoding编码营)

    咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
    广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
    广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
    = 深圳商务地址:深圳市宝源路华丰宝源大厦606
    研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册