Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser och hur Dreamweaver använder dem. Du kommer även att få se hur man skapar webbsidor och fyller dem med text, samt hur man hämtar, sparar och infogar bilder: allt man behöver för att få en stadig grund att stå på! I slutet på lektionen kommer en övning som du löser enligt beskrivningen. Men låt inte beskrivningen hindra dig, heller! Du får mer än gärna prova på olika saker utan att vi gått igenom det i kursen, och du får mer än gärna skapa egna sidor på den webbplats vi försett dig med. Det viktiga är att du lär dig det vi gått igenom i kurstexten, och att det tydligt framgår att du gjort det som övningen gick ut på. Så om du kommer på något som du funderat över men som vi inte gått igenom ännu så är det bara att göra en egen sida där du skamlöst skryter om det inför alla andra. Huvudsaken är förstås att du lär dig använda programmet! Läs kurstexten i den takt du själv vill, och häng gärna med i kurstexten genom att testa det jag beskriver i ditt eget Dreamweaver. Men innan själva lektionen börjar finns det en fråga vars svar du själv behöver känna till... Vilken version av Dreamweaver använder du? Det här är en viktig fråga: vilken version av Dreamweaver använder du? Det har nämligen uppstått en mängd olika skillnader mellan versionerna, särskilt i och med CS4, som skiljer sig ganska radikalt från de äldre versionerna -- så jag måste göra skillnad på de olika versionerna i kurstexten. Det är alltså viktigt att du själv vet vilken version du använder, eftersom vissa saker fungerar helt olika i t ex Dreamweaver CS4 än de gör i Dreamweaver MX, och då kommer jag att beskriva vad, varför, och hur man gör i båda. Och då behöver du ju veta vilken info som gäller för just ditt Dreamweaver. Det finns en massa olika versioner: Dreamweaver MX, MX2004, CS2, CS3, CS4 samt CS5. Dessutom finns flera olika varianter på varje version, t ex CS3 Extended, och så vidare... Och till råga på allt så kallas ibland MX, MX2004, CS2 och CS3 för Dreamweaver 6, 7, 8 och 9! Vilken röra, va? Men som tur är så spelar inte varianterna någon roll; jag talar bara om det här eftersom frågan annars oundvikligen dyker upp: "jag har inte Dreamweaver CS2, jag har CS2 Extended! Vad gör jag nu?". Svaret är alltså att det inte spelar någon roll vilken variant du har, det är bara versionen som är viktig. Hur tar du reda på din version, då? Det är inget större mysterium: när du väl startat ditt Dreamweaver så kan du snabbt ta reda på vilken version det är, antingen genom att vara uppmärksam när programmet laddas in -- då visas en ruta där det står vilken version det är -- eller genom att ta en titt på programmets namnlist (den färgade randen allra högst upp). Där brukar det också stå. Men om det inte gör det kan du säkert fastställa vilken version det är genom att gå in på menyn Help > About Dreamweaver (Hjälp > Om Dreamweaver på svenska). Då dyker det upp en ruta mitt på skärmen där det står vilken version du använder.
Sida 2 av 7 När du startat Dreamweaver och gått in på menyn Help > About Dreamweaver (eller Hjälp > Om Dreamweaver på svenska) så dyker en sån här ruta upp. Där står klart och tydligt exakt vilken version av Dreamweaver du använder. I exemplen ovan är det ju Dreamweaver MX, Dreamweaver CS3, samt Dreamweaver CS4. Du kanske lägger märke till att MX-versionen heter Macromedia Dreamweaver MX, medan de andra heter Adobe Dreamweaver. Det beror bara på att företaget Adobe köpte Macromedia, så nu heter programmet Adobe Dreamweaver istället. Du stänger inforutan som dyker upp genom att trycka på tangenten Esc uppe i tangentbordets vänstra hörn, eller genom att klicka på rutan ett par gånger. Nu när du vet vilken version du använder ska vi fortsätta med att se vad som finns att använda i programmet. Sedan börjar själva lektionen! För dig som använder Dreamweaver CS5 I den här kursen kommer det ofta att göras skillnad på olika Dreamweaver-versioner. Det kommer att stå t ex "för dig som använder CS4, gör såhär; för dig som använder äldre versioner, gör såhär," och så vidare. Om du använder Dreamweaver CS5 så kan du hålla dig till det som gäller för CS4 i kurstexten. Det finns saker som skiljer sig även mellan CS4 och CS5, men dessa framgår tydligt i texten. Dreamweavers beståndsdelar Dreamweaver skiljer sig litet till utseendet mellan versionerna, men i grund och botten fungerar de likadant. Den största skillnaden är mellan Dreamweaver CS4 och de äldre versionerna. När du startar Dreamweaver CS4 så ser programmet ut som i bilden nedan (fast en del saker syns inte, eller blir inte tillgängliga, förrän du skapat eller öppnat en sida du kan jobba med).
Sida 3 av 7 Använder du en äldre version? Då ser det nog ut såhär istället. Litet annorlunda, men i grunden är de rätt lika. Äldre versioner saknar en del av de listade grejorna, men inte de viktiga. Beståndsdelarna jag pekat ut i bilderna ovan är de här:
Sida 4 av 7 1. Menyraden 2. Site-knapparna* 3. Verktygsfält 4. Layout-knappen och sökrutan* 5. Infoga-paletten 6. Övriga paletter 7. Egenskapsfältet 8. Arbetsytan * Bara i version CS4 och CS5 1. Menyraden Högst upp är alla menyerna. En del lär du känna igen från andra program, t ex File och Edit (Arkiv och Redigera på svenska). Vi kommer att titta närmare på menyerna allt eftersom vi går vidare i kursen, men vi kommer inte att gå igenom allt de innehåller -- många av funktionerna är väldigt specialiserade och behöver bara användas vid väldigt särskilda tillfällen. Menyraden ser i stort sett exakt likadan ut mellan de olika versionerna, fast i de äldre kan menyn Format heta Text istället. Men de innehåller i stort sett samma saker ändå. Något som är värt att nämna här är att när jag vill att du ska gå in på ett särskilt menyval, till exempel valet Open i menyn File, så skriver jag det oftast såhär: gå in på File > Open. Om jag vill att du ska öppna menyn Modify, ta fram undermenyn Table och klicka på Insert Row så skriver jag såhär: gå in på Modify > Table > Insert Row. 2. Site-knapparna (Finns bara i CS4 och CS5) De här knapparna låter dig påverka hur du ser och behandlar din webbplats. Du hittar dem till höger om menyraden. Vi kommer inte att använda dem vidare mycket, men de finns där. Site-knapparna finns bara i version CS4 och CS5, men deras funktioner finns ändå tillgängliga i alla versioner via olika menyer. Det är inget du behöver fundera över; jag säger precis vad du ska klicka på när det blir dags. 3. Verktygsfältet Under menyerna kommer verktygsfältet att dyka upp. I vissa versioner syns det inte förrän man öppna en sida som man kan jobba med. Verktygsfältet består av ett antal olika knappar och rutor som snabbt låter dig komma åt de vanligaste grejorna man brukar vilja kunna ändra på medan man jobbar med en sida -- t ex en ruta där man får skriva sidans titel, eller en knapp som snabbt låter dig se all kod som finns "bakom kulisserna" på dina sidor, och så vidare. Vi kommer att vilja göra allt det där litet längre fram i kursen, men inte än. 4. Layout-knappen och sökrutan (Finns bara i CS4 och CS5) När du först startat Dreamweaver står det "Design" på layout-knappen. Om du klickar på knappen så får du fram en lista på olika utseenden för Dreamweaver. Den kan likna det "gamla" utseendet om du väljer Classic, till exempel: då hamnar t ex Insert-paletten (vi tar den i nästa punkt) under menyraden, som i de äldre versionerna av Dreamweaver. Men det betyder ingenting mer än det: de olika layoutvalen är bara omstuvningar av alla beståndsdelarna så att de ska vara mer till hands beroende på vad du pysslar med. Du kan välja det du tycker passar, men jag kommer att anta att alla som kör med CS4 och CS5 använder sig av intällningen Designer här. Sökrutan är rätt så behändig: det är en ruta som du kan skriva in något du undrar över (på engelska om du använder ett engelskt Dreamweaver), t ex frames eller tables (två saker vi kommer till senare). Sedan trycker du på Enter. Då öppnas en webbläsare som automatiskt bläddrar till Adobes hjälpsajt och letar rätt på de sidor som kanske kan hjälpa dig.
Sida 5 av 7 Det är sällan den här hjälpfunktionen prickar alldeles rätt, men ofta kommer den ganska nära, så det är lätt att själv leta sig vidare därifrån. 5. Insert-paletten Rutor man kan stänga eller öppna och som innehåller en massa knappar och grejor kallas för "paletter". Den största och vanligaste paletten i CS4 är Insert-paletten, eller Infoga som den heter på engelska. Äldre versioner av Dreamweaver brukar ha Insert-paletten intryckt strax under menyraden istället för längs skärmens högra sida. Om du är gammal Dreamweaver-veteran och använder CS4 så kanske du vill återgå till det utseendet. Det gör då i så fall genom att klicka på Layout-knappen till höger om menyraden och välja Classic (se steg 3 ovan). Oavsett var på skärmen Insert-paletten finns så listar den de allra vanligaste grejorna man brukar sätta in i en webbsida. Det är bara att klicka på den pryl man vill använda så börjar det hända grejor. Vi kommer naturligtvis att ta en rejäl titt på den här paletten när det blir dags. Men just nu så är nog Insert-paletten rätt blek hos dig: du kan inte klicka på någon knapp. Det beror på att du inte har någon sida framme som du kan jobba med. Det kommer vi att rätta till alldeles strax! 6. Övriga paletter Det finns fler paletter än Insert, och vi kommer att använda oss av dem en hel del. En palett vi alltid kommer att använda oss av heter Files. Den brukar finnas längst ned i det högra hörnet på skärmen. Om du använder en äldre version av Dreamweaver så kan det hända att du hittar rutan ovan under fliken Site i paletten Files. Men det är ju ingen större skillnad.
Sida 6 av 7 7. Properties-fältet Properties-fältet ändrar innehåll beroende på vad du jobbar med just nu. Om du t ex satt ut en bild på din sida och sedan klickar på bilden så kommer fältet att visa de kontroller du kan använda för att ändra på bilden -- exempelvis bredd och höjd, var den ska placeras på sidan, och så vidare. Om du sedan skriver litet text så kommer innehållet i fältet att visa de kontroller du kan använda för att mixtra med texten. Vi kommer att använda Properties-fältet (eller Egenskaper som det heter på svenska) väldigt mycket. Just nu är nog ditt fält tomt, och det beror på att vi inte tagit fram något som vi kan jobba med ännu. När man jobbar med text, vilket ju är allra vanligast, så finns det finns en stor skillnad i Properties-fältet mellan CS4 och de övriga versionerna, och den ligger i knappen som heter CSS, längst till vänster. Knappen finns i många av de äldre versionerna med, men det är i CS4 som den tar över en stor del av arbetet. Du kommer att märka att det är krångligare (till en början) att jobba med text i CS4 än i de övriga versionerna, men det är faktiskt något man tjänar på i längden. Om du råkat klicka på CSS-knappen så kommer du tillbaka till det vanliga utseendet genom att klicka på HTML-knappen ovanför. 8. Arbetsytan Det här är såklart det allra viktigaste i hela Dreamweaver: arbetsytan. Det är här dina sidor kommer att visas när du öppnat dem och jobbar med dem. Varje sida öppnas i ett eget fönster som du kan maximera, minimera och flytta på precis som du kan göra med vanliga fönster när du t ex surfar på nätet. Arbetsytan är sig lik mellan alla Dreamweaver-versioner. Sådär! Nu vet vi hur Dreamweaver ser ut, och vad som finns där. Men innan vi börjar göra något så ska vi först ställa in och förbereda vår webbplats så att den kan ta emot det vi skapar. Det är bara att följa stegen nedan. Det är många steg, och det kan gälla att hålla tungan rätt i mun om du inte är så van vid datorer, men bara du läser noga och följer instruktionerna så ska det lösa sig.
Sida 7 av 7 Till kursens framsida Sida 2 av 4»