Dobbelklikk på program-ikonet!

Transkript

1

2 En hjemmeside kan lages i hvilket som helst enkelt tekstbehandlingsprogram (som f.eks. Notepad i Windows eller EnkelTekst på en Mac). Forutsetningen for å kunne gjøre dette er at man behersker html. Html står for hypertext marker language og er programmeringsspråket som brukes for internettsider. Ved hjelp av html beskriver man bildenes plassering på siden, tekstens plassering, farge og størrelse, bakgrunnsfarge osv. Etter hvert har det blitt utviklet ulike programmer for å lage internettsider som ikke krever at man behersker html. Dette kalles gjerne wysiwyg -programmer. Wysiwyg står for what you see is what you get (noe som ikke alltid stemmer - se lengre nede på siden). Dette er programmer som FrontPage (som følger med Office-pakka til Windows), Dreamweaver fra Macromedia (samme som produserer Flash ) og Adobe GoLive. Man kan også lage hele hjemmesiden i Flash. For internettside-redigering er det først og fremst Dreamweaver som brukes av profesjonelle tett fulgt av GoLIve. På Horten vgs. har vi valgt å bruke Adobe GoLive da dette programmet kommer fra samme produsent som de andre programmene vi bruker (som Photoshop og Illustrator). Dreamweaver og GoLive er dessuten relativt like, så hvilket program man bruker vil i stor grad være en smakssak. Selv om disse programmene altså reklamerer med at What you see is what you get så stemmer ikke dette alltid. Hvordan en hjemmeside vil se ut avhenger av hva slags nettleser internettsurferen bruker (f.eks. Internet Explorer og Netscape Navigator), størrelse og oppløsning på skjerm, at den som laster ned hjemmesiden har de samme fontene du har brukt på sin maskin osv. Du må altså teste ut sidene dine i ulike nettlesere og med ulike oppløsninger osv. for å få et ordentlig inntrykk av hvordan sidene dine kan se ut på andres maskiner. Uansett; det meste av arbeidet med en internettside forgår ikke i redigeringsprogrammet (GoLive), men på skissepapiret, i bildebehandlingsprogram som Photoshop og i animasjonsprogram som ImageReady og Flash. Har man mye bilder så vil Photoshop være det viktigste programmet. Her retusjere, beskjærer og lagrer man bildene i rett format og i rett mappe. Dette siste er veldig viktig; bildene som skal brukes på en internettside må lagres i en egen bilder -mappe som må følge med siden når den legges ut på internett. Dette fordi bildene ikke legges inn i selve internettdokumentet - det lages kun en kobling mellom dokumentet og bildet i bildemappen (som i InDesign). Har du mye bilder kan du lage flere bildemapper hvor du f.eks. sorterer bildene ut i fra tema. Husk å komprimere bildene så mye som mulig. På internett trenger ikke bildene mer oppløsning enn 72 dpi. Fotografier lagres i.jpeg-format og enkle illustrasjoner som.jpeg eller.gif. Tunge bildefiler gjør at siden din blir treg å laste ned. Har du et stort bilde du ønsker å ha med så del bildet opp i mindre deler som du setter sammen på siden. Bruk ikke animasjoner uten at det har en hensikt. De neste siden inneholder en helt fra begynnelsen -innføring i GoLive. Det tar ikke for seg alt du kan gjøre med programmet, men er i hvertfall en start, så tar vi resten derfra. Innføringen forutsetter at du har laget skisser for siden din og at du har noen ferdige bilder i egen mappe som igjen ligger i en mappe på din plass på serveren. Innføringen er basert på 6.0 versjonen av GoLive for Mac. Noen avvik kan forkomme om du bruker tidligere versjoner av programmet eller PC. Spør om hjelp. Dobbelklikk på program-ikonet!

3 1. Når du dobbel-klikker på ikonet for GoLive får du frem boksen vist i illustrasjonen nedenfor. Her får du valget mellom å åpne en ny side (New Page), åpne et nytt hjemmesideområde (New Site) eller åpne en side du allerede har laget (Open). Du kan også velge vekk denne boksen og åpne sider fra File i menylinjen. 2. Skal du bygge opp et nytt hjemmesideområde klikker du på New Site. Du vil nå få frem boksen vist på illustrasjonen nedenfor. Velg Singel User om du skal lage hjemmesiden alene. Klikk Next.

4 3. Du vil nå få frem boksen vist på illustrasjonen nedenfor. Siden vi forutsetter at du skal bygge opp siden fra grunnen av, velger du Blank Site. Klikk Next. 4. Det neste du nå skal gjøre er å gi sideområdet ditt et navn. Der det står New Site skriver du inn navnet du ønsker å bruke (f.eks. Media_kommunikasjon ). Klikk Next.

5 5. Du vil nå få frem boksen nedenfor. Her klikker du Browse (søk) for å velge den mappa du på forhånd har laget for plassering av hjemmesidene. 6. Ved å klikke på Browse vil du få opp boksen nedenfor. Velg mappen du på forhånd har laget ( MK_sider her) og klikk velg. Klikk Ny hvis du ikke har laget mappe. Klikk Finish.

6 7. Du vil nå få opp boksen nedenfor. Den viser oversikten over hele hjemmesideområdet ( siten ). Foreløpig ligger det bare én side her. Den kalles index.html. Hoved- eller startsiden i et hjemmesideområde skal alltid hete index da det er denne siden nettleseren vil lete etter om du skriver inn en hjemmesideadresse i adressefeltet (f.eks. ( html står for Hyper Text Marker Language og er det språket som brukes på internett). 8. Dobbelklikk på index.html for å få frem siden nedenfor. Split-screen for layout- og HTML-modus JAVA Script Editor Animasjonsinn-/avspiller Arbeidsmodus HTML-modus Forhåndsvisning Sidestørrelse

7 9. Gi siden et navn ved å klikke tekst -ikonet ved siden av der det står Welcome to Adobe GoLive. Skriv inn hva du vil kalle siden i feltet Title i Inspector-paletten til høyre (der det står media i illustrasjonen under). Trykk enter. Hvis du ønsker det kan du også stille inn ønsket bakgrunnsfarge, tekstfarge, linkfarge etc. her, men vent med dette. Klikk her Skriv her Inspector-paletten 10.Før man begynner å plassere noe som helst på siden kan man dra inn en såkalt grid. Dette er et nett med magnetiske hjelpelinjer som holder de ulike objektene fast der du plasserer dem. Grid en henter man fra Objects -paletten ved å klikke på grid -ikonet, holde museknappen nede og dra det over i side-vinduet eller rett og slett dobbelklikke på ikonet. Grid Objects-paletten inneholder ulike hjelpemidler for å sette inn ting på siden som bilder, lyder, animasjoner, Quick- Time - filer osv.

8 11.Når gride en er markert vil Inspector-paletten se ut som på den høyre illustrasjonen nedenfor. Du kan stille inn størrelsen på grid en ved å skrive inn tall for bredde og høyde eller ved å dra i ankerpunktene i selve grid en. Ankerpunkt 12.Det neste er å plassere en Table (tabell) på siden. Dra tabell -ikonet overpå siden (eller dobbelklikk) på samme måte som du gjorde med grid en. Du kan flytte tabellen rundt inne i grid en og plassere den hvor du vil. Hensikten med tabellen er å lettere å kunne plassere tekst og bilder på en ryddig måte på hjemmesiden. Se neste side for hvordan du forandrer tabellen. Tabel

9 13.Når tabellen er markert så vil inspector en se ut som på illustrasjonen nedenfor til høyre. Her kan du gjøre innstillinger for hele tabellen (f.eks. hvor mange rader du vil ha horisontalt og vertikalt). Ved å klikke på Row (rad) kan du gjøre innstillinger for en rad av celler. Ved å markere en enkel celle (Cell) kan du gjøre innstillinger for denne. Du kan gjøre innstillinger for tykkelsen for Border-linjen eller om du vil fjerne Border en helt (skriv 0 i feltet for Border). I Cell Space skriver du inn hvor mye luft du ønsker mellom cellene. Tabel Border 14.For å slå sammen to eller flere celler markerere du de cellene du ønsker å slå sammen med pekeren (klikk på en celle, hold shift-tasten nede og klikk på neste celle). De cellene du ønsker å slå sammen markeres med en svart konturlinje. Gå så til Special i meny-linjen. velg Table og så Merge Cells. De cellene du har valgt vil nå slås sammen til en celle.

10 15.Illustrasjonen nedenfor viser hvordan tabellen ser ut etter at noen av cellene er slått sammen, border-linjen er fjernet og hele tabellen er strukket ut i lengden. Husk å lagre. 16.Det er nå på tide å sette inn de elementene du på forhånd har gjort ferdig i Photoshop. For å sette inn et bilde i en av cellene drar du bildeikonet inn i den cellen. Alternativt kan du plassere markøren i cellen og dobbelklikke på ikonet.

11 17.Pass på at bilde-ikonet er markert. Velg så Source i Inspectoren. Søk deg frem til bildet du vil sette inn ved å klikke på mappesymbolet til høyre for der det står Empty References. Velg bildet. Der det står Empty References vil det nå stå navnet på bildet du har satt inn og hvilken mappe det er lagret i. Mappesøk 18.Illustrasjonen under viser en side satt sammen av 4 forskjellige bilder. For å unngå for store og tunge bildefiler så kan man dele opp store bilder i mindre små som settes inn i hver sin celle i en tabell.

12 19.Illustrasjonen under viser hvordan man legger inn en link (kobling) i et bilde. Klikk på More i Inspector-paletten og kryss av i boksen hvor det står Use Map. Menylinjen vil nå forandre seg og se ut som nedenfor. Du kan velge mellom firkant, sirkel og fri form for å markere den delen av bildet du vil skal inneholde en link. Skriv inn link-adressen i feltet for URL. Link-markører More Use Map Font-stil Font-type Fet type Kursiv 20. Skal du skrive tekst rett inn i internett-dokumentet bør du - som tidligere nevnt - bruke fonter som du vet er standard på de fleste pc er og mac er. Dette for at en som laster ned siden din skal oppleve siden slik du har tenkt den. I likhet med bildene er teksten også bare en kobling mellom dokumentet og font-mappen som inneholder fonttypen du har valgt. Skal du arbeide med mer avanserte tekst-effekter bør du gjøre dette i Photoshop og legge det inn som bilder i internett-dokumentet. Størrelse