Användarhandbok Avbryt

Lägg till medieobjekt

  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
  19. Felsökning
    1. Korrigerade problem
    2. Kända fel

 

 

Lär dig hur du infogar och redigerar medieobjekt på Dreamweaver-webbsidor, använder Design Notes och mycket mer.

Förutom SWF- och FLV-filer kan du infoga andra ljud- och videoobjekt i Dreamweaver-dokument. Om du ger ett medieobjekt tillgänglighetsattribut kan du ange och redigera deras värden i HTML-koden.

  1. Placera insättningspunkten i dokumentfönstret där du vill infoga objektet.
  2. Infoga objektet genom att göra något av följande:
    • Klicka på Media i kategorin HTML på panelen Infoga och välj ikonen för den typ av objekt som du vill infoga.

    • Välj det aktuella objektet på undermenyn Infoga > HTML.

    • I dialogrutan som visas kan du välja en källfil och ange vissa parametrar för medieobjektet.

    Obs!

    Om du inte vill att sådana dialogrutor ska visas ska du välja Redigera > Inställningar > Allmänt (Windows) eller Dreamweaver > Inställningar > Allmänt (Macintosh) och avmarkera alternativet Visa dialogrutan vid infogning av objekt. Håll ned Ctrl (Windows) eller Alternativ (Macintosh) när du infogar objektet om du vill åsidosätta inställningen som gäller för visning av dialogrutor. 

  3. Fyll i dialogrutan Markera fil och klicka på OK.
    Obs!

    Dialogrutan Hjälpattribut visas om du har valt att visa attribut när du infogar media i dialogrutan Redigera > Inställningar

  4. Ange tillgänglighetsattribut.
    Obs!

    Du kan även redigera mediaobjektattribut genom att markera objektet och redigera HTML-koden i kodläge eller högerklicka (Windows) eller kontrollklicka (Macintosh) och välja Ändra tagg.

    Titel

    Ange mediaobjektets titel.

    Snabbtangent

    Ange en bokstav i textrutan som gör det möjligt att välja formulärobjektet i webbläsaren. Besökaren kan då använda Ctrl-tangenten (Windows) och snabbtangenten för att komma åt objektet. Om du exempelvis väljer snabbtangenten B går objektet att välja i webbläsaren med tangentkombinationen Ctrl+B.

    Tabbindex

    Ange formulärobjektets tabbordningsnummer. Det är en god idé att ange tabbordningen om det finns andra länkar och formulärobjekt på sidan och du vill att användaren ska gå igenom dem i en viss ordning. Om du anger tabbordningen för ett objekt bör du ange ordningen för alla.

  5. Infoga mediaobjektet genom att klicka på OK.
    Obs!

    Om du trycker på Avbryt infogas en platshållare för mediaobjektet i dokumentet, men Dreamweaver kopplar inga tillgänglighetstaggar eller -attribut till det.

    Använd varje objekts egenskapspanel om du vill ange en källfil eller ställa in storlekar och andra parametrar eller attribut. Du kan redigera ett objekts tillgänglighetsattribut.

Starta en extern redigerare för mediefiler

Du kan starta en extern redigerare i Dreamweaver och redigera de flesta mediefiler. Du kan även ange vilken redigerare du vill att Dreamweaver ska starta.

  1. Kontrollera att mediafiltypen har associerats med en redigerare på datorn.

    Vill du ta reda på vilken redigerare som har associerats med filtypen ska du välja Redigera > Inställningar i Dreamweaver och välja Filtyper/redigerare i listan Kategori. Klicka på filtillägget i kolumnen Tillägg. Då visas motsvarande redigerare i kolumnen Redigerare. Du kan välja att associera en annan redigerare med en filtyp.

  2. Dubbelklicka på mediafilen på filpanelen. Då startas den externa redigeraren.

    Redigeraren som startas då du dubbelklickar på filen på filpanelen kallas den primära redigeraren. Om du dubbelklickar på en bildfil, till exempel, öppnar Dreamweaver filen i den primära externa bildredigeraren, kanske Adobe Fireworks.

  3. Om du inte vill redigera filen i den primära externa redigeraren kan du använda en annan på datorn på följande sätt:
    • Högerklicka (Windows) eller kontrollklicka (Macintosh) på filnamnet på filpanelen och välj Öppna med på snabbmenyn.

    • Högerklicka (Windows) eller kontrollklicka (Macintosh) i designläge på mediaelementet på den aktuella sidan och välj Redigera på snabbmenyn.

Ange vilken redigerare som ska startas i Dreamweaver

Du kan ange vilken redigerare du vill att Dreamweaver ska använda då en filtyp redigeras, samt lägga till eller ta bort filtyper som Dreamweaver känner igen.

Uttryckligen ange vilka externa redigerare som ska startas för en given filtyp

  1. Välj Redigera > Inställningar och sedan Filtyper/redigerare i listan Kategori.

    Filnamnstillägg som GIF, WAV och MPG listas till vänster under Tillägg. De redigerare som hör till det valda tillägget listas till höger under Redigerare.

  2. Välj filtypstillägget i listan Tillägg och gör något av följande:
    • Koppla en ny redigerare till filtypen genom att klicka på plusknappen (+) ovanför listan Redigerare. Fyll sedan i dialogrutan som visas.

      Om du vill koppla filtypen till Acrobat, till exempel, ska du markera programmets ikon.

    • Om du vill göra en redigerare till filtypens primära redigerare (det vill säga se till att den öppnas när du dubbelklickar på filtypen på filpanelen) markerar du den i listan Redigerare och klickar på Gör primär.

    • Vill du inte längre att en redigerare ska vara kopplad till en filtyp ska du markera den i listan Redigerare och klicka på minusknappen (-) ovanför listan Redigerare.

Lägga till en ny filtyp och motsvarande redigerare

  1. Klicka på plusknappen (+) ovanför listan Tillägg och ange filtypstillägget (skriv även punkten i början av tillägget) eller flera närstående tillägg med mellanslag mellan dem.

    Du kan till exempel ange .xml .xsl om du vill koppla dem till en XML-redigerare på datorn.

  2. Välj en ny redigerare för filtypen genom att klicka på plusknappen (+) ovanför listan Redigerare. Fyll sedan i dialogrutan som visas.

Ta bort en filtyp

  1. Markera filtypen i listan Tillägg och klicka på minusknappen (-) ovanför listan Tillägg.
    Obs!

    Du kan inte ångra dig efter att ha tagit bort en filtyp, så du måste verkligen vara säker på att du vill ta bort den.

Använda Design Notes med mediaobjekt

Du kan lägga till Design Notes till medieobjekt och andra objekt i Dreamweaver. Design Notes är anteckningar som hör till en viss fil. De sparas separat. Anteckningarna används för att hålla reda på extra filinformation om dokumenten, till exempel bildernas filnamn och kommentarer om filens tillstånd.

  1. Högerklicka (Windows) eller kontrollklicka (Macintosh) på objektet i dokumentfönstret.
    Obs!

    Du måste definiera webbplatsen innan du lägger till Design Notes till något objekt.

  2. Välj Design Notes för sidan på snabbmenyn.
  3. Ange uppgifterna som du vill ha med i anteckningen.
    Obs!

    Du kan även lägga till en anteckning till ett mediaobjekt från filpanelen. Markera filen, visa snabbmenyn och välj Design Notes.

Lägg till video (inte FLV)

Du kan lägga till filmer på webbsidor på olika sätt och i olika format. Användaren kan hämta hela filmen, men den kan även spelas upp direkt när den hämtas.

  1. Spara filmklippet i platsmappen.

    Klippen är ofta i AVI- eller MPEG-format.

  2. Länka till filmklippet eller bädda in det på sidan.

    Vill du länka till klippet ska du ange länktexten (till exempel ”Hämta film”), markera texten och klicka på mappikonen i egenskapskontrollen. Bläddra dig fram till filmfilen och välj den.

    Obs!

    Användaren måste hämta ett hjälpprogram (plugin-program) om han eller hon ska kunna se vanliga direktuppspelande format som Real Media, QuickTime och Windows Media.

Infoga material till plugin-program

Du kan skapa exempelvis en QuickTime-film för uppspelning av ett webbläsarplugin-program till Netscape Navigator och sedan infoga materialet i ett HTML-dokument med hjälp av Dreamweaver. RealPlayer och QuickTime är exempel på några vanliga plugin-program, och innehållsfilerna kan vara mp3-filer och QuickTime-filmer.

Du kan förhandsgranska filmer och animeringar som kräver webbläsarplugin-program till Netscape Navigator direkt i designläget i dokumentfönstret. Du kan spela upp samtliga plugin-programelement samtidigt om du vill se hur sidan ser ut för användaren, men du kan även spela upp dem enskilt och kontrollera att du har lagt till rätt mediaelement.

Obs!

Det går inte att förhandsgranska filmer eller animeringar som spelas upp av ActiveX-kontroller.

När du har infogat material för ett plugin-program till kan du ange parametrar till det i egenskapskontrollen. Välj ett plugin-program till om du vill visa följande egenskaper i egenskapskontrollen.

Egenskapskontrollen visar först de egenskaper som används mest. Klicka på pilen i det nedre högra hörnet om du vill se alla egenskaper.

Infoga material till plugin-program och ange dess egenskaper

  1. Placera insättningspunkten där du vill infoga materialet i designläge i dokumentfönstret och gör sedan något av följande:
    • Klicka på Media i kategorin Allmänt på panelen Infoga och välj ikonen Plugin-program  på menyn.

    • Välj Infoga > Media > Plugin-program.

  2. Välj en innehållsfil för ett plugin-program till i dialogrutan som visas och klicka på OK.
  3. Ange egenskaperna för plugin-programmet i egenskapskontrollen.

    Namn

    Anger namnet som identifierar plugin-programmet i skript. Ange ett namn i den omärkta textrutan långt till vänster i egenskapskontrollen.

    B och H

    Anger bredden och höjden för objektet på sidan mätt i pixlar.

    Källa

    Anger källdatafilen. Klicka på mappikonen och bläddra dig fram till en fil eller skriv en sökväg.

    Inst.-URL

    Anger URL-adressen till pluginspace-attributet. Ange den fullständiga webbadressen till webbplatsen där användarna kan hämta plugin-programmet. Om besökaren inte har plugin-programmet försöker webbläsaren hämta det från den här adressen.

    Justera

    Bestämmer hur objektet justeras på sidan.

    Lodrätt mellanrum och Vågrätt mellanrum

    Anger antalet pixlar med blankutrymme ovanför, under och på ömse sidor om plugin-programmet.

    Kant

    Bestämmer kantbredden runt plugin-programmet.

    Parametrar

    Öppnar en dialogruta där du kan ange ytterligare parametrar som ska överföras till plugin-programmet. Många plugin-program har särskilda parametrar.

    Du kan även se vilka attribut som det markerade plugin-programmet har tilldelats genom att klicka på knappen Attribut. Du kan redigera, lägga till och ta bort attribut såsom bredden och höjden i den här dialogrutan.

Spela upp material till plugin-program i dokumentfönstret

  1. Infoga ett eller flera mediaelement med hjälp av de metoder som beskrivs i avsnittet ovan.
  2. Gör något av följande:
    • Välj ett av mediaelementen som du har infogat och välj Visa > Plugin-program > Spela upp eller klicka på uppspelningsknappen i egenskapskontrollen.

    • Välj Visa > Plugin-program > Spela upp alla om du vill spela upp alla mediaelementen på den aktuella sidan som kräver plugin-program.

    Obs!

    Spela upp alla gäller enbart det aktuella dokumentet och inte de övriga dokumenten i en ramuppsättning, till exempel.

Sluta spela upp material till plugin-program

  1. Markera ett mediaelement och välj Visa > Plugin-program >Stopp eller klicka på stoppknappen i egenskapskontrollen.

    Du kan även välja Visa > Plugin-program > Stoppa alla om du vill stoppa samtliga plugin-program.

Felsök plugin-program

Om du försökt spela upp material i plugin-program i dokumentfönstret enligt beskrivningen men visst material inte spela upp kan du försöka med följande lösning:

  • Kontrollera att motsvarande plugin-program är installerat på datorn och att innehållet är kompatibelt med den version du har.

  • Öppna filen Configuration/Plugins/UnsupportedPlugins.txt i en textredigerare och se om det krånglande plugin-programmet finns med i listan. Den här filen innehåller uppgifter om plugin-program som orsakar problem i Dreamweaver och som därför inte stöds. (Du kan lägga till ett plugin-program i den här filen om du har problem med det.)

  • Kontrollera att minnet räcker. Vissa plugin-program behöver ytterligare 2 till 5 MB minne för att kunna köras.

Kontrollera mediefiler med beteenden

Du kan lägga till beteenden till sidan för att starta och stoppa olika mediaobjekt.

Kontrollera Shockwave eller Flash

Gör det möjligt att spela upp, stoppa, spola tillbaka eller gå till en specifik bildruta i en Shockwave-film eller SWF-fil.

Spela upp ljud

Gör det möjligt att spela upp ett ljud. Du kan till exempel spela upp en ljudeffekt när användaren flyttar pekaren över en länk.

Kontrollera plugin-program

Gör det möjligt att kontrollera om besökarna på webbplatsen har det plugin-program som krävs installerat och skicka dem vidare till olika webbadresser beroende på om de har det rätta plugin-programmet eller inte. Det här gäller enbart plugin-program i , eftersom beteendet Kontrollera plugin-program inte letar efter ActiveX-kontroller.

Kontrollera mediaobjekt med parametrar

Definiera särskilda parametrar för att styra SWF-filer och plugin-program. Parametrar används tillsammans med taggarna object, embed och applet. Parametrar anger attribut som gäller olika typer av objekt. En SWF-fil kan till exempel använda en quality-parameter <paramname="quality"value="best"> för object-taggen. Dialogrutan Parameter går att öppna från egenskapskontrollen. Dokumentationen om objektet som du använder innehåller information om de parametrar som krävs.

Obs!

Det finns ingen allmän standard för att identifiera ActiveX-kontrollers datafiler. Läs dokumentationen om den ActiveX-kontroll som du använder om du behöver ta reda på vilka parametrar du ska använda.

Ange en parameters namn och värde

  1. I dokumentfönstret väljer du ett objekt som kan ha parametrar.

  2. Öppna egenskapskontrollen om den inte redan visas och klicka på knappen Parametrar i den undre halvan av egenskapskontrollen. (Se till att allt i egenskapskontrollen visas.)

  3. Klicka på plusknappen (+) och ange parameterns namn och värde i kolumnerna.

Ta bort en parameter

  1. Markera en parameter och tryck på minusknappen (-).

Ordna om parametrar

  1. Välj en parameter och använd upp- och nedpilarna.

Få hjälp snabbare och enklare

Ny användare?