TYPO3 CMS. Redaktør manual. CMShouse Boulevarden Vejle Dato: Juli TYPO3 version

Transkript

1 TYPO3 CMS Redaktør manual CMShouse Boulevarden Vejle Dato: Juli 2009 TYPO3 version

2 Indholdsfortegnelse Indholdsfortegnelse...2 Generelt om TYPO3...3 Kursusmateriale...3 Målgruppe for kursusmateriale...3 TYPO3 version...3 Log ind i TYPO3...4 Overblik over TYPO3...5 TYPO3 backend som administrator...5 TYPO3 backend som redaktør (eksempel)...6 Hvor skal jeg klikke i TYPO3?...7 Generelle menu i TYPO3...8 Opret nye sider i TYPO3...9 Tilføj indhold i TYPO Extern URL...17 Start- og slutdato i TYPO Formatering med den visuelle editor TYPO Indsæt fra andet dokument...24 Filbiblioteket i TYPO Indsæt billeder i TYPO Links...34 Appendiks...38 TYPO Tekst til nettet...41 Gode råd...43 Skriftstørrelser...44 Side 2

3 Generelt om TYPO3 TYPO3 er licensfri TYPO3 udbydes som open source, og er dermed gratis at anvende. TYPO3 softwaren, både grundkernen og extention (plugin), er frigivet som open source. Aktuelt er der over 3000 ekstra extension, der kan hentes. Der betales ikke for software vedligeholdelse. Er man som virksomhed, organisation eller forening tilfreds med at anvende TYPO3 til vedligeholdelse af hjemmesiden, opfordres der til at donere et beløb til TYPO3 organisationen. Bidrages størrelse bestemmer man selv. Læs mere om donering på denne webadresse: CMShouse kan være behjælpelig med vejledning i donerings proceduren. Kursusmateriale Dette kursusmateriale er udviklet og bliver vedligeholdt af CMShouse i Vejle. Har du gode ideer til udvikling eller finder fejl, kontakt da CMShouse på info@cmshouse.dk. Materialet er opbygget trin for trin med vejledning. Skærmdump i kursusmaterialet er baseret på en standard TYPO3 installation excl. Skin plugin. Målgruppe for kursusmateriale Materialet er udviklet til rollen som redaktør i TYPO3. Formålet at give redaktøren et redskab til at arbejde med TYPO3. Materialet kan også anvendes som opslagsværk, når der er behov for at se hvordan gør jeg. TYPO3 version Materialet er opbygge med TYPO3 version med CMShouse s startpakke installeret excl. yderligere extention. Side 3

4 Log ind i TYPO3 Der kræves login for at kunne opdatere indholdet i et CMS system i administrationsdelen også kaldet backend. Du logger ind ved at åbne din browser, og åbne websitet. Tilføj /TYPO3 efter domænenavnet. I eksemplet herunder, er websitet ungvejle.dk åbnet med adressen til login-billedet: Indtast dit brugernavn i feltet username, og din adgangskode i feltet password. Klik på knappen login. Kan du ikke logge ind i backend, selvom du har indtastet korrekt brugernavn og adgangskode, kan det være fordi din browser ikke understøtter/accepterer cookies og JavaScript. Juster din browser. TYPO3 understøtter følgende browserer: Microsoft Explorer ver. 7.0, Mozilla Firefox ver. 2.0, men du kan benytte andre browsere som f.eks. Opera, Safari. Side 4

5 Overblik over TYPO3 TYPO3 backend som administrator Hovedgrupperne i kolonne 1 er: Web, File, User tools, Admin tools og Help. Hovedgrupperne kan åbnes og lukkes ved at klikke på pilen til venstre for hovedgruppen. Dette skærmbillede viser alle mulighederne i TYPO3 som administrator. Antallet af menupunkter, der vises i denne kolonne, afhænger af hvor mange rettigheder, den enkelte bruger har fået tildelt, se skærmbilleder længere nede i dokumentet. De menupunker en redaktør anvender i den daglig redigering af hjemmesiden, er markeret med røde pile. Alt efter hvilket punkt der er valgt i kolonne 1, navigerer man indenfor den valgte kategori. I eksemplet ovenfor, er hovedkategorien Page valgt (i kolonne 1). I kolonne 2, navigeres mellem de sider der er på hjemmesiden. Navigeringsstrukturen ligner Stifinder fra Windows, hvor der er mulighed for at åbne og lukke en struktur ved at klikke på + og tegnet. Side 5

6 Kolonne 3 er selve arbejdsområdet. Her oprettes og vedligeholdes indholdet på siderne f.eks. er der mulighed for at rette navnet på siden, oprette eller ændre indholdet på siden. Antallet af kolonner eller spalter er afhængig af den enkelte opsætning (én spalte i hele indholdsområdet, opdeling i spalter f.eks. Spalte1 og spalte 2) der er sat op af udvikleren. TYPO3 backend som redaktør (eksempel) Side 6

7 Hvor skal jeg klikke i TYPO3? Værktøjer vises forskelligt afhængigt af om der klikkes på ikon eller sidens navn i kolonne 2. Klikkes på ikonet vises en drop downliste med lidt anderledes værktøj end ved klik på siden navn. Klikkes i stedet på sidens navn i kolonne 2, vises siden i kolonne 3, som vist på billedet herunder. PS! Mange af de samme funktioner er tilgængelige flere steder i TYPO3. Side 7

8 Generelle menu i TYPO3 Herunder er en liste med forklaring til generelle menuikoner i TYPO3. Menuikon: 1. Viser hvem der er logget ind i backend 2. Log af 3. Vælg mellem LIVE eller KLADDE arbejdsrum. Med valg af LIVE bliver ændringer udgivet straks der klikkes gem. Ved valg af KLADDE bliver indhold ikke udgivet før godkendelse 4. Opsætning af Arbejdsrum til LIVE og KLADDE, samt det er muligt at få vis versioner af siden. 5. Shortcuts (genvejstaster) 6. Clear caches i TYPO3, slet midlertidige filer på serveren 7. Søg i backend, der kan søges på ID nummer eller tekst 8. Viser hvilke indholdselementer der er slettet for visning på internettet, men stadig er tilgængelig for redaktøren. Husk at slette disse elementer, hvis de ikke skal gemmes. Det kan gendannes fra en papirkurv 9. Yderligere opsætning /udvidet visning af menupunkter 10. Viser sidens ID nummer når musen holdes over 11. Rediger / ændre sidens navn, udgivelse dato mv. 12. Vis siden i nyt vindue 13. Navn på siden Side 8

9 Opret nye sider i TYPO3 Indledning Site-træet indeholder alle de sider, som websitet består af. Når du arbejder i site-træet, ændrer du konstant strukturen. Derfor er det vigtigt at få en god forståelse af sammenhængen mellem strukturen i site-træet og visningen af siderne på websitet. Det er en god idé at oprette strukturen, før du indsætter indhold. Tips Site-træ ikoner kan have forskellige betydninger og funktioner. Her er eksempler på ikontyper. I TYPO3 backend (der hvor du redigerer) er der en oversigt over alle ikoner. Oversigten findes ved at klikke på: Hjælp/Om moduler Information Strukturen der bliver oprettet udgives i TYPO3 frontend (kolonne 2). Det grafiske layout og udvikleren har faste regler for, hvordan de enkelte niveauer bliver placeret. Typisk er niveau 1 (se tegning) opsat til at indeholde en skabelon og TYPO3 opsætning. Slet aldrig sider på dette niveau, idet det kan medføre at nogle funktionaliteter derefter ikke fungerer. Spørg webmaster. Niveau 2 er det første niveau, der bliver vist på hjemmesiden. I dette tilfælde bliver det vist som topmenu. Niveau 3 er underniveau til niveau 2 og bliver vist i venstre side. Niveau 4 er undermenu til niveau 3. Der kan oprettes alle de niveau der ønskes, men det er kun de niveauer som udvikleren har opsat, der bliver fremvist. De sider som ikke bliver vist kan tilgås ved interne link. Side 9

10 Trin Handling Opret ny side ved klik på sidens ikon, hvor du ønsker at 1 oprette den nye side. Vælg menupunktet ny. Hjælp og tips Der er stor forskel på om du klikker på sidens navn eller på sidens ikon! Klikker du på sidens ikon, fremkommer en menu, hvor du bl.a. får mulighed for at oprette nye sider. Klikker du på sidens navn, vælger du at opdatere sidens indhold. 2 I 3. kolonne er der mulighed for at oprette nye sider på 2 måder: Du kan vælge om du vil oprette en ny side med eller uden hjælp af en guide. Guide har den fordel at den via en visuel visning giver brugeren et overblik over hvor den nye side bliver oprettet. 3 Opret side med guide: Vælger du guide, får du i 3. kolonne en ny oversigt over dit sitetræ, denne gang med pile. Den pil du peger på, bliver den nye sides placering. Skal alle sider være på samme niveau, kan du vælge menupunktet Funktioner. I 3. kolonne vælger du herefter opret flere sider i dropdown menuen - vælg funktioner. Klik på? for yderligere information om menupunktet. Være opmærksom på hvilket niveau du placerer siden f.eks. i topmenu eller i venstremenu. Side 10

11 4 Vælg Standard skabelon, klik på ikon. 5 Giv siden en titel. Er der et flueben ved skjul side, skal du fjerne det. Ellers bliver siden ikke synlig på websitet. Skriv sidens titel i Sidetitel Ikonet betyder, at feltet som minimum skal udfyldes. Alle sider har et unikt sideid, i dette tilfælde har siden ID nr. 68. For at gemme eller fortryde og slette siden kan du vælge mellem følgende. Gemmer. Gem og vis side. Gemmer og lukker. Lukker uden at gemme. Slet side. 6 Gentag punkt 3 og 4 indtil hele siden er oprettet. Her slutter guiden! Side 11

12 Tilføj indhold i TYPO3 Indledning Nu skal du indsætte indhold på siderne. Tips Hvis du ikke har en tekst til siden, kan du benytte en dummy-tekst fra websitet Du kan oprette lige så mange afsnit på en side, som du ønsker, og du bestemmer selv rækkefølgen heraf. Afsnit bruges til at placere forskellige typer af indhold på en side, f.eks. et tekst afsnit og et nyt afsnit under med billeder eller en kontaktformular. En fordel ved at oprette flere afsnit er, at det kan optimere websitet til søgemaskiner bl.a ved at anvende feltet overskrift, der bliver formateret op med H1 tag. Hver afsnit kan dato styres så du ikke behøver at rette afsnittet netop på dagen for ferieafholdelse, julelukket mv. Opgave Trin 1 I denne øvelse skal du indsætte indhold på sider, du netop har lavet struktur for. Handling Hjælp og tips Vælg en side i site-træet, ved at klikke på sidens navn (uden guide). Alternativt kan du klikke på sidens ikon, og vælge rediger fra menuen. Side 12

13 2 Stederne, hvor du kan oprette sideindhold, er markeret med en cirkel. Navnene og antallet af kolonner afhænger af det design udvikleren har lavet. Antallet af spalter og dermed kolonner kan være variabelt på de forskellige sider. Hvis du klikker på 1 opretter du, tekst der fylder hele bredden i indholdsområdet. Klikker du på 2 bliver indholdet placeret i venstre side og ved klik på 3 bliver teksten placeret i højre side. Ved klik på ikonet under de 2 spalter er der mulighed for at oprette nyt indholdselement. 3 Herefter får du mulighed for at vælge hvilken type indhold, du ønsker at indsætte. Vælger du en forkert type, kan du altid ændre valget fra dropdown menuen type Vælg almindeligt tekstelement. Side 13

14 4 Skriv evt. en overskrift til elementet. Anvendelse af overskrifter i elementet giver større overblik, tilgængelighed og bedre søgemaskineoptimering. Det er ikke et krav, at der oprettes overskrift på alle indholdselementer. Styling eller det grafiske udtryk af overskriften bestemmes af designer og udvikleren. I Før og Efter feltet er der mulighed for at indtaste en værdi i pixel for at give afstand før og efter elementet. Feltet Skjul giver mulighed for at skjule det valgte elementet for brugeren af hjemmesiden. 5 Skriv teksten ind i tekst editoren. Klik på gem og luk ikonet Ikon 1: Ved klik på ikonet åbnes et større vindue til indtastning af tekst. Ikon 2: Ved kopiering fra f.eks. Office programmer, HTML, Indesign, PDF mv. sæt da et flueben her, og der fremkommer en simpel editor. Dette medfører at teksten bliver renset for koder. Når tekst er placeret med ctrl+v, fjernes fluebenet igen. Selv om den grafiske editor giver mange muligheder for ændring af teksten anbefales begrænset brug heraf pga. tilgængelighed og senere tekniske ændringer via CSS. Mere herom senere! Side 14

15 6 Angiv evt. Start og Stop tidspunkt for indholdelementet. 7 Gem siden med dens nye indhold. Gemmer. Gem og vis side. Gemmer og lukker. 8 På samme måde kan der indsættes en række andre typer at indholdelementer, prøv selv. Hvis hjemmesiden er installeret og konfigureret med frontend login (krav om login) til f.eks. et Extranet, er det muligt under Generel valg at tildele i hvilke frontend anden bruger må se indholdselementer, dvs. brugerdefineret visning. En grundinstallation af TYPO3 leveres med følgende typer af elementer: Typisk sideindhold Specielle elementer Formularer Nogle af elementerne f.eks. Punktliste og Tabel kræver CSS tilretning for korrekt grafisk opsætning. 9 Flexibelt indhold Flexiblet indholdelementer opsættes af udvikleren af hjemmesiden. Med Flexibelt indholdselement opdeles indholdsområdet i spalter. Husk at opdeling i spalter skal ske før et indholdselement oprettes. Side 15

16 0 Extention/plugin elementer Hvilke muligheder der ses her afgøres af hvilke TYPO3 extention, der er installeret. Flere af disse elementer kræver ekstra viden for anvendelse. Side 16

17 Extern URL Indledning I TYPO3 findes der flere sidetyper. En af disse typer hedder Link to ekstern URL, og vises i site-træet med dette ikon. I frontend vil siden se ud som alle andre sider på websitet. Modsat almindelige sider, vil denne type dog i stedet pege på en helt anden webside. Tips Eksterne links bør åbnes i et nyt vindue, således at kunderne ikke bliver ført væk fra virksomhedens website, evt. skal der ske en tilretning i TYPO3, for at denne funktion er aktiv. Opgave Opret en ny side med navnet f.eks. Link og herunder tilføj en ny side af typen extern URL og opret link til f.eks. Trin 1 Handling Hjælp og tips Opret først en normal TYPO3 side, se evt. Opgaven Opret struktur. Når siden er oprettet ændres værdi af siden til Link to external URL se pil. Grundopsætning af TYPO3 betyder normalt at externe link åbner i et nyt vindue, således den besøgende ikke bliver ført væk fra siden. Hvis der er behov for at sætte denne funktion op manuelt, er det muligt ved under menupunket 'Target' at indsætte _blank. Side 17

18 2 Klik på fanebladet URL og indtast URL adressen. Alle sider i TYPO3 har et ID nummer, i dette eksempel ID 70. Dette nummer kan bl.a. bruges til hurtigt at fremfinde en side. Under fanebladet Access er det muligt at opsætte start og stop tidspunkt for siden. 3 I site-træet har den nye side fået et andet ikon de andre sider. end 4 Redigering af en Extern Url og andre special sider er anderledes end en norml side. Klik på Web/Liste i menubaren i venstre side. Vælg den side der skal ændres ved at klikke på navne på siden (teksten). Herefter fremkommer disse muligheder: Herunder er relevante ikoner beskrevet: Vis siden/linket Rediger sidens egenskaber Skul side for besøgende Flyt siden Side 18

19 Start- og slutdato i TYPO3 Indledning En af de største udfordringer med websites, er at holde dem up-todate. Det er tidskrævende hele tiden at gennemgå siderne for gammelt indhold. I TYPO3 har du mulighed for at angive en start- og slutdato på sider og indholdselementer. Dermed kan du angive hvilket tidsrum, siden skal være tilgængelig på websitet. Husker du at angive dette, vil dine besøgende aldrig opleve, at dit website ikke bliver vedligeholdt. Tips Du har her mulighed for at lave fremtidige sider, der først skal vises om f.eks. 2 uger, og som automatisk fjernes igen. Opgave Angiv en start- og slutdato for enten en side eller et element. Trin Handling 1 Vælg at rediger en side eller et indholdselement. 2 Vælg fanebladet Access. Hjælp og tips Side 19

20 3 Angiv hvornår siden skal vises (Start), og evt. hvornår siden skal fjernes fra websitet igen (Stop). Datoformatet er: DD(dato)-MM(måned)YYYY(år) I stedet for at kigge i kalenderen og regne xantal dage frem, kan du i stedet skrive d+antal dage. Så vil TYPO3 hente den rigtige dato. OBS! Stopdatoen udregnes fra dags dato ikke fra startdato. Ikonet for siden skifter til hvorved du kan se at siden er tidstyret. Er siden ikke skjult, og er der ikke angivet en dato, vil siden altid være synlig. Hvis det er sider du ønsker datostyring på og ønsker at datostyring også skal gælde undersider, sættes et flueben i Omfat undersider. Side 20

21 Formatering med den visuelle editor TYPO3 Indledning Standard visuel editor i TYPO3 version 4.2 anvender Rich Text Editor (RTE), det er en editor, der ligner f.eks. Word en del. Alternativet til at bruge den visuelle editor (RTE en), er at bruge standard editoren, der dog ikke har nogen mulighed for at formatere teksten. Der er mange fordele ved at bruge den visuelle editor, men der er også situationer, hvor den ikke er særligt velegnet. Nedenfor gennemgåes muligheder for tekstredigering i TYPO3. Den visuelle editor (RTE) kan tilpasses af udvikleren til den enkelte web-løsning. På Internettet er der begrænsede muligheder for valg af skrifttyper, de fleste browsere er opsat med skrifttypen Verdana. Årsagen er at det er skrifttypen på brugerens PC, der er afgørende for om en webside kan vises med den ønskede skrifttype, farve mv. Når websitet sættes op vælger udvikleren en skrifttype/familie, der er gældende på den valgte skabelon, - men i sidste ende er det brugerens opsætning, der er afgørende for hvordan teksten bliver vist. TIPS Kopieres tekst fra f.eks. PDF, Word, Indesign mv. anbefales det at deaktivere RTE en. Følgende bør man holde sig fra: 1. Overskrifter i teksten - brug i stedet feltet i elementet overskrift, spørg evt. læreren. 2. Baggrundsfarve 3. Indsættelse af tekst fra word eller web-sider Side 21

22 Handling Hjælp og tips 1 Rediger et afsnit: klik på blyant. Det er også muligt at åbne et element ved at dobbelt klikke på teksten. 2 Hvis fanebladet Tekst ikke er aktiv, klik her på. 3 RTEén har en række funktioner. Skærmbilledet er vist herunder: Trin Brug RTEén med omtanke og brug kun basis-funktioner. En evt. senere redesign eller opgradering af TYPO3 kan give udnødvendig efterredigering. Hvis du skal oprette tabel eller punklister, opret da et nyt element (felt på side) og vælg type sideindhold, der er beregnet hertil, eks. 'Bullet' til punktlister. Overskrift på et afsnit bør skrives i feltet Overskrift under fanebladet. Hvilket også giver den bedst søgemaskine optimering med <H tags>, - MEN obs. at ved en evt. Redesign rettes alle overskrift på én gang. Anvend aldrig kursiv skrift på en webside det kan være svær at læs på en skærm. Såfremt du i en punktliste ønsker at anvende links skal punktlisten oprettes i RTEén. Side 22

23 Herunder er de vigtigste Ikoner, som vi kan anbefale anvendelse af, forklaret: Bold Punktliste Indryk Det kan anbefales at opsætte tekst med CSS styret opsætning. Ved en senere ændring af hjemmesiden skal der kun rettes ét sted. Special tegn Søg og erstat Vis HTML format Fjern formatering Opret link til: internt, externt, til en fil, e-amil TYPO3 har som standard opsætning 10 muligheder for valg af skriftstørrelse/typografier, som bliver udskrevet som <H tags> i HTML koden. Dissse kan ændres af en udvikler via opsætning af CSS. Fordelen ved at anvende standard skriftstørrelse/typografier er at teksten bliver opmærket med H tags, der gør websiden søgevenlig og tilgængelig for personer med handicap. Side 23

24 Indsæt tekst fra andet dokument Trin Handling 1 Kopierer tekst fra andet dokument. 2 Kopier tekst ind i klippebordet på PCén. 3 Opret et nyt tekstelement i TYPO3 af typen Almindelig tekst element på en side 4 Deaktiver RTEén ved at klikke i feltet 5 Kopier tekst ind i vinduet Tekst med CTRL+V Hjælp og tips Kan f.eks. gøres ved at taste CRTL+A (for opmærkning af alt tekst) og tast CTRL+C (for kopiering) Aktiver evt. RTEén igen ved at fjerne flueben, så har du mulighed for at anvende RTEén funktioner. Side 24

25 Filbiblioteket i TYPO3 Indledning Et WEB CMS system holder styr på websider og filer i en database. For at systemet kan holde styr på filer som f.eks. billeder, tekst, regneark, præsentation, video, flash mv. skal de indlæses i WEB CMS systemet, i dette tilfælde TYPO3 s Filliste. Det er muligt at gemme de fleste filtyper i TYPO3 systemet. Du kan i det følgende se, hvorledes dette filbibliotek kan anvendes. Tips Når der oprettes mapper i filbiblioteket, er det en god ide på forhånd at have gennemtænkt, hvordan strukturen skal opbygges. Derudover er det også en god ide, at tage hensyn til de forskellige roller brugere har til systemet, f.eks. om brugeren udelukkende må se sine egne mapper eller må se alle. Det foreslås, at der bliver oprettet en mappestruktur, hvor der er et område, som alle har adgang til, og et andet område hvor nogle bestemte roller har adgang. Begge områder bør have samme opbygning som hovedstrukturen i webløsning. Opgave Opret mapper og oploade billeder i Filliste Trin 1 Handling Hjælp og tips Klik på filliste under punktet Filer Hvor meget en redaktør kan se i mappen filer er afhængig af hvilke rettigheder brugeren har fået tildelt. TIPS Med - og + tegnet ud for de enkelte mapper er det muligt at folde disse ud og ind. Side 25

26 2 Opret nye mapper. Klik på biblioteket (navn på mappen) over det sted du ønsker de nye mapper skal oprettes se 1. Ny mapper bliver placeret inde under den valgte mappe. Klik på 2 New for at oprette nye mapper. Ved navngivning af mapper og filer til web må der ikke anvendes specialtegn, mellemrum og bogstaverne æ ø og å. Det er en god ide også kun at bruge små bogstaver. Hvis der ønskes mellemrum mellem ordene så anvend dette tegn: _ Eksempel: billede_natur_300.jpg Tallet 300 sidst i filnavnet beskriver hvor bredt billedet er. Vælg antal mapper/folders og tast navne på mapper i felterne og klik på Create folders Bemærk at man kan oprette flere mapper på én gang, hvis det er nødvendigt. 3 Klik på ikonet udfor den mappe du ønsker at uploade billeder i Side 26

27 4 Vælg det antal billeder du ønsker oploadet, klik på 1. Opload ved at klikke på 2 knappen Browse. Afslut ved at klikke på Upload files. Der kan oploades 10 billeder af gangen. Er der behov for at oploade flere billeder af gangen, er dette muligt via en FTP adgang. Kontakt CMShouse for hjælp. Hvis du genoploader et billede med samme filnavn og du ønsker det skal overskrives, sæt fluben i Overwrite exiting files. 5 Efter at billeder er tilføjet TYPO3 filliste ser skærmen således ud. Ønskes billeder vist som miniaturer sættes flueben i Vis miniaturer. Ved flueben i Vis klippebord, er det muligt at slette og flytte filer i TYPO3. 6 TYPO3 klippebord giver mulighed for at have 3 forskellige klippeborde igang samtidigt. Via drop down menuen kan der vælges, om filer skal flyttes eller kopieres. Side 27

28 Indsæt billeder i TYPO3 Indledning TYPO3 har flere muligheder for at vise visuelle elementer. I denne opgave anvendes TYPO3 standard element typer. TYPO3 giver mange muligheder for avanceret visning af billeder. TYPO3 har også et DAM koncept, der giver mulighed for at anvende TYPO3 som billed- og fil base. Med DAM s arkiveres billeder i højopløslig format i TYPO3, og der kan tilknyttes kategorier, metags mv. fil filerne. Fra frontend kan bruger søge og downloade filerne. Alle typer filformater kan lagres heri. Tips Med ALT tekster (gule bokse) på billeder gøres hjemmesiden tilgængelig for handicappede, og ALT tekster giver mulighed for at søgemaskineoptimere med netop de nøgleord (metags), som du ønsker optimering på. Opgave Opret et tekstelement og opret et billed-element på samme side. Trin 1 Handling Hjælp og tips Opret ny side og tekst element se f.eks. herunder. Hvis du får placeret siden på et forkert sted i stifinderen, kan du flytte siden ved at holde venstre musetast nede og trække siden til den nye placering (drag and drop funktion) 1. Klik på 1, (et niveau over hvor du ønsker ny side) og opret ny side, se anden opgave i kursusmaterialet. 2. Den nye side er oprettet 3. Klik for at oprette nyt tekstelement 4. Eksempel er oprettet 5. Klik på Ikon under det nye tekstelement Side 28

29 2 Under Typisk sideindhold vælg elementtypen Kun billeder. 3 Under fanebladet Generelt skriv evt. en overskrift til det nye element. 4 Hent billede(r) fra Fillisten. Du kan efterfølgende ændre elementtypen. 1. Klik på fanebladet Media 2. Klik på ikonet der ligner en hængemappe, der åbner et nyt vindue, som viser Filliste 3. OBS! Opload ALDRIG billeder via knappen Browse, du kan ikke efterfølgende genbruge billederne eller slette dem. Side 29

30 5 På listen klikkes på den mappe/folder du har oploadet billeder i. 6 I vinduet er der følgende muligheder: 1. Toggle selection klik for at vælge alle på éngang 2. Import selection når du har sat flueben i de ønskede billeder/filer, hentes billeder ind i TYPO3 elementet 3. Vælg de ønskede billeder/filer ved at sætte flueben 4. En anden mulighed for at vælge billed/fil er ved at klikke på + 5. Se billedet i nyt vindue med Info ikonet 6. Med Vis miniaturer Side 30

31 7 Billeder er nu linket sammen til Kun billede elementet. Billeder kan løbende tilføjes fra Fillisten Generelt: Billeder indsættes i indholdsområdet fra venstre mod højre. 1. Med 1 pile er det muligt at flytte rundt på rækkefølgen af billedvisning, husk at vælge et filnavn først 2. Man kan slette en fil ved at klikke på 2 krydset efter at have valgt en fil 8 Vælg i kolonner hvor mange billeder, der vandret skal placeres ved siden af hinanden. Evt. kan der sættes flueben i kant for at få en ramme om billederne Farven på Kant kan via CSS ændres. Den samlede bredde x antal kolonner + luft mellem billederne må ikke overstige det samlede antal pixels i indholdsbredden. Hvis bredden bliver for stor vil skabelonen blive rykket, og dermed vil designet blive uhensigtsmæssigt ændret. Bredden på indholdsområdet kan oplyses af udvikleren. 9 Hvis der ønskes link på billedet, klik i feltet Link og indtast URL adressen. Hvis der er flueben i Klik-forstør, bliver billedet forstørret ved den besøgendes klik på billedet. Se nærmere information om billedestørrelse mv. sidst i dokumentet. Side 31

32 Vælg bredde pr. kolonne/billede - skriv f.eks. 200 TYPO3 gør selv billedet mindre, men originalbilledet, der er oploadet i Fillisten, bliver ikke berørt. 10 I Billedtekst feltet indtastes tekst til hvert enkelt billede. Første linie er tekst til det første billede, næste linie er tekst til næste billede og så fremdeles. Under justering er det muligt at bestemme hvor teksten skal placeres under billedet Klik på gem og vis løbende for at følge med i ændringerne. 11 I Titeltekst indtastes tekster der skal vises når musen holdes over billedet også kaldet ALT tekster. Linierækkefølgen virker på samme måde som omtalt ovenfor. ALT tekster er med til at optimere websiden til søgemaskiner. Sådan vil det se ud på websiden for brugeren. Side 32

33 12 I Billedvalg vælges hvilken Kvalitet billedet ønskes vist i og med Effekter er det muligt juster billedet. Det er en god ide at vælge 'Høj Kvalitet' når et billede er monteret. Ofte giver det en bedre visning end med TYPO3 standard visning. Side 33

34 Links Indledning En af de væsentligste egenskaber ved en webløsning er selvfølgelig, at man kan lave links til andre sider, dokumenter, billeder mv. Til dette formål findes der i TYPO3 et ret fleksibelt værktøj i RTE tekst editoren. Denne opgave er baseret på TYPO3 standard installation. Hvis du har DAM installeret vil nogen af skærmbillederne være anderledes. TYPO3 kan være opsat til automatisk links, hvilket betyder at når du skriver www i URL adressen f.eks. i en adresse og taster mellemrum, bliver linket oprettet automatisk. adressen skrevet på denne måde i frontend 'info(at)cmshouse.dk', forhindrer at der sendes spam mail til adressen. Når brugeren klikker på mailadressen bliver (at) oversat Herunder er en vejledning til hvordan du manuelt opretter disse links. Tips Opgave Rediger og indsæt links med den visuelle editor, når tekst er mærket op klik på globus med kæde. Du lærer at oprette: 1. Interne link 2. Link til fil 3. Externe link 4. link Side 34

35 Trin 1 Handling Hjælp og tips Opret et nyt indholds element, her er et eksempel: Ved klik på ikonet ved pilen bliver RTEén vist i fuld skærm. 1. Fanebladet Tekst skal være aktiv 2. Opmærk tekst og klik på Globus 2 Klik på ikonet globus giver følgende muligheder: For at beholde læseren på websiden er det bedst at oprette links sidst på siden eller i en linkboks. 3 Opret Intern link Opmærk teksten og klik på 1 Titel: Dette felt bruges til at skrive tekst, der bliver vist når en besøgende holder musen hen over linket. Feltet betegnes som ALT tekst felt. Tekst, der skrives i ALT feltet bliver læst af søgemaskiner, så skriv en sigende og god søgetekst her. 1. Udfyld feltet Titel med en beskrivende tekst 2. Find side der skal linkes til og klik på siden navn Side 35

36 4 Opret link til fil Opmærk teksten og klik på Husk at filen skal oploades til TYPO3 først. 1. Klik her og vælg Top - den nye side starter i toppen af siden eller Nyt vindue filen åbner i et nyt vindue 2. Udfyld feltet Titel med en beskrivende tekst 3. Find filen der skal linkes til og klik på filnavnet 5 Opret link til Ekstern URL Opmærk teksten og klik på 1. Klik i feltet og skriv en URL adresse 2. I dropdown boksen vælges om linket skal åbne i et nyt vindue 3. Som standard skal denne ikke vælges, men det er med udvikleres hjælp muligt at oprette flere CSS filer og at link kan f.eks. få forskellige farver 4. Udfyld feltet Titel med en beskrivende tekst Husk til sidst at klikke på Sæt link for at lukke vinduet Side 36

37 Opret link Opmærk teksten og klik på Bemærk! Hvis man laver et link til en e -mail adresse, bliver denne automatisk beskyttet mod spam og robotter v.h.a. kryptering. 1. Udfyldt felte med adresse 5. Udfyld feltet Titel med en beskrivende tekst Husk til sidst at klikke på Sæt link for at lukke vinduet Slet eller rediger link Opmærk teksten og klik på Klik på fanebladet Fjern link eller ændre link via et af de andre faneblade Hvis man vil redigere et link efter at det er oprettet, markeres linket i editoren og man klikker på Indsæt web link. Herefter får man mulighed for at rette et eksisterende link (eller slette det). Side 37

38 Appendiks Nærmere information om TYPO3 findes når der er logget ind i TYPO3 under menupunktet Hjælp. TYPO3 TYPO3 Information TYPO3 Professionelt Web Content Management System TYPO3 er et flexibelt og professionelt Open Source Web-CMS baseret på PHP og MySQL. TYPO3 er til fri afbenyttelse under TYPO3-licensen (GNU/GPL). Læs mere på og Kort beskrivelse af de tilgængelige moduler: Web Page Sideindhold med Templa Voilá (TV) Nye TYPO3 bruger TV til styring af opsætning af indholdet. Dette modul giver dig mulighed for at oprette og redigere websider. Kvik-redigerings-funktionen giver dig øjeblikkelig adgang til det primære indhold på siderne. Herudover kan du styre forskellige sprog, opdele indholdsområdet i spalter mv. Endeligt kan du tilgå de TYPO3 extention der er installeret f.eks. gæstebog-, forum-, News, Nyhedsbrev, Login mv.. Side Sideindhold Ældre model for redigering af sideindhold, findes kun i ældre TYPO3 løsninger Vis Vis siden Viser udseendet af den nuværende side og lader dig redigere indholdet direkte. Liste Liste over database-records Modulet Web>Liste giver dig den mest grundliggende tilgang til databaseelementerne på en side. Mens andre moduler hovedsagligt er specialiserede indenfor enkelte operationer på enkelte databasetabeller, så giver dette modul ultimativ adgang til de egentlige databaseelementer som er tilgængelige for en bruger. Info Siderelateret information, fx. visningsstatestik, ændrings-log, element-optælling Modulet Web>Info fokuserer på statistisk information om sider. Dette omfatter sidevisningsstatestik samt en opdateringslog som lader dig gennemse ændringsforløbet for en side. Du kan også få et overblik over antallet af elementer på hver side samt sidernes indstillinger alt sammen præsenteret i den klassiske træstruktur. Side 38