Gå til innhold

Guide: Hvordan få en skisse til å bli ferdig HTML

AnaXyd

Av AnaXyd
i Programmering og webutvikling

Anbefalte innlegg

AnaXyd

AnaXyd

Skrevet
Skrevet (endret)

#Prolog:

Mange lurer sikkert på akkurat dette her, og jeg har sett at det er mange tråder som er blitt opprettet, hvor folk lurer på hvordan man får en designet side i f.eks Photoshop til å bli kodet i HTML.

 

Derfor tenkte jeg at jeg skulle ta meg bryet å mekke sammen en guide til akkurat dette her, og håper dette kommer til å hjelpe mange fremtidige webdesignere på vei!

 

Jeg har så og si akkurat startet med dette selv, og syntes det er kjempeartig å lage websider. Håper min kompetanse holder til å lage en slik guide!

 

...

 

 

 

#Innledning:

Først og fremst, vil jeg at du skal liste deg litt forsiktig inn i denne verdenen, ved å titte litt på kildekoder til diverse websider, og kanskje få litt inspirasjon til et design. Har du et design ferdig, og venter bare på å få dette ferdig som HTML, er det jo bare å utelukke inspirasjonsdelen.

 

Uansett, hvis jeg tar min nylagde side som eksempel, [TendoUB], så er det et standard oppsett som er midtstilt med banneren med logo o.l øverst, tett etterfulgt av menyen og deretter innholdet. Til slutt er det en såkalt footer med litt annen informasjon. I skrivende stund vil ikke jeg si at koden min er den beste som fins, dog motsatt. (Høyreklikk og velg "Vis kildekode") Men, den funker, og den validerer. Nok om den siden. La oss se på en annen.

 

Om vi ser på denne siden, [ClirUB] så er det et litt annerledes oppsett. Her er innholdet å finne i en rute på midten av siden, og den ligner ikke på min side i det heletatt. Koden er også mye ryddigere enn min.

 

Nok om dette, la oss bevege oss over på neste del...

 

 

#Designet

Da må vi over på Photoshop (eller hva du nå bruker). Du har nå enten et ferdig design du vil kode, eller skal lage ett nå. Jeg anbefaler ihvertfall å ha alt du lager i Photoshop, justerbart. Hvis dere ser på bildet under, er det et hav av mapper jeg har, og inne i de ligger alle de forskjellige layerne til de forskjellige elementene. Skal jeg justere på en enkel ting, kan jeg bare finne den fram, og justere. Aldri merg sammen hele siden til et flatt bilde! Da blir det vanskelig med tanke på justeringer i ettertid.

 

Illustrasjon:

post-91181-1196621419_thumb.jpg

 

 

#Litt koding

Okay, la oss ta i utgangspunkt at du nå har ett ferdig design, klart til å kodes. Begynn så og dra opp ditt favorittverktøy til HTML koding, enten om det er Dreamweaver eller notepad. For nybegynnere er Dreamweaver et knallbra verktøy, så lenge du ikke lar den ta for seg all kodinga i sida di, for det kan fort bli rotete, og mye feil.

 

Først, se på denne malen jeg har laget til dere:

 

Klikk for å se/fjerne innholdet nedenfor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Min Første Hjemmeside!</title>
<meta name="keywords" content="min første, hjemmeside, mamma, jeg er best"/>
<meta name="description" content="Dette er den første hjemmesiden jeg har kodet! Whoo!"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css"></style>
<!--
Min Første Hjemmeside - Opprettet Høsten '07
[email protected]
-->
</head>

 

Om dere tar og kopierer dette inn i Dreamweaver, så vil dere se det litt mer ryddig enn det er her på forumet. Det blir lagt til farger, og alt blir enklere å lese.

 

Uansett, dette er den såkalte head taggen. Her ligger all informasjon om selve siden, og dette forteller browseren hva den skal gjøre, og hvordan. (correct me if i'm wrong)

 

Det er gruelig enkelt å forstå, og du skjønner det bare du ser på det. Slik som disse er enkle å forstå:

<title>Min Første Hjemmeside!</title> <--- Tittel på siden. Vises i browser

<meta name="keywords" content="min første, hjemmeside, mamma, jeg er best"/> <--keywords som google går etter

<meta name="description" content="Dette er den første hjemmesiden jeg har kodet! Whoo!"/> <--Description som står i google når du søker på siden.

<link rel="stylesheet" type="text/css" href="style.css"/> <-- denne viser til en ekstern CSS fil

 

 

Så var det resten av koden:

Klikk for å se/fjerne innholdet nedenfor
<body>

<div id="wrapper"> <!-- Starting of content wrapper-->

<h1><span class="hidden"><a href="#">Tittel på siden</a></span><a href="http://www.minside.no"><img src="images/logo.gif" alt="logo" width="220" height="128" /></a></h1>

<div id="menu">
  <ul>
  <li id="forsiden"><a href="index.html"><span>Forsiden</span></a></li>
  <li id="produkter"><a href="produkter.html"><span>Produkter</span></a></li>
  <li id="galleri"><a href="galleri.html"><span>Galleri</span></a></li>
  <li id="omoss"><a href="omoss.html"><span>Om oss</span></a></li>
  <li id="kontaktoss"><a href="kontaktoss.html"><span>Kontakt oss</span></a></li>
  </ul>
</div>
<div id="innholdwrapper">
 <p>Tekst her</p>
</div>

<div id="footer">
 <div id="footertxt">
<p align="center">Design og kode av Ola Potitt |</p>
 </div>
</div>

</div> <!--Ending content wrapper -->
</body>
</html>

 

Nå sitter du kanskje igjen med en følelse av at du ikke skjønner så mye. Mye forskjellig dilldall vises her, men alt har en sammenheng. Og det er ganske lett å sette seg inn i også.

 

Jeg vil prøve å la deg forstå litt hva du nå begir deg inn på, og skal fortelle litt hva de forskjellige tingene gjør.

 

Vi begynner øverst:

<body> = Her skal alt innholdet liggenfor. Eks: <body><p>Tekst</p></body>

<div> = element som brukes til å bygge opp siden(via CSS). Man gir hver div en "id", slik at denne enkelt kan bli justert med CSS. Eks: <div id="wrapper"></div>

<h1> = Header skrift. Denne skal brukes i sammenheng med en header tekst. I min side er det litt annerledes, da denne blir brukt til banner og logo. (h2, h3 osv går også)

<ul> og <li> = Liste. Disse blir brukt i denne sammenheng som en meny. Blir definert i CSS.

<p> = Tekst. All tekst skal inn i slike!

 

Mer kan leses på: HTMLDog.com

 

PS! Husk å avslutte alle tagger også! Eks: </body>

 

 

 

#CSS

Da har jeg innført litt i HTML delen, og skal nå fortelle litt om CSS, og hva det kan gjøre.

HTML og CSS kobler man som regel sammen, slik at tagger o.l blir definert og gitt ulike attributter i CSS fila. Man kan såklart gjøre dette i HTML fila, og slippe CSS fila, men dette blir fort rotete og dårlig. Derfor anbefales det å bruke en ekstern CSS fil til dette.

 

CSS fila blir koblet sammen i HTML dokumentet via denne linja med kode:

<link rel="stylesheet" type="text/css" href="style.css"/>

 

 

>root

-- index.html

-- style.css

 

 

Okay, la meg vise deg ett eksempel på ett CSS dokument:

Klikk for å se/fjerne innholdet nedenfor
* {margin: 0; padding: 0; list-style-type: none; border: none; } /* Nullstiller nettleserforskjeller */

* .hidden { display: none; } /* Denne skjuler skrift i header (h1). Ikke endre html eller css siden det er bedre for søkemototer */

/* Styles */
.style1 {
font-family: Arial, Helvetica, sans-serif;
color: #919799;
font-size: 14px;
}

/*Headers, menus etc.*/
h1 { background: url(images/banner.png) no-repeat top left; width: 900px; height: 128px; }

body, html {
background: url(images/bg.gif) repeat;
}

div#wrapper {
margin: 0 auto;
width: 900px;
}

div#innhold { 
float: left; 
width: 900px; 
height: auto; 
background: url(images/bg_innhold.gif);
}

div#footer {
float: left;
width: 900px;
height: 53px;
background: url(images/footer.png);
}

div#footertxt {
padding: 14px;
}

 

Alt som står inne der, justerer og definerer ulike ting på taggene i HTML dokumentet CSS fila er koblet sammen med. Nå har jeg ikke tenkt å skrive særlig mye mer om CSS her, så jeg refererer bare til HTMLdog sin side. Mulig jeg skriver noer mer her etterhvert i en update.. :)

 

 

#Ok, jeg kan det grunnleggende. Hva nå?

Jeg regner nå med at du kan litt basic HTML, og CSS. Du skal nå ha gjort klart de to filene, og de venter bare på bildene fra Photoshop, som du nå snart skal lage. Hvis du ikke har det, har jeg kokt sammen du stykker for deg:

 

HTML

Klikk for å se/fjerne innholdet nedenfor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Min Første Hjemmeside!</title>
<meta name="keywords" content="min første, hjemmeside, mamma, jeg er best"/>
<meta name="description" content="Dette er den første hjemmesiden jeg har kodet! Whoo!"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css"></style>
<!--
Min Første Hjemmeside - Opprettet Høsten '07
[email protected]
-->
</head>

<body>

<div id="wrapper"> <!-- Starting of content wrapper-->

<h1><span class="hidden"><a href="#">Tittel på siden</a></span><a href="http://www.minside.no"><img src="images/logo.gif" alt="logo" width="220" height="128" /></a></h1>

<div id="menu">
  <ul>
  <li id="forsiden"><a href="index.html"><span>Forsiden</span></a></li>
  <li id="produkter"><a href="produkter.html"><span>Produkter</span></a></li>
  <li id="galleri"><a href="galleri.html"><span>Galleri</span></a></li>
  <li id="omoss"><a href="omoss.html"><span>Om oss</span></a></li>
  <li id="kontaktoss"><a href="kontaktoss.html"><span>Kontakt oss</span></a></li>
  </ul>
</div>
<div id="innholdwrapper">
 <p>Tekst her</p>
</div>

<div id="footer">
 <div id="footertxt">
<p align="center">Design og kode av Ola Potitt |</p>
 </div>
</div>

</div> <!--Ending content wrapper -->
</body>
</html>

 

CSS

Klikk for å se/fjerne innholdet nedenfor
* {margin: 0; padding: 0; list-style-type: none; border: none; } /* Nullstiller nettleserforskjeller */

* .hidden { display: none; } /* Denne skjuler skrift i header (h1). Ikke endre html eller css siden det er bedre for søkemototer */

/* Styles */
/* Footer Style */
.style1 {
font-family: Arial, Helvetica, sans-serif;
color: #919799;
font-size: 14px;
}

/*Headers, menus etc.*/
h1 { background: url(images/banner.png) no-repeat top left; width: 900px; height: 128px; }

body, html {
background: url(images/bg.gif) repeat;
}

div#wrapper {
margin: 0 auto;
width: 900px;
}

div#innhold { 
float: left; 
width: 900px; 
height: auto; 
background: url(images/bg_innhold.gif);
}

div#footer {
float: left;
width: 900px;
height: 53px;
background: url(images/footer.png);
}

div#footertxt {
padding: 14px;
}

 

Legg det inn, og se på html fila hvordan det ser ut. Deretter lagre de. Så vil du se at det er blitt satt opp, justert og midtstilt!

 

Nå har du ihvertfall en mal du kan jobbe utifra, og det er bare å justere på den via CSS'en. Så tar du opp Photoshop, og gjør deg klar.

 

Håper du nå er klart til å bevege deg over på klipping og liming og Photoshop..

 

 

...

 

 

 

#Photoshop, klipping, merking og liming

Lag et nytt dokument på 900x700px. Jeg bruker alltid 900px i bredden, og aldri mer enn det.

 

Lag en kjapp banner, footer og innholdsboks, slik at vi har noe å jobbe med. Jeg bruker mitt design som eksempel.

 

Først og fremst, gjør deg kjent med denne:

post-91181-1196630541_thumb.jpg

 

Det å definere bredden og høyden på marquee verktøyet, er utrolig kjekt nå som du skal klippe og drive i Photoshop!

 

Så, kan du begynne å markere innholdsbakgrunnen din.

 

Illustrasjon

post-91181-1196631043_thumb.jpg

 

Her merker jeg med 900px i bredde, og 10px i høyde på et tomt område. Husk at dette skal være bakgrunnen på innholdsdelen på siden din. Grunnen til at jeg markerer med 10px i høyde, er fordi det er struktur i i bakgrunnen min. Hvis jeg hadde markert med 1px i høyde, ville det ha sett rart ut, pga strukturen som ikke passer helt inn. Prøv selv!

Om du ikke har struktur selv, kan du bruke 1px i høyde.

 

Etter du har markert, trykker du Ctrl+Shift+C for å kopiere hele greia. Lag nytt og lim inn og deretter lagre.

 

Grunnen til at jeg prøver å lage innholdsbakgrunnen lavest mulig i høyden, er på grunn av raskere loadetid av sidene. Bildet blir mindre, og jeg gjør slik i koden at den setter bildet oppa hverandre. Da kan høyden på bakgrunnen bare bli strekt ut via en instilling i CSS fila, og det gjør hele greia mye enklere. Se selv hva som skjer når du putter den inn! :)

 

 

Illustrasjon

post-91181-1196631368_thumb.jpg

 

 

 

Så tar vi banneret på samme måte, bare definerer riktig høyde på markeringa. (Zoom inn for å være nøyaktig)

 

Illustrasjon

post-91181-1196631497_thumb.jpg

 

 

Så tar vi footeren på samme måte..

Illustrasjon

post-91181-1196631637_thumb.jpg

 

Så bare legger du bildene i en mappe kalt "images" og endrer filnavnene til det riktige i CSS fila.

Lagre alt, og prøv det i browseren din.

 

 

#Gratulerer!

Du skal nå ha en side som ligner noe av det jeg har laget. Husk at det finnes masse forskjellige typer sider, og ikke alle er bygd opp på samme måten som denne her. Men her har du ihvertfall noe å gå etter, og da er det lett og utvikle siden videre! :)

 

 

 

#Feedback?

Feedback må til vet dere. Dette er rett og slett førsteutkastet av denne guiden her, og jeg vil nok redigere en del på denne med tiden.

 

Hva syntes dere? Var den nyttig? Er det mye feil? Er det noe jeg bør føye til?

 

 

 

Håper ihvertfall at denne har en nytteverdi for noen! :)

Endret av AnaXyd
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Drømmemannen

Drømmemannen

Skrevet
Skrevet (endret)

Du har bomma litt på XHTML-headerne:

[b]<?xml version="1.0" encoding="utf-8"?>[/b]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" [b]xml:lang="no" lang="no"[/b]>
<head>
<meta http-equiv="Content-Type" content="[b]application/xhtml+xml[/b]; charset=utf-8" />

Se http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

Jeg ville også anbefalt å gå for strict i steden for transitional, men folk får vel velge selv.

 

Edit: Man må ikke angi språk, da.

Endret av balletryne
Lenke til kommentar
Vindstille

Vindstille

Skrevet
Skrevet (endret)
Du har bomma litt på XHTML-headerne:

[b]<?xml version="1.0" encoding="utf-8"?>[/b]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" [b]xml:lang="no" lang="no"[/b]>
<head>
<meta http-equiv="Content-Type" content="[b]application/xhtml+xml[/b]; charset=utf-8" />

Se http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

Jeg ville også anbefalt å gå for strict i steden for transitional, men folk får vel velge selv.

 

Edit: Man må ikke angi språk, da.

Det blir vel litt feil å bruke "application/xhtml+xml" her. Det hadde riktignok vært helt riktig hvis man hadde sendt html-dokumentet med content-type: "application/xhtml+xml" i http-headeren. Men ettersom ingen gjør det idag siden Internet Explorer ikke støtter å rendre xhtml som xml ("application/xhtml+xml") og derfor ikke kan vise "application/xhtml+xml" dokumenter, må man med mindre man gjør noe spesielt bruke "text/html" her.

 

Dette er viktig fordi hvis man laster ned eller lagrer dokumentet, eller på en annen måte mottar dokumentet http-headerne, siden nettleseren trenger å vite om dokumentet skal rendres som html eller xml. Og det er langt fra sikkert at alt vil funke hvis nettleseren begynner å tolke det som xml istedenfor html. F.eks. vil ting som .innerHTML ikke funke i xml-modus.

 

 

I tillegg ville jeg fjernet xml-deklarasjonen (<?xml ...) (med mindre man bruker "application/xhtml+xml") siden IE6 vil begynne å rendre html-dokumentet i Quircks-modus hvis den ikke ser doctypen med en gang øverst i dokumentet.

 

Språkkoden er forsåvidt også riktig. Men jeg ville heller brukt bk-no som er språkkoden til bokmål, hvis man vet siden skal skrives på bokmål. Dette er litt viktig siden høylesningprogrammer bruker denne koden til å finne ut om de skal lese teksten med nynorsk eller bokmål-dialekt, eller engelsk. I tillegg til at også søkemotorer som Google bruker det (sammen med hvilket toppdomene som er brukt, og IP-addressen til serveren) for å finne ut hvor relevant siden er for norske vs. svenske vs. engelske søkere.

 

 

 

Når det gjelder guiden. Veldig bra. Tror det kan være veldig nyttig for mange. Har lagt det til to-doen til oppslagsverktråden og skal se om jeg kan ta en liten oppdatering til helgen.

Endret av JonT
Lenke til kommentar
Drømmemannen

Drømmemannen

Skrevet
Skrevet (endret)
Du har bomma litt på XHTML-headerne:

[b]<?xml version="1.0" encoding="utf-8"?>[/b]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" [b]xml:lang="no" lang="no"[/b]>
<head>
<meta http-equiv="Content-Type" content="[b]application/xhtml+xml[/b]; charset=utf-8" />

Se http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

Jeg ville også anbefalt å gå for strict i steden for transitional, men folk får vel velge selv.

 

Edit: Man må ikke angi språk, da.

Det blir vel litt feil å bruke "application/xhtml+xml" her. Det hadde riktignok vært helt riktig hvis man hadde sendt html-dokumentet med content-type: "application/xhtml+xml" i http-headeren. Men ettersom ingen gjør det idag siden Internet Explorer ikke støtter å rendre xhtml som xml ("application/xhtml+xml") og derfor ikke kan vise "application/xhtml+xml" dokumenter, må man med mindre man gjør noe spesielt bruke "text/html" her.

Er klar over at man må sende riktig header fra serveren også, og de fleste servere sender text/html som standard. Men det er ikke noe poeng å bruke XHTML uten å sende korrekte headere, da kan man like godt bruke HTML (for de som er interessert er det W3C som har rotet det til her. Les gjerne: http://www.hixie.ch/advocacy/xhtml).

 

Dette er viktig fordi hvis man laster ned eller lagrer dokumentet, eller på en annen måte mottar dokumentet http-headerne, siden nettleseren trenger å vite om dokumentet skal rendres som html eller xml. Og det er langt fra sikkert at alt vil funke hvis nettleseren begynner å tolke det som xml istedenfor html. F.eks. vil ting som .innerHTML ikke funke i xml-modus.

Nå er innerHTML ustandard og bør unngås. Det er ikke noe problem å lage en korrekt XHTML-side som fungerer i "gode" nettlesere.

 

I tillegg ville jeg fjernet xml-deklarasjonen (<?xml ...) (med mindre man bruker "application/xhtml+xml") siden IE6 vil begynne å rendre html-dokumentet i Quircks-modus hvis den ikke ser doctypen med en gang øverst i dokumentet.

Helt korrekt. Altså bruker man ikke XHTML hvis IE6-brukere er på prioriteringslista.

 

Språkkoden er forsåvidt også riktig. Men jeg ville heller brukt bk-no som er språkkoden til bokmål, hvis man vet siden skal skrives på bokmål. Dette er litt viktig siden høylesningprogrammer bruker denne koden til å finne ut om de skal lese teksten med nynorsk eller bokmål-dialekt, eller engelsk. I tillegg til at også søkemotorer som Google bruker det (sammen med hvilket toppdomene som er brukt, og IP-addressen til serveren) for å finne ut hvor relevant siden er for norske vs. svenske vs. engelske søkere.

Såvidt meg bekjent er det nb-NO som er bokmål (nynorsk: nn-NO)

Endret av balletryne
Lenke til kommentar
Vindstille

Vindstille

Skrevet
Skrevet (endret)
Er klar over at man må sende riktig header fra serveren også, og de fleste servere sender text/html som standard. Men det er ikke noe poeng å bruke XHTML uten å sende korrekte headere, da kan man like godt bruke HTML (for de som er interessert er det W3C som har rotet det til her. Les gjerne: http://www.hixie.ch/advocacy/xhtml).

Helt enig. Hadde tenkt til å nevne det også. Men glemte det. Men uansett er det aller viktigste å bruke "text/html" og "application/xhtml+xml" riktig. Om man bruker xhtml med "text/html" eller html spiller jo egentlig ikke noen rolle. Selv om det å bruke HTML er langt enklere siden man slipper å kunne noe om problemet i det hele tatt eller noen av de andre problemene med xhtml.

 

Såvidt meg bekjent er det nb-NO som er bokmål (nynorsk: nn-NO)

Hehe.. Selvfølgelig, du har helt rett. Driter meg alltid ut på der :p

Endret av JonT
Lenke til kommentar
ThorB

ThorB

Skrevet
Skrevet
Nå er innerHTML ustandard og bør unngås. Det er ikke noe problem å lage en korrekt XHTML-side som fungerer i "gode" nettlesere.

 

men hvis man benytter HTML.4...

så går det vel greit?

det er vel etter standarden??

 

hvis man benytter xhtml...

hva bruker man i stedenfor innerhtml i javascript da?

Lenke til kommentar
Lokaltog

Lokaltog

Skrevet
Skrevet

Fin guide. Har bare to kommentarer foreløpig:

 

1) Kritisk til at du har valgt XHTML 1.0 Transitional som språk i guiden din (som er rettet mot de ferskeste av de ferske). Jeg tror nybegynnere kan synes det er bedre å bruke HTML 4.01 Transitional siden det er litt slappere krav til syntaks (mange nybegynnere liker f.eks. å ha store bokstaver i tags: <P ID="id"></P>). Ikke at det er greit at man skriver dårlig kode, men husk at alle må begynne et sted, og det ikke alltid er nødvendig å begynne på toppen. Jeg (og sikkert de fleste andre utviklerne her) har begynt med gammeldags HTML og dårlig koding, men har lært meg bedre teknikker etterhvert. Det er en del av læringsprosessen, og jeg er redd for at for strenge krav til å begynne med har lett for å ødelegge motivasjonen til ferske utviklere.

 

2) Croppingen av designet i Photoshop. Dette er langt enklere hvis du deler inn designet med guides, da kan du bruke Crop Tool og klippe direkte uten å måtte bruke Selection Tool med fixed size og navigere selectionen til å passe til elementene i designet.

 

Ellers en kurant guide, som sikkert kan være til hjelp til nybegynnere som vil lære seg å kode sine egne design.

Lenke til kommentar
Drømmemannen

Drømmemannen

Skrevet
Skrevet (endret)
Nå er innerHTML ustandard og bør unngås. Det er ikke noe problem å lage en korrekt XHTML-side som fungerer i "gode" nettlesere.

 

men hvis man benytter HTML.4...

så går det vel greit?

det er vel etter standarden??

 

hvis man benytter xhtml...

hva bruker man i stedenfor innerhtml i javascript da?

innerHTML er noe MS har funnet på, og er ikke med i noen standard. Alternativet er å bruke DOM-manipulasjon.

 

Utplukket lesning:

http://domscripting.com/blog/display/35

http://www.javascriptkata.com/2007/04/17/d...n-html-objects/

http://www.quirksmode.org/dom/innerhtml.html

Mer:

http://www.robertnyman.com/2006/04/20/we-all-love-innerhtml/

 

Ser ut som om man vil at innerHTML skal bli standard.

Endret av balletryne
Lenke til kommentar
AnaXyd

AnaXyd

Skrevet
  • Forfatter
Skrevet
:w00t: Knall guide. Jeg likte eksempelsiden din veldig godt, rolig og rydig design uten noe flash tull...Om jeg lurer på noe om dette så vet jeg hvem jeg skal spørre!

:thumbup:

Takk! Håper den kan være til hjelp.. :)

 

Fin guide. Har bare to kommentarer foreløpig:

 

1) Kritisk til at du har valgt XHTML 1.0 Transitional som språk i guiden din (som er rettet mot de ferskeste av de ferske). Jeg tror nybegynnere kan synes det er bedre å bruke HTML 4.01 Transitional siden det er litt slappere krav til syntaks (mange nybegynnere liker f.eks. å ha store bokstaver i tags: <P ID="id"></P>). Ikke at det er greit at man skriver dårlig kode, men husk at alle må begynne et sted, og det ikke alltid er nødvendig å begynne på toppen. Jeg (og sikkert de fleste andre utviklerne her) har begynt med gammeldags HTML og dårlig koding, men har lært meg bedre teknikker etterhvert. Det er en del av læringsprosessen, og jeg er redd for at for strenge krav til å begynne med har lett for å ødelegge motivasjonen til ferske utviklere.

 

2) Croppingen av designet i Photoshop. Dette er langt enklere hvis du deler inn designet med guides, da kan du bruke Crop Tool og klippe direkte uten å måtte bruke Selection Tool med fixed size og navigere selectionen til å passe til elementene i designet.

 

Ellers en kurant guide, som sikkert kan være til hjelp til nybegynnere som vil lære seg å kode sine egne design.

Takk! Skal gjøre om til Strict jeg.. :)

 

Croppingen er enklere ja, og jeg burde nesten gjøre det selv med min egen side. Takk!

Lenke til kommentar
ThorB

ThorB

Skrevet
Skrevet
Nå er innerHTML ustandard og bør unngås. Det er ikke noe problem å lage en korrekt XHTML-side som fungerer i "gode" nettlesere.

 

men hvis man benytter HTML.4...

så går det vel greit?

det er vel etter standarden??

 

hvis man benytter xhtml...

hva bruker man i stedenfor innerhtml i javascript da?

innerHTML er noe MS har funnet på, og er ikke med i noen standard. Alternativet er å bruke DOM-manipulasjon.

 

Utplukket lesning:

http://domscripting.com/blog/display/35

http://www.javascriptkata.com/2007/04/17/d...n-html-objects/

http://www.quirksmode.org/dom/innerhtml.html

ahh akkurat. hmm..

jeg ser enkle manipulasjoner av dom som f.eks legg til nytt element, slett element..

men det jeg er mest interessert i er bytt ut innhold til et element. (siden det er det jeg utelukket bruker innerhtml til)

er det noen som vet en crossbrowser metode for det?

Lenke til kommentar
AnaXyd

AnaXyd

Skrevet
  • Forfatter
Skrevet

Skal headeren se slik ut da?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="no">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...