仓酷云

标题: 带来一篇CSS制造网页的类和ids的定名 [打印本页]

作者: 精灵巫婆 时间: 2015-1-16 00:04
标题: 带来一篇CSS制造网页的类和ids的定名
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。
Web开辟职员能够经由过程创立CSS类及id称号并利用这些称号来对divs和其他的格局页面元素举行标识。对开辟职员来讲，在定名从头界说XHTML标志（tags）的CSSselectors时，必需包管其与预界说的标志正确婚配，但就类和id选择器称号而言，则仁者见仁，智者见智。但是为所欲为的为这些类和id定名则并非个好的习气。
在浏览了由AndyClarke（ofStuffandNonsenseandAllThatMalarkey）和EricMeyer所撰写的关于CSS类和id定名标准的系列文章以后，我入手下手思索在本人的Web站点计划过程当中对类和ids的定名体例。
直不雅定名
当在计划Web页面和必要对一个div举行标识的时分，最天然的设法就是利用能够形貌元素地点页面地位的辞汇来对其定名。这类办法使得类和id的称号以下面所示：
top-panel
horizontal-nav
left-side
center-column
right-col
这些是CSS和XHTML类和id的无效定名体例。这些辞汇复杂而且可以令人望文生义，因而满意了标识页面元素和响应的CSS款式的必要。
但成绩是如许的称号同页面内容的特定表达体例相干联。这些定名参考了某种特定页面结构中的页面元素地位，因而在如许的结构以外利用就会显得分歧适乃至形成了解凌乱。同时，这些定名没有触及文档内容的布局。因而，上面给出了对CSS类和ID定名更好的办法。
布局化定名
布局化的标志意味着表达体例/地位信息同内容的完整分别——这个中包含呈现在标志（markup）中的类和id称号。
有标志的相干信息都是用来形貌文档的布局而不是表面。如许的特性使得我们能够经由过程复杂的改动CSS的体例来对分歧表面格局下的内容（content）和标志（markup）举行重用。当你了解这类体例时，很简单就能够发明接纳页面地位来为类和id定名的体例在处置如音频（audio）等表面格局上显得十分分歧适。因而，应该依据在文档中的利用目标而非呈现地位来对类和id举行布局化定名。
能够依照以下所示的布局化体例来对类和id称号定名：
branding
main-nav
subnav
main-content
sidebar
这些名字同直不雅定名体例一样十分易懂，但他们形貌了页面元素的感化而非地位。这使得代码加倍切合利用地道的布局化标志（structuralmarkup）的初志，即开辟职员能够在不改动标志的情形下对林林总总媒体下的显现格局举行处置。
即便你不盘算在其他的媒体上对Web页面举行格局修正，利用布局化定名体例还能够匡助你在往后的站点晋级或从头计划中更加轻松。比方，布局化定名制止了当一个div同idright-column挪动到页面右边后所带来的凌乱。对divsidebar的接纳如许的定名体例就显得加倍得当，由于不管它呈现在页面的哪一边，这个名字仍旧对开辟职员来讲直不雅易懂。
常规
AndyClarke剖析了40份由推许尺度化Web计划理念的开辟职员所计划的Web站点的源代码。只管类和id称号很不一致，可是仍是发明了一些频仍呈现的经常使用称号。这里给出了最经常使用类/id称号的示例列表：
header
content
nav
sidebar
footer
假如要检察完全的列表，能够看看最多见定名常规表
这些罕见的类和id称号是不是标记着一种尺度的出生或是广泛承受常规的构成呢？只管这是我所但愿的，但我其实不这么以为。我切实其实但愿可以瞥见一整套关于我们天天都能够看到的经常使用页面元素的定名尺度。同时，利用尺度化的定名体例可使得寻觅页面元素和对Web站点晋级带来便利，特别当必要在由分歧开辟职员在分歧工夫所开辟站点中换来换往事情的时分。

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站。

作者: 小女巫 时间: 2015-1-18 05:03
可以使用CSS检查工具进行设计。

作者: 灵魂腐蚀 时间: 2015-1-25 19:32
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 活着的死人 时间: 2015-2-3 19:58
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 再现理想 时间: 2015-2-9 06:29
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 飘飘悠悠 时间: 2015-2-27 04:20
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 海妖 时间: 2015-3-8 22:12
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

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

作者: 若相依 时间: 2015-3-23 04:40
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

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