Användarhandbok Avbryt

Arbeta med resurser

Sök
Dreamweaver

Dreamweaver

Öppna appen
  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

 

 

Använd resurspanelen i Dreamweaver för att hantera resurser på den aktuella platsen.

Du kan använda Adobe Dreamweaver för att hålla reda på och förhandsgranska resurser som sparats på din plats, t.ex. bilder, filmer, färger, skript och länkar. Du kan även dra en resurs direkt för att infoga den på en sida i det aktuella dokumentet.

Du får resurser från flera olika källor. Du kan till exempel skapa resurser i ett program som Adobe Photoshop eller Adobe Animate CC, få dem från en kollega eller kopiera dem från en cd-skiva eller webbplats med bilder.

Dreamweaver ger dig även tillgång till två särskilda typer av resurser – bibliotek och mallar. Båda är länkade resurser: när du redigerar en bibliotekspost eller mall uppdaterar Dreamweaver alla dokument som använder dessa resurser. Biblioteksposter utgörs vanligtvis av små designresurser, t.ex. en webbplatslogotyp eller copyrightinformation. Om du vill kontrollera ett större designområde kan du använda en mall istället.

Använd resurspanelen (Fönster > Resurser) för att hantera resurser på den aktuella platsen. Resurspanelen visar resurser för platsen som är kopplad till det aktiva dokumentet i dokumentfönstret.

Obs!

Du måste ange en lokal plats innan du kan visa resurser i resurspanelen.

Resurspanelen i Live-vyn
Resurspanelen i Live-vyn

Resurspanelen i design- och kodvyn

Resurspanelen ger möjlighet att visa resurser på olika sätt:

Platslista

Visa alla resurser på din plats, inklusive färger och URL-adresser som används i dokument på platsen.

Favoritlista

Visar endast de resurser som du har valt.

Om du vill växla mellan dessa två vyer väljer du antingen knappen Plats eller Favoriter ovanför förhandsvisningsområdet. (Dessa två vyer är inte tillgängliga för kategorierna Mallar och Bibliotek.)

Obs!

De flesta åtgärder i resurspanelen fungerar på samma sätt i båda listorna. Det finns dock ett par uppgifter som du bara kan utföra i favoritlistan.

I båda listorna hamnar resurser i någon av följande kategorier:

Bilder

Bildfiler i GIF-, JPEG- eller PNG-format.

Färger

Färger som används i dokument och formatmallar, inklusive färger i text, bakgrunder och länkar.

URL-adresser

Externa länkar i de aktuella platsdokumenten, bland annat FTP-, gopher-, HTTP-, HTTPS-, JavaScript- och epost-länkar (mailto) samt lokala fillänkar (file://).

Media

Mediefiler, till exempel Adobe Flash-filer (endast SWF-filer), Adobe Shockwave-filer, QuickTime- eller MPEG-filer.

Skript

JavaScript- eller VBScript-filer. Skript i HTML-filer (istället för i oberoende JavaScript- eller VBScript-filer) visas inte i resurspanelen. Den här kategorin är endast tillgänglig i kod- och designvyn.

Mallar

Layouter för huvudsidan vilka används på flera sidor. Om du ändrar en mall så ändras automatiskt alla sidor som är kopplade till den. Den här kategorin är endast tillgänglig i kod- och designvyn.

Biblioteksposter

Designelement som du använder på flera sidor. När du ändrar en bibliotekspost uppdateras alla sidor som innehåller den posten. Den här kategorin är endast tillgänglig i kod- och designvyn.

Obs!

För att en fil ska visas i resurspanelen måste den passa i någon av dessa kategorier. En del andra typer av filer kallas ibland resurser, men de visas inte i panelen.

Som standard anges resurser i en kategori i alfabetisk ordning efter namn, men du kan sortera dem efter typ och flera andra kriterier. Du kan även förhandsgranska resurser och ändra storleken på kolumnerna och förhandsgranskningsområdet.

En Creative Cloud-ikon i Typ-kolumnen anger att motsvarande resurs importeras från Creative Cloud Libraries. Du kan dubbelklicka på Creative Cloud-ikonen för att sampla om motsvarande resurser. Mer information om hur du återanvänder resurser i CC Libraries finns i Creative Cloud Libraries i Dreamweaver.

Visa en resurs i förhandsvisningsområdet

  1. Markera resursen i resurspanelen.

Visa resurser i en kategori

  1. Klicka på en kategoriikon till vänster i resurspanelen.

Sortera resurser

  1. Klicka på en kolumnrubrik.

    Om du t.ex. vill sortera listan med bilder efter typ (så att alla GIF-bilder visas ihop, alla JPEG-bilder ihop, osv.) klickar du på kolumnrubriken Typ.

Ändra storleken på en kolumn

  1. Dra i linjen som skiljer två kolumnrubriker åt.

Ändra storleken på förhandsvisningsområdet

  1. Dra det delade fältet (mellan förhandsvisningsområdet och resurslistan) uppåt eller nedåt.

Uppdatera resurspanelen

Det kan ta ett par sekunder att skapa platslistan eftersom Dreamweaver först måste läsa platscachen.

Vissa ändringar visas inte direkt i resurspanelen. När du t.ex. lägger till eller tar bort en resurs från platsen visas inte ändringarna i resurspanelen förrän du uppdaterar platslistan genom att klicka på knappen Uppdatera platslista. Om du lägger till eller tar bort en resurs utanför Dreamweaver – till exempel med hjälp av Utforskaren eller Finder – måste du återskapa platscachen för att uppdatera resurspanelen.

När du tar bort den enda förekomsten av en viss färg eller URL-adress på din plats eller när du sparar en ny fil som innehåller en färg eller URL-adress som inte redan används på platsen visas inte ändringarna i resurspanelen förrän du uppdaterar platslistan.

  • Om du vill uppdatera platslistan manuellt kan du klicka på knappen Uppdatera platslista . Dreamweaver skapar platscachen eller uppdaterar den vid behov.
  • Om du vill uppdatera platslistan och återskapa platscachen manuellt högerklickar (Windows) eller kommando-klickar du (Macintosh) i resurslistan och väljer sedan Uppdatera platslista.

Lägga till en resurs i ett dokument

Du kan infoga de flesta resurser i ett dokument genom att dra dem till Live-vyn, kodvyn eller designvyn i dokumentfönstret eller genom att använda knappen Infoga på panelen. Du kan dra resurser från både listvyn och förhandsgranskningsfönstret i resurspanelen.

Obs! Du kan bara dra resurser från förhandsgranskningsfönstret på Mac.

Du kan infoga färger och URL:er i designvyn eller Live-vyn. I designvyn kan du tillämpa färger och URL:er på markerade element.

 

  1. Placera insättningspunkten på den plats i dokumentet där du vill infoga resursen.

  2. I resurspanelen väljer du mellan knapparna för resurskategorier till vänster.
    Obs!

    Välj en kategori förutom Mallar. En mall används för ett helt dokument och kan inte infogas i ett dokument.

  3. Välj antingen Plats eller Favoriter högst upp i panelen och välj sedan resurs.

    Det finns inga plats- eller favoritlistor för biblioteksposter. Hoppa över det här steget om du infogar en bibliotekspost.

  4. Gör något av följande:

    • Dra resursen från panelen till dokumentet. Du kan dra resursen från listvyn lika väl som från förhandsgranskningsfönstret.

      Obs! Du kan inte dra resurser från förhandsgranskningsfönstret på Windows.

      Du kan dra skript till området för innehållet under HEAD i dokumentfönstret. Om du inte kan se det området väljer du Visa > Innehåll under HEAD.

    • Välj resurs i panelen och klicka på Infoga.

      Om den infogade resursen är en färg används den på text som visas efter insättningspunkten.

Använda en färg på text med hjälp av resurspanelen

I resurspanelen visas färgerna som du redan har använt på olika element, t.ex. text, tabellkanter, bakgrunder, osv.

  1. Utför följande steg i designvyn:

    1. Markera texten i dokumentet.

    2. Välj kategorin Färger i resurspanelen.

    3. Markera en färg och klicka på Använd.

  2. Utför följande steg i Live-vyn:

    1. Välj kategorin Färger i resurspanelen.

    2. Gör något av följande:

      • Högerklicka på färgen på resurspanelen och klicka på Kopiera färgvärde. Färgvärdet kopieras till Urklipp. Du kan nu klistra in färgvärdet (Ctrl+V, Cmd+V) i CSS Designer.
      • Dra färgen från förhandsgranskningen och hovra över element i Live-vyn. När du släpper färgen visas dialogrutan Ny CSS-regel och när du klickar på OK används färgen på det markerade elementet.
      • Klicka på Använd i resurspanelen. Dialogrutan Ny CSS-regel visas och när du klickar på OK används färgen på det markerade elementet.

Koppla URL:er till bilder eller text 

  1. Utför följande steg i designvyn:

    1. Markera texten eller bilden.

    2. I resurspanelen väljer du kategorin URL-adresser i platsvyn eller favoritvyn, beroende på var URL-adressen lagras.

      Obs!

      URL-adresser för platsens filer lagras som standard i platsvyn. Favoritvyn innehåller URL-adresser som du har lagt till själv.

    3. Markera URL-adressen.
    4. Gör något av följande:

      • Dra URL:en från panelen till markeringen i designvyn.

      • Markera URL:en och klicka sedan på Infoga.

  2. Utför följande steg i Live-vyn:

    1. I resurspanelen väljer du kategorin URL-adresser i platsvyn eller favoritvyn, beroende på var URL-adressen lagras.

    2. Gör något av följande:

      • Dra URL:en från förhandsgranskningen eller listvyn. Hovra över element i Live-vyn. När du släpper URL:en omsluts elementet som markeras i Live-vyn av <a>.
      • Klicka på ett önskat element i Live-vyn. Välj URL i resurspanelen och klicka på Använd. Det markerade elementet omsluts med taggen <a>.

Välja och redigera resurser

Med resurspanelen kan du välja flera resurser samtidigt. Det är även ett snabbt sätt att börja redigera resurser.

Välja flera resurser

  1. Välj en resurs i resurspanelen.
  2. Markera de andra resurserna på ett av följande sätt:

    • Skift-klicka för att markera en serie med resurser.

    • Kontroll-klicka (Windows) eller kommando-klicka (Macintosh) för att lägga till en enskild resurs i markeringen (oavsett om den ligger bredvid den befintliga markeringen eller ej). Kontroll-klicka eller kommando-klicka på en markerad resurs för att avmarkera den.

Redigera en resurs

När du redigerar en resurs i resurspanelen kan beteendet variera beroende på resurstyp. För vissa resurser, t.ex. bilder, kan du använda en extern redigerare som öppnas automatiskt om du har angivit en redigerare för den resurstypen. Du kan endast redigera färger och URL-adresser i favoritlistan. När du redigerar mallar och biblioteksposter gör du ändringarna i Dreamweaver.

  1. Gör något av följande i resurspanelen:

    • Dubbelklicka på resursen.

    • Markera resursen och klicka sedan på knappen Redigera.

    Obs!

    Om resursen måste redigeras i en extern redigerare och den inte öppnas automatiskt väljer du Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Mac OS), väljer kategorin Filtyper/redigerare och kontrollerar att du har angett en extern redigerare för den aktuella resurstypen.

  2. Gör ändringarna.
  3. När du är klar gör du något av följande:

    • Om resursen är filbaserad (allt annat än en färg eller URL-adress) sparar du den (i redigeraren som du använde) och stänger den.

    • Om resursen är en URL-adress klickar du på OK i dialogrutan Ändra URL-adress.

    Obs!

    Om resursen är en färg stängs färgväljaren automatiskt efter att du har valt en färg. Om du vill stänga färgväljaren utan att välja en färg trycker du på Esc.

Återanvänd resurser på en annan plats

I resurspanelen visas alla resurserna (som är igenkända) på den aktuella platsen. Om du vill använda en resurs från den aktuella platsen på en annan plats måsta du kopiera den till den andra platsen. Du kan kopiera en enskild resurs, en uppsättning enskilda resurser eller hela Favoriter-mappen samtidigt.

Du kan behöva leta reda på den fil i filpanelen som motsvarar en resurs i resurspanelen innan du överför resursen till eller från fjärrplatsen.

Obs!

I filpanelen kan en annan plats än den som visas i resurspanelen visas. Detta beror på att resurspanelen är kopplad till det aktiva dokumentet.

Leta reda på en resursfil i filpanelen

  1. Välj den kategori för resursen som du vill hitta i resurspanelen.
  2. Högerklicka (Windows) eller kontroll-klicka (Macintosh) på resursens namn eller ikon i resurspanelen och välj sedan Hitta på plats på snabbmenyn.
    Obs!

    Hitta på plats är inte tillgängligt för färger och URL-adresser, som inte motsvarar filer på platsen.

    Filpanelen öppnas med resursfilen markerad. Med hjälp av kommandot Hitta på plats kan du hitta filen som motsvarar själva resursen, men den hittar inte filer som använder den resursen.

Kopiera resurser från resurspanelen till en annan plats

  1. Välj den kategori för resursen som du vill kopiera i resurspanelen.
  2. Högerklicka (Windows) eller kontroll-klicka (Macintosh) på en eller flera resurser i antingen plats- eller favoritlistan, välj Kopiera till plats och välj målplatsens namn från undermenyn med alla platser som du har definierat.
    Obs!

    I favoritlistan kan du kopiera en Favoriter-mapp samt enskilda resurser.

    Resurserna kopieras till motsvarande platser på målplatsen. Dreamweaver skapar nya mappar i målplatsens hierarki vid behov. Resurserna läggs även till i målplatsens favoritlista.

    Obs!

    Om resursen som du kopierade är en färg eller URL-adress visas den bara i målplatsens favoritlista. Eftersom färger och URL-adresser inte motsvarar filer finns det ingen fil som kan kopieras till den andra platsen.

Mer

Få hjälp snabbare och enklare

Ny användare?

Snabblänkar

Visa alla dina planer Hantera dina planer
Visa snabblänkar
Dölj snabblänkar

Juridiska meddelanden    |    Onlinesekretesspolicy