Berjast Div-Itis og Class-Itis með 960 Grid System
Fyrir ári síðan voru HTML töflur staðalinn til að leggja fram vefsíður. CSS og merkingartækni hugsaði það, og í dag gerir CSS ramma hönnun nokkuð auðvelt.
En þeir geta einnig búið til óvart fjölda óþarfa þætti.
960 Grid System hvetur til þess að bæta við Að búa til hreinni kóða þýðir að fara út fyrir ramma og hugsa um það sem það raunverulega táknar. CSS rammar veita vinnuflæðislausn, þ.e. hraða dreifing netkerfisuppsetninga. Eitt af vinsælustu rammunum í dag er 960 Grid System ( 960.gs ), nefnd eftir sjálfgefið breidd. Með æfingu getur 960.gs verið frábært tól fyrir hvaða vefur hönnuður. En það endurskoðar einnig nokkrar gömlu vandamál. Áður en CSS sá útbreiddan notkun, báru töflur allar uppsetningar sem vefhönnuður þurfti. Flóknari hönnun hafði töflur hreiður innan borða, en notaðar umfram þau skapuðu flækja rusl á HTML. CSS-undirstaða skipulag tálbeita hönnuðir með loforð um minna HTML; Þeir höfðu einnig áfrýjað til merkingarfræðinga áhugamanna. Einfaldlega sett, CSS hvatti til notkunar HTML sem lýsti yfir því efni var um, ekki hvað það ætti að líta út. Eins og hönnuðir lært að nota CSS, skiptir div þættir út töflur. En divs geta verið-og oft eru-nested, eins og töflur. Hreinsa, halla kóða býður upp á marga kosti. Það er auðvelt að festa, fljótlegt að hlaða niður og veldur færri vandamálum yfir mismunandi gerðir vafra. Viðeigandi merki hjálparskjálesendur, leitarvélar og farsímar túlka merkingu auk útlits. Annað en merkingarfræði, mikill kostur að nota Gera CSS ramma eins og 960.gs endurskapa undirliggjandi vandamál með töflum? Ef markmið þeirra er duglegur HTML, geta hönnuðir og verktaki notað 960.gs án þess að dreifa "class-itis" (þ.e. óhófleg notkun á námskeiðum) og "div-itis" (þ.e. svo margir divs sem töflur byrja að líta vel út aftur)? Já, þeir geta. Til að skilja hvernig þurfum við að líta á ramma sjálft. 960.gs veitir safn dálka, skrifað í CSS, sem auðveldar útlagningu vefsíðna. Sækja skrárnar, bæta þeim við á vefsvæðið þitt og það er tilbúið til að fara. Engin sérstök viðbót eða nýr tækni er þörf, og þú getur notað það í tengslum við aðrar CSS skrár. Dálkar eru inni í blokkum sem kallast (náttúrulega) "ílát". Staðalarnir eru Skýringin hér að ofan sýnir tvær sjálfgefna gáma með 12 og 16 dálkum. Greyið verður ekki sýnilegt á lokasíðunni þinni, að sjálfsögðu. Dálkarnir sýna aðeins hvar blokkir, sem kallast "grids", geta komið fyrir. Rist er efnisþrep sem getur farið yfir fleiri en eina dálki í íláti. Grids fljóta vinstri í krafti þess að vera haldin í Fyrir ofan, Fyrir ofan, Breyta stærð netanna sem innihaldseiningin passar í er einföld: Breyta Opinber vefsíða 960.gs sýningarskápur vefsíður sem voru byggðar á ramma, og það veitir einnig síðu sniðmát, tengla á sérsniðna rist rafall og ramma sjálft. Ítarlegar leiðbeiningar eru líka með því að það er meira að læra. Grid margins og getu til að stíga inn í gutters milli grids gera kerfið enn sveigjanlegri. Þrátt fyrir þessa ávinning, embedding Rifja upp gegn borðum fyrir skipulag er auðvelt nóg. En með því að nota þrjú eða fleiri stig af hreinum divum leysir ekki vandamálið - það kemur bara í stað eitt sett af merkjum við annað. Rammar hjálpa en leysa ekki alltaf vandann. Með smá fyrirhugun er hægt að forðast mörg þessara vandamála. Einfaldasta lausnin á óhóflegri CSS kóða er að skera út hvað er ekki nauðsynlegt. 960.gs var hugsuð sem vírframleiðsla tól, ætlað að skipta út þegar vefsíðan fer fram. Það felur í sér meira en 180 bekkjardeildir. Ef hönnunin er byggð á, segðu, The Að vera einfalt CSS, Hér að neðan, að nota ristina á lista atriði skapar jafnvel dálka, með lágmarks breytingum á HTML. CSS snýr að ofangreindum lista í hóp með mörgum dálkum. Ef þú þarft venjulegan lista með punktapunkta skaltu bara henda Annað dæmi: First caption Another caption Þetta setur sjálfkrafa yfirskrift, sem fylgir með merkimiða, við hliðina á myndum. Þegar töflur eru ekki við hæfi er töfluáhrifin auðvelt að búa til með HTML-töflum sem ekki eru töflur. … … Dæmiið hér að ofan er áætlun um atburði þar sem hver "klefi" í töflunni hefur mismunandi merkingu til að endurspegla einstakt efni þess, frekar en að hafa grípa-allt Sækja um Div-itis og class-itis eru ekki takmörkuð við CSS ramma. Öll dæmi í síðasta hluta deila áhugaverðu eiginleiki: aðeins ein tegund yfirlýsing í hverjum. Hvar sem sama flokks eiginleiki er notaður nokkrum sinnum í röð í HTML, skiptu foreldri í stað barna. Óþarfa: Ofangreind eru öll sex þættir í flokki. Þeir eru óþarfi vegna þess að flokkarnir eru eins. Hér er betri leið: Leyfið hér fyrir kennslustund er að úthluta einum flokki til foreldrahlutans. CSS völundararnir gera starfið og beita þeim til hvers sem er … … … … … … Flestir málsgreinar hér að ofan eru bara einföld málsgreinar og hafa samt óþarfa flokka eiginleika. Við höfum einnig tvær fyrirsagnir, aðgreindar aðeins eftir flokkum þeirra, en samtengandi … … … … … … Nú eru aðeins tveir flokkar áfram. Við höfum haldið Almennt þurfa sömu þættir með sameiginlegum foreldri ekki auka eiginleika. Flokkur hjálpa aðeins þegar það er munur á þeim. Þumalputtaregla: Notaðu aðeins flokka þegar þú þarft að greina á milli annars sams konar efni. Tilgangur 960 Grid System, og CSS ramma almennt, er að draga úr viðleitni sem þarf til að leggja fram vefsíðum. Kosturinn við CSS er sú að það dregur úr fjölda HTML sem nauðsynlegt er til að birta síðu. En eins og sniðmát, CSS er ekki fullkomið . Rammar eru eingöngu verkfæri sem hjálpa fólki að ná árangri, ekki lausnirnar sjálfir. Það er komið að hönnuðum og verktaki til að berjast gegn kennslustundum og deilum. Skrifað eingöngu fyrir Webdesigner Depot by Ben Gremillion . Ben er sjálfstæður vefur hönnuður sem leysir samskiptavandamál með betri hönnun. Hvernig segir þú meira með minna? Deila hvernig þú hagræðir kóðanum og vinnufluginu þínu í ummælunum hér að neðan ... class eiginleikar, sérstaklega á flóknum síðum. Er þetta raunverulega batnað yfir hreiður töflur? Útbreiðsla Class-itis og Div-itis
… A Rundown af 960.gs
container_12 og container_16 , sem skiptast í 12 og 16 dálka, í sömu röð. Sérsniðnar stærðir eru í boði. 
.container_x , sem gerir þá tilvalið fyrir uppbyggingu mát. Breidd hverrar blokkar er ákvörðuð með hvaða rist þú notar til þess: grid_1 er einn dálkur breiður, grid_5 er fimm dálkar breiður osfrv. 
.container_12 hefur þrjár ristir. Hvert rist, aftur á móti, myndi halda mismunandi þætti innihald síðunnar. 
.container_16 Heldur tvær blokkir af 12 og 4 dálkum, í sömu röð. Eins .container_12 , þetta 16-dálkur-breiður skipulag mælir 960 dílar breiður en súlurnar hennar eru þrengri. grid_x í hverri deild. Lausnir
Notaðu aðeins bekkjum sem þú þarft raunverulega
.container_12 og notar aldrei meira en .grid_5 og .grid_7 , þá fjarlægðu aðra frá CSS. Notaðu class = "grid_x" við viðeigandi atriði: Fyrirsagnir, myndir, tenglar, málsgreinar
.container_x og .grid_x flokkar eru ekki bundin við div atriði. The flokki eigindi Hægt er að beita öllum þáttum nema html , head , meta , param , script , title og style -So, næstum allt í body . Ef par af div merkjum innihalda aðeins eitt atriði, þá geta þau verið óþarfa. Að beita grids kóða til non-Divs
Notkun divs Nota merkingartækni …
…
#"> ... ... ... #" class=grid_3> … #" class="grid_3">…
…
…
…
…
…
#" class="grid_3">…
…
…
…
#" class="grid_3">…
…
…
…
#" class="grid_3">…
…
…
…
Grant Grid Properties til ákveðinna þætti
.grid_x Hefur eiginleikar sem myndu vinna með einhverju öðru flokksheiti eða hvaða þáttur sem er. Með því að afrita eiginleika til ákveðinna þátta verða auka flokkar óþarfa. .examples li { (properties of .grid_4) }
class="examples" eigindi. Er þetta merkingartækni? Vissulega - svo lengi sem innihaldin skilar lista. The CSS breytir eingöngu hvernig hvert skotpunktur er kynntur. .photos p { (properties of .grid_10) }.photos img { (properties of .grid_6) }
.datelist { (properties of .container_12) }.datelist h3 { (properties of .grid_3) }.datelist p { (properties of .grid_7) }.datelist strong { (properties of .grid_1) }subhead
subhead
tag. (Tilvalið? Kannski ekki. HTML skilar ekki á milli hópa efnis.) .grid_x Eiginleikar annarra þátta þurfa að skipuleggja, en það veldur því að það er minna hreint HTML og truflar ekki 960.gs sjálft. Notaðu flokka í foreldrahlutum, ekki börnum
.item { (various properties) }.group-of-items li { (various properties) } inni í .group-of-items bekknum. Þessi aðferð er hægt að nota á hvaða hópi þætti með sameiginlegt foreldri. Til dæmis: …
…
.title { (various properties) }.subhead { (various properties) }.publication-date { (various properties) }.body-text { (various properties) } þættir gera ekki gott efni uppbyggingu. Hér er betri lausn: …
…
.article h1 { (various properties) }.article h2 { (various properties) }.article .publication-date { (various properties) }.article p { (various properties) }.publication-date flokki til að greina það frá eðlilegum málsgreinum fyrir neðan það. Vegna þess að HTML hefur ekki "dagsetningarmerki", þá er þessi flokkur nauðsynleg til að sýna hvað málsgreinin inniheldur. Nýji .article bekknum gerir þér kleift að stilla þessi div og þætti í henni í CSS með lágmarks mark-up. The CSS í báðum dæmum hefur fjórum skilgreiningum hvor og ennþá endar við með miklu hreinni kóða í seinni. Einfalda