作为一名称职的web前端开发者，这个你是必须要知道的……

作为一名web前端开发者，如何设计才能既让界面友好化又让搜索引擎更受欢迎呢？

下面我们就先从前端的命名规格开始学习吧！

SEO（搜索引擎优化）有很多工作要做，其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面中部IT网将对目前流行的CSS+DIV的命名规则整理如下：
　　页头:header
　　登录条:loginBar
　　标志:logo
　　侧栏:sideBar
　　广告:banner
　　导航:nav
　　子导航:subNav
　　菜单:menu
　　子菜单:subMenu
　　搜索:search
　　滚动:scroll
　　页面主体:main
　　内容:content
　　标签页:tab
　　文章列表:list
　　提示信息:msg
　　小技巧:tips
　　栏目标题:title
　　加入:joinus
　　指南:guild
　　服务:service
　　热点:hot
　　新闻:news
　　下载:download
　　注册:regsiter
　　状态:status
　　按钮:btn
　　投票:vote
　　合作伙伴:partner
　　友情链接:friendLink
　　页脚:footer
　　版权:copyRight
　　1.CSS ID 的命名
　　外　套:　　wrap
　　主导航:　　mainNav
　　子导航:　　subnav
　　页　脚:　　footer
　　整个页面:　content
　　页　眉:　　header
　　页　脚:　　footer
　　商　标:　　label
　　标　题:　　title
　　主导航:　　mainNav(globalNav)
　　顶导航:　　topnav
　　边导航:　　sidebar
　　左导航:　　leftsideBar

　　右导航:　　rightsideBar
　　旗　志:　　logo
　　标　语:　　banner
　　菜单内容1: menu1Content
　　菜单容量:　menuContainer
　　子菜单:　　submenu
　　边导航图标:sidebarIcon
　　注释:　　　note
　　面包屑:　　breadCrumb(即页面所处位置导航提示)
　　容器:　　　container
　　内容:　　　content
　　搜索:　　　search
　　登陆:　　　login
　　功能区:　　shop(如购物车，收银台)
　　当前的　　　current

　　2.另外在编辑样式表时可用的注释可这样写:
　　内容区
　　3.样式文件命名

　　主要的 master.css
　　布局，版面 layout.css
　　专栏 columns.css
　　文字 font.css
　　打印样式 print.css
　　主题 themes.css

 

 

CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS＋DIV的方式实现各种定位。而这样的设计对于SEO(搜索引擎优化)而言是非常值得“庆贺”的！

如下：

 用div+css构架的网站容易向W3C 标准靠拢，网站是否符合W3C标准是搜索引擎给网页排名的一个影响因素，特别是YAHOO，它看的比较重。
网站源代码简洁，除了几个div,ul,li,dl,dd,dt之类的标签外，几乎不用其他标签，这样，是网站内容完全裸露在搜索引擎的蜘蛛面前，便于抓取关键内容，增大关键内容的页面的比重，从而为排名因素增加比重。
可轻松做到关键内容先被蜘蛛读取。一般的站点都是左中右三栏式，页面的主要内容是在中间一栏，而蜘蛛读取页面内容是按照从上而下，从左至右的顺序进行的，如果你的左栏内容比较多，那就麻烦了，你的页面主要内容权值就会下降。而用div+css就可以把主要先写在前面，在写左栏，右栏内容，然后通过CSS一定位就可以了
方便调整网站结构布局。对于常用的表格布局，若想改下布局，可谓牵一发而动全身，网站层结构如果设计的合理，可以用CSS很轻松的改变网站的表现，这就是结构和内容，行为的分离。如果网站结构定期改动，自然对搜索引擎的蜘蛛吸引力不小的。
一个用层和css做好根基的网站，以后的优化工作自然会省力不少的。

 

更多请访问 飞碟工作室 http://blog.csdn.net/qq415734794/

飞旋碟转