Turvenn.no
Webutvikler kurs ASP.NET, C#, CSS mm.

WebRessurs.no - Webprogrammering og ressurs innen ASP, ASP.NET, PHP, SQL, HTML, CSS, Javascript, XML, C#, VB, Flash  mm.

Brukernavn: 
Passord:

Registrèr deg Glemt passord?
Logg deg inn




  ASP.net (199)
  ASP 3.0 (111)
  PHP (30)
  HTML (66)
  SQL (89)
  CSS (46)
  XML (7)
  JavaScript (78)
  Diverse kode (13)


  Programmering (22)
  System og drift (15)
  Trafikk og inntekt (11)
  Guider og tips (22)
  Nyttig lesestoff (23)
  Web forum (604)
  Link galleri (566)


  ASP.NET kurs(5)
  CSS kurs (2)
  JQuery kurs (2)


  Øk trafikken (8)
  Facebook App. (4)
  Microsoft CEO (6)


  Server & web
  Internett & epost
  Systemverktøy
  Sikkerhet
  Fildeling
  Lyd & media
  Diverse software


  Domenesalg
  Metagenerator
  Websikre farger
  Gratis epost
  WebMail


  Bli medlem!
  Siste innlegg
  Gjestebok
  Tips en venn
  Kontakt oss
  Forsiden




Kode Artikler
Linker


Mål internetthastigheten din.


Del 1: Lag en nettside i CSS 2.0 og XHTML uten bruk av tabeller


Av: Øyvind A. Isaksen

Dette er første del av WebRessurs.no sitt CSS kurs som viser hvordan man utvikler en komplett nettside uten bruk av tabeller! Nettsiden består av en topp, undermeny, venstre kolonne, innholdsdel og bunn. Vi bygger et solid rammeverk der både XHTML og CSS validerer hos w3.org. Nettsiden vises likt i IE6, IE7, IE8, Firefox, Opera og Safari (Mac). God fornøyelse!


Summary: Free training / tutorial, build a website in CSS 2.0 and XHTML without use of tables.



Grunnleggende struktur



Når man skal lage rammeverket til en nettside i CSS benytter man <DIV> tagger for å holde på innholdet. Man kan nesten sammenligne en DIV tagg med en boks. Hver boks er fyllt med innhold. På denne måten bygger man opp nettsiden som en side full av bokser. Den største boksen er den ytterste DIV taggen (grid), denne holder på hele nettsidens innhold. Innholdet i denne boksen er med andre ord toppen, undermeny, venstre kolonne, innhold og bunnen.


Kort oppsummert er nettsiden bygget opp på følgende måte:

<div id="grid">
    <div id="banner">Topp</div>
    <div id="bar">Meny</div>
    <div id="colWrapper">
        <div id="colA">Venstre</div>
        <div id="colB">Innhold</div>
    </div>
    <div id="footer">Bunn</div>
</div>


Opprette HTML side og legge inn innhold



Nå som vi har sett litt på hvordan strukturen på siden skal bygges opp er det på tide å begynne den morsomme jobben! Det første vi skal gjøre er å opprette en ny HTML fil (eller asp, asp.net, php eller det du møtte ønske).


Legg inn følgende kode i filen og lagre den som index.html:

Illustrasjonsbilde

Last ned hele koden som tekstfil her:
http://www.webressurs.no/kurs/css/del1/index.html.txt


Legg merke til at strukturen på DIV elementene er nøyaktig den somme som vist i innledningen. I tillegg er det også lagt inn litt kode i toppen av dokumentet som forteller nettleseren hva slags dokument type vi lager (DOCTYPE), hvordan innholdstype det er (Content-Type), hvordan karaktersett vi benytter (charset) og referanser til vårt stilsett (style.css). Det er meget viktig at dette blir korrekt for at nettsiden skal vises slik vi ønsker!


Opprette stilsettet for nettsiden vår (style.css)



Om du nå forsøker å åpne nettsiden din vil du se at den er langt fra det resultatet vi er ute etter. Grunnen er at vi ikke har laget stilsettet som forteller hvordan siden skal se ut. Her bestemmes alt fra fonter, farger, størrelser og plassering av elementer på siden.


Opprett en css fil med navnvet "style.css". Legg inn følgende kode i fila:

Illustrasjonsbilde

Last ned hele koden som tekstfil her:
http://www.webressurs.no/kurs/css/del1/style.css.txt


Pass på at CSS filen ligger på riktig plassering i forhold til referansen som er som er satt i toppen av nettsiden. I dette tilfellet skal style.css fila ligge på samme nivå som index.html fila!


Vi tester nettsiden



Lagre HTML filen og CSS filen om du ikke allerede har gjort det. Åpne så html filen i nettleseren din. Om du har gjort alt korrekt skal nettsiden nå se slik ut:

Illustrasjonsbilde


Oppsummering



Det første vi gjorde var å se på hvordan man ved hjelp av DIV tagger bygger opp strukturen på nettsiden vår. Deretter la vi inn nødvendig informasjon i toppen av vår HTML fil slik at innholdet på siden blir vist korrekt etter ønskede standarder og egne stilsett. Til slutt lagde vi stilsettet som forteller hvordan elementenen på siden skal vises for å oppnå ønsket resultat.



WebRessurs.no anbefaler:    StackOverflow.com | Experts-Exchange.com | W3schools | ASP.NET | Codeproject | 4Guys
WebRessurs.no er utviklet og drives av SoftMaker LTD
Sett som startside: [ ]. Bokmerk denne siden: [ klikk ]. Sitemap. http://twitter.com/webressurs_no/. Antall brukersesjoner: 9390917.
Copyright WebRessurs.no © 2003 - 2015