![]() |
||||||||||||
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
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 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.
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.
Klicka på fliken Advanced, högst upp i fönstret. Då byter fönstret utseende.
1.3. 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 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:
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.
1.4. 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.
1.5. 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.
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:
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.
Nu återvänder du till fönstret Site Definitition for Unnamed Site.
1.6. 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.
1.7. 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.
1.8. Ställ in webbplatsen på nätet 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:
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.
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 något, eller komma åt något, på sin webbplats. Vi vill inte ha den frågan, 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 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.
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!
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.
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:
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...
... 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:
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?
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!
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.
|
|
|||||||||||