Användarhandbok Avbryt

Om kodning i Dreamweaver

  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 om hur Dreamweaver stöder de olika kodspråk som används för att skapa webbplatser.

De vanligaste programmeringsspråken för att utforma och utveckla webbplatser med full funktionalitet är HTML, HTML5 och CSS för gränssnittet och PHP, JavaScript, Java och jQuery för back end-funktionerna.

Du kan anpassa utseendet för en hel webbplats (till exempel teckensnitt och färger) med hjälp av CSS. Sedan kan du använda HTML för att infoga bilder, text, videoklipp, formulär och andra innehållselement till en enhetlig webbsida.

Om du använder CSS och HTML tillsammans kan du skapa en statisk webbplats. För de flesta webbplatser krävs dock någon form av interaktion (till exempel formulär som kunderna ska fylla i, eller att kunden gör en betalning) och en databas där alla webbplatsdata lagras.

För att kunna skapa den här back end-kommunikationen behöver du ett programmeringsspråk på serversidan, som PHP, som kommunicerar med databasen.

Programmeringsspråk som kan användas med Dreamweaver

Utöver funktioner för textredigering innehåller Adobe Dreamweaver flera olika funktioner, som t.ex. kodningstips, för att hjälpa dig att koda följande språk:

  • HTML
  • PHP
  • CSS
  • JavaScript

Andra språk, som t.ex. Perl, stöds inte av de språkspecifika kodningsfunktionerna i Dreamweaver. Du kan t.ex. skapa och redigera Perl-filer, men kodningstipsen gäller inte för det språket.

Automatisk kodändring

Du kan ställa in alternativ som instruerar Dreamweaver att automatiskt rensa din handskrivna kod enligt kriterierna som du anger. Men koden skrivs dock aldrig om såvida inte alternativen för kodomskrivning är aktiverade eller om du utför en åtgärd som ändrar koden. Dreamweaver ändrar t.ex. inte tomma utrymmen eller skiftlägen för attribut såvida du inte använder kommandot Använd källformat.

Några av dessa alternativ för kodomskrivning aktiveras som standard.

Med Roundtrip HTML-funktionerna i Dreamweaver kan du flytta dokument fram och tillbaka mellan en textbaserad HTML-redigerare och Dreamweaver med liten eller ingen effekt på innehållet eller strukturen för dokumentets ursprungliga HTML-källkod. Dessa funktioner omfattar följande:

  • Använd en textredigerare från tredje part för att redigera det aktuella dokumentet.

  • Som standard ändrar inte Dreamweaver kod som skapats eller redigerats i andra HTML-redigerare, även om koden är ogiltig, såvida du inte aktiverar alternativ för kodomskrivning.

  • Dreamweaver ändrar inte taggar som det inte känner igen, inklusive XML-taggar, eftersom det inte har några kriterier att bedöma dem efter. Om en okänd tagg överlappar en annan tagg (till exempel <MinNyaTagg><em>text</MinNyaTagg></em>), markeras det som ett fel i Dreamweaver men koden skrivs inte om.

  • Om du vill kan du ställa in Dreamweaver på att markera ogiltig kod i kodvyn (i gult). När du väljer ett markerat avsnitt visar egenskapskontrollen information om hur du rättar till felet.

XHTML-kod

Dreamweaver skapar ny XHTML-kod och rensar befintlig XHTML-kod på ett sätt som uppfyller de flesta XHTML-kraven. Verktygen som de behöver för att uppfylla de fåtaliga XHTML-kraven som kvarstår finns också.

Obs!

Vissa av kraven är också obligatoriska i olika versioner av HTML.

I följande tabell beskrivs XHTML-kraven som Dreamweaver uppfyller automatiskt:

XHTML-krav

Åtgärder som Dreamweaver utför

Det måste finnas en DOCTYPE-deklaration i dokumentet före rotelementet och deklarationen måste hänvisa till en av de tre DTD-filerna (Document Type Definition) för XHTML (strikt, transitional eller ramuppsättning).

Lägger till en XHTML DOCTYPE i ett XHTML-dokument:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Eller om XHTML-dokumentet har en ramuppsättning:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Dokumentets rotelement måste vara html och html-elementet måste ange XHTML-namnområdet.

Lägger till namespace-attributet i html-elementet, enligt följande:

<html xmlns="http://www.w3.org/1999/xhtml">

Ett standarddokument måste innehålla strukturelementen head, title och body. Ett ramuppsättningsdokument måste innehålla strukturelementen head, title och frameset.

I ett standarddokument, inkluderar elementen head, title och body. I ett ramuppsättningsdokument, inkluderar elementen head, title och frameset.

Alla element i dokumentet måste kapslas ordentligt:

<p>Detta är ett <i>dåligt exempel.</p></i> <p>Detta är ett <i>bra exempel.</i></p>

Skapar korrekt kapslad kod och när XHTML rensas rättas kapslingen till i koden som inte skapades av Dreamweaver.

Alla element- och attributnamn måste vara i gemener.

Tvingar HTML-element och attributnamn att vara gemener i XHTML-koden som den skapar och när XHTML rensas, oavsett dina inställningar för skiftläge för taggar och attribut.

Varje element måste ha en avslutande tagg, såvida den inte deklareras i DTD-filen som TOM.

Infogar avslutande taggar i koden som den skapar och när XHTML rensas.

Tomma element måste ha en avslutande tagg eller så måste öppningstaggen sluta med />. Exempelvis är <br> inte giltig. Den korrekta formen är <br></br> eller <br/>. Följande är tomma element: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta och param.

För bakåtkompatibilitet med webbläsare som inte har XML-stöd måste det också finnas ett blanksteg före /> (till exempel <br />, inte <br/>).

Infogar tomma element med ett mellanslag före det avslutande snedstrecket i tomma taggar i koden som den skapar och när XHTML rensas.

Attribut kan inte minimeras. Till exempel är <td nowrap> inte giltigt, utan den korrekta formen är <td nowrap="nowrap">.

Detta påverkar följande attribut: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly och selected.

Infogar fullständiga attribut/värde-par i koden som den skapar och när XHTML rensas.

Obs! Om en HTML-webbläsare inte stöder HTML 4 kan den kanske inte tolka dessa booleska attribut när de visas i sin fullständiga form.

Alla attributvärden måste omslutas av citattecken.

Infogar citattecken runt attributvärden i koden som den skapar och när XHTML rensas.

Följande element måste ha ett id-attribut och ett name-attribut: a, applet, form, frame, iframe, img och map. Exempelvis är <a name="intro">Introduktion</a> inte giltig. Den korrekta formen är

<a id="intro">Introduktion</a> eller <a id="section1" name="intro"> Introduktion</a>.

Anger attributen name och id till samma värde när attributet name anges av en egenskapskontroll, i den kod som genereras av Dreamweaver samt när XHTML rensas.

För attribut med värden av en uppräknad typ måste värdena vara gemener.

Ett uppräknat typvärde är ett värde från en angiven lista med tillåtna värden. Attributet align har till exempel följande tillåtna värden: center, justify, left och right.

Tvingar uppräknade typvärden att vara gemener i koden som skapas och när XHTML rensas.

Alla skript- och formatelement måste ha ett type-attribut.

(type-attributet för script-elementet har varit obligatoriskt sedan HTML 4, när language-attributet slutade användas.)

Anger type- och language-attributen i script-element och type-attributet i style-element, i den kod som genereras samt vid rensning av XHTML.

Alla img- och area-element måste ha ett alt-attribut.

Anger dessa attribut i koden som genereras och rapporterar om alt-attribut saknas när XHTML rensas.

Reguljära uttryck

Reguljära uttryck är mönster som beskriver teckenkombinationer i texten. Använd dem i kodsökningar för att beskriva koncept som t.ex. rader som börjar med ”var” och attributvärden som innehåller ett nummer.

I följande tabell visas specialtecknen i reguljära uttryck, deras innebörd och exempel på användningsområden. Om du vill söka efter text som innehåller ett av dessa specialtecken i tabellen kan du kringgå specialtecknet genom att ha ett omvänt snedstreck före det. Om du till exempel vill söka efter den faktiska asterisken i uttrycket vissa villkor gäller*, kan sökmönstret se ut så här: gäller\*. Om du inte kringgår asterisken kommer du att hitta alla förekomster av ”gäller” (samt av ”gäll”, ”gällerr” och ”gällerrrr”), inte bara de som följs av en asterisk.

Tecken

Matchar

Exempel

^

Början av inmatning eller rad.

^D matchar ”D” i ”Den goda världen”, men inte i ”Anna och David”

$

Slutet av inmatning eller rad.

h$ matchar ”h” i ”usch”, men inte i ”aha”

*

Föregående tecken 0 eller fler gånger.

um* matchar ”um” i ”rum”, ”umm” i ”tumme” och ”u” i ”skjul”

+

Föregående tecken 1 eller fler gånger.

um+ matchar ”um” i ”rum”, ”umm” i ”tumme”, men inget i ”skjul”

?

Föregående tecken högst en gång (d.v.s. indikerar att föregående tecken är valfritt).

st?on matchar ”son” i ”Jonsson” och ”ston” i ”Johnston”, men inget i ”badminton” eller ”pension”

.

Ett enda tecken förutom nyradstecken.

.an matchar ”ran” och ”kan” i frasen ”eran kan vara lång”

x|y

Antingen x eller y.

FF0000|0000FF matchar "FF0000" i bgcolor="#FF0000" och "0000FF" i font color="#0000FF"

{n}

Exakt n förekomster av föregående tecken.

o{2} matchar ”oo” i ”boom” och de två första förekomsterna av o i ”mooooo”, men inget i ”moster”

{n,m}

Minst n och högst m förekomster av föregående tecken.

F{2,4} matchar ”FF” i ”#FF0000” och de fyra första F:en i #FFFFFF

[abc]

Något av tecknen inom parentes. Ange en intervall med tecken med ett bindestreck (t.ex. är [a-f] detsamma som [abcdef]).

[e-g] matchar ”e” i ”ben”, ”f” i ”fluga” och ”g” i ”gran”

[^abc]

Ett tecken som inte står inom parentes. Ange en intervall med tecken med ett bindestreck (t.ex. är [^a-f] detsamma som [^abcdef]).

[^aeiou] matchar först ”r” i ”orange”, ”b” i ”bok” och ”k” i ”stek”

\b

En ordgräns (t.ex. ett mellanslag eller en radretur).

\bb matchar ”b” i ”bok”, men inget i ”snubbe” eller ”snobb”

\B

Allt utom en ordgräns.

\Bb matchar ”b” i ”snubbe”, men inget i ”bok”

\d

En siffra. Motsvarar [0-9].

\d matchar ”3” i ”C3PO” och ”2” i ”lägenhet 2G”

\D

Ett tecken som inte är en siffra. Motsvarar [^0-9].

\D matchar ”S” i ”900S” och ”Q” i ”Q45”

\f

Formulärinmatning.

\n

Radinmatning.

\r

Radretur.

\s

Ett ett enda tomrumstecken, inklusive mellanslag, tabb, formulärinmatning eller radinmatning.

\sbok matchar ”bok” i ”blå bok”, men inget i ”dagbok”

\S

Ett enda tecken utan tomrum.

\Sbok matchar ”bok” i ”dagbok”, men inget i ”blå bok”

\t

En tabb.

\w

Ett alfanumeriskt tecken, inklusive understreck. Motsvarar [A-Za-z0-9_].

b\w* matchar ”brun” i ”brun hund” och både ”busig” och ”bråkig” i ”en busig och bråkig hund”

\W

Ett icke-alfanumeriskt tecken. Motsvarar [^A-Za-z0-9_].

\W matchar ”&” i ”Jake & Mattie” och ”%” in ”100 %”

Ctrl + Enter eller Skift + Enter (Windows) eller Kontroll + Retur eller Skift + Retur eller Kommando + Retur (Macintosh)

Returtecken. Se till att du avmarkerar alternativet Ignorera skillnader i mellanrum när du söker efter detta, om du inte använder reguljära uttryck. Observera att detta matchar ett visst tecken, inte det allmänna begreppet radbrytning. Det matchar till exempel inte en <br>- eller en <p>-tagg. Returtecken visas som mellanslag i designvyn, inte som radbrytningar.

Använd parenteser för att separera grupperingar i det reguljära uttrycket som ska hänvisas till senare. Använd sedan $1, $2, $3 o.s.v. i fältet Ersätt med för att hänvisa till den första, andra, tredje och senare överordnade grupperingar.

Obs!

I rutan Sök efter använder du \1, \2, \3 o.s.v. istället för $1, $2, $3 för att hänvisa till en överordnad gruppering tidigare i det reguljära uttrycket.

Om du t.ex. söker efter (\d+)\/(\d+)\/(\d+) och ersätter det med $2/$1/$3 byts dagen och månaden i ett datum ut och avgränsas med snedstreck och växlar därmed mellan amerikanska och europeiska datumformat.

Kod för serverbeteende

När du utvecklar en dynamisk sida och väljer en serverfunktion från panelen Serverfunktioner infogar Dreamweaver ett eller flera kodblock på sidan för att få serverfunktionen att fungera.

Om du ändrar koden i ett kodblock manuellt kan du inte längre använda paneler som t.ex. panelerna Bindningar och Serverfunktioner för att ändra serverfunktionen. Dreamweaver letar efter särskilda mönster i sidkoden för att upptäcka serverfunktioner och visa dem i panelen Serverfunktioner. Om du ändrar koden i ett kodblock på något sätt kan Dreamweaver inte längre upptäcka serverfunktionen och visa den i panelen Serverfunktioner. Serverfunktionen finns dock fortfarande på sidan och du kan ändra den i kodningsmiljön i Dreamweaver.

 Adobe

Få hjälp snabbare och enklare

Ny användare?

Adobe MAX 2024

Adobe MAX
Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX

Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX 2024

Adobe MAX
Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX

Kreativitetskonferensen

14–16 okt i Miami Beach och online