Användarhandbok Avbryt

Använd JavaScript-beteenden (allmänna instruktioner)

  1. Användarhandbok för Dreamweaver
  2. Introduktion
    1. Grunderna i responsiv webbdesign
    2. Nyheter i Dreamweaver
    3. Webbutveckling med Dreamweaver – översikt
    4. Dreamweaver/vanliga frågor
    5. Kortkommandon
    6. Systemkrav för Dreamweaver
    7. Sammanfattning av funktioner
  3. Dreamweaver och Creative Cloud
    1. Synka inställningarna för Dreamweaver med Creative Cloud
    2. Creative Cloud Libraries i Dreamweaver
    3. Använda Photoshop-filer i Dreamweaver
    4. Arbeta med Adobe Animate och Dreamweaver
    5. Extrahera webboptimerade SVG-filer från bibliotek
  4. Arbetsytor och vyer i Dreamweaver
    1. Arbetsytan i Dreamweaver
    2. Optimera Dreamweaver-arbetsytan för visuell utveckling
    3. Söka efter filer baserat på filnamn eller innehåll | Mac OS
  5. Skapa webbplatser
    1. Om Dreamweaver-platser
    2. Skapa en lokal version av din webbplats
    3. Ansluta till en publiceringsserver
    4. Ställa i ordning en testserver
    5. Importera och exportera inställningarna för en Dreamweaver-plats
    6. För över befintliga webbplatser från en fjärrserver till din lokala platsrot
    7. Tillgänglighetsfunktioner i Dreamweaver
    8. Avancerade inställningar
    9. Ange platsinställningar för överföring av filer
    10. Ange proxyserverinställningar i Dreamweaver
    11. Synka inställningarna för Dreamweaver med Creative Cloud
    12. Använda Git i Dreamweaver
  6. Hantera filer
    1. Skapa och öppna filer
    2. Hantera filer och mappar
    3. Hämta och skicka filer till och från servern
    4. Checka in och checka ut filer
    5. Synka filer
    6. Jämför skillnader mellan filer
    7. Dölja filer och mappar på din Dreamweaver-plats
    8. Aktivera Design Notes för Dreamweaver-platser
    9. Sätta stopp för Gatekeeper
  7. Layout och design
    1. Använda visuella hjälpmedel för layout
    2. Layouta sidor med CSS
    3. Designa responsiva webbplatser med Bootstrap
    4. Skapa och använda mediefrågor i Dreamweaver
    5. Visa innehåll med tabeller
    6. Färger
    7. Responsiv design med flytande stödrasterlayouter
    8. Extract i Dreamweaver
  8. CSS
    1. Förstå Cascading Style Sheets (CSS)
    2. Utforma sidor med hjälp av CSS Designer
    3. Använda CSS-förbehandlare i Dreamweaver
    4. Ange CSS-formatinställningar i Dreamweaver
    5. Flytta CSS-regler i Dreamweaver
    6. Konvertera infogad CSS till en CSS-regel i Dreamweaver
    7. Arbeta med div-taggar
    8. Använda övertoningar på bakgrunden
    9. Skapa och redigera CSS3-övergångseffekter i Dreamweaver
    10. Formatera kod
  9. Sidinnehåll och resurser
    1. Ange sidegenskaper
    2. Ange CSS-rubrikegenskaper och CSS-länkegenskaper
    3. Arbeta med text
    4. Sök och ersätt text, taggar och attribut
    5. DOM-panel
    6. Redigera i live-vyn
    7. Koda dokument i Dreamweaver
    8. Markera och visa element i dokumentfönstret
    9. Ange textegenskaper i egenskapskontrollen
    10. Stavningskontrollera en webbsida
    11. Använda vågräta linjer i Dreamweaver
    12. Lägga till och ändra teckensnittskombinationer i Dreamweaver
    13. Arbeta med resurser
    14. Infoga och uppdatera datum i Dreamweaver
    15. Skapa och hantera favoritresurser i Dreamweaver
    16. Infoga och redigera bilder i Dreamweaver
    17. Lägga till medieobjekt
    18. Lägga till videor i Dreamweaver
    19. Infoga HTML5-video
    20. Infoga SWF-filer
    21. Lägga till ljudeffekter
    22. Infoga HTML5-ljud i Dreamweaver
    23. Arbeta med biblioteksobjekt
    24. Använda arabisk och hebreisk text i Dreamweaver
  10. Länkar och navigering
    1. Om länkar och navigering
    2. Länkning
    3. Bildmappningar
    4. Felsöka länkar
  11. jQuery-widgetar och effekter
    1. Använda jQuery-gränssnitt och mobilwidgetar i Dreamweaver
    2. Använd jQuery-effekter i Dreamweaver
  12. Koda webbplatser
    1. Om kodning i Dreamweaver
    2. Kodningsmiljön i Dreamweaver
    3. Ange kodningspreferenser
    4. Anpassa kodfärger
    5. Skriva och redigera kod
    6. Kodtips och kodkomplettering
    7. Komprimera och utöka kod
    8. Återanvända kod med fragment
    9. Granska kod
    10. Optimera kod
    11. Redigera kod i designvyn
    12. Arbeta med head-innehåll för sidor
    13. Infoga SSI i Dreamweaver
    14. Använda taggbibliotek i Dreamweaver
    15. Importera egna taggar i Dreamweaver
    16. Använda JavaScript-beteenden (allmänna instruktioner)
    17. Använda inbyggda JavaScript-beteenden
    18. Om XML och XSLT
    19. Utföra XSL-omvandlingar på servern i Dreamweaver
    20. Utföra XSL-omvandlingar på klienten i Dreamweaver
    21. Lägga till teckenentiteter för XSLT i Dreamweaver
    22. Formatera kod
  13. Arbetsflöden mellan produkter
    1. Installera och använda tillägg i Dreamweaver
    2. Uppdateringar i appen i Dreamweaver
    3. Infoga Microsoft Office-dokument i Dreamweaver (endast Windows)
    4. Använda Fireworks och Dreamweaver
    5. Redigera innehåll på Dreamweaver-webbplatser med Contribute
    6. Integrering mellan Dreamweaver och Business Catalyst
    7. Skapa anpassade e-postkampanjer
  14. Mallar
    1. Om Dreamweaver-mallar
    2. Känna igen mallar och mallbaserade dokument
    3. Skapa en Dreamweaver-mall
    4. Skapa ändringsbara regioner i mallar
    5. Skapa upprepande regioner och tabeller i Dreamweaver
    6. Använd valfria regioner i mallar
    7. Definiera redigerbara taggattribut i Dreamweaver
    8. Skapa kapslade mallar i Dreamweaver
    9. Redigera, uppdatera och ta bort mallar
    10. Exportera och importera XML-innehåll i Dreamweaver
    11. Lägga till eller ta bort en mall från ett befintligt dokument
    12. Redigera innehåll i Dreamweaver-mallar
    13. Syntaxregler för malltaggar i Dreamweaver
    14. Ange markeringsinställningar för mallområden
    15. Fördelar med att använda mallar i Dreamweaver
  15. Mobiler och flera skärmar
    1. Skapa mediefrågor
    2. Ändra sidorientering för mobila enheter
    3. Skapa webbappar för mobila enheter med Dreamweaver
  16. Dynamiska webbplatser, sidor och webbformulär
    1. Förstå webbprogram
    2. Konfigurera datorn för programutveckling
    3. Felsöka databasanslutningar
    4. Ta bort anslutningsskript i Dreamweaver
    5. Utforma dynamiska sidor
    6. Översikt över källor med dynamiskt innehåll
    7. Definiera källor med dynamiskt innehåll
    8. Lägga till dynamiskt innehåll på sidor
    9. Ändra dynamiskt innehåll i Dreamweaver
    10. Visa databasposter
    11. Ange och felsöka livedata i Dreamweaver
    12. Lägga till anpassade serverbeteenden i Dreamweaver
    13. Bygga formulär med Dreamweaver
    14. Använda formulär för att samla in information från användarna
    15. Skapa och aktivera ColdFusion-formulär i Dreamweaver
    16. Skapa webbformulär
    17. Förbättrat HTML5-stöd för formulärelement
    18. Använda Dreamweaver för att utveckla ett formulär
  17. Bygga program visuellt
    1. Bygga huvud- och detaljsidor i Dreamweaver
    2. Bygga sök- och resultatsidor
    3. Bygga en postinmatningssida
    4. Bygga en postuppdateringssida i Dreamweaver
    5. Bygga postborttagningssidor i Dreamweaver
    6. Förändra en databas med hjälp av ASP-kommandon i Dreamweaver
    7. Bygga en registreringssida
    8. Bygga en inloggningssida
    9. Bygga en sida som bara behöriga användare har åtkomst till
    10. Skydda mappar i ColdFusion med Dreamweaver
    11. Använda ColdFusion-komponenter i Dreamweaver
  18. Testa, förhandsgranska och publicera webbplatser
    1. Förhandsgranska sidor
    2. Förhandsgranska Dreamweaver-webbsidor på flera enheter
    3. Testa Dreamweaver-platsen

 

Använd JavaScript-beteenden i Adobe Dreamweaver för att infoga JavaScript-kod i dokument så att besökarna kan ändra en webbsida eller sätta igång vissa åtgärder.

Beteenden i Adobe Dreamweaver är ett sätt att infoga JavaScript-kod i dokument så att besökarna ska kunna ändra en webbsida på olika sätt eller sätta igång vissa åtgärder. Ett beteende är en kombination av en händelse och en åtgärd som sätts igång när händelsen inträffar. Du kan lägga till ett beteende till en sida på panelen Beteenden. Ange en åtgärd och sedan händelser som gör att den utförs.

Obs!

Beteendekod är ett JavaScript som körs på klienten. Det betyder att koden körs i webbläsaren och inte på servern.

Händelser är i allt väsentligt meddelanden som webbläsaren skickar och som visar att besökaren har gjort något på sidan. Om en besökare för pekaren över en länk, skapas händelsen onMouseOver för den aktuella länken. Därefter kontrolleras om JavaScript-kod (definierad för den sida som visas) ska anropas som svar på händelsen. Olika händelser har definierats för olika sidelement. I de flesta webbläsare är till exempel händelserna onMouseOver och onClick associerade med länkar, medan händelsen onLoad är associerad med bilder och dokumentets body-avsnitt.

En åtgärd är färdig JavaScript-kod som utför en särskild uppgift, till exempel att öppna ett nytt fönster i webbläsaren, visa eller dölja ett AP-element, spela upp ett ljud eller stoppa en Adobe Shockwave-film. Åtgärderna i Dreamweaver är kompatibla med så många webbläsare som möjligt.

När du har kopplat ett beteende till ett sidelement anropas åtgärden (JavaScript-koden) som är kopplad till händelsen när den inträffar för elementet i fråga. (Vilka händelser som går att använda för att sätta igång en viss åtgärd varierar mellan olika webbläsare.) Om du till exempel kopplar åtgärden Popup-meddelande till en länk och anger att åtgärden ska utlösas av händelsen onMouseOver, öppnas ditt meddelande när någon placerar pekaren på länken.

En och samma händelse kan ge upphov till flera olika åtgärder, och du kan ange i vilken ordning de utförs.

Dreamweaver innehåller drygt tjugo åtgärder. Du hittar fler åtgärder på webbplatsen Exchange på adressen www.adobe.com/go/dreamweaver_exchange_se, men även på oberoende utvecklares webbplatser. Du kan skriva egna åtgärder om du är duktig på JavaScript.

Obs!

Termerna beteende och åtgärd är Dreamweaver-termer, inte HTML-termer. Ur webbläsarens synvinkel är en åtgärd bara ett vanligt JavaScript.

Översikt över panelen Beteenden

Det är på panelen Beteenden (Fönster > Beteenden) som du lägger till beteenden till sidelement (exaktare uttryckt till taggar) och ändrar parametrarna till beteenden som du redan har lagt till.

Beteenden som redan har kopplats till det markerade sidelementet visas i beteendelistan (huvudområdet på panelen). De visas i bokstavsordning. Om flera åtgärder har angetts för samma händelse utförs de i den ordning de står i listan. Om det inte finns några beteenden i listan har inga kopplats till det markerade elementet.

På panelen Beteenden finns följande alternativ:

Visa uppsatta händelser

Visar endast de händelser som har kopplats till det aktuella dokumentet. Händelser ordnas i klient- och serverkategorier. Händelserna i kategorierna står i en lista som går att dölja och visa. Visa uppsatta händelser är standardvyn.

Visa alla händelser

Visar en lista över alla händelser i en given kategori i bokstavsordning.

Lägg till beteende (+)

Visar en meny med åtgärder som du kan koppla till det markerade elementet. När du väljer en åtgärd i den här listan visas en dialogruta där du kan ange åtgärdens parametrar. Om alla åtgärder är nedtonade går det inte att generera någon händelse för det markerade elementet.

Ta bort händelse (–)

Tar bort den markerade händelsen och åtgärden från beteendelistan.

Upp- och nedpilar

Flyttar den markerade åtgärden för en viss händelse upp eller ned i beteendelistan. Du kan ändra åtgärdernas ordning för en viss händelse – till exempel kan du ändra ordningen för ett antal åtgärder som inträffar för händelsen onLoad. Alla onLoad-åtgärder behålls dock tillsammans i beteendelistan. Pilknapparna är inaktiverade för de åtgärder som inte går att flytta någonstans i listan.

Händelser

Visar en snabbmeny som enbart syns då en händelse är markerad. Den innehåller alla händelser som kan göra att åtgärden utlöses (menyn visas då du klickar på pilknappen bredvid den markerade händelsens namn). Olika händelser visas beroende på vilket objekt du har markerat. Om du inte ser händelser som du hade väntat dig att få se ska du kontrollera att du har markerat rätt sidelement eller tagg. (Välj en tagg med hjälp av taggväljaren längst ned till vänster i fönstret Dokument.)

Obs!

Händelsenamn som står inom parentes går bara att välja för länkar. Om du väljer ett av dem infogas automatiskt en tom länk till det valda sidelement och beteendet kopplas till länken i stället för till elementet. En tom länk anges med href="javascript:;" i HTML-koden.

Om händelser

Varje webbläsare har en egen uppsättning händelser som du kan koppla till åtgärderna på menyn Åtgärder (+) på panelen Beteende. När en besökare på webbplatsen gör något på sidan – till exempel klickar på en bild – genererar webbläsaren händelser. De går att använda för att anropa JavaScript-funktioner som utför en åtgärd. Dreamweaver innehåller många vanliga åtgärder som du kan utlösa med dessa händelser.

Namn på och beskrivningar av de händelser som olika webbläsare förstår beskrivs på Dreamweaver Support Center på adressen www.adobe.com/go/dreamweaver_support_se.

Olika händelser visas på Händelse-menyn beroende på vilket objekt du har markerat. Ta reda på vilka händelser en viss webbläsare stödjer för ett visst sidelement genom att infoga elementet i dokumentet och koppla ett beteende till det. Titta sedan på menyn Händelser på panelen Beteenden. (Som standard hämtas händelser från händelselistan i HTML 4.01 och de stöds av de flesta moderna webbläsare.) Händelser kan vara inaktiverade (nedtonade) om motsvarande objekt ännu inte finns med på sidan eller om det markerade objekt inte reagerar på händelser. Om de förväntade händelserna inte visas kontrollerar du att du har markerat rätt objekt.

Om du kopplar ett beteende till en bild visas vissa händelser (till exempel onMouseOver) inom parentes. Sådana händelser gäller enbart länkar. När du markerar en av dem infogar Dreamweaver en <a>-tagg runt bilden, så att en null-länk skapas. Den tomma länken representeras av javascript:; i rutan Länka i egenskapskontrollen. Du kan ändra länkvärdet om du vill omvandla den till en riktig länk till en annan sida, men om du tar bort JavaScript-länken utan att ersätta den med en annan länk försvinner även beteendet.

Om du vill se vilka taggar du kan använda för en viss händelse i en viss webbläsare ska du söka på händelsen i en av filerna i mappen Dreamweaver/Konfiguration/Beteenden/Händelser.

Använda ett beteende

Du kan koppla beteenden till hela dokumentet (det vill säga till <body>-taggen) eller till länkar, bilder, formulärelement och flera andra HTML-element.

Vilka händelser som stöds för ett givet element bestäms av vilken målwebbläsare du väljer.

Du kan ange mer än en åtgärd för varje händelse. Åtgärderna utförs i den ordning som de står i kolumnen Åtgärder på panelen Beteenden. Ordningen kan ändras.

  1. Markera ett element på sidan, till exempel en bild eller en länk.

    Om du vill koppla ett beteende till hela sidan klickar du på <body>-taggen i taggväljaren i dokumentfönstrets nedre, vänstra hörn.

  2. Välj Fönster > Beteenden.
  3. Klicka på plusknappen (+) och välj en åtgärd på menyn Lägg till beteende.

    Nedtonade åtgärder på menyn går inte att välja. De kan vara nedtonade på grund av att ett objekt som krävs ännu inte har lagts till i det aktuella dokumentet. Åtgärden Kontrollera Shockwave eller SWF är nedtonad om det inte finns någon Shockwave- eller SWF-fil i dokumentet.

    När du väljer en åtgärd visas en dialogruta där du kan ange dess parametrar och inställningar.

  4. Ange åtgärdens parametrar och klicka på OK.

    Alla åtgärder i Dreamweaver fungerar i moderna webbläsare. Vissa åtgärder fungerar inte i äldre webbläsare, men de orsakar inga fel.

    Obs!

    För målelement krävs unika ID:n. Om du till exempel vill använda beteendet Växla bild på en bild, måste den ha ett ID. Har du inte angett något ID för elementet, anges ett automatiskt.

  5. Standardhändelsen som utlöser åtgärden visas i kolumnen Händelser. Om det inte är den utlösningsmekanism som du önskar dig kan du välja en annan händelse på snabbmenyn Händelser. (Du kan få fram Händelser-menyn genom att markera en händelse eller åtgärd på panelen Beteenden och klicka på den nedåtriktade svarta pilen nedanför händelsens och åtgärdens namn.)

Ändra eller ta bort ett beteende

När du har kopplat ett beteende kan du ändra vilken händelse som utlöser åtgärden, lägga till eller ta bort åtgärder samt ändra deras parametrar.

  1. Markera ett objekt med ett kopplat beteende.
  2. Välj Fönster > Beteenden.
  3. Gör de ändringar du vill göra:
    • Du redigerar åtgärdens parametrar genom att dubbelklicka på dess namn eller markera den och trycka på Enter (Windows) eller Retur (Macintosh) och sedan redigera parametrarna i dialogrutan. Avsluta genom att klicka på OK.

    • Ändra åtgärdsordningen för en viss händelse genom att markera en åtgärd och klicka på upp- eller nedpilen. En annan möjlighet är att markera åtgärden och klippa ut och klistra in den på rätt ställe.

    • Du kan ta bort ett beteende genom att markera det och klicka på Delete-tangenten eller minusknappen (–).

Uppdatera ett beteende

  1. Markera ett element som är kopplat till beteendet.
  2. Välj Fönster > Beteenden och dubbelklicka på beteendet.
  3. Gör önskade ändringar och klicka på OK i beteendets dialogruta.

    Då uppdateras samtliga beteenden av samma slag på sidan. Om samma beteende finns på andra sidor på webbplatsen måste du uppdatera varje sida för sig.

Hämta och installera beteenden från andra utvecklare

Det finns många tillägg på webbplatsen Exchange för Dreamweaver (www.adobe.com/go/dreamweaver_exchange_se).

  1. Välj Fönster > Beteenden och välj Hämta fler beteenden på menyn Lägg till beteende.

    Standardwebbläsaren startas och Exchange-webbplatsen visas.

  2. Bläddra bland eller sök efter paket.
  3. Hämta och installera det tilläggspaket du vill ha.
Adobes logotyp

Logga in på ditt konto