Tableless Layouts Open New Design Frontiers
Daar is baie redes om nie tabelle vir uitleg te gebruik nie . Een van die mees algemene redes waarom mense gee om dit te gebruik, is omdat dit moeilik is om uitleg te maak met CSS. Alhoewel CSS-skripsie 'n leerkurwe behels, kan jy dalk verbaas wees oor hoe maklik dit kan wees as jy verstaan hoe om CSS-uitleg te doen. En sodra jy leer, het jy die tweede mees algemene rede waarom mense gee om nie CSS te gebruik nie, aangespreek. "Dit is vinniger om tafels te skryf." Dit is vinniger omdat jy tabelle ken, maar sodra jy CSS leer, kan jy net so vinnig wees. met daardie.
Browser Ondersteuning van CSS Posisionering
CSS-posisionering word goed ondersteun in alle moderne blaaiers . Tensy u 'n webwerf opstel vir Netscape 4 of Internet Explorer 4, behoort u lesers geen probleme met die lees van u CSS-geplaasde webblaaie te hê nie.
Heroorweeg hoe jy 'n bladsy bou
Wanneer jy 'n webwerf bou met behulp van tabelle, moet jy dink in 'n tabelformaat . Met ander woorde, jy dink aan selle en rye en kolomme. Jou webbladsye sal hierdie benadering weerspieël. As jy na 'n CSS-posisioneringsontwerp beweeg, sal jy begin om na jou bladsye te dink oor die inhoud, want die inhoud kan oral geplaas word wat jy in die uitleg wil hê - selfs laag bo-op ander inhoud.
Verskillende webwerwe het verskillende strukture. Om 'n effektiewe bladsy te bou, evalueer die struktuur van enige gegewe bladsy voordat u inhoud daaraan toewys. 'N Voorbeeldbladsy kan vyf afsonderlike afdelings insluit:
- Opskrif . Home na die banner advertensie, die webwerf naam, navigasie skakels, 'n artikel titel en ook 'n paar ander dinge.
- Regs kolom . Dit is die regterkant van die bladsy met die soekkassie, advertensies, video-bokse en winkelareas.
- Inhoud . Die teks van 'n artikel, blogpos of winkelwagentjie-die vleis-en-aartappels van die bladsy.
- Inline advertensies . Die advertensies inline binne die inhoud.
- Footer . Die onderste navigasie, outeur inligting, kopiereg inligting, laer banner advertensies, en verwante skakels.
Gebruik die HTML5-seksie-elemente om die verskillende gedeeltes van die inhoud te definieer, en gebruik dan CSS-posisionering om die inhoudselemente op die bladsy te plaas.
Identifiseer u inhoudsafdelings
Nadat u die verskillende inhoudsareas van u werf gedefinieer het, moet u dit in u HTML skryf. Terwyl jy gewoonlik jou afdelings in enige volgorde kan plaas, is dit 'n goeie idee om eers die belangrikste dele van jou bladsy te plaas. Hierdie benadering sal ook help met die optimalisering van soekenjins.
Om posisionering te demonstreer, voorsien 'n bladsy met drie kolomme, maar geen koptekst of voetskrif. U kan posisionering gebruik om enige tipe uitleg te skep.
Vir 'n drie kolom uitleg, definieer drie afdelings: linkerkolom, regter kolom en inhoud.
Hierdie gedeeltes sal geopenbaar word deur die ARTIKEL-element vir die inhoud en twee AFDELING-elemente vir die twee kolomme te gebruik. Alles sal ook 'n kenmerk hê om dit te identifiseer. Wanneer u die id-kenmerk gebruik, moet u 'n unieke naam vir elke ID toeskryf.
Posisionering van die inhoud
Gebruik CSS om die posisie vir jou ID'd-elemente te definieer. Stoor jou posinligting in 'n styloproep soos volg:
#content {
}
Inhoud binne hierdie elemente sal soveel spasie opneem as dit kan, naamlik 100 persent van die breedte van die huidige ligging of die bladsy. Om die ligging van 'n afdeling te beïnvloed sonder om dit tot 'n vaste wydte te dwing, verander die padding of die kantlyn eienskappe.
Vir hierdie uitleg, stel die twee kolomme vas aan vaste wydtes en stel dan hul posisie absolute, sodat hulle nie geraak sal word deur waar hulle in die HTML gevind word nie.
# linkerkolom {
posisie: absolute;
links: 0;
breedte: 150px;
marge-links: 10px;
marge-top: 20px;
kleur: # 000000;
vulling: 3px;
}
# regs kolom {
posisie: absolute;
links: 80%;
top: 20px;
breedte: 140px;
padding-links: 10px;
z-indeks: 3;
kleur: # 000000;
vulling: 3px;
}
Dan vir die inhoudsarea, stel die kantlyne regs en links sodat die inhoud nie die twee buitekolomme oorvleuel nie.
#content {
bo: 0px;
marge: 0px 25% 0 165px;
vulling: 3px;
kleur: # 000000;
}
Die definisie van u bladsy met behulp van CSS in plaas van 'n HTML-tabel vereis 'n bietjie meer tegniese vaardigheid, maar die uitbetaling volg op meer buigsame en responsiewe ontwerpe en meer gemak om later strukturele aanpassings aan u bladsy te maak.