SPO/IKT Kurshefter / Innføring i Kompozer

Transkript

1 SPO/IKT Startsiden Kurshefter Veivisere Vår testside m/ versjon etc Testside Innføring i Kompozer Formål: Å gi studenter en innføring i bruk av Kompozer for produksjon av en enkel vevside i forbindelse med digital eksamensmappe. Målgruppe: Studenter ved Avdeling for lærer- og tolkeutdanning Sammendrag: Denne veiviseren gir litt informasjon rundt det å produsere en enkel vevside ved hjelp av Kompozer. Vedlikeholdes av: Linda Ursin Bruk Pakkeverktøyet (f.eks. Ubuntu Programvaresenter) for å søke etter en Kompozer-pakke for din Linux-distribusjon. Hvis det mot formodning ikke finnes en slik pakke, kan du laste ned Kompozer gratis fra kazhack.org. Innhold: Hva mener vi med vevsider? Hva er ei hjemmeside Dokumentstruktur Mappestruktur Bruk av Kompozer Oppstart Innskriving av tekst Lenker Bokmerker Overskrift Bilder Lagring Tabeller Tabell til layout Åpne ei side Importere et Word dokument Råd for vevsider Hva mener vi med vevsider? I vår sammenheng vil vi bruke betegnelsen vevsider på sider med tekst, hyperlenker, bilder, lyd og video. Sider er grunndokumentene på verdensveven (World Wide Web) og skrives i sidebeskrivelsesspråket HTML (HyperText Markup Language). Det som særmerker slike sider er at de kan nåes over hele verden med en standard nettleser hvis du kjenner adressen. En vevsides adresse beskrives med en URL og skrives f.eks: Vevsider som du som student lager på vår vevtjener, vil ha adressen Brukernavn bytter du ut med ditt eget brukernavn. Hva er en hjemmeside Ei hjemmeside er en måte å presentere informasjon på verdensveven. I utgangspunktet er den siden du plasserer på avdelingens vevtjener tilgjengelig for hele verden. Du bør derfor ha et bevisst forhold til den informasjonen du tilbyr. Noen momenter å tenke på: Du vet ikke hvem det er som vil lese det. Du har ingen kontroll med hvordan informasjonen blir brukt. Du kan bli stilt personlig ansvarlig for informasjonen. Den organisasjonen (HiST) som driver vevtjeneren informasjonen plasseres på forbeholder seg retten til å kontrollere den informasjonen du tilbyr. De kan ha andre vurderinger om hva som er rett informasjon og hva som er ønskelig informasjon. Hva kommuniserer du til andre med den siden du lager? Er det et skjult budskap? Er du selv klar over det budskapet som ligger i oppsett, bildebruk og tekst. Er du 100% sikker på at du har rett til å bruke de bildene og tekstene du presenterer på siden din? Er siden du har laget velegnet for funksjonshemmede? Har du en side som er overlasset med grafikk og "fancy" bilder? Tenk på lesere med trege linjer. 1 of :20

2 2 of :20 Dokumentstruktur De sidene vi lager inneholder HTML-koder, som er innebygde kommandoer som gir informasjon om struktur, utseende og innhold på siden. Web-lesere bruker denne informasjonen til å bestemme hvordan siden skal vises. Mappestruktur Du må også planlegge hvordan filene med tekst, bilder og annet skal organiseres. Bilder bør plasseres i egne mapper. Du bør også ha egne tematiske mapper for å ha samsvarende filer mest mulig samlet. Bruk av Kompozer Du trenger ikke kunne HTML for å kunne bruke Kompozer. Du redigerer sidene på samme måte som i et tekstbehandlingsprogram skriver inn og formaterer tekst, og legger til grafikk, tabeller og andre sideelementer mens HTML-kodene automatisk legges til i bakgrunnen. Siden vises slik den vil se ut i en Vev-leser. Du kan imidlertid vise HTML-kodene på siden, og hvis du er fortrolig med HTML, kan du skrive inn og redigere HTML-kodene selv. Fordelene med verktøyet er: Det du ser på skjermen er svært likt slik det vil se ut på veven (WYSIWYG) Du slipper å skrive HTMLkoder, dvs lavere inngangsterskel Portabel. Finnes for mac, linux og windows. Raskt å produsere enkeltsider. Ulemper med å bruke slike sider er: Oppstart Begrenset kontroll med utseendet av sidene HTMLkoden som lages til kan være vanskelig å redigere direkte seinere. Kompozer startes ved å klikke på ikonet: eller Applications, Internet, Kompozer. Hvis du har lastet ned en pakket versjon, må denne pakkes ut, deretter bruker du Terminalvinduet til å gå til den nye mappa og skrive./kompozer. Vi får

3 3 of :20 følgende skjermbilde: Noen av de sentrale funksjonene du får tilgang på siden er: skrift tabeller lister (ordnet, uordnet, kulepunkter), innrykk, farger (tekst og bakgrunn) osv. Fra venstre mot høyre har symbolene (ikonene) på øverste verktøylinje flg. funksjoner: Ny side (m/ulike valg), Åpne en vevside, Lagre en side, Publisere en side (dvs. laste den opp til et nettsted - fungerer ikke på HiST), Forhåndsvis i nettleseren, Angre, Gjenta, Anker, Lenke, Bilde, Tabell, Skjema (m/ulike valg), Åpne i ekstern tekstredigeringsverktøy, CSS-redigeringsverktøy, Kompozer Fra venstre mot høyre har symbolene (ikonene) på midterste verktøylinje flg. funksjoner: Fra venstre mot høyre har symbolene (ikonene) på nederste verktøylinje flg. funksjoner: Valg av stil, Valg av klasse, Utheving, Sterk utheving, Nummerert liste, Unummerert liste, Øk og reduser innrykk, Definisjonsliste, Definisjon, Lag, Send lengst frem, Send lengst bak. Fra venstre mot høyre har symbolene (ikonene) på nederste verktøylinje flg. funksjoner: Valg av skrifttype (font), Velg tekstfarge, Velg bakgrunnsfarge for tekst, Valg av framhevingsfarge for tekst, Reduser og øk skriftstørrelse, Uthevet skrift, Kursiv, Understreking, Venstrestilt tekst, Midtstilt tekst, Høyrestilt tekst, Rett venstre og høyremarg. Innskriving av tekst Du kan begynne å skrive inn tekst direkte i siden. Det er som å skrive i en ordinær tekstbehandler. Mange av funksjonene ligner på de du finner i en tekstbehandler, men er mer begrenset pga. det er vevsider du skal lage. Du kan velge funksjon og deretter skrive inn tekst. Du slår av funksjonen ved å klikke en gang til på ikonet. Du kan også endre tekst etter innskriving ved å merke den og deretter velge rett ikon eller effekt. Lenker

4 4 of :20 Du kan lage hyperlenke ved å merke den delene av teksten som skal være klikkbar. Dersom du vil lage en lenke til ordet heimeside som i eksemplet over, klikker du på når ordet er merket. Du får følgende skjermbilde: I feltet det står "Link Location" over, kan du nå skrive inn: Navnet på fila dersom den ligger i samme mappe som den sida du lager: f.eks lekse.htm Mappenavn og filnavn dersom fila ligger i en undermappe til den mappen du lager: f.eks norsk/oppgave.htm Full hyperlenkereferanse: f.eks Du kan også bla deg frem til filen. Bokmerker Iblant er det ønskelig å lage en lenke til et avsnitt lenger ut i samme nettside som vi holder på med. Dette er særlig aktuelt dersom vi ønsker en referanse til tekst lengre ned eller opp på sida. Først er det viktig at vi lager et bokmerke i teksten som vi kan referere til; Merk teksten der du vil ha bokmerket:

5 5 of :20 Bruk ikonet for bokmerke:. Oppgi navn på bokmerket dersom du ikke vil benytte det som Kompozer foreslår. Klikk Ok. Fremgangsmåten forøvrig er helt lik den vi bruker for å lage en lenke; Merk teksten du vil skal være lenken og ta frem skjermbildet for å opprette hyperkobling (se ovenfor). Nå skal vi imidlertid velge fra listeboksen under "Link location" og velge det bokmerket vi har plassert på det aktuelle stedet i teksten vår. URL-en blir nå automatisk satt til internt bokmerke. Bruken av bokmerke ser du godt i dette dokumentet (på Internett). Lenkene øverst på sida kan benyttes til å flytte seg direkte til de oppgitte emnene. Overskrift Når vi skal ha overskrifter i teksten velger vi nivå på overskriften fra verktøylinja. og dette gir som resultat:

6 6 of :20 Bilder Du kan sette inn bilder direkte i teksten. Bildet er en egen fil (dvs. det lagres ikke som en del av teksten som i Word). Vanligvis har vi bilder i en egen mappe eller sammen med de andre filene i en prosjektmappe. Et bilde settes inn ved å klikke på ikonet: og du får følgende skjermbilde: I feltet det står "Image location" over, kan du skrive inn: Full hyperlenkereferanse: navnet på ei fil som ligger i samme mappe som den sida du lager: hus.gif navnet på ei fil som ligger i en undermappe til den mappen du holder på med: norsk/hus.gif Du kan også bla deg frem til filen. Og resultatet blir:

7 7 of :20 Når du bruker bilder som du finner på veven eller tar fra bøker, tidskrift osv. må du huske på reglene om opphavsrett. Du kan ikke bare ta i bruk et hvilket som helst bilde og publisere det. Opphavspersonen har visse rettigheter til det. Vær også oppmerksom på at bilder skal optimaliseres for bruk på veven. De bildene du finner på verdensveven og som er beregnet på vevbruk, er vanligvis optimalisert. Hvis du derimot skanner inn egne bilder, må du utføre det sjøl. Redigering av bilder bør du helst gjøre i et bildebehandlingsprogram, for eksempel Paint.NET. Skjermbildet for bildeegenskaper får du ved å høyreklikke etter markering og velge "Image properties".

8 8 of :20 Velg arkfane "Location". "Alternate text" gir deg mulighet for å skrive en beskrivende bildetekst. Denne blir bl.a. brukt hvis nettleseren ikke kan vise bildet. Velg arkfane "Appearance". I "Align Text to Image" kan du velge hvor bildet skal plasseres på sida. Du kan ha det høyre eller venstrestilt og eventuelt få tekstflyt omkring bildet.

9 9 of :20 Arkfanen "Link" lar deg skrive inne en vevadresse til en annen side slik at bildet er klikkbart og virker som en lenke. Grafikken og bildene vi bruker på veven er vanligvis av typen GIF (.gif), JPG (.jpg) eller PNG (.png). GIF bruker vanligvis til tegninger og animasjoner, JPG til fotografier og PNG er et ganske nytt bildeformat som prøver å dekke begge de andre formatene. Bildene vi bruker, kan vi ordne selv eller prøve å finne på nettet. Pass på slik at du har rett til å bruke bildene på sidene dine. Lagring Du lagrer siden ved å klikke på Fil og velge Lagre som (brukes første gang for å sette navn på den). Husk at du først må ha gjennomført tilkoblingen til mappen. Hvis du ikke har satt en tittel på siden, vil den spørre deg om denne: Du skal nå velge lenken du lagde på Skrivebordet. Klikk på "Browse for other folders". Gå til Desktop og åpne eksamensmappe. Gi filen navn etter navnsettingsregelen under. Trykk så på "Save".

10 10 of :20 Navnsettingsregel: Hovedsiden di skal du gi navnet index.htm eller index.html. Bruk alltid små bokstaver (a til z) og tall, ikke æøå og mellomrom i fil og mappenavnene. Husk alltid å mellomlagre. Etter at du har startet opp med å utforme siden, lagrer du den slik at den får et navn. Deretter mellomlagrer du jevnlig ved å klikke på diskettikonet: Før du lagrer ei side, bør du gi den tittel og sette noen andre generelle egenskaper på den. Det gjør du ved å gå til menyen "Format" og velge "Page title and Properties". Du skal her fylle inn feltet "Title" med tittelen på sida\en.

11 11 of :20 Ved å gå til menyen "Format" og velge "Page Colors and Background", kan du legge inn et bakgrunnsbilde eller sette en bakgrunnsfarge osv. Tabeller Tabeller brukes både som tabell og noen bruker den til å ordne selve layouten på ei side. En tabell lager vi ved at du klikker på tabellikonet: Deretter angir du antall kolonner og rekker som du tror tabellen din trenger.

12 12 of :20 Du får da en tabell som ser omtrent slik ut, avhengig av hvor mange kolonner og rekker du har valgt: I en slik tabell kan du skrive inn tekst eller legge inn bilder i ei celle på samme måten som i sted. Du kan endre bredden på cellene i tabellen ved å ta tak i en cellekant og dra i den. Høyden på hver enkelt rad justeres automatisk etter hvert som du legger inn tekst eller bilder. Du kan benytte Tabulator-tasten for å bevege deg til neste celle i tabellen. Dersom du trykker Tabulator tasten når du står i siste celle på nederste rad vil det automatisk bli satt inn en ny rad i tabellen og skrivemerket flyttes til første celle i denne raden. Når du vil endre noe på en tabell kan du peke med musepekeren i tabellen og høyreklikke. Du får da opp følgende verktøyvalg:

13 13 of :20 Her kan du f.eks. velge "Table Cell Properties". Alt etter hva du ønsker å utføre, velger du egenskaper for en tabell eller en celle. Hvis du velger egenskaper for en tabell: Her kan du sette bredden på hele tabellen i piksler eller prosent av den tilgjengelige plassen. Valget "Padding" justerer bredden fra kanten av cellene og inn til teksten (altså hvor mye luft det skal være rundt teksten inne i hver enkelt celle), mens du med valget "Spacing" kan bestemme avstanden mellom cellene i tabellen. Du kan angi tykkelsen på tabellens kantlinje ved å angi en verdi i feltet "Border", Størrelse. 0 gir ingen kantlinje, økende tallverdi gir tykkere linje. Egenskaper for en celle:

14 14 of :20 Det er kanskje særlig dersom du ønsker at en tabell skal ha ulik bredde eller høyde på cellene at du benytter denne egenskapsboksen. La oss anta at vi vil lage en tabell hvor vi ønsker at noen celler skal utvides til å dekke flere celler på samme rad eller flere celler i samme kolonne slik det er vist nedenfor: Utgangspunktet for denne tabellen er 6 kolonner og det antall rader som du ønsker. Etter at tabellen er opprettet, kan du merke de cellene som du ønsker å slå sammen. Flere sammenhengende celler merker du ved å peke på den første cellen som skal slås sammen, klemme ned venstre museknapp, dra musemarkøren til den siste cellen som skal slås sammen og slippe museknappen. Nå vil de aktuelle cellene være markert med mørk ramme. Høyreklikk nå i markeringen. I menyen som nå kommer frem har du flere valg for å manipulere tabellen:

15 15 of :20 Velg "Join Selected Cells". Dersom du senere ønsker å dele en celle i flere, kan du velge "Split Cell" i denne menyen. Legg merke til at menyen du får frem når du høyreklikker inneholder valg som er bestemt ut fra hva du har merket. Tabell til layout Mange bruker tabeller til å ordne utseendet på sidene sine. Det er delte meninger om dette egentlig er en god skikk når det gjelder å lage hjemmesider. Noen velger å bruke tabller, andre velger å bruke objektet <div>. Åpne en side Du henter inn en side du har arbeidet med, ved å åpne mappen du koblet opp med SSH på Skrivebordet. Velg mappe og marker fila du skal arbeide med. Høyreklikk og velg Importere et Word dokument Det er ingenting i veien for å skrive teksten du skal legge ut på veven i Word. Et dokument laget i Word kan enten legges ut på veven i sin helhet, eller som en del av ei side laget i Kompozer. Den ryddigste måten å legge ut et dokument fra Word er å åpne dokumentet i Open Office, kopiere innholdet og lime det inn i Kompozer, for å så jobbe videre med vevsiden derfra.

16 16 of :20 Råd for vevsider Det finnes mange millioner vevsider. Mange dårlige og mange gode. Vi kan holde oss til noen enkle kvalitetskriterier. Ikke overdriv billedbruk Ikke bruk for mange hyperlenker Strukturer teksten i avsnitt med overskrifter Ikke lag for lange sider, siden dette reduserer lesbarheten Lag innholdsliste Ha fast lenkestruktur Siden følger validieringsstandardene til W3C. Siden kan validieres hos W3C. Siden følger standarden for tilgjengelighet for funksjonshemmede. Sida kan valideres med Bobby. Hvem er målgruppen for siden du lager? Hvilken kvalitet har siden din? Har du skjønt hva det menes med kvalitetet? Page last modified on February 02, 2011, at 09:21 AM