活着的死人 发表于 2015-1-16 00:23:38

带来一篇CSS:超出网格的结构

业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站。
CSS:超出网格的结构――接待会见天极软件CSS教程专区
原文MollyE.Holzschlag
原文出自:ThinkingOutsidetheGrid
中文翻译:54player.com-nobita(2006-06-01)
“Aerials,inthesky,whenyoulosesmallmindyoufreeyourlife”-SystemofaDown(1)

十一月的一个深夜,从空中俯瞰我的故乡,亚利桑那州的图森市,它那松散的网格结构给我留下了深入的映像。图森是美国浩瀚计划过乡村之一,从空中看,很简单发明图森的乡村计划师把这类准确的结构乐成的使用到了计划中()。

我是从伦敦回到图森,比拟之下,伦敦完整没有遵守网格结构。它的计划中有螺旋状的,有圆形的,有梯形的,而且仿佛更像是天然发生的()

这篇文章我构想了很长工夫,由于经由过程俯瞰乡村的结构,让我遐想到了web计划中的网格。用现有的手艺和技能,我们能够随行所欲的制造出基于网格的计划,大概,我们也能够完整冲破这类网格。后者无疑将会加强我们的web计划:而摆在我们眼前的应战就是怎样挣脱局促的头脑,超出网格结构。
偏向感和乡村

假如我们把乡村计划延长到web计划中往,会有很多非常风趣的轨迹。基于网格的结构分外合用于那些有引诱性,易于导航,实在的视觉表达的网站。网格能很好的匡助计划师来安排,扫瞄者也易于会见()。
:RyanBrill
从有益的一面来看,网格状的图森固然更简单密切一些;你仅仅必要基础的偏向感和街道舆图。住民们依据这类网格来告知他人本人家所处的地位:“我在坎贝尔年夜街和王子路的西北角。”路途和交通都是从北至南或从西到东,如许,乡村就更简单导航。
另外一方面,图森的计划是在乡村无限开展的条件之下的,一旦乡村的开展超越了这类条件,在坚持它的导航性和可用性上就会呈现有数的成绩。别的,图森的网格给社区和邻里带来的优胜性也并未凸现。了局很多图森的住民都感到到乡村短少举动中央和共同的社区。而且当这类支解切实其实存在时,人们很简单找到他们的目标地,但也一样简单在某一个中央丢失失落。
伦敦与图森相往甚远,它像一个迷宫。我发明很多伦敦人都随身照顾一本伦敦旅游指南来避免本人迷路!乡村的交通体系就更具应战性,最具体现性的算是出租车司机,他们必需经由过程一种测试来证实他们具有驾驶这类传统玄色出租车的“才能”。乡村的无机开展并没有加强它的可导航性。
但在伦敦,那些让人惊讶的包抄和充斥兴趣的地区分别出现在乡村的各个中央。能够说它不止有一两个文明中央或社区中央,而是很多个。下降了导航性,但增添了选择性,而且人们会有更高的念头来介入到乡村开展中往。
当考查这些非布局化、天然的计划时,人们怎样才干在这些弯曲,迂回的路途上找到偏向呢?另外一方面,在web计划和开辟中能够冲破这类安分守己的头脑。但至今,还是有所保存的。在中,我们看到了一种完整废除传统网格监禁的结构体例,在坚持易用性的同时计划师接纳了一种习气以外的结构。
:AIGALosAngeles
奇奥的誊写体例

关于一个以代码为中央而非计划才能的人来讲,代码和计划严密的分离在一同,更能让我痴迷。我深信,这类长工夫监禁在网格中的计划头脑是表格结构所留下的后遗症()。再加上渐渐入手下手的对CSS结构的了解,我们很简单发明这类结构习气发生的缘故原由。
:k10k
表格结构仿佛为网格计划而生,这类标志自己就能够繁衍出准确的网格,留给我们剩下的事情仅仅是用图片、笔墨和其他界面元素添补这些格子来完成我们的计划()。假如我们必要制造一个非机构化或天然的,带有庞大视觉体现的计划,就必要用到大批的图片和标志,会形成文档的痴肥和标志的庞大化。
:Weightshift
基于表格的网格结构有它的一些长处,可是,好比乡村的计划,上风也会酿成缺点。基于表格的网格结构能包管单位格中的元素都依照我们假想的那样往分列。让一切列都坚持一样的巨细?我们乃至不必往思索这个成绩,这是表格生成的属性。让单位格之间发生一些空缺?一样也不必要我们往思索。固然,假如我们不想要这类巨细分歧的格子呢?却只能失掉一个使人疾苦的谜底:不可。
CSS改动了这统统,这就是为何我们一向在收拾web计划履历的缘故原由。在利用了多年的表格以后,我们渐渐入手下手对CSS结构发生了共同的看法――关于那些团圆的,语义化的元从来说,CSS的视觉模子更简单冲破网格结构。自作掩饰,并不是云云,CSS给我们带来好处,一样也给我们带来了困难。像表格那样能够伸缩的列就是个中一个,另有每一个单位之间的空缺。
CSS视觉模子是由盒模子和线条构成。网格也是由它们构成,是吗?固然,假如你那样往做的话,谜底是一定的。这是最基础的差别。CSS同意我们为所欲为的利用一个盒子和多个盒子,而自力于它的核心()。

我们可使用position属性或间接浮动一个盒子,而且我们能够到场所占空间小一些的图片来做为背景。经由过程一些技能,我们可让这些盒子出现出分歧的视觉效果。个中包含网格,但一样也能高效的制造出非网格化的计划来,你能够在DaveShea的BloodLust中看到,一个为CSSZenGarden制造的计划()。
:CSSZenGarden:BloodLust
显现了构成BloodLust那种非布局化网格计划所用到的盒子,又一次向我们展现了一种用CSS的盒子来制造非布局化网格的计划,这些盒子联系关系在一同,又互相之间坚持必定自力性。

只需我们晓得我们能对或用一个盒子来做甚么,我们就能够用这类才能来冲破久长以来的网格的监禁。来看上面的这个计划(0),就是完整非布局化的,乃至是一种完整天然的体现。
0:KutztownUniversity:CommunicationDesignDepartment
和根据CSS来定位的盒子结构:
1
不单单能削减标志的利用量,一样分明的让计划师更纯熟的使用CSS来结构。但是屏幕上看到的就变的丰厚多彩,也显现了非网格化计划的可用性和惹人的地方。
无穷宽广的空间

我们如今选择这类美妙,极具应战的古代结构体例。依据CSS,我们能够制造出易于办理、玲珑、多样化的计划,乃至是传统的网格结构。但我们一样能够排除网格机构,大概完整丢弃它。
这就为如今的web计划师们睁开一个宽广的天下。但剩下的应战是进一步思索,而不是由于它们的类似性而发展到已往的那种计划形式中往。
在我们跳出基于表格结构头脑的这些年里,这个应战是极为严格的。很多资深的web计划师,改动了我们的思索体例,改动了我们久长以来一向利用的那种计划形式。对一部分人来讲,这是很简单,但关于年夜多半人来讲,却很难超出。部分谜底在于教会本人往了解和把握CSS与扫瞄器的体现体例。但另有一部分谜底就是自动的丢弃常规。
街区里有一个刚出身的孩子,她的名字叫做“我从未在事情中利用过表格。”关于她来讲,那种老办法都显得生疏和局促。也就是在她这一代,我们极可能会看到更多在已往十年里从未呈现的新奇的计划。
web正在走向成熟,我们的勉力在渐渐的改动它,我们立异的时机比以往任什么时候候都加倍分明。不单单限定于乡村计划,我们一样能制造出共同的计划,并让它们一般的事情。作为一种动力,不管是履历丰厚的内行,仍是年老人都将遭到如许的启发,一个极具鼓动力的看法,那就是我们的互联网在一日千里变更着。而且我信任,你会以为这长短常好的一件事。


Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。

第二个灵魂 发表于 2015-1-18 06:34:40

使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

海妖 发表于 2015-1-23 16:48:59

所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.

再现理想 发表于 2015-1-31 19:11:15

学Dreamweaver技术的过程其实是一个增加信心的过程。

兰色精灵 发表于 2015-2-7 00:00:15

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

小女巫 发表于 2015-2-19 07:19:57

布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。

分手快乐 发表于 2015-3-6 14:12:01

使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

不帅 发表于 2015-3-13 03:08:31

俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。

愤怒的大鸟 发表于 2015-3-13 03:08:31

可以使用 CSS 检查工具进行设计。

若天明 发表于 2015-3-13 03:08:33

俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。

蒙在股里 发表于 2015-3-13 03:08:34

技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。

飘飘悠悠 发表于 2015-3-13 03:08:34

还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。

透明 发表于 2015-3-20 11:01:18

经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
页: [1]
查看完整版本: 带来一篇CSS:超出网格的结构