无废话网页重构系列——(4)目录与文件搭建

静态资源分布:重构做好目录和页面文件的部署(1),及页面相关链接,文件名明了,目录层级不紊乱。便于其他部门同事后期肢解文件和项目部署。

demo    项目静态资源根目录
  -- css    样式目录
       -- assets  引用的外部资源,及最常用的模块
            -- reset.css  样式重置(要么不用,要么柔和用Normalize.css让样式在各浏览器下统一,要么暴力用YUI3的cssreset.css让样式重置归零)
            -- utility.css 
       -- page.base.css  页面基础样式
       -- font.utility.css  常用Web Fonts,
       -- page.***.css   具体网站某页面样式
  -- fonts  Web Fonts目录
       -- utility  常用Web Fonts文件,推荐iconfont
            -- iconfont.eot
            -- iconfont.svg
            -- iconfont.ttf
            -- iconfont.woff
  -- js  脚本目录
       -- lib  引用的外部资源,及最常用的模块
            -- jquery
                 -- jquery-1.7.2.js
                 -- jquery-1.11.3.js
                 -- jquery-2.1.4.js
            -- requirejs
                 -- domReady.js
                 -- require.js
                 -- require.min.js
       -- page.***.js  某页面脚本
       -- module.***.js  模块脚本
  -- images  项目图片
       -- sprite.png
       -- avatar.png
       -- placeholder-image-bg.png
  -- img  案例展示用图片
       -- 640390.jpg
  -- Templates  公用部分,采用Dreamweaver模板
       -- Template.dwt

-- index.html    首页
  -- archive.html  列表归档
  -- detail.html    详情页面
  -- 404.html 
  --  其它各种页面

注:

这里的目录和文件部署,并不是项目最后的发布部署。

时间: 2024-07-30 23:16:40

无废话网页重构系列——(4)目录与文件搭建的相关文章

无废话网页重构系列——(9)习惯:书写顺序

本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4662034.html 以书写顺序来结束<无废话网页重构>系列,是最好不过的了,因为,动手实践是发现.总结和收获的最好途径. 一.基本排版规范 小写.单行.多行选择器用逗号分行.每属性分号分割.单引号.缩进: 二.选择器内属性的顺序和组织 影响文档流的属性(display, position, float, clear, visibility, table-layout) 自身盒模型的属性(width,

无废话网页重构系列——(8)重构难点:语义和命名

本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4661936.html 网页重构,如果要说什么地方难,那就只有一个:语义和命名. 一.结构上的标签语义 1.不带语义的语义:div块级元素,span行内元素: 2.其它带语义的:p段落,blockquote引用,h1~6标题,有序列表ol li,无序列表ul li,定义列表dl dt dd,一系列格式化文本的strong.em.i.sub.sup… 3.html5里常用的几个:header.footer.

无废话网页重构系列——(7)布局(区块、栅格)、模块组件(module)

本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4654800.html 在构建HTML主干结构后,开始编写“页面布局”和“模块组件”: 页面框架由几个主干结构支撑和区分,框架下则是布局,布局是由多个区块组成,区块里面则是栅格列,格子列里是各模块组件,各模块可有边框.内外边距. 用于布局的层,尽量不要设置边框.内外边距. 一.布局 如图: 主要HTML和CSS代码如下: <div class="section"> <div c

无废话网页重构系列——(6)HTML主干结构:站点(site)、页面(page)

本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4653546.html 在分析和切出设计稿,以及部署项目目录文件后,开始写HTML Demo. 一.<head>里加各类<meta>元素,<link>引入样式.</body>前<script>引入脚本: 二.构建HTML主干结构: 1.网站站点(site),分页头页尾公用的部分: 2.网站子站(page)(频道).单页面专题,分页头页尾公用的部分.正文内容

无废话网页重构系列——(3)标注与切图

一.经过分析,切片,输出部分图片(1),另外一部分,如小图标,用Web Font 推荐用iconfont. 可以直接PS切片工具,个人推荐PS插件“Cut And Slice Me”(2). 网页,尽可能少的图片! 二.为了后期方便了解页面元素各个尺寸,强烈建议“标注”. 个人推荐PS插件“Assistor PS”. 注: (1):如果图片只是为了占位(Placeholder Image),推荐直接用图片尺寸大小命名,编辑同事后期好知晓:如 640*390 大小的图片,命名成:640390.jp

无废话网页重构系列——(5)基础样式、脚本和图片文件搭建

通过上一篇,目录结构已经出来了,现在需要把相关文件部署到相关目录. 一.框架,放在根目录的 assets 目录, 二.样式部分: 1.样式库,如purecss.Normalize.css等纯样式库,放置在 css  -  assets 目录(1): 2.功能辅助类样式,如“定位.浮动.内外边距”的utility.css,也放置在 css  -  assets 目录(2): 3.自己书写的页面样式.模块组件类样式放置在 css 目录. 三.脚本部分: 1.脚本库,如jQuery, Zepto.js

无废话WCF系列教程 -- 李林峰

李林峰的无废话WCF入门教程 无废话WCF入门教程一[什么是WCF] 无废话WCF入门教程二[WCF应用的通信过程] 无废话WCF入门教程三[WCF的宿主] 无废话WCF入门教程四[WCF的配置文件] 无废话WCF入门教程五[WCF的通信模式] 无废话WCF入门教程六[一个简单的Demo]

随笔分类 - 无废话ExtJs系列教程

摘自:http://www.cnblogs.com/iamlilinfeng/category/385121.html ExtJs 入门教程 摘要: extjs技术交流,欢迎加群(292467521):ExtJs 入门教程一[学习方法]ExtJs 入门教程二[Hello World]ExtJs 入门教程三[窗体:Window组件]ExtJs 入门教程四[表单:FormPanel]ExtJs 入门教程五[文本框:TextField]ExtJs 入门...阅读全文 posted @ 2012-12-

移动端重构系列6——图标

移动端重构系列-mobile 本系列文章,如果没有特别说明,兼容安卓4.0.4+ 这里我们把图标分为三种:背景图片,直接绘制,@font-face.如无特殊情况,图标的标签采用i标签 背景图片 首先我们会选择sprite形式,把所有的图标都放在一个大图中,然后考虑到retina屏,所以我们的图标应该设计为实际大小的2倍,然后设置background-size为实际大小.以下面的msg icon为例: 图中的每个icon大小为24px,实际应用时,我们是以12px来使用的: %icon-msg{