仓酷云

标题: DIV教程之款式定名之“逻辑块定名法” [打印本页]

作者: 海妖 时间: 2015-1-16 10:37
标题: DIV教程之款式定名之“逻辑块定名法”
可以用display:inline的方法让两个子div并排,但是这样的话div的宽度设置将会失效（要把子div撑大只能考里面的元素）。

当我们按照布局与内容分别的头脑往切出一个切合尺度的网页时，每一个人大概都有本人的款式定名习气。

但这类分歧的习气一方面一定体系，即常常随便性对照强，简单重名形成贫苦，办理也很不便利，乃至偶然候会为起个名字而忧愁（呵呵，夸张了点^0^）；另外一方面，用在一个团队中，也会因为凌乱性，而带来团队效力的下降。

再者，今朝的款式定名基础上都用“英文”，少少有人用中文（往返切换输出法也很贫苦的）。假如有些人习气于全套英文式定名的话，会对团队里英文欠安者形成必定的贫苦。由于他们要为起名往查字典，并且他们查到的单词还纷歧定能够正确描述被定名的块逻辑布局。好比已经有人倡议利用面包屑（crumb）来作为导航定名——故事来自两个迷路的孩子沿着撒下的面包屑找回家的英文小说典故。可是，这作为本性还行，用在团队中却毫不可取。认知分歧，他人说不定也有本人的典故。

别的，另有几个隐讳的地方：好比，不要呈现暗示偏向的定名，比方“left、right、top、bottom”等等。由于一旦假如我们必要右边放右侧，那末这些定名将完整得到感化，反而成了搅浑我们认知的渣滓。

上面我提出一种定名体系假想（逻辑块定名法）供人人参考：

<divid="a1">　
　<divid="a1a">　
<divid="a1a1">　
　<divid="a1a1a">　
<ulid="a1a1a1">　
　<liclass="li01"><a>邮箱列表１</a></li>　
　<liclass="li02">邮箱列表１</li>　
</ul>
　</div>
</div>
<divid="a1a2">　
　<divid="a1a2a">　
<ulid="a1a2a1">　
　<li><a>邮箱列表１</a></li>
　<li><a>邮箱列表１</a></li>
</ul>
　</div>
</div>　
　</div>
</div>　

注：

（１）类款式的把持：“#相邻外层id名.(标署名)(序列数字){}”。好比“#a1a1a1.li01{}”。
（２）超链接的把持：“#相邻外层id名[类名]a{}”，类名可选。好比“#a1a1a1.li01a{}”。

注释：

１、最外层嵌套：a(x)。

申明：意义是地区x。括号内是数字，从“1”入手下手。

２、第二层嵌套：a(x)(a)。　

申明：第二个括号内是单个字母，从“a”入手下手。

３、第三层嵌套：a(x)(a)(x)。　

４、第四层嵌套：a(x)(a)(x)(a)。

申明：四层DIV逻辑块嵌套已充足庞大，可对付尽年夜部分网站（包含流派型）的必要了。固然，如需要，可持续增添“(x)”和“(a)”。

５、“页头、页脚、导航”：导航算在页头里，页头利用“head(x)”。页脚利用“foot(x)”。

６、首页款式独自列出，不利用外置的款式表，间接加到首页“head”区。由于首页会见量一般对照年夜，为制止款式加载失利呈现裸页，及首页的款式常常与其他页分歧，故独自处置。定名划定规矩是“a(x)”（地区x）开首。

别的，全站页面类似的博客类网站能够看作没有首页，即把首页作为频道页之一。

７、其他页的款式挪用内部款式文件。

款式表公用部分：页头、页脚及通用界说独自提出来作为base.css加载。base.css的加载按次为一切款式的第一名。

其他页再各自链接各自的款式表，好比“c(x).css”（频道页，款式定名划定规矩：c(x)开首），“cc(x).css”（频道内容页，款式定名划定规矩：cc(x)开首），像新浪之类年夜网站的频道，由于各自分歧，就必要利用“c(x).css”。

注：款式表的文件名中的“x”只指频道x，款式定名中的“x”则只指“地区x”。

８、关于款式反复使用的划定规矩。

首页因独自处置故扫除，只思索频道页“c(x).css”、频道更多页“m(x).css”、内容页“cc(x).css”等有大批逻辑块反复时的情形（大批反复的情形也不思索），此时全体款式总字节数很小，能够思索兼并为一个款式表文件。

选择个中一个频道作为基础页，倡议利用第一个频道。款式表的文件名是“c.css”，款式定名划定规矩是“c(x)”。注：这里的“x”不是指“频道x”，而是指“频道页地区x”。

（１）频道页部分款式产生改动：在对应的款式定名上加后缀“_c(x)”，x指“频道x”。

（２）更多页部分款式产生改动：在对应的款式定名上加后缀“_m(x)”，x指“频道x更多”。

（３）内容页部分款式产生改动：在对应的款式定名上加后缀“_cc(x)”，x指“频道x内容”。

注：页头、页脚划定规矩一样。另，改款式定名的时分必要把其内层逻辑块款式定名同时改动——加一样后缀。并且假如部分款式变动后，比公用的多出几个逻辑块，则也必要在定名后加一样的辨认后缀。

９、表单款式。定名划定规矩：id名=name值。能够独自处置成“form.css”，但为削减不用要的http毗连数，及其数目一般很少，故倡议放到base.css里。多个表单时加后缀“_form(x)”。

１０、加足“id”与“class”，不克不及呈现逻辑块漏掉及腾跃，并请求每个有大概在将来必要它在需要的时分产生一些变更的页面标签都能够被款式间接把持到，好比某个li标签下的的第三个span标签。

１１、假如以为内部款式表文件名利用数字不爽，大概常常改动栏目数目，则能够修正“c(x).css”划定规矩为“c_news.css”之类的。不外页面款式定名详细划定规矩稳定，仍利用“c(x)”（频道页地区x），只在加后缀时适应新划定规矩“_c_(channel)”。

１２、假设网站完成后需求变化，好比增添或删除旧事栏目：删除时款式定名稳定；增添的时分，照逻辑块嵌套按次写款式名，再在后边加上修正工夫后缀“_070908”，以躲避重名。

１３、实在这类定名法还可在某些情形下简化背景程序的计划，但请当心利用，不然大概会形成后患。另外一年夜优点：也将会使得一切的页面代码被一致化，不管啥站，都一个样，基本不必从头顺应。^0^

这个定名法命名“逻辑块定名法”，合适建站量较年夜或懒得想英文者。其基本创建在按逻辑块切图的头脑上，逻辑块切图流程见拙作“写一个稍有语义的易换肤的尺度化网页”一文。

整站例子：www.dizyh.cn。接待人人提定见。

顺带多说两句别的：假如不思索页面在分歧分辩率下的居中，代码将会简化并高效很多。好比摆布两个逻辑块，假如思索居中，我们必要在其外层加个年夜逻辑块把摆布两个逻辑块圈起来。若不思索居中，则间接一个扫除右浮动就弄定了，还优化了显现速率。

注重，我们不克不及把body的宽度设置为800px并居中来简化逻辑嵌套条理。由于调剂扫瞄器窗口巨细时，最外层被绝对定位的内容块将会不随之绝对改动地位，必需得从头革新才行。
增加了开发风险，一个css文件的出错，可能导致整站崩溃，惨不忍睹，大量的访问链接同时调用静态的css文件，可能造成并发错误，调用失败。

作者: 金色的骷髅 时间: 2015-1-18 07:27
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 飘飘悠悠 时间: 2015-1-26 16:36
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 因胸联盟 时间: 2015-2-4 20:45
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: admin 时间: 2015-2-10 10:08
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 若天明 时间: 2015-3-1 10:14
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 再见西城 时间: 2015-3-10 17:28
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 简单生活 时间: 2015-3-17 09:34
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 小魔女 时间: 2015-3-24 06:27
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

欢迎光临仓酷云 (http://ckuyun.com/)