Hvordan lage en Tableless webside ved hjelp av XHTML og CSS
Som webstandarder bevege seg fremover, og skaper tableless design er en viktig ferdighet for webdesignere som ønsker å utnytte internetts fulle potensial. Tableless design tillater separasjon av innhold og layout, åpner en helt ny verden av muligheter. Brukerne er gitt enorm kontroll over sin leseopplevelsen hvis de velger å bruke egendefinert stilark. Webutviklere kan enkelt endre innhold, og designere kan helt endre en layout fra ett og samme sted.
Bruksanvisning
1 Tegn et bilde av hvordan websiden må se. CSS benytter en tilnærming kalt boksen modellen, der elementene består av rektangulære bokser med egenskaper som marginer og padding. Tegn hvert element som en boks og beregne de riktige egenskapene. Du skal bruke div-elementet for å formatere mye av sideoppsettet. Gruppe data sammen på en logisk måte, og bemerker hvor hver div vil gå på siden. Tilordne et navn til hver seksjon og skrive det på den aktuelle delen av bildet.
2 Lag din nettside mal ved hjelp av XHTML. Sørg for å skrive riktig kode som passerer W3C validering test. Koden skal være ren og enkel. Legg en id-attributt til hver av divs, tildele dem navnene som samsvarer med de på bildet du tegnet. Dine divs kan være i hvilken som helst rekkefølge, men det kan være lurt å plassere dem i rekkefølgen av betydning for søkemotor optimalisering formål. Lag et stilark for å posisjonere dine elementer. Man kan håndtere posisjonering av en rekke måter. Den enkleste måten kalles absolutt posisjonering. Legg en "position: absolute;" uttalelse til hver velgerblokken. Angi nøyaktig plassering av hvert element, ved hjelp av utsagn som "top: 50 piksler;" eller "venstre: 10px ;." Her er et eksempel på hvordan å style en div bruker absolutt plassering:
leftcol {
position: absolute;
top: 50 piksler;
venstre: 10px;
}
En annen måte å posisjonere div-elementer er av flytende dem. En fløt div flytter til angitt side av beholderen. Her er et eksempel:
leftcol {
float: left;
}
rightcol {
float: right;
}
3 Test din layout å sørge for at det vises riktig i alle nettlesere. Finn en liste over populære nettlesere og teste nettstedet ditt på forskjellige oppløsninger i hver av dem. Per juni 2010, noen av de mest populære nettleserne er Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Firefox, Safari, Opera og Chrome. Endre CSS hvis du oppdager en visningsfeil i alle nettlesere. Noen ganger må du være kreativ med måten du skriver koden. Gjenta prosessen med testing og tweaking koden din før den vises riktig i alle nettleserne.