2022年网站文件夹结构以及命名规则 .pdf

《2022年网站文件夹结构以及命名规则 .pdf》由会员分享，可在线阅读，更多相关《2022年网站文件夹结构以及命名规则 .pdf（4页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第一部分：目录、文件、CSS 命名方式文件夹与文件名称、CSS 样式命名、程序中的一些控件等等：名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、 拼音为主 （不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂）。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。而且当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。例如： images(图形文件 )， flash（Flash 文件）等。命名方式：（

2、性质 _描素 _位置 _分类 _数量） 项相结合，采用简写、组合的方式形成通用规则。例如：news (性质 ) news_title ( 性质 _描素 ) news_title_top ( 性质 _描素 _位置 ) news_title_top_01 ( 性质 _描素 _位置 _数量 ) news_title_top_a_01 ( 性质 _描素 _位置 _分类 _数量 ) news_title_top_b_01 ( 性质 _描素 _位置 _分类 _数量 ) 常用目录名：data(数据库 ) images(图片 ) install ( 安装 ) templets (模版 ) include (

3、包含 ) admin (后台 ) rss (定阅 ) media (媒体 ) config ( 配置 ) Script ( 脚本 ) Language (语言 ) style (样式 )等 ,常用 CSS 名：页面外围控制整体布局宽度：wrapper头：header内容： content/container页面主体： main侧栏： sidebar尾： footer 等,更多命名查看 : http:/ 第二部分：结构（XHTML ）网站的前端结构与表现分离，达到95%以上。正式上线后的网页代码结构要清晰、明朗，容易阅读， 布局与结构的镶套尽量控制在4-5 层以内，严格遵循w3c 的 xhtml

4、1.0 Transtitonal 。并遵循以下原则：1. DDT 类型： XHTML 1.0 Transitional 2. 编码： utf-8 3. 元标记必须项： 该页面的关键词概况名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 4 页 - - - - - - - - - 该页面的简要描述 具体内容根据SEO 要求设置4. Html 代码中的所有标签遵循XHTML 1.0的书写规范，包括：a) 标签全部使用小写；b) 标签全部闭合；c) 所有属性必须有值而且用双引号；

5、d) 把所有 和&特殊符号用编码表示；e) 所有的标签必须合理嵌套；f) 注释中不要使用- 如这样写是错误的：；5. 标签有语意：a) 布局排版用 ；b) 标题用 ；c) 段落用 ；无序列表用 ，有序列表用；6. 放弃不被IE 支持的标签，如abbr；放弃不被w3c 推荐的html4 标签，如： 等等；7. title 的合理应用： 标签必须用title； 必须赋予alt 值； 可以用title说明；8. 根据网站的结构，对HTML进行模块化，比如：信息页面的头部尾部的通用文件，功能页面的头部尾部的通用文件，分页文件，可以模块化的信息列表模块。9. JS：页面中的JS处理成外部文件，不能在页面

6、中使用大量JS 脚本，同时注意js文件调用的位置，比如统计代码跟页面的加载没有任何关系，必须放在页面最底部；10. 尽量不要使用框架；11. 为表单添加 标签；12. 所有页面都需要定义背景颜色，系统默认值是可以被用户随意更改的13. 图片采用gif, jpg,png 压缩格式，以减小页面下载数据量， 标记要有width,height属性第三部分：表现（CSS）1. CSS 文件作为外部链接， 在页面的 区链接调用， 位置在元标记结束下一行，JS 调用的上一行。视情况可以在页面中书写内联样式 ，用于定义此页面特殊的样式和覆盖CSS 样式库中一定需要更改覆盖的样式，位置在外部链接样式表的下一行；

7、2. CSS 文件视重要程度添加注释，方法为/* 注释*/ ；3. CSS 选择器命名书写规范：#idname , .classname width: % 或 pxem; height: %或 pxem; margin: border: padding: -容器长宽确定background: #fff url() repeat left bottom fixed 1px 2px; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 4 页 - - - - - - - - -

8、color: FONT-SIZE: 9.5pt; 宋体” , Arial, Helvetica,sans-serif; font-size: line-height: -容器内容格式display: visibility: overflow: position: top: right: bottom: left: float: clear: -容器布局 每一个属性结尾都必须写分号，其中有的值如果不需要，可以不写，大体上是这样的顺序，也符合思考的顺序。4. 有几点注意事项：a) FONT-SIZE: 9.5pt; 必须以 sans-serif 字体做结尾；b) 减少样式数量，尽量重复使用；c)

9、必须清除float；d) 单位：使用像素（px） ；e) 颜色值：使用#RRGGBB 格式第四部分： UE 指导原则1. 网站 LOGO 的视觉统一，网站主体的视觉风格、文本颜色、 链接颜色、修饰图片风格以及按钮和表单控件的视觉进行统一；2. 为每一个页面设定一个最合适的标题 ，使用户和搜索引擎一目了然知道页面的主题；3. 为大部分页面加入元标记，即相关内容，描述页面属性；在最终页加入具有亲和力的版权说明、免责声明、交互设计说明文档的链接地址；4. 页面中必须有回到 “首页”的链接一般做法是将站点LOGO 加上首页的链接，最好还是有回到首页的文字链接；5. 如果网站栏目很多，要让用户知道所处的

10、页面属于哪个栏目之下，以及很轻松的可以回到上一级栏目标签是一种不错的方法；6. 现在位置。如果上一条原则处理的很好，“现在位置”可以去掉；7. 搜索。合理的放置搜索表单，最好在首屏，并且确保搜索结果的准确性；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 4 页 - - - - - - - - - 表单设计原则 : 1. 面向菜鸟和专业用户，填写项尽量精简，做简单的填写说明，仅放置与填写表单相关的链接，避免用户通过其他链接转移视线到别的地方，从而放弃填写表单2. 清晰的验

11、证告诉用户为什么出现错误，并引导正确的填写；3. 如果完成表单任务需要多个步骤，需要用图形或文字表明所需的步骤，以及当前正在进行的步骤使用户知道离成功还有多远；4. 如果可能， 尽量先放置input 、 textaera 等需要键盘输入的项，再放置下拉、 单选、复选等键盘操作的项，紧接着是“提交” 按钮就是说，减少键盘操作被鼠标操作打断的次数；5. 文本域允许更改内容的文本格式，比如加粗、字体大小、超链接、图片等等，而且，尽量让此内容与用户完成发布以后的内容格式相同；6. 提供将表单保存为草稿的功能；7. 设计符合习惯的表单。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 4 页 - - - - - - - - -