Webdesign 101
– en webdesign notesblok
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\ørgen Farum
--> Jensen<\/b> -");
document.write("<b>webmaster@
--> webdesign101.dk<\/b>");
document.write("<br>Copyright ©");
document.write("2005 <i>J\ø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.