1

IFA, marts 2010/MSo

Introduktion til Typo3

Dette er en introduktion til de mest anvendte funktioner i Typo3, som benyttes til redigering af Institut for Fysik og Astronomis hjemmesider. Typo3 er et webbaseret

CMS (Content Management System) og skal derfor ikke installeres hos den enkelte redaktør. Datalogisk Institut har ansvaret for backup og vedligeholdelse af Typo3.

For at få adgang til hjemmesiderne logger man på med sit NFIT brugernavn og password (det som også benyttes til NFIT webmail og Oracle Calendar) – hvis man er

oprettet som webredaktør i Typo3. Hver webredaktør får adgang til en afgrænset del af hjemmesiden. Det er praktisk, for så har man det mindre at bekymre sig om.

I Typo3 har hver webside et unikt ID og tilgås i en browser som fx http://physicswww.daimi.au.dk/?id=1551. En webside som er oprettet i Typo3 har ikke noget

indhold, før man har sat et eller flere sideelementer (med indhold) ind på websiden. Meget mere nedenfor

Gå til websiden

Skriv ’/typo3/’ efter webadressen, dvs. http://www.phys.au.dk/typo3/.

Husk: “Allow pop-up windows” i din browser.

Dette skærmbillede viser ’front-end’:

Login

Benyt dit NFIT brugernavn og password for at logge ind.

Nyttige links:

http://cs.au.dk/services/web-department/faq/

http://typo3.org

OBS: Hele dette dokument viser screenshots

fra backend i Typo3 i det gamle ‘skin’, mens

du som redaktør arbejder i det nye ‘skin’.

2

Når du logger ind

Hver gang du logger på, kommer du først til følgende skærmbillede. Du er nu

logget på i ’back-end’: Du logger ud øverst til højre, ved siden af dit navn.

Første gang du logger ind – del 1

Første gang du logger ind skal du indstille din brugerprofil, fx hvis du vil skifte

Typo3 back-end til dansk. Klik på ’User settings’ under ’User tools’ til venstre i

skærmbilledet. Vælg Language, og skriv dit navn og emailadresse, for god

ordens skyld. Klik til sidst på Save Configuration nederst.

Første gang du logger ind – del 2

Klik først på liste modulet under Web til venstre. Nu ser du tre kolonner: Moduler

til venstre, sidetræet med websiderne i midten, og arbejdsfeltet til højre. Klik evt. på

det lille + for at træet folder sig ud.

Første gang du logger ind – del 3

Klik på en tilfældig side (på titlen til højre for det lille side-ikon ) i sidetræet i

midterste kolonne. Sæt flueben/klik ud for Extended view og Localization View

(Udvidet visning og Oversættelses visning). Dette sikrer, at du kan laver sider på

to sprog. Alternativt kan du skrive enten engelsk eller dansk som default sprog.

3

Redigering af sideindhold på eksisterende side, find siden

Klik på Side modulet til venstre og klik på den side, du vil redigere (dvs. klik på

sidens titel i sidetræet). Klik evt. på det lille + for at åbne sidetræet. Til højre ser du

nu sideelementet på den pågældende side. En side kan betså af mange

sideelementer. Klik nu midt i teksten til højre eller på i sideelementet.

Redigering af sideindhold på eksisterende side, rediger tekst

Der dukker tre faneblade op til højre. Klik på det midterste faneblad Text.

Editoren åbnes og du er nu klar til at redigere siden! Typo3 gemmer ikke

ændringer automatisk, så klik fx på jævnligt.

De mest anvendte ikoner i Typo3 er vist her:

Side modulet bruges til redigering af sider + klik på sidetitel i

sidetræet. (TV står for TemplaVoila.)

Viser en webside i arbejdsområdet til højre i back-end. Bemærk,

samme ikon benyttes ved søgning, øverst til højre i vinduet!

Liste modulet bruges til at liste elementer på en webside.

Filelist modulet bruges til upload af filer.

Rediger tekst/indhold på webside, eller websidens egenskaber.

Opret ny webside eller indsæt nyt sideelement på en webside.

Luk vindue uden at gemme. Panik-knappen!

Gem ændringer og vis resultatet i browser-tab eller vindue

Gem ændringer, men hold vinduet åbent.

Gem og luk. Du er klar til at gå videre med noget andet.

Indsætter specielle karakterer på websiden.

Sætter link til typo3-webside, fil/pdf, eksternt link eller fjerner link.

Indsætter billede. Men, billedet skal først uploades via Filelist modulet.

Full Screen Rich Editing (RTE). Giver stort arbejdsområde.

Viser html-koden. Du kan rette i koden, men ikke ubegrænset. Typo3

vil evt. rette/overskrive dine ændringer, Klik på <>, når du vil retur til

Text vinduet (wysiwyg).

4

Redigering af sideindhold i stort redigeringsvindue, trin 1

Inden du åbner til det store redigeringsvindue, så klik på Save! Ellers mister du dine

ændringer. Klik på den lille grå pil (<) for at lukke midterste kolonne med sidetræet.

Den lille grå pil ses i billederne på foregående side. Klik herefter på ikonet .

Redigering af sideindhold i stort redigeringsvindue, trin 2

Nu opnår du et større arbejdsområde. Klik på den lille grå pil (>), når du vil åbne

sidetræet. Huske at gemme først - hvis du vil gemme ændringer.

5

Indsæt link på webside – til fil – trin 1

Hvis du ønsker at linke til fx en pdf-fil (eller word eller excel), skal denne fil først

uploades til Typo3. Filen skal allerede ligge lokalt på din PC. Først går du til File-list

modulet . Find frem til den mappe du ønsker at uploade til eller opret en ny

mappe til formålet. Klik på og vælg Upload files.

Indsæt link på webside – til fil – trin 2

Efter filen er uploaded, kan du nu sætte link til den. Klik på Page modulet og

find websiden i sidetræet. Find det sted, hvor du ville linke til filen og klik på

globen. Vælg fanebladet File og find frem til filen og klik på filens navn.

Klik Browse og find filen. Klik Upload files. Husk, gem ændringerne – Typo3 gør det ikke automatisk.

6

Opret ny side – trin 1

Først oprettes en webside i Typo3 (trin 1-4). Derefter sætter vi indhold ind på siden

vha. indholdselementer! Så, højre-klik på sidens titel eller side-ikonet ud for den

side, som du vil oprette en ny underside til. Vælg New . .

Opret ny side – trin 2

Det er en god ide at klikke på og følge den Guide/Wizard, som kommer op.

Klik på den lille grønne pil dér, hvor du vil have din nye side skal ligge.

7

Opret ny side – trin 3

Klik på AU’s Default template som vist nedenfor.

Opret ny side – trin 4

Giv siden en meningsfuld titel! Og gem .

8

Indsæt indhold/tekst på websiden

Find siden du vil sætte indhold ind på (klik på dens titel i sidetræet). Klik på ,

vælg type af indholdselement (fx text element øverst i listen). Hvis der skal flere

sideelementer ind på siden, kan du vælge at give hvert enkelt element en

overskrift. Bemærk, overskriften til et sideelement er valgfrit, mens en webside

SKAL have en – og kun én – overskrift. Klik på fanebladet Text og skriv eller

indsæt din tekst (ala copy/paste). Hvis du kopierer tekst ind og bliver spurgt, om

det skal gemmes i udklipsholderen, så svar ’ja’.

Indsæt indhold/tekst på websiden – både dansk og engelsk version

Hvis du kun har brug for enten dansk eller engelsk på dine sider, så kan

du godt nøjes med én sprogversion. Her vil vi oprette en side på både

dansk og engelsk. Husk at gemme din side . Klik på sidens titel i

sidetræet. Klik nu på Localizations view (Oversættelsesvisning) og

vælg English. Giv siden en titel (den engelske webside SKAL have en

titel) og klik gem/save.

Mens du er i Oversættelsesvisning skal du nu klikke på Create a copy

for translation (English). Klik på [Translate to English], fjern overskiften

”copy..”. Vælg fanebladet Text og skriv/indsæt din engelske tekst. Det

skal du nu gøre for hvert sideelement, dvs. klik på Create og Translate…

og oversæt teksten og gem/save.

Hvis du vælger IKKE at oprette en engelsk version, bliver den samme

webside vist, hvad enten brugeren vælger dansk eller engelsk i front-

end. Man kan jo vælge at indlede sin danske tekst med ”Only in

Danish), eller ”Kun på engelsk”, hvis alt er på engelsk.

9

Indsæt billeder – trin 1 Indsæt billeder – trin 2

Ligesom med filer, skal et billede uploades til Typo3, før man kan indsætte det

på en webside. Derfor, to trin! Klik på Filelist modulet , find mappen, hvor

billedet skal ligge eller opret ny mappe, klik på mappen og vælg Upload Files

. Browse dig frem til dit billede og klik Upload files under stien til billedet.

Hvis du har foretaget ændringer til et allerede uploaded billede, så sæt et

flueben ved Overwrite existing files og klik så på Upload files. Så overskrives den

gamle udgave, og du ser nu det opdaterede billede på hjemmesiden (fx efter

Reload i browseren).

Vi vil nu sætte billedet på websiden. Find websiden i sidetræet og klik

på sidens titel, Klik på sideelementet, hvori du vil sætte billedet eller

klik midt i teksten et sted – og klik på fanebladet Text. Du er nu klar til at

indsætte billedet, så klik på . Der dukker tre faneblade op – prøv dig

lidt frem. Start fx ud med Drag’n’Drop. Klik på billedet og ”træk” det ind

på websiden (fanebladet Text). Du kan nu højre-klikke på billedet og

vælge Image Properties. Undgå at ændre billedets dimensioner dér,

men sæt fx lidt luft omkring billedet med padding – og sæt Titel og

Alternativ tekst, som vises ved Mouse over. Klik opdater og gem

Sørg for at dit billede har de optimale dimensioner FØR du uploader det til

Typo3: Opløsning 72 DPI og max bredde fx 300. Eller vælg fanebladet New

Magic Image, som sørger for den slags, i stedet for Drag’n’Drop..

10

Egenskaber for siden/ page properties – ændring af sidetitel dk/eng Egenskaber for siden/ page properties – indsæt forfatter og mail

Hvis du vil ændre sidens titel, skal du finde frem til Page Properties (sidens

egenskaber), Klik på sidens titel i sidetræet og klik lige over sidemodulerne.

Ret i titlen og gem. Eller marker Hide page, mens der arbejdes! Eller hvis siden

ikke må ses i menuen, så marker Hide in menu. Hvis titlen i navigationen skal

være kortere end sidens titel, så udfyld Navigation titel. Og gem!

Nogle steder er forfatter allerede sat ind i sidens egenskaber. Ellers klik

på fanebladet Metadata og tast dit navn og email ind. Og gem..

Hvis du har ændret sidens danske titel, skal den engelske muligvis også

rettes til. Klik på Localization view og klik på Union Jack.

11

Egenskaber for siden – flytte siden

Har du placeret en side forkert, er det helt enkelt at flytte den. Klik på side-

ikonet til venstre for sidens titel i sidetræet. Vælg More options…

Du kan nu vælge, hvor du vil have siden sat ind i sidetræet (klik på den lille

grønne pil). Og fx ændre sidens titel – om nødvendigt.

I Typo3 kan man også nemt indsætte tilmeldingsskemaer til fx en

workshop. Det kommer med i næste udgave af denne lille vejledning!

12

Visning – hvordan ser vi resultatet af vores arbejde? Visning – hvorfor ser jeg ikke det, jeg forventer??

Vi kan vælge at klikke på blandt sidemodulerne i venstre kolonne. Vi

kan også klikke på . Som du kan se nedenfor, har hver webside i Typo3

et ID, som kan tilgås direkte. Hold musen over et side-ikon i træet. Fx har

bibliotekets forside ID = 1496.

Er siden skjult? Tjek Hide page i Page properties, altså sidens egenskaber.

Huskede du at gemme dine ændringer? Ellers gå tilbage i back-end og

tjek, at ændringerne er der og klik så Gem. Det kan også nogen gange

hjælpe at klikke Reload i browseren.

Siden ses som http://physicswww.daimi.au.dk/?id=1496

Du kan søge på tekst eller fx en sides ID ved at klikke på øverst til højre i

arbejdsområdet:

En sides ID kan også ses ved at markere feltet lige efter brødkrummen. Her

ses det, at siden Gymnasiekontakt har ID = 1516.

13

PURE data – 1

Find ud af hvor jeres PURE data (fx publikationer eller liste over

personer) skal ligge, Find siden, klik for at oprette et nyt

sideelement. Sideelementet skal være af typen Plugins: PURE.

PURE data – 2

Klik på det midterste faneblad Plugin. Vælg fra listen Items de data du ønsker at

vise (vælg én af de seks muligheder), fx List of Publications. Efter et par sekunder

dukker et tredje faneblad op ” 1 List of publications”.

14

PURE data – 3

Klik på fanebladet ”1 List of publications” under Plugin for at oplyse

detaljer. Indsæt mailadressen for de ansatte, som I ønsker at

importere data fra. Hvis I vil vise publikationer årsvis, så opret en side

for hvert år (dvs. et plugin for hvert år). Nedenfor er vist, hvordan

man kan liste publikationer fra fx 2007-2009, Sæt Group by

(primary) til Submitted year, hvis I vælger at benytte Submitted year.

PURE data – 4

En liste af ansatte kan vises på flere måder, bl.a. som en helt enkelt liste eller som

visitkort. Prøv jer frem. Igen, indsæt mailadresser for de relevante personer. Husk,

videnskabelige medarbejdere, ph.d.-studerende og tap-personale er listet i PURE,

normalt ikke studerende.