Webdesign – illustreret håndbog:

Kildekode til bogens eksempler

Denne side omfatter referencer til et antal websider, hvori jeg gengiver kildekoden til bogens eksempler.

I en del tilfælde er eksemplerne 100 procent identiske med de tilsvarende eksempler i 1. udgave. I disse tilfælde vælger jeg for det meste at nævne dette samt henvise til den webside, der er lavet i forbindelse med udgivelsen af første udgave.

Eksempel 1-3: De nødvendige markører
Eksemplet er vist som figur 1-2 på side 8 i bogen. Kildekodeeksemplet i bogen er desværre faldet ud under den afsluttende redigering.
Eksempel 1-4: HTML-formatering af tekst
Eksemplet er vist som figur 1-3 på side 11 i bogen.
Eksempel 1-5: Blockquote og cite-markørerne
Eksemplet er ikke vist som figur i bogen.
Figur 4-4: Brug af frames og rules
Eksemplet vedrører brug af frames og rules til tabelformatering og er kun vist som figur i bogen, og ikke som eksempelkode.
Figur 5-11: Kontaktformular med validering
Der henvises til eksempelsiden vedrørende den samme formular i 1. udgave af bogen.
Figur 6-7: Galleri af småbilleder
Eksempelsiden er er færdig webside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og JavaScript kode. Tekstformateringen ligger for en dels vedkommende i en ekstern stylesheet fil. Den kan du downloade via dette link.
Jeg henviser endvidere til det samme eksempel i min kommende bog om “Webdesign med stylesheets”, hvor al formateringen foretages ved hjælp af et stylesheet. Figur 19-4.
Figur 6-8: Klikbart billede.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.

Kapitel 10

Figur 10-11: Simpelt layout uden stylesheet.
Eksempelsiden er er færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Eksempel 10-1: Simpelt layout med stylesheet.
Eksempelsiden er er færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Eksempel 10-2: 2-spaltet layout.
Eksempelsiden er er færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Eksempel 10-3: 2-spaltet layout med forskellig spaltebredde.
Eksempelsiden er er færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Figur 10-15: Simpelt layout, 2 kolonner.
Eksempelsiden er er færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Figur 10-16: 2 kolonner med overliggende banner.
Eksempelsiden er er færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Figur 10-17: 2 kolonner med afkortet banner.
Eksempelsiden er er færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Figur 10-18: 3 kolonner.
Eksempelsiden er er færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Figur 10-19: 3 kolonner med banner og sidefod (footer).
Eksempelsiden er er færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Figur 10-20: 2 kolonner med banner og footer, hovedmenu og undermenu.
Eksempelsiden er en færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Bemærk dog, at jeg for at besværliggøre høst (“phishing”) af e-mail adressen har lagt hele footeren ned i en JavaScript fil, som ikke "ses" af de programmer, der har til formål at høste e-mail adresser, men nok ses af den, der læser siden. Principperne i konstruktionen af en sådan ekstern JavaScript fil er gennemgået i kapitel 12. For en ordens skyld gengiver jeg dog her indholdet af filen footer.js:
document.write("<div id='footer'><address>");
document.write("<a href='\/index.php'>");
document.write("<b>Webdesign 101<\/b>
-->  <\/a> -"); 
document.write("<b>J\&oslash;rgen Farum 
-->  Jensen<\/b> -");
document.write("<b>webmaster&#064;
-->  webdesign101.dk<\/b>");
document.write("<br>Copyright &copy;");
document.write("2005 <i>J\&oslash;rgen 
-->  Farum Jensen</i>");
document.write("<\/address>");
document.write("<\/div>");
Læg her især mærke til escape-tegnet \ foran alle tegn, der har betydning i JavaScript - forlæns skråstreg, html-koden foran &-tegnet i danske tegn osv.
Eksempel 10-18: CSS rollover menu
Denne menu anvendes i mange af bogens eksempelfigurer, blandt andet figur 10-20 på side 210.
Denne eksempelside omfatter både HTML-opmærkningen (eksempel 10-18) og stylesheet-koden (eksempel 10-17).

Kapitel 12

Eksempel 12-3: Skriv noget til skærmen.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-4: JavaScript, der laver en menu.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-5: JavaScript, der laver en footer (sidefod).
Eksemplet i førsteudgaven af bogen var fejlbehæftet, mens eksemplet her på webstedet var ok, så jeg henviser til dette eksempel.
Eksempel 12-7: Link-information i statuslinien.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-13: Funktioner med parametre.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-14: Universalfunktion til statuslinietekst.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-17: Åbne et nyt browservindue.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-28: Applikationseksempel. Universalfunktion til at åbne nyt browservindue.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-28a: Html-eksempel til det nye browservindue, der åbnes i eksempel 12-28.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-33: Demonstration af if-eklæringer.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-35: Demonstration af switch-funktionen.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-38: Konvertering af ugedage og måneder.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-42: Konvertering af ugedagenes og månedernes navne ved hjælp af et array.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-44: Korrekt formateret datostempling af en webside.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.
Eksempel 12-47: Datostempling med datoen i en variabel i stedet for som en funktion.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen. Eksempelsiden omfatter også eksemplerne 12-48 og 12-49.
Eksempel 12-54: Ur i statuslinien
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.

Kapitel 13

Eksempel 13-6: Grafisk rollover, preload af array.
Der henvises til eksempelsiden vedrørende det samme eksempel i 1. udgave af bogen.

For så vidt angår eksemplerne i kapitel 13 i øvrigt henviser jeg til dette websteds sektion om grafiske JavaScript rollovers, Rollovers. Jeg gør også opmærksom på, at tiden er ved at løbe fra denne måde at lave rollovers på. Du kan lave smukke rollovers både med og uden grafik ved hjælp af stylesheet formatering af dinne links, jf. mine efterhånden mange artikler om dette: Artikler om CSS rollovers.

Kapitel 14: Dynamisk HTML

Figur 14-10: Layout med position og en menu, der vises og skjules.
Eksemplet dækker figur 14-5, 14-6 og 14-10 samt eksemplerne 14-4, 14-6, 14-7, 14-8 og 14-9. Eksempelsiden er er færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Figur 14-11: Vis og skjul en note
Denne eksempelside bygger på bogens eksempler 14-9, 14-10 og 14-11.
Figur 14-12: En ekspanderende liste
Dette eksempel bygger på bogens eksempler 14-12 og 14-13.

For så vidt angår eksempel 14-23 henviser jeg til mine to websider om denne teknik, dels en menu, der altid står på en bestemt position i browservinduet (En flydende menu) og dels en pil-op, "Gå-til-toppen-af-siden" altid synlig.

Figur 14-14: Dynamisk navigationsbjælke
Eksempelsiden er en færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.
Figur 14-15: Dynamisk menu som fly-out.
Eksempelsiden er en færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode.

Kapitel 16

Figur 16-7: Tre udgaver af en html-liste som menu.
En html-liste kan gøres vandret og bruges som navigationsbjælke.
Figur 16-8: Webside med navigationsbjælke og sektionsmenu.
Eksempelsiden er en færdig demoside. Du må bruge browserens “Vis kilde”-funktion for at se stylesheet og HTML kode. Eksemplet
Eksempel 16-5: CSS menupanel
Universal stylesheet til formatering af en html-liste som et lodretstillet menupanel.
Eksempel 16-5/figur 16-10: Grafisk navigationsbjælke
Universal stylesheet til formatering af en html-liste som et lodretstillet menupanel.
Figur 16-18: HV-menu demoeksempel
Bogens eksempel på konfigurering af HV-menu. Eksemplet er pakket til en zip-fil, som du kan downloade herfra: hvmenu.zip.
Figur 16-21: HTML-liste som dynamisk dropdown menu
Figur 16-22: Universal Dropdown Menu (UDM4)

Denne side er senest opdateret: March 25, 2006

Webdesign håndbog

Webdesign – illustreret håndbog

– er i løbet af kort tid slået igennem som grundbogen for dem, der ønsker at lære sig websidekonstruktion, og tillige ønsker at gøre det på en håndværksmæssig solid måde. Køb den hos forlaget Globe.

Webdesign med XHTML

– er endnu en bog om webdesign, jeg har begået, og som blev udgivet i marts måned 2004 af forlaget Globe. Du kan læse om mine ideer med denne bog på websiden “ Webdesign med XHTML”.

Online support

Hvis du bliver abonnent på mit nyhedsbrev får du øjeblikkelig e-mail opdatering i tilfælde af rettelser eller uddybende forklaringer til eksempler og beskrivelser mine bøger.

Samtidig får du også gennem disse nyhedsbreve besked om nye og opdaterede artikler på dette websted.

Du kan læse mere om denne sag på websiden Nyhedsbrev.

Søg på siderne