TYPO3 TRIN FOR TRIN 3

Transkript

1 TYPO3 TRIN FOR TRIN 3 De indledende øvelser er fuldstændig de samme som i TYPO3 TRIN FOR TRIN 1 side 1-2. Du åbner altså din browser, skriver ale.dk/typo3 i Adressefeltet, og klikker på ordet Side i menuen til venstre. Du skal nu sætte et nyt element ind på en side her siden Dit & Dat klik på sidens titel. Når du skal indsætte et element på en ny side gøres det enten ved at bruge Opret nyt element i toppen af denne kolonne eller Opret sideindhold Du får da en liste i højrekolonnen, hvor du kan vælge hvilken type element du vil have. Vælg nu Tekst med billede ved at klikke på teksten. Nu åbner der sig et Redigeringsvindue i den brede højrekolonne, der mere eller mindre ser ud som det du ser på næste side. 1

2 Tekst med billede Redigeringsvinduet ligner det redigeringsvindue du får ved Almindeligt tekstelement, med der er en del udvidelser nederst, som gør det muligt at arbejde praktisk med billeder. Under Type/Ramme øverst, gør du klogt i at vælge enten Usynlig eller Streg efter. Det stabiliserer dit element! Under Overskrift skriver du den overskrift du vil have, men brug korte overskrifter, bliver de for lange skifter de størrelse! Du kan også vælge hvilken Type overskrift du vil have: en stor (Stor rubrik som er blå), eller en af fire små (rød/grøn/gul/blå) Under Tekst skriver du teksten. Det er her muligt at formatere teksten, f.eks. kan du vælge FED, KURSIV eller UNDERSTREGET tekst, eller du kan anbringe teksten venstrejusteret, centreret eller højrejusteret, eller du kan lave punktopstillinger eller opstillinger med tal, og endelig er det et par andre muligheder som vil blive behandlet i andre vejledninger. Den nederste store blok handler om det billede, eller de billeder, der skal anbringes sammen med teksten. Dette gennemgås punkt for punkt på de følgende sider. Du har forhåbentlig allerede: -valgt Usynlig under Ramme -skrevet din overskrift under Overskrift -skrevet en god del tekst under Tekst og er så klar til at fortsætte på næste side. 2

3 Billeder (fra serveren) Lige under Tekstfeltet er der mulighed for at indsætte billeder fra to kilder. Du skal ENTEN vælge muligheden på denne side ELLER muligheden på næste side! Her ser du den øverste del af billedblokken hvor du indsætter billeder. 1. Ved at klikke på får du en oversigt over de mapper du har adgang til på serveren: (du skal muligvis klikke på det lille + foran filer for at se undermapperne) Denne del kan bruges til at lægge billeder i filmapper på vores server DET ER DER INGEN GRUND TIL AT GØRE! Her klikker du på ordet testbilleder, og kan så se alle billederne i denne mappe. Vælg det billede der hedder test400 ved at klikke filnavnet. 3

4 Billeder (fra din egen computer) Den anden mulighed er at hente billeder fra din egen computer. Det gør du ved at klikke på knappen Gennemse, der åbner en velkendt dialogboks: hvorefter du, på din egen computer, finder det billede du vil bruge, og klikker på Åbn OBS! Billedet må ikke fylde mere end 1MB! 4

5 Billedets position Position giver næsten sig selv ud fra de viste eksempler, men det er væsentligt at du checker hvordan det kommer til at se ud på hjemmesiden ved at klikke på med jævne mellemrum. Vælg en af de fire nederste! (ved at klikke på én - de hedder I tekst, højre og I tekst, venstre) Vælg 1 i Kolonner hvis det ikke allerede er valgt. Bredde Bredde er MEGET væsentlig! Højde bør du sjældent definere. Da du er på siden Dit & Dat, som er en underside, der har en Normal-kolonne på 500 pixels, og ønsker at billedet skal fylde ca. halvdelen af kolonnen skal du skrive 240 under Bredde For at gøre det muligt for besøgende på hjemmesiden at se billedet i fuld størrelse kan du sætte et flueben i Klik-forstør (det gør du ved at klikke i firkanten) 5

6 Billedtekst Under Billedtekst skriver du en lille tekst, der så bliver vist i fed skrift under billedet. Når du har skrevet billedteksten er du klar til at se hvordan det kommer til at se ud på hjemmesiden. Det gør du f.eks. ved at klikke på knap nummer 2 øverst der gemmer de ændringer du har lavet, og åbner siden i et nyt vindue, så du kan se om det fungerer. Når du har set hvordan det ser ud på hjemmesiden lukker du det nye vindue der åbnede, og retter evt. de fejl der var i teksten. Herefter klikker du evt. igen på knap nummer 2 øverst for at se om det nu er som det skal være. Herefter lukker du igen det nye vindue der åbnede, etc., etc. Når du er tilfreds lukker du elementet ved at klikke på som samtidig gemmer dine ændringer. Resultatet skulle gerne se nogenlunde sådan ud: Så er du klar til at sætte et nyt element ind på siden. (se næste side!) 6

7 KUN BILLEDER Nu skal du sætte et nyt element ind EFTER det du lige har sat ind. Det gør du ved at klikke på det lille tekst-ikon element du lige har sat ind. der er placeret ved siden af blyanten i det Du får nu igen mulighed for at vælge elementtype: Denne gang klikker du på teksten Kun billeder (det tredie element) -og får nu et Redigeringsvindue der ligner det du havde tidligere, den eneste forskel er at Tekstfeltet mangler. -vælg Usynlig under Ramme -skriv din overskrift under Overskrift (du kan selvfølgelig også lade billederne stå uden overskrift) Denne gang skal du indsætte 3 billeder gør som vist på side 3, men gør det 3 gange! Du skal først vælge billedet test400 derefter test500 og til sidst test800. Under Position vælger du Under, center (hvis det ikke allerede er valgt) - og under Kolonner vælger du 2 (hvis det ikke allerede er valgt) Under Bredde vælger du og du sætter et flueben i Klik-forstør Du skriver INGEN billedtekst! 7

8 Nu skal du igen tage en tur i karusellen: Det gør du f.eks. ved at klikke på knap nummer 2 øverst der gemmer de ændringer du har lavet, og åbner siden i et nyt vindue, så du kan se om det fungerer. Når du har set hvordan det ser ud på hjemmesiden lukker du det nye vindue der åbnede, og retter evt. de fejl der var. Herefter klikker du evt. igen på knap nummer 2 øverst for at se om det nu er som det skal være. Herefter lukker du igen det nye vindue der åbnede, etc., etc. Når du er tilfreds lukker du elementet ved at klikke på som samtidig gemmer dine ændringer. Det sidste element er placeret under det første du lavede, og skulle gerne se nogenlunde sådan ud: Læg mærke til at billederne, på trods af at de egentlig har tre forskellige bredder (det kan du se ved at klikke på dem hvis du har husket at vælge Klik-forstør) alligevel er lige brede DU har valgt at de skal være 240 pixels brede. Og læg også mærke til at de er placeret i to kolonner som DU har valgt. 8