仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 766|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来看看:Div+CSS网页制造误区

[复制链接]
乐观 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:16:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
  “重构”的东风吹遍年夜江南北,互联网一工夫土崩瓦解,“div+CSS”仿佛已成为一种“时髦”,难以尽数的网站都不谋而合地入手下手了本人的“重构”。但是翻开这五花八门网站的源代码,却经常使人情不自禁――
  我们看到有嵌套6、7层的div结构,有不必table的表格,有纯div+a组成的页面,有成百上千的体现层class……如今关于尺度的书本愈来愈多,除多数几本标榜“初级技能”的书本之外,很少有人不会在本人著作的前几章夸大如许一句话――“布局与体现分别”。但是这些书本的读者们,又有几人认仔细真地读过前几章呢?仍是更多地间接跳过那些有趣的布局解说,一头扎到貌似深邃的结构技能与Hack中往?

  实在div+CSS这个说法从一入手下手就误导了太多的人,深谋远虑的心态则更是形成这类征象的祸首罪魁。一个习气了table结构的网页制造打仗尺度的第一步,不该该是往自觉追求完成各类结构的CSS技能,而是勉力改动本人的头脑体例。

  上面将分离我的亲身体味谈一谈适应尺度的头脑体例,个中有很多是我已经走过的弯路,但愿对方才打仗尺度的XDJM们有些匡助:

  1、“节俭代码”是营销手腕,不是主旨
  “利用div结构能够比table结构节俭更多的代码”,我在良多书本和网站上见到过这句话。这句话自己是没错的,能够“节俭代码”切实其实是网页尺度化所带来的优点之一。但是牢记,它只是“优点之一”,而不是“独一优点”,更不是主旨。“节俭代码”更多的时分是我们用来讲服那些至死不悟的老板的营销手腕。网页尺度化的独一主旨是“布局与体现分别”,而毫不是为了节俭代码而节俭代码。我已经由于网站边栏乃至主体内容的体现情势不异而接纳了一致的class(至今另有一些书是如许教的),如许切实其实比分离定名id更节俭代码,但是如许做的价值是代码得到了优秀的布局。得到优秀布局的成果是:1、源代码没有了可读性;2、网站增添了未知的保护本钱。试想,当某一块内容由于必要而作出体现情势的变化,比方链接的色彩等等,我们就不能不往修正页面源文件,增添分外的class,事情量比起只必要调剂id分组就年夜了很多。并且久而久之,布局将会愈来愈差,构成难以逆转的恶性轮回。

  另有一种情形,呈现在id的定名方面,也是自己已经犯过的毛病。当时为了“节俭代码”,而把主菜单定名为“mm”,二级菜单定名为“m2”,三级菜单为“m3”,了局严峻下降了网页的可读性,使其他同事很难接办,图费事却累了本人。同理,文件及文件夹定名方面也不宜过简,象《网站重构》里倡议把图片都用“i”目次寄存,团体觉得其实不可取,除非你能为这类高度缩写的目次布局撰写具体申明并包管每一个相干职员包含其他制造职员、开辟、乃至懂行的老板……都能了解和实行,不然只会给你本人增加不用要的贫苦。

  2、ID是偷袭枪,class是双刃剑
  想要做好网页布局,id与class都是必需纯熟把握的,所谓“两手抓,两手都要硬”。ID就象偷袭枪一样,能够匡助我们精准地定位要想要加载款式的元素;而class则是侠客的佩剑,信手拈来加倍轻巧灵活,二者的分离可以完成布局优秀且体现丰厚的页面。但是如今有一种毛病的概念,就是id完整能够用class来代替,现实上很多网页源代码也切实其实云云,翻开来通篇class,找不到一个id。形成这类征象的来由有良多种,但是自table时期传上去的根深蒂固的“class=CSS”的看法才是本因。切实其实,class比id用处更广更天真,但也必需意想到,class关于构建优秀的网页布局远不如id无效。id的强迫独一性使得我们能够很简单经由过程id检索到我们必要的恣意模块,而class则没有这个上风。固然我们能够为模块界说独一的class名,但条件是――只要制造者自己能够动网页款式。不然换一个略微懒一些伴计,看到款式不异便间接把后面的class拿来套用,其了局就是我们发明网页里有十几个模块都叫做“gonggao”大概“xinwen”,以致于为了辨别还不能不加上大批的html正文,如许的了局明显并非我们想要的。再者就是后面提到的,经由过程通用class所节俭上去的代码,又不能不在每一个独自界说的class中浪费失落。
  ID是偷袭枪,class是双刃剑,合则两利,分则两败。
  3、并非一切的内容都必要div做“容器”

  主菜单事实是用<divid="mainnav"><ul>仍是<ulid="mainnav">?这是一个博弈的成绩。至今这个成绩也没有人可以给出明白的谜底,就连我也是云云。固然,<divid="mainnav">在只包括了一个<ul>元素的时分,这个div就显得有些冗余,但偶然候为了共同美工壮丽的计划,多一层标签就意味着多一层变更(有些人在a标签里套span也是云云)。而div不带任何原始属性的后天上风也是别的标签所没法对比的。这个命题我只是想申明一件事,就是我们应当意想到,<divid="mainnav"><ul>以外,另有<ulid="mainnav">这类写法,一样具有优秀的布局和语义,而且省往了一层嵌套。在我们不必要为华美的美工劳心费心的时分,是否是也能够让布局加倍繁复呢?

  这个命题实在还能够引伸为――“并非一切内容都必要块元素做容器”、“并非一切链接都必要别的元素做容器”,比方良多页面都有的“更多”。有些人写做“<divclass="more"><a>”,也有人写做<p><a>大概<strong><a>。在这些“容器”只包括了一个<a>标签的时分,它们是不是另有存在的需要?间接写成<aclass="more">会损坏布局吗?会缺少语义吗?会影响结构吗?换一种思绪,你大概就会有纷歧样的劳绩。

  4、事情上也做到“布局与体现分别”

  关于这一点,收集上良多妙手都是如许倡议的,也就是先翻开编纂器,把布局完全地写出来,再往CSS里写体现,而只管不往动已写好的布局。

  但是以看书为次要进修体例的人却很难体味,由于关于尺度的书本多数是手把手来教的,也就是一定是布局体现分离,循规蹈矩。固然有些书本有这方面的倡议,但短短的几句话远不如念书过程当中的耳濡目染。在制造职员可以对布局优秀掌控的时分,同时写布局与体现也不会对了局有太年夜的影响。但以我的履历,布局体现分别的事情体例,要比同时写布局与体现效力高良多,同时也不简单漏掉页面上的元素。

  固然,所谓的“布局与体现分别”并非完整不思索体现,想要分身到体现,就要包管――在不损坏布局的条件下,CSS选择器可以选择到只管多的内容。在哪些中央加class,大概用哪些标签来辨别,是一个见仁见智的中央,信任每一个人都有本人的体味。而分离分歧的计划稿,偶然候也必要做出响应的变更,但是这些变更都应当有一个一样的条件――不损坏代码的布局和可读性。

  再就是,必定要意想到,任何可视化的工具都是妖怪。它们可视化界面下所出现的效果,常常与实在扫瞄器相差千里,而我们真正要兼容的是扫瞄器,不是编纂器的可视化界面。

  5、CSS不是全能的,没有CSS也不是切切不克不及的

  比拟于CSS1.0时期,明天CSS能够完成更多的事变,但是需求永久是抢先于手艺的,CSS没法完成网页一切的体现层事情,偶然候我们必需分离JS大概其他言语来完成一些效果。而另外一些时分,用JS的办法比只靠CSS复杂很多,而且代码布局加倍优秀――最典范的例子就是下拉菜单。这些时分,我们要压服本人,大概压服老板与客户,往接纳更复杂更公道的体例。由于DOM一样是网页尺度的主要构成,并非利用了JS我们的网页就下降了效力或是不再尺度,恰好相反,这是对JS最年夜的曲解。说到这里不能不提一点,就是明天的时期,比以往更请求每一个职业懂得更多的相干常识,做计划的人要懂一点交互和制造,做制造的也必需懂得计划和程序,特别是JS如许的前端手艺,只要如许,你和同事才干够更好地互助,团体的开展远景也会加倍光亮。

  没有CSS,指的是当我们的网站由于各类未知的缘故原由招致CSS文件载进失利,不要因而而忙乱,这是磨练我们代码质量的最好机会。在没有CSS的时分,假如网页仍然坚持优秀的可读性,这功效要远比经由过程W3C考证更值得我们自大。

你可以轻松地控制页面的布局。
活着的死人 该用户已被删除
沙发
发表于 2015-1-18 05:52:38 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
小女巫 该用户已被删除
板凳
发表于 2015-1-24 15:22:59 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
地板
发表于 2015-2-1 22:24:29 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
因胸联盟 该用户已被删除
5#
发表于 2015-2-7 17:36:58 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
谁可相欹 该用户已被删除
6#
发表于 2015-2-22 22:01:12 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
乐观 该用户已被删除
7#
 楼主| 发表于 2015-3-7 04:59:12 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
再现理想 该用户已被删除
8#
发表于 2015-3-14 13:36:27 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
透明 该用户已被删除
9#
发表于 2015-3-21 09:55:01 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-21 04:16

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表