Web 页面的开发流程及规范.docx

Web 页面的开发流程及规范 页面开发流程 在写页面之前要先仔细的观察下页面，在心里对页面要有布局一下。比如下边这个页面：我们看到这个页面，要知道这个页面要怎么布局的才能合理: 1）最外层我们要用一个大的盒子包裹起来 要定义----wrap 2）然后头部（关注微信和下边logo包括导航条） ----header ① 关注微信那块用 ----sub_header ②下边就是导航用 ----nav 3）下边就是我们的主体部分（banner和登录框）---- main（content） ① 主题图片用 ----banner ②登录框就用 ----login 4）底部这部分内容就用 ----footer !DOCTYPE htmlhtmlhead lang=en meta charset=UTF-8 title/title style *{padding: 0;margin: 0; border: 0;} .wrap{width:100%;height:auto; font-size: 24px; text-align: center;} .header{width: 100%; height: 100px;background: #0050ef; color: #fff3f3;} .header_top{width:100%; height: 40px; background: #000;} .header_bottom{width:100%; height: 60px; background: #fff; color: #000;} .main{width:100%; height:500px; background: #0099FF;} .footer{width: 100%; height: 80px;background: #fff;} .footer_nav{width: 100%; height: 40px; background: #fff3f3;} .copyRight{width:100%; height: 40px; background: #000; color: #fff;} /style/headbodydiv class=wrap div class=header div class=header_top微信/div div class=header_bottomlogo+导航/div /div div class=main主体banner/div div class=footer div class=footer_nav首页 导航/div div class=copyRight版权/div /div/div/body/html 1.页面文件的命名 html文件命名: 英文命名, 后缀.htm. 用小驼峰命名规则：第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母 注意事项 1）、所有的命名最好都小写也可用小驼峰命名规则2）、属性的值一定要用双引号()括起来，且一定要有值如class=divcss5,id=divcss53）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整4）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等5）、h1到h5的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。6）、给每一个表格和表单加上一个唯一的、结构标记id7）、给图片最好加上alt标签 8）、尽可能减少div嵌套, 如div class=boxdiv class=welcome欢迎访问XXX, 您的用户名是div class=name用户名/div/div/div完全可以用以下代码替代: div class=boxp欢迎访问XXX, 您的用户名是span用户名/span/p/div;9）、尽量使用英文命名原则10）、尽量不缩写，除非一看就明白的单词 2. CSS样式文件命名如下? Css样式命名有两种“.”和“#”。 无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命