När vi har öppnat Dreamweaver kan vi urskilja fyra (nåja, egentligen fem) klart avgränsade områden:

• Överst, och för smalt för att kunna markeras snyggt på bilden ovan, finns, liksom i de flesta program, rullgardinsmenyerna. I Dreamweaver använder jag inte rullgardinsmenyerna i någon större utstäckning. Det mesta sköts på annat håll.

• Infoga-menyn, eller menyerna, gör precis vad det låter som. De hjälper oss att infoga objekt på sidan. Objekten kan vara allt från bilder till komplicerade spry-widgets. Det finns så mycket att infoga att objekten måste delas upp i olika flikar. Till vardags räcker det med fliken Common/Vanliga där jag särskilt vill betona Infoga div-tag och Infoga bild.

• Arbetsytan, synlig först när jag har öppnat ett dokument, kan ha tre olika lägen: Kod, Delad eller Design (på bilden används mellanläget). Vi arbetar i huvudsak i Design-läget men måste använda oss av Kod-läget i vissa situationer - så glöm imte att kika in där emellanåt. Och glöm inte heller att ge din sida, ditt HTML-dokument, ett namn (den uppmärksamme ser att min sida på bilden heter Untitled Document! Pinsamt)

• Egenskapsfönstret är huvudsakligen en informationskanal. Där hittar vi upplysningar om markerade objekt. Man kan också göra ändringar här - som att döpa bilder, tilldela klasser eller göra länkar av text och bild. Vi bör dock inte "designa" i egenskapsfönstret. Undvik alltså att sätta färg, ange typsnitt, storlekar, justeringar osv. Det gör vi mycket bättre på annat håll.

• Slutligen har vi Panelerna. Här samlas ett antal övergripande specialverktyg varav det viktigaste, minst lika viktigt som Arbetsytan, är Fil-panelen, nederst till höger. Nästan lika viktig är CSS-panelen. Vi kommer också att titta lite på Tag-panelen - men sen är det stopp.

  
  

För att kunna fortsätta nåste vi skilja på begreppen "Sajt", "Sida" och "HTML-dokument":

En sajt (site, plats) är summan av allt som finns under din domän (typ www.mitthem.se). Där finns bilder, HTML-dokument, CSS-filer, Pdf-filer, musikslingor, videosnuttar, arbetsmaterial mm - allting, naturligtvis, sorterat i en mängd strukturerade kataloger. En sajt är ett stort monster till åbäke och kan vara svår att hantera när den fått växa några år.

En sida är ett enda dokument inklusive de bilder eller annat externt material som kommer att synas när det öppnas i en web-läsare. Är sidan stor i höjd eller bredd kan man skrolla sig runt på den men så fort man klickar på en hyperlänk lämnar man sidan för att hoppa till en annan sida.

Ett HTML-dokument är det vi egentligen arbetar med på Arbetsytan. Vi "skriver" HTML-kod (och viss annan kod längre fram). Ett HTML-dokument innehåller inga bilder eller andra konstigheter; det innehåller bara text. Om det finns en bild på SIDAN talar HTML-koden om var webläsaren kan hitta bilden. Det är alltså webläsaren som "puttar" dit bilden när besökaren surfar in på din sida. (I Dreamweavers designläge puttar Dreamweaver dit bilden åt oss för att simulera hur sidan ser ut i en webläsare.)

 

Börja alltid i Fil-panelen. Oavsett vad man ska göra i Dreamweaver börjar det alltid med åtminstone ett par klickningar nere i Fil-panelen.

Ska du börja från absoluta början, dvs skapa en ny sajt, klickar du på rullgardinen (där det står "getit" på bilden) och väljer Hantera platser (Manage sites). Läs mer om hur du går vidare här.

Om du ska arbeta på en redan definierad sajt, och om du har flera stycken sajer på datorn, är det också i denna rullgardin du väljer vilken sajt du vill arbeta med just nu.

När du startar Dreanweaver kommer du automatiskt in på den sajt du arbetade med sist (förutsatt att det inte är första gången du använder Dreamweaver på datorn eller att du inte har raderat eller flyttat sajten i datorns utforskare/finder). Du kan se vilken sajt du är inne på genom att titta på någon av de två rödmarkerade fälten (rödmarkerade i bilden, inte i verkligheten), rullgardinen och "Roten". I den här bilden ser du att jag arbetar med sajten "getit".

Under Roten listas sajtens hela innehåll. Den här sajten innehåller bara ett enda HTML-dokument, "index.html", vilken kommer att utgöra sajtens startsida. (Den uppmärksamme noterar att sidan har en bild och, om allt vore som det skulle, borde bilden också vara med på listan över sajtens filer. Dessvärre missade jag att klicka på den lilla blå "snurrpilen" mellan de två rödmarkerade raderna innan jag tog den här bilden. Snurrpilen uppdaterar fil-listan när man exempelvis precis infogat en bild utifrån.)

Fil-listan kommer att innehålla mappar när sajten blivit lite större. Alla mappar visas med den gröna mappikonen och ett litet tecken framför. Roten är själv en mapp så vi kan se ett litet minutecken framför mappikonen. Om jag klickar på detta tecken "kollapsar" jag mappen. Det låter hemskt, men det enda jag gör är att jag stänger mappen och dess innehåll döljs. Klickar jag på den igen, öppnas den igen och innehållet blir åter synligt. Om det alltså står ett plustecken framför Rot-mappen ser jag ingen fil-lista alls och det ser ut som om hela min sajt är borta. Men var inte orolig. Det är bara att klicka på plustecknet så kommer allt tillbaks.

För att öppna ett HTML-dokument i Arbetsytan dubbelklickar du på filnamnet i fil-listan. För att skapa ett nytt dokument så högerklickar du på Roten och väljer "Ny fil" från menyn som öppnas. Glöm inte att ge den nya filen ett namn (som inte får innehålla å, ä eller ö eller specialtecken) och glöm inte att filen måste ha kvar sin ändelse, ".html" eller ".htm".

Du kan ha hur många HTML-dokument som helst öppna samtidigt. Dina öppna dokument visas som flikar överst i Arbetsytan och för att växla mellan olika dokument är det bara att klicka på dessa flikar.

 

Svårare än så är det inte att göra länkar till andra sidor på din sajt. Det är bara att klicka och dra. Ska du däremot länka till någon annans sida så måste du skriva in adressen för hand. Alltså: Tag reda på den exakta adressen (lättast är att gå dit i din webläsare och kopiera det som står i adressfönstret). Markera den klickbara texten ("elevsidor" nedan) och skriv sedan in adressen (eller klistra in den) i länkfältet i egenskapsfönstret. Det är mycket viktigt att det står "http://..." i början; annars kommer det inte att fungera.

Lägg märke till att jag i det här fallet har valt "Target" - "_blank" under länkfältet. Det betyder att när min besökare klickar på länken kommer den nya sidan att öppnas i en ny flik (eller ett nytt fönster på äldre webläsare). Denna funktion är naturligtvis använbar - men var försiktig; många, inklusive jag själv, tycker illa om när den används omotiverat.