Taulukkoettomat ulkoasut Avaa uudet suunnittelualueen rajapinnat
On monia syitä olla käyttämättä taulukoita ulkoasulle . Yksi yleisimmistä syistä, joita ihmiset antavat jatkuvasti käyttää niitä, on vaikea tehdä asettelua CSS: n kanssa. Vaikka CSS-komentosarjat edellyttävät oppimiskäyrää, kun ymmärrät CSS-ulkoasun, saatat olla yllättynyt siitä, kuinka helppoa se voi olla. Ja kun olet oppinut, olet käsitellä toista yleistä syytä, jonka ihmiset antavat, kun et käytä CSS: tä. "Se on nopeampi kirjoittaa taulukoita." Se on nopeampaa, koska tiedät taulukoita, mutta kun opit CSS: n, saatat olla yhtä nopea tuon kanssa.
Selaimen tuki CSS-paikannusta varten
CSS-paikannus on hyvin tuettu kaikissa moderneissa selaimissa . Ellet luota sivustoa Netscape 4: lle tai Internet Explorer 4: lle, lukijoillasi ei pitäisi olla ongelmia sivuston CSS-verkkosivujen katselemisessa.
Uudelleenarviointi Miten voit rakentaa sivun
Kun rakennat sivuston taulukkojen avulla, sinun täytyy ajatella taulukkolomakkeessa . Toisin sanoen, olet ajatellut solujen, rivien ja sarakkeiden suhteen. Web-sivujesi heijastavat tätä lähestymistapaa. Kun siirryt CSS-paikannussuunnitteluun, aloitat sivusi sisällön kannalta ajattelemisen, koska sisältö voidaan sijoittaa mihin tahansa haluamallasi tavalla, vaikka se olisi kerrostettu toisen sisällön päälle.
Eri verkkosivustoilla on erilaisia rakenteita. Tehokkaan sivun luomiseksi arvioi minkä tahansa sivun rakenne ennen kuin annat sille sisältöä. Esimerkkisivu saattaa sisältää viisi erillistä osiota:
- Otsikko . Koti bannerimainokseen, sivuston nimi, navigointi linkit, artikkelin otsikko ja muutamia muita asioita.
- Oikea sarake . Tämä on sivun oikea puoli, jossa on hakukenttä, mainokset, videokentät ja ostosalueet.
- Sisältö . Artikkelin, blogikirjoituksen tai ostoskorin teksti - sivun lihaa ja perunaa.
- Inline-mainokset . Mainokset sisällytetään sisälle sisältöön.
- Alatunniste . Alin navigointi, tekijän tiedot, tekijänoikeustiedot, alempien bannerimainosten ja niihin liittyvien linkkien tiedot.
Sen sijaan, että asetat nämä viisi elementtiä taulukkoon, käytä HTML5-leikkauselementtejä sisällön eri osien määrittämiseen ja käytä sitten CSS-paikannusta sijoittamalla sisältöelementit sivulle.
Sisältöosastojen tunnistaminen
Kun olet määrittänyt sivustosi eri sisältöalueet, sinun on kirjoitettava ne HTML-muotoon. Vaikka voit yleensä sijoittaa osasi mihin tahansa järjestykseen, kannattaa ensin sijoittaa tärkeimmät sivusi osat. Tämä lähestymistapa auttaa myös hakukoneoptimoinnin avulla.
Paikantamisen osoittamiseksi kuvitelkaa sivua, jossa on kolme saraketta mutta ei otsikkoa tai alatunnistetta. Voit luoda paikannusta luodaksesi haluamasi asettelun.
Kolmen sarakkeen ulkoasu määritä kolme osaa: vasen sarake, oikea sarake ja sisältö.
Nämä osiot valitaan käyttämällä ARTICLE-elementtiä sisällölle ja kahdelle sarakkeen SECTION-elementille. Kaikilla on myös attribuutti, joka tunnistaa sen. Kun käytät id attribuuttia, sinun on annettava yksilöllinen nimi jokaiselle tunnukselle.
Sisällön sijoittaminen
Määritä CSS: n avulla tunnistetietojesi sijainti. Säilytä sijaintitietosi tyyliin, kuten tämä:
#content {
}
Näiden elementtien sisältö vie niin paljon tilaa kuin se voi, nimittäin 100 prosenttia nykyisen sijainnin tai sivun leveydestä. Jos haluat vaikuttaa leikkauksen sijaintiin pakottamatta sitä kiinteään leveyteen, muuta pehmusteita tai marginaaliominaisuuksia.
Aseta nämä kaksi saraketta kiinteälle leveydelle ja aseta niiden sijainti ehdottomaksi, jotta ne eivät vaikuta siihen, missä ne löytyvät HTML-muodossa.
# vasen sarake {
asema: absoluuttinen;
vasen: 0;
leveys: 150px;
marginaali-vasen: 10px;
margin-top: 20px;
väri: # 000000;
pehmuste: 3px;
}
# oikea sarake {
asema: absoluuttinen;
vasen: 80%;
top: 20px;
leveys: 140px;
pehmuste-vasen: 10px;
z-indeksi: 3;
väri: # 000000;
pehmuste: 3px;
}
Sitten sisältöalueelle määritä marginaalit oikealle ja vasemmalle siten, että sisältö ei ylikuormita kahta ulkopuolista saraketta.
#content {
alkuun: 0px;
marginaali: 0px 25% 0 165px;
pehmuste: 3px;
väri: # 000000;
}
Sivun määrittäminen HTML-taulukon sijaan CSS: ssä vaatii hieman teknisemmän taidon, mutta voitto johtuu joustavammista ja reagoivista malleista ja helpompi tehdä rakenteellisia muutoksia sivusi myöhemmin.