- Användarhandbok för Dreamweaver
- Introduktion
- Dreamweaver och Creative Cloud
- Arbetsytor och vyer i Dreamweaver
- Skapa webbplatser
- Om Dreamweaver-platser
- Skapa en lokal version av din webbplats
- Ansluta till en publiceringsserver
- Ställa i ordning en testserver
- Importera och exportera inställningarna för en Dreamweaver-plats
- För över befintliga webbplatser från en fjärrserver till din lokala platsrot
- Tillgänglighetsfunktioner i Dreamweaver
- Avancerade inställningar
- Ange platsinställningar för överföring av filer
- Ange proxyserverinställningar i Dreamweaver
- Synka inställningarna för Dreamweaver med Creative Cloud
- Använda Git i Dreamweaver
- Hantera filer
- Layout och design
- CSS
- Förstå Cascading Style Sheets (CSS)
- Utforma sidor med hjälp av CSS Designer
- Använda CSS-förbehandlare i Dreamweaver
- Ange CSS-formatinställningar i Dreamweaver
- Flytta CSS-regler i Dreamweaver
- Konvertera infogad CSS till en CSS-regel i Dreamweaver
- Arbeta med div-taggar
- Använda övertoningar på bakgrunden
- Skapa och redigera CSS3-övergångseffekter i Dreamweaver
- Formatera kod
- Sidinnehåll och resurser
- Ange sidegenskaper
- Ange CSS-rubrikegenskaper och CSS-länkegenskaper
- Arbeta med text
- Sök och ersätt text, taggar och attribut
- DOM-panel
- Redigera i live-vyn
- Koda dokument i Dreamweaver
- Markera och visa element i dokumentfönstret
- Ange textegenskaper i egenskapskontrollen
- Stavningskontrollera en webbsida
- Använda vågräta linjer i Dreamweaver
- Lägga till och ändra teckensnittskombinationer i Dreamweaver
- Arbeta med resurser
- Infoga och uppdatera datum i Dreamweaver
- Skapa och hantera favoritresurser i Dreamweaver
- Infoga och redigera bilder i Dreamweaver
- Lägga till medieobjekt
- Lägga till videor i Dreamweaver
- Infoga HTML5-video
- Infoga SWF-filer
- Lägga till ljudeffekter
- Infoga HTML5-ljud i Dreamweaver
- Arbeta med biblioteksobjekt
- Använda arabisk och hebreisk text i Dreamweaver
- Länkar och navigering
- jQuery-widgetar och effekter
- Koda webbplatser
- Om kodning i Dreamweaver
- Kodningsmiljön i Dreamweaver
- Ange kodningspreferenser
- Anpassa kodfärger
- Skriva och redigera kod
- Kodtips och kodkomplettering
- Komprimera och utöka kod
- Återanvända kod med fragment
- Granska kod
- Optimera kod
- Redigera kod i designvyn
- Arbeta med head-innehåll för sidor
- Infoga SSI i Dreamweaver
- Använda taggbibliotek i Dreamweaver
- Importera egna taggar i Dreamweaver
- Använda JavaScript-beteenden (allmänna instruktioner)
- Använda inbyggda JavaScript-beteenden
- Om XML och XSLT
- Utföra XSL-omvandlingar på servern i Dreamweaver
- Utföra XSL-omvandlingar på klienten i Dreamweaver
- Lägga till teckenentiteter för XSLT i Dreamweaver
- Formatera kod
- Arbetsflöden mellan produkter
- Installera och använda tillägg i Dreamweaver
- Uppdateringar i appen i Dreamweaver
- Infoga Microsoft Office-dokument i Dreamweaver (endast Windows)
- Använda Fireworks och Dreamweaver
- Redigera innehåll på Dreamweaver-webbplatser med Contribute
- Integrering mellan Dreamweaver och Business Catalyst
- Skapa anpassade e-postkampanjer
- Mallar
- Om Dreamweaver-mallar
- Känna igen mallar och mallbaserade dokument
- Skapa en Dreamweaver-mall
- Skapa ändringsbara regioner i mallar
- Skapa upprepande regioner och tabeller i Dreamweaver
- Använd valfria regioner i mallar
- Definiera redigerbara taggattribut i Dreamweaver
- Skapa kapslade mallar i Dreamweaver
- Redigera, uppdatera och ta bort mallar
- Exportera och importera XML-innehåll i Dreamweaver
- Lägga till eller ta bort en mall från ett befintligt dokument
- Redigera innehåll i Dreamweaver-mallar
- Syntaxregler för malltaggar i Dreamweaver
- Ange markeringsinställningar för mallområden
- Fördelar med att använda mallar i Dreamweaver
- Mobiler och flera skärmar
- Dynamiska webbplatser, sidor och webbformulär
- Förstå webbprogram
- Konfigurera datorn för programutveckling
- Felsöka databasanslutningar
- Ta bort anslutningsskript i Dreamweaver
- Utforma dynamiska sidor
- Översikt över källor med dynamiskt innehåll
- Definiera källor med dynamiskt innehåll
- Lägga till dynamiskt innehåll på sidor
- Ändra dynamiskt innehåll i Dreamweaver
- Visa databasposter
- Ange och felsöka livedata i Dreamweaver
- Lägga till anpassade serverbeteenden i Dreamweaver
- Bygga formulär med Dreamweaver
- Använda formulär för att samla in information från användarna
- Skapa och aktivera ColdFusion-formulär i Dreamweaver
- Skapa webbformulär
- Förbättrat HTML5-stöd för formulärelement
- Använda Dreamweaver för att utveckla ett formulär
- Bygga program visuellt
- Bygga huvud- och detaljsidor i Dreamweaver
- Bygga sök- och resultatsidor
- Bygga en postinmatningssida
- Bygga en postuppdateringssida i Dreamweaver
- Bygga postborttagningssidor i Dreamweaver
- Förändra en databas med hjälp av ASP-kommandon i Dreamweaver
- Bygga en registreringssida
- Bygga en inloggningssida
- Bygga en sida som bara behöriga användare har åtkomst till
- Skydda mappar i ColdFusion med Dreamweaver
- Använda ColdFusion-komponenter i Dreamweaver
- Testa, förhandsgranska och publicera webbplatser
- Felsökning
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å.
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.
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.