Indre Missions. Vejledning til TYPO3

Størrelse: px
Starte visningen fra side:

Download "Indre Missions. Vejledning til TYPO3"

Transkript

1 Indre Missions Vejledning til TYPO3

2 Manual til Typo3 på IM's server 1. Udgave, januar 2010 Daniel Damm, IT afdelingen, Indre Missions Hus

3 Indholdsfortegnelse Indledning...5 Præsentation af begrebet CMS...6 Hvad er frontend og backend...6 Adgang til backend...7 Præsentation af brugerfladen...8 Kort gennemgang af områder i backend...8 Sidetræ...9 Hjemmesidens design...10 Skabelonens opbygning...11 Tilpasning af skabelonen...18 Læs videre

4 2

5 INDLEDNING Denne vejledning er tænkt til brug for dem der vil bygge en hjemmeside baseret på TYPO3 og IM s skabelon. Vejledningen arbejder primært med opsætning af IM s skabelon, vil du vide mere om arbejdet med at oprette nye sider, og redigere indhold bør du læse Begynder Redaktør Manual du finder den på: hvor manualen kan hentes ved at klikke på Begynder redaktørmanual i højre spalte. Den beskriver alle de grundlæggende ting man bør vide som redaktør af en TYPO3 hjemmeside. Dog skal man være opmærksom på at afsnittet Sideskabeloner på side 16 og 17 ikke er relevant for IM s installation, da vi benytter et andet plugin til sideskabeloner. 3

6 Før vi går om bord i TYPO3 skal vi først have afklaret et par faggloser. Præsentation af begrebet CMS TYPO3 er et Content Management System (CMS), et værktøj til at administrere og organisere indhold på en hjemmesiden. Et CMS som TYPO3 håndterer den tekniske del af hjemmesiden, så hjemmesidens redaktører ikke skal koncentrere sig om web standarder og billedeformater, men kan fokusere på det væsentlige, nemlig sidens indhold i form af tekst og billeder. Hvad er frontend og backend Frontend, forsiden er selve hjemmesiden som TYPO3 laver for dig. Det er alt det dine besøgende får at se. Backend bagsiden er der hvor du kan administrere hjemmesiden. Her kan du blandt andet ændre hjemmesidens udseende og oprette nye sider. 4

7 ADGANG TIL BACKEND Du får adgang til TYPO3 s backend ved at skrive /typo3 efter hjemmesidens adresse Adresse: web adresse>/typo3 Her bliver du mødt med en loginskærm hvor brugernavn og kode skal tastes ind. Du vil få oplyst brugernavn og kode af hostmaster. 5

8 PRÆSENTATION AF BRUGERFLADEN Kort gennemgang af områder i backend 6

9 Området 1 indeholder fra venstre: Navnet på den bruger der er logget ind Knappen afslut til at logge ud af TYPO3 Værktøj til at skifte mellem live redigering eller redigering i kladde tilstand Knap til at oprette og tilgå interne genveje/bogmærker i TYPO3 Knap til at rydde cache lageret (Vis hjemmesiden) Kolonne 2 indeholder en liste over de moduler du kan arbejde med i TYPO3. En del af modulerne følger med fra starten, men TYPO3 kan også udvides med flere moduler der så vil dukke op i listen. Som administrator vil du se en lang række moduler, mens en redaktør kun kan se det udsnit som du giver ham adgang til. Indholdet af kolonne 3 og 4 vil variere afhængigt af det valgte modul. Ovenfor er modulet side valgt. Sidetræ I flere af modulerne vil du blive præsenteret for et sidetræ. Sidetræet viser selve hjemmesidens struktur, og er det værktøj du bruger til at vælge hvilken side du vil redigere. 7

10 HJEMMESIDENS DESIGN Typo3 er lavet så man har næsten ubegrænsede muligheder for at designe hjemmesidens layout som man måtte ønske det. Desværre kræver det et vist kendskab til webprogrammering. Derfor har vi lavet en skabelon der kan bruges som skelet for en ny hjemmeside. Skabelonen sætter naturligvis sine begrænsninger, men er stadig så fleksibel, at det er muligt at bygge hjemmesider med vidt forskelligt udseende. Typo3 kan udvides med en lang række tilføjelser. Tilføjelserne giver Typo3 nye funktioner, det kan være alt lige fra et simpelt billede galleri til et stort forum med plads til mange brugere. Tilføjelser kan se forskellige ud, nogle vil dukke op som nye moduler, men en tilføjelse kan også give en ny måde at præsentere sideindhold på. 8

11 Skabelonens opbygning Skabelonen består af flere forskellige elementer, der hver især tilpasses for at give siden et individuelt udseende. Her følger først en gennemgang af elementerne. Bagefter vil vi så se på hvordan vi tilpasser dem. Her ser du en skitse af skabelonens opbygning. 9

12 1. Baggrund: Sidens baggrund kan være en af følgende: En farve Et mønster et billede som gentages som en mosaik Et større billede som dækker hele eller en del af baggrunden 2. Top: Et billede, f.eks. med hjemmesidens navn og et logo. Billedet kan have en valgfri højde, men bredden må ikke overstige selve hjemmesidens bredde. 3. Bund: Her kan indsættes en tekst som sidefod. Desuden er det muligt at sætte et billede ind som baggrund. 10

13 4. Menu Typo3 danner selv menuen, ud fra den struktur af sider man opretter i backend. Menuen kan enten placeres lodret i venstre side af indholds elementet eller vandret lige under top elementet. Hvert menupunkt består af en tekst og en baggrund. Teksten bestemmes af den tilhørende sides titel, og baggrunden kan defineres som enten en farve eller et billede. Du kan bestemme menuens udseende ved at indsætte forskellige billeder som baggrund på knapperne. Menuens knapper kan have mange forskellige tilstande. Du behøver ikke lave forskellige knapper til alle tilstande, men det vil ofte gøre menuen mere overskuelig, f.eks. hvis man lader knappen for den nuværende side skiller sig ud fra de andre. Knapperne kan have 4 forskellige tilstande: Normal: Udgangspunktet for menuens knapper. Mus over: Når musen er peger på knappen. Aktiv: Det menupunkt der refererer til den aktive side. Med undermenu: Et menu punkt der indeholder en eller flere underliggende sider. 11

14 Menuen kræver mange indstillinger for at dække de forskellige kombinationer. Jeg har prøvet at opbygge det så logisk som muligt. For at forenkle det lidt, kan du undlade at vælge grafik til undermenuerne, så bliver grafikken fra Niveau 1 brugt i stedet. 5. Indhold Indholds elementet er det område hvor hjemmesidens tekst og billeder mv. bliver præsenteret. De forskellige underskabeloner arrangerer sidens tekst og billeder i 3 bokse, kaldet Venstre, Normal og Højre. Afhængigt af underskabelonens layout kan nogle af boksene være skjult. Indholdet vil stadig være tilgængeligt i administrationsmodulet, selv om det ikke kan ses på hjemmesiden. Der er allerede en række underskabeloner tilgængelige og kender man lidt til webprogrammering er det meget simpelt at lave sine egne. 6. Banner / Margin Indholds område med fast placering, f.eks. til grafik eller reklamebanner. 12

15 7. Typografi Når man bygger en hjemmeside et det vigtigt at vælge den rigtige skrifttype til sidens tekst. Her er der flere ting man skal tage højde for. Teksten skal have en passende størrelse, så den kan læses på en skærm, men må ikke blive så stor at man skal scrolle for at læse selv korte tekster. Tekstens farve skal stå i en behagelig kontrast til baggrunden. Det giver sig selv, at det er svært at læse lys tekst på en lys baggrund abcabc eller mørk tekst på mørk baggrund abcabc, men også stærke farver kan virke forstyrrende abcabc. Endelig skal man huske på at især rød/grøn kombinationer kan være meget vanskelige at læse, for farveblinde abcabc. Selve skrifttypens udseende skal selvfølgelig også bidrage til at gøre siden letlæselig. Pas på ikke at kombinere for mange forskellige skriftstørrelser og typer, det virker rodet og gør siden uoverskuelig. Overordnet kan man dele skrifttyper ind i følgende fem familier: Serif: Ordet serif kommer fra fransk og referere til de fødder og små pyntestreger der kendetegner serif typer. Fødderne gør skrifttyperne meget læsevenlige på papir, modsat computerskærme, hvor serifferne bliver utydelige eller hakkede, især hvis teksten er lille eller skærmens opløsning er for lav. Serif typer signalerer tradition, historie og gammeldags værdier. 13

16 Sans Serif: Sans Serif betyder uden serif og dækker over skrifttyper uden fødder, og med ensartet liniebredde. Disse skrifttyper vises pænere og er meget nemmere at læse på en computerskærm. Af samme grund bruges sans serif typer stort set altid til brødtekst på hjemmesider. Sans Serif typer giver et moderne og nutidigt udseende. Monospace: I monospace skrifttyper har alle tegn samme bredde. Det giver en skrifttype der minder om dem man kender fra skrivemaskiner. Monospace typer er ikke særlig læsevenlige men kan signalere noget rustikt eller nostalgisk. Cursive: Cursive familien rummer de skrifttyper der efterligner håndskrift. Disse skrifttyper har oftest mange detaljer og egner sig slet ikke til tekster på en skærm. Undtagelsesvis kan de bruges til overskrifter hvor man ønsker at give et gammeldags eller romantisk præg. Her skal du dog være opmærksom på at der kun findes meget få standard cursive skrifttyper, så overskriften kan meget vel se helt anderledes ud på en anden pc. Fantasy: Fantasy skrifttyper er en meget bred gruppe af grafiske skrifttyper. Ligesom cursive typer er de ubrugelige til længere tekst passager og bør højest bruges til overskrifter. Fantasy skrifttyper kan også meget vel se forskellige ud fra pc til pc. Da fantasy skrifttyper kan være meget forskellige kan signalværdien også variere meget. 14

17 8. Layout Layoutet bestemmes i høj grad af en simpel html skabelon. Som ved underskabelonerne er et par varianter til at starte med, men også her er det muligt at lave sin egen. 15

18 Tilpasning af skabelonen De fleste indstillinger for skabelonen findes under det der hedder Constant Editor. Sådan finder du Constant Editor : Klik på modulet Skabelon Vælg den øverste side i sti strukturen Vælg Constant Editor i dropdown menuen Du kan nu ændre en lang række indstillinger for skabelonen. Indstillingerne er delt op i kategorier. Du skifter mellem kategorierne med den lille dropdown menu der dukker op under den første. Under hver kategori har du en række indstillinger der ændre på dele af hjemmesiden. Du ændrer på indstillingerne ved at klikke på den lille blyant. De forskellige indstillinger har forskelligt udseende alt efter hvad de skal definere. 16

19 1. Baggrund: Baggrunden kan være en farve, eller et billede af valgfri størrelse, vær dog opmærksom på, at et stort billede kan påvirke den tid det tager at hente siden. Du opsætter baggrunden i Constants Editor under kategorien 1.Baggrund Du har nu følgende muligheder: Baggrundsbillede: Her vælger du et billede som lægges som baggrund under hjemmesiden. Du vælge et billede fra din egen computer ved at klikke på knappen Gennemse. Baggrundsfarve: I stedet for et baggrundsbillede kan du vælge at have en ensfarvet baggrund. Farven vælger du her. Du kan enten vælge en farve fra listen, eller indsætte din egen. Når du indsætter din egen farve, skal farven skrives i hex format. De fleste grafikprogrammer kan vise en farve i hex format. Gentag baggrundsbilledet: Hjemmesidens baggrundsbillede kan gentages over hele baggrunden som en mosaik. Her vælger du om det skal gentages lodret, vandret eller begge dele. Du kan også vælge Gentag ikke, så vises billedet kun én gang. Placering af baggrundsbilledet: Her bestemmer du hvor billedet skal placeres på baggrunden. Placeringen definerer også udgangspunktet for mosaikken. 17

20 2. Top: Tekst i top billede: Her kan skrives en titel som bliver sat ind i det forvalgte top billede. Du kan f.eks. skrive navnet på det samfund eller projekt du laver hjemmeside for. Eget top billede: Ønsker du selv at bestemme grafikken i hjemmesidens top, kan du indsætte et billede her. Billedets højde er valgfri og bredden må ikke overstige selve hjemmesidens bredde (du opsætter sidens bredde i 8. Layout). Vælger du ikke selv et billede bruges det forudbestemte billede med IM logo. Top billedets højde: Vælger du at bruge dit eget top billede skal du skrive højden på billedet her. Det forvalgte billede er 160 pixels højt. 3. Bund: Sidefodens tekst: Her kan du skrive den tekst der kommer til at stå i bunden af hver side. Sidefodens tekstfarve: Her kan du vælge farven på sidefodens tekst. 18

21 Sidefodens baggrundsfarve: Her vælger du farve for baggrunden bag sidefodens tekst. Baggrundsbillede i sidefoden: I stedet for baggrundsfarve kan du også indsætte et billede bag sidefodens tekst. Sidefodens højde: Sidefoden skal være mindst lige så høj som baggrundsbilledet. 4. Menu: Skrifttype: Her kan du uploade den skrifttype der vil blive brugt til at tegne teksten på menuens knapper. Skrifttypen skal være af type Truetype. Tekststørrelse: Her angives størrelsen på teksten i menuen. Offset for tekst: Her justerer du tekstens placering på menuens knapper. Placeringen bestemmes i forhold til knappens øverste venstre hjørne. Første tal angiver afstanden til knappens venstre side. Andet tal angiver afstanden til knappens top. Tekst farve: Vælg farve på menuens tekst. Tekst farve (mus over): Vælg den farve menuens tekst får når musen bevæges over. 19

22 Tekst farve (aktiv menu): Vælg tekstfarve for det menupunkt der repræsenterer den aktuelle side. Bredde på menuens knapper: Her sætter du bredden på menuens knapper. Bredden angives i pixels. Hvis du vælger at indsætte grafik som baggrund på knapperne skal knap bredden sættes til samme bredde som grafikken, med mindre den kun bruges som en vignet. Baggrund på menu (Niveau 1): Vælg baggrundsfarven for menuen Baggrund på undermenuer: Vælg farven på menuens baggrunden Ramme om undermenuer: Vælg farven på undermenuens ramme. Offset for grafik: Her kan du justere baggrundsbilledets placering på menuens knapper. Placeringen bestemmes i forhold til knappens øverste venstre hjørne. Første tal angiver afstanden til knappens venstre side. Andet tal angiver afstanden til knappens top. Menu grafik (Niveau 1 normal): Baggrundsbillede på knap i tilstanden normal. Menu grafik (N1 mus over): Baggrundsbillede når musen peger på knappen. 20

23 Menu grafik (N1 aktiv): Baggrundsbillede på knappen der repræsenter den valgte side. Menu grafik (N1 normal m/ undermenu): Baggrundsbillede på knap i tilstanden normal hvor knappen gemmer en undermenu. Menu grafik (N1 mus over m/ undermenu): Baggrundsbillede når musen peger på en knap med undermenu. Menu grafik (N1 aktiv m/ undermenu): Baggrundsbillede på knappen der repræsenter den valgte side. Eller hvor en underliggende side er aktiv. Menu grafik (Undermenu normal): Baggrundsbillede på knap i undermenuen, i tilstanden normal. Menu grafik (Um mus over): Baggrundsbillede når musen peger på en knap i undermenuen. Menu grafik (Um aktiv): Baggrundsbillede på knap i undermenuen, der repræsenter den valgte side. 21

24 5. Indhold: Siderammens farve: Farven på kanten omkring sidehovede og indhold. Siderammens bredde: Bredden på kanten omkring sidehovede og indhold. 0 skjuler rammen. Placering af sidens indhold: Findes ikke i Constant editor men i stedet bestemmes det af underskabeloner. Du kan vælge forskellige underskabeloner til de enkelte sider. Du vælger underskabelon sådan: Find siden du vil redigere i sidetræet og højreklik på den. Vælg Redigér side egenskaber og sideegenskaber for den valgte side åbnes. Klik på fanebladet Udvidet Find og klik på det ønskede layout under Select content area template Klik på Gem og luk ikonet øverst på siden. For vejledning i at oprette indhold anbefaler jeg at du læser den tidligere nævnte Redaktør Manual, og prøver dig frem. Når først du har lært at indsætte indholdselementer kan tekster redigeres i en tekstboks, der virker meget som en forenklet udgave af de kendte officeprogrammer. 22

25 6. Banner / Margin: Bannerhøjde: Højde på banner/margin. Bannerets placering er bestemt af hovedskabelonen (som vælges umiddelbart ovenfor underskabelonen). Du indsætter indhold i banneret på samme måde som almindeligt indhold, her skal du indsætte indholdselementerne i sektionen der hedder Margin. 7. Typografi: Skriftstørrelse: Her angives standard størrelsen for tekst på hjemmesiden. Overskrifternes størrelse sættes automatisk i forhold til standard størrelsen. Størrelsen defineres i pixel. Skrifttype: Her kan du vælge hvilken skrifttype der skal anvendes på hjemmesiden. For at sikre et nogenlunde ensartet udseende på forskellige systemer kan du indsætte en prioriteret liste. Systemet vil så bruge den første mulighed der er tilgængelig. Her er et par eksempler på lister: Serif: garamond, georgia, new york, times, times new roman, serif Sans serif: verdana, helvetica, arial, geneva, lucida sans, trebuchet, sans-serif Monospace: courier, courier new, lucida console, monaco 23

26 Skrifttype overskrift: Her vælger du skrifttypen der bruges til hjemmesidens overskrifter. Det gøres på samme måde som ovenfor. Link (normalt): Vælg baggrundsfarven for urørte links. Link (mus over): Vælg tekstfarven for link med mus over. Link (besøgte): Vælg tekstfarven for besøgte links. Link (aktive): Vælg tekstfarven for aktive links. 8. Layout: De største ændringer i layoutet opnår man ved at skifte skabelon, som ved underskabelonerne. Sidebredde: Bredden på den boks som indeholder top, indhold og bund. Hvis du bruger et billede til top og bund vil du typisk sætte sidebredden til at matche billedernes bredde. 24

27 LÆS VIDERE Når du er logget ind i TYPO3 kan du finde manualen i bunden af menuen. Den officielle TYPO3 kvik guide kan findes her, den er grundig, men ikke helt ny, så der kan forekomme afvigelser: Du kan se en række video vejledninger her, de findes desværre kun på engelsk: 25