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.
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).
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.
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)
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).
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).
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).
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.
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).
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.
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.
Jeg har opdateret min artikel om denne lidt oversete
hjælp til tastaturnavigation
Sådan bruger du accesskey-attributten. (Juni 2006).
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).
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).
En teknik, der gør det muligt at have de flotteste grafiske
sidehoveder uden at sætte tilgængeligheden overstyr.
Image Replacement (Juni 2006)
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).
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).
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)
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).