Login / Status
developer.Resource
Home . Documentation . Document Library . Tutorials
Sponsors
hosted by punkt.deTYPO3 and Open Source Magazine

1.4. Rediger og opret sider og indhold

Rediger side

Vi ved at sider opbevarer deres synlige indhold i sideindholdselementer. At redigere en side må altså være at redigere sideindholdselementer!

Det er virkelig let at redigere sideindhold i TYPO3. Vælg Side-modulet (#1), klik på titlen på den side du vil redigere (#2) og, i "Kolonner"-visningen (#3), klik på rediger-ikonet (#4) for det sideindholdselement som du vil ændre:

Dette bringer denne redigeringsformular frem:

Øverst fortæller feltet "Type:" (#1) dig typen af sideindholdselement! I dette tilfælde "Tekst". Det kunne også være "Tabel" (som du så tidligere) eller "Billede" eller "Tekst m/Billede" osv. Undersøg selv mulighederne! Hver indholdselementtype har sit eget udseende og sine egne felter til indhold, og ved at indsætte forskellige elementer kan du opnå god variation på dit websted.

"Overskrift"-feltet (#2) indeholder overskriften og "Tekst"-feltet (#3) brødteksten. På websiden svarer det til:

Prøv at ændre værdien i feltet Overskrift og tryk på "Gem dokument og vis siden":

Fordi du gemte med knappen "Gem dokument og vis siden" vil frontend-vinduet automatisk blive vist efter et øjeblik:

Det TYPO3 gjorde var at sende ændringerne til webserveren, opdatere databasen med de nye informationer, rydde side-cachen og generere siden igen - ændringen er online med det samme og besøgende på dit websted vil nu se den nye overskrift i stedet for den gamle! Så let og hurtigt er det at vedligeholde websider med TYPO3!

Tip: En anden måde at aktivere sideredigering

I stedet for at klikke dig vej fra Side-modulet til sidetræet osv. er der også et "Rediger"-punkt i klik-menuen som også bringer Side-modulet frem:

Tip: QuickEdit - spar et museklik...

Hvis du ønsker hurtig adgang til dine sideindholdselementer kan du ændre Side-modulets visning til "KvikRedigering" i stedet for "Kolonner" - så bliver det første indholdselement på en side vist med det samme:

Ny side

Det er meget let at lave nye sider. Da sider altid er organiseret i sidetræets hierarki skal du starte med at vælge en placering til siden. Du kan selvfølgelig ændre det senere hvis du ønsker det.

For at oprette en ny side skal du bruge Side-modulet i Kolonner-visning for at starte "Ny side"-guiden - den vil hjælpe dig med at finde det rigtige sted at indsætte siden:

Så kommer en positionsvælger frem. Med denne kan du visuelt vælge den rigtige placering til siden:

Til slut bliver en formular til en ny side vist, og du kan indtaste sidens titel:

Gem og luk dokument.

Nu skulle sidetræet blive opdateret:

Og hvis du klikker på sideikonet for den nye side "Topscorer" skulle du se at menuen i frontend'en ligeledes er blevet opdateret helt automatisk!

Bemærk at siden refereres til med id'en "27" - den nye side fik altså automatisk uid-nummeret 27 ved oprettelsen.

Siden er stadig tom - vi skal have lavet nogle sideindholdselementer på siden!

Oprettelse af sideindholdselementer

I Side-modulet, klik på sidetitlen "Topscorer" i sidetræet og så på knappen "Nyt sideindhold":

Straks bliver en nydelig formular som denne vist (nedenfor). Dette giver dig adgang til at vælge en indholdselementtype - som jeg skrev tidligere laver forskellige indholdselementtyper forskellige slags indhold på websiden.

Lad os oprette "Tekst med billeder under":

Med det samme får vi denne formular. Indtast noget dummy-indhold og vælg et billede på din harddisk (find et lille jpeg-billede):

Tryk på "Gem dokument" knappen . Nu bliver billedet lagt op på webserveren og knyttet til det netop oprettede indholdselement. Dette skulle se sådan her ud (om alt gik vel):

På webstedet ser siden nu sådan her ud:

Indsætte yderligere indholdselementer

Tilbage i Side-modulet vises det nye indholdselement:

OBS: Mangler miniaturen? Hvis der ikke er en fin lille miniature af billedet her er TYPO3 formentlig ikke korrekt konfigureret til at bruge ImageMagick. Dette er sandsynligvis tilfældet hvis du ikke brugte Windows Installer Pakken (se installationskapitlet i denne gennemgang). Du kan referere til informationerne om installation på typo3.org og install mailinglist-arkiverne. Det er dog muligt at fuldføre denne gennemgang uden disse funktioner.

Klik på knappen "Nyt sideindhold" for at oprette yderligere et indholdselement med en punktopstilling efter dette:

Denne gang skal vi lave yderligere et valg oveni i det første - hvor skal elementet placeres? Før eller efter det eksisterende indholdselement?

Vi indsætter det efter det eksisterende. Nu mangler vi bare indholdet i punktopstillingen:

Bemærk at "Type" var prædefineret til "Punktliste" - dette kunne også have været valgt manuelt. Og du kan ændre det senere! Hvis du vil vide noget om de forskellige tilgængelige indholdselementtyper så husk det lille "?"-ikon - hjælpen er lige ved hånden!

Nu er der to indholdselementer på siden, et af typen "Tekst m/Billede" og en "Punktliste" - i nævnte rækkefølge:

I Side-modulet ser det sådan her ud:

Administration af indholdselementer

Du har lige prøvet at bruge "Nyt sideindhold"-guiden til at oprette nyt sideindhold. Guiderne i TYPO3 gør dog blot almindelige hurtige og enkle ved at lede dig direkte hen til de vigtigste muligheder; under overfladen kan alle mulighederne vælges, finjusteres og kontrolleres manuelt. Det vil du indse mens du arbejder videre med TYPO3. Tag dig tid til at udforske alle knapperne og valgmulighederne. Der er mange muligheder og du kan kan kun lære dem at kende hvis du tager dig tid til at kigge rundt!

Her er nogle få eksempler på faciliteter som du kan prøve:

Du kan oprette et nyt sideindholdselement efter det første ved at aktivere knap nr. 1. Standardvalget er indhold af typen Tekst - det kan ændres til det du har brug for. Knappen "Flyt element ned" (#2) bruges til at ændre rækkefølgen på flere indholdselementer på samme side/kolonne. På samme måde kan du bruge "Kopier", "Klip", og "Indsæt efter" faciliteterne fra Klik-menuen (#8) - de giver dig endda adgang til at kopiere og flytte elementer til andre sider! "Skjul/Vis"-knappen (#3) er en hurtig måde at ændre "Skjul"-indstillingen for et element og Papirkurven (#4) lader dig slette elementet helt (faktisk kan det gendannes hvis du kommer til at slette det ved et uheld).

Hvis du kun har brug for at redigere indholdet af brødtekstområdet i indholdselementet er det en rar facilitet at man kan klikke på "Rediger i tekstbehandler"-knappen (#5). Det åbner et "fuldskærms"-vindue som du kan redigere teksten i - rart hvis der er meget tekst! Som sædvanlig kommer der en kontekstafhængig menu op hvis du klikker på indholdselementets ikon. Sidst: du kan faktisk redigere ikke blot et indholdselement men to (eller flere) ved at klikke på "Rediger denne kolonne"-ikonet (#7).

Flyt side

Det er også let at flytte en side med den guide der er tilgængelig i Side-modulet. Lad os sige at vi vil flytte siden "Topscorer" fra dens nuværende placering til lige efter "Sitemap" i "Home"-sektionen:

Så får du vist et udsnit af sidetræet og ved at klikke på den øverste side går du et niveau op:

Og med et enkelt, logisk klik har du flyttet siden til den nye placering:

Sidetræet opdateres med det samme:

Brug af cut'n'paste-faciliteten til at flytte en side

"Flyt side"-guiden er definitivt det mest intutive værktøj for begyndere. Når du vil have et større overblik over flytning af elementer - inklusive sider - i TYPO3 bør du dog bruge den interne udklipsholder. Den virker stort set ligesom den du kender fra Windows: Du højreklikker på et dokument, vælger "Klip", så højreklikker du på den mappe hvor du vil indsætte det og vælger "Indsæt". Samme princip er implementeret i TYPO3. Lad os bruge det til at flytte siden tilbage igen:

"Klip" siden:

"Indsæt efter" "Report results"-siden:

Svar "OK":

Det var det! Siden er tilbage hvor den hører til:

Baggrund: Pas på - konsistente koncepter i farvandet!

Bemærk at de samme kopier/klip/sæt ind-principper kan bruges med sideindholdselementer på samme måde som med sider - ja, faktisk ethvert databaseelement eller enhver fil som TYPO3 administrerer kan håndteres på denne måde! Det er et fint eksempel på TYPO3's konsistente brug af koncepter hele vejen rundt i systemet - når du en gang har lært at bruge en facilitet vil en masse andre faciliteter være indlysende for dig! Hvis du holder øjnene åbne vil du få mange af disse "Aha!"-oplevelser når du ser hvordan tingene er designet til at passe sammen.

Synlighedsindstillinger - skjul sider, tidsstyret visning osv.

En facilitet som optræder for mange elementer - især sider og sideindholdselementer - er publiceringskontrolfelterne eller synlighedsindstillingerne. De ser sådan her ud for sider:

For indholdselementer er de placeret i bunden af formularen:

Skjul side

Prøv at sætte hak i "Skjul side"-feltet:

Smart som det er bliver sideikonet endda gråtonet og får et lille rødt kryds henover - nu er siden skjult!

Dette betyder naturligvis at du ikke kan se siden i frontend'en:

(Det er vigtigt at det er "Last Week"-siden du vælger "Vis" for!)

Se... ingen "This week"-side der!

MEN hvis du går direkte til "This week"-siden kan du faktisk se siden alligevel:

... fordi når du er logget ind som en backend-bruger kan du smugkigge siden - hvilket indikeres af den lille kasse nederst på siden:

Men! - det er for your eyes only. Ingen ude i verden kan se siden før du fjerner indstillingen "Skjul side" igen!

Tidsindstille sider og indholdselementer

Den meste typiske indstilling for styring af visning er nok at skjule sider og indholdselementer. Det er så almindeligt, at det faktisk har sit eget punkt i klikmenuerne:

Men du kan også afgøre hvornår en side skal blive online - hvilken dato! Prøv fx at indtaste koden "d+10" i "Start"-feltet:

Datoen bliver automatisk sat til idag plus 10 dage! Hvis du gemmer siden og holder musen hen over ikonet kan du også se at denne indstilling afspejles:

Og gæt en gang - siden er lige nu ikke synlig  og bliver automatisk synlig  den 11. april 2003, 10 dage senere! Så let er det at kontrollere publicering af informationer baseret på starttidspunkter. De samme principper gælder selvfølgelig for "Stop"-feltet. Og for sideindholdselementer, nyhedselementer, gæstebogselementer - fortsæt selv. Samme princip mange steder - let at lære og forstå!

Formateret redigering (Rich Text Editing): Fed, kursiv, punktlister, indsæt billeder

Når du arbejder med brødteksten på dine sider kan du bruge de samme typer af formateringsmuligheder som du kender fra dit tekstbehandlingsprogram. Hvis du bruger TYPO3 med Microsoft Internet Explorer har du adgang til Formateret redigering (også kaldet en Rich Text Editor (RTE)) i brødtekstfeltet. Formateret redigering betyder at du kan anvende formateringer på teksten udover blot at skrive den.

Prøv at redigere brødtekst-feltet på den nye "Topscorer"-side:

Marker teksten "my first" og klik på "B" (Bold = Fed) for at gøre teksten fed:

Ved at bruge knapperne "B", "I", "U" and "Centrer" kan du let opnå dette udseende af afsnittet:

Tryk på "Gem dokument og vis siden" - og du ser dette i frontend'en:

En punktliste

Du kan lave en punktliste nøjagtig lige så let. Klik blot på "Punktliste"-ikonet og indtast nogle linier:

Gem og vis - frontend'en viser:

Overvejelser vedrørerende "Formateret" indhold

Som du kan se giver dette dig to valgmuligheder: 1) vil du oprette punktlister "indeni" brødtekstfelterne eller b) vil du oprette dem som separate indholdselementer? Du kan blande de to fremgangsmåder. Jeg finder det personligt klart lettest bare at lave dem indeni brødteksten med Formateret redigering - men hvis nogen uden Microsoft Internet Explorer på et tidspunkt skal redigere listen er det som regel rigtig besværligt! Det kan jo også være at du har "politiske grunde" til ikke at indsætte punktlister i brødteksten (fx for at holde brødteksten "ren").

Flere detaljer om Formateret redigering (RTE)

Formateret redigering er måske nok meget let at bruge, men den giver også en masse tekniske udfordringer hvis du undersøger detaljerne. Der findes dybtgående dokumentation om RTE'en. Læs mere i dybden om RTE her og om hvordan den konfigureres.

Lav links

Nogle siger, at hyperlinks er det der limer internettet sammen. I TYPO3 er links'ene allerede lavet for dig da oprettelsen af sider i sidetræets hierarkiske struktur automatisk har genereret menuen den venstre ramme.

Derfor kunne det jo godt tænkes at du kunne gå hen og få brug for et link til noget tekst på en anden side, en fil, et andet websted eller en email-adresse, ikke?

Dette er meget let, hvis du bruger Formateret redigering:

Du skal simpelthen markere teksten og trykke på "Indsæt link"-ikonet:

Klik så på titlen for siden "Guestbook":

... og teksten er blevet linket:

Som man kunne forvente resulterer dette i et link i frontend'en. Klik på det og du bliver ført til siden med gæstebogen!

Bag scenen

Jeg nævnte tidligere at det kan blive et problem at bruge tekstbehandleren hvis du regner med senere at komme til at redigere indholdet i "rå form". Du kan simulere dette ved at redigere hele indholdselementet og vælge "Slå formateret redigering fra (RTE)" før du begynder et redigere indholdet:

Tekst-feltet kommer nu til at se ud som et almindeligt formularfelt:

For det første kan du se at linket til gæstebogen blev lavet med et TYPO3-specifikt tag, <link>, kombineret med sidens id (pid). Det gør det ret let også for dem uden adgang til Formateret redigering at oprette links! Dette er enkelt nok at skrive med håndkraft (bemærk: det interne "<link>-tag" konverteres til et rigtig HTML "<a>-tag" når siden genereres).

Derudover kan du se at punktlisten er blevet konverteret til en række linier som er indkapslet i <typolist>-tags - hvilket også er særlige TYPO3-tags. Disse konverteres også til en rigtig punktliste af skabelon-fortolkeren når siden senere genereres.

Den allerførste linie indeholder helt almindelig HTML for fed, kursiv og understregning samt centrering af hele afsnittet.

Andre typer links?

Du kan lave links til lokale filer og eksterne websider - endda links direkte til et specifikt indholdselement på en side (se et eksempel på siden "Last week" og prøv at finde ud af det på egen hånd!).

Desuden kan der naturligvis laves links til email-adresser. Meget nemt endda.

Nå, da vi nu har slået Formateret redigering fra, så kan vi ligeså godt bruge guide-ikonet til at få fuldskærmsredigering:

Lav et nyt punkt i punktlisten, marker det og tryk på Indsæt link-knappen. Vælg Email og indtast din email-adresse:

Resultatet skulle blive som  forventet det efter at vi har gemt:

 - et link som åbner brugeres email-program og gør det let at skrive en ny email:

Indholdselementtyper

Som du allerede ved er der en række sideindholdselementtyper tilgængelige og nøglen til at lave varierede websider er at kombinere de forskellige elementtyper, så alle siderne på dit websted ikke kommer til at se ens ud!

En tommelfingerregel - jo længere nede på listen et element optræder, jo mere avanceret eller sjældent brugt er den. Det absolut mest brugte element er Tekst eller Tekst m/Billede.

Guider

Bemærk at nogle af elemeterne bringer en lille guide med sig. Prøv fx at redigere en af resultatlisterne fra siden "This week":

Tekst-feltet, som normalt udelukkende indeholder ren brødtekst, indeholder nu tabelindholdet og det er tilsyneladende organiseret systematisk:

Tabellen konstrueres ved at fortolke hver linie i Tekst-feltet som en tabelrække. Den lodrette linie, | , bruges så til at adskille kolonner fra hinanden. Det er teknikken bag, at det kunne godt vedligeholdes med håndkraft. "Tabel-guiden" er dog det rigtige værktøj for de fleste (se billedet ovenover, til højre). Den bringer deciderede formularfelter og knapper til at tilføje, slette og flytte tabelindhold frem.

Det vil fx være så let som her at tilføje en ny række:

Tilføj så noget indhold i rækken:

Gem indholdet fra Tabel-guiden og det rigtige, underliggende indhold ser sådan her ud:

Når websiden i frontend'en opdateres ser vi dette:

Hvis du nu spekulerer på, hvordan baggrundsfarven kan ændres - læs videre!

Sekundære muligheder - "Paletter"

Siden tidernes morgen har TYPO3 holdt fast i et koncept med primære og sekundære formularfelter. Redigeringsformularerne i TYPO3 indeholder rigtig mange felter og de kan endda udvides endnu mere. Problemet er, at mange felter på samme tid kan blive ret svært at overskue for en almindelig gennemsnitsbruger. Det bliver rigtig galt hvis du er begynder og allerede har en masse nye ting i hovedet.

Konceptet med primære og sekundære muligheder betyder at du normalt kun ser de vigtigste og mest brugte felter (primære), og at mere detaljerede muligheder er gemt væk i de sekundære felter som bliver vist når de forespørges.

Se på denne formular:

Tre felter - let at overskue.

Dog, hvis du klikker på et af ikonerne ved siden af felterne kan du finde sekundære muligheder i paletten (toprammen):

Det er smart - vi har mange muligheder, masser af detaljer, men de er gemt til side indtil vi får brug for dem, så vi ikke bliver forvirrede.

Bagsiden af medaljen er at når du behøver  en af disse sekundære muligheder og ikke kan huske "bag hvilket ikon" den er (eller hvis du bruger feltet meget) - så kan det blive forvirrende at finde dem!

Derfor kan du aktivere muligheden "Vis sekundære muligheder" i bunden af alle redigeringsformularer:

Resultatet er en stor - og muligvis forvirrende - formular; men med alle mulighederne på een gang:

Bemærk hvordan hver række af muligheder korresponderer nøjagtigt til indhold af paletten i topramme hvis du klikke på "Flere valg..."-ikonet før!

Nå, hvordan ændrer vi så baggrundsfarven på tabellen? I de sekundære muligheder for "Layout"-vælgeren:

(Mærkatet "Farve 2" refererer til farven som er konfigureret med det navn i skabelonen for webstedet).

Frontend-redigering

Den sidste note om redigering af sider er frontend-redigeringsfaciliteten. Jeg beklager at der er så mange måder at gøre den samme ting på, men med tiden vil du komme til at sætte pris på det, da du vil finde ud af hvad du bedst kan lide, og du kan få udført mere arbejde på kortere tid fordi TYPO3 tilbyder disse faciliteter.

Frontend-redigering er nu ikke bare en ny knap - det kan faktisk revolutionere den måde du og dine indholdsleverandører kan arbejde med systemet.

Du har formentlig bemærket de små Rediger-ikoner som har optrådt på websiden:

Prøv at klikke på en af dem:

Med det samme bliver du ført til en formular hvor kun overskriften og anden relevant information kan redigeres nu og her!

Prøv at ændre overskriften og tryk på "Gem og luk dokument" - du kommer tilbage til websiden og ændringen er der med det samme:

Det er frontend-redigering - intuituvt, supergodt til at rette små fejl, lave små justeringer, fantastisk til utrænede indholdsleverandører på holdet osv. Det er den kontekstafhængige redigering  - rå muskelkraft lige ved hånden.

Men kan alle så redigere mine sider?

Nej, selvfølgelig ikke - kun når du er logget ind i backend'en. Ellers er ikonerne skjult - og hvis nogen kunne klikke på dem ville de blive afvist. Prøv selv - log ud af backend'en:

Hvis du stadig har en frontend-side med ikoner så prøv at klikke på et - du får denne skærm i stedet for denne redigeringsformular:

... og når du opdaterer siden kan du se at ikonerne nu er væk: