Lees hoe Dreamweaver de verschillende coderingstalen ondersteunt die worden gebruikt om websites te maken.
De populairste programmeertalen om volledig functionele websites te ontwerpen en ontwikkelen zijn HTML, HTML5 en CSS voor de front-end en PHP, JavaScript, Java en jQuery voor de back-end.
U kunt het uiterlijk van een website (bijvoorbeeld lettertypen en kleuren) voor een hele website ontwerpen met CSS. U kunt vervolgens HTML gebruiken om afbeeldingen, tekst, video's, formulieren en andere inhoud invoegen om een samenhangende webpagina te maken.
Met CSS en HTML samen kunt u een statische site maken. Voor de meeste websites is echter wel de een of andere vorm van interactie vereist (zoals voor het invullen van een formulier of het doen van een betaling door een klant) en een database om alle websitegegevens in op te slaan.
Als u deze back-end-communicatiekanalen wilt maken, hebt u een programmeertaal aan de serverzijde nodig (zoals PHP) die met de database communiceert.
Programmeertalen die door Dreamweaver worden ondersteund
Naast mogelijkheden voor tekstbewerking biedt Adobe Dreamweaver verschillende functies, zoals codetips, om je te helpen coderen in de volgende talen:
- HTML
- PHP
- CSS
- JavaScript
Andere talen, zoals Perl, worden niet ondersteund door de taalspecifieke coderingsfuncties in Dreamweaver; je kunt bijvoorbeeld Perl-bestanden maken en bewerken, maar codehints zijn niet van toepassing op die taal.
Automatische codewijzigingen
Je kunt opties instellen die Dreamweaver instrueren om automatisch je handgeschreven code op te schonen volgens criteria die je opgeeft. Je code wordt echter niet herschreven tenzij de opties voor herschrijven van code zijn ingeschakeld of je een actie uitvoert die de code wijzigt. Dreamweaver wijzigt bijvoorbeeld je witruimte niet of verandert de schrijfwijze van kenmerken niet, tenzij je de opdracht Bronopmaak toepassen gebruikt.
Enkele van deze opties voor het herschrijven van code zijn standaard ingeschakeld.
De Roundtrip HTML-mogelijkheden in Dreamweaver laten je toe om je documenten heen en weer te verplaatsen tussen een tekstgebaseerde HTML-editor en Dreamweaver met weinig of geen effect op de content en structuur van de oorspronkelijke HTML-broncode van het document. Enkele van deze mogelijkheden zijn:
U kunt een teksteditor van derden gebruiken om het huidige document te bewerken.
Standaard brengt Dreamweaver geen wijzigingen aan in code die is gemaakt of bewerkt in andere HTML-editors, zelfs als de code ongeldig is, tenzij je opties voor herschrijven van code inschakelt.
Dreamweaver wijzigt geen tags die het niet herkent—inclusief XML-tags—omdat het geen criteria heeft om ze te beoordelen. Als een niet-herkende tag een andere tag overlapt (bijvoorbeeld <MyNewTag><em>text</MyNewTag></em>), markeert Dreamweaver dit als een fout maar herschrijft de code niet.
Optioneel kun je Dreamweaver instellen om ongeldige code te markeren in Codeweergave (in geel).Wanneer je een gemarkeerde sectie selecteert, toont het eigenschappenvenster informatie over hoe je de fout kunt corrigeren.
XHTML-code
Dreamweaver genereert nieuwe XHTML-code en schoont bestaande XHTML-code op op een manier die voldoet aan de meeste XHTML-vereisten. De Tools die je nodig hebt om te voldoen aan de weinige XHTML-vereisten die overblijven, worden ook geleverd.
Enkele vereisten gelden ook voor verschillende versies van HTML.
In de volgende tabel worden de XHTML-vereisten beschreven waaraan Dreamweaver automatisch voldoet:
XHTML-vereiste |
Acties die Dreamweaver uitvoert |
|---|---|
Er moet een DOCTYPE-declaratie in het document staan vóór het basiselement en de declaratie moet verwijzen naar een van de drie Document Type Definition (DTD)-bestanden voor XHTML (strict, transitional of frameset). |
Er wordt een XHTML DOCTYPE toegevoegd aan een XHTML-document. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Of als het XHTML-document een frameset heeft: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
Het basiselement van het document moet html zijn, en het html-element moet de XHTML-namespace aanwijzen. |
Voegt het namespace-attribuut toe aan het html-element, als volgt: <html xmlns="http://www.w3.org/1999/xhtml"> |
Een standaarddocument moet de head-, title- en body-structuurelementen hebben. Een framesetdocument moet de head-, title- en frameset-structuurelementen hebben. |
In een standaarddocument bevat de head-, title- en body-elementen. In een framesetdocument bevat de head-, title- en frameset-elementen. |
Alle elementen in het document moeten correct worden genest. <p>Dit is een <i>slecht voorbeeld.</p></i> <p>Dit is een <i>goed voorbeeld.</i></p> |
Genereert correct geneste code en corrigeert bij het opschonen van XHTML de nesting in code die niet door Dreamweaver is gegenereerd. |
Alle element- en attribuutnamen moeten kleine letters zijn. |
Zorgt ervoor dat HTML-element- en attribuutnamen kleine letters zijn in de XHTML-code die wordt gegenereerd en bij het opschonen van XHTML, ongeacht je voorkeuren voor tag- en attribuutletters. |
Elk element moet een afsluitende tag hebben, tenzij het als EMPTY wordt gedeclareerd in de DTD. |
Voegt afsluitende tags in de code die wordt gegenereerd en bij het opschonen van XHTML. |
Lege elementen moeten een afsluitende tag hebben, of de openende tag moet eindigen met />. Bijvoorbeeld, <br> is niet geldig; de juiste vorm is <br></br> of <br/>.De volgende elementen zijn leeg: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta en param. En voor achterwaartse compatibiliteit met browsers die geen XML ondersteunen, moet er een spatie staan voor de /> (bijvoorbeeld <br />, niet <br/>). |
Voegt lege elementen in met een spatie voor de afsluitende slash in lege tags in de code die wordt gegenereerd, en bij het opschonen van XHTML. |
Attributen kunnen niet worden geminimaliseerd. Zo is <td nowrap> niet geldig; de juiste vorm is <td nowrap="nowrap">. Dit beïnvloedt de volgende attributen: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly, en selected. |
Voegt volledige attribuut-waardeparen in de code die wordt gegenereerd en bij het opschonen van XHTML. Opmerking: Als een HTML-browser geen ondersteuning biedt voor HTML 4, kan het falen bij het interpreteren van deze Boolean-attributen wanneer ze in hun volledige vorm verschijnen. |
Alle attribuutwaarden moeten omgeven zijn door aanhalingstekens. |
Plaatst aanhalingstekens rond attribuutwaarden in de code die wordt gegenereerd en bij het opschonen van XHTML. |
De volgende elementen moeten een id-attribuut hebben evenals een name-attribuut: a, applet, form, frame, iframe, img, en map. Bijvoorbeeld, <a name="intro">Introduction</a> is niet geldig; de juiste vorm is <a id="intro">Introduction</a> of <a id="section1" name="intro"> Introduction</a>. |
Stelt de name- en id-attributen in op dezelfde Waarde, wanneer het name-attribuut wordt ingesteld door een Property inspector, in de code die Dreamweaver genereert, en bij het opschonen van XHTML. |
Voor attributen met waarden van een enumerated type, moeten de waarden kleine letters zijn. Een enumerated type-waarde is een waarde uit een gespecificeerde lijst van toegestane waarden; bijvoorbeeld, het align-attribuut heeft de volgende toegestane waarden: center, justify, left, en right. |
Zorgt ervoor dat enumerated type-waarden kleine letters zijn in de code die wordt gegenereerd en bij het opschonen van XHTML. |
Alle script- en style-elementen moeten een type-attribuut hebben. (Het type-attribuut van het script-element is vereist sinds HTML 4, toen het language-attribuut werd afgeschaft.) |
Stelt de type- en language-attributen in script-elementen in, en het type-attribuut in style-elementen, in de code die het genereert en bij het opschonen van XHTML. |
Alle img- en area-elementen moeten een alt-attribuut hebben. |
Stelt deze attributen in de code die het genereert in en rapporteert bij het opschonen van XHTML ontbrekende alt-attributen. |
Reguliere expressies
Reguliere expressies zijn patronen die tekencombinaties in tekst beschrijven. Gebruik ze in je zoakopdrachten in code om concepten te beschrijven zoals regels die beginnen met "var" en attribuutwaarden die een getal bevatten.
De volgende tabel toont de speciale tekens in reguliere expressies, hun betekenissen en gebruiksvoorbeelden. Om te zoeken naar tekst die een van de speciale tekens in de tabel bevat, escape het speciale teken door er een backslash voor te plaatsen. Om bijvoorbeeld te zoeken naar het werkelijke sterretje in de zin some conditions apply*, kan je zoekpatroon er zo uitzien: apply\*. Als je het sterretje niet escapet, vind je alle exemplaren van "apply" (evenals "appl", "applyy" en "applyyy"), niet alleen die gevolgd door een sterretje.
Teken |
Vindt |
Voorbeeld |
|---|---|---|
^ |
Begin van invoer of regel. |
^T komt overeen met "T" in "This good earth" maar niet in "Uncle Tom's Cabin" |
$ |
Einde van invoer of regel. |
h$ komt overeen met "h" in "teach" maar niet in "teacher" |
* |
Het voorgaande teken nul of meerdere malen. |
um* komt overeen met 'um' in 'rum', 'umm' in 'yummy' en 'u' in 'huge' |
+ |
Het voorgaande teken één of meerdere malen. |
um+ komt overeen met 'um' in 'rum' en 'umm' in 'yummy' maar niets in 'huge' |
? |
Het voorafgaande teken hooguit één keer (dat wil zeggen, geeft aan dat het voorafgaande teken optioneel is). |
st?on komt overeen met 'son' in 'Johnson' en 'ston' in 'Johnston' maar niets in 'Appleton' of 'tension' |
. |
Eén teken behalve een nieuwe regel. |
.an komt overeen met 'ran' en 'can' in de zin 'bran muffins can be tasty' |
x|y |
x of y. |
FF0000|0000FF komt overeen met "FF0000" in bgcolor="#FF0000" en "0000FF'" in font color="#0000FF" |
{n} |
Het voorgaande teken komt exact het opgegeven aantal keren (n) voor. |
o{2} komt overeen met "oo" in "loom" en de eerste twee o's in "mooooo" maar niets in "money" |
{n,m} |
Minstens n en hooguit m voorkomens van het voorafgaande teken. |
F{2,4} komt overeen met "FF" in "#FF0000" en de eerste vier F's in #FFFFFF |
[abc] |
Elk van de tekens tussen de vierkante haken. Specificeer een reeks tekens met een koppelteken (bijvoorbeeld [a-f] is gelijk aan [abcdef]). |
[e-g] komt overeen met 'e' in 'bed', 'f' in 'folly' en 'g' in 'guard' |
[^abc] |
Elk teken dat niet tussen de haakjes staat. Specificeer een reeks tekens met een koppelteken (bijvoorbeeld [^a-f] is gelijk aan [^abcdef]). |
[^aeiou] komt in eerste instantie overeen met "r" in "orange", "b" in "book" en "k" in "eek!" |
\b |
Een woordgrens (zoals een spatie of regeleinde). |
\bb komt overeen met "b" in "book" maar niets in "goober" of "snob" |
\B |
Alles behalve een woordgrens. |
\Bb komt overeen met 'b' in 'goober' maar niets in 'book' |
\d |
Elk cijfer. Equivalent met [0-9]. |
\d komt overeen met "3" in "C3PO" en "2" in "apartment 2G" |
\D |
Een teken dat geen cijfer is. Equivalent met [^0-9]. |
\D komt overeen met "S" in "900S" en "Q" in "Q45" |
\f |
Nieuwe pagina. |
|
\n |
Nieuwe regel. |
|
\r |
Regeleinde. |
|
\s |
Elk witruimteteken, inclusief spatie, tab, paginaeinde of regeleinde. |
\sbook komt overeen met "book" in "blue book" maar niets in "notebook" |
\S |
Eén niet-witruimteteken. |
\Sbook komt overeen met "book" in "notebook" maar niets in "blue book" |
\t |
Een tab. |
|
\w |
Een alfanumeriek teken, met inbegrip van het onderstrepingsteken. Equivalent met [A-Za-z0-9_]. |
b\w* komt overeen met "barking" in "the barking dog" en zowel "big" als "black" in "the big black dog" |
\W |
Elk niet-alfanumeriek teken. Equivalent aan [^A-Za-z0-9_]. |
\W komt overeen met "&" in "Jake&Mattie" en "%" in "100%" |
Control+Enter of Shift+Enter (Windows), of Control+Return of Shift+Return of Command+Return (Macintosh) |
Enter-teken. Zorg ervoor dat je de optie Whitespace-verschillen negeren uitschakelt bij het zoeken hiernaar, als je geen reguliere expressies gebruikt.Houd er rekening mee dat dit overeenkomt met een specifiek teken, niet met het algemene begrip van een regeleinde; het komt bijvoorbeeld niet overeen met een <br>-tag of een <p>-tag. Enter-tekens worden in de ontwerpweergave weergegeven als spaties, niet als regeleinden. |
Gebruik haakjes om groeperingen binnen de reguliere expressie te markeren waarnaar later wordt verwezen.Gebruik vervolgens $1, $2, $3, enzovoort in het veld Vervangen door om te verwijzen naar de eerste, tweede, derde en latere groeperingen binnen haakjes.
In het vak Zoeken naar, om te verwijzen naar een groepering binnen haakjes eerder in de reguliere expressie, gebruik je \1, \2, \3, enzovoort in plaats van $1, $2, $3.
Bijvoorbeeld, zoeken naar (\d+)\/(\d+)\/(\d+) en vervangen door $2/$1/$3 wisselt de dag en maand om in een datum gescheiden door slashes, waardoor Amerikaanse datums worden omgezet naar Europese datums.
Code voor servergedrag
Wanneer je een dynamische pagina ontwikkelt en een server behavior selecteert uit het paneel Server Behaviors, voegt Dreamweaver een of meer codeblokken in je pagina in om de server behavior te laten werken.
Als je handmatig de code binnen een codeblok wijzigt, kun je niet langer panelen zoals de panelen Bindings en Server Behaviors gebruiken om de server behavior te bewerken.Dreamweaver zoekt naar specifieke patronen in de paginacode om server behaviors te detecteren en weer te geven in het paneel Server Behaviors.Als je de code van een codeblok op welke manier dan ook wijzigt, kan Dreamweaver de server behavior niet langer detecteren en weergeven in het paneel Server Behaviors.Echter, de server behavior bestaat nog steeds op de pagina en je kunt deze bewerken in de codomgeving in Dreamweaver.
Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.
