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, samt CS4. 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.

   
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å då 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!

 

 

 

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).

 

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:

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

 

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)

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, 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)

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 använder sig av Designer.

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älpsidor, och letar rätt på de sidor som kanske kan hjälpa dig.

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.

 

 

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.

 

 

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 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:

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.

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.

 

 

 

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:

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.

 

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:

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 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.

 

 

 

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.

 

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å...

 

... 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.

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:

 

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:

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?

 

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.

 

 

2. Formatera text

Du kan ju redan skriva in text, men nu ska vi se hur man formaterar det man skrivit in -- alltså hur man ändrar utseende på texten. Men då börjar vi även närma oss en av de stora skillnaderna mellan Dreamweaver CS4 och de äldre versionerna.

Jag går igenom grunderna för hur man formaterar text längre ned. Men först tänker jag förklara precis vad det är som hänt mellan CS3 och CS4, och varför det är bra fast det kanske inte verkar så just nu. Läs gärna om du vill hänga med i vad som hänt.

 

 

 

2.1. Inte som alla andra: CS4, text och CSS

I de äldre versionerna av Dreamweaver är det jättelätt att ändra utseendet på text precis hur man vill: det är bara att markera den text man vill ändra på och klicka på de rätta knapparna så händer det grejor. Precis som i Word eller ditt e-post-program, alltså.

Men i CS4 är det inte alls lika rättframt. Det går att göra vissa väldigt grundläggande ändringar på texten man markerat: man kan göra den fet eller kursiv, och placera den på olika ställen på skärmen -- men det är också i stort sett allt. För så fort som man till exempel försöker ge ett ord en annan storlek eller färg, som ju är så lätt i Word, så får man ett stort fönster i ansiktet där man måste göra en massa olika kryptiska val och inställningar innan man får gå vidare. (Vi kommer att titta på dem i nästa lektion.)

Detta beror på att Dreamweavers skapare försiktigt börjat knuffa oss webbutvecklare bort från ren HTML, som är det klassiska webbdesignspråket, och mer mot "nykomlingen" CSS, som är framtiden.

Oj, nu blev det krångligt. Vad innebär allt det där? Jag tänker inte bli så teknisk, så vi säger såhär: istället för att du får byta utseende på texten precis som du vill med bara ett par klick så drar CS4 i tyglarna litet grann, för vårt eget bästa. Istället för att göra som vanligt får vi i CS4 skapa olika text-utseenden i förväg, som vi får namnge och spara i en lista. Sedan kan vi säga åt Dreamweaver vilka av de textsnuttar vi skrivit som ska ha vilket utseende ur listan.

Så du kanske skapar ett utseende som gör text jättestor och lila, och sparar det som "lilarubrik" i listan. Sen kanske du skapar ett annat utseende som gör text normalstor och gul, och sparar det som "normalgul" i listan. Då kan du sedan lätt säga åt Dreamweaver att den och den paragrafen ska ha utseendet lilarubrik, och det och det ordet ska ha utseendet normalgul.

Du börjar alltså med att designa ett utseende för texten och sparar det i en lista. Sedan kan du använda dina utseenden på de textbitar du vill ska se ut så. Det är en del av grunden i CSS.

Detta känns säkert litet klumpigt i början, och Adobe verkar säkert taskiga och elaka som inte låter oss CS4-användare göra som vi vill på lättast möjliga vis, som man kan i t ex Dreamweaver MX eller CS3. Men det finns faktiskt en tanke bakom det hela: designspråket CSS är verkligen framtiden på nätet, så alla som vill pyssla med webbsidor måste ändå lära sig åtminstone grunderna i det förr eller senare -- och efter ett litet tag kommer du att märka hur bra och lättanvänt det faktiskt är! För du kan alltid gå in i dina listor och mixtra med dina sparade utseenden precis när du vill, och då kommer dina ändringar automatiskt att utföras överallt där du använt de utseendena.

Så om du t ex ändrar i utseendet lilarubrik och gör den röd istället så kommer all text som har lilarubrik som angivet utseende att omedelbart bli röd istället för lila, oavsett var den är -- till och med om den befinner sig på helt olika sidor! Och när du väl sitter där med 10, 20 olika sidor i din webbplats så lär du inse hur mycket tid och arbete CSS-formatet faktiskt sparar åt dig: om du hade skapat dina lila rubriker på vanligt vis, som man kan göra i t ex Word eller äldre Dreamweavers, och vill göra dem röda istället så hade du behövt öppna varje sida, en i taget, ändrat på rubrikerna för hand, och sedan sparat dem igen. Det hade tagit mycket, mycket längre. Men med CSS-formatet går en sådan ändring alltså bokstavligen på ett par sekunder.

Om det fortfarande känns begränsande så är det ändå inte så farligt -- för om du tänker efter så är det ändå inga utom de värsta clownsidorna som har vidare många ändringar i textens utseenden. Man brukar skilja på rubriker, länkar och brödtext, men det är också allt: tre olika utseenden. Så det är inte mycket att hålla reda på heller.

Och ni som som sitter med äldre versioner än CS4 behöver inte känna er utanför: vi kommer att jobba mer och mer med CSS ju längre in i kursen vi kommer, och i slutet har vi blivit riktiga experter!

Men just nu behöver ingen av oss tänka mer på sånt, för nu ska vi se hur man påverkar text på enklast möjliga vis. Man måste ju lära sig grunderna först.

Om du hängde med i kurstexten så har du ju redan provat att skriva litet på din webbsida, och har märkt att det definitivt inte är något märkvärdigt. Man klickar någonstans på sidan så visas en blinkande markör där. Om du då skriver något så dyker det upp text. Det fungerar alltså precis som i t ex Word eller ditt e-post-program. Och precis som i de programmen så kan du dessutom formatera texten. Det betyder att du kan ge den olika utseenden. Du kan göra den fet eller kursiv, bland annat. Du kan göra så att den hamnar...

... längst till vänster...

... i mitten...

... eller längst till höger.

Och om du använder en äldre version än CS4 kan du snabbt ge de delar av texten du markerar olika teckensnitt, storlekar och färger. (Vi ska som sagt se hur man gör detta i CS4 i nästa lektion.)

Hur gör man då för att få texten att se ut på alla de här visen? Vi går igenom vart och ett i tur och ordning, men börjar först med ett par vanliga saker man bör känna till:

 

 

 

2.2. Paragrafer, radbrytningar och hur man markerar

Detta är väldigt grundläggande, men om du inte känner till detta eller är litet osäker så skadar det inte om du läser igenom det här stycket. Det handlar om skillnaden mellan textparagrafer och radbrytningar och hur man får till dem, samt hur man gör för att markera text.
 

Paragrafer
 
   
När du skriver text och trycker på tangenten Enter hoppar markören alltid över raden direkt nedanför och landar på efterföljande rad istället. På så vis hamnar texten du just skrev i ett tydligt stycke. Ett sådant stycke kallas för paragraf. Det har ingen större betydelse förutom när man t ex ska justera text, vilket vi tittar närmare på alldeles strax. Den här texten blir till en separat paragraf så snart jag trycker på Enter, vilket jag gör nu!

Ser du? Markören hoppade över raden mellan stycket ovan och det här. Det är alltså det som händer när man trycker på Enter. Och nu har jag två paragrafer: den ovan, och den jag skriver nu. Men om man inte vill att texten ska hoppa över en tom rad? Då vill man inte ha en paragraf, utan en radbrytning.

 
Enter.
Det gula skenet visar var du hittar Enter på ditt tangentbord.
 
Radbrytningar
 
   
En radbrytning får du till genom att hålla ned någon av de två Shift-tangenterna på ditt tangentbord. Medan Shift är nedtryckt trycker du en gång på Enter. (Se exempelbilden intill om du är osäker på vilka Shift-tangeterna är: det är samma tangenter man håller ned för att skriva med stora bokstäver.)

Så nu håller jag nED SHIFT OCH TRYCKER EN GÅNG PÅ ENTER:
Ser du? Nu hoppade markören inte över någon rad alls! En radbrytning, alltså.

Men även om man satt in en radbrytning så har man ändå inte bytt paragraf: du kan trycka in hur många radbrytningar som helst, men det du skriver efter dem hör fortfarande till samma paragraf som texten ovanför radbrytningarna. Det är inte förrän du trycker på Enter (utan Shift) som du skapar en ny paragraf.

Paragrafer är ofta mer lättlästa, och är dessutom en viktig del av webbdesign, så man gör bäst i att hålla sig till dem i längden.

Dessutom: observera att du aldrig behöver lägga till egna radbrytningar så snart din text börjar nå slutet på "pappret". Allt sånt sköter programmet, så det är bara att skriva på!

 
Shift.
Det gula skenet visar var du hittar de två Shift-tangenterna. Håll ned en av dem. Medan du håller någon av Shift-tangenterna nedtryckt så trycker du en gång på Enter. Då får du till en radbrytning.

Markera text

Om du skrivit text och vill till exempel göra den fet eller kursiv så är det bara att markera texten och sedan ge den dess nya utseende.

Men hur markerar man text? Det är inget märkvärdigt; det sitter redan i ryggmärgen på de allra flesta som brukar använda datorer. Men om du är osäker kan du läsa igenom det här stycket ändå så lär du dig hur man gör.

Om du vill markera ett enskilt ord räcker det med att bara dubbelklicka på ordet. Då markeras det. Prova att dubbelklicka på det här ordet: dubbelklick!

För att avmarkera klickar du bara någonstans i texten. Då stängs markeringen av.

Om du vill markera flera ord, eller bara en del av ett ord, gör du såhär:

För muspekaren till början på den text du vill markera. Sedan håller du ned vänster musknapp. För pekaren över det du vill markera. Därefter släpper du upp musknappen. När du nu klickar på någon av de olika knapparna som ändrar textens utseende så är det bara den markerade delen som påverkas. Du kan ofta lägga till flera olika utseenden på samma text.

Här är ett exempel:

1. Jag vill markera en bit av texten intill. Hur gör jag?  
2. Jag för pekaren till början på det jag vill markera. Sedan håller jag ned vänster musknapp...  
3. ... och drar musen åt det håll jag vill markera. När jag släpper musknappen är markeringen klar.  
4. Då kan jag ge den markerade texten hurdant utseende jag vill utan att något annat påverkas. Vi går igenom grunderna i hur man ändrar utseende på det man markerat alldeles strax.  

Du kan prova markera texten i den här sidan om du vill, eller vilken webbsida som helst. Du kan visserligen inte ändra utseende på den, men du kan i alla fall få grepp om hur man gör för att markera. Om du håller ned musknappen och för pekaren uppåt eller nedåt så markerar du hela rader.

Och om du vill ändra utseende på ett enskilt ord är det ännu enklare! Då räcker det nämligen med att du bara klickar en gång mitt i ordet så att markören visas någonstans i det. När du sedan t ex klickar på knappen för kursiv stil så blir hela ordet kursivt.

Prova att markera texten du nu läser på de olika vis jag beskrivit. Du kan visserligen inte ändra utseende på den (du kan bara ändra utseendet på dina egna sidor medan skapar dem), men du får åtminstone se hur det fungerar. Om texten ändrar färg betyder det att den markerats. Så enkelt är det alltså!

 

Nu kan du skriva text och markera den. Då ska vi se hur man formaterar den -- alltså ändrar utseende på den. Vi ska som sagt hålla oss till de mest grundläggande visen just nu.

 

 

 

2.3.1. Formatera text i CS4

Eftersom CS4 skiljer sig i textformateringen från de andra versionerna kommer jag att ta upp CS4 enskilt, och de övriga får sitt eget stycke längre ned (2.3.2. Formatera text i äldre versioner). Om du inte har något intresse av hur detta går till i CS4 kan du hoppa dit istället.

Vi kommer att börja med att se hur man använder Properties-fältet för att ändra på texten man skrivit i sin sida. Det viktiga nu i början är att du ser till så att knappen HTML längst till vänster i fältet är intryckt (alltså att den är ljus). Om du klickar på CSS-knappen så kan du alltid gå tillbaka genom att klicka på HTML-knappen igen.

Du hittar rutor för färg och storleksval när du klickat på CSS, men dem tar vi nästa gång, för det är som sagt inte att bara använda dem rakt av. Om du börjar mixtra med dem så kommer du att få upp ett stort fönster som vill att du ska göra vissa val. Där är det i så fall bara att klicka på Cancel, så stänger du fönstret.

Vi ska nöja oss med standardinställningarna för tillfället, och de flesta av dem gör man alltså med Properties-fältet inställt på HTML.

Bilderna nedan visar de val vi bör hålla oss till under lektion 1. Du kommer att märka att jag ofta skriver vad knapparna jag klickat på heter, fast det står ju inga namn på själva knapparna. Du får fram namnen genom att hålla muspekaren över en knapp. Då dyker det upp en liten etikett med knappens namn.

 

1. Fet och kursiv stil

 

2. Rubriker

 

3. Indragen text

 

4. Listor

 

5. Justering

 

6. Standarfärger och standardteckensnitt

Dreamweaver CS4 kan använda sig av en enklare form av CSS för att låta dig ändra på sidans standardfärger -- alltså sidans bakgrundsfärg och textfärg -- samt dess standardteckensnitt. Det enda du behöver göra är att klicka på det du vill ha, svårare är det inte. Då ska vi se hur man gör!

Börja med att klicka på knappen Page Properties längst ned i Properties-fältet.

 

Då öppnas fönstret med samma namn. Se till så att valet Appearance (CSS) är markerat i listan till vänster. Då är det bara att börja klicka på grejor!

 

Page font avgör vilket teckensnitt som ska vara standard för sidan. De är samlade i grupper om teckensnitt som liknar varann, så det är bara att välja en grupp som du tycker om. Om du ogillar ett val är det bara att välja ett annat, det är inget märkvärdigt med det.

Size bestämmer vilken standardstorlek texten i din sida ska ha. Det är bara att välja en storlek i rutan till vänster, och ett mått i rutan till höger. Håll dig till det vanligaste måttet, px, för tillfället.

Text color bestämmer såklart vilken färg texten ska ha "i grunden". Just nu är det svart som gäller, men du kan välja vilken färg du vill. Klicka bara på den grå rutan intill Text color så dyker textväljaren fram. Där kan du välja mellan de 256 standardfärger som finns tillgängliga.

Det går även att välja och blanda till precis hurdan nyans man vill, men det tar vi upp i nästa lektion. Det viktiga just nu är att du får känna på grunderna. Klicka bara på den färg du vill ha, och om du ångrar dig så går du bara in på färgväljaren igen och väljer en annan färg -- eller, om du vill återställa färgen till hur den var först, så kan du klicka på den genomstrukna vita rutan uppe till höger i färgväljaren. Då återställs textfärgen till svart.

Background color fungerar precis likadant som Text color, fast den här färgen gäller förstås sidans bakgrund. Just nu är bakgrunden vit, men nog vore det väl roligare med någon annan färg?

Resten av valen tar vi senare.

 

När du valt Page font, Size, Text color och Background color kan du klicka på OK, så verkställs dina val:

Tjusigt!

Om du är missnöjd med något av dina val så är det alltså bara att klicka på knappen Page properties igen och ändra på det du inte tycker om.

 

 

 

2.3.1. Formatera text i äldre versioner

När du skrivit text i en sida kan du markera det du vill ändra på och sedan välja hur du vill ändra det med hjälp av knapparna och rutorna i Properties-fältet. Du kommer att märka att jag ofta skriver vad knapparna jag klickat på heter, men det står ju inga namn på dem. Det är inga trollkonster från min sida: du får fram namnet på en knapp genom att hålla pekaren över den. Då dyker det upp en liten etikett med dess namn.

 

1. Rubriker

 

2. Fetstil och kursiv stil

 

3. Justering

 

4. Teckensnitt

 

5. Textstorlek

 

6. Listor

 

7. Indrag

 

 

8. Teckenfärg

 

 

Page properties

Utöver allt jag skrivit ovan kan man även ändra på saker via Page Properties. Klicka bara på knappen längst ned i Properties-fältet så får du upp ett fönster med samma namn. Se till så att valet Appearance är valt i listan till vänster.

(Om ditt Dreamweaver inte har någon Page Properties-knapp kan du gå in på Modify > Page Properties istället. Då får du upp en liknande ruta som den nedan, fast då lär du inte behöva välja Appearances i någon lista. Det kan saknas andra val med, men inget livsviktigt -- i stort sett så ska allt fungera likadant.)

Nu märker du nog att många av de saker du kan ändra på i Page Properties verkar identiska med de som finns att ändra på i Properties-fältet. Så vad är skillnaden?

Skillnaden är att det du ändrar på här gäller sidans standardinställningar. Om du t ex klickar i rutan Text Color och väljer en annan färg så kommer all text på sidan att få den färgen -- utom den text du redan gett någon annan färg via Properties-fältet. Det beror på att de ändringar du gör i Properties-fältet täcker över alla standardinställningar. Visst låter det virrigt?

Här är ett exempel: om jag skapar en ny sida så är dess standardteckenfärg svart, som vanligt. Om jag då skriver litet text i sidan och färgar ett ord rött...

 

... och sedan går in i Page Properties och ändrar Text Color till grönt, så är det bara den ofärgade texten, alltså den standardfärgade (svarta) texten, som blir grön:

 

För att förvärra det hela kan jag tala om att den röda texten också blivit grön under det röda. Så om jag markerar den röda texten och "tvättar bort" den röda färgen genom att klicka på färgrutan i Properties-fältet och välja den genomkorsade rutan uppe i färgväljarens högra hörn...

 

... så ser vi att det ordet också blivit grönt under all färg -- eftersom sidans standardfärg för text ju numera är grönt. Om jag inte gjort standardfärgen grön hade ordet blivit svart istället när jag tvättade bort den röda färgen.

 

Testa gärna så att du får litet grepp om det hela. Det är inte livsviktigt, men värt att känna till.

Alla ändringar du gör i fönstret Page Properties gäller alltså hela sidan, men påverkar (till synes) bara det du inte varit och mixtrat på med hjälp av Properties-fältet. Om du vill ändra på sidans standardinställningar kan du hålla dig till Page font, Size, Text color och Background color under den här lektionen.

Värt att nämna kan vara att du kan "tvätta bort" ett teckensnitt du lagt på en text via Properties-fältet genom att markera den drabbade texten, klicka i rutan Font i Properties-fältet, och välja Default i listan. Då får den markerade texten det teckensnitt som valts som standard i Page Properties-fönstret istället.

 

 

3. Hämta och infoga bilder

Nu vet vi ju hur man sätter in text i sin sida. Men hur gör man med bilder?

Det är inte svårt alls! Det enda krånglet är att komma ihåg var man har sin bildmapp....

Vi kommer att få hämta en del övningsbilder i den här kursen, så det är lika bra att gå igenom precis hur man gör för att hämta hem dem, hur man sätter dem i rätt mapp, och hur man får ut dem på ens sida. Det fungerar precis likadant "på riktigt", fast istället för att ladda ned dina bilder från en webbplats kanske du sätter in dem i din bildmapp via din digitalkamera eller något liknande.

 

 

 

3.1. Spara en bild från nätet

Låt oss säga att jag har en bild som jag vill använda på min sida: bilden heter yawn.jpg. (De vanligaste bildfilerna på nätet har ändelsen .jpg, .gif samt .png. Vi kommer att gå mer in på det i framtiden.)


Bilden är hämtad från stock.xchng [www.sxc.hu]
och används enbart i utbildningssyfte.

 

Jag kan klicka en gång med höger musknapp på bilden, så får jag upp en meny:

 

Jag väljer Spara bild som (eller liknande; det skiljer sig litet beroende på vilken webbläsare man använder). Då får jag välja var i min dator jag vill spara bilden. Vi vill alltid spara våra bilder i bildmappen, så jag klickar i rutan Spara i högst upp och väljer Mina dokument, för det var ju där jag skapade min webbmapp, som i sin tur innehåller min bildmapp.

När jag är i Mina dokument dubbelklickar jag på min webbmapp, "Mats webbplats", så att den öppnas. Där dubbelklickar jag på min bildmapp, "bilder", så att den öppnas.

Nu får jag skriva vad bilden ska heta. Jag döper min till "yawn". Här finns en viktig grej: använd absolut inte å, ä, ö eller andra konstiga tecken! Dreamweaver är helylleamerikanskt och kan inte "se" bilder som har å, ä eller ö (samt andra knasiga symboler) i namnet. Håll dig till små bokstäver från a till z.

Sedan är det bara att klicka på knappen Spara, så sparas bilden i min bildmapp. Man behöver inte ändra på något; programmet sköter alla inställningar själv.

 

Nu finns bilden i min bildmapp, och då kan jag använda den i Dreamweaver utan problem!

(Man kan använda bilder som finns utanför bildmappen med, men då blir det huvudbry när den ska publiceras. Så se alltid till att bilden du vill använda i din sida först finns i din bildmapp.)

 

 

 

3.2. Sätt in en bild i din sida

Nu vill jag använda bilden jag sparade. Då går jag in på den sida jag vill använda bilden i. Sedan klickar jag på den rad jag vill att bilden ska vara på så att markören blinkar där (vi kommer att bli mycket mer exakta och sofistikerade i framtida lektioner, men just nu nöjer vi oss med att sätta in bilden på en tom rad):

 

Därefter går jag in på Insert > Image. Då visas fönstret Select Image Source. Här får jag välja precis vilken bildfil jag vill sätta in i min sida. Jag ser till så att det är namnet på min bildmapp som står i rutan Leta i. (Om det inte gör det så är det bara att klicka i rutan, så får du leta dig fram till bildmappen.) Då visas de bilder mappen innehåller. Jag klickar på den bildfil jag vill ha och klickar på knappen OK.

 

Nu sätts bilden in i sidan! Men det kan hända att ditt Dreamweaver först slänger upp fönstret Image Tag Accessibility Attributes. (Det här fönstret dyker inte upp i alla Dreamweaver-versioner; om du inte får upp det så kan du strunta i det här.)

Fönstret vill veta vad bilden ska ha för Alternate text -- alltså "alternativ text", vad som ska stå i bildens ställe om den inte syns hos besökaren. Det är en grej som också blivit Internet-standard på sistone, särskilt nu när Braille-plattorna blivit allt billigare och vanligare bland synskadade: om de besöker sidan känner de att det finns en bild där, men om du inte skriver något som alternativ text så har de ingen aning om vad bilden egentligen föreställer. Så det hör till artigt sätt att skriva en kort och kärnfull beskrivning av bilden i Alternate text-rutan, gärna på engelska om din sida riktas mot en internationell publik. Man brukar skriva ungefär såhär:

Image: yawning man

Mer än så behövs inte. Börja inte gå in på vilken färg han har på tröjan eller att han har rasande fina tänder. Tala bara om att här är en bild (Image) och vad den föreställer i så få ord du kan korta ned det till. Däremot kan du strunta i rutan Long description. Klicka på OK istället.

 

Sådär! Nu har vi en bild på vår sida.

 

Här är det värt att nämna att när du fått ut dina sidor på nätet (steg 5 på den här sidan) så kan det hända att någon av dina bilder helt enkelt inte syns på din sida, även om du är 100% säker på att du gjort alldeles rätt.

I så fall beror det med största sannolikhet på att just den bildens filnamn innehåller något av de förbjudna tecknen -- alltså å, ä, ö eller något annat skumt.

Som tur är så är det lätt att döpa om en bild: gå in i din lokala webbplats, leta rätt på bilden som inte vill synas i paletten Files, högerklicka på den (eller Option-klicka om du har en Mac) och välj Edit > Rename (alltså "Döp om"). Då får du ge bilden ett nytt namn. Det är bara att skriva något nytt namn och klicka en gång någonstans bortanför filen så färdigställs namnet.

Men även om du döpt om en bild behöver du ändå ta bort den feldöpta bilden från din sida och sätta in den som fått rätt namn.

Allt det här gäller samtliga bilder, inte bara de du hämtat från nätet. Så om du t ex har ett eget digitalfoto som heter "öland" och använder den på någon av dina Dreamweaver-sidor så kommer den bilden inte att synas när du publicerat sidan förrän du:

1. Gått in i din lokala webbplats och öppnat sidan
2. Tagit bort den bråkiga bilden från sidan
3. Döpt om bildfilen i Files-paletten till exempelvis "oland"
4. Lagt ut den nydöpta bilden på sidan igen
5. Sparat sidan och publicerat den

Krångligt, men så är det!

 

 

 

3.3. Justera en bild

Nu ska vi justera bilden. Som du kanske minns så innebär det att placera den till vänster, i mitten, eller till höger på sida.

Börja med att klicka en gång på bilden så att den blir vald.

Nu kanske du märker att Properties-fältet bytt utseende och att det finns en Align-ruta där -- och det vi använde för att placera texten hette ju Align.... Men den rutan kan du strunta i, för den gäller bara bildens vertikala position! Med den kan man alltså bestämma om en bild ska finnas högst upp, längst ned, eller i mitten på det utrymme man placerat den i. Men detta gäller inte för vanliga sidor som den vi har, utan kräver grejor som tabeller och liknande för att det ska funka -- och det är något vi inte kommer att pyssla med förrän om ett tag.

Så hur gör man för att justera en bild?

Det finns flera olika sätt. Läs igenom hela stycket, för vissa sätt kanske saknas i just din version av Dreamweaver. I så fall finns det andra som fungerar!

Om du använder en äldre version av Dreamweaver kanske du hittar tre små knappar som liknar de som används för textjustering i Properties-fältet:

I så fall är det de du använder för att placera bilden: se till att bilden är markerad (alltså att du klickat på den), och klicka sedan på den knapp som visar åt vilket håll du vill ha bilden, så flyttar sig bilden enligt ditt val.

Om du däremot inte har några sådana knappar så kan du gå in på menyn Format > Align istället och välja något där. Left är ju vänster, Center är mitten, och Right är höger.

Jag klickar på bilden och går in på Format > Align > Center.

 

Sådär! Nu är jag nöjd med min fina sida och vill spara den.

 

 

 

4. Save As

Jag kan visserligen gå in på File > Save, som vanligt, men jag kan även gå in på File > Save As (Arkiv > Spara som) om jag vill spara sidan med ett särskilt namn -- t ex gasp.html.

Då är det bara att skriva gasp i rutan Filnamn i fönstret som dyker upp, och sedan klicka på Spara. Här behöver man faktiskt inte bry sig om filändelsen, för så länge det står .html någonstans i rutan Filformat så sköter programmet det självt.

 

Som du ser på rutan Spara i högst upp så låter Save As-funktionen oss välja exakt var vi vill spara filen. I mitt fall nöjer jag mig med att spara den i min webbmapp. Men om du vill spara en fil någon annanstans så är det bara att bläddra fram den mapp du vill ha i rutan Spara i innan du klickar på Spara.

 

 

 

5. Publicera sidor med bilder i

När jag nu sparat sidan så är det dags att publicera den -- och bilden! Man måste nämligen även publicera de bilder man använt på sidan: de finns inte "inbakade" i sidan som man kanske kunde tro. Så om du publicerar sidan men glömmer att publicera bilden och sen besöker sidan med din webbläsare så kommer du att upptäcka att det inte att finnas någonting där bilden skulle vara (utom möjligen den alternativa texten du skrev in).

Du publicerar bilder på precis samma sätt som du publicerar sidor: klicka på bildfilen i Files-paletten och klicka på knappen Put file(s). Då laddas den upp till din webbplats på nätet. Men om du har flera nya bilder som du vill publicera är det litet onödigt att gå in i mappen och börja klicka på dem en och en. Då är det faktiskt lättare att bara klicka på själva bildmappen och publicera den istället, så förs hela rasket ut på nätet.

Värt att nämna är att du bara behöver publicera bilden en gång. Även om du ändrar på sidans innehåll och publicerar en ny version så behöver du alltså inte ladda upp samma bild igen. Så länge den finns på rätt ställe i din webbplats på nätet så kommer sidan att återanvända den.

Så jag publicerar sidan gasp.html. Sedan öppnar jag bildmappen i Files-paletten genom att klicka på det lilla plus-tecknet till vänster om den, klickar på bildfilen yawn.jpg, och publicerar den med.

När jag då byter till Remote view så ser jag att sidan, bildmappen, och bilden i mappen förts ut på nätet! Du märkte nog att bildmappen skapades automatiskt: jag publicerade ju bara bilden, men nu finns även mappen bilder ute på nätet. Det beror på att Dreamweaver är jättenoga med ordningen, så den tar litet egna initiativ om användaren är en ansvarsfeg slarver.

 

(Om du sparat eller publicerat något men det av någon anledning inte dyker upp i Files-paletten så kan du behöva uppdatera paletten. Det är inget konstigt, utan fungerar i stort sett på precis samma sätt som när du uppdaterar en webbläsare: du tvingar bara paletten att ta en ny titt på allt innehåll i webbsidan. Då listas även det den kanske "glömde" förra gången. Du uppdaterar Files-paletten genom att klicka på den cirkelformade pilen till höger kontaktknappen.)

Och man nu besöker följande sida...

mholmgren.qqq.hosting.barentshus.com/gasp.html

... så möts man av följande skönhet:

 

Så gör man alltså för att spara en bild till bildmappen i sin lokala webbplats, sätta ut den på en webbsida, och sedan få ut hela rasket på nätet.

Nu har vi gått igenom de allra yttersta grunderna i webbdesign! Men de är också de absolut viktigaste, för utan dem hade det inte blivit nånting alls.

Nu när du kan skriva text och sätta ut bilder på nätet så är allt annat egentligen mest bara finesser och finlir. Men sånt är ju kul med, och vi sätter igång med det i nästa lektion.

Nu är det dags för övningen!

 

 

 

  Övning, lektion 1

Skapa en sida i din webbplats som heter index.html. För att den ska fungera rätt måste den ha ändelsen .html, och sidan index.php måste raderas från din webbplats på nätet.

Skriv en presentation av dig själv på sidan. Använd olika format på texten där du tycker det behövs -- starta med en rubrik (alltså heading), t ex.

Ställ in sidans utseende så att den har andra standardfärger än svart text på vit bakgrund. Du får gärna använda ytterligare färger på texten om det går i din version av Dreamweaver.

Ställ in sidans standardteckensnitt till en annan typsnittsgrupp (om det går i din version av Dreamweaver).

Klicka på en av miniatyrbilderna nedan. Då öppnas bilden i originalstorlek. Spara den stora versionen av bilden till din bildmapp enligt beskrivningen i kurstexten (se stycket Infoga bilder i sidan).

Bilderna är hämtade från stock.xchng [www.sxc.hu]
och används enbart i utbildningssyfte.

Spara minst två av bilderna till din bildmapp och infoga dem i din sida.

När du är nöjd med din sida kan du publicera den på din webbplats på nätet. Kom ihåg att du måste publicera bilderna med, annars blir det bara tomma lådor med ett litet "x" i där bilderna ska vara (det är symbolen för "bild saknas"). Det fixar du till genom att helt enkelt ladda upp bilderna till din webbplats.