当前位置: 网站建设 > 网页设计 > 建站经验 >

重新认识网站制作过程中采用div+css的布局方式

时间:2013-03-02 04:16来源:未知 作者:admin 点击:

标签:重新认识网站制作过程中采用div+css的布局方式 过程中(7)DIV+CSS(51)网站制作(733)布局(72)重新认识(2)采用(3)方式(34)
1、代码精简是营销手段,不是宗旨 比拟于CSS1.0时代,今天CSS2.0可以完成更多的事件,然而需要永远是当先于技巧之上的,CSS无奈实现网页所有的表现层工作,有时候我们必须结合JS或者其余语言来到达这些后果。而在其他时候,用JS的方式比只靠CSS简略得多,并且代码结构更加良好最典范的例子就是下拉菜单。这些时候,我们要说服自己,或者说服老板与客户,去采用更简单更公道的方式。因为DOM同样是网站制作标准的主要组成,并不是使用了JS我们的网页就下降了效力或是不再标准,偏偏相反,这是对JS最大的曲解。说到这里
重新认识网站制作过程中采用div+css的布局方式》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302349452013.htm

1、“代码精简”是营销手段,不是宗旨

比拟于CSS1.0时代,今天CSS2.0可以完成更多的事件,然而需要永远是当先于技巧之上的,CSS无奈实现网页所有的表现层工作,有时候我们必须结合JS或者其余语言来到达这些后果。而在其他时候,用JS的方式比只靠CSS简略得多,并且代码结构更加良好——最典范的例子就是下拉菜单。这些时候,我们要说服自己,或者说服老板与客户,去采用更简单更公道的方式。因为DOM同样是网站制作标准的主要组成,并不是使用了JS我们的网页就下降了效力或是不再标准,偏偏相反,这是对JS最大的曲解。说到这里不得不再提一点,就是今天的时代,比以往更请求每个职业懂得更多的相干常识,做网站设计的人要懂一点网站交互和网站制作做网站制作的也必须了解网站设计和程序,尤其是JS这样的前端技术,只有这样,你和共事能力够更好地配合,你个人的发展远景也会更加光亮。

在看过很多网站之后,我发现一个问题,有的网站的主菜单是采用<div id="mainnav"><ul>这样的样式,而有的网站则用的是<ul id="mainnav">,那么主菜单到底是用<div id="mainnav"><ul>好呢?仍是<ul id="mainnav">比拟好一些呢?这是一个博弈的问题。至今这个问题也没有人能够给出一个明白的谜底,就连我也是如此。诚然,<div id="mainnav">在只包括了一个<ul>元素的时候,这个div就显得有些冗余,但有时候为了配合美工壮丽的设计,多一层标签就象征着多一层变化(有些人在a标签里套span也是如此)。而div不带有任何原始属性的先天优势也是其它任何标签所无法比较的。再有有<ul id="mainnav">这种写法,同样存在良好的结构和语义,并且省去了一层嵌套。在我们不需要为富丽的美工劳心费心的时候,是不是也可以让结构更加简约呢?

当然,所谓的“结构与表现分离”并不是完全不斟酌表现,想要统筹到表现,就要保障——在不损坏结构的前提下,CSS取舍器可以抉择到尽量多的内容。在哪些地方加class,或者用哪些标签来分辨,是一个见仁见智的处所,信任每一个网站制作职员都有自己的领会。而结合不同的设计稿,有时候也需要做出相应的变更,然而这些变化都应该有一个同样的前提—&mdash,重新认识网上赚钱的几个方法;不破坏代码的结构跟可读性。

当我们看到有嵌套6、7层的div布局,有成千盈百的表现css……现在关于div+css标准的书籍也是越来越多,除了极少数标有“高等技巧”的书籍之外,则很少有人不会在自己著述的前几章强调这样的一句话——&ldquo,重复收录页面的产生;结构与表现的分离”。然而我们来看一看这些书籍的读者们,又有几个人认当真真地读过前几章呢?更多的人则直接跳过那些乏味的结构讲授,一头扎到貌似精深的布局技巧与div+css中去呢?

2、ID是狙击枪,class 是双刃剑

没有CSS,指的是当我们的网站由于各种未知的原因导致CSS文件载入失败,不要因而而忙乱,这是考验我们代码品质的最佳机会。在没有CSS的时候,假如网页仍然坚持良好的可读性,这结果要远比通过W3C验证更值得我们骄傲。

 

--> [网站建设之]从新意识网站制作过程中采用div+css的布局方法

下面将结合我的亲身体谈判一谈适应标准的思维方式,其中有不少是我曾经走过的弯路,盼望对刚接触标准的XDJM们有些赞助:

一个习惯了table布局的网站制作接触标准的第一步,原来就是不应该是去盲目追求div+CSS进行网站制作技能,而是尽力转变自己的思维方式。

3、并不是所有的内容都需要div做“容器”

Tag:   重新   过程   网站制作   认识  ,部分中小站长被懒惰思想侵蚀的几点危害; 采用   方式   布局  

对于这一个观点,网络上许多网站制作高手也都是这样倡议的,也就是先打开编纂器,把结构完全地写出来,再去CSS里写表现,而尽量不去动已经写好的结构。

4、在网站制作工作中也应当做到“构造与表示分别”

其实采用div+CSS这种方式来进行网站制作方式从一开始就误导了很多人,急功近利的心态则更是造成这种现象的祸首罪魁。

想要做好网页结构,id与class 都是必须纯熟控制的,所谓“两手抓,两手都要硬”。ID就象狙击枪一样,可以辅助我们精准地定位要想要加载样式的元素;而class 则是侠客的佩剑,信手拈来更加轻巧灵活,两者的有效联合可能才干制作出结构良好页且表现丰盛的网页。然而当初有一种过错的观点,就是用class 完整来取代id,事实上很多网页源代码也确实如斯,打开来通篇css样式,找不到一个id。造成这种景象的起因是良多种多样的,然而自用table布局的时期传下来的积重难返的“CSS=class”的观点才是本因。的确,class 比id用处更广更机动,但同时我们也必需意识到,class 对构建良好的网页结构远不如id有效。id的强迫唯一性使得我们可以很轻易通过id检索到我们须要的任意模块,而class则不这个上风。固然我们可认为模块定义独一的class名,但这样的条件是--只有网站制作的作者自己才能够动网页样式。否则换一个略微勤一些伙计,看到款式雷同便直接把前面的class拿来套用,其成果就是咱们发明网页里有十多少个模块都叫做“gonggao”或者“xinwen”,甚至于为了辨别还不得不加上大批的html解释,这样的网站结构显然并不是我们想要的。再者就是前面提到的,通过通用class所精简下来的代码,又不得不在每个独自定义的class中浪费掉。

5、CSS不是万能的,没有CSS也不是万万不能的

随同着"div+css"在互联网的风行,“网站重构”的东风吹遍了华夏大地,一时光互联网上草木皆兵,“div+CSS”俨然已成为一种网站制造进程中采取一种布局的“时尚”,数一万计的网站都不谋而合地开端了本人的“网站重构”。然而翻开这些网站的源代码,看到哪些不拘一格源代码,却时常令人哑然发笑——

“应用div+css布局比table布局html代码精简很多”,我在很多网站和书籍上都见到过这样句话。这句话自身是没有毛病的,可以“代码精简”的确是网站制作化所带来的好处之一。然而切记,它只是“好处之一”,而不是“唯一利益&rdquo,避免常见的6种HTML5错误用法;,更不是主旨。“代码精简”更多的时候是我们用来压服那些固执不化的老板的营销手腕。网站制作尺度化的唯一宗旨是“结构与表现的分离”,而相对不是为了节俭代码而节省代码。我曾经也因为网站边框甚至主体内容的表现形式统一而采用了同一的class (至今还有一些书是这样教的),这样的确比分辨命名id更节省代码,然而这样做的代价是代码失去了良好的结构。失去良好html结构的成果是:一、html源代码没有了可读性;二、网站增长了未知的保护本钱。试想,当某一块内容因为需要而作出表现情势的变动,比方说要修改某一个地方链接的色彩等等,我们就不得不去修正页面源文件,增添额定的css样式,工作量比起只要要调剂id分组就大了很多。而且长此以往下去,结构将会变的越来越差,构成难以逆转的恶性轮回。

然而以看书为重要学习方式的人却很难有这样的体会,因为关于标准的书籍多半是手把手来教的,也就是必定是结构表现结合,循序渐进。虽然有些书籍有这方面的提议,但短短的几句话远不如读书过程中的耳濡目染。在网站制作人员能够对结构良好掌握的时候,同时写结构与表现也不会对结果有太大的影响。但以我个人的教训,结构表现分离的工作方式,要比同时写结构与表现效率高很多,同时也不容易漏掉页面上的元素。

再就是,必定要意识到,任何可视化的工具都是魔鬼。它们可视化界面下所浮现的效果,往往与实在阅读器相差千里,而我们真正要兼容的是浏览器,不是编辑器的可视化界面。

这个命题实在还可以引深为——“并不是所有内容都需要用块元素来做容器”、“并不是所有链接都需要用其它元素做容器”,例如很多页面都有的“更多”。有些人写做“<div class="more"><a>”,有人写做<p><a>或者<strong><a>。在这些“容器”只包含了一个<a>标签的时候,它们是否还有存在的必要?直接写成<a class="more">会破坏结构吗?会缺少语义吗?会影响布局吗?换一种思路,你兴许就会有不一样的播种。

还有一种情形就是,呈现在id的命名方面,也是我曾经犯过的错误。那时为了“代码的精简”,而把主菜单命名为“mm”,二级菜单命名为“m2”,三级菜单为“m3”,导致的结果则是重大降低了网页的可读性,使其他同事很难接手,图费事却累了自己。同理,文件及文件夹命名方面也不宜过简,像一本叫做《网站重构》的书籍里建议把所有图片都用“i”目录寄存,我本人以为这并不可取,通过评估工具确定网站价值,除非你能为这种高度缩写的目录结构撰写具体阐明并保证每个相关人员包含其他制作人员、开发、甚至懂行的老板……都能懂得和履行,否则那样做只会给你自己增加不用要的麻烦。


(责任编辑:网站建设)
重新认识网站制作过程中采用div+css的布局方式相关文章
上一篇:重新认识网上赚钱的几个方法 下一篇:针对不同版本的IE浏览器的条件CSS应用
回到顶部