Tableless Layouts Ireki New Design Frontiers
Diseinuaren taulak erabiltzeko arrazoi ugari daude. Jendeak erabiltzen jarraitzeko ematen dituen arrazoi ohikoenetako bat da diseinua CSS-rekin zaila delako. CSS scriptingek ikasteko kurba bat badute ere, CSS diseinua nola egiten duzun ulertzen duzunean, harrituko zaizu zein erraza den. Ikusten duzunean, bigarren arrazoirik arruntena zuzendu beharko zenioke CSS-ri ez erabiltzea "Taulak idazteko azkarrago da." Maila azkarragoak ezagutzen dituzu, baina CSS ikasten duzunean, azkarragoa izan liteke. horrekin.
Arakatzailearen CSS kokapenaren euskarria
CSS kokatzea ongi onartzen da arakatzaile moderno guztietan . Netscape 4 edo Internet Explorer 4 gunea eraikitzen ezean, irakurleek ez dute arazorik CSS kokatutako web orrialdeak ikusteko.
Orrialde bat nola eraiki berrikustea
Taulen bidez gune bat eraikitzen duzunean, formatu tabularretan pentsatu behar duzu. Bestela esanda, zelulak, errenkadak eta zutabeei dagokienez pentsatzen ari zara. Zure web orriak ikuspegi hau islatuko du. CSS kokapenaren diseinura mugitzerakoan, zure orrialdeak edukiari dagokionez pentsatzen hasiko zara, edukia edozein lekutatik diseinatu nahi duzun lekuan jarri ahal izango delako.
Webgune desberdinek egitura desberdinak dituzte. Orri eraginkorra eraikitzeko, emandako orrialde baten egitura ebaluatu ezazu edukia esleitu aurretik. Adibide orri batek bost atal desberdin sartu ditzake:
- Goiburua . Hasiera iragarkiaren bandera, webgunearen izena, nabigazio estekak, artikuluaren izenburua eta baita beste gauza batzuk ere.
- Eskuineko zutabea . Hau da orrialde eskuineko bilaketa-koadroa, iragarkiak, bideo-koadroak eta erosketak.
- Edukia . Artikulu baten, blogen postaren edo erosketa-orriaren testua, orriaren haragia eta patatak.
- Lineako iragarkiak . Edukiaren barruko iragarkiak.
- Orri-oina . Beheko nabigazioa, egilearen informazioa, copyright informazioa, beheko banner iragarkiak eta erlazionatutako estekak.
Mahai batean bost elementu horiek jarri beharrean, erabili HTML5 ataleko elementuak edukien zati desberdinak zehazteko, eta ondoren erabili CSS kokapenaren edukia orrialdeko elementuak kokatzeko.
Zure edukia atalak identifikatzea
Zure webguneko edukien esparruak definitu ondoren, zure HTMLan idatzi behar dituzu. Orokorrean zure atalak edozein ordenatan jar ditzakezun bitartean, ideia ona da zure orriaren zati garrantzitsuenak lehenbailehen kokatzeko. Ikuspegi horrek bilatzaileen optimizazioarekin lagunduko du.
Kokatzea erakusteko, hiru zutabeko orri bat ikusiko da, baina ez da goiburu edo orri-oina. Posizionamendua erabil dezakezu gustuko duzun edozein motatako diseinua sortzeko.
Hiru zutabeko diseinu baterako, hiru atal definitu: ezkerreko zutabea, eskuineko zutabea eta edukia.
Atal hauek instantziatu egingo dira edukien elementu ARTXIBOA erabiliz eta bi zatiketa HURTZEA bi zutabetan. Dena ere izango da atributua identifikatzeko. ID atributua erabiltzen duzunean, ID bakoitzaren izen bakarra esleitu behar duzu.
Edukia kokatzeko
CSS erabiliz, zehaztu zure IDdun elementuen posizioa. Kokatu zure kokapenari buruzko informazioa honela estilo-deian:
#content {
}
Elementu horien edukiak ahalik eta espazio handiena hartuko du, hau da, uneko kokapenaren edo orriaren zabaleraren% 100. Atal baten kokalekua zehazteko, zabalera finkora behartu gabe, aldatu betegarria edo marjinaren propietateak.
Diseinua honetarako, ezarri bi zutabeak zabalera finkora eta, ondoren, bere posizioa absolutua ezartzeko, beraz, HTMLan aurkitutako lekuan ez lukete eraginik izango.
# left-column {
posizioa: absolutua;
ezkerrera: 0;
zabalera: 150 px;
marjina-ezkerra: 10 px;
margin-top: 20 px;
kolorea: # 000000;
betegarria: 3px;
}
# eskuin-zutabean {
posizioa: absolutua;
ezkerretik:% 80;
top: 20px;
zabalera: 140 px;
padding-left: 10px;
z-indizea: 3;
kolorea: # 000000;
betegarria: 3px;
}
Ondoren, edukiaren eremuan, ezarri marjinak eskuinean eta ezkerrean, edukiak bi zutabe kanpo gainjartzen ez dituela.
#content {
top: 0px;
marjina: 0 px 25% 0 165 px;
betegarria: 3px;
kolorea: # 000000;
}
Zure orria CSS-rekin HTML orriaren ordez definitzen baduzu, pixka bat maila teknikoagoa behar da, baina ordainketa diseinu malguagoak eta sentikorrenak lortzen dira eta errazago egiturazko doikuntzak zure webgunera geroago burutzen dira.