Webdesign 101

På dette websted finder du artikler, der understøtter og videreudvikler de eksempler, jeg beskriver i mine bøger om webdesign. Se i navigationspanelet til højre for at finde links til beskrivelser af og kildekode til bøgerne.

Navbar med vandret undermenu

Et eksempelsite demonstrerer, hvorledes du kan konstruere en CSS-drevet navigationsbjælke med en vandret-stillet undermenu.

Navigationsbjælke med en vandretstillet undermenu. (Marts 2011).

Webdesign pixi-bøger

To vigtige artikelserier fra webdesign101.dk er nu omsat til PDF-filer, der gratis kan donwloades. Det drejer sig om artiklen CSS Selektorer (46 sider, 3,3 MB) og artiklen Layout af websider (40 sider, 5,3 MB).

Artikelformen muligør en mere sammenhængende og bedre illustreret fremstilling af de respektive emner.

Begge artikler henviser til et antal online eksempler på dette websted. (December 2010).

En oversigt over de layoutmodeller, der er beskrevet i den først nævnte artikel finder du på siden Moderne webside layout.

“True Grid” CSS layout

Et “True Grid” er et sidelayout, hvor indholdet er ordnet i tabelform, det vil sige med rækker af kasser, hvis højde er ens uanset hvilken en af kasserne i rækken der har det meste indhold.

Det er ganske let at lave med HTML tabeller. Men også i dette tilfælde er det en fejlagtig anvendelse af table-markøren.

Men dette layout er ganske let at lave med CSS table layout formregler, se mit eksempel: True grid CSS layout. (April 2010)

CSS under hjelmen

I seks artikler gennemgås CSS selektorer, CSS pseudoklasser – herunder en håndfuld interessante CSS3 pseudoklasser, der nyder god understøttelse i dagens browsere og – CSS pseudoeelementer.

For så vidt angår pseudoklasser omhandler artiklen Formatering af links de pseudoklasser der vedrører links, mens artiklen Formreglernes vægt forklarer begrebet specificitet.
CSS under hjelmen. (November 2009).

To skridt frem og ét tilbage

Artiklen Avancerede float-layouts, som jeg refererer til længere nede på denne side, blev til da jeg skulle forklare, hvordan du sikrede dig en korrekt visning i Internet Explorer 6/7, hvis du ville anlægge de layoutprincipper, jeg beskriver i artiklen Moderne websidelayout som jeg henviser til i den umiddelbart følgende overskrift.

Det slog mig under dette arbejde, at det gennemtænkte floatlayout byder på nogle muligheder, som vi ikke har med den mere moderne metode: At sætte brugeren i stand til at vælge hvilket layout han/hun fortrækker:
Brugervalgt layout. (Oktober 2009).

Moderne websidelayout

Efter frigivelsen af Internet Explorer version 8 i foråret 2009 er det attraktivt at overveje at bruge CSS-table egenskaberne til layout.

I denne artikel gennemgår jeg disse egenskaber og demonstrerer, hvorledes de kan bruges til layout af websider. Jeg beklager på forhånd: artiklen er frygtelig lang. Hvis du er hip på ideen kan du måske nøjes med eksemplerne.
CSS-table layout modeller. (Maj 2009).

Avancerede float-layouts

CSS layout af websider ved hjælp af float-egenskaben bliver heldigvis mere og mere populært. Jeg har derfor skabt en lille serie avancerede layoutmodeller, der på kort og komprimeret form gennemgår konstruktionen af de mest almindelige layouts:
Avanceret floatlayout. (Maj 2009)

Jeg har dog ikke taget mine tidligere artikler ned. Dem finder du fortsat på
Layout med float-egenskaben. (Sep. 2007) Websidelayout med float-egenskaben, som er en mere fuldstændig gennemgang af de grundlæggende principper, (Feb. 2006) og
3 lige høje spalter med CSS som i detaljer gennemgår metoderne til at opnå det eftertragtede mål. (Marts 2006)

For overskueligheden skyld er nogle af resuméerne til de artikler, jeg omtaler på forsiden, foldet sammen. Klik på plustegnet til venstre for overskriften for at folde teksten ud.

Billedgallerier

Der er efterhånden et utal af online tjenester, hvor du kan uploade dine fotos. Men der er dog stadig behov for at at fabrikere det individuelle billedgalleri, hvadenten det drejer sig om at vise interiørbilleder fra sommerhuset (Konventionelt billedgalleri) eller blot vise en serie billeder:
Moderne billedgalleri. (April 2008).

Galleri med Lightbox. (Oktober 2009).

Fanebladsmenuer

Den gamle konstruktion, jeg haft på dette websted i 7-8 år, er nu definitivt nedlagt. Den er ikke aktuel mere. Mere moderne konstruktioner gennemgår jeg i følgende eksempler:
Fanebladsmenu på alle sider
Fanebladsmenu på én side, med skiftende indhold
Menuers tilgængelighed.

Popop bokse

Er du ikke tilfreds med den mulighed, title-attributten giver dig for at vise en forklarende tekst i forbindelse med nogle ord på din webside, kan du lave nogle DHTML-popop bokse i stedet for:
Vis og skjul en note ved click og mouseover. (Apr. 07)
Jeg har også opdateret min artikel om, hvordan du laver popop bokse i forbindelse med linksene i en menu:
CSS popop uden JavaScript. (Dec. 06)
Opdateringen omfatter en tilføjelse, hvor jeg demonstrerer hvorledes du kan lave inline popop bokse uden brug af JavaScript.

Accesskey-attributten

Jeg har opdateret min artikel om denne lidt oversete hjælp til tastaturnavigation
Sådan bruger du accesskey-attributten. (Juni 2006).

JavaScript slideshows

Jeg har oplevet en vis fornyet interesse for mine artikler om dette emne. Det har været anledning til en opdatering og modernisering af disse scripts.
JavaScript slideshows.
I artiklen JavaScript tidslinie præsenterer jeg et script, der muliggør sideløbende visning af flere billeder med en høj grad af kontrol over visningstakten. (Juni 2006).

Brugervalgte stylesheets

Jeg har opdateret artiklen om Stylesheet switching (Brugervalgte stylesheets) og lavet et mere fuldstændigt eksempel, der viser hvordan du fuldstændigt kan ændre præsentationen af én og samme side.
(Vekslende stylesheets). (Juni 2006).

Image Replacement

En teknik, der gør det muligt at have de flotteste grafiske sidehoveder uden at sætte tilgængeligheden overstyr.
Image Replacement (Juni 2006)

Opdatering af DHTML-rollover-script

Grafisk rollover med ringe tyngde er en artikel, jeg har propaganderet en hel del for, fordi den kan reducere overførselstiden for en sådan grafisk rollover ganske betragteligt. Det viste sig desværre at mit JavaScript var mangelfuldt, så rolloveren viste fejl i enkelte nyere browsere.

Fejlen var mestendels en sjuskefejl, men nu er den i hvert fald rettet i den nye og opdatered udgave af siden, jeg refererer til ovenfor, samt i et par andre eksempler på udførelsen af dette princip
Grafisk rollover med ringe båndbredde /2. (Marts 2006).

Jeg opdagede fejlen, da jeg skulle bruge scriptet til en ny applikation, hvor jeg ønsker at markere hotspots på et image map. Et eksempel på, hvordan det kom til at tage sig ud, kan du se på websiden
Highlighting af hotspots. (Marts 2006).

Grafisk rollover uden JavaScript

Hvis du er optaget af at undgå at bruge JavaScript til at drive din rollover, kan det sagtens lade sig gøre at lave en grafisk menu alene med CSS:
Grafisk rollover kun med CSS /2. (Marts 2006).

CSS-menuer redux

Jeg har i tidens løb skrevet adskillige håndfulde artikler om anvendelsen af HTML-lister som basis for konstruktionen af menuer, såvel flade menuer som dynamiske menuer.

Jeg har nu gjort mig selv og forhåbentlig mine læsere den tjeneste at kondensere stoffet i 3 artikler om

(September 2005)

Grafisk baggrund

Det kan ofte være attraktivt at forsyne websiden, eller dele af websiden, med en grafisk baggrund. Jeg belyser hele viften af muligheder i en tutorial:
Noter om baggrundsgrafik. (Juni 2005).

Jørgen Farum Jensens webdesign notesblok

Snapshots fra webdesignerens værksted