ifa, marts 2010/mso obs: h ele dette dokument viser ... før man har sat et eller flere...
Post on 27-Mar-2018
218 Views
Preview:
TRANSCRIPT
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.
top related