Hjemmeside navigation, menu, server side include, ssi, css

Navigation, menu, SSI og CSS

Michael Maardt, sidst opdateret: 15.06.2011

Når et websted (eng. website) har mange sider, er det vigtigt, at brugeren let kan finde, hvad han søger. Undersøgelser viser, at mange brugere kigger efter en søgefunktion og hvis den forefindes, er den typisk i øverste højre hjørne. Jeg vender tilbage til dette.

At navigere på et websted betyder at kunne finde rundt blandt alle siderne, incl. evt. PDF filer, videoer osv. For nogle år siden stødte jeg på det menusystem, som du ser i toppen af alle sider. Det stammer fra www.cssplay.co.uk og jeg har modficeret det. Man kalder sådanne menuer drop-down menuer og de kan endda have undermenuer, så man på en let måde kan vise brugeren, hvilke sider der findes og brugeren kan ved at køre musen hen over menuerne hurtigt klikke sig frem til en bestemt side.

I headeren af hver .shtml fil står linien (det skal helst være een linie):

som kalder style-sheet-filen topmenu-knowware.css fra roden af domænet (skråstregen indikerer dette)

At forstå koderne i denne fil kræver kendskab til css og for mit vedkommende tog det lang tid, men det lykkedes da at modificere filen til mine ønsker. Du skal kun rette i filen, hvis du har styr på det.

Første linie i hver shtml fil efter <body> er:

edit jan. 2011: Jeg har lige fundet ud af, at jeg har været dum/uvidende. Jeg har i mega lang tid brugt .inc, hvilket betød, at jeg ikke kunne inkludere en fil i en anden fil, heller ikke kommandoer som dato osv. Det kan jeg nu, fordi jeg kalder alle de filer med normal html kode, der inkluderes, for .shtml

Dette er en såkaldt include kommando og kan kun udføres korrekt, hvis webhotellet understøtter SSI (server side include). Derfor hedder siderne .shtml til efternavn, så får serveren (ikke browseren) denne besked: "der er måske include kommandoer i filen, og hvis ja, skal de eksekveres, inden kildekoden sendes til browseren".

Kommandoen inkluderer en anden fil, som består af html koder, og dette er smart, hvis man ønsker at indsætter mange af de samme linier i flere filer. I dette tilfælde handler det om menuerne i toppen af hver side. Jeg ønsker at menuen optræder øverst på siden i alle filer.

topmenu-knowware.css og topmenu-knowware.shtml hænger sammen, så det er bestemt med forskellige pixel definitioner, hvordan layout og design for menuerne ser ud.

i bunden af mange af mine .sthml filer staar lige før </body>

og du kan se resultatet nederst på siden. Og du kan se kildekode med Ctrl+U i Firefox, så kan du se hvad det er blevet til, når filerne inkluderes.

Brug menuen øverst til venstre for at gå til andre sider