Sida 1 av 25 Lektion 1: sida 2 av 4 «Sida 1 av 4 Till kursens framsida Sida 3 av 4» 1. Skapa och förbered en webbplats Vi ska alltså börja med det krångligaste först: vi ska skapa och förbereda vår webbplats. Alla som går den här kursen har fått en egen liten webbplats på en server som tillhör Sverigefinska folkhögskolans samarbetspartner Barents Hus AB, och kan använda den platsen för att publicera resultaten på de övningar ni gör. Men ni måste inte använda er kurswebbplats: om ni har en egen webbplats som ni vill använda istället så går det precis lika bra. Kom bara ihåg att inga webbhotell fungerar exakt likadant: om du använder en annan webbplats än den vi erbjuder så kommer du förstås att behöva ange andra sorters uppgifter för att koppla ditt Dreamweaver till den platsen. Det finns till och med viss risk att det inte fungerar alls, för om din webbplats har Frontpage-inställningar i grunden så kan det uppstå problem: Adobe och Microsoft -- alltså Dreamweavers och Frontpages/Expression Webs skapare -- är inte direkt bästisar, och det brukar tyvärr gå ut över oss användare. Men det är inte alls säkert att nåt går fel, så det kan vara värt att testa. 1.1. Starta Dreamweaver När du startar programmet kan det hända att du får upp en stor blaffa som skryter om hur bra Dreamweaver är, och listar en massa olika grejor du kan använda dig av och så vidare. Om du hittar en liten ruta nere i dess vänstra hörn med titeln Don't show again (Visa inte igen) kan du bocka för den. Då kommer inte blaffan att visas nästa gång du startar Dreamweaver. Det är lika bra, för man använder den ändå aldrig. Du kan behöva svara "Yes" eller "OK" på frågan om du är säker att du inte vill se den fula blaffan igen när du bockat för rutan. Om du startar en äldre version av Dreamweaver kan det istället för en ful blaffa dyka upp ett fönster som frågar om du tänker jobba med Design, Development (alltså utveckling), och liknande. Välj Design om det går, och stäng sedan fönstret genom att klicka på krysset uppe i fönstrets högra hörn. Annars kommer Dreamweaver att ändra utseende för att försöka underlätta ditt framtida utvecklingsarbete, och det är inget vi är intresserade av i den här kursen. 1.2. Välj att skapa en ny webbplats Nu ska vi börja göra vår webbplats. Om du använder Dreamweaver CS4 eller CS5 kan du klicka på ikonen Site, som finns till höger om menyraden högst upp. Knappen ser ut som tre små datorer, en som är kopplad till två andra. När du klickat på den kan du välja New Site i den lilla menyn som visas.
Sida 2 av 25 Om ditt Dreamweaver saknar Site-knappen så kan du även gå in på menyn Site (Plats på svenska) och välja New Site (Ny plats), det är samma sak. Oavsett vilken väg du tog så ska fönstret Site definition for Unnamed Site 1 (eller något liknande) visas. Nu skiljer sig de olika Dreamweaver-versionerna litet från varandra: Om du använder Dreamweaver upp till version CS4, klicka här. Om du använder Dreamweaver CS5, klicka här. Ställ in webbplatsen för Dreamweaver upp till version CS4 Detta gäller alltså inte Dreamweaver CS5. Om du använder Dreamweaver CS5, klicka här. Nu ska vi börja ställa in webbplatsen för Dreamweaver upp till version CS4. Klicka på fliken Advanced, högst upp i fönstret. Då byter fönstret utseende. CS4: 1. Skapa en webbmapp i din dator När man jobbar med Dreamweaver använder man två webbplatser samtidigt: den som finns ute på nätet samt något som kallas för "lokal webbplats". Den lokala webbplatsen är en kopia på den som finns ute på nätet, och förvaras i din dator. Sättet vi kommer att jobba på i den här kursen innebär att du först gör färdigt sidorna i din lokala webbplats. När du sen är nöjd med dem kan du föra ut dem på din webbplats på nätet. (Vi förser dig med en egen
Sida 3 av 25 gratis kurswebbplats som du kan ladda upp dina övningar till.) Vi ska alltså börja med att skapa en lokal webbplats. Det första steget blir att peka ut var vi vill ha den. Det gör man genom att skapa en mapp som vår webbplats kommer att byggas upp i. Se till så att Local info är valt i listan till vänster (du väljer något genom att klicka på det). Klicka sedan på mappen till höger om textrutan Local root folder. Nu visas fönstret Choose Local Root Folder for site Unnamed Site. Gör följande: 1. Vi ska börja med att leta oss fram till en mapp vi kan skapa vår lokala webbplats i. Se till så att du är i en mapp som du lätt hittar igen. Du kan använda vilken mapp du vill, men jag kommer själv att använda mappen Mina dokument. Den öppnar man snabbast genom att klicka på knappen som heter just Mina dokument i listan till vänster (eller, om den knappen saknas, genom att klicka i rutan Select högst upp och välja Mina dokument där). 2. När du kommit in i Mina dokument kan du klicka på knappen Skapa ny mapp. Du hittar den till höger om Select-rutan högst upp i fönstret. När du klickat på knappen så skapas en ny, tom mapp i Mina dokument. Den får automatiskt namnet Ny mapp, och dess namn är markerat. Klicka ingenstans, utan gå till nästa steg. 3. Nu ska vi döpa mappen. Du behöver som sagt inte klicka någonstans, för mappens namn är redan markerat, så det är bara att skriva det du vill att den ska heta. Jag döper min mapp till Mats webbplats. Jag kommer att kalla den här mappen för "webbmappen" i fortsättningen. Om du hann klicka någonstans så att webbmappens namn "stängdes", eller vill byta namn på den igen, så kan du alltid högerklicka på den och välja Byt namn i listan som dyker upp. Då får du namnge den igen.
Sida 4 av 25 4. Sedan är det bara att klicka på knappen Spara. (Det kan stå Öppna här istället, men det gör inget. Klicka på knappen bara.) När du klickade på knappen så ska webbmappen ha öppnats. Det ser du i textrutan Select högst upp: där ska webbmappens namn stå nu. Dess namn ska även stå vid rubriken Select längst ned i fönstret. Jag döpte ju min webbmapp till Mats webbplats, så i mitt fall ska det alltså stå Select: Mats webbplats både uppe och nere i fönstret. (I ditt fall ska det förstås stå det du döpte din webbmapp till där.) Om din webbmapps namn inte står efter Select så får du dubbelklicka på webbmappen tills det blir rätt. När dess namn står efter Select i fönstret så är det bara att klicka på knappen Spara. Då kommer du tillbaka till fönstret med inställningarna. CS4: 2. Kontrollera att det står rätt i rutan Local root folder Nu är du alltså tillbaka i fönstret Site Definitition for Unnamed Site. Vi ska se till så att textraden i rutan Local root folder slutar med namnet på din webbmapp. (Raden avslutas oftast med ett / som sätts in automatiskt, men det behöver du inte bry dig om.) Du kan behöva rulla på texten i rutan för att se slutet på den. Det lättaste sättet är att klicka en gång i rutan Local root folder så att markören blinkar i den. Sedan trycker du på den högerpekande piltangenten på ditt tangentbord. Då flyttar sig markören åt höger. Fortsätt att flytta markören åt höger tills du ser slutet på texten i rutan. Om texten i rutan inte slutar med namnet på din webbmapp så får du klicka på mapp-ikonen till höger om rutan igen. Då öppnas fönstret Choose Local Root Folder, och där kan du dubbelklicka på webbmappen så att den öppnas. När dess namn står i rutan Select högst upp kan du klicka på knappen Spara. Nu borde webbmappens namn stå i slutet i rutan Local root folder och då kan vi gå vidare. CS4: 3. Skapa en bildmapp När allt är som det ska i rutan Local root folder så kan du klicka på den lilla mapp-ikonen till höger om rutan Default images folder. Nu ska vi skapa en mapp som webbplatsens alla bilder ska hamna i.
Sida 5 av 25 Fönstret Choose local images folder for Unnamed Site öppnas. Se till så att din webbmapps namn står i rutan Select högst upp. Om det inte gör det så får du leta dig fram till platsen där du skapade webbmappen och dubbelklicka på den så att den öppnas. Det är viktigt att vi befinner oss i den. Nu ska vi skapa en ny mapp inuti din webbmapp. Det är hit alla bilder ska hamna. Det är mycket vanligt -- ofta ett krav -- att man har en specifik mapp som alla webbplatsens bilder sparas i, annars blir det ofta bara rörigt. Följ bara stegen nedan: 1. Klicka på knappen Skapa ny mapp, så dyker en ny mapp upp. 2. Döp mappen till något passande. Det vanligaste är "bilder" eller "images". Jag döper min mapp till "bilder", och kommer att kalla den här mappen för "bildmappen" i fortsättningen. Observera: använd bara små bokstäver när du skriver mappens namn, och använd inga mellanslag, punkter, eller konstiga tecken: bara bokstäverna a till z, alltså (samt siffror om du tycker det behövs). Det är Internet-standard och kan bespara dig problem i framtiden. Det spelar egentligen ingen roll exakt vad du döper mappen till bara du följer den här regeln och kommer ihåg att du ska spara dina framtida bilder i den. När du skrivit klart mappens namn ska du inte klicka på Spara, för då stängs fönstret utan att det blir rätt. Dubbelklicka istället på bildmappen tills den öppnas. Det är inte förrän när bildmappens namn står i rutan Select högst upp i fönstret som du kan klicka på Spara. I mitt fall ska det alltså stå "bilder" i rutan Select (och längst ned i fönstret). Först då kan jag klicka på Spara.
Sida 6 av 25 Nu återvänder du till fönstret Site Definitition for Unnamed Site. CS4: 4. Kontrollera att det står rätt i rutan Default images folder Klicka en gång i rutan Default local images folder och flytta markören åt höger tills du ser slutet på texten i den. Raden ska sluta med namnet på din webbmapp, följt av ett snett streck, och sedan namnet på din bildmapp. Det betyder att bilderna kommer att sparas i din bildmapp, som finns i din webbmapp. Ser det inte alls ut så? Då får du klicka på mapp-ikonen till höger om rutan igen. Leta dig fram till din bildmapp (som finns i webbmappen) och dubbelklicka på den så att den öppnas. Klicka sedan på knappen Spara. Nu ska bildmappens namn stå i slutet på textraden i rutan Choose local images folder. Då är allt i sin ordning, och vi kan fortsätta. CS4: 5. Namnge webbplatsen Nu ska själva webbplatsen få ett namn. Klicka i rutan Site name högst upp. Där får du skriva in namnet på din webbplats -- det är ett samlingsnamn för din webbmapp och bildmapp, och är mest bara så att du känner igen den om du skapar fler webbplatser i framtiden. Det är lika bra att ge den ett tjusigt namn, så skriv vad du vill att den ska heta här. Jag döper min webbplats till Mats webbplats. Inte så originellt men lätt att känna igen. CS4: 6. Ställ in webbplatsen på nätet
Sida 7 av 25 Nu har vi skapat en lokal webbplats. Då ska vi se till så att vi kan komma åt vår webbplats ute på nätet med. Börja med att klicka på Remote info i listan till vänster. Här fanns det inte så mycket att göra, eller hur? Det ska vi fixa till! Klicka i rutan Access, så dyker det upp en liten lista. Klicka där på valet FTP. Så ska det se ut! Nu har vi en massa rutor att fylla i! Följ stegen nedan: 1. FTP host. Klicka i rutan FTP host. Här ska adressen till just din webbplats ute på nätet stå. Du skriver det Dreamweaver-användarnamn jag mailade till dig, följt av.qqq.hosting.barentshus.com (Om du inte fått något användarnamn för Dreamweaver-kursen av mig så får du höra av dig på mats.holmgren@svefi.net.) Om mitt användarnamn är mholmgren så blir adressen jag ska skriva in i rutan FTP host följande: mholmgren.qqq.hosting.barentshus.com En lång harang, va? Men så är det med gratisplatser: man får inte vara petig! 2. Login. Klicka i rutan Login. Här ska vi skriva vårt inloggningsnamn till sajten. Här skriver du nästan exakt samma sak som i FTP host -- du skriver bara en viktig detalj annorlunda. Skriv ditt Dreamweaver-användarnamn här följt av @qqq.hosting.barentshus.com Det enda skillnaden mellan det vi skrev i FTP host och det vi just skrev i Login-rutan är att vi byter ut första punkten mot ett snabel-a. Om mitt användarnamn är mholmgren så blir alltså mitt login följande: mholmgren@qqq.hosting.barentshus.com (Du skriver ett snabel-a genom att hålla ned tangenten AltGr (till höger om mellanslagstangenten) och trycka på siffran 2 i sifferraden på ditt tangentbord.) 3. Password. Här skriver du in ditt lösenord. Det står i mailet jag skickade till dig. Och som sagt, om du inte fick något mail eller har tappat bort det så får du höra av dig på mats.holmgren@svefi.net. 4. Save. Se till så att rutan Save är förbockad. Om den redan är det så behöver du inte klicka i den, annars måste du skriva in ditt lösenord igen. Om du använder en allmän dator, t ex på skolan eller på jobbet, så bör du nog låta Save vara avbockad. Då måste du visserligen skriva in lösenordet varje gång du ska komma åt din webbplats, vilket blir rätt ofta, men hellre det än att riskera att nån taskmört tar sig in och ritar mustascher på alla dina bilder, eller hur? 5. Test. Avsluta hela det här med att klicka på knappen Test (om du har någon sådan). Då testar
Sida 8 av 25 Dreamweaver om du kommer åt din webbplats med de inställningar du gjort. Om det lyckas så får du upp en trevlig meddelanderuta som talar om att allt gått bra: Annars får du upp en otrevlig ruta som säger att det inte gick bra alls. Då får man försöka hitta problemet. Det allra vanligaste är att folk som redan kan det här med Internet varit smarta och skrivit in webbsnutten http:// eller ftp:// före adressen i rutan FTP host. Men det är alltså fel! Det ska inte stå någonting alls före ditt namn i rutan FTP host, annars går det inte. Datorer är jättenoga med att allt ska vara exakt rätt, så om du inte får det att funka kan du jämföra det du skrivit mot bilden och beskrivningen ovan. Det är alltså så det ska se ut (fast ordningen kan vara litet annorlunda beroende på vilken version av programmet du använder). Om det absolut inte fungerar alls så kan du hojta till i FirstClass-forumet så försöker vi hitta en lösning åt dig. Chansen är ju stor att det alltid finns någon som vet exakt vad det är som händer. Men vi är ju optimister, så vi förutsätter att allt det här går både snabbt och smärtfritt -- så när det väl fungerar är det bara att klicka på OK på båda fönstren. När du klickat på OK på de öppna fönstren så ser du fönstret Manage Sites (eller Edit Sites i äldre versioner; det är samma sak). Där listas de webbplatser du har tillgång till. Där borde du se namnet på din webbplats nu. Se till så att den är markerad (alltså att den är mörk) och klicka på knappen Done. Om du någon gång vill in och mixtra med din webbplats inställningar så kan du alltid gå in på menyn Site och välja Manage Sites (eller Edit Sites). Då får du fram samma fönster. Där är det bara att markera den webbplats vars inställningar du vill ändra på och klicka på knappen Edit. Men det är nog inget som är aktuellt just nu. Nu är vi klara! Klara med att ställa in webbplatsen, alltså. Men vi har fortfarande en del saker att fixa till innan allt funkar som det ska. Gå till steg 1.9. nedan.
Sida 9 av 25 Ställ in webbplatsen för Dreamweaver CS5 Detta gäller alltså inte versionerna upp till och med CS4. Om du använder Dreamweaver av en version upp till och med CS4, klicka här. Nu ska vi börja ställa in webbplatsen för Dreamweaver CS5. Skriv in vad din webbplats ska heta i rutan Site Name. Detta är bra att göra ifall du skapar fler webbplatser, så du lätt ser vilken som är vilken. Ingen annan ser namnet på webbplatsen. Nu ska vi skapa en webbmapp i datorn. CS5: 1. Skapa en webbmapp i din dator När man jobbar med Dreamweaver använder man två webbplatser samtidigt: den som finns ute på nätet samt något som kallas för "lokal webbplats". Den lokala webbplatsen är en kopia på den som finns ute på nätet, och förvaras i din dator. Sättet vi kommer att jobba på i den här kursen innebär att du först gör färdigt sidorna i din lokala webbplats. När du sen är nöjd med dem kan du föra ut dem på din webbplats på nätet. Vi ska alltså börja med att skapa en lokal webbplats. Det första steget blir att peka ut var vi vill ha den. Det gör man genom att skapa en mapp som vår webbplats kommer att byggas upp i. Börja med att klicka på mapp-knappen till höger om rutan Local Site Folder.
Sida 10 av 25 Nu visas fönstret Choose Root Folder. Det är antagligen inställt på en mapp som heter exempelvis Unnamed Site 2 eller något sådant. Det är en mapp Dreamweaver skapat automatiskt för oss, men vi vill skapa vår lokala webbplats i en mapp vi själva döper, så gör såhär: Klicka på knappen Upp en nivå. Den tar oss ut ur mappen vi är i just nu. Då ser fönstret ut ungefär såhär:
Sida 11 av 25 1. Vi ska börja med att leta oss fram till en mapp vi kan skapa vår lokala webbplats i. Se till så att du är i en mapp som du lätt hittar igen. Du kan använda vilken mapp du vill, men jag kommer själv att använda mappen Mina dokument. Den öppnar man snabbast genom att klicka på knappen som heter just Mina dokument i listan till vänster (eller, om den knappen saknas, genom att klicka i rutan Select högst upp och välja Mina dokument där). 2. När du kommit in i Mina dokument kan du klicka på knappen Skapa ny mapp. Du hittar den till höger om Select-rutan högst upp i fönstret. När du klickat på knappen så skapas en ny, tom mapp i Mina dokument. Den får automatiskt namnet Ny mapp, och dess namn är markerat. Klicka ingenstans, utan gå till nästa steg. 3. Nu ska vi döpa mappen. Du behöver som sagt inte klicka någonstans, för mappens namn är redan markerat, så det är bara att skriva det du vill att den ska heta. Jag döper min mapp till Mats webbplats. Jag kommer att kalla den här mappen för "webbmappen" i fortsättningen. Om du hann klicka någonstans så att webbmappens namn "stängdes", eller vill byta namn på den igen, så kan du alltid högerklicka en gång på den och välja Byt namn i listan som dyker upp. Då får du namnge den igen. (Du kan även klicka en gång på mappen så den blir vald, och sen klicka en gång på dess namn. Då öppnas namnet, och då kan du ändra på det.) 4. Se till så att mappen du just skapade är vald -- om den inte är markerad klickar du en gång på den. Sedan är det bara att klicka på knappen Spara. (Det kan stå Öppna här istället, men det gör inget. Klicka på knappen bara.) När du klickade på knappen så ska webbmappen du just skapade öppnas. Det ser du i textrutan Select högst upp: där ska webbmappens namn stå nu. Dess namn ska även stå vid rubriken Select längst ned i fönstret. Jag döpte ju min webbmapp till Mats webbplats, så i mitt fall ska det alltså stå Select: Mats webbplats både uppe och nere i fönstret. (I ditt fall ska det förstås stå det du döpte din webbmapp till där.) Du kanske ser att det står fel efter Select i bilden nedan: "Mats fina saj"! Det är bara en bugg och inget att bry sig om. När du öppnat mappen du skapade så ska vi skapa en ny mapp inne i den! Klicka på knappen Skapa ny mapp här...
Sida 12 av 25... så skapas en ny mapp inuti webbmappen. Detta ska bli den mapp som våra bilder ska hamna i, så döp den till något passande. Jag döper den till "bilder". Observera: använd bara små bokstäver när du skriver mappens namn, och använd inga mellanslag, punkter, eller konstiga tecken: bara bokstäverna a till z, alltså (samt siffror om du tycker det behövs). Det är Internet-standard och kan bespara dig problem i framtiden. Det spelar egentligen ingen roll exakt vad du döper mappen till bara du följer den här regeln och kommer ihåg att du ska spara dina framtida bilder i den. Sedan kan du klicka på Spara så kommer du tillbaka till Site-fönstret. CS5: 2. Kontrollera att det står rätt i rutan Local Site Folder Nu är du alltså tillbaka i fönstret Site Setup. Vi ska se till så att textraden i rutan Local Site Folder slutar med namnet på din webbmapp. (Raden avslutas oftast med ett \ som sätts in automatiskt, men det behöver du inte bry dig om.) Du kan behöva rulla på texten i rutan för att se slutet på den. Det lättaste sättet är att klicka en gång i rutan Local Site Folder så att markören blinkar i den. Sedan trycker du på den högerpekande piltangenten på ditt tangentbord. Då flyttar sig markören åt höger. Fortsätt att flytta markören åt höger tills du ser slutet på texten i rutan. I mitt fall står det Mats fina sajt i slutet, som jag ju döpte min webbmapp till. Då är allt som det ska. Om texten i rutan inte slutar med namnet på din webbmapp så får du klicka på mapp-ikonen till höger om rutan
Sida 13 av 25 igen. Då öppnas fönstret Choose Root Folder igen, och där kan du dubbelklicka på webbmappen du skapade så att den öppnas. När dess namn står i rutan Select högst upp kan du klicka på knappen Spara. Nu borde webbmappens namn stå i slutet i rutan Local root folder och då kan vi gå vidare. Notera: Om webbmappens namn ändå inte står i slutet i rutan Local Site Folder så kan vi alltid skriva in den för hand. Gör då såhär: Klicka till höger om det sista \-tecknet så att markören blinkar där. Skriv sedan in exakt samma namn du gav din webbmapp. I mitt fall skulle jag alltså skriva Mats fina sajt där. Nu kan vi gå vidare! Klicka på Servers i listan till vänster. Här får vi välja att skapa en ny webbplats. Klicka på plus-knappen under rutan mitt i fönstret. CS5: 3. Ställ in webbplatsen på nätet Nu har vi skapat en lokal webbplats. Då ska vi se till så att den kopplas ihop med vår webbplats ute på nätet. Gör såhär:
Sida 14 av 25 1. Connect using. Klicka på pilen vid den här rutan och välj FTP i listan. 2. Server name. Skriv vad servern ska heta i dina listor. Du kan hoppa över det här steget om du vill, eller bara skriva in något du känner för. Jag skrev in "DW-kursen". 3. FTP Address. Klicka i rutan FTP Address. Här ska adressen till just din webbplats ute på nätet stå. Du skriver det Dreamweaver-användarnamn jag mailade till dig, följt av.qqq.hosting.barentshus.com (Om du inte fått något användarnamn för Dreamweaver-kursen av mig så får du höra av dig på mats.holmgren@svefi.net.) Om mitt användarnamn är mholmgren så blir adressen jag ska skriva in i rutan FTP host följande: mholmgren.qqq.hosting.barentshus.com En lång harang, va? Men så är det med gratisplatser: man får inte vara petig! 4. Username. Klicka i rutan Username. Här ska vi skriva vårt inloggningsnamn till sajten. Här skriver du nästan exakt samma sak som i FTP Address -- du skriver bara en viktig detalj annorlunda. Den enda skillnaden mellan det vi skrev i FTP Address och det vi skriver i Username-rutan är att vi byter ut första punkten mot ett snabel-a. Så om mitt användarnamn är mholmgren blir alltså mitt login följande: mholmgren@qqq.hosting.barentshus.com (Du skriver ett snabel-a genom att hålla ned tangenten AltGr (till höger om mellanslagstangenten) och trycka på siffran 2 i sifferraden på ditt tangentbord.) 5. Password och Save. Skriv in ditt lösenord i rutan Password. Det står i mailet jag skickade till dig. Och som sagt, om du inte fick något mail eller har tappat bort det så får du höra av dig på mats.holmgren@svefi.net. Se sedan till så att rutan Save är förbockad. Om den redan är det så behöver du inte klicka i den, annars måste du skriva in ditt lösenord igen nästa gång du ska ladda upp något till din webbplats. Men om du använder en allmän dator, t ex på skolan eller på jobbet, så bör du nog låta Save vara avbockad. Då måste du visserligen skriva in lösenordet varje gång du ska komma åt din webbplats, vilket blir rätt ofta, men hellre det än att riskera att nån taskmört tar sig in och ritar mustascher på alla dina bilder, eller hur?
Sida 15 av 25 6. Test. Avsluta hela det här med att klicka på knappen Test (om du har någon sådan). Då testar Dreamweaver om du kommer åt din webbplats med de inställningar du gjort. Om det lyckas så får du upp en trevlig meddelanderuta som talar om att allt gått bra: Annars får du upp en otrevlig ruta som säger att det inte gick bra alls. Då får man försöka hitta problemet. Det allra vanligaste är att folk som redan kan det här med Internet varit smarta och skrivit in webbsnutten http:// eller ftp:// före adressen i rutan FTP Address. Men det är alltså fel! Det ska inte stå någonting alls före ditt namn i rutan FTP Address, annars går det inte. Datorer är jättenoga med att allt ska vara exakt rätt, så om du inte får det att funka kan du jämföra det du skrivit mot bilden och beskrivningen ovan. Det är alltså så det ska se ut (fast ordningen kan vara litet annorlunda beroende på vilken version av programmet du använder). Om det absolut inte fungerar alls så kan du hojta till i FirstClass-forumet så försöker vi hitta en lösning åt dig. Chansen är ju stor att det alltid finns någon som vet exakt vad det är som händer. Men vi är ju optimister, så vi förutsätter att allt det här går både snabbt och smärtfritt -- så när det väl fungerar är det bara att klicka på OK på båda fönstren. När du klickat på OK klickar du på knappen Save, så sparas dina inställningar...... och Save igen, så sparas hela rasket i listan över tillgängliga webbplatser i din dator.
Sida 16 av 25 Om du någon gång vill in och mixtra med din webbplats inställningar så kan du alltid gå in på menyn Site och välja Manage Sites. Då får du ett fönster där du kan välja vilken webbplats du vill komma åt. Där är det bara att markera den webbplats vars inställningar du vill ändra på och klicka på knappen Edit. Men det är nog inget som är aktuellt just nu. Nu är vi klara! Klara med att ställa in webbplatsen, alltså. Men vi har fortfarande en del saker att fixa till innan allt funkar som det ska. Gå till steg 1.9. nedan. 1.9. Stäng av de tjatiga frågorna Nu ska vi bli av med en av Dreamweavers mest irriterande funktioner: frågan "Get (eller Put) dependent files?". Den kommer att dyka upp så fort man vill sätta ut -- eller komma åt -- något på sin webbplats som innehåller så kallade "beroende filer", t ex bilder eller liknande. Vi vill inte ha den frågan stup i kvarten, så vi ska stänga av den innan den ens hinner ställas. Vi vet ju vad vi vill göra, och kommer nu att spara ett hundratal framtida musklick genom att stänga av den. Gå in på menyn Edit och välj Preferences längst ned i den. Då dyker fönstret med samma namn upp. Klicka där på valet Site i listan längst till vänster, så får du fram rutor och grejor liknande de som finns på bilden ovan. Bland
Sida 17 av 25 dessa finns två små checkrutor (alltså rutor man kan bocka av eller för) vid titeln Dependent files. Klicka i båda rutorna så att Prompt on get/check out och Prompt on put/check in blir tomma. När du är klar klickar du på knappen OK, så stängs fönstret. 1.10. Ta fram Files-paletten Nu när inställningarna är klara och vi stängt av de jobbiga frågorna så ska vi ta oss in i vår webbplats på nätet och förbereda den för våra framtida storverk. Men först måste vi hitta rätt palett! Paletter är som sagt de små hjälpfönstren som finns längs höger sida i Dreamweaver. Paletten vi är ute efter just nu heter Files. (Om du använder en äldre version av Dreamweaver så är vi tekniskt sett ute efter fliken Site som finns i paletten Files.) Det snabbaste sättet att ta fram paletten är att trycka på tangenten F8 på ditt tangentbord. Om paletten redan är framme så stängs den av; i så fall är det bara att trycka på samma tangent en gång till så visas den igen. Nu bör du alltså veta var den är, om du inte såg den innan. (Du kan även gå in på menyn Window och klicka på valet Files (eller Site) tills det blir förbockat.) 1.11. Förbered din webbplats på nätet (Observera: det kan hända att din webbplats på nätet innehåller en del filer som inte behövs där. I så fall måste de tas bort innan vi gör något annat. Det här stycket beskriver hur man gör, så det är bara att följa beskrivningen nedan. Om din webbplats på nätet redan är tom så har du såklart inget att radera därifrån, men det är bra att läsa det här stycket ändå.) När du väl har framme paletten Files ska du se till så att den vänstra av de två rutorna nära toppen i paletten är inställd på din webbplats (i mitt fall ska det stå "Mats webbplats" i den). Om det inte gör det så klickar du i rutan, så får du välja din webbplats där. Se sedan till så att rutan till höger är inställd på Remote View. Om den inte är det så klickar du i den och väljer Remote View i menyn som dyker upp. Klicka sedan på knappen längst till vänster i paletten. Den ser ut som två sladdar som är på väg att kopplas ihop.
Sida 18 av 25 Sladdarna kopplas ihop! Det betyder att Dreamweaver fått kontakt med din webbplats som finns ute på nätet och visar nu allt den innehåller i Files-paletten. Det kan hända att det redan finns en del grejor där...... och i så fall finns där antagligen en fil vi absolut inte vill ha kvar. Filen vi inte tycker om heter index.php, så vi ska ta bort den -- annars kommer det vi gör senare i den här lektionen att hindras från att visas, för då kommer index.php att vara i vägen. Gör såhär: välj filen index.php genom att klicka en gång på den. Tryck sedan på tangenten Delete på ditt tangentbord. Nu får du frågan om du verkligen vill ta bort den valda filen. Det vill du ju. Välj Yes...... så försvinner den ur Files-paletten! Du kan gärna radera allt annat som finns där: det är bara en bunt med bildfiler som inte vi inte kommer att använda. Det enda som inte går att ta bort är mappen högst upp i rutan, och det är själva webbplatsen så det är nog lika bra att den är kvar!
Sida 19 av 25 1.12. Skapa en webbsida i din lokala webbplats Nu är den onda index.php-filen borta. Då ska vi skapa en ny, tom sida i vår webbplats. Och för att allt ska gå rätt och riktigt till så ska vi börja med att skapa sidan i vår lokala webbplats -- alltså i vår dator. Sen när vi är klar med den så kan vi sätta ut den på vår webbplats på nätet. Jag beskriver exakt hur man gör, så följ bara stegen nedan. 1. Gå in på din lokala webbplats. Klicka i rutan där det står Remote view i paletten Files, så får du upp en liten lista. Välj Local view, så får du se vad din lokala webbplats innehåller. Om du följt den här kurstexten så bör din lokala webbplats inte innehålla mycket mer än din tomma bildmapp. (I vissa versioner av Dreamweaver kan även mappen _notes dyka upp, men den behöver du inte bry dig om: den läggs till automatiskt i alla nya webbplatser och gör ingenting.) 2. Skapa en ny sida och namnge den. Klicka en gång med höger musknapp någonstans i det tomma vita fältet under rubriken Local files så får du fram en meny. Välj New File. Nu skapas en ny, tom webbsida i din lokala webbplats! Den får automatiskt namnet untitled.html. Det ska vi snart ändra på...
Sida 20 av 25... men först är det dags för en kort föreläsning om filändelser, och vad man bör tänka på när man namnger olika filer. Å, vad roligt! Filändelser Nästan alla sidor vi skapar kommer att sluta med filändelsen.html. Det är en förkortning för Hyper Text Markup Language, som är namnet på det programmeringsspråk som är allra vanligast på Internet. (Det finns sidor vars namn slutar på.htm, alltså utan ett "l" på slutet, men det är i grund och botten samma sak.) Ändelsen är viktig, för den talar om för webbläsaren att "det här är en webbsida". Utan ändelsen fattar inte webbläsarna att det är en webbsida, så då kommer den inte att visa någonting. När du byter namn på en sida så måste du se till så att ändelsen.html (inklusive punkten före) lämnas ifred. Om du råkar sudda ut ändelsen så är det inte hela världen: filen är inte förstörd på något sätt, men den går inte att använda förrän du skrivit tillbaka.html i slutet på namnet igen. Namn Sen är det frågan om filernas namn. Det finns en standardregel man bör hålla sig till när man döper sina filer: använd bara små bokstäver, håll dig till a - z (alltså inga å, ä, ö) samt vanliga siffror. Vid festliga tillfällen kan du möjligtvis använda tecknen - och _ (alltså minustecknet och "underscore", som du får till om du håller ned en Shift-tangent och trycker på minustangenten på ditt tangentbord). Allt annat bör undvikas, särskilt mellanslag och punkter! Den enda punkten som får finnas ska vara den som skiljer filens namn från dess ändelse. Exempel: Om jag vill döpa en webbsida till "mats glada sågarlåtar 2.html" så bör jag antingen skriva namnet såhär: "matsgladasagarlatar2.html", eller t ex "mats_glada_sagarlatar_2.html". Inga mellanslag och inga konstiga bokstäver som å, ä eller ö, alltså. Vad händer om du skriver in "fel" tecken ändå? Då sänder Bill Gates (eller Steve Jobs) dig en ond tanke, men annars händer inget speciellt, faktiskt. Grejen är att det är standard, och det är något som blir allt mer strikt hållet ute på nätet. Standarden är inte till för att påtvinga alla en själlös, homogen design utan för att underlätta att dina sidor ser exakt likadana ut i alla webbläsare och för alla användare, och till detta inkluderas även namnen på dina filer. Webbdesign har länge varit rena vilda västern (fast ett väldigt stillsamt vilda västern där den största dödsorsaken var blodproppar i benen). Men de glada dagarna då alla får göra precis som de vill med sina sidor börjar nå sitt slut... Tack och lov. index och default Och så en sista sak om namnen: det finns ett par namn som betyder något alldeles särskilt för webbläsarna. Dessa namn är "index" och "default", och fungerar automatiskt som webbplatsens "framsida". När man döper en sida till t ex index.html så betyder det alltså att webbläsaren automatiskt vill visa den sidan först av allt när någon besöker din webbplats.
Sida 21 av 25 Alla andra namn du kan komma på är fria att användas (fast låt oss hålla oss till reglerna jag just gick igenom), men namnen index och default är alltså bokade för särskilda ändamål. Det får dessutom bara finnas en enda index-sida på samma ställe i din webbplats, annars kommer de att börja bråka med varann och då brukar resultatet bli att man inte får fram någonting alls när man besöker din webbplats. Sådär! Nu har vi fått det sagt. Då är det dags att döpa om den nya sidan vi skapat. Om namnet untitled.html fortfarande är markerat (mörkblått, oftast) så kan du nu skriva in namnet index.html istället. Om namnet hunnit bli avmarkerat så räcker det med att du högerklickar på filen untitled.html, så att samma meny dyker upp som i steg 15. Välj där Edit > Rename (Redigera > Byt namn på svenska), så får du byta namn på filen igen. (Om du använder en äldre version av Dreamweaver hittar du Rename längst ned i menyn.) Döp din nya sida till index.html. När du är klar med namnbytet kan du klicka någonstans där det är tomt så "stänger" du namnet. Nu har du en sida som heter index.html i din lokala webbplats -- och när vi är klara kommer det som sagt att bli den sidan som automatiskt dyker upp när någon besöker din webbplats. Då är det dags att fylla sidan med något! 1.13. Skriv text i webbsidan och publicera den Dubbelklicka på filen index.html i Files-paletten så öppnas tom, vit sida på din skärm. Klicka någonstans i allt det vita så att markören blinkar där. Skriv en kort hälsning till dig själv. Det är inget märkvärdigt med att skriva text i Dreamweaver: det fungerar precis som när du skriver i t ex Word eller i ditt e-post-program. (Däremot fungerar ändringen av text litet annorlunda mellan de olika versionerna -- alltså hur man gör den fet, eller kursiv, eller färgar den, t ex. Det tar vi upp när vi väl fått det här att fungera.) Jag skriver en hälsning till mig själv:
Sida 22 av 25 När du är nöjd sparar du sidan. Det gör du genom att gå in på File > Save. Du kan även hålla ned tangenten Ctrl och trycka på tangenten S, det är snabbkommandot för samma sak. Nu har du sparat sidan! Då ska vi föra ut den på nätet. Det kallas som sagt för att "publicera", och det är lätt gjort: klicka en gång på filen index.html i Files-paletten, och klicka sedan på knappen Put file(s). Det är den uppåtpekande pilen. En ruta svischar förbi på skärmen. Den visar att Dreamweaver nu kopierar det du markerade i Files-paletten och klistrar in det i din webbplats på nätet. Om du nu ställer in paletten på Remote view så ser du vad som finns på din webbplats på nätet. Och där finns din sida! Det betyder att vem som helst nu kan gå till din webbplats och se den...
Sida 23 av 25... och det är precis vad vi ska göra nu! 1.14. Besök din webbplats på nätet (Du behöver inte stänga Dreamweaver för att göra detta!) Öppna en webbläsare och klicka i adressfältet högst upp: Skriv in adressen till din webbplats där. Webbadressen till just din plats är samma adress som du skrev in i rutan FTP host i steg 1.8 ovan. Så adressen till just min webbplats blir följande: mholmgren.qqq.hosting.barentshus.com Inte så snärtigt, kanske, och svår att komma ihåg, men om du törs avslöja för dina kompisar vad du håller på med på kvällarna så är det alltså den adressen de måste gå in på i sina webbläsare. När du blivit superexpert och skaffat en egen privat webbplats så kan du naturligtvis ha hur kort och häftig adress som helst (förutsatt att den är ledig att hyra). Men vad möter nu våra ögon?
Sida 24 av 25 Se där! Och då var vi klara med webbplats-inställningarna -- puh! (Du kanske lägger märke till att adressen i bilden ovan föregås av http://. Det är inget varken du eller dina besökare behöver skriva in själva, utan det sköter webbläsaren åt dig.) 1.15. En gång till! Testa att gå tillbaka till Dreamweaver (du behöver inte stänga webbläsaren) och skriv något mer i din index-sida. Spara den igen och ladda upp den till din webbplats genom att först klicka på den i Files-paletten och sedan klicka på den uppåtpekande pilknappen (Put file(s) hette den ju). Precis som vi gjorde nyss, alltså. När du klickat på Put file(s) så kör du över din gamla index-sida ute på nätet med den du just sparade. Det är det här som kallas uppdatering, och är vad alla webbsidor i grund och botten är till för: att få sitt innehåll och sin information förnyat. Det innebär alltså att man kontinuerligt piffar upp sina sidor hemma och sedan laddar upp de nya versionerna, vilka ersätter de gamla ute på nätet. När du laddat upp den nya versionen av din index-sida kan du gå tillbaka till din webbläsare och trycka på tangenten F5 på ditt tangentbord. Då uppdateras innehållet i webbläsaren, så att den senast sparade versionen av sidan visas. Då borde dina senaste ändringar dyka upp!
Sida 25 av 25 Så här funkar det alltså. Men det blir inte på långa vägar lika mycket tjafs nästa gång du startar Dreamweaver: nu kommer nämligen programmet ihåg det du gjorde innan, så du behöver inte börja ange några fler webbplatsuppgifter eller nåt sånt, utan då är det bara att se till så att Files-paletten är inställd på din lokala webbplats. Då är det bara att dubbelklicka på (eller skapa) den sida du vill jobba med, spara den när du är klar, och publicera den när du är nöjd med den, precis som vi gjort nyss. Du behöver inte gå in på Remote view alls, egentligen, om du inte tycker att det behövs. Nu kan vi det här med hur man laddar upp sina sidor på nätet. Då är det väl dags att börja titta på hur man faktiskt fyller sidorna med innehåll på rätt sätt. «Sida 1 av 4 Till kursens framsida Sida 3 av 4»