1 of 9 15.02.2011 12:15 SPO/IKT Startsiden Kurshefter Veivisere Vår testside m/ versjon etc Testside Innføring i Microsoft Expression Web Formål: Å gi studenter en innføring i bruk av Microsoft Expression Web 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 Microsoft Expression Web. Vedlikeholdes av: Linda Ursin Microsoft Expression Web er en del av Microsoft Expression Studio. Microsoft Expression Studio 4 Ultimate skal være installert på alle datasaler. For å kunne bruke den hjemme, ka ned CD-image gratis fra Dreamspark, brenne en CD og installere programvaren på din PC. For informasjon om hvordan dette gjøres, se følgende artikler: Hvordan laste ned fra Microsoft Dreamspark Hvordan åpne ISO-filer vha DAEMON Tools Lite Innhold: Hva mener vi med vevsider? Hva er ei hjemmeside Dokumentstruktur Mappestruktur Bruk av Expression Web 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 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 vevsides adresse beskrives med en URL og skrives f.eks: http://rotvoll.hist.no/adm/index.htm. Vevsider som du som student lager på vår vevtjener, vil ha adressen http://www.stud.al /~brukernavn/. 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 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 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. 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 t 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 mulig samlet. Bruk av Expression Web Du trenger ikke kunne HTML for å kunne bruke Expression Web. Du redigerer sidene på samme måte som i et tekstbehandlingsprogram skriver inn og formaterer tekst, og legger t tabeller og andre sideelementer mens HTML-kodene automatisk legges til i bakgrunnen. Siden vises slik den vil se ut i en nettleser. Du kan imidlertid vise HTML-kodene på siden, o
2 of 9 15.02.2011 12:15 fortrolig med HTML, kan du skrive inn og redigere HTML-kodene selv. Oppstart Expression Web startes via Start, Alle programmer, Microsoft Office, Microsoft Expression, Microsoft Expression Web 4. Vi får følgende skjermside: 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å verktøylinjen flg. funksjoner: Nytt dokument, nytt nettsted, åpne, lagre, lagre alle, forhåndsvis i Super Preview, forhåndsvis i Interne stil, skrifttype, skriftstørrelse, angre, gjenta, fet, kursiv, understreket, venstrestilt, midtstilt, høyrestilt, nummerert punktliste, uordnert punktliste, mindre innrykk, økt innrykk, kantlinjer, oversrektingsfarge, tekstfarge, tabell, div, bilde, hyperlenke, stopp. 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 begre 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 å og deretter velge rett ikon eller effekt. Lenker Du kan lage hyperlenke ved å merke den delene av teksten som skal være klikkbar. Dersom du vil lage en lenke til ordet tekstlenke som i eksemplet over, klikker du på <ikon for hyper ordet er merket. Du får følgende skjermbilde: I feltet det står "Address" foran 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 http://www.hist.no/alt Husk for all del å velge riktig lagringssted, slik at du ikke lenker til noe som ligger i mappen "My Websites" eller et annet sted på lokal disk.
3 of 9 15.02.2011 12:15 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 Først er det viktig at vi lager et bokmerke i teksten som vi kan referere til; Merk teksten der du vil ha bokmerket: Velg "Bookmark" i menyen "Insert". Oppgi navn på bokmerket dersom du ikke vil benytte det som programvaren foreslår. Klikk "Ok". Fremgangsmåten for å lenke til et bokmerke er lik den vi bruker for å lage en lenke; Merk teksten du vil skal være lenken og ta frem skjermbildet for å opprette hyperkobling (se ovenfo hvilken side bokmerket er på. Er bokmerket på samme side som lenka du skal opprette, velger du "Place in This Document". Deretter velger du bokmerket du ønsker å lenke til. Hvis bokmerket er på en annen side angir du adressen til websida og velger knappen "Bookmark" til høyre og velger det bokmerket du ønsker å lenke til. 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øylinjen.
4 of 9 15.02.2011 12:15 og dette gir som resultat: 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 and en prosjektmappe. Et bilde settes inn ved å klikke på ikonet: <bildeikon> og du får følgende skjermbilde: I feltet det står URL- foran kan du skrive inn: Full hyperlenkereferanse: http://www.alt.hist.no/bilder/hus.gif 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 Husk for all del å velge riktig lagringssted, slik at du ikke lenker til noe som ligger i mappen "My Websites" eller et annet sted på lokal disk. Etter du har trykket på "Insert", blir du bedt om å legge inn en alternativ tekst. Det er denne teksten som vises hvis nettleseren ikke kan vise bildet. Gjør dette og trykk "OK". Og resultatet blir: 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 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å vanligvis optimalisert. Hvis du derimot skanner inn egne bilder, må du utføre det selv.
5 of 9 15.02.2011 12:15 Redigering av bilder bør du helst gjøre i et bildebehandlingsprogram, for eksempel Paint.NET. Skjermbildet for bildeegenskaper får du ved å dobbeltklikke på bildet. Velg arkfane "General". Her har du mulighet for å skrive en beskrivende bildetekst. "Hyperlink, Location" lar deg skrive inn en adresse til en annen side, slik at bildet er klikkbart og virk lenke. Velg arkfanen "Appearance". I "Layout, Alignment" kan du velge hvor bildet skal plasseres på siden. Du kan ha det høyre- eller venstrestilt, og eventuelt få tekstflyt omkring bildet. 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 e 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 di Lagring Før du lagrer en side, bør du gi den tittel og sette noen andre generelle egenskaper på den. Det gjør du ved å plassere markøren øverst på siden og høyreklikke. Velg deretter "Page Du skal her fylle inn feltet "Title" med tittelen på siden. Ved å velge arkfanen "Formatting", kan du legge inn et bakgrunnsbilde eller sette en bakgrunnsfarge osv.
6 of 9 15.02.2011 12:15 Du lagrer siden ved å klikke på "File" og velge "Save as" (brukes første gang for å sette navn på den). I denne dialogboksen (som du ser nedenfor) er det særlig et par ting du må ten Du bør huske å bla deg frem til din eksamensmappe for å lagre filen på riktig sted. Du bør også huske å sette en tittel (et navn) på siden. Hvis du har glemt å gjøre dette tidligere, kan du nå trykke på knappen "Change title": For å lagre dine vevsider skal du nå velge mappen du koblet opp med SSH. Deretter setter du navn på filen og velger "Save". Navnsettingsregel: Hovedsiden din skal du gi navnet index.htm eller index.html. Bruk alltid små bokstaver (a til z) og tall, ikke æøå eller 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.<diskettik Tabeller Tabeller brukes både som tabell, og noen bruker dem også til å ordne selve oppsettet på en side. En tabell lager du ved at du klikker på det sted i siden der du ønsker å sette inn en ta klikker du på tabellikonet <tabellikon> Deretter merker du det antall kolonner og rekker som du tror tabellen din trenger. 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ø 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 tabellen og skrivemerket flyttes til første celle i denne raden. Når du vil endre noe på en tabell kan du merke tabellen og høyreklikke i den. Du får da opp følgende verktøyvalg:
7 of 9 15.02.2011 12:15 Alt etter hva du ønsker å utføre, velger du "Table properties" eller "Cell properties". Hvis du velger egenskaper for en tabell: Her kan du sette bredden på hele tabellen i piksler eller prosent av den tilgjengelige plassen. Valget "Cell padding" justerer bredden fra kanten av cellene og inn til teksten (altså hvor m skal være rundt teksten inne i hver enkelt celle), mens du med valget "Cell spacing" kan bestemme avstanden mellom cellene i tabellen. Du kan angi tykkelsen på tabellens kantlinje ved å angi en verdi i feltet Borders, Size. 0 gir ingen kantlinje, økende tallverdi gir tykkere linje. Det er også mulig å sette bakgrunnsbilde el Egenskaper for en celle: 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. Valgene "Rows spanned" og "Columns spanned til dette. Det er imidlertid en enklere måte å gjøre dette: 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:
8 of 9 15.02.2011 12:15 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 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 merket. Høyreklikk nå i området som er merket. I menyen som nå kommer frem har du flere valg for å manipulere tabellen: Velg "Merge cells". Dersom du senere ønsker å dele et celleområde, kan du velge "Split cells" i denne menyen. For å få lik bredde på alle (eller noen) kolonner, kan du velge "Distribut (x angir velget mellom kolonner eller rader) etter at du har markert det du vil justere. 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 å tabller, andre velger å bruke objektet <div>. Åpne en side Du henter inn en side du har arbeidet med, ved å velge: "File", "Open" og så navigere til mappen du koblet opp med SSH. Velg mappe og marker fila du skal arbeide med. Klikk "Ope 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 en side laget i Ex Web. Den ryddigste måten å legge ut et dokument fra Word er å importere dokumentet i Expression Web, og jobbe videre med vevsiden derfra. Slik importerer du dokumenter i Expression Web: Plasser skrivemerket der du vil ha inn Word-teksten Åpne dokumentet i Word Merk innholdet du ønsker å bruke
9 of 9 15.02.2011 12:15 Kopier innholdet Lim inn innholdet i Expression Web Du må regne med at du kanskje må redigere oppsettet på dokumentet litt etter at du har hentet teksten inn i Expression Web, men for en stor del vil dokumentet beholde de formatter gjorde i Word. 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 15, 2011, at 12:14 PM