typo3 webredaktør kursus - auningsport · typo3 er et cms, men hvad er et cms egentligt?...
TRANSCRIPT
© 2011 Typovizion
TYPO3 webredaktør kursus
TYPO3 webredaktør kursus
© 2011 Lars Jørgen Hansen, Typovizion
Indhold
1 Til kursisten ................................................................................ 1
2 Dagsplan .................................................................................... 3
3 Introduktion ................................................................................. 5
3.1 Hvem er kursusnoterne beregnet for? ................................. 5
3.2 Hvad er et CMS? ................................................................. 5
3.3 Hvem har udviklet TYPO3? ................................................. 6
4 TYPO3 – det grundlæggende ..................................................... 7
4.1 TYPO3 Frontend ................................................................. 7
4.2 TYPO3 Backend ................................................................. 8
4.3 Log ind ................................................................................ 9
4.4 Sidetræet .......................................................................... 11
4.5 Titler og ikoner .................................................................. 11
4.6 Venstre menu / værktøjer .................................................. 13
4.7 Skjul Sidetræ ..................................................................... 13
4.8 Øvelse: Log ind ................................................................. 14
5 Siden og sidens elementer ....................................................... 15
5.1 TYPO3 – et elementbaseret CMS ..................................... 15
5.2 Forskellige måder at lave TYPO3 skabeloner på ............... 16
6 Ret et eksisterende indholdselement ........................................ 17
6.1 HTML Area editor .............................................................. 18
6.2 HTML Area: Basic, Typical og Show Off ............................ 19
6.3 Tekstformatering ............................................................... 21
6.4 Øvelse: Grundlæggende tekstformatering ......................... 23
6.5 Øvelse: Fjern formatering .................................................. 23
6.6 Alternativ Overskrift, Ramme og Før og Efter .................... 24
6.7 Øvelse: Afprøv mulighederne med Ramme og Layout ...... 26
7 Links ......................................................................................... 27
7.1 Historien bag links ............................................................. 27
7.2 Typer af link....................................................................... 27
7.3 Opret links i TYPO3 .......................................................... 28
7.4 Opret eksterne links .......................................................... 30
7.5 E-mail link, fjern link og link til fil ........................................ 30
7.6 Øvelse: Opret link ............................................................. 32
7.6.1 Øvelse: Link til pdf-dokument ............................... 32
7.7 Øvelse: Bogmærke link ..................................................... 32
8 Indsæt billeder .......................................................................... 35
8.1 Billedbegrænsninger på en hjemmeside ........................... 35
8.2 Opret nyt element med billede .......................................... 36
8.3 Indholdselement: Tekst m/billede ...................................... 36
8.4 Øvelse: Indsæt billeder ..................................................... 42
8.4.1 Billede under tekst ................................................. 42
8.4.2 Klik forstør billede ................................................. 42
8.4.3 Øvelse: Billeder i kolonner .................................... 43
8.4.4 Øvelse: Gør billede til et link ................................. 43
8.4.5 Øvelse: Billedtekst ................................................. 43
9 Filer og Filliste .......................................................................... 45
9.1 Øvelse: Opret mappe og hent filer..................................... 46
10 Listevisning .............................................................................. 47
10.1 Liste modulet .................................................................... 47
10.2 Øvelse. Orienter dig i Liste visning .................................... 47
11 Brugerindstillinger .................................................................... 49
11.1 Øvelse: Personlig opsætning ............................................ 50
12 Fillinks ...................................................................................... 51
12.1 Opret et element af typen Fillinks ...................................... 51
12.2 Øvelse: Opret et indholdselement af typen Filliste ............. 53
12.2.1 Øvelse: Filliste med ”læs fra sti” ........................... 53
13 Mailformular ............................................................................. 55
13.1 Eksempel på mailformular ................................................. 56
13.2 Øvelse: Opret mailformular ............................................... 58
13.3 Øvelse: Takkeside ............................................................ 59
13.4 Øvelse: Begrundelse for fravær ........................................ 59
14 Tabeller .................................................................................... 61
14.1 Tabelværktøj i teksteditor .................................................. 61
TYPO3 webredaktør kursus
14.2 Indsæt tabel som HTML kode ........................................... 63
14.3 Tabel indholdselement ...................................................... 65
14.4 Øvelse: Opret tabel som Tabel indholdselement ............... 68
14.5 Øvelse: Opret tabel igennem editor ................................... 68
14.6 Øvelse: Opret tabel som HTML indholdselement .............. 68
15 Opret nyhed og kalenderaktivitet .............................................. 69
15.1 Opret en nyhed ................................................................. 69
15.2 Opret nyt element (ny nyhed) ............................................ 70
15.3 Husk at vælge gruppe/kategori .......................................... 71
15.4 Øvelse: Opret nyhed ......................................................... 71
15.5 Opret en kalenderaktivitet .................................................. 72
1 Til kursisten 1
Typovizion, Tjørnevej 10, 8382 Hinnerup
1 Til kursisten
Hvis du på egen hånd vil læse (mere) om TYPO3, er der blandt andre føl-
gende bøger:
W. Altmann, R. Fritz og D. Hinderink: Typo3 EnterpriseContent
Management, PACKT 2005
[En bog der dækker TYPO3 generelt]
Daniel Koch: Mastering TypoScript, PACKT 2006
[En bog der udelukkende omhandler TypoScript]
Kasper Skaarhøj: Kom i gang, (gratis, hentes på www.typo3.org)
[En rigtigt god og gratis vejledning, men alle skærmbilleder er far
gamle TYPO3 versioner]
TYPO3 nyhedsgrupper
[Søg på TYPO3 nyhedsgrupper i fx Google]
TYPO3 siden
[På www.typo3.org kan du følge med i nye versioner af TYPO3 etc.]
2 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
.
2 Dagsplan 3
Typovizion, Tjørnevej 10, 8382 Hinnerup
2 Dagsplan
Kursusmaterialet er beregnet til et dagskursus bestående af ca. 7-8 timers
undervisning.
09.00 – 12:00 Grundlæggende redigering med TYPO3
12:00 – 12:30 Pause
12:30 – 14:30 De mere avancerede TYPO3 funktioner
14:30 – 16:00 Workshop
16:00 – 16:30 Afrunding
4 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
.
3 Introduktion 5
Typovizion, Tjørnevej 10, 8382 Hinnerup
3 Introduktion
3.1 Hvem er kursusnoterne beregnet for?
Dette kursusmateriale er beregnet for TYPO3 begynderen eller dig, der kun
har lidt erfaring med redigering af indholdet på en hjemmeside igennem
TYPO3.
Men materialet er også velegnet, hvis du ikke kender TYPO3, men gerne vil
”snuse lidt” til systemet for at finde ud af, om det er noget for dig. Du kom-
mer godt omkring TYPO3 og den måde, man som redaktør arbejder med
systemet på.
Materialet har til hensigt at give dig den grundlæggende viden om, hvordan
du som redaktør redigerer sideindholdet i form af tekst, billeder, grafik, pdf-
filer osv. igennem TYPO3.
Professionel udvikling af skabeloner og administration af TYPO3 dækkes
ikke i dette dokument!
3.2 Hvad er et CMS?
TYPO3 er et CMS, men hvad er et CMS egentligt? Allerførst så står CMS
for Content Management System, altså et ”system” til styring og administra-
tion af indhold på et websted. I et moderne CMS som TYPO3 kan de fleste
muligheder tilpasset kundens behov.
I et CMS sker al administration og redigering i en almindelig webbrowser.
Det vil sige, at blot du har en internetforbindelse, kan du arbejde med hjem-
mesiden - hvor og når som helst.
Indhold og formatering er adskildt
Grundideen i et CMS er, at indhold og formatering/design er adskilte.
Indholdet på websiderne (tekst, billeder, grafik osv.) gemmes i en database.
Når indholdet fra databasen vises på hjemmesiden sættes det først ind i et
fordefinerede design i form af en eller flere skabeloner. Det er altså skabe-
lonerne der bestemmer, hvordan designet på hjemmesiden er.
Skriftformateringen i form af mulige skrifttyper, skriftsstørrelser og farver
samt de muligheder, du har for at ændre på dine tekstformateringer ligger i
et StyleSheet samt i de muligheder administrator har givet dig lov at bruge.
6 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Normalt har en redaktørbruger ikke adgang til hverken at se eller ændre i
hverken TYPO3 skabelon eller Stylesheet!
Det samme indhold kan bruges igen og igen som byggeklodser på websider,
intranet, til udskrift, nyhedsbreve og mobiltelefon.
Flere redaktører
Der kan enten være én eller mere normalt flere, der skriver indhold til en
hjemmeside. Som regel er det en god ide at lade dem, der sidder med stoffet
og fingeren på pulsen, også redigere de samme informationer på hjemme-
siden. Der er en tendens til, at jo flere led informationerne skal igennem
desto trægere går opdateringen.
Redigering on-line
Man kan vælge at lade redaktørerne”udgive” det stof de redigerer direkte og
online uden at skulle igennem en webmaster eller en chef.
Workflow
Men TYPO3 har også mulighed for at arbejde i en såkaldt workflow ar-
bejdsgang, hvor redaktørernes arbejde først tjekkes af en overordnet chef
webmaster, før stoffet kommer on-line.
Selve TYPO3 hører hjemme i ”maskinrummet”
Selve TYPO3 CMS er et almindeligt server computerprogram og hører
oftest hjemme i en IT-afdeling.
En anden mulighed er, at man køber sig ind på et webhotel, der tilbyder
TYPO3. Som regel er det den billigste løsning.
3.3 Hvem har udviklet TYPO3?
TYPO3 er oprindeligt udviklet af en dansker ved navn Kasper Skaarhøj.
Siden er der kommet en hel gruppe af udviklere til fra både danmark, men
især også fra Tyskland.
På Kaspers Corner, kan du bl.a læse denne korte præsentation:
I'm Kasper. I live in Copenhagen, Denmark. Between 1998 and 2007 I have
spend much of my time programming TYPO3. In April 2007 I finally passed
over the core development leadership to the next generation of TYPO3
gurus. So now, I'm just the Old King.
4 TYPO3 – det grundlæggende 7
Typovizion, Tjørnevej 10, 8382 Hinnerup
4 TYPO3 – det grundlæggende
Som du måske allerede har bemærket, så er TYPO3 delt i to områder. Et
åbent område hvor alle har adgang og så et lukket område, der kræver et log
ind. Det er kun i det lukkede område, du kan ændre i indholdet.
De to områder af TYPO3 kaldes henholdsvis for TYPO3 Backend og Fron-
tend. Navnet i sig selv siger dig nok en del om, hvad de to ”områder” er be-
regnet til.
4.1 TYPO3 Frontend
TYPO3 Frontend er selve hjemmesiden, som vi alle kan se i en webbrow-
ser, hvis vi indtaster den korrekte URL (fx. udv.solutio.dk) i en browser.
Figur 1: En hjemmeside som den ser ud i Frontend
En webbrowser eller browser er det navn man bruger om det program, du
ser hjemmesiderne i. Det kan hedde Microsofts Internet Explorer, Mozilla
Firefox eller Apples Safari plus mange flere. I en browser kan du kun se og
ikke ændre eller skrive på websiden.
8 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
4.2 TYPO3 Backend
TYPO3 Backend er et lukket område, hvor kun de personer der må admi-
nistrere og redigerer indholdet (siderne) på webstedet, har adgang.
For at få adgang til Backend og dermed kunne ændre på sidernes indhold,
skal du være logget ind med et brugernavn og et kodeord. Du skal med an-
dre ord være registreret og kendt af ”systemet”.
Figur 2: Backend ser meget anderledes ud end Frontend
Du finder altid TYPO3 Backend ved at tilføje et ”/typo3” (en skråstreg og
teksten typo3 med små bogstaver) til websiden adresse – som fx denne web-
adresse:
http://udv.solutio.dk/typo3
Før du får lov at komme indenfor i TYPO3, skal du indtaste et gyldigt Bru-
gernavn og Kodeord (på engelsk Username og Password). Uden et gyldigt
Brugernavn og Kodeord får du ikke adgang. Det er normal administrator for
webstedet, der opretter brugere og også definerer, hvad de enkelte brugere
og redaktører må se og arbejde med på webstedet.
4 TYPO3 – det grundlæggende 9
Typovizion, Tjørnevej 10, 8382 Hinnerup
4.3 Log ind
For at logge ind i TYPO3 Backend skal du som nævnt indtaste hjemmesi-
dens adresse efterfulgt af /typo3 (adressen til webstedet du skal bruge på
kurset får du af kursusinstruktør).
Nu kan du indtaste dit Brugernavn og Kodeord (det får du evt. af instruktør
på kurset).
TIP: Du skal sikre dig, at “cookies” er slået til i din webbrowser! Hvis du
har slået cookies fra kan du ikke logge ind!
Hvis du indtastet et korrekt brugernavn og adgangskode vil et skærmbillede
lignende dette vise sig på din skærm:
Figur 3: Det skærmbillede der vises lige efter log ind.
10 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
I TYPO3 Backend er der en lang række moduler (værktøjer) i menuen til
venstre. De kaldes ofte for Klikmenuen. Når du fx vil redigere og oprette
sider skal du vælge Side-modulet (det første værktøj i Klikmenuen).
Hvert modul viser sit eget indhold. Hvis du er administrator har du adgang
til alle moduler. Andre “almindelige” brugere og redaktører har kun adgang
til de moduler, som administrator har valgt de må se!
Som administrator er der mange knapper at vælge mellem, og det hele kan
virke lidt uoverskueligt. I virkeligheden er det kun ganske få af muligheder-
ne i Klikmenuen, du bruger det meste af tiden. Derfor oprettes en bruger-
eller redaktørkonto som regel med kun de mest nødvendige knapper.
Figur 4: Henholdsvis en Administrator og Redaktørs ven-stre Klikmenu.
4 TYPO3 – det grundlæggende 11
Typovizion, Tjørnevej 10, 8382 Hinnerup
Her vises henholdsvis venstre menu for en redaktør og en administrator. Det
er administratormenuen (den lange) til venstre. Hvis du holder musen hen
over et af værktøjerne vises en lille besked, der fortæller hvad værktøjet bru-
ges til.
Overskriften ”Web” i menuen kaldes et hoved-modul og modulerne under
det kaldes sub-moduler.
4.4 Sidetræet
Alle moduler under ”Web” hoved-modulet har en todelt visning i indholds-
rammen – Sidetræet til venstre (1) og modulindholdet vedrørende en side fra
Sidetræet til højre (2).
Sidetræet kan foldes ud ved at klikke på plus- og minus ikonerne (3). Det
virker fuldstændig som mapper på din egen computer. Du kan faktisk be-
tragte sidetræet som en mappestruktur, hvori websiderne er organiseret i et
hierarki med hovedsider, undersider, under-undersider osv.
Figur 5: Sidetræet.
4.5 Titler og ikoner
Den næste vigtige ting du skal vide om Sidetræet er, at du kan klikke på
både side-ikonet og sidetitlen i Sidetræet – og at det gør en forskel!
12 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Hvis du klikker på sidetitlen (teksten) vises den aktive sides indhold i den
store højre ramme. Nu kan du ændre i selve teksten med mere.
Figur 6: Selve siden indhold vises i højre ramme.
I dette tilfælde er det Side-modulet, der er aktivt, og du får så vist sidens
indhold i den højre ramme. Herfra kan du redigere osv. Det vil vi snart ven-
de tilbage til.
Hvis du i stedet for at klikke på titlen klikker på sidens ikon, dukker en lille
kontekst-afhængig menu op.
Bemærk:
Hvis du bruger en ældre browser
kommer menuen ikke frem i
nærheden af ikonet. I stedet bli-
ver den vist i topramme.
Desuden: Hav tålmodighed –
der kan gå nogle sekunder før
menuen viser sig!
I rulle-ud-menuen kan du vælge
muligheder som relaterer sig til
den side du har valgt! For de
flestes menupunkters vedkom-
mende kan du sikkert selv regne
ud, hvad punkterne dækker over.
Figur 7: Klik-menu udfoldet.
4 TYPO3 – det grundlæggende 13
Typovizion, Tjørnevej 10, 8382 Hinnerup
4.6 Venstre menu / værktøjer
I dette eksempel kan du se de værktøjer, der normalt vil være synlige for en
TYPO3 redaktør. Men som sagt er det administrator, der konkret bestem-
mer, hvad en ”bruger” må se og ikke se.
Værktøjer i Web-menu og Filer
1. Side (Sideindhold), som du bruger, når du vil
redigere sideindholdet. Sideværktøjet bruger
du næsten hele tiden.
2. Vis, viser siden som den ser ud i Frontend.
3. Liste, der viser alle de indholdselementer
som siden indeholder. Bruges mest hvis man
vil bytte rundt på elementer eller lignende.
4. Filliste. Det er her billeder og grafik, der er
indsat på siden gemmes. En slags filarkiv.
4.7 Skjul Sidetræ
Hvis du har en lille skærm, kan det være svært at få plads til ”det hele”. Du
kan med et museklik henholdsvis skjule og vise Sidetræet.
Figur 8: Du kan skjule Sidetræet, så du får mere plads.
14 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Et museklik på den lille sorte pil i den
lodrette streg henholdsvis skjuler og vi-
ser Sidetræet, så du får mere plads og en
mere overskuelig skærmside.
4.8 Øvelse: Log ind
Nu er det langt om længe din tur til selv at arbejde med TYPO3. Du skal nu
på egen hånd prøve følgende i TYPO3 Backend.
1. Gå til den web-adresse i din internetbrowser der giver dig mulighed
for at logge ind i TYPO3 Backend.
2. Log ind med dit Brugernavn og Kodeord.
3. Nu kommer et spørgsmål:
a. Siderne i Sidetræet afspejler menustrukturen i Frontend, men
er alle sider, du kan se i Backend, nu også vist i Frontend?
b. Hvis der er forskel (altså hvis ikke alle sider i Backend vises
i Frontend), hvad tror du så det skyldes?
c. Noter dig hvilke ”sider” og ”ikoner” i Sidetræet, der ikke vi-
ses i Frontend?
5 Siden og sidens elementer 15
Typovizion, Tjørnevej 10, 8382 Hinnerup
5 Siden og sidens elementer
Sidetræet afspejles i webstedets menu hierarki, men hvordan er indholdet på
den enkelte side organiseret?
5.1 TYPO3 – et elementbaseret CMS
TYPO3 er et ”elementbaseret” CMS ligesom de fleste CMS systemer i øv-
rigt. Det vil sige, at den enkelte side er opbygget af en række små indholds-
elementer. Det giver en høj grad af fleksibilitet. Den alternative fremgangs-
måde til et elementbaseret CMS er en mere fastlåst tilgang, hvor den enkelte
side har et fast antal indholdsområder – fx et til overskrift, et til brødtekst og
et til billeder.
Det kan TYPO3 også, men sandsynligvis er det ikke det du ønsker dig. En
side i TYPO3 er sat sammen af flere sideindholdselementer, der kan være
forskellige typer. Det giver en meget fleksibel side struktur!
Figur 9: Indholdselementer på en side i TYPO3.
Herover er vist en enkelt side i TYPO3, der består af flere indholdselemen-
ter af forskellige typer (her er det henholdsvis indholdselementer af typen:
Tekst m/billede og nyheder, der er anvendt, men der er mange andre mulig-
heder).
16 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
5.2 Forskellige måder at lave TYPO3 skabeloner på
Hvis siden og sideelementerne ser anderledes ud i din TYPO3 Backend, så
skyldes det at TYPO3 er meget konfigurerbar og fleksibel. Det er let at ind-
sætte andre ikoner og i det hele taget ændre udseendet i Backend. Men det
kan også skyldes, at der er flere måder at lave TYPO3 skabeloner på.
Skærmbilledet på foregående side stammer fra en Typo3 Backend, hvor ska-
belon er udviklet på den traditionelle måde. Her er indholdet opdelt på en
eller flere af lodrette spalter, der er til rådighed (Venstre, Normal, Højre og
Border). I hver spalte kan der være fra en til mange indholdselementer. Dog
er de ”spalter”, der ikke kan bruges i designet, som regel skjult, så du kun
ser de spalter, du rent faktisk kan bruge.
Den anden måde at udvikle skabeloner på kaldes TemplaVoila. Med TV er
indholdet ikke fastlåst i en fast spalteopbygning. Det giver nogle nye og lidt
friere muligheder for design. Metoden er især rigtig god, hvis den måde ind-
holdselementerne vises på i Backend ligner opbygningen i Frontend.
Figur 10: Hjemmeside opbygget med TemplaVoila.
Her er et skærmbillede fra en TYPO3 Backend, hvor TemplaVoila metoden
er brugt, men det er stadig den traditionelle spalteopbygning, der er anvendt.
Her kunne den traditionelle metode lige så godt være brugt.
6 /Ret et eksisterende indholdselement 17
Typovizion, Tjørnevej 10, 8382 Hinnerup
6 Ret et eksisterende indholdselement
Du redigerer et eksisterende indholds-
element ved med musen at klikke på
”blyanten”. Du kan faktisk også klikke
i selve teksten eller på knappen ”Redi-
ger i tekst …”. Alle 3 muligheder gør
det samme.
Det er også den samme fremgangsmå-
de, du bruger i både TemplaVoila og
den traditionelle måde at udvikle ska-
beloner på.
Figur 12: Billedet her er fra en TemplaVoila installation.
Herefter kommer du en boks frem med nogle faneblade. Antallet af fane-
blade afhænger af, hvilket indholdselement, du har valgt.
Herunder er valgt et indholdselement af typen ”Tekst”. Under det første fa-
neblad (”Generelt”), kan du bl.a. ændre overskriften, og under det andet
faneblad (”Tekst”), finder du ”tekstbehandleren”, hvor du kan indtaste brød-
teksten.
Figur 13: Indholdselement af typen tekst.
Figur 11: Redigeringsblyanten.
18 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Under fanebladet Generelt kan du få vist flere eller færre valgmuligheder.
Figur 14: Vis sekundære muligheder.
Det styrer du med valgboksen ”Vis sekundære muligheder”, som du finder
helt i bunden af boksen.
Ofte er det en god ide at skjule de mange ekstra muligheder. Det giver et
bedre overblik.
6.1 HTML Area editor
Den editor der i dag er indbygget i TYPO3 hedder HTML Area. Har du en
ældre TYPO3 version, vil din editor hedde noget andet. Fælles for alle ver-
sioner er, at brugerfladen ligner den, vi kender fra en almindelig tekstbe-
handler.
Et stort problem for de ældre editorer var, at de brugte nogle ”Microsoft”
funktioner, der kun fandtes i Internet Explorer browseren. Hvis du ville re-
digere TYPO3 sider igennem Netscape eller Mozilla Firefox browserne, var
du nødt til at indtaste formateringer som ren HTML kode.
På den led er HTML Area et stort fremskridt. Her er du ikke bundet til Inter-
net Explorer, men kan f.eks. bruge den udbredte Mozilla Firefox browser.
6 /Ret et eksisterende indholdselement 19
Typovizion, Tjørnevej 10, 8382 Hinnerup
6.2 HTML Area: Basic, Typical og Show Off
HTML Area er meget konfigurer bar. Ved installationen kan man vælge
mellem tre konfigurationer, men der er mange andre tilpasningsmuligheder:
Basis, hvor der kun er 2 mulighed for at formatere teksten.
Figur 15: HTML Area - Basis konfiguration
Konfigurationen Typical med mange formateringsmuligheder.
Figur 16: HTML Area - Typisk konfiguration.
Konfigurationen Demo. Hvor det hele er slået til.
Figur 17: HTML Area - demo configuration.
20 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Her er vist de tre standard konfigurationsmuligheder i TYPO3 Extension
Manager. Du skal have administratorrettigheder for at ændre konfiguratio-
nen!
Figur 18: Extension manager med de 3 konfigurationer.
Men i virkeligheden ønsker de fleste nok en konfiguration, der er et sted
midt imellem de tre standard muligheder. Faktisk kan HTML Area sættes
op, så hver bruger får sine egne indstillinger.
Herunder er vist en stump af en konfiguration i User TSConfig for HTML
Area, der skjuler nogle af de mange knapper. Det skal du nok igen lige have
administrator til at gøre.
RTE.default.blindImageOptions = magic
RTE.default.hideButtons = blockstylelabel, blockstyle, textstylela-
bel, textstyle, fontstyle, fontsize, formatblock, blockquote, in-
sertparagraphbefore, insertparagraphafter, textcolor, bgcolor,
textindicator, showhelp, underline
Og sådan ser en let tilpasset udgave af skrivefladen med kun de relevante
valgmuligheder tilbage, når ovenstående Typoscript konfiguration er indsat
på rette sted.
Figur 19: En tilpasset skriveflade i HTML Area
Desuden kan rækkefølgen og den måde som ikonerne vises på i teksteditor
tilpasses.
6 /Ret et eksisterende indholdselement 21
Typovizion, Tjørnevej 10, 8382 Hinnerup
6.3 Tekstformatering
I TYPO3 er skrifttyper, farver og størrelser normalt gemt og defineret i et
såkaldt Stylesheet. Det ser ikke pænt ud, hvis siderne har forskellige skrift-
typer og alt for mange forskellige størrelser og farver.
Derfor er det en meget bedre ide at ændre skriftformater i Stylesheet i stedet
for igennem editor. Bed administrator eller webmaster ændre det for dig, det
er normalt ikke noget en almindelig bruger- eller redaktør har lov til.
Figur 20: En label fortæller, hvad værktøjet gør.
Hold musen hen over et af ikonerne, og du får en lille label på skærmen, der
fortæller, hvad værktøjet bruges til. Desværre er hjælpeteksten ikke altid
oversat til dansk.
Værktøjerne til tekstformatering er de gængse fra en moderne tekstbehand-
ler, og du bruger dem, som du plejer.
Et praktisk tip:
Fjern formatering fra Word værktøjet kræver måske en lille ekstra
forklaring.
Figur 21: Fjern formatering ikonet.
Selv om det er let at indtaste teksten direkte i HTML Area, så vil mange
vælge først skrive teksten i f.eks. et Word dokument.
Du har så sikkert også erfaret, at
hvis du klippe/klistrer tekst fra et
Word dokument, får du noget
ekstra med, plus du ikke efterføl-
gende kan formatere teksten.
Det skyldes, at der ved en kopi og
efterfølgende indsæt af tekst
kommer nogle ekstra Word koder
med.
Dem kan du fjerne med ”Fjern
formatering” værktøjet.
Figur 22: Fjern formatering valgmuligheder.
22 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Et andet praktisk tip: Et nyt afsnit dannes ved et tryk på Enter tasten, men
den nye linje/det nyt afsnit danner meget luft til teksten ovenover.
Figur 23: Et nyt afsnit skaber meget luft.
Hvis du ved et linjeskift trykker Shift + Enter, får du et såkaldt blødt linje-
skift, der danner meget mindre luft til teksten ovenfor.
Figur 24: Her er vist blødt linjeskift.
6 /Ret et eksisterende indholdselement 23
Typovizion, Tjørnevej 10, 8382 Hinnerup
6.4 Øvelse: Grundlæggende tekstformatering
Så er det din tur. Indtast teksten du ser herunder (husk også © 2009) og
formater den, så den står præcist som vist her under.
Figur 25: Her er brugt både hårdt og blødt linjeskift.
6.5 Øvelse: Fjern formatering
Her er en lille ekstra øvelse, som du kan løse, hvis du har tid.
Indsæt indholdet fra et Word dokument i et TYPO3 tekst indholdselement
(alternativt) et stykke af en HTML side (f.eks. en tabel). Bemærk hvor me-
get ekstra ”kode”, der kommer med. Du kan se den ekstra kode og evt. fejl
ved at vise siden i browser.
Prøv efterfølgende at rydde op med Fjern formatering værktøjet.
24 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
6.6 Alternativ Overskrift, Ramme og Før og Efter
For en stund vender vi tilbage til de ekstra muligheder, der gemmer sig un-
der fanebladet Generelt.
Figur 26: Muligheder under faneblad Generelt.
På skærmbilledet ovenfor er alle muligheder vist eller slået til. På din egen
TYPO3 installation, kan nogle af mulighederne være valgt fra. Husk også at
valgboksen ”Vis sekundære …” skal være slået til.
Før og Efter behøver næppe den store forklaring. De to funktioner skaber
”luft” henholdsvis før eller efter indholdselementet. Afstanden skal angives
i pixel og indtastes som et tal mellem 1 og 50.
Ramme bruges til at sætte en ramme og eventuelt en
farvet baggrund omkring et indholdselement.
Her skal der igen være gjort noget først under instal-
lationen for at denne mulighed er til stede. Udseen-
det af rammer og farver er normalt tilpasset farverne
på hjemmesiden.
Der er indbygget to mulige ramme layout, som du kan vælge imellem. Beg-
ge ramme-design formateres i et Stylesheet, og de kan udformes (næsten)
præcist som du ønsker det. Her er definitionen af rammen på næste side.
.csc-frame-frame1 {border: 1px solid #FFFFFF; padding: 10 10
10 10px; background-color: #EEEEEE;}
6 /Ret et eksisterende indholdselement 25
Typovizion, Tjørnevej 10, 8382 Hinnerup
Her er en webside vist med Ramme 1
valgt på et enkelt indholdselement.
På denne webside er Ramme 1 designet
til at have en mellem grå baggrund og en
tynd hvid ramme (den er næppe synlig
her).
For at give pænt luft omkring indholdet
er margin i både top, bund og i højre
venstre side sat til 10pixel. Rammer er
gode til at fremhæve et tekstafsnit, der er
vigtigt.
Som standard er alle overskrifter forsynet med et bestemt udseende, der er
defineret i et Stylesheet. Det er normalt designer, der bestemmer overskrifter
og i det hele taget tekstens udseende.
Det kan godt blive lidt ”stramt” og måske også lidt kedeligt. Derfor giver
TYPO3 nogle layout varianter, så redaktøren har mulighed for at variere
overskrifternes udseende en lille smule. Det er igen noget, der skal være
gjort og slået til ved installationen.
Lidt forskellige udseender af overskrifter giver ligesom med rammer spæn-
ding og dynamik på hjemmesiden. Men der går en hårfin grænse mellem
dynamik og anarki, så for mange tekst- og overskrift variationer er sjældent
godt.
Du kan under type vælge mellem de titelvarianter (Layout 1 – 5), der er til
rådighed. Hvordan overskriften skal se ud med Layout 1 til 5 er helt indivi-
duelt, og er defineret ved installation og opsætning af TYPO3.
Figur 27: Overskrift Layout 1-5
Det kan f.eks. være en god ide at defineret et overskrifts layout til henholds-
vis toppen af siden og til afsnitsoverskrift.
26 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
6.7 Øvelse: Afprøv mulighederne med Ramme og Layout
Det er nu din opgave at oprette et indholdselement af typen Text, og afprøve
overskriftmulighederne med Layout 1 -5 samt finde ud af, hvordan hen-
holdsvis Ramme 1 og 2 ser ud.
7 Links 27
Typovizion, Tjørnevej 10, 8382 Hinnerup
7 Links
Det er så at sige links eller som det mere korrekt hedder hyperlinks, der for-
binder hele det vidtstrakte internet.
7.1 Historien bag links
Teorien bag hyperlinks er ældre end man umiddelbart skulle tro. Du skal
faktisk ca. 70 år tilbage i tiden for at finde oprindelsen til hyperlinks.
I midten af 1940 skrev en amerikansk biologiprofessor med navnet Van-
nevar Bush en artikel med titlen As We May Think, The Atlantic Monthly.
Her introducerer Vannevar Bush for første gang ideen om associative vi-
densspring. Et associativt vidensspring er teorien bag det, vi i dag kender
som links, altså ideen om at indhente supplerende relevant information til
hovedteksten – ligesom det det system af links, vi bruger i dag. Da Vanna-
var Bush skrev artiklen var computerne stort set ikke eksisterende (kun i
form at kodebrydere), så ideen kunne den gang ikke omsættes i praksis.
Først i slutningen af 80'erne begynder Vannavar Bush teori at finde praktisk
anvendelse. Fysikeren Tim Berners-Lee fra CERN udviklingen i slutningen
af 1980érne af et ”system”, der var baseret på hyperlinks.
Systemet var (kun) tænkt som en måde hurtigt at dele videnskabelige infor-
mationer mellem de ansatte ved CERN i Schweiz på. Berners-Lees system
blev en stor succes, der indenfor et årti blev udvidet til at omfatte hele ver-
den. Resten af historien kender du.
7.2 Typer af link
Der er forskellige typer af link, der bruges i forskellige sammenhænge.
Interne link
Link der peger på en webside på samme websted som linket selv.
Eksterne link
Link til fremmede websteder. Et eksternt link åbnes normalt i et nyt
browservindue for at markere, at der er ekstern information, der hen-
tes.
Desuden er der disse linktyper, der måske ikke kan kaldes særegne linkty-
per: E-mail link og link til filer.
28 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
7.3 Opret links i TYPO3
Editoren i TYPO3 er så smart, at hvis du indtaster en adresse, der åbenlyst
er et link, ja, så laver TYPO3 teksten til et link.
Hvis du i editor indtaster f.eks.:
www.typovizion-kurser.dk eller [email protected] efterfulgt af Enter, så
vil teksten blive gjort til et link. Det er let, men som regel ønsker vi selv at
bestemme linkteksten.
Vi lægger ud med at oprette et simpelt link til en anden side i det samme
websted. Tilsyneladende er det ikke muligt at lave links (ikonet er gråt)?
Men når du markerer teksten, der skal være et link, bliver link ikonet aktivt.
Klikker du med musen på link ikonet kommer denne boks frem.
7 Links 29
Typovizion, Tjørnevej 10, 8382 Hinnerup
Bemærk, det er kun den første halvdel af boksen, du ser ovenfor.
1. De 4 faneblade viser de mulige linktyper. Side (1) er et internt link.
2. Mål, her bestemmer du om linket skal åbne siden i samme eller et
nyt vindue. Et internt link skal selvfølgelig åbne i samme browser-
vindue!
a. Top: Linket åbner i samme browservindue
b. Nyt vindue. Linket åbner i et nyt vindue.
3. Titel. Når musen føres hen over et link (uden at der klikkes), vises en
lille tekst på skærmen i Frontend. Enten skal teksten slettes, eller der
skal indtastes en mere relevant tekst end teksten ”Opens internal….”
Vælg den interne side, der skal linkes til
Længere nede i boksen ”Indsæt/ret link” vælger du den side, der skal
linkes til. Da det er et internt link, får du hele sidetræet vist. Klik på ti-
telteksten på den side, der skal linkes til.
30 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
7.4 Opret eksterne links
Eksterne link (link til fremmede websteder) oprettes næsten som interne
links.
Vælg fanebladet Ekstern URL.
1. URL
Indtast den fulde webadresse til den eksterne siden, der skal linkes til
(fuld webadresse er f.eks. htttp://www.jp.dk)
2. Mål
Et eksternt link skal åbne i et Nyt vindue?
3. Titel
Fjern enten teksten eller indtast en mere relevant tekst.
7.5 E-mail link, fjern link og link til fil
Fanebladet Fjern link, giver dig mulighed for at slette et link, og du opretter
E-mail link så meget lig eksterne links (Ekstern URL), at jeg overlader det
til dig selv at afprøve det.
Hvis du vil give besøgende på hjemmesiden mulighed for at downloade en
fil, så er der flere muligheder. Du kan linke direkte til filen gennem et link,
eller du kan anvende indholdselementet Fillinks, som beskrives senere.
Hvis du linker til et f.eks. et pdf-dokument, sker der følgende, når en besø-
gende klikker på dit link:
7 Links 31
Typovizion, Tjørnevej 10, 8382 Hinnerup
1. Hvis brugeren, der ønsker at downloade dit Pdf dokument, har
Acrobat Reader installeret på egen computer åbnes dokumentet.
2. Men hvis brugeren derimod ikke har Acrobat Reader installeret eller
versionen er for gammel etc., så får brugeren mulighed for at hente
filen. Der er derimod som sagt ikke er et program, der giver mulig-
hed for at læse pdf-dokumentet.
Det samme gælder et Word dokument. Du skal også vide, at hvis du linker
til et Word dokument, så kan der ændres i teksten.
Opret link der downloader fil
1. En pdf-fil eller et Word-fil (skal) selvfølgelig åbne i ”Nyt vindue”.
32 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
2. Hent fil fra egen computer.
3. Eller hvis dokumentet allerede ligger på webserver, kan du direkte
linke til det.
7.6 Øvelse: Opret link
Nu er det din tur til at oprette et eller flere interne links, eksterne link, og e-
mail link.
7.6.1 Øvelse: Link til pdf-dokument
Opret også et link der linker til og åbner et pdf-dokument. Link til et af de
pdf-dokumenter, der allerede ligger Filområdet. Senere vil du få lejlighed til
at hente og linke til filer, der er på din egen computer.
7.7 Øvelse: Bogmærke link
Her er en lidt sværere link øvelse for de hurtige og de der kender lidt til
hjemmesider i forvejen. Du har måske hørt om ”bookmark links”. Det er et
link, der ikke blot viser en ny side, men som også går direkte til et specielt
afsnit på siden. Det er nyttigt, hvis siden er lang.
Prøv om du selv kan finde ud af, hvordan det gøres. Se skærmbilledet her-
under, der gerne skulle give dig en ide om, hvordan du gør. Opret dit bog-
mærke link til en ”lang” side.
7 Links 33
Typovizion, Tjørnevej 10, 8382 Hinnerup
34 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
.
8 Indsæt billeder 35
Typovizion, Tjørnevej 10, 8382 Hinnerup
8 Indsæt billeder
Det er godt at have billeder på hjemmesiden. Dels ”pynter” billeder, og som
man siger, ”så fortæller et (godt og relevant) billede mere end 1000 ord”.
8.1 Billedbegrænsninger på en hjemmeside
Men først er der nogle begrænsninger for billeder på en hjemmeside og nog-
le specielle TYPO3 begrænsninger, som du skal være klar over.
1. Billeder på en hjemmeside skal have formatet gif, jpg eller png.
2. En computerskærm kan kun vise mellem 72 og 105 dpi.
Alt for gode billeder er spild. En computerskærm kan alligevel kun vise
billederne i en ringe kvalitet. Desuden tager det lang tid før brugeren på
hjemmesiden får billedet frem, hvis billedet er for stort.
De ting der bestemmer, hvor meget et billede fylder i KB/MB er dels
størrelsen (længden/bredden) og så hvor mange dpi, det består af.
3. I TYPO3 er der en max bredde på billeder.
Som standard er den maksimale billedbredde i TYPO3 sat til 800px,
men webmaster/administrator har måske sat det yderligere ned.
Det vil sige, hvis du lægger et foto taget med et digital kamera på måske
2500 x 1500 px eller bedre ind i TYPO3, så vil TYPO3 automatisk æn-
dre størrelsen til den maksimale bredde (og en tilsvarende højde).
4. TYPO3 har en maksimal filstørrelse.
Den maksimale filstørrelse i en standard TYPO3 installation er ca.
10MB. I ældre TYPO3 versioner, er det kun 1 MB. Den størrelse kan
igen være ændret af webmaster/administrator.
5. Nogle TYPO3 webhoteller tillader ikke at du bruger masser af plads til
filer og billeder med mere.
Selv om du måske har et webhotel med fx 60MB plads, så regner nogle
webhoteller selve TYPO3 med i den størrelse. TYPO3 fylder i sig selv
ca. 40 MB, hvilket ikke levner megen plads til dine filer og billeder.
36 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
8.2 Opret nyt element med billede
Du kan enten ændre typen på et eksisterende indholdselement. Vælg Redi-
ger sideegenskaber og skift Type til Tekst m/ billede eller Billede.
Eller opret et nyt Indholdselement og vælg et indholdselement med billeder i
listen. Her er der 2 muligheder Tekst m/billede og Kun billeder.
Bemærk teksten du ser her er standard tekst og ikoner. Teksten og ikoner
kan være ændret af det firma, der har udviklet dit TYPO3 websted.
8.3 Indholdselement: Tekst m/billede
Der er under det nye faneblad med navnet Media, du kan du indsætte bille-
der og angiver alle billedegenskaberne.
8 Indsæt billeder 37
Typovizion, Tjørnevej 10, 8382 Hinnerup
Her er fanebladet Media valgt og alle billedmulighederne vist. Faktisk er der
flere valgmuligheder end viste, men de omtales senere.
Hvis du ikke har de samme muligheder på din egen TYPO3 installation, kan
det skyldes, at nogle af mulighederne er valgt fra af administrator eller, du
ikke har sat ”kryds” i valgmuligheden ”Vis sekundære …”.
Der er mange valgmuligheder. Her er en lille forklaring på de vigtigste valg.
1. Find filer
38 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Udpeg det eller de billeder, der skal sættes ind på siden. Find filer
ser automatisk efter billeder i dit Filliste område, men du kan både
bruge de billeder, du allerede har liggende eller du kan hente helt
nye fra harddisken på din egen computer.
Her ligger billederne i mappen med navnet billeder, så der er styr på
dem. Du lærer senere, hvordan du selv opretter nye mapper.
De billeder du henter lægges i den mappe, der er åben og aktiv. Så
udpeg mappe før, du henter nye billeder.
2. Gennemse
Du føres direkte til din egen computer. De billeder, du henter på
denne måde ryger i en stor ”kasse”, hvor du ikke senere kan finde
dem igen. Så brug Find filer i stedet.
8 Indsæt billeder 39
Typovizion, Tjørnevej 10, 8382 Hinnerup
3. Position
Hvordan skal billede/billeder placeres i forhold til hinanden.
4. Kolonner
Kolonner er en smart funktion, der gør det muligt at sætte billeder
pænt og ordentligt op i en slags ”tabel struktur”.
Herunder er der valgt henholdsvis 2 og 3 kolonner, og der er i alt 4
billeder sat ind på siden.
5. Kant
Skal der en kant (farvet ramme) om billedet. Du kan ikke her selv
bestemme farven og bredden af ramme.
6. Bredde/højde
Bredden og højden af billedet kan ændres, men ikke billedets læng-
de/bredde forhold.
7. Billedlinks
Åbner samme vindue som når du laver links og med samme mulig-
heder.
8. Klik forstør
Igen en smart TYPO3 funktion. Hvis du formindsker billedet ved at
angive en mindre størrelse end billedets faktiske størrelse (Bredde og
højde), vil billedet med Klik forstør åbnes i fuld størrelse ved et mu-
seklik.
De øvrige valgmuligheder (der ikke er vist på skærmbilledet):
Der er endnu flere valgmuligheder for indsættelse af billeder i TYPO3. Ofte
”ryddes” der lidt ud i muligheder ved installationen, for at gøre det hele en
lille smule mere overskueligt og brugervenligt.
9. Billedtekst
Indsæt en billedtekst under billede. Hvis der er flere billeder indsæt-
40 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
tes billedteksten til hvert enkelt billede på en linje for sig.
10. Titeltekst
Titelteksten er den lille tekst i den gule rektangel, der kommer frem,
når musen føres hen over billedet. Hvis teksten giver relevant infor-
mation om billedet, er det en god ide at bruge titeltekster.
11. Alternativ tekst
Den ”alternative tekst” eller ”alt” teksten, som den normalt kaldes
finder du siden HTML kode, og den bruges blandt andet af søgema-
skiner som Google med flere.
12. Billedvalg
Billedvalg kan tilføje nogle simple effekter til billeder. I rigtigt man-
ge TYPO3 installationer, er denne mulighed skjult.
8 Indsæt billeder 41
Typovizion, Tjørnevej 10, 8382 Hinnerup
Du kan rotere billeder, gøre dem lysere mørkere eller sætte billeder
på hovedet.
42 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
8.4 Øvelse: Indsæt billeder
Du har nu nogle små øvelser med billeder. For den hurtige eller den, der
kender TYPO3 lidt i forvejen, er der lidt ekstra øvelser.
8.4.1 Billede under tekst
Først skal du indsætte et billede under et lille
tekstafsnit.
Opret et nyt element af typen Tekst m/billede
(eller du kan ændre Type på et eksisterende
indholdselement)
Indtast et par linjers tekst og indsæt et passen-
de billede under teksten, der har samme bred-
de som teksten
Tilpas bredden af billedet. Her er du sikkert
nødt til at prøve dig frem.
8.4.2 Klik forstør billede
Dernæst skal du indsætte et billede i venstre del af tekstblokken og gøre
billede til et ”Klik forstør billede” af en passende størrelse.
I eksemplet er billedet 150px bredt. Indsæt en tekst der fortæller den besø-
gende på hjemmesiden, at man skal klikke på billedet for at se det i fuld
størrelse.
8 Indsæt billeder 43
Typovizion, Tjørnevej 10, 8382 Hinnerup
8.4.3 Øvelse: Billeder i kolonner
Med valgmuligheden ”Kolonner” kan du sætte billederne pænt og systema-
tisk op. Bemærk dog at billederne i samme kolonne (linje) linje skal have
nogenlunde samme bredde/højde forhold, hvis du ønsker et pænt resultat.
8.4.4 Øvelse: Gør billede til et link
Prøv også om du kan gøre et billede et billede til et link. Hvad skal du angi-
ve for at linke henholdsvis til et internt link til side på samme websted og et
eksternt link til et fremmed websted?
8.4.5 Øvelse: Billedtekst
Kan du selv regne ud, hvordan du får den rigtige billedtekst sat på de enkel-
te billeder, så du får et resultat som vist herunder?
44 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
.
9 Filer og Filliste 45
Typovizion, Tjørnevej 10, 8382 Hinnerup
9 Filer og Filliste
Hoved-menupunktet Filer med sub-menu Filliste er TYPO3´s filarkiv be-
regnet for billeder, filer med mere. Administrator har den fulde adgang til
hele Filliste (1), som vist herunder.
Men hvis alle kunne se og ændre i alle filer, kunne det hurtigt blive lidt kao-
tisk. Derfor begrænser man normalt redaktørens Filliste (2) til kun en lille
del af det totale filområde.
46 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
I Filliste området gemmes billeder og grafik med mere, hvis du har fulgt
anbefalingen i forrige afsmit. Med ”Vis miniaturer”(3) valgmuligheden
vises en lille miniature af billederne i mapperne. Meget praktisk, når du skal
genfinde et billede.
Det er også muligt direkte at hente og lægge filer op i Filliste området (1)
samt oprette nye mapper og filer (2). Det sidste er meget anbefalelsesvær-
digt.
Opret et hierarki af mapper, så du har godt styr på dine billeder og filer, og
ved hvor de ligger. Giv mapperne sigende navne.
9.1 Øvelse: Opret mappe og hent filer
Gå ind i dit Filliste område og (gen)find de billeder, du tidligere har indsat
på en af websiderne. Hvor finder du dem?
Opret herefter en ny mappe til dokumenter og hent (upload) et par Pdf filer
til mappen. Dem skal vire bruge lidt senere.
10 Listevisning 47
Typovizion, Tjørnevej 10, 8382 Hinnerup
10 Listevisning
Med værktøjerne i hoved-menupunktet Web og under-menupunktet Side
kunne vi løse de fleste side- og sideindholds-relaterede opgaver.
Liste derimod kan administrere både sider, sideindholdselementer, skabelon-
poster, domæneposter, brugere og grupper, gæstebogsemner og alt andet
som TYPO3 kan håndtere! Igen er de elementer du kan se afhængigt af de
rettigheder, der er tilknyttet din brugerkonto
10.1 Liste modulet
Hvis du slår "Udvidet visning" til, får du et helt panel med små fikse knap-
per frem som er genveje, der kan bruges i stedet for at aktivere klik-menuen
hele tiden. Med List ser du både alle indholdselementer, men du kan også
spare en del museklik.
Husk at ”udvidet visning” skal være valgt for at se alle mulighederne.
10.2 Øvelse. Orienter dig i Liste visning
Prøv at lege lidt med nogle af knapperne her! Hvis du holder musen hen
over et af ikonerne, kommer en lille ”tekst” frem, der fortæller, hvad værk-
tøjet bruges til.
48 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
.
11 Brugerindstillinger 49
Typovizion, Tjørnevej 10, 8382 Hinnerup
11 Brugerindstillinger
Der er selvfølgelig nogle muligheder for individuel indstillinger af de for-
skellige brugerkonti.
I venstre menu under hovedpunktet User tools
finder du Indstillinger.
Klikker du på teksten Indstillinger, kommer en
boks frem, der giver lidt mulighed for tilpasning.
Først og fremmest kan du knytte et navn og en mailadresse til din bruger-
konto (1) og (2), men du kan også vælge sprog for TYPO3 Backend.
Ud over muligheden for Dansk og Engelsk som vist her, er der mange andre
sprog at vælge imellem. Sprogmulighederne bestemmes af administrator.
50 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Som standard åbner TYPO3 Backend med at vise ”Om moduler”. Her kan
du ændre ”åbningen” til f.eks. Web -> Side, så du sparer nogle museklik ved
hver opstart.
Hvis du har ”is i maven” kan du slå rekursiv sletning (2) og kopiering (1) til.
Rekursiv betyder at du kan slette og kopiere mange sider på én gang. Her er
det selvfølgelig ”sletning”, der er det farlige.
11.1 Øvelse: Personlig opsætning
Som du sikkert allerede har gættet, så er det din tur til at ændre den ”Per-
sonlige opsætning” og tilføje dit eget navn og e-mailadresse
Find den ”åbning”, der passer dig bedst, og tilpas rekursiv kopiering og
sletning. Men, undlad venligst at ændre dit kodeord.
12 Fillinks 51
Typovizion, Tjørnevej 10, 8382 Hinnerup
12 Fillinks
Du bruger Filliste til at opretter en liste af filer, som kan downloades på
hjemmesiden. Linkteksten (teksten der vises til højre for ikonet) er navnet
på filen. Bemærk dog, at hvis filnavnet indeholder et æ, et ø, et å eller et
mellemrum, bliver det ændret til henholdsvis et ae, oe, aa og _ (underscore)
i Fillinks. Herunder er listen vist, som den kan se ud i en browser. Udseen-
det og farver ændres i et Stylesheet, så udseendet kan i din TYPO3 installa-
tion være lidt anderledes.
Fillinks er god til automatisk at genkende forskellige typer af filer, og ind-
sætte et tilsvarende fil-ikon. De filer Fillinks kan genkende er Pdf, Word
dokumenter, Open Document dokumenter, Excel, gif, jpg osv. – alle de al-
mindelige fil-typer.
Grunden til at ikonerne for pdf og Word med flere er anderledes end de iko-
ner du kender fra Microsoft Word eller Adobe skyldes ophavsretslige for-
hold
12.1 Opret et element af typen Fillinks
Fillinks slås til ved at oprette et nyt indholdselement på en side i TYPO3
Backend. Du finder Fillinks på listen over mulige indholdselementer.
Herefter vises den sædvanlige ”boks” ved oprettelsen af et nyt element. Un-
der fanebladet ”Generelt”, kan du give indholdselementet en overskrift.
52 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Hvis du derimod vælger fanebladet med titlen ”Fillinks”, får du disse mere
relevante valgmuligheder.
Her er lidt uddybende forklaring til de mange valgmuligheder:
1. Find filer (til listen).
Ligesom ved billed-indholdselementer leder TYPO3 automatisk ef-
ter filer til Fillinks i Filliste området. Hvis filerne ikke allerede er
hentet ind i Filliste, har du mulighed for at hente dem fra din egen
computer.
2. Læs fra sti.
En anden mulighed er at angive stien til og navnet på den mappe fi-
lerne ligger i. Her skal du angive den fulde sti. Denne mulighed kan
ligesom andre valgmuligheder være skjult i din TYPO3 installation.
12 Fillinks 53
Typovizion, Tjørnevej 10, 8382 Hinnerup
3. Layout
Vælg mellem forskellige foruddefinerede listevisninger.
4. Vis filstørrelse.
Vis størrelsen af de enkelte filer på hjemmesiden. Det er en god ide,
så man ved om det vil tage 5 min eller timer at hente filen.
5. Beskrivelse.
Her kan du give en kort beskrivelse af, hvad filerne indeholder. Be-
skrivelsen for hver enkelt fil skal stå på sin egen linje.
12.2 Øvelse: Opret et indholdselement af typen Filliste
Nu er det din tur. Du skal oprette et indholdselement af typen Fillinks på en
af dine sider.
Du skal også afprøve de forskellige layout, og bemærke hvordan de forskel-
lige visninger ser ud. Prøv også at indsætte forskellige fil-typer, og se om
TYPO3 kan genkende filerne?
12.2.1 Øvelse: Filliste med ”læs fra sti”
For den hurtige (og skrappe) er her en ekstra lille krølle på opgaven. Du skal
lægge nogle filer i en mappe i Filliste områder og herefter finde den korrek-
te sti, som du efterfølgende skal indsætte i ”Læs fra sti”.
Kan du angive den sti til filerne, som du umiddelbart ser i din Filliste – eller
skal der mere til?
Du kan tjekke i Frontend, om du kan finde den korrekte sti.
Fortvivl ikke, hvis det ikke lykkes, for det kan være svært at finde rundt i
det komplicerede fil- og mappesystem på en server.
54 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
.
13 Mailformular 55
Typovizion, Tjørnevej 10, 8382 Hinnerup
13 Mailformular
Mailformularen er en nem måde at skabe lidt interaktion på hjemmesiden
på. Den består af nogle felter, hvor den besøgende i browseren kan indtaste
f.eks. sit navn og adresse, bestille brochurer, tilmelde sig arrangementer.
Ved et klik på Send besked sendes det indtastede til en forud angivet mail-
adresse. Du får en side på skærmen, der bekræfter at formularen er afsendt.
56 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Sådan ser den mail ud, der sendes til modtager af afsendte mailformularer.
Det er ikke en del af en standard TYPO3, men rigtig mange TYPO3 udvik-
lere vælger at tilføje en ekstra funktion, så det indtastede også sendes som
en kopi til ”afsender”, så man ved, hvad man har bestilt eller tilmeldt sig.
13.1 Eksempel på mailformular
Når du vil oprette en mailformular, skal du allerførst oprette et nyt indholds-
element på den side i TYPO3 backend, hvor mailformularen skal oprettes.
Under fanebladet Formular findes de nødvendige valgmuligheder. Start
med at indtaste Modtagers e-mail og klik herefter på det lille ikon i midten
til højre ved pilen, der får en lille formular-guide frem. Men gem først!
13 Mailformular 57
Typovizion, Tjørnevej 10, 8382 Hinnerup
Og sådan ser formular-guiden ud efter du har klikket den.
1. Type (hvilken type af felt ønsker du):
a. Linjefelt – felt med en tekst etikette og én linje til indtastning.
b. Tekstfelt – større felt med flere linjer til indtastning.
c. Selektor boks – en almindelig ”rulle-ud-menu”.
d. Knap – en almindelig ”radioknap”.
e. Afkrydsningsboks – en almindelig valgknap.
2. Betegnelse: Teksten foran feltet. Husk evt. ”:”.
3. Påkrævet: Skal feltet udfyldes før formular må sendes?
4. Gem. Vigtigt, felterne opdateres ikke ved før du gemmer!
Når du har gemt, har du mulighed for at angive længden af et felt,
hvor mange tegn der maksimalt må indtastes i feltet, og om der fra
starten evt. skal stå noget i felterne (Værdi).
58 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Her er de ekstra og nødvendige ekstra valg for at oprette en ”radio-
knap”. Husk altid at gemme (og opdatere) løbende, når du opretter
en mailformular.
5. Når du er færdig med første felt tilføjer du et nyt felt med
6. Du sletter et felt med
7. Og du ændrer rækkefølgen med ”op – ned” pilene.
13.2 Øvelse: Opret mailformular
Du skal nu oprette et indholdselement og en mailformular som den du ser
herunder med to tekstfelter og radioknap.
Når du er færdig med opsætnin-
gen, skal du selvfølgelig teste
formularen.
Send mailformularen til dig selv
på en Hotmail eller lignende kon-
to (en mailkonto, du kan se mail
på under kurset).
13 Mailformular 59
Typovizion, Tjørnevej 10, 8382 Hinnerup
13.3 Øvelse: Takkeside
Formularen du lige har oprettet har en alvorlig mangel. Når man sender til-
meldingen sker der ikke rigtigt noget. Brugeren får blot vist formularen én
gang til.
Du skal ændre formularen, så der vises en side med en bekræftelse på til-
meldingen.
Det er ganske simpelt:
1. Opret en ny side
2. Opret et indholdselement på den ny side med en tekst der bekræfter
tilmeldingen. Vælg type tekst.
3. Fortæl TYPO3 mailformularen under ”Spring til side”, at den skal
vise takkesiden, når formularen er afsendt.
13.4 Øvelse: Begrundelse for fravær
Giv medlemmerne mulighed for at begrunde fraværet. Bemærk også at fel-
terne er gjort længere. Du skal tilføje og ændre din formular, så den bliver
som nedenfor.
60 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
14 Tabeller 61
Typovizion, Tjørnevej 10, 8382 Hinnerup
14 Tabeller
På en webside er der ikke helt så mange formateringsmuligheder for tabel-
ler, som vi kender fra en almindelig tekstbehandler, men der er til gengæld
flere valgmuligheder med hensyn til, hvordan vi opretter tabellen.
1. I teksteditor er der indbygget et tabelværktøj. Det virker fint til sim-
ple tabeller, men til de lidt mere komplicerede tabeller kan den være
svære at håndtere.
2. En anden mulighed er at indsætte en tabel oprettet i fx Microsoft
Frontpage, Dreamweaver med flere som et HTML indholdselement.
3. TYPO3 har et dedikeret tabel-indholdselement, der kun kan håndtere
relativt simple tabeller, men som til gengæld er let at bruge.
14.1 Tabelværktøj i teksteditor
I editor er der et lille tabelværktøj, der ”på papiret” skulle give alle mulighe-
der. Til simple tabeller fungerer det fint, men ved lidt mere komplicerede
tabeller, er det min erfaring, at det kan være vanskeligt at nå målet igennem
editors tabelværktøj.
Der er 2 vigtige værktøjer. Dels selvfølgelig værktøjet til at ”Indsætte ta-
bel”, men for at kunne se tabellen, skal du bruge værktøjet ”Slå kanter til
eller fra”.
Figur 28: Indsæt tabel værktøjet.
Figur 29: Slå kanter til eller fra.
62 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Figur 30: Valgmulighederne ved tabeloprettelse.
Figur 31: Tabellen er indsat og klar til at få sat indhold på.
Hvis du har valgt at vise ”kanter”, vil tabellen se sådan ud i editor. Efterføl-
gende kan du ved at markere tabellen og højreklikke formatere celler, tabel-
indhold osv., men husk at gemme løbende, hvis der sker noget uventet.
14 Tabeller 63
Typovizion, Tjørnevej 10, 8382 Hinnerup
14.2 Indsæt tabel som HTML kode
Fordelen ved at indsætte en tabel som et HTML kode indholdselement er, at
det ofte er meget let at oprette en tabel og formatere den i en HTML editor.
Figur 32: Her er en lille tabel oprettet i en HTML editor
Alle HTML editorer kan vise websiden som HTML kode. Først skal du ko-
piere HTML koden fra HTML editor. Dernæst skal du i TYPO3 Backend på
den side tabellen skal vises indsætte et nyt indholdselement af typen ”Ren
HTML”.
Figur 33: Indsæt indholdselement af typen HTML.
Figur 34: Her er HTML koden indsat.
64 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Figur 35: Samme tabel set i browser.
Når du efterfølgende ser siden i en browser, vil tabellen være som den tabel,
du oprettede i din HTML editor.
14 Tabeller 65
Typovizion, Tjørnevej 10, 8382 Hinnerup
14.3 Tabel indholdselement
TYPO3 har et dedikeret ”Tabel indholdselement”, der kan vælges som et-
hvert andet indholdselement.
Figur 36: Tabel indholdselementet.
Figur 37. Valgmuligheder ved tabeloprettelse.
Ovenfor er vist de vigtigste valgmuligheder ved tabeloprettelse. De vigtigste
valgmuligheder er beskrevet herunder:
1. Ramme omkring tabellen. Tallet der indtastet angiver bredden af
ramme i pixel.
2. Cellemellemrum. Tallet angiver hvor meget luft, der skal være mel-
lem de enkelte celler i tabellen.
3. Cellemargin. Tallet angiver hvor meget tekst og tal skal indrykkes
fra venstre kant af cellen.
4. Tabelkolonner. Hvor mange kolonner skal cellen have. Bemærk at
der er en øvre grænse.
66 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
Gem indholdselementet og der kommer en lille Tabel hjælper frem i højre
skærmdel.
Figur 38: Tabel wizard
Figur 39: Tabellen er klar til indtastning.
I Tabel wizard vises nu en enkelt række i den tabel med det antal kolonner,
du har valgt. Du indtaster tekst eller tal i de enkelte celler.
1. Flyt til bund.
2. Slet række.
3. Flyt række ned.
4. Tilføj række.
1. Yderst til højre.
2. Slet kolonne.
3. Flyt til højre.
4. Tilføj kolonne
Figur 40: Værktøjer til række.
Figur 41: Værktøjer til kolonne.
14 Tabeller 67
Typovizion, Tjørnevej 10, 8382 Hinnerup
Husk hver gang du ændrer eller foretager nye valg at gemme. Ændringerne
sker ikke før du har gemt.
Figur 42: Her er valgt "små felter"
Figur 43: her er "små felter" fravalgt.
Herunder er den ”færdige tabel” som den ser ud i en browser.
Figur 44: Samme tabel vist i browser.
68 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
14.4 Øvelse: Opret tabel som Tabel indholdselement
Nu er det endelig din tur. Start med at oprette en tabel som den på forrige
side igennem som et TYPO3 indholdselement.
Afprøv derefter mulighederne med henholdsvis ramme, cellemellemrum og
cellemargin for at finde de muligheder, der giver den pæneste tabel.
Der er nogle få muligheder for at farvelægge tabeller og celler. Dem skal du
også afprøve.
14.5 Øvelse: Opret tabel igennem editor
Hvis du har tid og lyst, skal du prøve at oprette samme tabel igennem editor.
14.6 Øvelse: Opret tabel som HTML indholdselement
ligesom du kan prøve at indsætte en tabel som et HTML indholdselement.
Få evt. HTML tabel af instruktør.
15 Opret nyhed og kalenderaktivitet 69
Typovizion, Tjørnevej 10, 8382 Hinnerup
15 Opret nyhed og kalenderaktivitet
Her beskrives, hvordan du som
bruger henholdsvis opretter en ny
nyhed og opretter en ny aktivitet
til kalenderen.
Ved både kalender og nyheder
gemmes nyheder (1) og aktivite-
ter (2) i hver sin sysfolder, som
vist herunder.
15.1 Opret en nyhed
Når du skal oprette en nyhed, skal du først vælge Liste visning i venstre
skærmdel og vælge sysmappen med navnet Nyheder…
Hvis en eksisterende nyhed skal rettes klikken redigeringsblyant (1), og hvis
det er en helt ny nyhed, der skal oprettes vælges Opret nyt element (2)
Figur 45: Opret eller rediger eksisterende nyhed.
70 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
15.2 Opret nyt element (ny nyhed)
Klik Ikonet Nyheder for at oprette en ny nyhed.
Udfyld felterne herunder.
1. Titel (kræver vist ingen forklaring)
2. Nyhedsdato (normalt dags dato)
3. Teaser. Det der vises på fx forsiden
4. Selve nyhedsteksten
Figur 46: Opret nyhed
15 Opret nyhed og kalenderaktivitet 71
Typovizion, Tjørnevej 10, 8382 Hinnerup
15.3 Husk at vælge gruppe/kategori
Husk at vælge gruppe/kategori – ellers bliver nyhed ikke vist.
Figur 47: Husk at vælge kategori
Til slut skal nyheden gemmes – og test om den bliver vist (tøm cachen)
15.4 Øvelse: Opret nyhed
Opret en nyhed for din arbejdsgruppe – og test om du får den vist både på
din gruppeside og på forsiden.
72 TYPO3 webredaktør kursus
Typovizion, Åbogade 15, 8200 Århus N.
15.5 Opret en kalenderaktivitet
Klik Ikonet Kalender
Kalenderen er ret nem at udfylde. Du kan kun vælge din ”egen” kategori, så
det er ikke muligt at oprette en nyhed for en anden arbejdsgruppe end den,
du er medlem af.
1. Klik kalender ikon og vælg startdato (og tid)
2. Slutdato (og tid)
3. Titlen
4. Selve beskrivelsen.