网站建设规范

公司网址：页一、网站模板命名规范index.html-----------首页模板news_class.html------新闻多栏目页news_list.html-------新闻列表页news_content.html----新闻内容页pro_class.html-------产品多栏目页pro_list.html--------产品列表页pro_content.html-----产品内容页about_class.html-----关于我们多栏目页（或称单页）about_list.html------关于我们列表页（或称单页）about_content.html---关于我们内容页（或称单页）img_class.html-------图文多栏目页img_list.html--------图文列表页img_content.html-----图文内容页header.html-----------上边模块（一般用于公共调用）footer.html-----------下边模块（一般用于公共调用）lefter.html------------右边模块（一般用于公共调用）class.html-----------默认多栏目页list.html-------------默认列表页content.html--------默认内容页【CSS命名规范】header------------头部nav----------------导航（navigation）subnav------------子导航main---------------主体部分footer--------------底部links---------------友情链接box-----------------块current------------当前（用于面包屑导航）title----------------标题info----------------信息（用于标题下边的注解）pre_article-------上一篇公司网址：小技巧，小提示list--------------------列表scroll----------------滚动regsiter--------------注册download----------下载*_l--------------------某个类的左边（left）*_m-------------------某个类的中间（middle）*_r--------------------某个类的右边（right）*_top----------------某个类的上边（top,区别title所以不用_t）*_center--------------某个类的中间（center与content不容易区分）*_bottom--------------某个类的下边（区别b标签，不要直接用_b）二、其他可选用的样式命名方式整个容器：container外围整体布局：wrap页头部分：head/header/top内容：content页脚部分：foot/footer/bottom栏目：column主体部分：main左/中/右三栏：main_left/main_mid/main_right或者main_l/main_m/main_r侧栏：sidebar左右两栏：siderbar_l/sidebar_r或者leftsidebar/rightsidebar左中右：left/center/right侧导航：sidenav左/右导航：leftsidenav/rightsidenav子导航：subnav菜单：menu子菜单：submenu标题：title摘要：summary公司网址：页下拉：drop下拉菜单：dropmenu搜索：search热门搜索：hotsearch关键字：keyword搜索输入框：search_input搜索条：searchbar友情链接：friendlink/link版权信息：copyright投票：vote合作伙伴：partner服务：service指南：guid网站信息：siteinfo网站地图：sitemap网站帮助：sitehelp法律声明：siteinfolegal信誉：siteinfocredits加入我们：joinus关于我们：aboutus联系我们：contactus小技巧：tips注释：note当前的：current标签页：tab文章列表：List提示信息：msg滚动：scroll工具条：toolbar/tool时间：time日期：data热点：hot新闻：news注册：regsiter状态：status按钮：btn下载：download产品：products/pro缩略图：screenshot等等...三、JS使用规范公司网址：特效文件主要有以下几种：一、Jquery(基层框架)其它框架暂不考虑使用二、基于Jquery的各种插件1、superslide★幻灯片、下拉框、选项卡等特效。已加入jquery.plugs.yys.js，每个项目都有可能引用。2、easing1.3缓动效果★用来补充jquery本身的缓动效果的不足。已加入jquery.plugs.yys.js，每个项目都有可能引用。3、color渐变★颜色渐变，如鼠标放上文字逐渐变化可动态改变：Color、backgroundColor、borderColor、borderBottomColor、borderLeftColor、borderRightColor、borderTopColor、outlineColor等。已加入jquery.plugs.yys.js，每个项目都有可能引用。4、lazyload懒加载，指定图片等延迟加载。根据需要自行引入。5、layer弹窗插件页面弹窗、个性对话框、视频弹窗、登录注册弹窗、相册效果。6、validform表单验证，登录注册、密码重复性验证。7、其他插件例如时间选择、日历等并不常用的插件，具体使用时斟酌选择。三、页面执行文件yys.js这里写具体实现代码，可以是利用jquery的，也可以是利用了jquery插件的，也可以是原生js代码。尽量不把js写到html文件中，而是写在这个页面js中【注意事项】1、因不同JS之间干扰和兼容问题会影响到使用效果，故尽量使用公司规定的JS特效。如因特殊需要必须使用，可报请项目经理研究决定。2、JS特效是与css结合使用，需了解css架构之后才能更好使用。3、JS特效会有增加，以最新公布为准。4、JS书写尽量具有通用性。一些通用的特效可定义专门的class，只要因为此class名即可实现特殊效果。css架构人员请勿随意用此css进行样式架构。【注意：id与class】id一个页面只可以使用一次，class可以多次引用。id和class好像没什么区别，在页面中用了多个id在IE中显示也正常，第一影响就是不能通过W3的校验。在页面显示上，目前的浏览公司网址：页器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。因此：样式最好以class为主，不用id【一些注意事项】1)尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名2）一律小写字母3）尽量用英文4）css注释/*fff*/注意要加空格，不然在jsp读取下会忽略掉注释下得第一个css5）css文件最好用utf-86）页面啊居中：margin:0auto;居右：margin:000auto;居左：margin:0auto07）不要去使用生僻的标签，因为这些标签往往在不同浏览器中解释出来的效果不一样；所以你要尽可能的去使用那些常用的标签；8)必须为大区块样式添加注释,小区块适量注释;9)代码缩进与格式:建议单行书写【规范写代码，从你我做起！】代码书写规范的好处：1、方便团队合作，不用沟通一眼就知道对方写的是什么意思，提高工作效率。2、方便后期修改。时间长了自己也知道当初写的是什么意思。3、规范代码让人一看就知道高手写的。4、代码乱七八糟，自己写着写着就迷糊了。最后修订于2016年01月19日公司网址：：首页一般性标准架构图解释：1、首页要有友情链接。使用类links。2、雷同的模块要用统一的类，例如图中的box,需要去别的再加一个特殊样式的类即可。3、比较特殊的地方可以用特殊命名，例如技术文档的地方，可以使用jishu这样的词（尽量少用）。首页模块比较复杂，所以碰到这样情况在所难免。headerlogoheader_r_topheader_r_bottomnavmainmain_lmain_rlinksfooterfooter_nav（底部导航）copyright(版权信息)address(地址信息)boxboxbox+特殊样式boxfloat_lnewsboxfloat_ljishufocus(幻灯片)box_titlemorebox_content公司网址：：内容页面一般性标准架构图解释：1、内页一般不要友情链接。2、内页的模块相对比较固定，所以尽量不要使用过多的特殊命名。headerlogoheader_r_topheader_r_bottomnavmainmain_lmain_rcurrent(面包屑导航)titileH1(标题)info(发表时间作者信息等)content(要加line-height:200%)pre_articlenext_articlefooterfooter_nav（底部导航）copyright(版权信息)address(地址信息)公司网址：：列表页面一般性标准架构图解释：1、列表页面一般不要友情链接。2、列表页的模块相对比较固定，所以尽量不要使用过多的特殊命名。headerlogoheader_r_topheader_r_bottomnavmainmain_lmain_rfooterfooter_nav（底部导航）copyright(版权信息)address(地址信息)current(面包屑导航)*_listpagelist