Manual Grunderna Av
1. Basics Introduktion 3 Vanliga uttryck 3 Logga in 3 Användarinställningar 4 Fältbeskrivning 5 2. Sidhantering Skapa en ny sida 6 Ta bort sida 9 Flytta sida 10 3. Filhantering Skapa katalog 12 Ta bort katalog 13 Ladda upp filer 14 Ta bort filer 14 4. Texthantering Skapa text 15 Ta bort text 18 Editera text 18 Länka text 18 Ta bort formatering 21 5. Bildhantering Lägg in bilder 22 Ta bort bilder 25 Länka bilder 25 6. Formulär Skapa formulär 25 Skapa omdirigeringssida 27 2
1. Basics Introduktion TYPO3 är en Internetbaserad programvara, som gör det möjligt för dig att redigera din hemsida oavsett var dig befinner dig. Allt du behöver är en dator med uppkoppling till Internet och en webbläsare. Vanliga uttryck Där finns vissa fackord som används genom denna presentation som du bör kunna. Frontend; detta är hemsidan framsida som besökaren ser. Backend; är själva TYPO3, arbetsutrymmet där själva redigeringen sker. Elements; är byggklossarna som sidan byggs upp av, själva innehållet. Logga in Öppna en webbläsare och skriv in hemsidesadressen, t ex http://www.pixelant.se, följt av /typo3 för att logga in TYPO3s backend. Tryck enter. (Fig.1) Fig. 1 3
Fyll i ditt användarnamn och lösenord, som erhållits av Pixelant AB, och klicka på Login. (Fig.2) Fig.2 Anvädarinställningar Användarinställningarna finner du i vänstermenyn. Klicka på User settings. Här får du möjlighet att ändra ditt lösenord, språk mm. Vi går nu över till det svenska gränssnittet. (Fig.3) Fig.3 4
Fältbeskrivning När du loggar in i TYPO3 möts du av två fält. Fältet till vänster är en meny som ger dig tillgång till olika redigeringslägen. Fältet till höger innehåller en beskrivning av de olika posterna i vänstermenyn. (Fig.4) Fig.4 Genom att klicka på en av posterna i vänstermenyn, försvinner beskrivningsfältet och ett mindre fält dyker upp istället, som innehåller en trädstruktur av hemsidan. (Fig.5) Fig.5 5
Genom att vänsterklicka på sidtiteln på en av sidorna i sidträdet kommer i sin tur att veckla ut ett tredje fält där redigeringen av sidorna sker. Varje sida i sidträdet representerar en menydel och en sida på hemsidan. (Fig.6) Fig.6 2. Sidhantering Skapa en ny sida Högerklicka på en sidtitel i sidträdet. Kom ihåg att utgå ifrån den sida du vill skapa en undersida till. Välj Ny i menyn. (Fig.7) Fig.7 6
I det högra fältet dyker ett antal valmöjligheter upp. Välj Sida (in i) för att skapa sidan, som då kommer att ärva mallutseendet för undersidor. Denna sida lägger sig som en undersida. För att skapa en sida som ligger i linje med den du utgick ifrån väljer du istället Sida (efter) (om du gör något av dessa val kan du fortsätta direkt till sista stycket för denna del av manualen). Om du väljer Page (select position) tas du igenom en guide där du får ett flertal valmöjligheter, som t ex att välja en specifik mall. (Fig.8) Fig.8 Nästa steg efter att ha klickat för guide är att välja position för sidan genom att klicka på en av pilarna. (Fig.9) Fig.9 7
Välj vilken typ av mall som ska användas för sidan. Genom att välja Standardmall ärver den undersidesmallen för huvudsidan. (Fig.10) Fig.10 Nästa steg blir att döpa sidan (1), samt välja om sidan skall vara dold (2) till att börja med (detta görs om hemsidan ligger live). Tänk på att sidtiteln kommer representera en del i menyn, så att den inte blir för lång. Fältet "Alias"(3) lämnas tomt. Spara och stäng dokumentet (4). (Fig.11) Fig.11 8
Om du valde att skapa sidan utan guiden kommer du direkt till sidans inställningar. Det som behövs göra här är att döpa sidan (1), samt välja om sidan skall vara dold (2) till att börja med (detta görs om hemsidan ligger live). Tänk på att sidtiteln kommer representera en del i menyn, så att den inte blir för lång. Checkboxen Visa inte i menyn (3) gör att man kan skapa en sida som inte syns i någon meny, men kan länkas till från en synlig sida. Fält 4 och 5 lämnas tomma. Spara och stäng dokumentet (6). (Fig.12) Fig.12 Ta bort sida För att ta bort en sida, högerklicka på sidan i fråga i sidträdet för att få upp valmenyn. Välj Ta bort. (Fig.13) Fig.13 9
Ett pop-up fönster kommer att fråga dig om du verkligen vill ta bort sidan. Klicka OK. Sidan kommer nu att försvinna från sidträdet. Sidor som ägs av en annan användare kan inte tas bort av dig. (Fig.14) Fig.14 Flytta sida Det finns två sätt att flytta en sida. Antingen använder man drag n' drop-funktionen, genom att vänterklicka på sidan du vill flytta och släppa den på sidan du vill flytta den in i eller efter. En meny dyker upp och du kan välja vad sidan skall göra. (Fig.15) Fig.15 Det är också möjligt att högerklicka på sidan och välja Klipp ut (Fig.16). Högerklicka på sidan du vill klistra den utklippta sidan in i eller efter. Välj Klistra in i eller Klistra in efter (Fig.17). 10
Fig.16 Fig.17 11
3. Filhantering Om ni använder filhanteringssystemet DAM, fungerar detta annorlunda och manual för denna finns separat. Skapa katalog Välj Visa filer i vänstermenyn. Detta öppnar upp filarkivet där bilder mm förvaras för att vara lättåtkomliga när mna arbetar med TYPO3. (Fig.18) Fig.18 För att skapa en ny katalog används samma princip som när du skapde en ny sida. Högerklicka på en befintlig katalog och välj Ny. (Fig 19) Fig.19 12
Genom att använda dropdown-menyn (1) kan du skapa upp till 10 kataloger åt gången. Skriv in titeln för katalogen (2). När du är klar med detta klickar du på Skapa katalog. (Fig.20) Fig.20 Ta bort katalog För att ta bort en katalog, högerklicka på den och välj Ta bort i menyn. Kataloger som innehåller filer går ej att ta bort. Då måste man först gå in och ta bort dem i katalogen. (Fig.21) Fig.21 13
Ladda upp filer För att ladda upp filer, välj en katalog i fillistan och högerklicka. Välj därefter Ladda upp filer. (Fig.22) Fig.22 Man kan som mest ladda upp 10 filer per gång (1). Klicka på "Browse" för att komma åt den lokala datorns hårddisk (2). Utforskaren öppnas upp. Välj en fil och klicka öppna. En söksträng lägger sig nu I det vita fältet (3). Fortsätt på samma sätt till du lagt till alla filer och välj därefter Ladda upp filer. (Fig.23) Fig.23 Ta bort filer För att ta bort filer, klicka på ikonen framför filnamnet du vill ta bort och välj Ta bort. (Fig.24) Fig.24 14
4. Texthantering Skapa text Allt innehåll på hemsidan byggs upp av såkallade element. Markera sidan du vill jobba med genom att vänsterklicka på sidtiteln i sidträdet. (Fig.25) Fig.25 I det tredje fältet, klickar du på ikonen Skapa nytt element. (Fig.26) Fig.26 15
En lista som innehåller alla typer av element, som går att lägga på sidan, visas. Välj Vanligt textelement. (Fig.27) Fig.27 Ett informationsformulär presenteras. Det innehåller tre stycken flikar; Allmänt (1), Text (2), Åtkomst (3. Under allmänt-fliken fyller du i rubrik (4), som kommer att synas högst upp i elementet. Det är möjligt att välja olika storlekar på rubriken, samt även välja dold, om man inte vill att rubriken skall synas i frontend (5). Om du saknar något av fälten, kan det bero på att du inte har checkat i Visa sekundära inställningar (6). (Fig.28) Fig.28 16
Välj flik nummer två, Text. Här skriver du in textinnehållet för hemsidan. Det fungerar i likhet med MS Word och det går t ex att göra texten fetstilt, kursiv eller lägga in en punktlista. (Fig.29) Fig.29 Välj flik nummer tre, Åtkomst. Här kan du tidsstyra publiceringen av elementet. Sätt start- och slutdatum vid behov. Det är ett bra sätt att hantera t ex kampanjer. (Fig.30) Fig.30 Efter att du fyllt i infotmationen, GLÖM INTE ATT SPARA! 17
Ta bort text För att ta bort ett helt textelement, använd papperskorg- eller bryt länk-ikonen. (Fig.31) Fig.31 Redigera text För att redigera ett textelement, klicka på penn-ikonen. (Fig.32) Fig.32 Länka text För att länka text, markeras texten som skall länkas. Klicka därefter länk-ikonen enligt nedan. I äldre versioner används en jordglob som ikon, och man hoppar även över nästa steg. (Fig.33) Fig.33 18
Ett fönster öppnas upp och du klickar här på ikonen enligt nedan. (Fig. 34) Fig.34 Ännu ett fönster öppnas och du får nu fyra länkningsmöjligheter. I första fliken kan du länka till en intern sida (1) och om du klickar på pilen (2) jämte sidan får du även tillgång att länka till ett specifikt element (3). (Fig.35) Fig.35 19
Andra fliken ger dig möjlighet att länka till en fil, t ex en pdf. (Fig.36) Fig.36 Tredje fliken hanterar länkning till en extern URL. Fyll i web-adressen (1) opch klicka Sätt länk (2). (Fig. 37) Fig.37 Fjärde fliken använder du för att länka till en e-postadress. Fyll i adressen (1) och klicka sedan på Sätt länk (2). (Fig.38) Fig.38 20
Vid något av ovanstående val, stängs fönstret och du hamnar åter vid det första fönstret. Här ser du tydligt valet du gjort. Om du vill att länkadressen ska hamna på en ny sida eller i samma sida, görs detta val i dropdown-menyn för target. Välj Insert för att infoga länken i texteditorn. (Fig. 39) Fig. 39 Ta bort formatering Om du arbetar i ett Word-dokument, för att sedan kopiera in texten i textelementet, krävs det att du rensar texten från eventuella formateringar. Detta gör du genom att kopiera från Worddokumentet och därefter klicka på ikonen med ett klippbord och Word-symbol. (Fig. 40) Fig.40 21
Ett popup-fönster öppnas och här använder du Ctrl + V för att klippa in den kopierade texten. Klicka därefter Insert. (Fig.41) Fig.41 5. Bildhantering Lägg in bilder Bilder kan läggas upp, antingen genom att skapa ett element som innehåller både text och bild, eller genom ett element med endast bilder. (Fig. 42) Fig.42 22
Gå in på fliken Media för att hantera bilderna. Klicka på den lilla mapp-ikonen för att komma åt filträdet. Det går även att använda sig av Browse -knappen för att komma åt den lokala hårddisken, men i detta fall kommer bilden bara att spara tillfälligt i just detta element. (Fig.43) Fig. 43 Välj en bild genom att klicka på filnamnet (1), eller flera bilder (använd då pluset till höger om filnamnet). Om bilden inte ännu finns i fillistan, kan du klicka på fliken Ladda upp (2) och där välja Browse -knappen för att ladda upp bilder, från den lokala hårddisken, till vald mapp. Gå sedan tillbaka till fliken Media för att välja filen. (Fig.44) Fig. 44 Nästa steg blir att välja position (1), samt om man har flera bilder och vill att de ska ligga bredvid varandra, ställa in antal kolumner (2 ) att fördela dem över. Det går att ändra bildstorleken, utan att förvränga proportionerna, genom att sätta antingen bredd eller höjd på bilden i pixlar (3). Länka bild/bilder genom att klicka på globen (4). Vid länkning av flera bilder separeras adresserna med kommatecken. För att bilden ska förstoras vid klick, checkas denna ruta i (5). För att använda sig av en enklare bläddrarfunktion för bilder, checkas denna ruta i (6). (Fig.45) 23
Fig.45 Bildtext (1) som visas under bilden, lags in I det första fältet. Vid flera bilder separeras texterna med radbrytning. Alternativ texten (2) syns inte på själva sidan, men är fördelaktig att använda vid sökmotorsoptimering då även denna indexeras. Slutligen finns det något som heter titeltext (3), som är den lilla gula informationsrutad som visas då man håller markören över en bild eller länk. (Fig.46) Fig.46 24
Ta bort bilder För att ta bort en bild, markera filen och klicka på krysset intill rutan. (Fig.47) Fig.47 Länka bilder För att länka bilder, se punkt 4 i Fig.45 samt tillhörande text. 6. Forms Skapa formulär För att skapa formulär, skapa ett nytt element på vald sida och välj E-postformulär. (Fig.48) Fig.48 Välj fliken Formulär samt klicka på ikonen bredvid konfigureringsfönstret. (Fig.49) Fig.49 25
Välj vilka typer av fält du vill ha i formuläret genom dropdown-menyn (1) samt ge de olika fälten en etikett (2). Använd ikonerna till vänster (3) för att skapa nya formulärelement, samt för att radera eller byta plats på dem. Den detaljerade konfigurationen omfattas t ex av Fält (den fältinformation som skickas i mailet), Storlek (förändringar av fältens storlek) samt Värde (en förifylld text i formuläret). (Fig.50) Fig.50 Välj vad det ska stå på Skicka-knappen (1), checka i rutan för om mailet skall mottagas i HTMLformat (2), fyll i ämnet för mailet (3) samt slutligen mottagens e-postadress. (Fig.51) Fig.51 Spara slutligen konfigurationen, sparaikonerna finns överst, och glöm inte att även spara själva elementet! 26
Skapa en omdirigeringssida När ett kontaktformulär fylls i och skickas med E-postformuläret, finns det inget som indikerar att besökaren faktiskt skickat det. Därför brukar man skapa en omdirigeringssida, där man tackar för deras meddelande och ber att få återkomma. Denna sida är lämplig att skapa som en undersida till kontaktsidan, och man väljer att dölja den i menyn (Högerklicka på sidan och välj Ändra sidans inställningar, därefter checkas Dölj sidan i menyn i under allmäntfliken). Sidan kopplas sedan enligt nedan på samma sätt som man länkar till en sida. (Fig.52) Fig.52 27