Användarhandbok Avbryt

Skapa och öppna filer

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

 

 

Skapa, öppna, redigera, spara och återställ filer i Dreamweaver. Skapa mallar och öppna relaterade filer.

Dreamweaver har en flexibel miljö för arbete med olika webbdokument. Förutom HTML-dokument kan du skapa och öppna olika textbaserade dokument, till exempel JavaScript, PHP och CSS (Cascading Style Sheets).

Dreamweaver har flera sätt att skapa ett nytt dokument. Du kan skapa följande:

  • Ett nytt tomt dokument eller en ny tom mall

  • Ett dokument baserat på en av de fördesignade sidlayouterna i Dreamweaver, bland andra fler än 30 CSS-baserade sidlayouter

  • Ett dokument baserat på en av dina mallar

    Du kan också ange dokumentinställningar. Om du till exempel vanligtvis arbetar med en viss typ av dokument kan du ange den som standarddokumenttyp för nya sidor som du skapar.

    Du anger enkelt dokumentegenskaper som metataggar, dokumentrubrik, bakgrundsfärger och andra sidegenskaper i designvyn eller kodvyn.

Dreamweaver-filtyper

Du kan arbeta med olika filtyper i Dreamweaver. Den filtyp som du oftast arbetar med är HTML-filer. HTML-filer – eller Hypertext Markup Language-filer – innehåller det taggbaserade språk som visar webbsidor i en webbläsare. Du sparar HTML-filer med något av filtilläggen .html eller .htm. Dreamweaver sparar som standard filerna med filtillägget .html.

I Dreamweaver kan du skapa och redigera HTML5-baserade webbsidor. Det finns även startlayouter som kan användas för att skapa HTML5-sidor helt från början.

Nedan visas några andra vanliga filtyper i Dreamweaver:

CSS

Filer av typen Cascading Style Sheet har filtillägget .css. De används för att formatera HTML-innehåll och styr placeringen av sidelement.

GIF

Filer av typen Graphics Interchange Format har filtillägget .gif. GIF-formatet är ett populärt webbgrafikformat för teckningar, logotyper, grafik med genomskinliga områden och animeringar. GIF-filer innehåller högst 256 färger.

JPEG

Filer av typen Joint Photographic Experts (uppkallade efter organisationen som skapade formatet) har filtillägget .jpg, och är vanligtvis fotografier eller bilder med tusentals färger. JPEG-formatet är bäst för digitala eller inlästa fotografier, bilder som använder textur, bilder med gradvisa färgövergångar och alla bilder som kräver fler än 256 färger.

XML

Filer av typen Extensible Markup Language har filtillägget .xml. De innehåller data i obearbetat format som kan formateras med XSL (Extensible Stylesheet Language).

Dialogrutan Nytt dokument

I dialogrutan Nytt dokument visas alla dokumentfiltyper som stöds, bl.a. PHP, XML och SVG.

Du har också tillgång till fördefinierade layouter, mallar och ramverk via den här dialogrutan.

Obs!

Alla startlayouter som finns är skapade så att de stöder responsiva webbplatser och är kompatibla med HTML-5.

Skapa en HTML-layout utifrån en tom sida

Du kan skapa en sida som innehåller en fördesignad CSS-layout, eller först skapa en helt tom sida och sedan skapa en egen layout.

  1. Klicka på Arkiv > Nytt.

  2. I kategorin Nytt dokument väljer du den sorts sida du vill skapa i kolumnen Dokumenttyp. Välj till exempel HTML om du vill skapa en normal HTML-sida.

  3. Markera en dokumenttyp på snabbmenyn DocType. I de flesta fall kan du använda standardvalet, HTML5.

  4. Välj ytterligare alternativ beroende på vilken typ av sida som du vill skapa.

    • Ingen: Välj det här alternativet om du vill skapa en enkel webbsida utan att använda något ramverk.
    • Bootstrap: Bootstrap-mallar är fördefinierade layouter som använder Bootstrap-ramverk. Välj det här alternativet om du vill skapa responsiva webbsidor med Bootstrap-ramverk. Som standard skapas ett Bootstrap 4.0.0-dokument.
    Obs!

    Om du tänker skapa responsiva webbsidor väljer du Bootstrap-ramverket.

  5. Om du inte använder ett ramverk:

    • Dokumentrubrik: Ange din dokumentrubrik i det här fältet. Dreamweaver lägger automatiskt till den i dokumentets <head>-avsnitt.
    • Dokumenttyp: Markera en dokumenttyp på snabbmenyn Dokumenttyp. I de flesta fall kan du använda standardvalet, HTML5.

    Om du markerar en av XHTML-dokumenttypsdefinitionerna på menyn Dokumenttyp blir sidan XHTML-kompatibel. Du kan till exempel göra ett HTML-dokument XHTML-kompatibelt genom att välja XHTML 1.0 Transitional eller XHTML 1.0 Strict på menyn. XHTML (Extensible Hypertext Markup Language) är en omformulering av HTML till ett XML-program. Vanligtvis får du del av fördelarna med XML när du använder XHTML, och samtidigt ser du till att webbdokumenten blir bakåt- och framåtkompatibla.

    Obs!

    Mer information om XHTML finns på webbplatsen för WC (World Wide Web Consortium) som innehåller specifikationerna för XHTML – modulbaserad XHTML (www.w3.org/TR/xhtml11/) och XHTML 1.0 (www.w3c.org/TR/xhtml1/), samt på XHTML-validerarplatser för webbaserade filer (http://validator.w3.org/) och lokala filer (http://validator.w3.org/file-upload.html).

    • Koppla CSS: Koppla en befintlig CSS-layout till sidan.  Om du vill göra det klickar du på ikonen Koppla formatmall  bredvid rutan Koppla CSS och väljer en CSS-formatmall.
    Skapa en ny HTML-sida utan att använda ett ramverk
    Skapa en ny HTML-sida utan att använda ett ramverk

    Om du vill skapa en ny sida som baseras på din Photoshop-komposition, väljer du Använd Extract för att skapa en sida med Photoshop-kompositioner. 

    Om du väljer det här alternativet öppnas panelen Extract, där du kan överföra en PSD-fil och komma igång med att skapa en HTML-sida.

  6. Om du vill skapa en responsiv webbsida med Bootstrap-ramverket:

    • Bootstrap CSS: Välj det här för att skapa en ny Bootstrap-CSS eller använda en befintlig CSS-fil. Om du använder en befintlig CSS-fil anger du sökvägen till filen. Se till att CSS-filen finns i platsens rotmapp.
    • Koppla CSS: Koppla en befintlig CSS-layout till sidan.  Om du vill göra det klickar du på ikonen Koppla formatmall  bredvid rutan Koppla CSS och väljer en CSS-formatmall.
    • Ta med en fördefinierad layout: Välj det här alternativet om du redan har en layout. Klicka på Anpassa om du vill redigera stödraster- och brytpunktsvärden.
    Skapa en ny HTML-sida med Bootstrap-ramverket
    Skapa en ny HTML-sida med Bootstrap-ramverket

    Om du vill skapa en ny sida som baseras på din Photoshop-komposition, väljer du Använd Extract för att skapa en sida med Photoshop-kompositioner. 

    Om du väljer det här alternativet öppnas panelen Extract, där du kan överföra en PSD-fil och komma igång med att skapa en HTML-sida.

  7. Klicka på Inställningar om du vill ange standardinställningar för dokumentet, till exempel dokumenttyp, kodning och filtillägg.

  8. Klicka på Skapa.

  9. Spara det nya dokumentet (Arkiv > Spara).

  10. Gå till mappen där du vill spara filen i dialogrutan som visas.
    Obs!

    Vi rekommenderar att du sparar filen på en Dreamweaver-plats.

  11. Skriv filens namn i rutan Filnamn.

    Undvik att använda mellanslag och specialtecken i namn på filer och mappar, och låt inte filnamnet börja med en siffra. Använd i synnerhet inte specialtecken (till exempel é, ç eller ¥) och skiljetecken (till exempel kolon, snedstreck och punkter) i namn på filer som du tänker spara på en server. Många servrar ändrar tecknen när de läggs upp, och då fungerar inte länkarna till filerna.

Skapa en tom mall

Använd dialogrutan Nytt dokument om du vill skapa Dreamweaver-mallar. Som standard sparas mallarna i mappen Mallar på din plats.

Obs!

Du kan inte skapa en mall utan att skapa en plats först. Mer information om platser, och hur du skapar en plats, finns i Om Dreamweaver-platser.

  1. Klicka på Arkiv > Nytt.

  2. Välj kategorin Webbplatsmallar i dialogrutan Nytt dokument.

  3. Markera en dokumenttyp på snabbmenyn DocType. I de flesta fall ska du låta standardmarkeringen XHTML 1.0 Transitional vara kvar.

    Om du markerar en av XHTML-dokumenttypsdefinitionerna på menyn DocType (DTD) blir sidan XHTML-kompatibel. Du kan till exempel göra ett HTML-dokument XHTML-kompatibelt genom att välja XHTML 1.0 Transitional eller XHTML 1.0 Strict på menyn. XHTML (Extensible Hypertext Markup Language) är en omformulering av HTML till ett XML-program. Vanligtvis får du del av fördelarna med XML när du använder XHTML, och samtidigt ser du till att webbdokumenten blir bakåt- och framåtkompatibla.

    Obs!

    Mer information om XHTML finns på webbplatsen för WC (World Wide Web Consortium) som innehåller specifikationerna för XHTML – modulbaserad XHTML (www.w3.org/TR/xhtml11/) och XHTML 1.0 (www.w3c.org/TR/xhtml1/), samt på XHTML-validerarplatser för webbaserade filer (http://validator.w3.org/) och lokala filer (http://validator.w3.org/file-upload.html).

  4. Välj Uppdatera sida när mallen ändras om du vill att sidan ska uppdateras automatiskt när du redigerar mallen.

  5. Klicka på Skapa.

  6. Spara det nya dokumentet (Arkiv > Spara). Om du inte har lagt till ändringsbara områden i mallen ännu visas en dialogruta med meddelandet att det inte finns några ändringsbara områden i dokumentet. Stäng dialogrutan genom att klicka på OK.

  7. I dialogrutan Spara som väljer du en plats där du vill spara mallen.

  8. Skriv den nya mallens namn i textrutan Filnamn. Du behöver inte ange ett filtillägg för mallens namn. När du klickar på Spara får den nya mallen filtillägget .dwt, och sparas i mappen Mallar på din plats.

    Undvik att använda mellanslag och specialtecken i namn på filer och mappar, och låt inte filnamnet börja med en siffra. Använd i synnerhet inte specialtecken (till exempel é, ç eller ¥) och skiljetecken (till exempel kolon, snedstreck och punkter) i namn på filer som du tänker spara på en server. Många servrar ändrar tecknen när de läggs upp, och då fungerar inte länkarna till filerna.

Skapa en sida baserad på en mall

Du kan välja, förhandsgranska och skapa ett nytt dokument med hjälp av en av dina befintliga mallar eller startmallarna i Dreamweaver. Du kan antingen använda dialogrutan Nytt dokument för att välja en mall från någon av de Dreamweaver-definierade platserna, eller också kan du använda resurspanelen för att skapa ett nytt dokument med en befintlig mall.

Skapa ett dokument baserat på en mall

  1. Klicka på Arkiv > Nytt.

  2. Välj kategorin Sida från mall i dialogrutan Nytt dokument.

  3. Välj den Dreamweaver-plats som innehåller den mall som du vill använda i kolumnen Plats och välj sedan en mall i listan till höger.

  4. Avmarkera Uppdatera sida när mallen ändras om du inte vill uppdatera sidan varje gång du gör ändringar i den mall som sidan baseras på.

  5. Klicka på Inställningar om du vill ange standardinställningar för dokumentet, till exempel dokumenttyp, kodning och filtillägg.

  6. Klicka på Hämta mer innehåll om du vill öppna Dreamweaver Exchange, där du kan hämta mer innehåll för siddesign.

  7. Klicka på Skapa och spara dokumentet (Arkiv > Spara).

Skapa ett dokument med en mall i resurspanelen

  1. Öppna resurspanelen (Fönster > Resurser), om den inte redan har öppnats.

  2. Klicka på ikonen Mallar  till vänster i resurspanelen för att visa listan över mallar på den aktuella platsen.

    Obs!

    Om du precis har skapat den mall som du vill använda kan du behöva klicka på knappen Uppdatera för att den ska visas.

  3. Högerklicka (Windows) eller kontroll-klicka (Macintosh) på den mall som du vill använda och välj sedan Nytt från mall.

    Dokumentet öppnas i dokumentfönstret.

  4. Spara dokumentet.

Skapa en sida baserad på en startmall i Dreamweaver

Dreamweaver innehåller flera professionellt utformade startfiler för mobilprogram. Du kan använda de här exempelfilerna som utgångspunkt för att utforma sidor på dina platser.

När du skapar ett dokument baserat på en startmall skapar Dreamweaver en kopia av filen så att du inte skriver över startfilerna.

Du kan förhandsgranska en exempelfil och läsa en kort beskrivning av ett dokuments designelement i dialogrutan Nytt dokument.

  1. Klicka på Arkiv > Nytt.

  2. Välj kategorin Startmallar i dialogrutan Nytt dokument.

    Startmallar i Dreamweaver
    Startmallar i Dreamweaver

    Du kan se exempelsidans detaljer och visualisering på panelens högra sida när du väljer de olika alternativen.

  3. Klicka på Skapa.

    Det nya dokumentet och alla dess tillhörande filer öppnas i dokumentfönstret.

  4. Spara dokumentet (Arkiv > Spara).

Skapa nya kodfiler för olika kodningsspråk

Du kan skapa kodfiler för ett antal olika kodningsspråk i Dreamweaver.

Mer information om stöd för kodning i Dreamweaver finns i Om kodning i Dreamweaver.

Följ anvisningarna nedan om du vill skapa en ny kodfil i Dreamweaver:

  1. Välj Arkiv > Nytt dokument.

  2. Välj den kodfil som du vill skapa från dokumenttypen.

  3. Välj den sorts dokument som du vill skapa i kolumnen Dokumenttyp (till exempel en PHP-fil).

    Skapa en ny PHP-sida
    Skapa en ny PHP-sida

  4. Beroende på vilken filtyp du väljer är ytterligare alternativ tillgängliga när du skapar ett dokument. 

    Om du till exempel skapar en PHP-fil kan du välja DocType-alternativ och vissa CSS-alternativ.

  5. Klicka på Skapa. Spara sedan dokumentet (Arkiv > Spara).

Spara och återställa dokument

Du kan spara ett dokument med samma namn och på samma plats, eller spara ett kopia av det med ett annat namn och på en annan plats.

Obs!

Undvik mellanslag och specialtecken i fil- och mappnamn när du ger filer namn. Använd i synnerhet inte specialtecken (till exempel é, ç eller ¥) och skiljetecken (till exempel kolon, snedstreck och punkter) i namn på filer som du tänker spara på en server. Många servrar ändrar tecknen när de läggs upp, och då fungerar inte länkarna till filerna. Inled heller inte filnamn med siffror.

Spara ett dokument

  1. Gör något av följande:
    • Skriv över den aktuella versionen på disken och spara de ändringar du har gjort genom att välja Arkiv > Spara.
    • Välj Arkiv > Spara som om du vill spara filen i en annan mapp eller med ett annat namn.
  2. Gå till mappen där du vill spara filen i dialogrutan Spara som.

  3. Skriv filens namn i textrutan Filnamn.

  4. Klicka på Spara för att spara filen.

Spara alla öppna dokument

  1. Välj Arkiv > Spara allt.

  2. Om några öppna dokument inte har sparats visas dialogrutan Spara som för vart och ett av dem.

    Gå till mappen där du vill spara filen i dialogrutan som visas.

  3. Skriv filens namn i rutan Filnamn och klicka på Spara.

Återgå till den senast sparade versionen av ett dokument

  1. Välj Arkiv > Återgå.

    Du får en fråga om du inte vill spara ändringarna utan återgå till den tidigare sparade versionen.

  2. Klicka på Ja om du vill återgå till den tidigare versionen och på Nej om du vill behålla ändringarna.

    Obs!

    Om du sparar ett dokument och sedan avslutar Dreamweaver går det inte att återgå till den tidigare versionen av dokumentet då du startar om Dreamweaver.

Ange standarddokumenttypen och kodningspreferenser

Om de flesta sidorna på platsen har en specifik filtyp (som HTML, PHP eller JavaScript), kan du ange dokumentinställningar som automatiskt skapar nya dokument med den angivna filtypen.

  1. Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Macintosh).

    Obs!

    Du kan också klicka på knappen Inställningar i dialogrutan Nytt dokument om du vill ange dokumentinställningar när du skapar ett nytt dokument.

  2. Klicka på Nytt dokument i kategorilistan till vänster.

  3. Ange eller ändra inställningar efter behov och klicka på OK för att spara dem.

    Standarddokument

    Välj en dokumenttyp som ska användas för de sidor du skapar.

    Standardtillägg

    Ange det filtillägg du vill använda (.htm eller .html) för de nya HTML-sidor som du skapar.

    Obs! Det här alternativet är inaktiverat för andra filtyper.

    Standarddokumenttyp (DDT)

    Välj en av XHTML-dokumenttypsdefinitionerna (DTD) för att göra nya sidor XHTML-kompatibla. Du kan till exempel göra ett HTML-dokument XHTML-kompatibelt genom att välja XHTML 1.0 Transitional eller XHTML 1.0 Strict på menyn.

    Standardkodning

    Ange den kodning som ska användas när den nya sidan skapas och när ett dokument som inte anger någon kodning öppnas.

    Om du väljer Unicode (UTF‑8) som dokumentkodning behövs ingen entitetskodning, eftersom alla tecken kan representeras i UTF-8 utan problem. Om du väljer någon annan dokumentkodning kan vissa tecken behöva representeras genom entitetskodning. Mer information om teckenentiteter finns på www.w3.org/TR/REC-html40/sgml/entities.html.

    Om du väljer Unicode (UTF-8) som standardkodning kan du inkludera en byteordningsmarkering (Byte Order Mark – BOM) i dokumentet genom att markera alternativet Inkludera Unicodesignatur (BOM).

    En BOM är två till fyra byte i början av en textfil som identifierar filen som Unicode och anger byteordningen för efterföljande byte. Eftersom UTF-8 saknar byteordning är det valfritt att lägga till en BOM med UTF-8-format. I formaten UTF-16 och UTF-32 är det obligatoriskt.

    Normaliseringsformat för Unicode

    Välj ett av följande alternativ om du använder Unicode (UTF-8) som standardkodning.

    Det finns fyra normaliseringsformat för Unicode. Det viktigaste är normaliseringsformat C, eftersom det är det vanligaste formatet som används i teckenmodellen för webben. Adobe tillhandahåller de tre övriga normaliseringsformaten för Unicode för fullständighets skull.

    Visa dialogrutan Nytt dokument när Ctrl+N trycks ned

    Avmarkera det här alternativet (”när Kommando+N trycks ned” för Macintosh) för att automatiskt skapa ett dokument av standarddokumenttyp när du använder snabbkommandot.

    I Unicode finns det tecken som liknar varandra till utseendet, men som kan lagras i dokumentet på olika sätt. Tecknet ”ë” (e med trema) kan till exempel representeras som ett enda tecken, ”e-omljud”, eller som två tecken, ”vanligt e i latinkodning” + ”omljud”. Ett kombinationstecken i Unicode är ett tecken som är kopplat till det föregående, så omljudet visas ovanför latinskt e. Bägge formerna ger samma resultat, men vad som sparas i filen är olika för varje form.

    Normalisering är processen för att se till att alla tecken som kan sparas i olika format, sparas i samma format. Alla ”ë”-tecken i dokumentet sparas alltså som ”e-omljud” eller som ”e” + ”omljud”. Bägge formerna används inte i samma dokument.

    Mer information om Unicode-normalisering och de särskilda former du kan använda finns på Unicode-webbplatsen på www.unicode.org/reports/tr15.

Öppna och redigera befintliga dokument

Du kan öppna ett befintligt webbsidesdokument eller ett textbaserat dokument, oavsett om det har skapats i Dreamweaver eller inte, och redigera det i antingen designvyn eller kodvyn.

Om det dokument du öppnar är en Microsoft Word-fil som har sparats som ett HTML-dokument, kan du använda Verktyg > Rensa Word-HTML för att ta bort de extrataggar som Word infogar i HTML-filer.

Om du vill rensa HTML eller XHTML som inte har genererats av Microsoft Word använder du Verktyg > Rensa HTML. Mer information finns i Rensa Microsoft Word HTML-filer.

Du kan också öppna textfiler som inte är HTML, till exempel JavaScript-filer, XML-filer, CSS-formatmallar eller textfiler som har sparats i ordbehandlare eller textredigerare.

  1. Välj Arkiv > Öppna.

    Obs!

    Du kan också använda filpanelen för att öppna filer.

  2. Navigera till den fil som du vill öppna och markera den.
    Obs!

    Om du inte redan har gjort det, är det en bra idé att ordna filer som du planerar att öppna och redigera på en Dreamweaver-plats, i stället för att öppna dem från någon annan plats. Mer information om Dreamweaver-platser finns i Om Dreamweaver-platser.

  3. Klicka på Öppna.

    Dokumentet öppnas i dokumentfönstret. JavaScript, text och CSS-formatmallar öppnas som standard i kodvyn. Du kan uppdatera dokumentet medan du arbetar i Dreamweaver och sedan spara ändringarna i filen.

Med Dreamweaver kan du visa filer som relateras till huvuddokumentet, utan att fokus försvinner från huvuddokumentet. Om du till exempel har CSS- och JavaScript-filer kopplade till ett huvuddokument, kan du visa och redigera dessa relaterade filer i dokumentfönstret samtidigt som huvuddokumentet visas.

Mer information om dynamiskt relaterade filer finns i Öppna dynamiskt relaterade filer.

Obs!

När du arbetar med HTML-filer och vill göra snabba ändringar i relaterade CSS-, JavaScript- eller PHP-filer utan att behöva navigera till den filen, kan du använda Snabbredigering. Mer information finns i Snabbredigering.

I Dreamweaver visas som standard namnen på alla filer som relateras till ett huvuddokument i verktygsfältet Relaterade filer under huvuddokumentets rubrik. Ordningen på knapparna i verktygsfältet följer ordningen på länkarna för de relaterade filerna som finns i varje huvuddokument.

Obs!

Om en relaterad fil saknas, visas ändå motsvarande knapp i verktygsfältet Relaterade filer. Om du klickar på knappen visas inget i Dreamweaver.

Dreamweaver stöder följande typer av relaterade filer:

  • Skriptfiler på klientsidan
  • SSI (server-side includes)
  • Externa CSS-formatmallar (inklusive kapslade formatmallar)

Gör något av följande:

  • Gå till verktygsfältet Relaterade filer högst upp i dokumentet och klicka på filnamnet på den relaterade fil som du vill öppna.

  • I verktygsfältet Relaterade filer högerklickar du på filnamnet på den relaterade fil som du vill öppna och väljer Öppna som separat fil på snabbmenyn. När du öppnar en relaterad fil på det här sättet visas inte huvuddokumentet samtidigt.

  1. Placera insättningspunkten på en rad eller i ett område som du vet påverkas av en relaterad fil.

  2. Vänta tills indikatorn för kodnavigatören visas och klicka sedan på den så att kodnavigatören öppnas.

  3. Hovra över objekten i kodnavigatören om du vill visa mer information om dem. Om du till exempel vill ändra en viss CSS-färgegenskap, men inte vet vilken regel den finns i, kan du hitta egenskapen genom att hovra över de regler som finns i kodnavigatören.

  4. Klicka på objektet som du är intresserad av för att öppna motsvarande relaterad fil.

Gå tillbaka till källkoden i huvuddokumentet

  1. Klicka på knappen Källkod i verktygsfältet Relaterade filer.

När du öppnar en relaterad fil från designvyn eller vyerna kod och design (delad vy) visas den relaterade filen i en delad vy.

Du kan välja Visa > Dela och välja bland de olika alternativen för delad vy om du vill anpassa den delade vyn.

Om du bara vill visa de relaterade filerna i kodvyn väljer du Kod högst upp i verktygsfältet.

Obs!

I vyn Standardkod kan du inte visa relaterade dokument samtidigt som huvuddokumentets källkod.

Obs!

Kodvyn i visningsalternativen gäller huvuddokumentets källkod. Om du till exempel väljer Visa > Kodvyn överst, visas källkoden för huvuddokumentet i den övre halvan av dokumentfönstret. Om du väljer Visa > Kodvyn till vänster, visas källkoden för huvuddokumentet till vänster i dokumentfönstret.

När du öppnar en HTML-fil visas de relaterade filerna på olika flikar som standard. Om du vill inaktivera den här funktionen kan du göra det via panelen Inställningar.

  1. Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Macintosh).

  2. Avmarkera Aktivera relaterade filer i kategorin Allmänt.

Funktionen för dynamiskt relaterade filer förstärker funktionen för relaterade filer genom att visa relaterade filer för dynamiska sidor i verktygsfältet Relaterade filer. Funktionen visar också de många dynamiska inkluderingar som krävs för att skapa körbar kod för vanliga PHP CMS-ramverk som WordPress, Drupal och Joomla!

Du måste ha tillgång till en lokal PHP-programserver eller fjärr-PHP-programserver där WordPress, Drupal eller Joomla! körs för att kunna använda funktionen för dynamiskt relaterade filer. En vanlig metod för test av sidor är att ställa in en lokal värd-PHP-programserver och sedan testa sidorna lokalt.

Innan du testar sidorna måste du göra följande:

  • Konfigurera en Dreamweaver-plats och fylla i textrutan för webb-URL i dialogrutan Platskonfiguration.

  • Konfigurera en PHP-programserver.

    Obs! Servern måste startas innan du kan arbeta med dynamiskt relaterade filer i Dreamweaver.

  • Installera WordPress, Drupal eller Joomla! på programservern. Mer information finns på:

  • Definiera en lokal mapp i Dreamweaver där de hämtade CMS-filerna ska placeras och redigeras.

  • Definiera platsen för de installerade WordPress-, Drupal- och Joomla-filerna som din fjärr- och testmapp.

  • Hämta CMS-filerna från fjärrmappen.

När du öppnar en sida som är kopplad till funktionen för dynamiskt relaterade filer kan filerna identifieras automatiskt i Dreamweaver. Du kan också identifiera filerna manuellt (det gör du genom att klicka på en länk i informationsfältet ovanför sidan). Standardinställningen är manuell identifiering.

  1. Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Macintosh).

  2. Kontrollera att alternativet Aktivera relaterade filer är markerat i kategorin Allmänt.

  3. Markera Manuellt eller Automatiskt på snabbmenyn Dynamiskt relaterade filer. Du kan också inaktivera identifieringen genom att markera Inaktiverat.

  1. Öppna en sida som har kopplats till funktionen för dynamiskt relaterade filer, t.ex. platsrotsidan index.php på en WordPress-, Drupal- eller Joomla!-plats.

  2. Om filerna identifieras manuellt (standardinställningen) klickar du på länken Identifiera i informationsfältet ovanför sidan i dokumentfönstret.

    Om identifieringen av dynamiskt relaterade filer har aktiverats automatiskt visas en lista över dynamiskt relaterade filer i verktygsfältet Relaterade filer.

De relaterade och dynamiskt relaterade filerna i verktygsfältet Relaterade filer visas i följande ordning:

  • Statiskt relaterade filer (relaterade filer som inte behöver hanteras dynamiskt)
  • Externt relaterade filer (.css- och .js-filer) som är kopplade till inkluderingsfiler på en server med dynamiska sökvägar
  • Inkluderingsfiler på en server med dynamiska sökvägar (.php-, .inc- och .module-filer)

Eftersom relaterade filer och dynamiskt relaterade filer ofta kan vara många kan du filtrera relaterade filer i Dreamweaver för att på så sätt lättare hitta filerna du söker efter.

  1. Öppna en sida som har kopplats till relaterade sidor.

  2. Identifiera dynamiskt relaterade filer om det behövs.

  3. Klicka på ikonen Filtrera relaterade filer till höger i verktygsfältet Relaterade filer.

  4. Markera filtyperna du vill visa i verktygsfältet Relaterade filer. I Dreamweaver markeras som standard alla relaterade filer.

  5. Skapa ett eget filter genom att klicka på ikonen Filtrera relaterade filer och välja Eget filter.

    I dialogrutan Eget filter går det bara att filtrera med hjälp av exakta filnamn (format.css), filtillägg (.php) och uttryck med jokertecken (*meny*). Du kan filtrera med hjälp av flera uttryck med jokertecken genom att avgränsa varje uttryck med ett semikolon (t.ex. format.css;*.js;*tpl.php).

Obs!

Filterinställningarna sparas inte när du stänger filen.

Rensa Microsoft Word HTML-filer

Du kan öppna dokument som har sparats i Microsoft Word (Microsoft Word 97 och senare) som HTML-filer och sedan använda Verktyg > Rensa Word-HTML för att ta bort den extra HTML-kod som genereras av Word.

Den kod som Dreamweaver tar bort används främst av Word för att formatera och visa dokument i Word och behövs egentligen inte för att visa HTML-filen.

Behåll en säkerhetskopia av den ursprungliga Word-filen (.doc), eftersom du kanske inte kan öppna HTML-dokumentet i Word igen när du har rensat HTML-filen.

Obs!

Om du vill rensa HTML eller XHTML som inte har genererats av Microsoft Word använder du kommandot Verktyg > Rensa HTML.

  1. Spara Microsoft Word-dokumentet som en HTML-fil.
    Obs!

    I Windows stänger du filen i Word för att undvika ett delningsfel.

  2. Öppna HTML-filen i Dreamweaver.

    Visa den HTML-kod som har genererats av Word genom att växla till kodvyn (Visa > Kod).

  3. Välj Verktyg > Rensa Word-HTML.

    Obs!

    Om Dreamweaver inte kan identifiera vilken version av Word som har använts för att spara filen, väljer du den korrekta versionen på snabbmenyn.

  4. Markera (eller avmarkera) alternativ för rensning. De inställningar du anger sparas som standardinställningar för rensning.

    Dreamweaver använder rensningsinställningarna för HTML-dokumentet och en logg över ändringarna visas (om du inte har avmarkerat det alternativet i dialogrutan).

    Alternativ för att rensa Microsoft Word HTML
    Alternativ för att rensa Microsoft Word HTML

    Ta bort alla Word-specifika taggar

    Tar bort all Microsoft Word-specifik HTML-kod, inklusive XML från HTML-taggar, anpassade Word-metadata och länktaggar i dokumenthuvudet, Word-specifik XML-kod, villkorsstyrda taggar med innehåll samt tomma stycken och marginaler från format. Du kan välja alla de här alternativen enskilt med hjälp av fliken Detaljerad.

    Rensa CSS

    Tar bort alla Word-specifik CSS-kod, inklusive infogade CSS-format när det är möjligt (där det överordnade formatet har samma formategenskaper), formatattribut som börjar med ”mso”, formatdeklarationer som inte är CSS, CSS-formatattribut från tabeller samt alla oanvända formatdefinitioner från huvudet. Du kan anpassa det här alternativet ytterligare på fliken Detaljerad.

    Rensa <font>-taggar

    Tar bort HTML-taggar och konverterar standardbrödtexten till HTML-text med storlek 2.

    Rätta till felaktigt kapslade taggar

    Tar bort de typsnittstaggar som har infogats av Word utanför stycke- och rubriktaggarna (blocknivå).

    Använd källkodsformatering

    Använder de källformateringsalternativ som du anger i inställningarna för HTML-format och i SourceFormat.txt i dokumentet.

    Visa resultatsammanfattning

    Visar en varningsruta med information om ändringarna som gjorts i dokumentet så fort rensningen är klar.

  5. Klicka på OK eller klicka på fliken Detaljerad om du vill anpassa alternativen Ta bort alla Word-specifika taggar och Rensa CSS ytterligare och klicka sedan på OK.

Liknande innehåll

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    |    Sekretesspolicy online