芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
6

模块化之 HTML CSS 以及图片

作者 芒果/分类 代码/发布于 2009-10-04 21:53

页面模块化的实施,这里指的是针对除去 JavaScript 部分的页面代码进行模块化实施。通过 HTML CSS 以及图片进行模块化。

页面模块化的实施思路是高度耦合的页面片段封装,模块布局作为公开接口,高度耦合的页面进行封装,使用独立的 CSS 文件,高度耦合的图片进行封装,给某类相关性强的图片建立文件夹。

页面模块化的目的是,实现多人协同开发页面,提高页面研发速度和降低维护难度。研发速度的提升体现在多人协同并行开发,维护难度体现在减少版本的混乱,根据模块区分版本降低版本间代码冲突和文件错误覆盖。

拆分页面模块,从小到大的分解

1. 拆分页面模块
一个页面有很多个小单元模块组成,他来自有原始需求文档,比如 logo,导航,内容 1,内容 2,内容 3,内容 4,尾部导航,版权信息等等。根据他们就可以拆分出基本的模块。

2. 拆分网站模块
将整个网站安排频道或者分类进行拆分,比如首页,内容页,文字列表页,图片列表页,频道 1 页面,频道 2 页面,分类 1 页面,分类 2 页面,后台管理页面,等等。

3. 每个网站作为一个模块。
比如商城站,支付站,论坛,三个站独立为三个大模块。

模块化实现

1. 高度耦合提取为一个模块,将模块代码作用域进行控制

代码一:非继承模块,通过后台选择符方式控制作用域

<div>
	<h3>title</h3>
	<div>
		con
	</div>
	<a>more</a>
</div>

.mode {}
.mode .title {}
.mode .con {}
.mode .more {}

<div>
	<ul>
	 <li><a href="" title="">关于</a></li>
	 <li><a href="" title="">合作</a></li>
	 <li><a href="" title="">招聘</a></li>
	</ul>
	<p>Copyright © 2009 某公司 版权所有</p>
</div>

.footer {}
.footer ul {}
.footer p {}

代码二:继承模块,提取众多模块中公共部分,具体模块通过优先级进行处理。继承模块方面整站某些模块的批量修改处理,也提高复用性降低代码重复。

.mode .title {}
.mode .con {}
.mode .more {}

<div>
	<h3>title</h3>
	<div>
		con
	</div>
	<a>more</a>
</div>

2. 页面模块

页面模块代码作用域的控制通过 CSS 文件来控制。某类具有高度耦合的页面使用自身的 CSS 文件。

3. 模块间的公开接口

上面是模块的封装,公开的接口在页面中表现为什么?

首先是 reset,base,可继承模块,这些代码是开放接口,必须根据这些代码进行页面代码开发,也就是你的页面代码必须在以上代码基础上开发。

其次是 CSS 文件,CSS 文件名称和他作用于那些页面。

再次是布局、模块 class,id 命名,模块在页面的哪个位置。在 CSS 中的表现就是定位,布局,和部分盒模型。float、position、width、height 等等。布局通常使用 CSS 作为接口实现,如果布局具有高度的逻辑性,完全可以通过 HTML 和 CSS 组合进行,比如 960 Grid System,或者采用 YUI grid.css。模块 class 和 id 的命名用于区分模块,不能在一个页面的所有 CSS 中出现不同模块同用一个 class 和 id 名。

规划整站模块

上文提到的基本的原理,真正实施起来还是存在很多问题,模块粒度问题,公共模块与普通模块的区分,继承模块是否值得继承等等,页面模块如何划分。

首先,了解你的项目,通过画网站树状图了解你网站的总体结构和页面模块;

其次,理清结构逻辑和视觉逻辑,结构逻辑就是看你的页面由那些模块组成,视觉逻辑了解可继承模块,布局逻辑(网格布局或者非网格布局)。

转载自 模块化之 HTML CSS IMG | GreenGnn.ORG

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/modularize-html-css-and-image/" title="模块化之 HTML CSS 以及图片" rel="bookmark">模块化之 HTML CSS 以及图片 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 6 条群众意见

  1. 万戈 /2009-10-05 07:56

    这个不错,我正缺少系统的学习呢。 回应

    #1
  2. 老饕 /2009-10-05 09:50

    留个言~~来看一看你。 回应

    #2
  3. 服装批发 /2009-10-05 10:35

    放假都在坚持更新咯。 回应

    #3
  4. bolo /2009-10-06 10:38

    不错啊,很简练。 回应

    #4
  5. 利为汇 /2011-01-13 21:25

    拜读了! 回应

    #5
  6. ?
    模块化之 HTML CSS 以及图片 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /2011-07-11 07:33

    […] 转载至:模块化之 HTML CSS 以及图片 | 芒果小站 分类: html, 其它 标签: 临时 CSS3 基本要素概览13+ 模拟 JavaScript 交互效果的纯 CSS 技术5 款优秀的 CSS 框架使用 CSS3 创建下拉菜单用 CSS3 实现未来的 Web使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟CSS 左右两栏自适应布局详解 CSS 的优先权基于 YUI 2.8 的层染色褪色效果打造自己的 Reset.css 评论 (0) Trackbacks (0) 发表评论 Trackback […] 回应

    #6

下面我简单说几句