Redigera kod i designvyn

Senast uppdaterad den 27 apr. 2021

Läs det här avsnittet om du vill lära dig hur du använder egenskapsinspektören för att redigera kod i designvyn i Adobe Dreamweaver.

Dreamweaver låter dig visuellt skapa och redigera webbsidor utan att behöva oroa dig för den underliggande källkoden, men det finns tillfällen då du kanske behöver redigera koden för större kontroll eller för att felsöka din webbsida. Dreamweaver låter dig redigera viss kod medan du arbetar i designvyn.

Det här avsnittet är utformat för personer som föredrar att arbeta i designvyn, men som också vill ha snabb åtkomst till koden.

Markera underordnade taggar i designvyn

Om du väljer ett objekt i designvyn som innehåller underordnade taggar—till exempel en HTML-tabell—kan du snabbt välja den första underordnade taggen för det objektet genom att välja Redigera > Välj underordnad.

Obs!

Det här kommandot är endast tillgängligt i designvyn.

Till exempel har <table>-taggen normalt <tr> underordnade taggar. Om du väljer en <table>-tagg i taggväljaren kan du välja den första raden i tabellen genom att välja Redigera > Välj underordnad. Dreamweaver väljer den första <tr>-taggen i taggväljaren. Eftersom <tr>-taggen själv har underordnade taggar, nämligen <td>-taggar, väljer Dreamweaver den första cellen i tabellen när du väljer Redigera > Välj underordnad igen.

Redigera kod med egenskapskontrollen

Du kan använda egenskapsinspektören för att inspektera och redigera attributen för text eller objekt på din sida. Egenskaperna som visas i egenskapsinspektören motsvarar i allmänhet attribut för taggar; att ändra en egenskap i egenskapsinspektören har i allmänhet samma effekt som att ändra motsvarande attribut i kodvyn.

Obs!

Både tagginspektören och egenskapsinspektören låter dig visa och redigera en taggs attribut. Tagginspektören låter dig visa och redigera vartenda attribut som är kopplat till en given tagg. Egenskapsinspektören visar endast de vanligaste attributen, men ger en rikare uppsättning kontroller för att ändra dessa attributs värden, och låter dig redigera vissa objekt (som tabellkolumner) som inte motsvarar specifika taggar.

Klicka i texten eller markera ett objekt på sidan.

Egenskapsinspektören för texten eller objektet visas under dokumentfönstret. Om egenskapsinspektören inte är synlig väljer du Fönster > Egenskaper.

Ändra i attributen i egenskapskontrollen.

Redigera CFML med egenskapskontrollen

Använd egenskapsinspektören för att inspektera och ändra ColdFusion-kod i designvyn.

I egenskapsinspektören klickar du på knappen Attribut för att redigera taggens attribut eller för att lägga till nya.
Om taggen innehåller innehåll mellan sina öppnings- och stängningstaggar klickar du på knappen Innehåll för att redigera innehållet.

Knappen Innehåll visas endast om den valda taggen inte är en tom tagg (det vill säga om den har både en öppnings- och en stängningstagg).

Om taggen innehåller ett villkorligt uttryck gör du ändringar i det i rutan Uttryck.

Quick Tag Editor – översikt

Du använder snabbtaggredigeraren för att snabbt inspektera, infoga och redigera HTML-taggar utan att lämna designvyn.

Om du skriver ogiltig HTML i snabbtaggredigeraren försöker Dreamweaver korrigera den åt dig genom att infoga avslutande citattecken och avslutande vinkelparenteser där det behövs.

För att ställa in alternativen för snabbtaggredigeraren öppnar du snabbtaggredigeraren genom att trycka på Ctrl+T (Windows) eller Cmd+T (Macintosh).

Quick Tag Editor har tre lägen:

  • Läget Infoga HTML används för att infoga ny HTML-kod.
  • Läget Redigera tagg används för att ändra en befintlig tagg.
  • Läget Infoga HTML används för att infoga ny HTML-kod.

  • Läget Redigera tagg används för att ändra en befintlig tagg.

  • Läget Kapsla in tagg är till för att kapsla in den aktuella markeringen med en tagg.

Obs!

Vilket läge Quick Tag Editor öppnar beror på den aktuella markeringen i designvyn.

I alla tre lägen är grundproceduren för att använda Quick Tag Editor densamma: öppna redigeraren, ange eller ändra taggar och attribut och stäng sedan redigeraren.

Du kan bläddra genom lägena genom att trycka på Ctrl + T (Windows) eller Kommando + T (Macintosh) när Quick Tag Editor är aktivt.  

Redigera kod med snabbredigeraren

Använd snabbredigeraren (Redigera > Snabbredigerare) för att snabbt infoga och redigera HTML-taggar utan att lämna designvyn.

Infoga en HTML-tagg

I designvyn klickar du på sidan för att placera infogningspunkten där du vill infoga kod.
Tryck på Ctrl + T (Windows) eller Kommando + T (Macintosh).

Quick Tag Editor öppnas i läget Infoga HTML.

Snabbredigeraren i läget Infoga HTML
Snabbredigeraren i läget Infoga HTML

Ange HTML-taggen och tryck på Enter.

Taggen infogas i din kod, tillsammans med en matchande avslutande tagg om tillämpligt.

Tryck på Esc för att avsluta utan att göra några ändringar.

Redigera en HTML-tagg

Markera ett objekt i designvyn.

Du kan också välja den tagg du vill redigera från taggväljaren längst ned i dokumentfönstret. Mer information finns i Redigera kod med taggväljaren.

Tryck på Ctrl + T (Windows) eller Kommando + T (Macintosh).

Quick Tag Editor öppnas i läget Redigera tagg.

Ange nya attribut, redigera befintliga attribut eller redigera taggens namn.
Tryck på Tab för att gå framåt från ett attribut till nästa, tryck på Skift+Tab för att gå bakåt.
Obs!

Som standard tillämpas ändringarna på dokumentet när du trycker på Tab eller Skift+Tab.

För att stänga Quick Tag Editor och tillämpa alla ändringarna trycker du på Retur.
Om du vill avsluta utan att göra några fler ändringar trycker du på Esc.

Omslut den aktuella markeringen med HTML-taggar

Välj oformaterad text eller ett objekt i designvyn.
Obs!

Om du markerar text eller ett objekt som innehåller en inledande eller avslutande HTML-tagg öppnas Ändra taggtext i läget Redigera tagg istället för i läget Kapsla in tagg.

Tryck på Ctrl+T (Windows) eller Kommando+T (Macintosh) eller klicka på knappen Quick Tag Editor i egenskapsinspektören.

Quick Tag Editor öppnas i läget Kapsla in tagg.

Ange en enda öppningstagg, till exempel strong, och tryck på Retur (Windows) eller Return (Macintosh).

Taggen infogas i början av den aktuella markeringen och en matchande sluttagg infogas i slutet.

Om du vill avsluta utan att göra några ändringar trycker du på Esc.

Använd tipsmenyn i Quick Tag-redigeraren

Snabbtaggredigeraren innehåller en attributtipsmeny som listar alla giltiga attribut för taggen du redigerar eller infogar.

Du kan också inaktivera hintmenyn eller justera fördröjningen innan menyn dyker upp i Quick Tag Editor.

För att se en hintmeny som listar giltiga attribut för en tagg pausar du kort medan du redigerar ett attributnamn i Quick Tag Editor. En hintmeny visas som listar alla giltiga attribut för taggen du redigerar.

På samma sätt kan du se en hintmeny som listar giltiga taggnamn genom att pausa kort medan du anger eller redigerar ett taggnamn i Quick Tag Editor.

Obs!

Inställningarna för kodtips i Quick Tag Editor styrs av de vanliga inställningarna för kodtips.Mer information finns i Ange inställningar för kodningsförslag.

Gör något av följande:
  • Börja skriva in ett tagg- eller attributnamn. Valet i menyn Kodningsförslag hoppar till det första objektet som börjar med bokstäverna du skrev.

  • Använd uppåt- och nedåtpilarna för att markera ett objekt.

  • Använd rullningslisten för att hitta ett objekt.

Tryck på Retur för att infoga det valda objektet eller dubbelklicka på ett objekt för att infoga det.
För att stänga menyn med förslag utan att infoga ett objekt trycker du på Escape eller fortsätter att skriva.

Inaktivera hintmenyn eller ändra fördröjningen innan den visas

Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Macintosh) och välj Kodtips.

Dialogrutan Inställningar för kodtips visas.

För att inaktivera menyn för kodtips avmarkerar du alternativet Aktivera kodtips.

Redigera kod med taggväljaren

Du kan använda taggväljaren för att markera, redigera eller ta bort taggar utan att gå ur designvyn. Taggväljaren finns i statusfältet längst ned i dokumentfönstret och visar en rad taggar.

Redigera eller ta bort en tagg

Klicka i dokumentet.

Taggarna som gäller vid infogningspunkten visas i taggväljaren.

Högerklicka (Windows) eller Ctrl-klicka (Macintosh) på en tagg i taggväljaren.
Om du vill redigera en tagg väljer du Redigera tagg på menyn. Gör dina ändringar i Quick Tag Editor.Mer information finns i Redigera kod med Quick Tag Editor.
Om du vill ta bort en tagg väljer du Ta bort tagg på menyn.

Välj ett objekt som motsvarar en tagg

Klicka i dokumentet.

Taggarna som gäller vid infogningspunkten visas i taggväljaren.

Klicka på en tagg i taggväljaren.

Objektet som taggen representerar markeras på sidan.

Obs!

Använd den här tekniken för att välja enskilda tabellrader (tr-taggar) eller celler (td-taggar).

Skriv och redigera skript i designvyn

Du kan arbeta med JavaScript och VBScript på klientsidan i både kod- och designvy på följande sätt:

  • Skriv ett JavaScript- eller VBScript-skript för din sida utan att lämna designvyn.

  • Skapa en länk i ditt dokument till en extern skriptfil utan att lämna designvyn.

  • Redigera ett skript utan att lämna designvyn.

    Innan du börjar väljer du Visa > Visuella hjälpmedel > Osynliga element för att säkerställa att skriptmarkörer visas på sidan.

Skriva ett klientskript

Placera infogningspunkten där du vill ha skriptet.

Välj Infoga > HTML > Skript.

Markera skriptet i filvalsfönstret.

Obs!

Du behöver inte inkludera de inledande eller avslutande script-taggarna.

Script-taggen för den markerade filen infogas i dokumentet.

Redigera ett skript

Markera skriptmarkören.
Klicka på knappen Redigera i egenskapskontrollen.

Skriptet visas i dialogrutan Skriptegenskaper.

Om du länkade till en extern skriptfil öppnas filen i kodvy, där du kan göra dina redigeringar.

Obs!

Om det finns kod mellan skripttaggarna öppnas dialogrutan Skriptegenskaper även om det också finns en länk till en extern skriptfil.

I rutan Språk anger du antingen JavaScript eller VBScript som språk för skriptet.
I popup-menyn Typ anger du typen av skript, antingen på klientsidan eller serversidan.
(Valfritt) I rutan Källa anger du en externt länkad skriptfil.

Klicka på mappikonen eller knappen Bläddra för att markera en fil eller skriv in sökvägen.

Redigera skriptet och klicka på OK.

Redigera ASP-skript på serversidan i designvy

Använd egenskapsinspektören för ASP-skript för att granska och ändra ASP-skript på serversidan i designvy.

I designvy väljer du den visuella ikonen för server-språktagg.
I ASP-Skript Property inspector klickar du på knappen Redigera.
Redigera ASP-serverskriptet och klicka på OK.

Redigera skript på sidan med egenskapsinspektören

I Egenskapsinspektören väljer du skriptspråket från popup-menyn Språk, eller skriver ett språknamn i rutan Språk.
Obs!

Om du använder JavaScript och är osäker på versionen, välj JavaScript snarare än JavaScript1.1 eller JavaScript1.2.

I popup-menyn Typ anger du typen av skript, antingen på klientsidan eller på serversidan.

(Valfritt) I rutan Källa anger du en externt länkad skriptfil. Klicka på mappikonen för att markera filen eller skriv in sökvägen.

Klicka på Redigera för att ändra skriptet.

Använd JavaScript-beteenden

Du kan enkelt koppla JavaScript-beteenden (på klientsidan) till sidelement genom att använda fliken Beteenden i Tagginspektorn.Mer information finns i Applying built‑in JavaScript behaviors Dreamweaver.