Tableless Layouts Opnaðu nýja hönnunarmörk
Það eru margar ástæður fyrir því að nota ekki töflur fyrir skipulag . Eitt af algengustu ástæðum fólks til að halda áfram að nota þau er vegna þess að erfitt er að gera skipulag með CSS. Þó að CSS forskriftarþarfir feli í sér læra, þegar þú skilur hvernig á að gera CSS skipulag getur þú verið hissa á hversu auðvelt það getur verið. Og þegar þú lærir, þá hefur þú tekið á móti öðrum algengustu ástæðu fólks sem gefur ekki að nota CSS- "Það er hraðar að skrifa töflur." Það er hraðar vegna þess að þú þekkir töflur, en þegar þú lærir CSS, gætir þú verið eins fljótt með það.
Stuðningur við vafra CSS staðsetningar
CSS staðsetning er vel studd í öllum nútíma vafra . Nema þú ert að byggja upp vefsíðu fyrir Netscape 4 eða Internet Explorer 4, ætti lesendur þínir ekki að hafa neinar vandræðir með að skoða vefsíðurnar þínar á CSS.
Hugsaðu hvernig þú býrð til síðu
Þegar þú setur upp síðuna með því að nota töflur þarftu að hugsa í töfluformi . Með öðrum orðum, þú ert að hugsa hvað varðar frumur og línur og dálka. Vefsíður þínar munu endurspegla þessa nálgun. Þegar þú ferð í CSS staðsetningarhönnun byrjarðu að hugsa um síðurnar þínar hvað varðar efnið, því efnið er hægt að setja hvar sem þú vilt í útlitinu, jafnvel lagskipt ofan á öðru efni.
Mismunandi vefsíður hafa mismunandi mannvirki. Til að byggja upp árangursríka síðu skaltu meta uppbyggingu hvaða síðu sem er áður en þú tengir efni við það. Dæmi síðu gæti innihaldið fimm mismunandi kafla:
- Haus . Heim til borðarauglýsingarinnar, heiti vefsvæðisins, flakkavísir, greinartitill og nokkrar aðrar hluti.
- Hægri dálkur . Þetta er hægra megin á síðunni með leitarreitnum, auglýsingum, myndskeiðum og verslunum.
- Innihald . Textinn í grein, blogg eða innkaupakörfu - kjöt og kartöflur af síðunni.
- Inline auglýsingar . Auglýsingarnar eru innan innihaldsefnisins.
- Footer . Botnleiðsögnin, höfundarupplýsingarnar, upplýsingar um höfundarrétt, lægri borðarauglýsingar og tengdir tenglar.
Frekar en að setja þessi fimm þættir í töflu, notaðu HTML5 sneiðarþáttana til að skilgreina mismunandi hluta efnisins og notaðu síðan CSS staðsetningu til að setja innihaldsefnin á síðunni.
Þekkja efnisgreinar þínar
Eftir að þú hefur skilgreint mismunandi innihaldsefni vefsvæðisins þarftu að skrifa þau inn í HTML þinn. Þó að þú getur almennt settu köflum þínum í hvaða röð sem er, þá er það góð hugmynd að setja mikilvægustu hluta síðunnar fyrst. Þessi aðferð hjálpar einnig við hagræðingu leitarvélarinnar.
Til að sýna fram á staðsetningu skaltu sjá síðu með þremur dálkum en ekki haus eða fót. Þú getur notað staðsetning til að búa til hvers konar skipulag sem þú vilt.
Í þriggja dálka skipulagi skaltu skilgreina þrjá hluta: vinstri dálki, hægri dálk og efni.
Þessar köflum verða settar fram með því að nota hlutinn Element fyrir innihaldið og tvær þættir þættanna í tveimur dálkunum. Allt mun einnig hafa eiginleika sem skilgreinir það. Þegar þú notar persónuskilríki verður þú að skrifa einstakt heiti fyrir hvert auðkenni.
Staðsetja efni
Notaðu CSS, skilgreina stöðu fyrir ID'd þætti. Geymdu stöðuupplýsingar þínar í stílsímtali svona:
#content {
}
Innihald innan þessara þátta mun taka upp eins mikið pláss og það getur, þ.e. 100 prósent af breidd núverandi staðsetningu eða síðu. Til að hafa áhrif á staðsetningu hluta án þess að þvinga það í fasta breidd skaltu breyta padding eða margmiðlunareiginleikum.
Í þessum skipulagi skaltu setja tvær dálkar í fasta breidd og síðan setja stöðu sína algerlega, svo að þær hafi ekki áhrif á hvar þær finnast í HTML.
# vinstri dálki {
staða: alger;
vinstri: 0;
breidd: 150px;
framlegð-vinstri: 10px;
framlegð-toppur: 20px;
litur: # 000000;
padding: 3px;
}
# hægri dálk {
staða: alger;
vinstri: 80%;
toppur: 20px;
breidd: 140px;
padding-left: 10px;
z-vísitala: 3;
litur: # 000000;
padding: 3px;
}
Þá fyrir innihaldsefnið skaltu stilla múrinn til hægri og vinstri svo að innihaldið myndi ekki skarast utan um dálkana utan.
#content {
efst: 0px;
Framlegð: 0px 25% 0 165px;
padding: 3px;
litur: # 000000;
}
Skilgreina blaðsíðuna þína með því að nota CSS í stað HTML-töflu krefst svolítið tæknilegra kunnáttu en afborgunin fylgir sveigjanlegri og móttækilegri hönnun og meiri vellíðan þegar þú gerir breytingar á síðunni síðar.