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 2: Profesjonell nettsidemal i 1024 bredde med annonseplasser


Av: Øyvind A. Isaksen

Her viser vi hvordan man setter opp en profesjonell nettsidemal tilpasset 1024 skjermoppløsning. Dette er kanskje det mest vanlige oppsettet av rammeverk i dag, der god plassutnyttelse og ryddighet er sentrale egenskaper. Nettsiden består av en topp med toppmeny, en sidemeny, et hovedfelt for innhold og en bunn. I tillegg er det gjort plass til standard toppbanner og sidebanner. Oppsettet er laget ved hjelp av xhtml og CSS, og det er selvfølgelig ikke benyttet noen tabeller i denne løsningen. Rammeverket vises likt i IE6, IE7, IE8, Firefox, Opera og Safari (Mac) og XHTML samt CSS validerer i W3C.



XHTML kode



Det ytterste DIV elementet med navnet "grid" holder på hele nettsiden. Inni dette elementet har vi "advA" og "advB" som holder på henholdsvis toppbanner og sidebanner. Deretter har vi et DIV element med navnet "frame" som er den mørke grå rammen rundt selve nettsiden. Innholdet i denne rammen er "rowA" og "rowB" som er henholdsvis topp og toppmenyen. Deretter har vi et DIV element "colWrapper" som inneholder "colA" og "colB". ColA er området for menyen til venstre mens colB er området som benyttes til hovedinnholdet på nettsiden. Til slutt har vi "footer" som er sidens bunn.


Opprett en ny HTML fil (eller asp, asp.net, php eller det du møtte ønske) og legg inn følgende kode:

Illustrasjonsbilde

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


CSS kode



Her er CSS koden som inneholder hele sidens bekrivelse og oppsett. Det er her vi bestemmer hvordan hvert enkelt element på siden skal oppføre seg, hvordan det skal se ut og hvor de skal plasseres.


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/del2/style.css.txt


Til slutt tester vi siden



Om du har gjort alt riktig vil nettsiden til slutt se slik ut:

Illustrasjonsbilde


Oppsummering


Vi har nå sett på hvordan man lager et komplett rammerverk i 1024 bredde. Eksempelet er bygget med samme struktur og oppsett som de fleste store nettsteder i dag baserer seg på. Om du ønsker mer forklaring rundt det å lage CSS baserte nettsider anbefales det å ta en titt på del 1 av vårt CSS kurs. Du kan fritt benytte koden i dette eksempelet, men vi setter pris på om linken til WebRessurs i malens bunn ikke blir fjernet.



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