1. När du öppnar DW första gången får du några alternativ att välja på:

Dreamweaver CS3 Grundinställningarna är något du kommer att behöva göra varje gång du kommer till en ny dator i skolan för att kunna vara säker på att programmet arbetar efter XHTML standarden och inte slänger in en massa onödig kod i dokumentet. Om du har funderingar kring någon del testa och se om du finner svaret på dina frågor i programmets inbyggda hjälpfunkion (F1). Att definiera en sajt 1. När du öppnar DW första gången får du några alternativ att välja på: Först måste du välja kod el designläge, du bör välja kodläge. Man kan ibland växla till designläge men bör vara medveten om att man då har sämre kontroll över kod och hur sidan verkligen ser ut i en webbläsare Därefter kommer en startruta som ger möjlighet att öppna tidigare projekt, färdiga mallar, skapa nytt dokument m.m. Södertörns högskola dw09.doc Sidan 1 av 18

2. Välj Create New > Dreamweaver Site eller Site > Manage Sites > New 3. Välj fliken Advanced 4. Skriv ett namn på din sajt. Detta blir bara ett namn på dina inställningar i DW, inte ett filnamn. 5. Bläddra (gul mappikon, Local root folder) fram till din egen webbmapp t.ex www_lokal Tryck sedan på OK Genom att du gjort denna inställning håller DW ordning på dina filer och varnar dig om du försöker infoga en bild eller ett dokument som ligger utanför den sajt (rotmapp) du just definierat. Mappen www_lokal ska nämligen vara den yttersta gränsen för alla dina filer och sidor på webbplatsen. I denna mapp ska alltid spara alla filer som hör till din webbplats. Genom att alltid samla dina filer som hör till din webbplats i en mapp (rotmapp) blir hela webbplatsen flyttbar, mellan olika datorer, servrar, lagringsmedier, utan att bilder "försvinner" eller länkar mellan sidor bryts. Vill du sedan göra ändringar i din sajtdefinition gör du det genom Site > Manage sites > Edit. Du ska senare definiera även var sidorna ligger på nätet, Remote site, mer om det senare. Du är klar för tillfället och väljer OK om du inte redan gjort det. Södertörns högskola dw09.doc Sidan 2 av 18

OBS! Att definiera din lokala webbmapp måste du göra varje gång du kommer till skolan. Inställningarna sparas ej tyvärr, eller möjligen om du sitter vid samma dator? Fler grundinställningar 1. Innan vi kan börja med att arbeta i Dreamweaver måste vi göra några mycket viktiga grundinställningar. OBS! Dessa måste du göra varje gång du kommer till skolan och ska arbeta i programmet(?) Inställningarna gör du under Edit > preferences. 2. Varje ord i vänsterspalten representerar ett helt fönster med inställningar. På den första, General, finner du valet att utforma sidans utseende med CSS istället för HTML. Ta bort krysset i rutan framför Use CSS instead of HTML tags. Detta kan tyckas ologiskt men DW använder ett egensinnigt sätt att lägga till CSS som vi vill undvika. Du kan sedan istället själv skriva css enkelt i programmet, men låt inte programmet skriva åt dig, utanför din egen kontroll. 3. Välj sedan New Document i vänstermenyn och ställ in vilken typ av dokument som du skriver, vilken filändelse programmet ska lägga till din filer och vilken DOCTYPE. Förslag: HTML,.htm, xhtml 1.0 strict. Du kan också välja encoding, dvs vilket teckensystem du skriver i. Om du skriver på svenska eller engelska så föreslår jag Western European som är den som vi hittills använt (eller Unicode UTF-8 som ger möjlighet till fler olika tecken.) OBS! Dessa inställningar måste du göra varje gång du kommer till skolan. Eller hitta samma dator? Södertörns högskola dw09.doc Sidan 3 av 18

Alla dessa inställningar påverkar hur ett nytt dokument skapas. Alltså, om DW skapat ett tomt dokument, stäng det och öppna ett nytt. Dreamweaver har skapat grundstrukturen enligt dina inställningar. 6. Som du ser på nästa sidan har Dreamweaver skapat sidans grundkoder enligt dina inställningar. Södertörns högskola dw09.doc Sidan 4 av 18

7. Skärmumpen visar kodläge, du kan växla till WYSIWYG (What you see is what you get, which it is not!) eller dela skärmen mellan kod och förhandsvisning Du ska börja med att ge sidan en titel <title>. Direkt i verktygsraden ersätter du "untitled document" med titeln: Kursplan NNs webbplats ELLER så väljer du att skriva in direkt i koden. 8. OBS. Hur du än jobbar: kolla koden hela tiden, annars tappar du lätt greppet och kommer inte att förstå din egen sidas uppbyggnad 9. Dreamweaver är duktigt på att bygga upp innehåll på en webbsida på ett enkelt sätt. Även om du antagligen föredrar att skriva in det mesta i kodläge kan man välja att skriva in löpande text och göra enklare formateringar i WYSIWIG-läget. T.ex. får du då automatiskt å ä ö inskrivna som specialtecken/entities. Vi ska också kopiera in en massa text och lägga in några bilder för att visa detta men börjar med ett skriva en egen rubrik. Övningen visar hur du gör en ny sida till din webbplats. Du kan senare länka till den från övriga sidor om du vill, just nu övar vi på sidan mer eller mindre separat från övriga filer. 10. Skriv in NNs studentwebbplats. Du kan givetvis skriva detta direkt i kodläge men prova gärna att skriva detta i förhandsvisningsläget och markera som h1 på ett av tre nedanstående sätt : a) i Paletten properties/egenskaper OBS I vissa lägen är propertiespaletten ihopfälld. Fäll ut här för att se alla inställningar Södertörns högskola dw09.doc Sidan 5 av 18

b) genom att markera texten och högerklicka c) i menyn Text > Paragraph format > Heading 1 11. Fortsätt skriv på sidan: Kursplan. Markera som h2 på ett valfritt sätt, gärna i kodläget. Dreamweaver försöker hjälpa dig att skriva kod. Ibland är detta en lysande hjälpfunktion, andra gånger enbart irriterande. Tänk på att du kan styra en del av detta under Edit > Preferences > Code Hints och Code Rewriting m.fl. inställningar. När du blivit lite van bör du kolla igenom att olika möjligheter att ställa in programmet så det jobbar åt dig, inte du åt programmet... 12. Skriv igen i förhandsvisningsläget: Detta är den kursplan vi följer inom kursen i medieteknik under mina studier på Södertörns högskola. Kolla i kodläge: Blev det en paragraph <p>? DW brukar skapa det automatiskt. Dessutom bör dina å ä ö ha skrivits in som t.ex.: ö. För att få denna hjälp att skriva specialtecken bör du faktiskt välja att skriva in löpande text i förhandsvisningsläget. 13. Dags att spara din fil och kolla i en riktig webbläsare! Välj filnamnet kursplan.htm och lägg i din mapp www_lokal och sidor. Se till att spara i rätt mapp, som du ställt in som Local Root folder. Om du vill kan du alltid ändra dessa inställningar under Södertörns högskola dw09.doc Sidan 6 av 18

Site > Manage Site. Fortsätt att spara och kolla regelbundet. 14. Dags att kopiera in själva kursplanen. Leta upp den på SHs webbplats. När man ska kopiera en text från webben till en annan webbsida bör man först kolla koden. Välj View source eller liknande. Men på den här sidan gillar vi inte att texten är uppmärkt så att den är placerad i ett rutnät som byggs upp av en tabell. Stäng koden, markera texten direkt på webbsidan och välj Copy, växla tillbaka till Dw, men vänta med att klistra in. 15. Om du har ett urklipp redo så har Dw möjlighet till 2 val, Edit > Paste eller Paste special 16. För att bli av med den innästlade tabellen måste vi tyvärr välja bort all annan formatering på denna sida, genom att välja Paste special och kryssa för Text only. Andra gånger kan man ha mer tur och genom att välja paste special få med precis lagom mycket formattering från originalsidan till sin egen sida. 17. OK, vi får samma jobbiga textklump som när vi höll på med litteraturlistan, men det kommer att vara enklare att ta hand om den. Stå kvar i förhandsvisningsläget. Södertörns högskola dw09.doc Sidan 7 av 18

18. Börja strukturera upp texten i bitar genom att infoga radbrytningar på lämpliga ställen genom att helt enkelt trycka på enter. I koden blir detta p-taggar? Kolla! Det här kan var ett lämpligt tillfälle att använda Split-läget och se både text och kod. 19. Att jobba så här går mkt snabbare och enklare än att försöka överblicka direkt i kodläget och Dw hjälper dig att inte glömma bort nån endaste slut-tagg utan placerar ut både <p> och </p> när du trycker enter. (Men det kan hända att Dw lägger in extra onödig luft eller onödiga taggar, kolla igen...) 20. Det visar sig trots allt rätt jobbigt att dela upp texten i stycken, eftersom en kursplan utan formatering är ett ganska svårläst dokument. Jag har placerat ett förslag på student.ktd.sh.se/~sh08anne/kursplan0.htm Hämta där om du vill. Men stanna upp och fundera ett tag över hur en sökmotor eller talsyntes skulle ha förstått samma dokument. Med den visuella formatering som skapades av tabellen som fanns i koden, tyckte vi att vi fick mening och struktur när vi kunde se kursplanen på det viset på sh:s webbplats. Men en sökmotor är blind. Om texten saknar betydelsebärande semantisk kodning som t.ex. rubriker så hade sökmotorn varit lika förvirrad som vi. Det är just därför vi inte använder tabeller för layout av webbsidor och alltid markerar upp allt i en logisk struktur med rubriker, strong, etc INNAN vi tar itu med att göra det visuellt begripligt och lättläst och kanske t.o.m. vackert 21. När allt är uppdelat i prydliga stycken kan du fortsätta att göra kursplanen mer lättläst genom att faktiskt märka upp den som ett flertal listor, rubriker etc. Södertörns högskola dw09.doc Sidan 8 av 18

Ett exempel: Lärandemålen kan ses som en lista. Markera först orden Kunskap och förståelse som en rubrik t.ex. nivå 4. Markera därefter alla de rader som hör till den rubriken och börjar med # och högerklicka och välj List > unordered list (eller använd Propertiespaletten eller menyerna för att göra samma sak) Städa sedan bort de numera onödiga #-tecknen Södertörns högskola dw09.doc Sidan 9 av 18

22. Träna mera (om du orkar) på att formatera texten med rubriker och listor och strong och em m.m. Träna gärna både i kodläget och olika hjälpmenyer i förhandsvisningen. Jag gjorde en ordnad lista för de numrerade posterna, då blev det listor i listor och jag skrev i koden men använde läget split för att snabbt hoppa till rätt ställe i koden genom att markera rätt ställe i förhandsvisningen. Har lagt upp mitt exempel på student.ktd.sh.se/~sh08anne/kursplan1.htm 23. Dags att lägga in en bild eller flera om du vill. Hämta sh:s logga, spara först utanför din rätta webbmapp för att se att Dw försöker hjälpa dig att ha koll... 24. Placera markören där du vill ha bilden på sidan och infoga bilden via menyn Insert > Image (eller på nåt annat sätt), leta upp bilden och välj. Dw kommer att varna dig för att bilden inte finns inom den sajt-mapp du definerat och föreslå att den kopieras dit. Tacka ja och välj att placera i mappen bilder. Du får antagligen också hjälp att komma ihåg att skriva in alternativtext till bilden 25. Kolla i koden. Hur blev den kod till bilden som Dw skrev åt dig? Hur blev sökvägen till bildfilen? Kom ihåg att allt Dw gör är att skriva ett textdokument åt dig. Du kan hela tiden sluta använda Dw och redigera samma sida i Notepad eller Crimson. 26. Spara sidan. Kolla i webbläsare. Dreamweaver visar ju inte en fungerande webbsida, bara en sorts förhandsvisning, av ung. hur en webbläsare skulle tolka sidan, du kan t.ex. inte klicka på länkarna. För att förhandstitta i en riktig webbläsare kan du välja jordgloben i verktygsraden eller som vanligt öppna en webbläsare och bläddra dig fram till din sida. Testa vidare en stund eller läs gärna vidare först och testa mer senare. 27. Dags att lägga upp din sida och din nya bild på servern. Dw innehåller en ftp-klient som hjälper dig att hålla reda på filerna mer än de metoder vi använt hittills. Men du kan alltid flytta dina filer med vanlig FTP, du avgör själv när och om du vill använda Dw för detta. Södertörns högskola dw09.doc Sidan 10 av 18

28. FTP mha Dreamweaver Åter till Site > Manage Site för att göra ftp-inställningar Markera ditt sajtnamn och välj Edit Välj Remote info och Access FTP 29. Välj OK och Done OBS om du sitter utanför vår brandvägg måste du dessutom göra den dubbla inloggningen via student.ktd.sh.se/login i en webbläsare! 30. Nu ska vi dubbelkolla dina inställningar. Öppna Files-paletten om den inte redan är öppen. Där kan du titta på antingen Local eller Remote Files. Vi vill se båda och klickor på ikonen för ökad storlek Södertörns högskola dw09.doc Sidan 11 av 18

31. Sedan kopplar du upp dig med ikonen ( sätt i sladden ) för att se lokala filer och din www-mapp på servern på samma gång 32. För att ha glädje av Dreamweaver sajthantering fullt ut måste du ha korrekta inställningar, dvs de två filträden ska väga exakt jämt! I exemplet ser du min www till vänster och www_lokal till höger Båda ligger på samma nivå. Detta beror på hur vi gjorde de lokala inställningarna i början och ftp-inställningarna nyss. Gå tillbaka och kolla om det inte stämmer hos dig. Alternativa inställningar för den som vill Man kan avstå från att fylla i www som host directory under FTP. Då kommer man åt även privat, publik etc på servern. MEN då bör du inte välja www_lokal som Local Site Folder heller utan i så fall välja en annan mapp en nivå upp från www_lokal, det måste vara jämvikt! 33. Dags att lägga upp kursplan.htm. Öppna mappen sidor på den lokala sidan, markera filen och klicka på blå uppåtpil. Blå pil uppåt betyder Put = skicka dina lokala filer till webbservern och uppdatera därmed dina webbsidor på nätet. Grön pil neråt betyder Get = hämta ner dina filer från webbservern och ersätt dina lokala versioner med de som finns på nätet. Dw placerar filen i motsvarande mapp på servern (utan att du behöver kolla om den är öppen). Du kan också använda dra-och-släpp för att placera filer, men har du ställt in rätt så är det ett sämre alternativ att dra-och-släppa, vi syftar alltid till att det ska ligga en exakt kopia av filstrukturen på servern, och det är lika bra att låta Dreamweaver skicka filerna dit de hör... 34. Dw kommer också att fråga dig om du vill ta med dependent files. I detta fall skulle det vara bildfilen, annars kan det gälla t.ex. css- och javascriptfiler som sidan refererar till. Södertörns högskola dw09.doc Sidan 12 av 18

Tacka ja, eller nej och lägg upp bilden själv istället? 35. Du kan låta Dw sköta uppdateringar av relativa länkar och sökvägar inom din egen sajt. Spara och stäng först alla filer i Dreamweaver. Bara sajtfönstret ska vara öppet (se varning nedan) Testa att i Dws sajtfönster byta namn på t.ex. Shs logga, då får du hjälp av programmet att uppdatera sökvägen i alla filer som länkar till den. Välj update och kolla i filen kursplan.htm att sökvägen är ändrad för att sidan ska fortsätta att hitta bilden trots det ändrade namnet. Varningar!!!!! 1. När du döper om och flyttar i sajtfönstret, se till att alla Dreamweavers dokumentfönster är stängda. Annars uppstår en konflikt mellan den version som visas i det öppna fönstret och den version som uppdaterats av sajtfönstret. Det är väldigt lätt att spara fel version eller rent av gripas av panik när allt verkar ha blivit fel i dokumentfönstret 2. Det är fortfarande lika jobbigt att byta namn och flytta filer om du gör det nån annanstans än i Dw! Du kan inte börja byta namn och städa mappar i Windows eller Finder och tro att dina sökvägar ändras av sig själva bara för att det funkat i Dw! Fortsätt att välja kloka namn och hålla god ordning och ha exakt samma struktur lokalt och på server. 3. Glöm inte att Dw bara ändrat dina lokala filer. Du måste själv komma ihåg att ladda upp dem igen för att den korrekta versionen ska finnas på servern. Dreamweaver döper inte om eller uppdaterar de filer som ligger på servern. Om det ligger filer kvar där med gamla namn måste du själv ta bort dem. Dreamweaver har bara lagt upp nya kopior med nya namn. 36. Prova gärna att klistra in kod på din sida. Kopiera sidfot m.m. från en av dina tidigare övningssidor genom att hämta koden och klistra in direkt i kodläget. Spara och kolla. Södertörns högskola dw09.doc Sidan 13 av 18

Dags för CSS. 37. Dreamweaver kan hjälpa dig att skriva css, men inte tänka ut hur du på smaraste sättet planerar och strukturerar kod och css, det måste du alltid göra själv om du vill ha ett logiskt och rationellt resultat. 38. Börja med att länka till ditt befintliga stylesheet genom att välja Text > CSS styles > Attach eller ta fram paletten CSS och klicka på länksymbolen längst ner 39. Bläddra dig fram till din stilmall.css och välj att länka till den. Spara och kolla i webbläsare. Dw är dåligt på att visa anvancerad css i sitt designläge/förhandsvisning, du måste öppna webbläsarna... 40. Ser det konstigt ut? Du har ju i koden till dina andra sidor lagt till t.ex. <div id=content> Om det ska se ut ungefär som övriga sidor måste du ändra koden och lägga till lämpliga id och class. För att lägga till <div id=content> kan du t.ex. först markera allt synligt innehåll i förhandsvisning. Välj Insert > Layout Objects > Div Tag Fyll i nedanstående dialogruta. Kolla i koden att allt blev rätt. 41. Eller så går du direkt till koden och skriver in? Södertörns högskola dw09.doc Sidan 14 av 18

42. Om det redan finns en lämplig tagg att använda som du bara vill tilldela en class som redan finns i din stilmall, t.ex..nav så gör så här: Stå i designläge/förhandsvisning. Placera pekaren på sidan i den del du vill påverka. Då ser du längst ner i statusraden alla element som påverkar det området. Högerklicka på p-taggen, välj set class, välj bland de classer din stilmall redan innehåller 43. Prova nu att skriva en helt ny regel. Jag testade att skapa en class för kommentarer som jag vill ska synas tydligt på sidan. Välj Text > CSS styles > New (eller klicka på den lilla +ikonen i nederkanten av CSSpaletten) I dialogrutan markerar du class och hittar på ett vettigt namn t.ex. kommentar. Om du vill kan du kryssa i This document only, då hamnar din nya deklaration i bara den här sidans head-del (i en <style>-tagg). Om den ska användas på fler sidor så välj förstås att skapa direkt i din länkade stilmall Södertörns högskola dw09.doc Sidan 15 av 18

44. När du klickar OK kommer du till ett antal formulär som hjälper dig att skriva css 45. Prova olika saker under Category. Du kan redan skriva mer och bättre css än Dws formulär kan, men det kan vara ett bekvämt sätt att få hjälp att komma ihåg vad man kan göra och hur det stavas. 46. Jag valde vit text på röd bakgrund inom en tjock dubbel border, och måste då fylla i under Type, Background, Border 47. Sen måste man på sidan berätta att ett visst stycke ska ha classen kommentar innan det syns nån skillnad. När jag nu högerklickar på en p-tagg i statusraden så hittar jag min nyskapade class kommentar valbar under Set class. Spara både css och html-fil (de finns på olika flikar nu) och kolla både koden som skrivs och webbläsare. Södertörns högskola dw09.doc Sidan 16 av 18

48. Jag vill lägga till lite padding. Jag kan ändra det direkt i stilmallens textdokument eller i CSS-panelen eller klicka på penn-ikonen för att komma tillbaka till mina formulär: Prova nu att skriva en ny deklaration direkt i din stilmall.css men med hjälp av Dw. Stilmallen ska redan ligga öppen som en flik Dw 49. Min kommentar föranleddes av ett fel, nu vill jag skapa en ny class som heter t.ex. fel Du kan givetvis välja nåt helt annat exempel. Jag skriver.fel { Genast dyker en hjälp-meny upp med alla tänkbara properties/egenskaper som en selektor kan ha. Leta upp t.ex. text-decoration, markera och tryck enter Då kommer förslag på värden till denna egenskap. Välj t.ex. strike-through Skriv ; (semikolon) och enter Då förslår Dw fler egenskaper... Prova color: Dw låter dig välja, först bland de webbsäkra färgerna, eller full RGB om du klickar på färghjulet. Glöm inte sista måsvingen/curly bracket Södertörns högskola dw09.doc Sidan 17 av 18

50. Spara din css och använd din nya class nånstans i dokumentet 51. Dreamweaver har väldigt många sätt att göra samma sak, men kan också göra mycket som vi inte ens berört. Det finns under menyn windows t.ex.: Results - Där du kan kolla länkar, validera, sök/ersätt m.m. Reference ett helt O'Reillybibliotek med fackuppslagsböcker Assetts ditt eget lager av t.ex. färger och länkar och kodsnuttar som du återanvänder på din sajt Behaviors - som skriver enkla javascript åt dig m.m. Du kan dessutom ladda hem extensions för att ytterligare bygga ut programmets funktioner... 52. Missa inte heller finesserna i kodfönstret. Det har en egen verktygsrad som hjälper dig att överblicka och skriva kod på bästa sätt. I exemplet är hela head ihopfällt för att ge plats åt resten koden Södertörns högskola dw09.doc Sidan 18 av 18