5 ARBEJDE MED EDITOREN

5 ARBEJDE MED EDITOREN Editor (eller Rich Tekst Editor) er et indbygget indholdsredigerings værktøj, hvor man uden nogen kendskab til HTML kodning kan skrive tekst, indsætte billeder, videoer og links. Editoren har de mest basale funktioner, som vi også kender fra andre tekstredigerings værktøjer. Man skal dog ikke forvente, at editoren kan det samme som f.eks. Word eller andre kendte programmer. En hjemmeside skal understøtte visning på vidt forskellige enheder og derfor er tekstredigerings funktionalitet også meget begrænset. Brugere opfordres derfor at bruge standard opsætning for at sikre, at det du ser på din maskine også er det samme som en bruger ser på hans/hendes maskine. 5.1 Editor-knapper Editoren indeholder en række standardknapper som bruges til tekstredigering mm. Nedenstående visning og antallet af knapper kan variere. 5.2 Linje/afsnit skift I editoren brydes teksten, når du har nået slutningen af linjen. Ved tryk på ENTER får du et afsnit skift. Dvs. større linje afstand. Dette linjeafstand er foruddefineret til nemmere læsning på hjemmesiden. Hvis du bare ønsker at lave en linjeskift (dvs. mindre afstand), trykker du på SKIFT+ENTER. 41

5.3 Indsæt et billede Hvis du ønsker at indsætte et billede, skal du følge nogle få trin: 1. Klik på Media Picker ikon i editoren. 2. Naviger til det ønskede billede i mediebiblioteket til højre. 3. Valg det ønskede billede og skriv evt. titel. 4. Klik på Indsæt. 42

Når billedet er inde i editoren kan størrelsen ændres ved at trække i hjørnerne med musen: Bemærk, at dette kun ændrer den synlige størrelse. Rent fysisk forbliver billedet i samme størrelse som det er uploadet. Dette kan give problemer for brugere som har en langsom internet forbindelse, en PC uden meget arbejdshukommelse eller for mobile enheder. Derfor anbefales det at ændre størrelsen i et billedredigerings program før billedet uploades til VuptiWeb. 5.4 Embeding/indlejring af videoer For at indlejre en video på en hvilken som helst side i VuptiWeb skal man i første omgang navigere til den ønskede video på YouTube og kopiere videoens adresse (URL). 43

- Klik på Embed knappen. - Indsæt den kopierede adresse (URL). - Definér videoens størrelse (lad Constrain være tjekket). - Klik på Ok. 44

5.5 Links Hjemmesidenavigation sker altid via de såkaldte links. Uden links ville det være umuligt at komme fra en side til anden og links er derfor nok den mest essentielle del af World Wide Web. I Vupti kan man forholdsvis nemt oprette links og vi kan vælge, om vi ønsker at linke til en anden side på vores hjemmeside, til en ekstern hjemmeside eller til en fil (billede, video, dokument). Du kan både linke fra tekst eller billeder. Fremgangsmåden er den samme. 5.5.1 LINKE TIL EN SIDE - Markér det element (tekst eller billede), som skal linke til en bestemt side. - Klik på Insert/edit link knap. Bemærk at denne knap også buges til at redigere et eksisterende link. - Hvis du vil linke til en ekstern side (f.eks. www.danskoplysning.dk), indsæt adressen i URL feltet. 45

- Hvis du ønsker at den linkede side åbnes i et nyt vindue/tab, vælg Opens the linked document in a new window or tab under Åben i vindue. Du vil normalt vælge dette, hvis du linker til en ekstern side. Hvis du linker til en side på din hjemmeside, så skal du ikke vælge noget her. - Hvis du vil linke til en side på din hjemmeside (intern side), navigér til den ønskede side i sektionen Indhold. - Klik på Vælg og link er nu indsat. 5.5.2 LINKE TIL EN FIL (BILLEDE, DOKUMENT) På samme måde som vi linker til sider (interne og eksterne) kan vi linke til en fil. Det kan være et billede eller et dokument. - Markér det element (tekst eller billede), som skal linke til en bestemt fil og klik på Link knap. - Klik på Link to file. - Navigér til og vælg den ønskede fil i vores mediebibliotek. - Her vil du normalt vælge, at filen åbnes i et nyt vindue/fane. Vælg derfor Opens the in the new window - Klik på Vælg og link er nu indsat. 46

5.6 Tabeller I nogle tilfælde er det nødvendigt at strukturere billeder/tekst på en side i en tabel-form. Arbejde med tabeller har altid været en af de mest besværlige opgaver i en hvilken som helst web-editor. Derudover skal man huske, at tabeller ikke altid har den samme udseende i alle browsere/brugerenheder. I det følgende forklarer vi, hvordan man kan arbejde med tabeller i VuptiWebs indbyggede editor. 5.6.1 OPRET OG REDIGÉR EN TABEL Før vi opretter en tabel, er det en god ide på forhånd at vurdere, hvor mange rækker og kolonner vi skal have. OBS: Hvis tabellen er det første vi tilføjer på vores side, er det en god ide at skrive lidt tekst i starten før vi tilføjer tabellen. Det er nemlig meget besværligt efterfølgende at tilføje tekst ovenover tabellen. Klik derefter på Table knap og på Insert table. Vælg med musen det ønskede antal kolonner og rækker. Når tabellen er inde i editoren er det forholdsvis svært at se de enkelte celler. Klik derfor i en celle i tabellen, klik på Table knap og vælg Table properties. 47

Dette åbner et lille kontekstvindue, hvor vi - til at starte med - angiver tabel størrelsen, så vi nemmere kan indsætte indhold i de enkelte celler. Lad de andre værdier være som de er. Dette vil resultere i en mere synlig tabel i editoren: Tilføj det ønskede indhold (tekst eller billeder) i de enkelte celler. OBS: Det er en god ide at tilføje tekst i de enkelte celler, selvom disse kun skal indeholde billeder. Tekst kan nemlig altid fjernes, men det er meget nemmere at klikke i de enkelte celler, hvis de indeholder en slags pladsholder. Nu kan vi fjerne størrelsesangivelserne i Table properties, så tabellen automatisk tilpasses indholdet. 48

Tjek tabellen i editoren og på hjemmesiden. For at gøre indholdet lidt pænere, skal vi igen i Table properties for at ændre nogle værdier: Width: Angiver tabellens bredde. Kan skrives som tal (f.eks. 200), som angiver størrelsen i pixels, eller som procenttal (f.eks. 50%), som angiver en relativ størrelse i forhold til indholdsområdets bredde. Hvis vi f.eks. skriver 100%, så vil tabellen strække sig i fuld bredde. Ved. 50% fylder den halvdelen af områdets bredde. Height: Angiver tabellens højde. Normalt vil man ikke skrive noget her, idet højden normalt ikke er begrænset af sidens geometri. Cell spacing: Angiver afstanden mellem cellerne i en tabel. Værdien angives i pixels (f.eks. 5). Standardværdien (når feltet er tom) er 2. Hvis man ikke ønsker nogen afstand, skal man skrive 0. Cell padding: Angiver afstanden fra kanten af cellen til dens indhold. Værdien angives i pixels (f.eks. 3). Standardværdien (når feltet er tom) er 1. Hvis man ikke ønsker nogen afstand, skal man skrive 0. Border: Angiver tabellens kanttykkelse. Hvis du ikke ønsker nogen kant, skal du skrive 0. Caption: Angiver om du ønsker en overskriftscelle øverst i tabellen. Alignment: Definerer tabellens justering på siden. Du kan vælge Left, Center eller Right til hhv. venstre, centreret eller højre justering. I ovenstående eksempel kunne vi nøjes med at angive tabelbredde til 50%, men i de fleste tilfælde er det også nødvendigt at justere afstand mellem cellerne (spacing) og afstand fra kant til indhold (padding). For at slette en tabel og al dens indhold skal du markere en eksisterende tabel, klikke på knappen Table i editoren og vælge Delete table. 49

5.6.2 ARBEJDE MED RÆKKER Efter du har oprettet en tabel, har du mulighed for at tilføje, slette og redigere enkelte rækker. Klik i en celle i den ønskede række og derefter på Tabel knap i editoren. Flyt musen til Row og her har du flere muligheder: Insert row before: Vælg dette, hvis du ønsker at indsætte en ny række lodret før den markerede række. Insert row after: Vælg dette, hvis du ønsker at indsætte en ny række lodret efter den markerede række. Delete row: Vælg dette, hvis du ønsker at slette hele rækken sammen med dens indhold. Cut row: Bruges som Klip funktion, hvor du klipper en hel række til udklipsholderen. Copy row: Bruges som Kopiér funktion, hvor du kopierer en hel række til udklipsholderen. Paste row before: Bruges som Sæt ind funktion, hvor du indsætter rækken fra udklipsholderen før den markerede række. Paste row after: Bruges som Sæt ind funktion, hvor du indsætter rækken fra udklipsholderen efter den markerede række. Row properties: Åbner et kontekstvindue, hvor du kan justere nogle række-specifikke værdier. I kontekstvinduet kan du angive følgende: 50

Row type: Her kan du vælge mellem Header (hovedet, top), Body (krop, standard) og Footer (fod, bund). Disse angivelser definerer, om den valgte række skal optræde i hovedet, kroppen eller foden af tabellen. Dette bruges normalt til at angive forskellige designs til hhv. tabellens sidehoved og sidefod. Standard værdien er Body og det er tilstrækkeligt i langt de fleste tilfælde. Alignment: Her kan du vælge mellem None (sidestandard), Left (venstre), Center (centreret) og Right (højre). Disse angivelser definerer, hvordan indholdet skal placeres i alle rækkens celler. Height: Her kan du definere rækkens højde i pixels. 51

5.6.3 ARBEJDE MED KOLONNER Kolonner har begrænsede redigeringsmuligheder. Markér en kolonne, klik på Table knap og vælg en af de viste muligheder: Insert column before: Vælg dette, hvis du ønsker at indsætte en ny kolonne før den markerede kolonne. Insert column after: Vælg dette, hvis du ønsker at indsætte en ny kolonne efter den markerede kolonne. Delete column: Vælg dette, hvis du ønsker at slette en hel kolonne og alt dens indhold. 5.6.4 ARBEJDE MED CELLER Hver enkel celle kan redigeres for sig selv. Markér (sæt markøren i) den ønskede celle, klik på Table knap og flyt markøren til Cell sektion. Cell Properties: Dette åbner et lille kontekstvindue med flere muligheder: 52

Width: Definerer cellens bredde i pixels. Dette vil normalt have indflydelse på samtlige celler i kolonnen. Height: Definerer cellens højde i pixels. Dette vil normalt have indflydelse på samtlige celler i rækken. Cell type: Her kan man vælge mellem Cell (standard) og Header cell (tyk skrift, centralt placeret). Scope: Her kan man vælge None (standard), Row, Column, Row group og Column group. Scope definerer cellens rækkevide og relateres som regel til tabellens hoved og fod. Normalt vil definering af Scope ikke have nogen indflydelse på tabellens udseende i browseren. Alignment: Angiver indholdets placering/justering i cellen. Man kan vælge None (standard), Left (venstre), Center (centreret) eller Right (højre). Merge cells: Dette er en spændende feature, hvor det er muligt at flette celler over flere række- eller kolonnepladser. Hvis du blot markerer en celle og klikker på Merge cells, åbnes der et lille kontekstvindue: 53

Cols og Rows angiver hhv. antal kolonner og rækker cellen skal flettes over. I ovenstående eksempel ønsker vi, at flette cellen over 1 kolonne og 2 rækker. Dvs. De første to celler i kolonnen vil blive flettet sammen. Vi kan også flette cellen over flere kolonner og rækker. I nedenstående eksempel vælger vi 2 kolonner og 3 rækker: Endnu nemmere måde at flette celler på er: markér med musen (grænsende) celler, som vi ønsker at flette sammen, og vælg Cell -> Merge cells. Vi får samme resultat som i forrige eksempel. 54

Split cell: Vi kan gen-opdele de flettede celler ved at vælge Split cell. De flettede celler vil blive genskabt som selvstændige, ikke-flettede celler. Bemærk, at det kun er cellerne, som bliver genskabt. Selve indholdet følger ikke med og skal flyttes manuelt. 5.7 Indsæt tekst fra et eksternt dokument Det sker tit, at vi ønsker at indsætte tekst fra andre kilder som f.eks. Microsoft Word dokument, andre hjemmesider, PDF filer osv. Til dette formål er det i første omgang vigtigt at kende 2 tastatur genveje: CTRL+C: Kopierer markeret tekst fra en ekstern kilde til computerens udklipsholder. CTRL+V: Indsætter den kopierede tekst fra udklipsholderen. Vi skal også være opmærksomme på, at tekst som kopieres fra andre kilder sandsynligvis indeholder en del bagvedliggende kode, som også overføres til vores editor. Da disse koder muligvis ikke understøttes i editoren og/eller ikke vises hensigtsmæssigt på hjemmesiden, er det nødvendigt at rense det kopierede tekst for disse koder. Den nemmeste måde er at bruge Notesblok, som følger med Windows og er et af de mest simple tekstredigeringsprogrammer. Notesblok findes under Start -> Alle programmer -> Tilbehør Fremgangsmåden er følgende: 1. Åbn Notesblok. 2. Åbn den ønskede tekst-kilde (f.eks. Word dokument). 3. Kopiér den ønskede tekst med CTRL-C. 4. Indsæt den kopierede tekst ind i Notesblok med CTRL-V. 5. Kopiér teksten fra Notesblok med CTRL-C. 6. Indsæt den kopierede tekst ind i VuptiWebs editor med CTRL-V. Som vi kan se, så indeholder ovenstående et ekstra trin (4 & 5), men til gengæld får vi ren tekst ind i vores editor og vi risikerer ikke at unødvendige koder følger med. 55