Lathund till Dreamwearve 3.0 Om Dreamweaver Dreamweaver är ett program/verktyg för att skapa hemsidor, underhålla webbplatser och webbsidor. Med Dreamweaver som webbeditor kan du på ett lätt sätt skapa din sidor för en webbplats, programmet håller också på ett enkelt sätt reda alla filer om du flyttar dem eller byter namn. Om du vill prova programmet så kan du hämta hem en demoversion av Dreamweaver som du kan prova i 30 dagar utan kostnad på webbadress http://www.macromedia.com/software/downloads/. Vill du skriva ut lathunden finns den som pdf-fil att ladda ned. Allmänt om programmet Ställa in egenskaper Infoga nyckelord Infoga beskrivning Formatera text Definiera teckenlistkombination Formatera bild Spara Förhandsgranska Editering i HTML-kod Hjälpfunktion Länkar Intern länkning Extern länkning Länkning med bild Länkning med ankare, samma sida Länkning med ankare, flera sidor Länk för E-post Tabeller Klickbara bilder/hotspot Kontrollera länkar Skapa en webbplats (lokal) Spara en lokal webbplats Trädstruktur Arbeta med webbplats mot server Hämta fil mot servern, Check out Publicera fil mot server, Check in Kontrollera länkar inom webbplats http://www.iml.umu.se/stod/program/dreamweaver/ (1 av 2) [2003-05-22 10:30:56]
Lathund till Dreamwearve 3.0 En webbsida kan alltid bli bättre, kom gärna med förslag på hur den här kan förbättras. Siv Johansson-Langstrom@educ.umu.se. Siv Johansson-Långström 2000 Sidan skapad 26 juli 2000 och uppdaterades den 23 januari 2002 http://www.iml.umu.se/stod/program/dreamweaver/ (2 av 2) [2003-05-22 10:30:56]
Lathund till Dreamweaver - Allmänt om programmet Allmänt om programmet I denna lathund kommer du att bekanta dig med Dreamweaver 3.0 och dess grundläggande funktioner. När du startar programmet så ser du ett fönster med en tom arbetsyta och en eller flera olika paletter. Arbetsytan Dokumentfönstret består av en titelrad för den aktuella filen som är öppen, den blåa raden (i bilden finns det ej någon beskrivning på titel). Såsom det flesta andra standardprogram finns det olika textbaserade menyer, linjal, en tom arbetsytan och längst nere en statusrad med bl a olika startknappar. Paletter Dreamweaver skiljer sig något från vanliga standardprogram med att de ej har ett verktygsfält direkt under textmenyerna utan istället har paletter som kan flyttas runt på skärmen. http://www.iml.umu.se/stod/program/dreamweaver/allmant.html (1 av 3) [2003-05-22 10:31:42]
Lathund till Dreamweaver - Allmänt om programmet När du startar programmet så visas ett antal standarspaletter, Objects (Objekt), Properties (Egenskaper) och Launcher (Startknappar). Vilka vi kommer att beskriva mer nedan. Du kan själv välja vilken eller vilka av de olika paletterna som du vill arbeta med. Om paletterna ej är framme så kan du ta fram dessa via textmenyn Window och väljer via att klicka på den palett du vill använda, Objects, Properties och/eller Launcher. Då visas via en förbockning vilket eller vilka alternativ som du valt. Behöver du ej paletten så stänger du ner den via att klicka på X längst upp till höger eller vänster på den blå raden i paletten övre högra hörn. OBS! De funktioner som finns på paletterna hittar du även under de olika text-menyerna. Objects-paletten Via Objects kan du infoga olika objekt du vill ha på sin webbsida. Via att föra pekaren över de olika knapparna på paletten och väntar en liten stund så får du upp en text-rutan som beskriver vad funktionen innebär. De mest använda funktionerna är Infoga bild och Infoga tabell, vi kommer senare att beskriva några av dessa funktioner. Överst på Objekts-paletten efter texten "Common" hittar du en nedåtgående pil, via att klicka på den lilla pilen så visas 6 olika kategorier av objekt. Common (Vanlig) är de kategorier som är mest förekommande. Characters (Tecken) utgörs av speciella symboler som t ex Copyright, Pund. Forms (Formulär) består av knappar för att skapa formulär. Frames (Ramar) består av knappar för att skapa ramar och ramsidor. Head används för att lägga in metataggar ex nyckelord, beskrivningar på webbsidans huvud. http://www.iml.umu.se/stod/program/dreamweaver/allmant.html (2 av 3) [2003-05-22 10:31:42]
Lathund till Dreamweaver - Allmänt om programmet Invisibles (Osynliga) infogar objekt som är osynliga för användare, ex ankare, kommentarer i HTML-kodningen. Propierties-paletten (Egenskaper) Paletten visar egenskaper för det objekt eller text som du har markerat. Här kan du ändra texten utseende, placering, färg, länkning etc. Utseende på paletten beror på vilket objekt som du har markerat, ovan visas egenskaperna för standarpaletten som används vid textformatering. Prova att markera en bild och se vad då händer med paletten. Paletten förändrar utseende och visar andra egenskaper när bild, tabell eller ett forumlär är markerat. OBS! Vissa typer av objekt har fler egenskaper och dessa får du fram visa att klicka på den uppåtgående pil som sitter längst ned till höger på paletten. Launcher-paletten (Startknappar) I paletten kan man öppna och stänga andra paletter och olika verktygsfält. Du kan ändra palettens utseende till stående via att klicka på ikonen längst ned till höger. Några av dessa funktioner kommer vi att beskriva senare. Många av dessa knappar hittar du även längst nere till höger på dokumentetsfönstrets statusrad. En webbsida kan alltid bli bättre, kom gärna med förslag på hur den här kan förbättras. Siv.Johansson-Langstrom@educ.umu.se. Siv Johansson-Långström 2000 Sidan skapad 26 juli 2000 och uppdaterades den 15 oktoberi 2000 http://www.iml.umu.se/stod/program/dreamweaver/allmant.html (3 av 3) [2003-05-22 10:31:42]
Lathund till Dreamweaver - ställa in egenskaper Ställa in egenskaper Innan du börjar att utforma din webbsida så bör du ställa in några olika egenskaper på din sida. De olika funktioner vi ska gå igenom är Page Properties som utformar egenskaper för själva webbsidan grundlayout. Vi ska också titta på hur man sätter in nyckelord och en kort beskrivning om vad sidan handlar om. Dessa funktioner hjälper sökmotorerna vid sökning och texten som skrivs in hamnar dold i själva HTML-koden. Page Properties Välj i textmenyn Modify och Page Properties... och du får upp följande fönster: http://www.iml.umu.se/stod/program/dreamweaver/egenskaper.html (1 av 3) [2003-05-22 10:31:54]
Lathund till Dreamweaver - ställa in egenskaper I fönstret kan du göra olika inställningar för sidlayouten: Title: titel på vad sidan handlar om Background Image: via att klicka på knappen Browse... kan du välja att lägga in en bakgrundsbild på din sida. Background: ger dig möjlighet att istället för en bakgrundsbild lägga in en bakgrundsfärg, tryck på den rutan efter texten och du får upp en palett med färger. Link: lägga in färg på länkar. Visitied Links: lägger in en färg på när du besökt en länk. Active Links: lägger in en färg på aktiva länk. Infoga nyckelord (Insert keywords) För att en sökmotor ska kunna hitta din sida lättare så kan dusätta in olika nyckelord i funktionen Insert Keywords. Om du inte har framme paletten Objects så tar du fram den och väljer kategorin Head. I kategorin Head hittar du knappen Insert Keyword, tryck på den och följande fönster öppnas: Här skriver du in de nyckelord du vill sökmotorerna ska sökas på, skriv in orden med kommatecken och mellanslag emellan orden och tryck sedan på OK. Infoga beskrivning (Insert Description) När sökmotorn har hittat din sida på webben så är det alltid bra om det finns en kort beskrivning som visar vad sidan innehåller. Detta gör du via att välja kategorin Head i Objects-paletten. I kategorin Head hittar du knappen Insert Description, tryck på den och följande fönster öppnas: http://www.iml.umu.se/stod/program/dreamweaver/egenskaper.html (2 av 3) [2003-05-22 10:31:54]
Lathund till Dreamweaver - ställa in egenskaper Skriv in en kort beskrivning över vad sidan handlar och tryck sedan på OK. Texten kommer att hamna dold i HTML-koden och det är endast sökmotorerna som kommer att använda denna text. En webbsida kan alltid bli bättre, kom gärna med förslag på hur den här kan förbättras. Siv.Johansson-Langstrom@educ.umu.se. Siv Johansson-Långström 2000 Sidan skapad 26 juli 2000 och uppdaterades den 15 oktoberi 2000 http://www.iml.umu.se/stod/program/dreamweaver/egenskaper.html (3 av 3) [2003-05-22 10:31:54]
Lathund till Dreamweaver - formatera text Formatera text När du ska formatera text på din webbsida så använder du paletten Properties (Egenskaper) där du hittar de mest förekommande inställningar som behövs för redigering av din text. Du kan även använda textmenyn Text om du vill göra mer avancerade inställningar men för det mesta räcker det att använda de funktioner som finns på paletten. Som vi tidigare beskrivit så hittar du paletten under text-meny Windows och där väljer du paletten Properties (Egenskaper)och följande fönster öppnas för paletten: Markera den text du vill formater och välj några av följande funktioner på paletten: 1. Formatmall där kan du välja mellan olika rubrikmallar. 2. Teckensnitt där kan du välja olika teckenlistkombinationer, skapa egna kombinationer av teckensnitt. Teckenlistkombinationernas (Fontfamily) funktion är att om inte en bildskärm kan visa tex Verdana så väljer den nästa angivna teckensnitt i förvald teckenlistkombination ex Ariel. 3. Teckenstorlek där kan du välja vilken storlek på tecknen, du kan inte ange storleken i punkter utan endast i färdiga steg mellan 1-7. 4. Färg, via att klicka på knappen kommer det upp en färgpalett och du kan välja vilken färg du vill ha på markerad text. 5. Fet stil. 6. Kursiv stil. 7. Förändra placering av texten på sidan, höger, centrerad eller vänsterställd text. 8. Hjälp, klicka på knappen och du kommer direkt till hjälp-funktionen och kan där kan du få svar på dina frågor. 9. Punktad lista skapas. 10. Numrerad lista skapas. 11. Minskad indrag av texten. 12. Ökad indrag av texten. http://www.iml.umu.se/stod/program/dreamweaver/text.html (1 av 3) [2003-05-22 10:32:01]
Lathund till Dreamweaver - formatera text När du ska formatera din text så först markerar du den text, stycke osv som du vill ska förändras. Sedan väljer du den formatering som du vill göra i Properties-paletten. Programmet gör direkt en förändring du valt i den markerade texten. Definiera egen teckenlistkombination (Fontfamily)En Teckenlistkombination utgörs av flera likartade teckensnitt som du själv kan styra vad du vill visa för teckensnitt på skärmen. Kan inte skärmen visa det första alternativet i kombinationen tar den den andra och så vidare. Du kan göra egna teckenlistkombination enligt nedan: Välj fältet Teckensnitt i Properties-paletten och tryck på den pilen som går nedåt och du får upp följande fönster: Här ser du redan fördefinierade teckenlistkombinationer som består av en eller flera typsnitt. Välj kommandot Edit Font List... och du får upp följande fönster: http://www.iml.umu.se/stod/program/dreamweaver/text.html (2 av 3) [2003-05-22 10:32:01]
Lathund till Dreamweaver - formatera text Här väljer du själv den kombination som du vill ha i den nedre delen av fönstret. Vi att markera det typsnitt du själv vill ha i rutan Available Fonts och sedan trycka på pilen mellan Chosen Fonts: och Available Fonts gör du din egen kombination. När du är klar trycker du på OK. Du ser även tidigare gjorda kombinationer i detta fönser, via att du markera någon av dessa kan du även förändra även dem. Många av dessa slutar med serif eller sans-serif. Via att lägga exempelvis serif sist i kombinationen så gardera man sig att bildskärmen ska visa ett typsnitt som är av karaktären serif om inte bildskärmen kan visa någon av de övriga typsnittet man har valt före serif. Skapa nytt stycke och ny rad För att skapa ett nytt stycke trycker du på Enter. För att bara byta rad men inte skapa nytt stycke så trycker du på Skift och Enter samtidigt. En webbsida kan alltid bli bättre, kom gärna med förslag på hur den här kan förbättras. Siv.Johansson-Langstrom@educ.umu.se. Siv Johansson-Långström 2000 Sidan skapad 26 juli 2000 och uppdaterades den15 oktober 2000 http://www.iml.umu.se/stod/program/dreamweaver/text.html (3 av 3) [2003-05-22 10:32:01]
Lathund till Dreamweaver - Infoga bild Infoga bild För att en webbsida ska bli trevligare, lättare att läsa och titta på så har man möjlighet att använda bilder. Bilderna på en webbsida är aldrig inbakade i sidan utan det finns en länk från sidan till den plats du har sparat bildfilen. För att kunna visa en bild på webben så måste bilden vara sparad i filformaten JPG eller GIF, de är sk bitmappade bilder som är uppbyggd av pixlar. När du ska infoga en bild på din webbsida så använder du paletten Objects och väljer knappen Insert Image (Infoga bild) och följande fönster öppnar sig: http://www.iml.umu.se/stod/program/dreamweaver/bild.html (1 av 2) [2003-05-22 10:32:07]
Lathund till Dreamweaver - Infoga bild I fältet Leta i: söker du reda på vart du har din bild, markerar bilden och tryck på knappen Select. En rekommandation är att du har sparat alla dina bilder du ska använda på webbsida i en undermapp direkt under den mapp du spara alla dina filer för webbplatsen. När du har infogat bilden i programmet förändras paletten Properties (Egenskaper) och får ett nytt utseende för de egenskaper som kan förändra bilder, paletten förändras enligt bilden nedan: I fönstret kan du göra och se följande inställningar för bilden: W, bredden på bilden i enheten pixlar. H, höjden på bilden i enheten pixlar. Src, var bilden finns sparad. Link, om bilden är länkad och går till annan sida eller bild. Align, justeringmöjlighet hur bilden ska förhålla sig till texten, webbläsarstandard, överst, mitten, nederst osv. Alt, du kan skriva in en alternativtext vad bilder innehåller denna text visa som en textrutan i webbläsare. Är ett bra alternativ om någon har en äldre version av webbläsare som har svårt att visa vissa bilder så kommer texten upp istället. En webbsida kan alltid bli bättre, kom gärna med förslag på hur den här kan förbättras. Siv.Johansson-Langstrom@educ.umu.se. Siv Johansson-Långström 2000 Sidan skapad 26 juli 2000 och uppdaterades den 15 oktober 2000 http://www.iml.umu.se/stod/program/dreamweaver/bild.html (2 av 2) [2003-05-22 10:32:07]
Lathund till Dreamweaver - Spara, förhandsgranska Spara När du gjort din sida klar så är det dags att spara sidan och då väljer du i textmenyn File (Arkiv) och Save as (Spara) och följande fönster öppnas: I fältet Spara i: letar du upp den mapp som du ska spara webbplatsen och i fältet Filnamn: anger du namnet på filen. Tänk på att du inte får använda å, ä, ö eller mellanslag i filnamnet när du spara filen. OBS! Är det första sidan på webbplasten så ska den alltid heta index.htm eller index.html för att underlätta för sökmotorerna. Sedan trycker du på knappen Spara när du är klar. Har du redan sparat sidan en gång så kan du använda tangent-kombinationerna CTRL + S samtidigt. Förhandsgranska http://www.iml.umu.se/stod/program/dreamweaver/spara.html (1 av 3) [2003-05-22 10:32:12]
Lathund till Dreamweaver - Spara, förhandsgranska När du har sparat din webbsida vill du gärna se hur den ser ut i en webbläsare innan du publicerar sidan. Detta gör du via att i text-menyn välja File och Preview in Browser. Berorende på inställningar i programmet så kan du hitta en eller flera alternativ där och du väljer du den webbläsare som du vill titta i, ex Explorer, Netscape. Skulle ingen webbläsare vara inlagd så går du till alternativet Edit Browser List... och väljer en eller flera alternativ där. Är Du osäker så kontrollera vilken program du har installerat på din dator innan du väljer alternativ. Webbläsare startas upp och du kan se hur resultatet ser ut på bildskärmen. Editering i HTML-koden Många börjar att lära sig att göra webbsidor via att skriva HTML-kod direkt i en text-editor och i programmet kan man editera i HTML-koden direkt via att i paletten Launcher (Start knappar) trycka på knappen HTML-Source (HTML-källa) och följande fönster öppnas: Här kan du editera och ändra i HTML-koden och du ser resultatet direkt på arbetsytan i programmet. När du har gjort klart dina förändringar och vill avsluta trycker på på X i högra hörnet. http://www.iml.umu.se/stod/program/dreamweaver/spara.html (2 av 3) [2003-05-22 10:32:12]
Lathund till Dreamweaver - Spara, förhandsgranska Quick Tag Editor Vill du inte gå in i HTML-editorn direkt så finns det en annan möjlighet att lägga in HTML-koder där du står i arbetsytan, rutinen kallas Quick Tag Editor. Ställa dig på arbetsytan där du vet att du vill ha in en speciell sekvens av HTMLkodning och tryck CTRL och T samtidigt och får du upp följande fönster: Skriv in HTML-kodning och tryck sedan en gång på arbetsytan och kodningen läggs in på arbetsytan. Du kan kontrollera en mindre sekvens av HTML-kodning, markera ex en bild och tryck CTRL och T samtidigt. Du får nu upp HTML-koden som beskriver de egenskaper som är inställda för bilden. Du kan ändra i texten och när du är klar trycker du en gång utanför fönstret så läggs ändring in i HTML-koden. Hjälpfunktion Om du inte vet hur du göra saker och ting i programmet så kan du använda funktionen Hjälp. Du hittar funktionen under text-menyn Help och Using Dreamweaver. På vissa paletter hittar du också en knapp med ett frågetecken som du kan klicka på och får direkt upp hjälp-funktionen. En webbsida kan alltid bli bättre, kom gärna med förslag på hur den här kan förbättras. Siv.Johansson-Langstrom@educ.umu.se. Siv Johansson-Långström 2000 Sidan skapad 26 juli 2000 och uppdaterades den 15 oktober 2000 http://www.iml.umu.se/stod/program/dreamweaver/spara.html (3 av 3) [2003-05-22 10:32:12]
Lathund till Dreamweaver - Länkning Länkar För att kunna navigera på World Wide Webb så måste du skapa länkar mellan dina sidor eller sidor som andra har gjort. Det finns både externa länkar, dvs till webbsidor som andra har gjort och interna länkar där du länkar mellan dina egna sidor eller att använda ett ankare som länkar inom en sida/eller till en bestämd plats på sidan. Du kan länka via text, bilder, del av en bild osv. Intern länkning via text När du skapar en webbplats så har du i allmänhet flera sidor och vill gå mellan dessa. För att göra det måste du göra en länkning mellan dessa olika sidor. Skriv in t ex texten, Nästa sida Markera texten. Välj Launcher-paletten (Egenskaper) och tryck på ikonen som föreställer en mapp som finns efter Links-fältet och följande fönster öppnas: http://www.iml.umu.se/stod/program/dreamweaver/lankar.html (1 av 5) [2003-05-22 10:32:17]
Lathund till Dreamweaver - Länkning Markera den fil du vill länka till och tryck på knappen Select. Spara filen. Texten som du markerade kommer att ändra format och bli understrucken, ex Nästa sida. För att kunna se om länken fungerar måste du starta webbläsare via att välja i textmenyn File och Preview in Browser välj webbläsare och testa sedan länken i webbläsare. Istället för att trycka på ikonen som föreställer en mapp kan Du också i det tomma fältet efter Link skriva in filnamnet direkt i paletten. Extern länkning Vill du länka till en webbsida som någon annan har gjort markera den text du vill länka ifrån och istället för att trycka på mapp-ikonen innan fältet Link så skriver du in webbadressen du ska länka till i det tomma fältet efter Link, ex http://www.litu.se. Texten som du markerade på arbetsytan kommer att ändra format och bli understrucken. http://www.iml.umu.se/stod/program/dreamweaver/lankar.html (2 av 5) [2003-05-22 10:32:17]
Lathund till Dreamweaver - Länkning Ett annant alternativ är att du har redan kopierat (CTRL + C) den webbadressen i webbläsare du vill använda och du ställ markören i det tomma fältet och trycker på CTRL och V samtidigt. Webbadress kopieras in i det tomma fältet och tryck Enter för att gå ur paletten. Sedan Spara du sidan. Kontrollera och testa länken via att starta webbläsaren. Länkning från bild Du kan använda bilder för att länka till både externa och interna webbsidor. Ställ pekaren mitt på bilden som du vill länka ifrån och tryck på höger mustangen en gång, Nu har du markera den bild som du vill använda. Gå till fältet Link i Launcher-paletten (Startknappar) och skriv in, eller klistra in den externa webbadressen och tryck på Enter (se avsnitt extern läkning). Vill du ha en intern länk så skriv in filnamnet eller tryck på ikonen som liknar en mapp och välj därefter fil som du vill länka till (se avsnitt intern läkning). Spara filen och kontrollera sedan resultatet i en webbläsare. När du står i webbläsare kommer du att se att pekare ändrar format till en pekande hand när du för den över bilden och visar därmed att bilden är en länk till en annan sida eller bild. Länkning med ankare - inom samma sida Om du har en lång sida och vill navigera inom den så kan du använda objektet Ankare. Exempelvis så vill du kunna gå längst nere från din webbsida ochdirekt upp till början av sidan, då gör du enligt följande. Ställ dig längst upp på webbsidan och i Objekts-paletten väljer du kategorin Invisibles. I kategorin väljer du knappen Ankare och du får då upp följande fönster: Nu ska du hitta på ett namn till ankare, skriv in i fältet Anchors Name: exempelvis borjan och sedan väljer du OK. http://www.iml.umu.se/stod/program/dreamweaver/lankar.html (3 av 5) [2003-05-22 10:32:17]
Lathund till Dreamweaver - Länkning På webbsidan skapas ett ankare och detta visas på arbetsytan med följande gula symbol. Längst ned på sidan skriver du in texten "Överst" och sedan markera du hela ordet. I Properties-paletten väljer du fältet Link och skriver in tecknet staket (Tangenterna shift + 3) och de namn du sparade ankaret under, vårt exempel blir #borjan. Texten "Överst" blir nu en länk inom sidan. Spara dokumentoch starta webbläsaren för att kontrollera om de fungerare. Länkning med ankare - till annan sida och en viss plats inom sidan Du kan också använda ankare för att kunna navigera till en bestämd plats inom en webbsida från en annan webbsida. Exempelvis vill du att en länk från din förstasida på webbplasten ska hoppa till mitten av andrasidan på din webbplats. På andrasidan måste du sätta in ett ankare mitt på sidan, se ovan skrivning om "Länkning inom samma sida" hur du sätter in ett ankare och spara den. Spara sedan andrasidan På förstasidan skriver du in och markera du den text du vill länka ifrån. I i Properties-palettens väljer du fältet Link och skriver in namnet på den fil du vill länka till, tecknet staket (#)och namnet på ankaret som du vill kalla på. Exempelvis lankar.html#mitten Spara dokument och starta webbläsaren för att kontrollera om det fungerar. Länkning e-post Om du vill att någon ska skicka ett e-post till dig så kan man göra en länk med sitt eget e-postadress. Ta fram Objects-paletten och välj knappen Insert E-Mail Link (Infoga E-post länk) och följande fönster öppnas: Skriv in den text som du vill ska länkas ifrån och din e-postadress och tryck på knappen OK. Följande text infogas automatiskt in i dokumentet: Kalle.Anka@ankeborg.se http://www.iml.umu.se/stod/program/dreamweaver/lankar.html (4 av 5) [2003-05-22 10:32:17]
Lathund till Dreamweaver - Länkning Spara dokumentet och startar en webbläsare för att pröva länken. Start upp det e-post program du använder, gå sedan till webbläsare och klicka på e- postlänken. Den angivna adressen hamnar nu automatiskt i adressfältet i ett nytt e- postmeddelande. Fungerar ej detta så är ditt e-postprogram fel inställt. En webbsida kan alltid bli bättre, kom gärna med förslag på hur den här kan förbättras. Siv.Johansson-Langstrom@educ.umu.se. Siv Johansson-Långström 2000 Sidan skapad 26 juli 2000 och uppdaterades den15 oktober 2000 http://www.iml.umu.se/stod/program/dreamweaver/lankar.html (5 av 5) [2003-05-22 10:32:17]
Lathund till Dreamweaver - Tabeller Tabeller Tabeller är mycket användbara för att få en snygg layout och att styra upp innehållet på webbsidan. När du använder tabeller kan du på ett enkelt sätt presentera text och bild i rader och kolumner. Skapa en tabell När du ska infoga en tabell på din webbsida så använder du Objects-paletten och väljer där knappen Insert Table (Infoga tabell) och följande fönster öppnas: I fönstret kan du göra följande inställningar för att skapa en tabell: Rows, anger du hur många rader du vill ha i din tabell. Columns, anger du hur många kolumner du vill ha i din tabell. Bredd, Anger du hur bred tabellen ska vara, du kan välja att ange enheter i procent eller i pixlar. Border, anger du hur tjock kantlinjerna ska vara på din tabell, 0 betyder att kanterna blir osynliga i din webbläsare. Cell Padding, anger du hur stort avståndet ska vara från cellens innehåll och till cellens kant, anges i enheten pixlar. Cell Spacing, anger du hur tjock linjerna ska vara mellan cellerna, anges i enheten pixlar. När du skrivit in dina uppgifter i fönstret tryck OK. Vi har gjort ett exempel på 2 rader, 2 kolumner med vidd 200 pixlar och osynliga kanter. http://www.iml.umu.se/stod/program/dreamweaver/tabell.html (1 av 4) [2003-05-22 10:32:25]
Lathund till Dreamweaver - Tabeller I Dreamweaver visas tabellen med pricka linjer men när tabellen visas i webbläsaren så kommer endast siffrorna 1-4 att synas, kanterna är osynliga. Egenskaper för hela tabellen Om du markerar hela tabellen så ser du de egenskaper som gäller för hela tabellen på Objects-paletten, enligt fönstret nedan: Här kan du se de grundinställningar som är gjorda på tabell och du kan även ändra dessa. I Objekts-paletten kan bla förändra följande egenskaper: Rows, ändra antal rader i tabellen. Cols, ändra antalet kolumner i tabellen. W, ändra bredden på tabellen antingen i pixlar eller i procent. H, ändra höjden på tabellen antingen i pixlar eller i procent. Align, välja justering av tabellens läge på webbsidan, vänster, höger eller centrerad. Border, ändra kanten att vara osynlig eller synlig, enhet är angivna i pixlar. Bg, kan du antingen länka en bakgrundsbild (övre fältet) eller välja en färg på färgpaletten som visas när du trycker på knappen. Brdr, om du har en kantlinje kan du välja en färg på den via färgpaletten som visas när du trycker på knappen. Egenskaper för enskild cell eller rad När du arbetar i en enskild rad eller cell så kommer du enbart att arbete inom cellen eller radens området. Dina förändringar av egenskaper berör endast den enskilda cellen eller raden. När du ställer dig i en cell eller rad kommer Objekts-paletten att förändra enligt nedan fönster: http://www.iml.umu.se/stod/program/dreamweaver/tabell.html (2 av 4) [2003-05-22 10:32:25]
Lathund till Dreamweaver - Tabeller Den övre delen av paletten är densamma som när du bearbetar text. Den nedre delen visar egenskaper för enskilda cellen. De inställningar du bla kan göra i fönstret är: Horz, var i fältet du vill placera text och bild i cellen i horisontell läge, vänster, centrerad eller höger. Vert, var i fältet du vill placera text eller bild i cellen i vertikalt läge, toppen, mitten, botten, baslinje. W, ändra bredden på cellen eller raden. H, ändra höjden på cellen eller raden. Bg, kan du antingen länka en bakgrundsbild för cellen eller raden (övre fältet) eller välja en färg på färgpaletten som visas när du trycker på knappen nedre fältet). Brdr, om du har en kantlinje för cellen eller raden kan du välja en färg på den via färgpaletten som visas när du trycker på knappen. Ändra storlek på tabell, enskild cell eller rad Du kan på ett enkelt sätt utan att använda paletterna ändra storleken på höjd eller bredd på hela tabellen eller enskild cell eller rad via pekaren. Ställ dig mitt på kantlinjen mellan två celler. Pekaren kommer att ändra utseende enligt bilden nedan: Håll nere höger mustangent och dra samtidigt till höger eller vänster beroende på om du vill förminska eller förstora cellen. Du kan göra samma sak för att ändra höjden på en cell via att ställa dig på kanten i höjdled. Slå samman eller dela upp celler På Objects-paletten finns två små knappar som du kan använda för att slå samman två eller flera celler eller dela upp en cell till flera celler. Knapparna till att slå samman respektive dela upp cell hittar du längst nera till vänster på Objektspaletten. Tänk på att du måste stå i tabellen för att egenskaperna ska visas på paletten. Du har en tabell som består av 2 rader och 4 kolumner och du vill slå samman de två mittersta cellerna på första raden, markerar dessa två celler. Sedan väljer du på Objects-paletten knappen Merges selected cells using spans (Slå samman celler) och resultat blir enlig bilden. Vill du i istället dela upp en cell till flera celler ställer du dig i cellen och väljer i Objects-palettens knappen Split cells into rows or columns (Dela upp en cell i rader eller kolumner). http://www.iml.umu.se/stod/program/dreamweaver/tabell.html (3 av 4) [2003-05-22 10:32:25]
Lathund till Dreamweaver - Tabeller Ta bort rader, kolumner eller hel tabell För att ta bort en rad, kolumn eller hel tabell måste du första markera det du vill ta bort och sedan trycker du på knappen Delete. Design av tabell Du kan på ett enkel sätt ge sätta in färg och stil på din tabell med hjälp av fördefinierade färgscheman fört text, bakgrundsfärg, länkar osv. Markera tabellen och välj i textmenyn Commands och Format Tabel. Prova dig fram och göra olika inställningar i fönstret och när du är klar trycker du på OK. En webbsida kan alltid bli bättre, kom gärna med förslag på hur den här kan förbättras. Siv.Johansson-Langstrom@educ.umu.se. Siv Johansson-Långström 2000 Sidan skapad 26 juli 2000 och uppdaterades den 5 augusti 2000 http://www.iml.umu.se/stod/program/dreamweaver/tabell.html (4 av 4) [2003-05-22 10:32:25]
Lathund till Dreamweaver - Finesser Klickbara bilder, hotspot En finess i Dreamweaver är att man kan använda en del av en bild som klickbart området och länka vidare. Om man har en karta och vill kunna kunna klicka sig till flera olika länder (externa webbadress) så kan man göra flera klickbara fält/hotspots på samma bild. Infoga en bild på vanligt sätt på din webbsida. Markera bilden så att paletten Objects förändras. Längst ned till höger på paletten hittar du egenskaperna för att skapa en klickbar bild. I fältet Map döper du området du ska klicka på och sedan klickar du på en av de ritverktyg som du tänkt använda, rektangel, cirkel eller polygon. Markera med hjälp av ritverktyget och piltangenten det område som du vill ska vara klickbart. I detta exempel har vi använt rektangel. På bilden markeras det område som ska vara klickbart med ljusblå färg. Samtidigt ändras egenskaperna på Objectspaletten enligt nedan fönster: I fältet Link kan du skriva in eller klistrar in den adress (extern adress) som du vill att det klickbara området ska länkas till. Eller att du klickar via mapp-ikonen brevid fältet Links och sedan väljer den fil (intern fil) du vill länkas till. Klicka på arbetsytan utanför bilden och det klickbara området är klart. Spara filen och kontroll resultatet i en webbläsare. http://www.iml.umu.se/stod/program/dreamweaver/finess.html (1 av 2) [2003-05-22 10:32:37]