Hvordan Design My Web Site Med CSS

Web-design har kommet langt de siste årene, og den gode gamle standby av tabeller er ikke lenger akseptert måte å layout et nettsted. Selv om utseendet er fortsatt ønskelig, er nettlesere oftere ikke lese tabeller - eller enda verre - de leser dem feil. Det er bedre å bruke Cascading Style Sheets (CSS).

Nesten hvilken som helst nettside kan tilpasses tre kolonne området, som er den vi legge ut i denne artikkelen. Deretter kan du legge til en navigeringslinje og andre elementer bare ved å definere dem og deres plassering på siden. Les videre for å lære å legge ut en tre-kolonne side i CSS.

Bruksanvisning

1 Åpne en teksteditor dokument og lagre det som mystyle.css.

2 Sett margin og padding av kroppen element med følgende kode. Fordi noen nettlesere ikke standard til null, må de være fysisk satt. Color må også være innstilt på samme grunnleggende årsaken til at ikke alle nettlesere som standard til hvitt. Det som følger er CSS-koden på begynnelsen av siden: html, body {margin: 0; padding: 0; bakgrunn: #fff}.

3 Deretter angir du størrelsen for brødteksten. Koden for dette eksempelet er: body {font: 76% arial, sans-serif}.

4 Den neste kommandoen setter punkt margin: p {margin: 0 10px 10px}.

5 Den neste kommandoen vil gi siden dets emballasje eller hoveddelen, innsiden av som du putter alle de andre delene av dine siden.Dette eksempel bruker følgende kode: div # container {width: 1024px; height: 1800px; margin: 0 auto }.

6 På venstre side av navigasjonsfeltet, legg en divisjon. Koden er som følger: div # navigasjon {float: left; width: 250px; height: 100%}.

7 Nå la oss definere innholdet delen av siden. Dette er den midterste delen av siden der du legger hovedinnholdet: div # innhold {float: left; width: 700 piksler; height: 1500px}.

8 For høyre kolonne, legger du kode som ligner på dette: div # ekstra {float: right; width: 250px; height: 1500px}.

9 Legge til topp- og bunntekst blir håndtert på samme måte. Bunnteksten koden for denne siden vil være div # footer {klar: all; width: 1020px; høyde: 300px}. Legg en header til siden som gjør det mulig for din logo. Koden for denne overskriften er: div # header h1 {height: 80px; line-height: 80px; margin: 0;
padding-left: 10px; bakgrunn: #EEE; color: # 79B30B}.

10 Innenfor CSS-filen bør du også definere dine header skrifter. De blir betegnet som h1 {color: # ff0000; height: 80px; line-height: 80px;}; h2 gjennom h6 kan også bli definert (denne koden definerer farge samt høyden på skriften).

11 Lagre dette dokumentet og referere til den i html dokumentet å trekke stilene inn i din webside.

Hint

• CSS vil gjøre endre ting som farger og skrifttyper på alle sider enkel og rask.
• Hvis du arbeider med en kjøpt mal, vil du har blitt innredet med et stilark som du kan endre.
• All kode ovenfor er eksempelkode. Endre koden til å passe dine unike nettsted dimensjoner. Det vil si, ting som farger, høyder og bredder vil være forskjellig basert på dine egne preferanser.
• Hvis du skal endre et stilark kontra å bygge fra bunnen av, ta en sikkerhetskopi av den opprinnelige før redigering.