af 1 side 1 Typo3 vejledning for redaktører og skribenter i BMI GENERELT...3 LOGIN...3 STARTSIDEN...4 SIDE...5 SIDE ELEMENTER...6 SIDE LAYOUT...7 STJÆL MED ARME OG BEN HEL SIDE...8 STJÆL MED ARME OG BEN ELEMENT...9 TEKST REDIGERING...10 FRONT-END REDIGERING (1)...10 FRONT-END REDIGERING (2) FRA WEB SIDE...11 FRONT-END REDIGERING (3) TEKST REDIGERING...12 REDIGER TABEL...13 GEM TEKST...14 NYHEDER...15 SKRIV NYHEDSARTIKEL (1)...15 SKRIV NYHEDSARTIKEL (2)...16 SKRIV NYHEDSARTIKEL (3)...17 BILLEDER...18 INDSÆT BILLEDE (1) - OVERSIGT...18
side 2 af 2 INDSÆT BILLEDE (2) PICASA EXPORT...19 INDSÆT BILLEDE (3) WEB-KLAR...20 INDSÆT BILLEDE (4) UPLOAD TIL TYPO3...21 INDSÆT BILLEDE (5) OPRET MAPPE...22 INDSÆT BILLEDE (6) - UPLOAD...23 INDSÆT BILLEDE (7) INDSÆT I ARTIKEL...24 INDSÆT BILLEDE (8) VÆLG FRA TYPO3 BILLEDER...25 INDSÆT BILLEDE (9) BILLEDET INDSAT...26 DOKUMENTER...27 WORD, EXCEL, PDF MM. (1) - UPLOAD...27 WORD, EXCEL, PDF MM. (2) INDSÆT LINK TIL DOKUMENT...28 WORD, EXCEL, PDF MM. (3) INDSÆT LINK TIL FILE...29 WORD, EXCEL, PDF MM. (4) ÅBN LINK I NYT VINDUE...30 WORD, EXCEL, PDF MM. (5) LINKET ER KLAR TIL BRUG...31 LINKS TIL TYPO3 SIDER OG EKSTERNE SIDER...32 Kommentarer og spørgsmål kan sendes til preben@bkjeldsen.dk.
af 3 Generelt Login Brug nedenstående link for at få adgang til at redigere BMIs hjemmeside. http://bmi-egelund.dk/typo3/ Henvend dig til webmaster/redaktør for din afdeling for at få et brugernavn og password. Har du brug for hjælp til layout eller brug af typo3 i almindelighed, så henvend dig til preben@bkjeldsen.dk. Han hjælper gerne med at oprette nye sider, lave nyhedsspalter, kalender og lignende ting som man sjældent laver og som er lidt komplicerede at huske. side 3
af 4 Startsiden Denne side vises umiddelbart efter login. Vi siger også, at man befinder sig i back-end, når man er nede i maskinrummet. I venstre side er der adgang til at vælge forskellige dele af typo3 bruger interfacet. De vigtigste er: Page. Giver adgang til at vælge og redigere sider. Man navigerer omtrent på samme måde som i Windows filsystemet. Filelist. Giver adgang til et område, som bruges til at lagre billeder og andre filer. Når billeder/filer er placeret her, kan benytte dem på de sider, man laver. side 4
af 5 Side Et billede som dette vises efter tryk på Page øverst til venstre. Ved tryk på + ekspanderes en knude, så man kan se de sider, der ligger under den. Ved tryk på foldes siderne sammen igen Ved tryk på en sides navn vises sidens indhold på overordnet niveau Ved tryk på det lille ikon foran en sides navn får man via en menu adgang til en række funktioner på siden. Bl.a. oprettelse af nye sider. Hierarkiet af sider svarer til menu hierarkiet på hjemmesiden. Så man redigerer menuen ved at flytte sider. En side kan være skjult. Det styres ved at klikke på ikonet foran sidens navn. Fra menuen vælges Hide/Unhide. En skjult side er markeret med et Indkørsel forbudt skilt. En side kan være skjult i menuen men være synlig via et link til siden. Dette styres ved at klikke på sidens navn og i højre side klikke Edit properties. Et stykke nede kan man vælge Hide in menu. Når man er færdig, gemmes siden ved at klikke på et diskette ikon foroven. En side, der er skjult i menuen, vises dimmed. side 5
af 6 Side elementer Når man har trykket på en sides navn, viser systemet i højre side de elementer, som befinder sig på siden. Man kan have en række uafhængige tekster med billeder på siden. Elementerne redigeres enkeltvis, og de kan flyttes og kopieres. Vi benytter som regel kun de kolonner, der hedder Left og Normal. Hvis man kun placerer elementer i Left, fylder de hele pladsen ud. Ellers deles pladsen mellem de elementer, der står i Left og dem, der står i Normal. Når man skal lave nye elementer er det nemmeste at kopiere et eksisterende se senere Stjæl med arme og ben. Man kan også oprette et nyt element ved at trykke på ikonet med hvidt plus på grøn baggrund. Vælg altid Regular text element. side 6
af 7 Side layout Her er et eksempel, hvor der er elementer i Left (Velkommen ) og i Normal (Links) kolonnerne. side 7
af 8 Stjæl med arme og ben hel side I mange tilfælde har andre lavet noget i stil med det, du har i tankerne. I stedet for at starte fra scratch, så tag en kopi af det andre har lavet og tilpas tekst mv. til din situation. Når du har fundet noget, du vil kopiere, skal du først finde den tilsvarende side ved at navigere i side hierarkiet. Hvis du vil kopiere en hel side, klikker du på ikonet foran sidens navn. Fra den menu, der kommer frem, vælger du copy. Nu klikker du på ikonet foran navnet på den eksisterende side, der skal ende med at stå ovenover den nye side, du er ved at kopiere ind. Fra den menu, der kommer frem, vælger du Paste after. Man kan flytte sider ved at klikke på ikonet foran sidens navn og fra menuen vælge More options og fra undermenuen vælge Move page. Derefter skal man klikke på en af de pile, der viser mulige indsætningssteder. side 8
af 9 Stjæl med arme og ben element Hvis du blot vil genbruge et enkelt element, f.eks. en tabel med en liste af personer, klikker du som vist til højre på ikonet lige over den ønskede tekst. Fra den menu, der kommer, vælger du Copy. Nu bevæger du dig til den side, hvor kopien skal sættes ind. Du klikker på sidenavnet og klikker på det eksisterende element, som skal ende med at stå ovenover det indkopierede. Man kan efterfølgende flytte elementet op og ned med de to pile ikoner. Der er også en mere avanceret flyttefunktion, hvis man fra elementets menu vælger More options og fra undermenuen vælger Move element. Der fremkommer en oversigt over mulig indsætningssteder på den aktuelle side. Man kan under oversigten vælge en anden side, der skal flyttes til. Gør man det, viser systemet mulige indsætningssteder på den valgte side. side 9
af 10 Tekst redigering Front-end redigering (1) HUSK ALTID efter redigering at udføre funktionen Clear FE Cache (forneden i menuområdet til venstre). Det er n ødvendigt for at besøgende kan se dine rettelser. Den lettelse måde at ændre i en eksisterende tekst er at vælge en side i navigationsområdet til venstre, klikke på dens navn og derefter trykke på forstørrelsesglasset øverst i det højre område. Nu åbnes siden som de besøgende på sitet ser siden med den lille krølle, at der på siderne befinder sig små blyanter rundt omkring. Ved tryk på en sådan blyant åbnes teksten lige før blyanten i et redigeringsmodul nu kan man rette i teksten. Hvis man kender elementerne på siden, kan tekstredigering også startes direkte fra billedet vist i højre side (uden at vise web siden) ved at klikke på blyanten foran det element, der skal redigeres. side 10
af 11 Front-end redigering (2) fra web side Når man har åbnet en side kan man navigere rundt på samme måde som besøgende udefra.. Så det er nemt at finde det sted, hvor man ønsker at lave en rettelse. I dette eksempel tryk på blyanten lige efter teksten. side 11
af 12 Front-end redigering (3) tekst redigering Efter tryk på blyant vises elementet i et tekstredigeringsmodul. Ovenover selve tekstvinduet er der en lang række ikoner, som svarer til funktioner. Desuden er der en liste af afsnits typografier til rådighed (Paragraph). Samt typografier til markerede ord (Text). Når markøren placeres over et ikon fortæller systemet hvad funktionen gør. Med tekst modulet kan man bl.a. Indsætte hyperlinks Indsætte billeder Indsætte tabeller Benytte foruddefineret typografi Generelt er det en god idé altid at placere sin tekst i en tabel. Det giver gode muligheder for at styre bredden af teksten samt lave opstillinger med tekst ved siden af billeder og lignende. HUSK altid at gemme, når du har lavet rettelser. Hvis man trykker på noget som ikke har med redigering at gøre, vises et nyt billede og systemet advarer IKKE om, at man ikke har gemt. Det er en god arbejdsmetode at gemme jævnligt og kontrollere resultatet. Se næste side for beskrivelse af gemmefunktionerne. side 12
af 13 Rediger tabel De 3 indrammede ikoner bruges til at lave nye rækker og slette rækker. Funktionerne arbejder i forhold til den tabel række, markøren befinder sig i. 1. Den første funktion indsætter en række foran den aktuelle række med samme layout som den aktuelle række. 2. Den næste funktion indsætter en række efter den aktuelle række med samme layout som den aktuelle række. 3. Den tredje funktion sletter den aktuelle række. NÅR MAN SKAL LAVE EN NY TABEL, ANBEFALES DET AT TAGE EN KOPI AF EN, ANDRE HAR LAVET OG SOM LIGNER. DER FINDES EN RÆKKE FUNKTIONER TIL AT STYRE CELLERS UDSEENDE OG BREDDE, SOM MAN KAN PRØVE AT LEGE MED. ELLERS KONTAKT HJEMMESIDEKONSULENTEN, SOM GERNE HJÆLPER MED AT FÅ TABELLENS LAYOUT PÅ PLADS. side 13
af 14 Gem tekst Der er 3 forskellige gemmefunktioner, de benytter alle en diskette som ikon som i Windows. De ses øverst til venstre i skærmbilledet. Disketten alene gemmer teksten man bevarer teksten på skærmen. Disketten med forstørrelsesglas oveni gemmer teksten og åbner en visning af siden som den ser ud udefra. Dette er den anbefalede metode, så man gemmer og straks kontrollerer om resultatet er som ønsket. Disketten med et kryds over gemmer teksten og lukker den. Krydset uden diskette lukker teksten uden at gemme de rettelse man måtte have lavet. side 14
af 15 Nyheder Skriv nyhedsartikel (1) En nyhedsartikel placeres automatisk på forsiden med en appetitvækker. Ved tryk på artiklen kan læseren se den fulde artikel. Nyhedsartikler ligger i en særlig side, som man skal vælge (klikke på) i navigationsområdet til venstre. For fodbold hedder den Artikler og ligger under Forside. I andre afdelinger hedder den oftest noget med Nyheder. Nå nyhedssiden er valgt, trykkes på liste ikonet markeret med rødt på billedet til højre. Nu fremkommer bl.a. en liste over de nyheder, som befinder sig på siden. side 15
af 16 Skriv nyhedsartikel (2) I højre side ses nu listen af eksisterende nyheder. Ud for hver er der funktioner til redigering mv. Man opretter en ny ved at trykke på ikonet markeret med rødt over listen af nyheder. side 16
af 17 Skriv nyhedsartikel (3) Når man har valgt en nyhedsartikel fremkommer nogle særlige felter, som har betydning for denne slags tekster. Følg instruktionerne angivet med rødt. HUSK trin 1, vises nyheden ikke, da nyhederne sorteres efter dato/tid. I Appetitvækker (Teaser text) indled da altid med, hvor nyheden kommer fra/hvad hovedemnet er. Det er vigtigt, fordi vi har sider som samler nyheder fra alle afdelinger. F.eks.: Fodbold Senior:: De 2 kolonner er vigtige. Hvis man senere ønsker at rette i en sådan artikel kommer det samme modul frem, når man trykker på blyanten i listen af artikler. Bemærk også, at man kan sætte start- og sluttidspunkter på, så artiklen kun vises i et begrænset tidsrum. Det kan være aktuelt for indbydelser/indkaldelser og lignende. HUSK at gemme jævnligt. side 17
af 18 side 18 Billeder Indsæt billede (1) - oversigt Brug af et billede på en side indebærer en række trin. Før du starter, skal du brug et billedprogram. Den følgende vejledning benytter Picasa, som man gratis kan downloade fra picasa.google.com. Programmet finder selv billeder på din computer og viser dem i en mappe struktur til venstre. De overordnede trin, som gennemgås i det følgende er: Billedet lægges på din computer (fylder typisk 0,6 1,5 Mb) Billedet omformatteres til en størrelse og opløsning (fil størrelse) som er passende til brug på hjemmesiden (ca. 100 Kb) Det omformatterede billede uploades fra din computer til typo3 fil listen Du indsætter billedet i din artikel Der er brug for et program til omformattering af billeder..
af 19 Indsæt billede (2) Picasa export I Picasa finder du det eller de billede, du ønsker at benytte på hjemmesiden. Når du klikker på et billede, udvælges det og vises nederst til venstre. Flere billeder kan vælges ved at trykke på shift tasten, når efterfølgende billeder vælges. Du vælger Export funktionen (knap forneden til højre). Systemet åbner en dialog, hvor du kan vælge hvor Picasa skal placere omformatterede billeder. Vælg bredden 500 pixels og kvaliteten 90. Tryk på OK. side 19
af 20 Indsæt billede (3) web-klar Picasa laver en kopi af billederne efter dine anvisninger og åbner den mappe, hvor billederne er blevet placeret. De er nu klar til at blive overført til typo3. side 20
af 21 Indsæt billede (4) upload til typo3 I typo3 vælges i venstre side Filelist. Nu skal du vælge en mappe, hvori billedet skal placeres. Tryk på + for at ekspandere lige som i Windows. Tryk på mappens navn (ikke ikonet foran) for at få vist indholdet af mappen i højre side. Organiser efter emne, så det ikke blive en stor rodebunke. Evt. efter de sider, billederne hører til. Hvis der ikke i forvejen er en passende mappe under din afdeling, så lav en ny ved at trykke på New knappen i højre side, når du har vist den mappe, hvori den nye mappe skal placeres. side 21
af 22 Indsæt billede (5) opret mappe Opret en ny mappe sådan: Efter at have trykket på New på foregående billede: Indtast navnet på den ny mappe (folder). Tryk på Create folders knappen. side 22
af 23 Indsæt billede (6) - upload Upload af billede. Fra et billede, hvor du viser indholdet af en mappe, vælger du knappen Upload files i højre side. Nu åbner systemet en dialogboks, hvor du kan vælge en fil fra din egen computer. Find filen og tryk på Åbn. Herefter kopierer systemet filen fra din PC til typo3 fil listen i den mappe, du stod i. Kontroller det evt. ved at trykke på mappens navn i venstre side. side 23
af 24 Indsæt billede (7) indsæt i artikel Nu er du klar til at indsætte billedet i en artikel. Åben artiklen ved at trykke på blyanten svarende til artiklen. Tryk på Indsæt billede ikonet i tekst editoren. Herefter åbnes en dialog, hvor du kan vælge billede. side 24
af 25 Indsæt billede (8) vælg fra typo3 billeder Øverst i dialogboksen er der 3 faneblade. Tryk på New plain image (ellers indsættes billeded i bredden 300 pixel). I venstre side af dialogboksen vises mappestrukturen i typo3 fil listen. Klik dig frem til den mappe, hvor billedet ligger, ved at trykke på + og mappenavnet. Når du har lokaliseret billedet, tryk så på billednavnet for at indsætte det. side 25
af 26 Indsæt billede (9) billedet indsat Voila billedet er indsat i din artikel, og du er klar til at gemme og vise ved at trykke på disketten med forstørrelsesglas foroven til venstre i tekst editor vinduet. Billeder kan indsættes i tabel celler. Det kan f.eks. bruges, hvis man vil lave en liste over personer med billeder og tilhørende navn og tekst ved siden af. side 26
af 27 Dokumenter Word, Excel, pdf mm. (1) - upload Hvis man har dokumenter, som man gerne vil gøre tilgængelige på hjemmesiden, minder processen om håndteringen af billeder. Vi antager, at du har dokumentet tilgængeligt på din PC. De trin, du skal igennem er: Upload dokumentet til typo3 Opret et link fra en artikel til dokumentet, så det åbnes i et nyt vindue. Det første trin i processen er, at du i typo3 vælger Filelist i venstre side. Du finder/opretter den mappe, dokumentet skal placeres i og trykker på mappens navn. Du vælger i højre side knappen Upload files, og typo3 åbner en dialog, så du kan vælge dokumentet, der skal uploades fra din PC. Du kan kontrollere, at dokumentet blev uploaded, ved at trykke på mappens navn i venstre side. side 27
af 28 Word, Excel, pdf mm. (2) indsæt link til dokument Du er nu klar til at indsætte et link til dokumentet. Du åbner din artikel og skriver den tekst, som skal fungere som link. Du markerer teksten og vælger link ikonet foroven i højre side (ligner en globus med en kæde). Nu åbner typo3 en dialog, hvor du kan vælge, hvad der skal linkes til. side 28
af 29 Word, Excel, pdf mm. (3) indsæt link til file I den dialog, der åbnes, vælger du foroven i fanebladene File. Dernæst scroller du til bunden af dialogen. side 29
af 30 Word, Excel, pdf mm. (4) åbn link i nyt vindue Her vælger du under Target værdien New window for at dokumentet kan blive åbnet i et separat vindue. Derefter finder du mappen, hvori dokumentet ligger ved at trykke på + samt mappenavne. Når dokumentet er fundet, trykkes på dokumentnavnet. side 30
af 31 Word, Excel, pdf mm. (5) linket er klar til brug Og voila dit link er blevet lavet. Tryk på diskette med forstørrelsesglas for at gemme og afprøve linket. side 31
af 32 Links til typo3 sider og eksterne sider Metoden for at indsætte sådanne links er næsten den samme som beskrevet på de foregående sider. Når dialogen til at vælge, hvad der skal linkes til, kommer frem og man vælger Page, viser systemet hierarkiet af sider, og man klikker på den side, der skal linkes til. Standarden er, at den linkede side vises i samme vindue, som den side, man kommer fra. Når dialogen til at vælge, hvad der skal linkes til, kommer frem og man vælger External URL, ønsker man normalt denne side åbnet i et nyt vindue. Se hvordan man gør under Word, Excel Man sletter et link ved at male link teksten, klikke på link ikonet (globus med kæde) og bruge funktionen Remove link. BRUG ALTID denne metode for at slette links. Hvis man blot maler link teksten og sletter, bliver linket ikke slettet korrekt. Så FØRST Remove link, derefter slette tekst. side 32
af 33 side 33