Als u de tags snel wilt vinden in de code, klikt u in de tabel en selecteert u de
-tag in de tagkiezer onder aan het documentvenster. Toegankelijkheidswaarden voor een tabel toevoegen of bewerken in ontwerpweergave Als u het tabelbijschrift wilt bewerken, markeert u het bijschrift en typt u een nieuw bijschrift.
de rechterkant. Als u de tabel verticaal wilt vergroten/verkleinen, versleept u de selectiegreep aan de onderkant. Als u de tabel horizontaal en verticaal wilt vergroten/verkleinen, versleept u de selectiegreep in de rechterbenedenhoek. Druk op Esc of klik buiten de tabel om de opmaakmodus voor de tabel in Live View af te sluiten. U kunt de menuopties Wijzigen > Tabel gebruiken om de tabel verder te wijzigen.
In Dreamweaver wordt de in de code vermelde breedte aangepast aan de visuele breedte. Alle ingestelde breedten of hoogten in een tabel wissen 1. Selecteer de tabel. 2. Voer een van de volgende handelingen uit: Selecteer Wijzigen > Tabel > Celbreedten wissen of Wijzigen > Tabel > Celhoogten wissen. Klik in de eigenschappencontrole (Venster > Eigenschappen) op de knop Rijhoogten of de knop Kolombreedten wissen .
Selecteer Wijzigen > Tabel > Rij invoegen, of selecteer Wijzigen > Tabel > Kolom invoegen. Er verschijnt boven de invoegpositie een rij, of er verschijnt links van de invoegpositie een kolom. Klik op het kolomkopmenu en selecteer vervolgens Kolom links invoegen of Kolom rechts invoegen. Meerdere rijen of kolommen toevoegen 1. Klik in een cel. 2. Selecteer Wijzigen > Tabel > Rijen of kolommen invoegen, vul het dialoogvenster in en klik op OK.
Naar boven Cellen samenvoegen en splitsen Gebruik de eigenschappencontrole of de opdrachten in het vervolgmenu Wijzigen > Tabel om cellen te splitsen of samen te voegen. Twee of meer cellen in een tabel samenvoegen 1. Selecteer de cellen op een aansluitende regel en in de vorm van een rechthoek. In de volgende afbeelding bestaat de selectie uit een rechthoek met cellen, zodat de cellen kunnen worden samengevoegd.
Aantal rijen of Aantal kolommen Hiermee geeft u op in hoeveel rijen of kolommen u de wilt splitsen. Het aantal rijen of kolommen dat een cel omspant vergroten of verkleinen Voer een van de volgende handelingen uit: Selecteer Wijzigen > Tabel > Rowspan vergroten of Wijzigen > Tabel > Colspan vergroten. Selecteer Wijzigen > Tabel > Rowspan verkleinen of Wijzigen > Tabel > Colspan verkleinen.
bestaande cellen met dezelfde opmaak als de cellen op het Klembord. (Als u bijvoorbeeld een blok van 3 x 2 cellen hebt gekopieerd of geknipt, kunt u een ander blok van 3 x 2 cellen selecteren om de cellen hier te plakken.) Als u een volledige rij cellen wilt plakken boven een bepaalde cel, klikt u op die cel. Als u een volledige kolom cellen links van een bepaalde cel wilt plakken, klikt u op die cel.
1. Selecteer de tabel of klik in een cel. 2. Selecteer Opdrachten > Tabel sorteren, stel de opties in het dialoogvenster in en klik op OK. Sorteren op Hier kunt u opgeven op welke kolomwaarden de tabelrijen moeten worden gesorteerd. Volgorde Hier kunt u opgeven of de kolom alfabetisch of numeriek en in oplopende (A tot en met Z, lage cijfers naar hoge cijfers) of aflopende volgorde moet worden gesorteerd. Selecteer Numeriek als een kolom cijfers bevat.
jQuery UI-widgets gebruiken in Dreamweaver In Dreamweaver CC en hoger zijn Spry-widgets vervangen door jQuery-widgets. U kunt de bestaande Spry-widgets op uw pagina nog steeds wijzigen, maar u kunt geen nieuwe Spry-widgets toevoegen. Widgets zijn kleine webtoepassingen die zijn geschreven in talen als DHTML en JavaScript en die kunnen worden ingevoegd en uitgevoerd in een webpagina.
Juridische kennisgevingen | Online privacybeleid 244
jQuery-effecten gebruiken in Dreamweaver In Dreamweaver CC zijn Spry-effecten vervangen door jQuery-effecten. U kunt de bestaande Spry-effecten op uw pagina nog steeds wijzigen, maar u kunt geen nieuwe Spry-effecten toevoegen. jQuery-effecten toevoegen Op gebeurtenissen gebaseerde jQuery-effecten jQuery-effecten verwijderen Naar boven jQuery-effecten toevoegen 1. Selecteer in de ontwerpweergave of codeweergave van uw Dreamweaver-document het element waarop u een jQuery-effect wilt toepassen. 2.
Wanneer u een jQuery-effect toepast, wordt het effect standaard toegewezen aan de gebeurtenis onClick. U kunt de gebeurtenis voor activering van het effect wijzigen met het deelvenster Gedrag. 1. Selecteer het gewenste pagina-element. 2. Klik in het deelvenster Venster > Gedrag op het pictogram Gebeurtenissen instellen weergeven. 3. Klik op de rij die overeenkomt met het effect dat momenteel is toegepast.
Kleuren Webveilige kleuren De kleurkiezer gebruiken Naar boven Webveilige kleuren In HTML worden kleuren uitgedrukt als hexadecimale waarden (bijvoorbeeld #FF0000) of als kleurnamen (rood). Een webveilige kleur is een kleur die er in Safari en Microsoft Internet Explorer hetzelfde uitziet, zowel op Windows- als Macintosh-systemen in de 256-kleurenmodus.
Juridische kennisgevingen | Online privacybeleid 248
CSS 249
Wat zijn CSS-stijlpagina's (Cascading Style Sheets) Over CSS (Cascading Style Sheets) Over CSS-regels Over CSS-stijlen Over tekstopmaak en CSS Over steno-CSS-eigenschappen Naar boven Over CSS (Cascading Style Sheets) Cascading Style Sheets (CSS) bestaan uit een verzameling opmaakregels die het uiterlijk van de inhoud op een webpagina bepalen. Bij het gebruik van CSS-stijlen voor de opmaak (indeling) van een pagina scheidt men de inhoud van de presentatie ervan.
In Dreamweaver kunt u de volgende typen stijlen definiëren: Klassenstijlen, waarmee u stijleigenschappen kunt toepassen op elk element of alle elementen op de pagina. Stijlen voor HTML-tags, waarmee de opmaak voor een bepaalde tag opnieuw definieert, zoals h1. Wanneer u een CSS-stijl voor de tag h1 maakt of wijzigt, wordt alle tekst die wordt opgemaakt met de tag h1, onmiddellijk bijgewerkt.
tekengrootte voor alineatekst (dat wil zeggen, tekst die tussen
-labels in de HTML-code staat) definiëren. In Internet Explorer wordt bijvoorbeeld alle standaardhoofdtekst, met inbegrip van alineatekst, standaard in Times New Roman, Normale grootte lettertype weergegeven. Als de auteur van een webpagina kunt u echter een stijlpagina maken die de standaardstijl van de browser voor het alinealettertype en de alineatekengrootte vervangt.
Ga naar www.adobe.com/go/vid0153 voor een zelfstudie over het opmaken van tekst met CSS. Naar boven Over steno-CSS-eigenschappen De CSS-specificatie staat toe dat u stijlen maakt met een verkorte syntaxis die steno-CSS wordt genoemd. Met steno-CSS kunt u de waarden van verschillende eigenschappen opgeven met één declaratie. Zo kunt u met de eigenschap font de eigenschappen font-style, font-variant, font-weight, font-size, line-height en font-family instellen voor een enkele regel.
Deelvenster CSS ontwerpen Het deelvenster CSS ontwerpen (Venster > CSS ontwerpen) is een CSS-eigenschappencontrole waarmee u 'visueel' CSS-stijlen en bestanden kunt maken en eigenschappen en mediaquery's kunt instellen. Bekijk de video De visuele CSS-editor in Dreamweaver gebruiken (8 min.) Deelvenster CSS ontwerpen Opmerking: U kunt Ctrl/Cmd+Z gebruiken om alle acties die u in CSS ontwerpen uitvoert, ongedaan te maken of Ctrl/Cmd+Y gebruiken om alle acties opnieuw toe te passen.
Sneltoetsen Pagina-elementen identificeren die zijn gekoppeld met een CSS-kiezer (13.1) Livemarkering uitschakelen Zie ook Pagina's opmaken met CSS CSS3-overgangseffecten Het deelvenster CSS ontwerpen bestaat uit de volgende deelvensters en opties: Alles Hier worden alle CSS, mediaquery's en kiezers in het huidige document worden weergegeven. Deze modus is niet gevoelig voor de selectie.
Het deelvenster CSS ontwerpen gebruiken Naar boven Stijlpagina's maken en koppelen 1.
document identificeert CSS ontwerpen de juiste kiezer en geeft deze weer (maximaal drie regels). Voer een van de volgende handelingen uit: Gebruik de toets pijl-omhoog of pijl-omlaag om de voorgestelde kiezer meer of minder specifiek te maken. Verwijder de voorgestelde regel en typ de gewenste kiezer. Zorg ervoor dat u de naam van de kiezer en de aanduiding voor Type kiezer invoert. Als u bijvoorbeeld een id opgeeft, moet u voor de naam van de kiezer een '#' plaatsen.
geplakt. De samenvoeging van alle kiezers wordt geplakt. Het kopiëren en plakken van stijlen kan ook worden gebruikt voor verschillende koppelingen van CSS-bestanden: Importeren, Koppelen, Inline stijlen.
Klik op de waarden en typ de vereiste waarde. Als u wilt dat alle vier waarden gelijk zijn en tegelijkertijd worden gewijzigd, klikt u op het koppelingspictogram ( ) in het midden. U kunt op elk moment specifieke waarden uitschakelen ( ) of verwijderen ( ). Zo kunt u de waarde voor de marge aan de linkerkant uitschakelen en de waarden voor de rechterkant, bovenkant en onderkant behouden.
Randkleur ingesteld op zwart voor alle zijden De code die is ingevoegd, is afhankelijk van de voorkeurinstelling voor de korte of de lange versie. Besturingselementen voor verwijderen en uitschakelen zijn ook weer beschikbaar in Dreamweaver CC 2014. U kunt nu de besturingselementen voor verwijderen en uitschakelen gebruiken op het niveau van de groep besturingselementen voor randen om deze acties op alle eigenschappen toe te passen.
Tijdens de controle worden de tabbladen gebruikt op basis van de prioriteit van de ingestelde tabbladen. De hoogste prioriteit is voor “Alle zijden”, gevolgd door “Boven”, “Rechts”, “Onder” en “Link”. Als bijvoorbeeld alleen de hoogste waarde voor een rand is ingesteld, wordt in de berekende modus de focus verplaatst naar het tabblad “Boven” en wordt “Alle zijden” genegeerd omdat het tabblad “Alle zijden” niet is ingesteld.
Naar boven Pagina-elementen identificeren die zijn gekoppeld met een CSSkiezer (13.1) Doorgaans is één CSS-kiezer gekoppeld aan meerdere pagina-elementen. Zo kan de tekst in het hoofdgedeelte, de koptekst en voettekst allemaal aan dezelfde CSS-kiezer worden gekoppeld. Wanneer u de eigenschappen van een CSS-kiezer gaat bewerken, heeft dit invloed op alle elementen die zijn gekoppeld aan de kiezer, waaronder de elementen die u niet wilt wijzigen.
Als u de blauwe markering rond de elementen wilt verwijderen, klikt u nogmaals op de kiezer. Opmerking: De volgende tabel geeft een overzicht van de scenario's waarin Livemarkering niet beschikbaar is. Modus Live code Livemarkering weergegeven? Code N.v.t. N.v.t. Ontwerp N.v.t. N.v.t. Live AAN (de knop wordt ingedrukt) Nee UIT Ja Livemarkering uitschakelen Livemarkering is standaard ingeschakeld.
Voorkeuren voor CSS-stijlen instellen Met voorkeuren voor CSS-stijlen bepaalt u de manier waarop Dreamweaver de code schrijft, waarmee CSS-stijlen worden gedefinieerd. CSSstijlen kunnen in een bepaalde vorm van “steno" worden geschreven, waarmee bepaalde mensen gemakkelijker kunnen werken. Sommige oudere versies van browsers interpreteren de steno echter niet op de juiste wijze. 1.
Een CSS-regel maken In Dreamweaver CC en hoger is het deelvenster CSS-stijlen vervangen door CSS ontwerpen. Zie CSS Designer voor meer informatie. U kunt een CSS-regel maken om de opmaak te automatiseren van HTML-tags of van een tekstbereik dat is aangeduid met de kenmerken class of ID. 1. Plaats de invoegpositie in het document en ga vervolgens op een van de volgende manieren te werk om het dialoogvenster Nieuwe CSS-regel te openen: Selecteer Opmaak > CSS-stijlen > Nieuw.
CSS-eigenschappen instellen In Dreamweaver CC en hoger is het deelvenster CSS-stijlen vervangen door CSS ontwerpen. Zie CSS ontwerpen voor meer informatie. U kunt eigenschappen definiëren voor CSS-regels zoals lettertype voor tekst, achtergrondafbeelding en -kleur, spatiërings- en layouteigenschappen, alsmede het uiterlijk van lijstelementen. Maak eerst een nieuwe regel en stel vervolgens een of meer van de volgende eigenschappen in.
Font-weight Hiermee past u een specifieke of relatieve hoeveelheid vet toe op het lettertype. De waarde Normal is gelijk aan 400; de waarde Bold is gelijk aan 700. Het kenmerk Weight wordt door beide browsers ondersteund. Font-variant Hiermee stelt u de variant voor kleinkapitalen in voor tekst. Dreamweaver geeft dit kenmerk niet weer in het documentvenster. Het kenmerk Variant wordt wel ondersteund door Internet Explorer, maar niet door Navigator.
4. Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra stijleigenschappen in te stellen of klikt u op OK. Naar boven Eigenschappen voor CSS-stijlblokken definiëren U kunt de categorie Blok van het dialoogvenster Definitie van CSS-regel gebruiken om instellingen voor spatiëring en uitlijning voor labels en eigenschappen te definiëren. 1. Open het deelvenster CSS-stijlen (Shift+F11), als dat nog niet geopend is. 2.
U kunt instellingen bij het toepassen van instellingen voor opvulling en marges toepassen op afzonderlijke zijkanten van een element, of u kunt de instelling Allemaal hetzelfde gebruiken om dezelfde instelling toe te passen op alle zijkanten van een element. 1. Open het deelvenster CSS-stijlen (Shift + F11), als dat nog niet geopend is. 2. Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het deelvenster CSS-stijlen. 3.
Allemaal hetzelfde Hiermee stelt u dezelfde eigenschappen voor de stijl van de rand in voor de zijkanten boven, rechts, onder en links van het element, waarop de optie Allemaal hetzelfde wordt toegepast. Breedte Hiermee bepaalt u de dikte van de rand van het element. Het kenmerk Width wordt door beide browsers ondersteund. Schakel de selectie van de optie Allemaal hetzelfde uit om de dikte van de rand van afzonderlijke zijkanten van het element in te stellen.
Laat een van de volgende eigenschappen leeg als deze niet belangrijk zijn voor de stijl: Position Hiermee bepaalt u als volgt hoe de browser het geselecteerde element gaat positioneren: Absolute plaatst de inhoud met behulp van de coördinaten die u hebt opgegeven in de vakken Placement, relatief ten opzichte van het dichtstbijzijnde absoluut of relatief gepositioneerde bovenliggende element, of, als er geen absoluut of relatief gepositioneerd bovenliggende element is, in de linkerbovenhoek van de pagina.
stijleigenschappen in te stellen of klikt u op OK. Naar boven Eigenschappen voor CSS-stijlextensies definiëren Extensies, stijleigenschappen inclusief filters, paginascheiding en opties voor de aanwijzer. Opmerking: Er is een aantal andere extensie-eigenschappen beschikbaar in Dreamweaver, maar voor toegang hiertoe dient u het deelvenster CSS-stijlen te gebruiken.
Een CSS-regel bewerken Een regel bewerken in het deelvenster CSS-stijlen (modus Huidig) Een regel bewerken in het deelvenster CSS-stijlen (modus Alles) De naam van een CSS-kiezer wijzigen U kunt zowel interne als externe, op een document toegepaste regels bewerken. Wanneer u een CSS-stijlpagina bewerkt die de tekst in uw document bepaalt, kunt u alle, door die CSS-stijlpagina bepaalde tekst ogenblikkelijk opnieuw opmaken.
Juridische kennisgevingen | Online privacybeleid 274
Een eigenschap toevoegen aan een CSS-regel U kunt het deelvenster CSS-stijlen gebruiken om eigenschappen toe te voegen aan regels. 1. Selecteer in het deelvenster CSS-stijlen (Venster > CSS) een regel in het paneel Alle regels (modus Alles) of selecteer een eigenschap in het paneel Samenvatting voor selectie (modus Huidig). 2.
CSS-klassenstijlen toepassen, verwijderen of hernoemen Een CSS-klassenstijl toepassen Een klassenstijl verwijderen uit een selectie De naam van een klassenstijl wijzigen Klassenstijlen vormen het enige type CSS-stijl dat kan worden toegepast op elke willekeurige tekst in een document, ongeacht de tags die de tekst bepalen. Alle klassenstijlen die zijn gekoppeld aan het huidige document, worden weergegeven in het deelvenster CSS-stijlen (met een punt [.
[afdrukken]Informatie over CSS (Cascading Style Sheets) Juridische kennisgevingen | Online privacybeleid 277
CSS-regels verplaatsen/exporteren CSS-regels verplaatsen/exporteren naar een nieuwe stijlpagina CSS-regels verplaatsen/exporteren naar een bestaande stijlpagina CSS-regels opnieuw schikken of verplaatsen door slepen Meerdere regels selecteren vóór het verplaatsen De functies voor beheer van CSS in Dreamweaver maken het voor u gemakkelijker om CSS-regels naar andere plaatsen over te brengen of te exporteren.
meerdere regels te selecteren. Naar boven Meerdere regels selecteren vóór het verplaatsen Houd in het deelvenster CSS-stijlen de Control-knop (Windows) of de Command-knop (Macintosh) ingedrukt en klik op de regels die u wilt selecteren.
Inline CSS converteren naar een CSS-regel In-line sijlen zijn geen aangeraden beste praktijken. U kunt uw CSS schoner en meer geordend maken door inline stijlen te converteren naar CSSregels die zich in de koptekst van het document of in een externe stijlpagina bevinden. 1. Selecteer in de codeweergave (Weergave > Code) het gehele style-kenmerk dat de inline CSS bevat die u wilt converteren. 2. Klik met de rechter muisknop en selecteer CSS-stijlen> Inline CSS converteren naar regel. 3.
Koppelen naar een externe CSS-stijlpagina Als u een externe CSS-stijlpagina bewerkt, worden alle aan die CSS-stijlpagina gekoppelde documenten bijgewerkt om deze bewerkingen door te voeren. U kunt de in een document aangetroffen CSS-stijlen exporteren om zo een nieuwe CSS-stijlpagina te maken en deze te koppelen aan een externe stijlpagina door de hier gevonden stijlen toe te passen. U kunt aan uw pagina's elke stijlpagina koppelen, die u maakt of kopieert naar uw site.
Een CSS-stijlpagina bewerken Een doorsnee CSS-stijlpagina omvat een of meer regels. U kunt een afzonderlijke regel in een CSS-stijlpagina bewerken met behulp van het deelvenster CSS-stijlen of u kunt rechtstreeks in de CSS-stijlpagina werken als dit uw voorkeur heeft. 1. Selecteer in het deelvenster CSS-stijlen (Venster > CSS-stijlen) de modus Alles. 2. Dubbelklik in het paneel Alle regels op de naam van de stijlpagina die u wilt bewerken. 3.
CSS-code opmaken Voorkeuren voor CSS-codeopmaak instellen CSS-code in een CSS-stijlpagina handmatig opmaken Ingebedde CSS-code handmatig opmaken U kunt voorkeuren instellen voor het regelen van de CSS-codeopmaak wanneer u een CSS-regel maakt of bewerkt met behulp van de Dreamweaver-interface. Bijvoorbeeld: u kunt voorkeuren instellen waardoor alle CSS-eigenschappen op aparte regels worden geplaatst, blanco regels tussen de CSS-regels worden geplaatst, etc.
Juridische kennisgevingen | Online privacybeleid 284
CSS uit-/inschakelen Met de functie CSS-eigenschap uit-/inschakelen kunt u gedeelten met CSS weglaten vanuit het deelvenster CSS-stijlen zonder dat u de wijzigingen rechtstreeks in de code hoeft aan te brengen. Wanneer u bepaalde gedeelten weglaat uit de CSS, kunt u nagaan welke effecten bepaalde eigenschappen en waarden op uw pagina hebben. Als u een CSS-eigenschap uitschakelt, voegt Dreamweaver CSS-commentaartags en het label [uitgeschakeld] toe aan de CSS-eigenschap die u hebt uitgeschakeld.
CSS controleren in Live View U kunt de controlemodus gebruiken in combinatie met Live View om snel HTML-elementen en de bijbehorende CSS-stijlen te identificeren. Als de controlemodus is ingeschakeld, kunt u de muisaanwijzer op elementen op de pagina plaatsen om de kenmerken van het CSS-kadermodel weer te geven voor elk element op blokniveau. Opmerking: zie de CSS 2.1-specificatie voor meer informatie over het CSS-kadermodel.
Controleren op problemen met CSS-weergave tussen browsers Een browsercompatibiliteitscontrole uitvoeren Selecteer het element dat wordt beïnvloed door een aangetroffen kwestie Naar het volgende of vorige gevonden probleem in de code springen Voor Dreamweaver browsers voor controledoeleinden selecteren Een probleem uitsluiten van de browsercompatibiliteitscontrole De lijst Genegeerde problemen bewerken Een browsercompatibiliteitscontrolerapport opslaan Een browsercompatibiliteitscontrolerapport bekijken in e
Bijvoorbeeld: als u wilt controleren of CSS-weergavebugs kunnen verschijnen in Internet Explorer 5.0 en later en Netscape Navigator 7.0 en later, selecteert u de aankruisvakjes naast de betreffende browsers en selecteert u 5.0 in het pop-upmenu van Internet Explorer en 7.0 in het pop-upmenu van Netscape. Een probleem uitsluiten van de browsercompatibiliteitscontrole Naar boven 1. Voer de test voor browsercompatibiliteit uit. 2.
Design-Time stijlpagina's gebruiken Met Design-Time stijlbladen kunt u door een CSS-stijlpagina toegepast ontwerp weergeven of verbergen terwijl u in een Dreamweaver-document werkt. U kunt deze optie bijvoorbeeld gebruiken om het effect van een Macintosh-specifieke of een Windows-specifieke stijlpagina op te nemen of uit te sluiten, terwijl u een pagina ontwerpt.
Werken met labels voor div-tags Div-tags invoegen en bewerken CSS-lay-outblokken Werken met AP-elementen Opmerking: In Dreamweaver CC en hoger is het deelvenster CSS-stijlen vervangen door CSS ontwerpen. Zie CSS ontwerpen voor meer informatie. (Alleen Creative Cloud-gebruikers): Er zijn zeven nieuwe semantische tags beschikbaar wanneer u Invoegen > Lay-out selecteert. De nieuwe tags zijn: Artikel, Aside, HGroup, Navigatie, Sectie, Koptekst en Voettekst.
invoegen . 3. Stel vervolgens de volgende opties naar wens in: Invoegen Hiermee kunt u de locatie van de div-tag en de naam van de tag (als het geen nieuwe tag is) selecteren. Klasse Hiermee geeft u de klassenstijl weer, die momenteel op de label wordt toegepast. Als u een stijlpagina hebt gekoppeld, worden op die stijlpagina gedefinieerde klassen weergegeven in de lijst. Gebruik dit pop-upmenu om de stijl te selecteren die u op de tag wilt toepassen.
het documentvenster. 2. Selecteer Venster > CSS-stijlen om het deelvenster CSS-stijlen te openen, als dit nog niet is geopend. Regels die worden toegepast op de label voor het div-element, worden in het paneel weergegeven. 3. Breng desgewenst wijzigingen aan. De invoegpositie in de label voor een div-tag plaatsen om inhoud toe te voegen Klik op een willekeurige plaats binnen de randen van de label.
Een div-tag Een afbeelding, waaraan een absolute of relatieve positie is toegewezen Een a-tag, waaraan de stijl display:block is toegewezen Een alinea, waaraan een absolute of relatieve positie is toegewezen Opmerking: Ten behoeve van de visuele weergave omvatten CSS-lay-outblokken geen inline-elementen (dit zijn elementen waarvan de code binnen een regel tekst staat) of enkelvoudige blokelementen zoals alinea's. Dreamweaver biedt een aantal visuele hulpmiddelen voor de weergave van CSS-lay-outblokken.
U kunt een Design-Time stijlpagina gebruiken om de achtergronden, randen of het kadermodel voor elementen weer te geven die normaal gesproken niet als CSS-lay-outblokken worden beschouwd. Hiervoor moet u eerst een Design-Time stijlpagina maken, die het kenmerk display:block toewijst aan het juiste pagina-element. 1. Maak een externe CSS-stijlpagina door de selectie van Bestand > Nieuw, van Basispagina in de kolom Categorie, van CSS in de kolom Basispagina en door te klikken op Maken. 2.
HTML-code voor absoluut gepositioneerde div-elementen De AP-elementen worden in Dreamweaver gemaakt met de div-tag. Als u een AP-element invoegt met behulp van het gereedschap AP Div tekenen, wordt in Dreamweaver een div-tag ingevoegd in het document en wordt aan de div-tag een id-waarde toegewezen (standaard is dit apDiv1 voor de eerste div-tag die u invoegt, apDiv2 voor de tweede div-tag die u invoegt enzovoort).
Command niet loslaat. Een AP Div-element invoegen op een bepaalde plaats in het document Plaats de invoegpositie in het documentvenster en selecteer vervolgens Invoegen > Layoutobjecten > AP Div. Opmerking: Deze procedure plaatst de label voor het AP Div-element op de plaats waar u in het documentvenster klikte. De visuele weergave van het AP Div-element kan op deze manier invloed uitoefenen op andere pagina-elementen (zoals tekst) die eromheen staan.
In de eerste set labels voor div-tags staat één div-tag boven aan de pagina. In de tweede set staat de div-tag apDiv4 in feite binnen de div-tag apDiv3. (U kunt de stapelvolgorde van AP Div-elementen wijzigen in het paneel AP-elementen.) Nesten wordt vaak gebruikt om AP Div-elementen samen te groeperen. Een genest AP Div-element wordt met het bovenliggende AP Div-element verplaatst en kan dusdanig worden ingesteld dat de zichtbaarheid wordt overgenomen van het bovenliggende element.
Achtergrondkleur Hiermee bepaalt u de standaardachtergrondkleur. Selecteer een kleur in de kleurkiezer. Achtergrondafbeelding Hiermee bepaalt u een standaardachtergrondafbeelding. Klik op Bladeren om het afbeeldingsbestand op uw computer te vinden. Nesten: Nesten indien gemaakt binnen een absoluut gepositioneerd div-element Hiermee bepaalt u of een AP Div-element dat u begint te tekenen vanaf een punt binnen de grenzen van een bestaand AP Div-element, een genest AP Div-element moet zijn.
In een browser worden AP-elementen met een hoger nummer vóór AP-elementen met een lager nummer weergegeven. Waarden kunnen positief of negatief zijn. De stapelvolgorde van AP-elementen kan gemakkelijker worden gewijzigd met behulp van het paneel AP-elementen, in plaats van specifieke waarden voor de Z-index op te geven. Vis Hiermee geeft u aan of het AP-element aanvankelijk zichtbaar ("visible") is of niet. Kies een van de volgende opties: Met Standaard wordt geen zichtbaarheidseigenschap opgegeven.
Wanneer u twee of meer AP-elementen selecteert, geeft de eigenschappencontrole teksteigenschappen en een subset van de volledige AP-elementeigenschappen weer, waardoor u verschillende AP-elementen tegelijk kunt wijzigen. Meerdere AP-elementen selecteren Houd de Shift-toets ingedrukt tijdens de selectie van AP-elementen. Eigenschappen van meerdere AP-elementen weergeven en instellen 1. Selecteer meerdere AP-elementen. 2.
Achtergrondafbeelding Hiermee geeft u een achtergrondafbeelding voor de APelementen op. Klik op het pictogram voor de map waarnaar u gaat bladeren, en selecteer een afbeeldingsbestand. Bg Color Hiermee geeft u een achtergrondkleur van de AP-elementen op. Laat deze optie leeg om een transparante achtergrond op te geven. 4. Als u een waarde in een tekstvak hebt opgegeven, drukt u op Tab of Enter (Windows) of op Return (Macintosh) om de waarde toe te passen.
Klik binnen een AP-element en selecteer de label ervan in de labelkiezer. Meerdere AP-elementen selecteren Voer een van de volgende handelingen uit: Houd de Shift-toets ingedrukt en klik in het paneel AP-elementen (Venster > APelementen) op twee of meer AP-elementnamen. Houd de Shift-toets ingedrukt en klik in het documentvenster binnen, of op de rand van, twee of meer AP-elementen.
Terwijl u in uw document aan het werk bent, kunt u handmatig AP-elementen tonen en verbergen met behulp van het paneel AP-elementen om te zien hoe de pagina er onder verschillende omstandigheden uit komt te zien. Opmerking: Het op dat moment geselecteerde AP-element wordt altijd zichtbaar en verschijnt vóór andere AP-elementen terwijl het is geselecteerd. Zichtbaarheid van AP-elementen wijzigen 1. Selecteer Venster > AP-elementen om het paneel AP-elementen te openen. 2.
Typ in de eigenschappencontrole (Venster > Eigenschappen) waarden voor breedte (B) en hoogte (H). Het groter of kleiner maken van een AP-element wijzigt de breedte en hoogte van een AP-element. Hiermee definieert u dus niet hoeveel van de inhoud van het APelement zichtbaar is. U kunt het zichtbare gebied binnen een AP-element definiëren in de voorkeuren. Meerdere AP-elementen tegelijk groter of kleiner maken 1. Selecteer in de ontwerpweergave twee of meer AP-elementen. 2.
In plaats van een lay-out met tabellen te maken, werken sommige webontwikkelaars liever met APelementen. Dreamweaver biedt u de mogelijkheid om eerst de lay-out aan te brengen met behulp van APelementen en deze (desgewenst) om te zetten naar tabellen. Zo moet u uw AP-elementen misschien naar tabellen converteren als u browsers wilt ondersteunen die ouder zijn dan versie 4.0.
1. Selecteer Modify > Convert > Tables to AP Divs. 2. Geef een van de volgende opties op en klik op OK: Overlappingen van absoluut gepositioneerde elementen voorkomen Hiermee beperkt u de posities van AP-elementen wanneer deze worden gemaakt, verplaatst en groter of kleiner worden gemaakt, op een dusdanige wijze dat de elementen elkaar niet overlappen. Paneel AP-elementen weergeven Hiermee wordt het paneel AP-elementen weergegeven.
Verlopen toepassen op een achtergrond Verlopen weergeven in webbrowsers Achtergrondafbeeldingen en verlopen omwisselen Met het deelvenster CSS ontwerpen kunt u verlopen toepassen op de achtergronden van uw websites. De eigenschap 'gradient' voor verlopen is beschikbaar in de achtergrondcategorie. eigenschap 'gradient' Klik op naast de eigenschap 'gradient' om het deelvenster voor verlopen te openen. Met dit deelvenster kunt u: Kleuren kiezen uit verschillende kleurmodellen (RGBa, Hexadecimaal of HSLa).
Dialoogvenster voor verlopen A. Kleurstop B. Staal voor verloop C. Staal voor verloop toevoegen D. Lineaire herhaling E. Kleurmodellen F. Pipet G. Kleurregelaar H. Schuifregelaar voor luminantie I. Schuifregelaar voor dekking J. Kleurstaal toevoegen K. Kleurstaal L. Oorspronkelijke kleur M. Geselecteerde kleur N. Hoek voor lineair verloop Opmerking: Het gereedschap Pipet is beschikbaar in Dreamweaver 13.1 en hoger.
Wijzigingen in verlopen worden ook in elke leveranciersspecifieke syntaxis weergegeven. Als u een bestaand bestand met leveranciersspecifieke syntaxis opent in Dreamweaver CC, moet u ervoor zorgen dat de vereiste leveranciersvoorvoegsels zijn geselecteerd bij Voorkeuren. Dit is nodig omdat in Dreamweaver standaard alleen code voor WebKit en Dreamweaver Live View wordt bijwerkt als u verlopen gebruikt of wijzigt. Andere leveranciersspecifieke syntaxis in uw code wordt dus niet bijgewerkt.
CSS3-overgangseffecten U kunt CSS3-overgangen maken, wijzigen en verwijderen met het deelvenster CSS-overgangen. Als u een CSS3-overgang wilt maken, maakt u een overgangsklasse door waarden voor overgangseigenschappen van het element in te stellen. Als u een element selecteert voor u een overgangsklasse maakt, wordt de overgangsklasse automatisch toegepast op het geselecteerde element. U kunt de gegenereerde CSS-code toevoegen aan het huidige document of een extern CSS-bestand opgeven.
1. Selecteer in het deelvenster CSS-overgangen het overgangseffect dat u wilt bewerken. 2. Klik op . 3. Gebruik het dialoogvenster Overgang bewerken als u eerder ingevoerde waarden voor de overgang wilt wijzigen. Naar boven CSS-steno voor overgangen uitschakelen 1. Selecteer Bewerken > Voorkeuren. 2. Selecteer CSS-stijlen. 3. Schakel Overgang uit bij Steno gebruiken voor. Twitter™ and Facebook posts are not covered under the terms of Creative Commons.
Voorbeeldstijlbladen van Dreamweaver gebruiken Dreamweaver biedt voorbeeldstijlpagina's die u kunt toepassen op uw pagina's of die u kunt gebruiken als beginpunt voor het ontwikkelen van uw eigen stijlen. 1. Open het deelvenster CSS-stijlen op een van de volgende manieren: Selecteer Venster > CSS-stijlen. Druk op Shift+F11. 2. Klik in het deelvenster CSS-stijlen op de knop Externe stijlpagina koppelen. (Deze bevindt zich in de rechterbenedenhoek van het paneel.) 3.
Het deelvenster CSS-stijlen Het deelvenster CSS-stijlen in de modus Huidig Het deelvenster CSS-stijlen in de modus Alles Knoppen en weergaven in het deelvenster CSS-stijlen Het deelvenster CSS-stijlen openen Met het deelvenster CSS-stijlen kunt u de CSS-regels en -eigenschappen volgen, die van invloed zijn op het momenteel geselecteerde paginaelement (modus Huidig), of alle regels en eigenschappen die voor het document beschikbaar zijn (modus Alles).
8 } Als u in het documentvenster alineatekst met een klassenstijl .foo selecteert, worden in het deelvenster Samenvatting voor selectie de relevante eigenschappen voor beide regels weergegeven, omdat beide regels van toepassing zijn op de selectie. In dit geval zou het deelvenster Samenvatting voor selectie de volgende eigenschappen vermelden: 1 2 3 font-size: 12px font-family: 'Arial' color: green Het deelvenster Samenvatting voor selectie schikt eigenschappen in toenemende mate van specificiteit.
U kunt het formaat van een van beide deelvensters wijzigen door de randen tussen de deelvensters te slepen, terwijl u de grootte van kolommen Eigenschappen kunt wijzigen door het slepen van de kolomscheiding ervan. Als u een regel selecteert in het deelvenster Alle regels, worden alle eigenschappen die in die regel zijn gedefinieerd, weergegeven in het deelvenster Eigenschappen.
Stijl bewerken Hiermee opent u een dialoogvenster waarin u de stijlen in het huidige document of in een externe stijlpagina kunt bewerken. CSS-regel verwijderen Hiermee verwijdert u de geselecteerde regel of eigenschap uit het deelvenster CSS-stijlen en verwijdert de opmaak uit elk element waarop deze werd toegepast. (Klasse- of id-eigenschappen waarnaar door die stijl wordt verwezen, worden echter niet verwijderd.
Pagina-inhoud en middelen 317
Pagina-eigenschappen instellen Lettertype, achtergrondkleur en achtergrondafbeeldingseigenschappen voor een CSS-pagina instellen Eigenschappen voor HTML-pagina instellen Voor elke pagina die u in Dreamweaver maakt, kunt u eigenschappen voor de lay-out en opmaak opgeven in het dialoogvenster Paginaeigenschappen (Wijzigen > Pagina-eigenschappen).
Door eigenschappen in deze categorie van het dialoogvenster Pagina-eigenschappen in te stellen, wordt HMTL-opmaak in plaats van CSSopmaak op de pagina toegepast. 1. Selecteer Wijzigen > Pagina-eigenschappen of klik op de knop Pagina-eigenschappen in de eigenschappencontrole. 2. Selecteer de categorie Weergave (HTML) en stel de opties in. Achtergrondafbeelding Stelt een achtergrondafbeelding in. Klik op de knop Bladeren en blader naar de afbeelding om ze te selecteren.
Eigenschappen voor CSS-koppelingen instellen voor een volledige pagina Opmerking: de gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger. Zie dit artikel voor meer informatie. U kunt lettertypen, tekengrootten, kleuren en andere items voor uw koppelingen opgeven. Dreamweaver maakt standaard CSS-regels voor uw koppelingen en past deze toe op alle koppelingen die u gebruikt op de pagina.
Eigenschappen voor CSS-koppen instellen voor een volledige pagina Opmerking: de gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger. Zie dit artikel voor meer informatie. U kunt lettertypen, tekengrootten en kleuren voor uw paginakoppen opgeven. Standaard maakt Dreamweaver maakt CSS-regels voor uw koppen en past deze toe op alle koppen die u gebruikt op de pagina.
Eigenschappen voor titels en coderingseigenschappen instellen Met de opties in de categorie voor pagina-eigenschappen voor Titel/codering kunt u het documentcoderingstype opgeven dat specifiek is voor de taal die wordt gebruikt voor het schrijven van uw webpagina's. Ook kunt u opgeven welke UNF moet worden gebruikt met dat coderingstype. 1. Selecteer Wijzigen > Pagina-eigenschappen of klik op de knop Pagina-eigenschappen in de eigenschappencontrole. 2.
Een overtrekafbeelding gebruiken om de pagina te ontwerpen U kunt een afbeeldingsbestand invoegen en het gebruiken als richtlijn bij het ontwerpen van uw pagina. De afbeelding wordt weergegeven als een achtergrondafbeelding en u kunt uw paginaontwerp hier overheen plaatsen. 1. Selecteer Wijzigen > Pagina-eigenschappen of klik op de knop Pagina-eigenschappen in de eigenschappencontrole. 2. Selecteer de categorie en stel de opties in.
Over het coderen van documenten Bij het coderen van documenten wordt de codering voor tekens in het document opgegeven. De codering van documenten wordt opgegeven in een meta-tag in de kop van het document. Met de codering wordt aan de browser en Dreamweaver doorgegeven hoe het document moet worden gedecodeerd en welke lettertypen moeten worden gebruikt voor het weergeven van de gedecodeerde tekst.
Elementen selecteren en weergeven in het documentvenster Elementen selecteren De HTML-code weergeven die is gekoppeld aan de geselecteerde tekst of het geselecteerde object Markeerpictogrammen voor onzichtbare elementen weergeven of verbergen Voorkeuren voor onzichtbare elementen instellen Als u een element wilt selecteren in de ontwerpweergave van het documentvenster, klikt u op het element. Als een element onzichtbaar is, moet u het zichtbaar maken voordat u het kunt selecteren.
Markeerpictogrammen voor onzichtbare elementen weergeven of verbergen Naar boven Selecteer Weergave > Visuele hulpmiddelen > Onzichtbare elementen. Opmerking: Als u onzichtbare elementen weergeeft, kan dat een kleine invloed hebben op de indeling van een pagina doordat andere elementen met een paar pixels worden verschoven. Als u de indeling nauwkeurig wilt weergeven, moet u daarom de onzichtbare elementen verbergen.
Include-bestanden op de server Geeft de feitelijke inhoud van elk include-bestand op de server weer.
Kleuren Webveilige kleuren De kleurkiezer gebruiken Naar boven Webveilige kleuren In HTML worden kleuren uitgedrukt als hexadecimale waarden (bijvoorbeeld #FF0000) of als kleurnamen (rood). Een webveilige kleur is een kleur die er in Safari en Microsoft Internet Explorer hetzelfde uitziet, zowel op Windows- als Macintosh-systemen in de 256-kleurenmodus.
Juridische kennisgevingen | Online privacybeleid 329
In- en uitzoomen In- of uitzoomen op een pagina Een pagina bewerken na het zoomen Een pagina verschuiven na het zoomen Het documentvenster vullen met een selectie Het documentvenster vullen met een hele pagina Het documentvenster vullen met een hele breedte van een pagina In Dreamweaver kunt u de vergroting verhogen (inzoomen) in het documentvenster, zodat u de pixelnauwkeurigheid van afbeeldingen kunt controleren, gemakkelijker kleine items kunt selecteren, pagina's met kleine tekst kunt ontwerpen, grote p
Juridische kennisgevingen | Online privacybeleid 331
Voorkeuren voor downloadtijd en -grootte instellen Dreamweaver berekent de grootte op basis van de hele inhoud van de pagina, inclusief alle gekoppelde objecten, zoals afbeeldingen en insteekmodules. Dreamweaver schat de downloadtijd op basis van de verbindingssnelheid die is opgegeven in de statusbalkvoorkeuren. De werkelijke downloadtijd varieert afhankelijk van algemene internetomstandigheden. Een goede richtlijn voor het controleren van de downloadtijd voor een bepaalde webpagina is de 8-secondenregel.
Werken met tekst Tekst aan een document toevoegen Speciale tekens invoegen Witruimte toevoegen tussen tekens Witruimte tussen alinea's toevoegen Lijsten met opsommingstekens en nummering maken Tekst zoeken en vervangen Afkortingen en letterwoorden definiëren Voorkeuren voor kopiëren en plakken instellen Opmerking: De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger.
Plakken speciaal Control+Shift+V (Windows) Command+Shift+V (Macintosh) Naar boven Speciale tekens invoegen Bepaalde speciale tekens worden in HTML weergegeven met een naam of een getal, aangeduid als een entiteit. HTML bevat entiteitsnamen voor tekens als het copyrightsymbool (©) het en-teken (&), en het gedeponeerd-handelsmerksymbool (®). Elke entiteit heeft zowel een naam (bijvoorbeeld —) als een numerieke equivalent, bijvoorbeeld —.
2. Controleer of in de categorie Algemeen de optie Meerdere opeenvolgende spaties toestaan is ingeschakeld. Naar boven Witruimte tussen alinea's toevoegen De manier van werken van Dreamweaver lijkt op die van heel wat tekstverwerkingstoepassingen: om een nieuwe alinea te maken, drukt u op Enter (Windows) of op Return (Macintosh). Webbrowsers voegen automatisch een lege regel met witruimte in tussen alinea's. U kunt één regel witruimte tussen alinea's toevoegen door een regeleinde in te voegen.
3. Beëindig de lijst door twee keer op Enter (Windows) of Return (Macintosh) te drukken. Een lijst maken met bestaande tekst 1. Selecteer een reeks alinea's waarvan u een lijst wilt maken. 2. Klik in de HTML-eigenschappencontrole op de knop Lijst met opsommingstekens of Genummerde lijst of selecteer Formaat > Lijst en selecteer het gewenste type lijst: Nietgeordende lijst, Geordende lijst of Definitielijst. Een geneste lijst maken 1. Selecteer de lijstitems die u wilt nesten. 2.
stijl hebben betrekking op het type lijst dat wordt weergegeven in het menu Lijsttype. Als in het menu Lijstitem bijvoorbeeld Lijst met opsommingstekens wordt weergegeven, zijn in het menu Nieuwe stijl alleen opties voor opsommingstekens beschikbaar. Aantal opnieuw instellen op Hiermee kunt een specifiek getal instellen waar vanaf lijstitems moeten worden genummerd. 4. Klik op OK om de opties in te stellen.
zwarte hond als met de zwarte hond. Tekst (geavanceerd) Hiermee zoekt u naar specifieke tekstreeksen die binnen of niet binnen een tag of tags staan. Als u bijvoorbeeld in een document met de volgende HTML zoekt naar probeert en Niet binnen tag en de tag i opgeeft, wordt alleen de tweede instantie van het woord probeert gevonden: Jan probeert zijn werk op tijd af te krijgen, maar het lukt hem niet altijd. Hij probeert het altijd. .
de gezochte tekst of tags weergegeven met wat context. Als u in een map of site zoekt, wordt met Alles zoeken een lijst weergegeven met documenten die de tag bevatten. 7. Als u gevonden tekst of tags wilt vervangen, klikt u op Vervangen of Alles vervangen. 8. Klik op Sluiten als u klaar bent. Opnieuw zoeken zonder het dialoogvenster Zoeken en vervangen weer te geven Druk op F3 (Windows) of Command+G (Macintosh). Een bepaald zoekresultaat in context weergeven 1.
opgenomen in de b-tag. Niet met Geeft tekst of een tag aan die niet mag voorkomen binnen de oorspronkelijke tag. Binnen tag Geeft een tag aan waarin de doeltag moet voorkomen. Niet binnen tag Geeft een tag aan waarin de doeltag niet mag voorkomen. 5. (Optioneel.) U kunt de zoekopdracht verder beperken door op de knop Plus (+) te drukken en stap 3 te herhalen. 6. Als u geen tagaanpassingen heb toegepast in stap 3 en 4, klikt u op de knop Min (-) om het pop-upmenu voor tagaanpassingen te verwijderen. 7.
Naar boven Afkortingen en letterwoorden definiëren HTML biedt tags waarmee u afkortingen en letterwoorden kunt definiëren die u in uw pagina gebruikt voor zoekmachines, spellingcontrole, vertaalprogramma's of spraakprogramma's. U kunt bijvoorbeeld opgeven dat de afkorting ME in uw pagina voor mechanical engineer staat, of het letterwoord WHO voor World Health Organization. 1. Selecteer de afkorting of het acroniem in de tekst van de pagina. 2.
Regeleinden behouden Hiermee kunt u regeleinden behouden in geplakte tekst. Deze optie is uitgeschakeld als u Alleen tekst hebt geselecteerd. Alinea-afstanden van Word opruimen Selecteer deze optie als u Tekst met structuur of Tekst met structuur en basisopmaak hebt geselecteerd en extra witruimte tussen alinea's wilt verwijderen bij het plakken van de tekst.
Arabic and Hebrew text Bi-directional text flow Tag editor Text direction and Unicode-bidi in CSS Rules Table properties Div properties New and improved features for working in Arabic and Hebrew are available in the Middle East and North African edition of this software. Bi-directional text flow To the top Text in Middle Eastern languages is mostly written from right to left (RTL).
Tag Editor Text direction and Unicode-bidi in CSS Rules To the top You can specify the Text direction as a CSS rule. In the CSS Rule definition dialog box, specify Direction and Unicode-bidi options. Language options in CSS Rules Table properties To the top Right-to-left tables are right aligned, and columns are ordered from right to left. The resizing handles appear on the left side. On tabbing, the cursor moves in RTL direction.. Specify the table direction using the Properties panel.
Right-to-left table Div properties To the top Use Direction to specify the Div direction in the Properties. Div direction Twitter™ and Facebook posts are not covered under the terms of Creative Commons.
Bewerken in Live View In Live View wordt een op Chromium gebaseerde weergavefunctie gebruikt, zodat de inhoud er in Dreamweaver net zo uitziet als in uw favoriete webbrowsers. Tijdens het ontwikkelen kunt u overschakelen naar Live View om snel een voorvertoning van uw pagina weer te geven. En om tijd te besparen omdat u minder hoeft te schakelen tussen de verschillende weergaven (code- en ontwerpweergave), kunt u HTML-elementen rechtstreeks in Live View weergeven.
Opmerking: In Live View worden alleen de opties die voor het geselecteerde element van toepassing zijn, beschikbaar gemaakt in het hoofdmenu. Opties die niet van toepassing zijn, worden grijs weergegeven en zijn niet beschikbaar wanneer het element wordt geselecteerd.
Als u de klasse of id wilt wijzigen die zijn gekoppeld aan het HTML-element, klikt u in het vak. Er wordt een lijst met beschikbare klassen en id's weergegeven. Klik op de gewenste optie. Als u een klasse of een id wilt toevoegen en wilt toepassen op het element, klikt u op de '+' en typt u de naam. Klik op “+” of druk op Enter om de wijzigingen op te slaan. U kunt vervolgens CSS ontwerpen gebruiken om een kiezer te definiëren die deze klasse of id bevat.
Als u Help-informatie wilt bekijken over een bepaald item in de eigenschappencontrole, klikt u op de knop Help rechtsboven in de eigenschappencontrole of selecteert u Help in het optiemenu van de eigenschappencontrole.
Als u de kenmerken wilt bewerken, klikt u op het sandwichpictogram in de Snelle eigenschappencontrole. U kunt de bron van de afbeelding samen met andere eigenschappen, zoals titel en alt wijzigen. De wijzigingen worden onmiddellijk doorgevoerd. Zo kunt u ook de Breedte en Hoogte van de afbeelding in Live View aanpassen.
De invoegpositie wordt ingesteld op de positie van de dubbelklik. Als u alle tekst in het tekstelement wilt selecteren, klikt u drie keer in het tekstelement. Opmerking: Als u alle tekst verwijdert en de tekst opnieuw typt, worden de tags sterk en em in een andere volgorde geplaatst of opnieuw gerangschikt. Knippen, kopïeren en plakken, ongedaan maken en opnieuw worden ondersteund terwijl u tekst in Live View bewerkt. Wanneer u tekst plakt, wordt de tekst als tekst zonder opmaak geplakt.
entiteiten bevat Tekst opmaken U kunt de opmaak van tekst en hyperlinktekst nu rechtstreeks in Live View wijzigen. Als u de opties voor tekstopmaak wilt weergeven, selecteert u een woord of een woordgroep. De Snelle eigenschappencontrole met opmaakopties wordt direct boven de geselecteerde tekst weergegeven.
Livehulplijnen boven en onder aangewezen elementen Links en rechts: worden weergegeven wanneer u de muisaanwijzer op inline tags plaatst, bijvoorbeeld op , of op tags waarvoor de eigenschap 'zwevend' is ingesteld. Livehulplijnen rechts en links van aangewezen elementen Als u even pauzeert voordat u het element neerzet, verschijnt het pictogram DOM ().
DOM-pictogram voor het nauwkeurig invoegen van elementen Als u elementen rechtstreeks in Live View wilt invoegen, voert u de volgende stappen uit: 1. Schakel over naar Live View. 2. Klik in het deelvenster Invoegen op het gewenste element en sleep het element naar het document. U kunt ook op het gewenste element in het deelvenster Invoegen klikken. Tip: Als u geen elementen van het deelvenster Invoegen naar de pagina kunt slepen, start u uw computer opnieuw op en probeert u het opnieuw. 3.
Naar boven Elementen selecteren en slepen en neerzetten In Live View kunt u een element verplaatsen door op de tagnaam te klikken en het element vervolgens naar de gewenste locatie te slepen. Wanneer u op een tagnaam klikt, verschijnt het handje dat aangeeft dat u de tag vanaf het betreffende punt kunt slepen. Wanneer u de tag begint te slepen, zorgen de hulplijnen ervoor dat u de tag op de exacte locatie kunt plaatsen.
weergegeven in de volgende afbeelding. Kiezers doorlopen Druk op de Tab-toets om de kiezers in de Elementweergave te doorlopen. De kiezer met de focus wordt weergegeven met een oranje rand zoals hieronder wordt weergegeven: De kiezer met de focus wordt gemarkeerd met een oranje rand. Als u na de kiezer die als laatste is toegepast, op de Tab-toets drukt, wordt het tekstvak Kiezer toevoegen weergegeven.
Niet-ondersteunde scenario's De sjabloonbestanden van Dreamweaver kunnen niet in Live View worden bewerkt. Tags die zowel statische als dynamische inhoud bevatten. Hoewel u wel de kiezers voor dergelijke tags kunt bewerken, kunt u geen tekst in Live View bewerken. Als u in Live View dubbelklikt op dergelijke elementen, wordt er een grijze rand rond deze elementen weergegeven om aan te geven dat het bewerken van tekst niet wordt ondersteund. Tags waarop pseudokiezers zijn toegepast.
Het deelvenster DOM Het deelvenster DOM geeft een interactieve HTML-structuur weer voor statische en dynamische inhoud. Met deze weergave kunt u visuele elementen in Live View toewijzen aan de bijbehorende HTMLopmaak en de toegepaste kiezers in CSS ontwerpen. U kunt de HTML-structuur in het deelvenster DOM ook bewerken en in Live View zien dat de wijzigingen direct van kracht zijn. Stapsgewijze zelfstudie Uw HTML-structuur visualiseren en visueel wijzigen in Dreamweaver (30 min.
U kunt het deelvenster DOM verplaatsen en op een handige plaats in de gebruikersinterface neerzetten. U kunt ook het deelvenster samen met andere deelvensters vastzetten. Naar boven Snelle elementweergave gebruiken 1. Open het gewenste document en open vervolgens het DOM-deelvenster door Venster > DOM te selecteren. 2. Schakel over naar Live View en klik op het element dat u wilt controleren of bewerken. De HTML-opmaak van het geselecteerde element wordt gemarkeerd in het deelvenster DOM.
element of het knooppunt waaronder u de gekopieerde elementen wilt nesten. Vervolgens klikt u met de rechtermuisknop op het element of het knooppunt en klikt u op Plakken. + Y (Mac) Als u een gekopieerd element wilt plakken als een onderliggend element van een ander element of knoppunt, klikt u met de rechtermuisknop op het element of knooppunt (bovenliggende element) en klikt u vervolgens op Plakken als onderliggend item.
en is vervolgens niet meer beschikbaar. Als u het snelmenu wilt gebruiken, moet u de Live View verbergen (Live View-opties > Live View-weergaven verbergen) en schakelt u vervolgens Javascript uit (Live Viewopties > Javascript uitschakelen). De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.
Teksteigenschappen instellen in de eigenschappencontrole Over het opmaken van tekst (CSS en HTML) CSS-regels bewerken in de eigenschappencontrole HTML-opmaak instellen in de eigenschappencontrole De naam van de klasse wijzigen vanuit de HTML-eigenschappencontrole U kunt de eigenschappencontrole voor tekst gebruiken om HTML-opmaak of CSS-opmaak (Cascading Style Sheet) toe te passen. Wanneer u HTML-opmaak toepast, voegt Dreamweaver eigenschappen aan de HTML-code in het hoofdgedeelte van de pagina toe.
Doelregel Is de regel die u bewerkt in de CSS-eigenschappencontrole. Als u een bestaande stijl op tekst hebt toegepast, wordt de regel die invloed heeft op de opmaak van de tekst weergegeven wanneer u in de tekst op de pagina klikt. Met het pop-upmenu Doelregel kunt u ook nieuwe CSS-regels of inline stijlen maken of bestaande klassen op geselecteerde tekst toepassen. Als u een nieuwe regel maakt, moet u het dialoogvenster Nieuwe CSS-regel invullen.
Selecteer Naam wijzigen als u de naam van de stijl wilt veranderen. Selecteer Stijlpagina koppelen om een dialoogvenster te openen waarin u een externe stijlpagina aan de pagina kunt koppelen. Vet Past of toe op de geselecteerde tekst naargelang de stijlvoorkeur die is ingesteld in de categorie Algemeen van het dialoogvenster Voorkeuren.
Spelling op een webpagina controleren Gebruik de opdracht Spelling controleren om de spelling van het huidige document te controleren. Het document moet een webpagina zijn (bijvoorbeeld een HTML-, ColdFusion- of PHP-pagina). De opdracht Spelling controleren werkt niet voor tekst- of XML-bestanden. Daarnaast worden met de opdracht Spelling controleren HTML-tags en kenmerkwaarden genegeerd.
Tabelgegevens importeren U kunt tabelgegevens in uw document importeren door de bestanden (bijvoorbeeld Microsoft Excel-bestanden of databasebestanden) eerst als tekstbestanden met scheidingstekens op te slaan. U kunt tabelgegevens importeren en opmaken en tekst uit Microsoft Word HTML-documenten importeren. U kunt ook tekst uit Microsoft Excel-documenten toevoegen aan een Dreamweaver-document door de inhoud van het Excel-bestand in een webpagina te importeren. 1.
Microsoft Office-documenten importeren (alleen Windows) U kunt de volledige inhoud van een Microsoft Word- of Excel-document invoegen in een nieuwe of bestaande webpagina. Als u een Word- of Excel-document importeert, ontvangt Dreamweaver de geconverteerde HTML, waarna deze in uw webpagina wordt ingevoegd. De grootte van het bestand nadat Dreamweaver de geconverteerde HTML heeft ontvangen, moet minder zijn dan 300 kB.
Een koppeling maken naar een Word- of Excel-document U kunt een koppeling naar een Microsoft Word- of Excel-document invoegen in een bestaande webpagina. 1. Open de pagina waarop u de koppeling wilt weergeven. 2. Sleep het bestand vanuit de huidige locatie naar de Dreamweaver-pagina en plaats de koppeling op de gewenste locatie. 3. Selecteer Een koppeling maken en klik op OK. 4.
HTML-opmaak gebruiken Alinea's opmaken De kleur van tekst wijzigen Tekst uitlijnen Tekst inspringen Tekenstijlen toepassen Hoewel CSS de voorkeursmethode is voor het opmaken van tekst, kunt u tekst in Dreamweaver nog steeds opmaken met HTML. Naar boven Alinea's opmaken Gebruik het pop-upmenu Formaat in de HTML-eigenschappencontrole of het submenu Formaat> Alineaopmaak om de standaardtags voor alinea's en koppen toe te passen. 1. Plaats de invoegpositie in de alinea of selecteer wat tekst in de alinea. 2.
Naar boven Tekst inspringen Als u de opdracht Inspringen gebruikt, wordt de HTML-tag blockquote op een alinea of tekst toegepast, waardoor de tekst aan beide kanten van de pagina inspringt. 1. Plaats de invoegpositie in de alinea die u wilt laten inspringen. 2. Selecteer Formaat > Inspringen of Uitspringen, of selecteer Lijst > Inspringen of Uitspringen in het contextmenu. Opmerking: U kunt meerdere inspringingen toepassen op een alinea.
Horizontale lijnen gebruiken Een horizontale lijn maken Een horizontale lijn wijzigen Horizontale lijnen zijn handig voor het ordenen van informatie. Op een pagina kunt u tekst en objecten visueel van elkaar scheiden met een of meer lijnen. Naar boven Een horizontale lijn maken 1. Plaats de invoegpositie in het documentvenster op de plaats waar u een horizontale lijn wilt invoegen. 2. Selecteer Invoegen >HTML > Horizontale lijn. Naar boven Een horizontale lijn wijzigen 1.
Lettertypecombinaties wijzigen Lettertypecombinaties wijzigen Een nieuwe combinatie toevoegen aan de lettertypelijst Gebruik de opdracht Lettertypenlijst bewerken om de lettertypecombinaties in te stellen die worden weergegeven in de eigenschappencontrole en het vervolgmenu Formaat > Lettertype. Met lettertypecombinaties wordt bepaald hoe tekst op uw webpagina wordt weergegeven in een browser.
Edge Web Fonts toevoegen aan de lettertypenlijst U kunt zowel Adobe Edge Web Fonts als weblettertypen aan de lettertypenlijst in Dreamweaver toevoegen. In de lettertypenlijst worden de door Dreamweaver ondersteunde lettertypestapels eerst weergegeven en vervolgens de weblettertypen en Edge Web Fonts.
alle lettertypemenu's in Dreamweaver. Lettertypen van het type EOT, WOFF, TTF en SVG worden ondersteund. 1. Selecteer Wijzigen > Lettertypen beheren. 2. Klik op de tab Lokale weblettertypen in het dialoogvenster dat verschijnt. 3. Klik op de knop Bladeren die hoort bij het type lettertype dat u wilt toevoegen. Als het gewenste lettertype bijvoorbeeld de EOT-indeling heeft, klikt u op de knop Bladeren die hoort bij EOT-lettertype. 4. Blader op uw computer naar de locatie met het lettertype.
Datums invoegen Dreamweaver bevat een handig Date-object, waarmee u de huidige datum kunt invoegen in elke gewenste notatie (met of zonder de tijd), waarbij u de optie hebt die datum bij te werken als u het bestand opslaat. Opmerking: De datums en tijden die worden weergegeven in het dialoogvenster Datum invoegen zijn niet de huidige datum en geven ook niet de datums/tijden aan die een bezoeker ziet als ze uw site weergeven. Het zijn alleen voorbeelden van hoe u deze gegevens wilt weergeven. 1.
Werken met middelen Overzicht van het deelvenster Middelen Een middel aan een document toevoegen Een kleur op tekst toepassen met behulp van het deelvenster Middelen URL's toewijzen aan afbeeldingen of tekst Elementen selecteren en bewerken Middelen opnieuw gebruiken op een andere site Opmerking: De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger.
In beide lijsten vallen middelen in een van de volgende categorieën: Afbeeldingen Kleuren Afbeeldingsbestanden in de indelingen GIF, JPEG of PNG. Kleuren die worden gebruikt in documenten en opmaakprofielen, inclusief kleuren voor tekst, achtergronden en koppelingen. URL's Externe koppelingen in uw huidige sitedocumenten, zoals FTP-, gopher-, HTTP-, HTTPS-, JavaScript-, e-mail- (mailto) en lokale bestandskoppelingen (file://).
Het samenstellen van de sitelijst kan enkele seconden in beslag nemen omdat Dreamweaver eerst de sitecache moet lezen. Bepaalde wijzigingen worden niet onmiddellijk in het deelvenster Middelen weergegeven. Wanneer u bijvoorbeeld een element toevoegt aan of verwijdert van de site, worden de wijzigingen pas in het deelvenster Middelen weergegeven als u de lijst Site vernieuwt door op de knop Sitelijst vernieuwen te klikken.
2. Voer in Live View de volgende stappen uit: a. Selecteer in het deelvenster Middelen de categorie Kleuren. b. Voer een van de volgende handelingen uit: Klik met de rechtermuisknop op de kleur in het deelvenster Middelen en klik op Kleurwaarde kopiëren. De kleurwaarde wordt naar het klembord gekopieerd. U kunt de kleurwaarde nu plakken (Ctrl+v, Cmd+v) in CSS ontwerpen. Sleep de kleur uit de voorvertoning en plaats de muisaanwijzer boven elementen in Live View.
Een element bewerken Wanneer u een element bewerkt in het deelvenster Middelen, varieert het gedrag naargelang het type element. Bij bepaalde elementen, zoals afbeeldingen, gebruikt u een externe editor, die automatisch wordt gestart als u voor dat type element een editor hebt gedefinieerd. U kunt alleen kleuren en URL's in de lijst Favorieten bewerken. Wanneer u sjablonen en bibliotheekitems bewerkt, brengt u de wijzigingen in Dreamweaver aan. 1.
Opmerking: In de lijst Favorieten kunt u zowel een map Favorieten als afzonderlijke elementen kopiëren. De elementen worden gekopieerd naar hun overeenkomstige locaties op de doelsite. Dreamweaver maakt indien nodig nieuwe mappen in de structuur van de doelsite. De middelen worden ook toegevoegd aan de lijst Favorieten van de doelsite. Opmerking: Als het door gekopieerde element een kleur of URL betreft, wordt het alleen weergegeven in de lijst Favorieten voor de doelsite.
Een lijst van favoriete elementen maken en beheren Favoriete elementen beheren Favoriete middelen toevoegen of verwijderen Een bijnaam voor een favoriet element maken Elementen groeperen in de map Favorieten Naar boven Favoriete elementen beheren De volledige lijst van alle herkende elementen kan voor bepaalde grote sites erg moeilijk te hanteren worden.
1. Selecteer in het deelvenster Middelen de optie Favorieten boven aan het paneel. 2. Selecteer een of meer elementen (of een map) in de lijst Favorieten. . 3. Klik op de knop Verwijderen uit Favorieten De elementen worden wel verwijderd uit de lijst Favorieten, maar niet uit de sitelijst. Als u een map Favorieten verwijdert, worden zowel de map als de gehele inhoud ervan verwijderd.
Afbeeldingen invoegen en bewerken Er zijn veel verschillende bestandsindelingen voor afbeeldingen, maar de drie bestandsindelingen voor afbeeldingen die meestal op webpagina's worden gebruikt, zijn GIF, JPEG en PNG. De bestandsindelingen GIF en JPEG worden het meest ondersteund en kunnen worden weergegeven in de meeste browsers. U kunt gemakkelijk afbeeldingen invoegen en bewerken via de gebruikersinterface van Dreamweaver.
Selecteer Invoegen > Afbeelding. Sleep een afbeelding uit het deelvenster Middelen (Venster > Middelen) naar de gewenste locatie in het documentvenster en ga vervolgens verder met stap 3. Sleep een afbeelding uit het deelvenster Bestanden naar de gewenste locatie in het documentvenster en ga vervolgens verder met stap 3. Sleep een afbeelding van het bureaublad naar de gewenste locatie in het documentvenster en ga vervolgens verder met stap 3. 2.
B en H De breedte en hoogte van de afbeelding in pixels. Als u een afbeelding invoegt op een pagina, worden deze tekstvakken automatisch bijgewerkt met de oorspronkelijke afmetingen van de afbeelding. Als u voor B en H waarden instelt die niet overeenkomen met de werkelijke breedte en hoogte van de afbeelding, wordt de afbeelding mogelijk niet goed weergegeven in een browser.
Nieuw voorbeeld Hiermee kunt u een nieuw voorbeeld weergeven van een afbeelding waarvan u de grootte hebt gewijzigd, zodat u de afbeeldingskwaliteit met de nieuwe grootte en vorm verbetert. Helderheid en contrast Verscherpen Past de helderheid en het contrast van een afbeelding aan. Past de scherpte van een afbeelding aan. Toegankelijkheidskenmerken van een afbeelding bewerken in code Als u toegankelijkheidskenmerken hebt ingevoegd voor een afbeelding, kunt u die waarden bewerken in de HTML-code. 1.
3. Als u de oorspronkelijke afmetingen van een element wilt herstellen, verwijdert u in de eigenschappencontrole de waarden in de tekstvakken B en H of klikt u op de knop Grootte opnieuw instellen in de eigenschappencontrole voor de afbeelding. De oorspronkelijke afmetingen van een afbeelding herstellen Klik op de knop Grootte opnieuw instellen in de eigenschappencontrole voor de afbeelding. Een nieuw voorbeeld weergeven van een afbeelding waarvan u de grootte hebt gewijzigd 1.
Dreamweaver. 1. Voer een van de volgende handelingen uit in het documentvenster: Dubbelklik op de voorlopige afbeelding. Klik op de tijdelijke aanduiding voor afbeeldingen om deze te selecteren en klik vervolgens in de eigenschappencontrole (Venster > Eigenschappen) op het mappictogram naast het tekstvak Bron. 2. Blader in het dialoogvenster Afbeeldingsbron naar de afbeelding waardoor u de tijdelijke aanduiding wilt vervangen en klik op OK.
Naar boven Afbeeldingen bewerken in Dreamweaver U kunt afbeeldingen in Dreamweaver opnieuw samplen, bijsnijden, optimaliseren en scherper maken. U kunt ook hun helderheid en contrast wijzigen. Beeldbewerkingsfuncties Dreamweaver bevat basisfuncties voor het bewerken van afbeeldingen waarmee u afbeeldingen kunt wijzigen zonder dat u een externe toepassing voor het bewerken van afbeeldingen, zoals Fireworks of Photoshop, hoeft te gebruiken.
Klik op het pictogram Uitsnijden in de eigenschappencontrole voor de afbeelding. Selecteer Wijzigen > Afbeelding > Uitsnijden. Er worden uitsnijgrepen weergegeven rond de geselecteerde afbeelding. 2. Pas de uitsnijgrepen aan totdat het vak het gebied van de afbeelding aangeeft dat u wilt behouden. 3. Dubbelklik binnen in het vak of druk op Enter om de selectie uit te snijden. 4.
1. Open de pagina die de afbeelding bevat die u wilt aanpassen, selecteer de afbeelding en ga op een van de volgende manieren te werk: Klik op de knop Helderheid/contrast in de eigenschappencontrole voor de afbeelding. Selecteer Wijzigen > Afbeelding > Helderheid/contrast. 2. Sleep de schuifregelaars voor Helderheid en Contrast om de instellingen aan te passen. Waarden kunnen variëren van –100 tot +100. 3. Klik op OK.
Opmerking: U kunt het effect van een rollover-afbeelding niet zien in de ontwerpweergave. Naar boven Een externe afbeeldingseditor gebruiken In Dreamweaver kunt u een geselecteerde afbeelding openen in een externe afbeeldingseditor. Als u het bewerkte afbeeldingsbestand opslaat en terugkeert naar Dreamweaver, worden alle wijzigingen die u in de afbeelding hebt aangebracht, weergegeven in het documentvenster. U kunt Fireworks instellen als primaire externe editor.
Selecteer Bewerken > Bewerken met externe editor en selecteer Bestandstypen/editors. 2. Klik in het dialoogvenster met voorkeuren voor Bestandstypen/editors op de knop Toevoegen (+) boven de lijst Extensies. Er wordt een tekstvak weergegeven in de lijst Extensies. 3. Typ de bestandsextensie van het bestandstype waarvoor u een editor wilt starten. 4. Klik op de knop Toevoegen (+) boven de lijst Editors om een externe editor voor het bestandstype te selecteren. 5.
Mediaobjecten toevoegen Mediaobjecten invoegen en bewerken Een externe editor openen voor mediabestanden Opgeven welke editor moet worden gestart vanuit Dreamweaver Ontwerpnotities gebruiken voor mediaobjecten Shockwave-films invoegen Video (niet-FLV) toevoegen Inhoud voor insteekmodules invoegen Problemen met insteekmodules oplossen Een ActiveX-besturingselement invoegen Een Java-toepassing invoegen Gedrag gebruiken voor het besturen van media Parameters gebruiken voor het beheren van mediaobjecten Naar b
5. Klik op OK om het mediaobject in te voegen. Opmerking: Als u op Annuleren klikt, verschijnt een voorlopig mediaobject in het document, maar worden er door Dreamweaver geen toegankelijkheidstags of -kenmerken aan gekoppeld. Als u een bronbestand wilt opgeven of afmetingen en andere parameters en kenmerken wilt instellen, gebruikt u de eigenschappencontrole voor elk object. U kunt toegankelijkheidskenmerken bewerken voor een object.
Naar boven Ontwerpnotities gebruiken voor mediaobjecten Zoals bij andere objecten in Dreamweaver kunt u Ontwerpnotities toevoegen aan een mediaobject. Ontwerpnotities zijn notities die zijn gekoppeld aan een bepaald bestand en die worden opgeslagen in een afzonderlijk bestand. U kunt Ontwerpnotities gebruiken om extra bestandsgegevens bij te houden die aan uw documenten zijn gekoppeld, zoals de bestandsnamen van afbeeldingsbronnen en opmerkingen over de bestandsstatus. 1.
vervolgens op een van de volgende manieren te werk: Ga naar de categorie Algemeen van het paneel Invoegen, klik op de knop Media en selecteer het pictogram Insteekmodule uit het menu . Selecteer Invoegen > Media > Insteekmodule. 2. Selecteer in het dialoogvenster dat verschijnt een inhoudsbestand voor een insteekmodule en klik op OK. 3. Stel de opties voor de insteekmodule in de eigenschappencontrole in. Naam Hiermee geeft u een naam op waarmee de insteekmodule wordt aangeduid voor scripts.
voor de ActiveX-besturingselementen. Klik op Parameters in de eigenschappencontrole om namen en waarden in te voeren voor eigenschappen die niet worden weergegeven in de eigenschappencontrole. Er is geen breed geaccepteerde standaardnotatie voor parameters voor ActiveXbesturingselementen. Als u wilt weten welke parameters u moet gebruiken, raadpleegt u de documentatie voor het ActiveX-besturingselement dat u gebruikt.
Code Het bestand dat de Java-code van de applet bevat. Klik op het mappictogram om naar een bestand te bladeren of typ een bestandsnaam. Basis De map die de geselecteerde applet bevat. Als u een applet selecteert, wordt dit tekstvak automatisch gevuld. Uitlijnen Hiermee wordt bepaald hoe het object wordt uitgelijnd op de pagina. Alt Alternatieve inhoud (meestal een afbeelding) die moet worden weergegeven als de browser van de gebruiker geen Java-applets ondersteunt of als Java is uitgeschakeld.
Video toevoegen Video's insluiten in webpagina's (HTML5) FLV-bestanden invoegen Naar boven Video's insluiten in webpagina's (HTML5) HTML5 ondersteunt video- en audiotags waarmee gebruikers video- en audiobestanden kunnen afspelen in een browser, zonder externe invoegtoepassing of speler. Dreamweaver ondersteunt coderingstips voor het toevoegen van video- en audiotags. Live View geeft de video weer en biedt een voorvertoning van de video die u in de webpagina insluit.
installatieoptie voor Flash Player weergegeven in plaats van de alternatieve inhoud. Als de gebruiker dit installatieprogramma niet accepteert, wordt de alternatieve inhoud op de pagina weergegeven. Ga naar het Video Technology Center op www.adobe.com/go/flv_devcenter_nl voor meer informatie over het werken met video. Een FLV-bestand invoegen 1. Selecteer Invoegen > Media >FLV. 2.
Hoogte De hoogte van het FLV-bestand in pixels. Als u wilt dat de exacte hoogte van het FLV-bestand wordt bepaald door Dreamweaver, klikt u op de knop Grootte detecteren. Als Dreamweaver de hoogte niet kan bepalen, moet u een waarde typen voor de hoogte. Opmerking: Totaal met skin is de breedte en hoogte van het FLV-bestand plus de breedte en hoogte van de geselecteerde skin. Beperken Hiermee behoudt u dezelfde verhouding tussen de breedte en hoogte van het video-onderdeel.
swfobject_modified.js expressInstall.swf FLVPlayer_Progressive.swf Het skinbestand (bijvoorbeeld Clear_Skin_1.swf) Houd er rekening mee dat Dreamweaver CS4 en latere versies twee extra afhankelijke bestanden gebruiken in vergelijking met Dreamweaver CS3. De eerste twee van deze bestanden (swfobject_modified.js en expressInstall.swf) worden geïnstalleerd in de map Scripts, die Dreamweaver maakt in de hoofdmap van uw site (als deze map nog niet bestaat). De andere twee bestanden (FLVPlayer_Progressive.
Voor Dreamweaver CS4 en later plaatst Dreamweaver Flash Player-detectiecode rechtstreeks in de objecttag die het FLV-bestand bevat. Voor Dreamweaver CS3 en eerder staat de detectiecode echter buiten de objecttag van het FLV-bestand. Als u FLV-bestanden wilt verwijderen van pagina's die zijn gemaakt met Dreamweaver CS3 of eerder, moet u daarom de FLV-bestanden verwijderen en de opdracht FLV-detectie verwijderen kiezen om de detectiecode te verwijderen. Selecteer Opdrachten > Flash-videodetectie verwijderen.
HTML5-video invoegen In Dreamweaver kunt u HMTL5-video invoegen in webpagina's. Het element HTML5-video biedt een standaardmanier om films of video's in te sluiten in webpagina's. Raadpleeg het artikel over HTML5-video op W3schools.com voor meer informatie over het element HTML5-video. HTML5-video invoegen De video voorvertonen in een browser Videozelfstudie HTML5-video toevoegen in Dreamweaver Naar boven HTML5-video invoegen 1. Plaats de cursor zich op de positie bevindt waar u de video wilt invoegen.
Gedempt: selecteer deze optie als u het audiogedeelte van de video wilt dempen. Flash-video: selecteer een SWF-bestand voor browsers die geen HTML5-video ondersteunen. Tekst voor alternatieven: geef de tekst op die moet worden weergegeven als de browser geen HTML5 ondersteunt. Vooraf laden: Geeft de voorkeuren van de auteur aan voor de wijze waarop de video moet worden geladen als de pagina wordt geladen. Als u Automatisch selecteert, wordt de volledige video geladen als de pagina wordt gedownload.
SWF-bestanden invoegen FLA-, SWF- en FLV-bestandstypen SWF-bestanden invoegen en bekijken FlashPaper-documenten invoegen Naar boven FLA-, SWF- en FLV-bestandstypen Voordat u Dreamweaver gebruikt om inhoud in te voegen die met Adobe Flash is gemaakt, moet u vertrouwd zijn met de volgende verschillende bestandstypen: FLA-bestand (.
Downloadinformatie voor Flash Player bewerken Wanneer u een SWF-bestand op een pagina invoegt, voegt Dreamweaver code in waarmee wordt gedetecteerd of de gebruiker over de juiste versie van Flash Player beschikt. Als dat niet het geval is, wordt op de pagina standaard alternatieve inhoud weergegeven waarmee de gebruiker wordt gevraagd om de meest recente versie te downloaden. U kunt deze alternatieve inhoud op elk moment wijzigen. Deze procedure is ook van toepassing op FLV-bestanden.
Meer Help-onderwerpen SWF-bestanden en DHTML-lagen Werken met de Flash-zelfstudie Juridische kennisgevingen | Online privacybeleid 410
Webwidgets toevoegen Een webwidget is een webpaginacomponent die bestaat uit HTML, CSS en JavaScript. Voorbeelden van webwidgets zijn onder andere accordeons, deelvensters met tabs en kalenders. Als u in Dreamweaver een persoonlijke selectie met webwidgets wilt maken, kunt u Adobe Widget Browser gebruiken. Dit is een AIR-toepassing waarmee u via een visuele interface kunt zoeken naar widgets en de widgets kunt configureren en voorvertonen. 1. Selecteer Invoegen > Widget. 2.
Geluid toevoegen Geluidsbestandsindelingen Koppelen naar een geluidsbestand Een geluidsbestand insluiten Naar boven Geluidsbestandsindelingen U kunt geluid toevoegen aan een webpagina. Er zijn verschillende typen geluidsbestanden en verschillende indelingen, waaronder .wav, .midi en .mp3. Factoren die u in overweging kunt nemen bij het kiezen van een indeling en een methode voor het toevoegen van geluid zijn het doel, uw publiek, de bestandsgrootte, de geluidskwaliteit en verschillen tussen browsers.
Als u geluid insluit, wordt het geluid rechtstreeks in de pagina opgenomen, maar wordt het geluid alleen afgespeeld als bezoekers van de site de juiste insteekmodule hebben voor het gekozen geluidsbestand. Sluit bestanden in als u het geluid wilt gebruiken als achtergrondmuziek of als u wilt bepalen hoe hard het wordt afgespeeld, hoe de speler eruit ziet op de pagina of wat de begin- en eindpunten van het geluidsbestand zijn.
HTML5-audio invoegen In Dreamweaver kunt u HMTL5-audio invoegen en voorvertonen in webpagina's. Het element HTML5-audio biedt een standaardmanier om audioinhoud in te sluiten in webpagina's. Raadpleeg het artikel over HTML5-audio op W3schools.com voor meer informatie of het element HTML5-audio. HTML5-audio invoegen De audio voorvertonen in een browser Naar boven HTML5-audio invoegen 1. Plaats de cursor zich op de positie bevindt waar u de audio wilt invoegen. 2. Selecteer Invoegen > Media > HTML5-audio.
Deelvenster Eigenschappen voor de HTML5-audio Naar boven De audio voorvertonen in een browser 1. Sla de webpagina op. 2. Selecteer Bestand > Voorvertoning in browser. Selecteer de browser waarin u de audio wilt voorvertonen. De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.
Taken automatiseren Taakautomatisering Gebruik van het paneel Historie Stappen herhalen Stappen in het paneel Historie toepassen op objecten Stappen kopiëren en plakken tussen documenten Opdrachten uit historiestappen maken en gebruiken Opdrachten vastleggen en opslaan Naar boven Taakautomatisering In het paneel Historie worden de stappen vastgelegd die u uitvoert om een bepaalde taak te voltooien.
maken. Meerdere stappen tegelijkertijd ongedaan maken Sleep de schuifregelaar dusdanig dat deze een willekeurige stap aanwijst, of klik links van een stap op het pad van de schuifregelaar. De schuifregelaar scrollt automatisch naar die stap, waarbij stappen tijdens het scrollen ongedaan worden gemaakt.
Als u meerdere objecten selecteert en er vervolgens stappen uit het paneel Historie op toepast, worden de objecten als één selectie beschouwd en probeert Dreamweaver de stappen toe te passen op de gecombineerde selectie. U kunt een reeks stappen echter ook toepassen op één object tegelijk. Als u de stappen wilt toepassen op elk object in een reeks objecten, dient u ervoor te zorgen dat de laatste stap in de reeks het volgende object in de groep selecteert.
kunt geen gebruikmaken van Bewerken > Kopiëren voor het kopiëren van stappen, maar u kunt wel Bewerken > Plakken gebruiken om stappen te plakken. Wees voorzichtig wanneer u stappen kopieert die een opdracht Kopiëren of Plakken bevatten: Gebruik Stappen kopiëren niet als een van de stappen bestaat uit de opdracht Kopiëren. Mogelijk kunt u dergelijke stappen niet op de gewenste manier plakken.
Een vastgelegde opdracht afspelen Selecteer Opdrachten > Opgenomen opdracht afspelen. Een vastgelegde opdracht opslaan 1. Selecteer Opdrachten > Opgenomen opdracht afspelen. 2. Selecteer de stap Opdracht uitvoeren die in de stappenlijst van het deelvenster Historie verschijnt en klik vervolgens op de knop Opslaan als opdracht. 3. Geef een naam op voor de opdracht en klik op OK. De opdracht verschijnt in het menu Opdrachten.
Over middelen en bibliotheken Over middelen Over bibliotheekitems Naar boven Over middelen Met Adobe® Dreamweaver® kunt u de elementen (middelen) bijhouden en bekijken die zijn opgeslagen op uw site, zoals afbeeldingen, films, kleuren, scripts en koppelingen. Ook kunt een element rechtstreeks slepen om dit in een pagina van het huidige document in te voegen. Middelen zijn beschikbaar via verschillende bronnen.
Juridische kennisgevingen | Online privacybeleid 422
Werken met bibliotheekitems Een bibliotheekitem maken Een bibliotheekitem invoegen in een document Bibliotheekitems bewerken en documenten bijwerken Markeren van bibliotheekitems aanpassen De eigenschappen van een bibliotheekitem bewerken Bibliotheekitems bewerkbaar in een document maken Gedrag in een bibliotheekitem bewerken Naar boven Een bibliotheekitem maken Bibliotheekitems zijn elementen die u opnieuw wilt gebruiken of regelmatig via uw website wilt bijwerken.
te werken, blijven de documenten gekoppeld aan het bibliotheekitem; u kunt deze later bijwerken. U kunt de naam van items wijzigen om hun verbinding met documenten of sjablonen te verbreken. U kunt items verwijderen uit de bibliotheek van de site en een ontbrekend bibliotheekitem opnieuw maken.
Naar boven Markeren van bibliotheekitems aanpassen U kunt de markeerkleur van bibliotheekitems aanpassen en markeringen weergeven of verbergen door het instellen van de voorkeuren voor Markeren. De markeerkleur van bibliotheekitems wijzigen 1. Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh). 2. Selecteer de categorie Markeren in de lijst aan de linkerzijde van het dialoogvenster Voorkeuren. 3.
Zorg er voor dat u exact dezelfde elementen selecteert, die ook voorkwamen in het oorspronkelijke bibliotheekitem. 9. Klik in het paneel Elementen op de knop Nieuw bibliotheekitem en geef het nieuwe item dezelfde naam als het item dat u hebt verwijderd. Gebruik daarbij dezelfde spelling en houd dezelfde hoofdletters en kleine letters aan. 10. Als u het bibliotheekitem in andere documenten van uw site wilt bijwerken, selecteert u Wijzigen > Bibliotheek > Pagina's bijwerken. 11.
Koppelingen en navigatie 427
Over koppelingen en navigatie Koppelingen Absolute, documentafhankelijke relatieve en hoofdmapafhankelijke relatieve paden Naar boven Koppelingen Nadat u een Dreamweaver-site hebt gedefinieerd voor het opslaan van documenten en HTML-pagina's van uw website, zult u uw documenten willen koppelen aan andere documenten. Dreamweaver biedt verschillende methoden voor het maken van koppelingen naar documenten, afbeeldingen en multimediabestanden, of software die kan worden gedownload.
Als u in contents.html een koppeling wilt maken naar hours.html (beide in dezelfde map), gebruikt u het relatieve pad “hours.html". Als u vanuit contents.html een koppeling wilt maken naar tips.html (in de submap resources), gebruikt u het relatieve pad resources/tips.html. Bij elke slash (/) gaat u een niveau omlaag in de bestandsstructuur. Als u vanuit contents.html een koppeling wilt maken naar index.html (in de hoofdmap, één niveau boven contents.html), gebruikt u het relatieve pad ../index.html.
Koppelingen maken Bestanden en documenten koppelen JavaScript-gedrag verbinden aan koppelingen Koppelingen naar documenten maken in de eigenschappencontrole Documenten koppelen met het pictogram Wijs bestand aan Koppelingen toevoegen met de opdracht Hyperlink Relatieve paden instellen voor nieuwe koppelingen Koppelingen maken naar specifieke locaties in een document E-mailkoppelingen maken Null- en scriptkoppelingen maken Koppelingen automatisch bijwerken Koppelingen wijzigen in de hele site Koppelingen tes
Naar boven JavaScript-gedrag verbinden aan koppelingen Aan elke koppeling in een document kunt u gedrag verbinden. U kunt bijvoorbeeld een van de volgende gedragingen verbinden aan gekoppelde elementen die u invoegt in een document. Tekst van statusbalk instellen bepaalt de tekst van een bericht en geeft dit weer in de statusbalk in de linkerbenedenhoek van het browservenster.
Als hetzelfde doel zal worden toegewezen aan alle koppelingen op uw pagina, kunt u dit in één keer instellen door Invoegen > HTML > Head-tags > Basis te selecteren en de gewenste doelinstellingen te definiëren. Zie Frame-inhoud met koppelingen controleren voor informatie over het richten van frames. Naar boven Documenten koppelen met het pictogram Wijs bestand aan 1. Selecteer tekst of een afbeelding in de ontwerpweergave van het documentvenster. 2.
bevindt. Dit doel is de standaardinstelling en hoeft u gewoonlijk niet te definiëren. _top laadt het gekoppelde bestand in het volledige browservenster en verwijdert daarbij alle frames. 5. Voer in het vak Tabindex een getal in voor de tabvolgorde. 6. Voer in het vak Titel een titel in voor de koppeling. 7. Voer in het vak Toegangstoets één letter op het toetsenbord in waarmee de koppeling in de browser kan worden geselecteerd. 8. Klik op OK.
Benoemde ankers maken 1. Ga naar de ontwerpweergave van het documentvenster en plaats de invoegpositie waar u het benoemde anker wilt invoegen. 2. Voer een van de volgende handelingen uit: Selecteer Invoegen > Benoemd anker. Druk op Control+Alt+A (Windows) of Command+Optie+A (Macintosh). Ga naar de categorie Algemeen in het deelvenster Invoegen en klik op de knop Benoemd anker. 3. Typ een naam voor het anker in het vak Naam anker en klik vervolgens op OK. (De naam van het anker mag geen spaties bevatten.
E-mailkoppelingen maken met de opdracht E-mailkoppeling invoegen 1. Ga naar de ontwerpweergave van het documentvenster en plaats de invoegpositie waar u de e-mailkoppeling wilt invoegen, of selecteer de tekst of afbeelding waarvan uw een emailkoppeling wilt maken. 2. Voer een van de volgende handelingen uit om de koppeling in te voegen: Selecteer Invoegen > E-mailkoppeling. Ga naar de categorie Algemeen in het deelvenster Invoegen en klik op de knop Emailkoppeling. 3.
Scriptkoppelingen maken 1. Selecteer tekst, een afbeelding of een object in de ontwerpweergave van het documentvenster. 2. In het vak Koppeling in de eigenschappencontrole typt u javascript: gevolgd door JavaScript-code of een functienaam. (Typ geen spaties tussen de dubbele punt en de code of functienaam.) Naar boven Koppelingen automatisch bijwerken Dreamweaver kan koppelingen in en naar een document bijwerken wanneer u een document in de lokale website verplaatst of de naam ervan wijzigt.
cache wilt laden. Als u op Ja klikt, laadt Dreamweaver de cache en worden alle koppelingen naar het gewijzigde bestand bijgewerkt. Als u op Nee klikt, wordt de wijziging geregistreerd in de cache, maar laadt Dreamweaver de cache niet en worden koppelingen niet bijgewerkt.
Naar boven Koppelingen testen in Dreamweaver Koppelingen zijn niet actief in Dreamweaver. Dat wil zeggen dat u gekoppelde documenten niet kunt openen door op de koppeling in het documentvenster te klikken. Voer een van de volgende handelingen uit: Selecteer de koppeling en kies Wijzigen > Gekoppeld bestand openen. Houd de Control-toets (Windows) of de Command-toets (Macintosh) ingedrukt en dubbelklik op de koppeling. Opmerking: Het gekoppelde document moet zich op uw lokale schijf bevinden.
Snelmenu's Over snelmenu's Snelmenu's invoegen Snelmenuonderdelen bewerken Problemen met snelmenu's oplossen Naar boven Over snelmenu's Een snelmenu is een pop-upmenu met koppelingen naar documenten of bestanden dat zichtbaar is voor bezoekers van de site. U kunt koppelingen maken naar documenten in uw website, documenten op andere websites, e-mailkoppelingen, koppelingen naar afbeeldingen en alle andere typen koppelingen die een browser kan openen. Elke optie in een snelmenu is gekoppeld aan een URL.
2. Selecteer het snelmenuobject in de ontwerpweergave van het documentvenster. 3. Klik in de eigenschappencontrole op de knop Lijstwaarden. 4. In het dialoogvenster Lijstwaarden kunt u wijzigingen aanbrengen in de menu-onderdelen. Klik vervolgens op OK.
Navigatiebalken Over navigatiebalken Naar boven Over navigatiebalken De navigatiebalkfunctie wordt vanaf Dreamweaver CS5 niet meer ondersteund. Als u een navigatiebalk wilt gebruiken, kunt u het beste de Spry-menubalkwidget gebruiken.
Afbeeldingen met hyperlinks Afbeeldingen met hyperlinks Afbeeldingen met hyperlinks aan de clientzijde invoegen Hotspots in afbeeldingen met hyperlinks aanpassen Naar boven Afbeeldingen met hyperlinks Een afbeelding met hyperlink is een afbeelding die is ingedeeld in gebieden die hotspots worden genoemd. Wanneer een gebruiker op en hotspot klikt, wordt een actie uitgevoerd (er wordt bijvoorbeeld een bestand geopend).
_top laadt het gekoppelde bestand in het volledige browservenster en verwijdert daarbij alle frames. Opmerking: De optie Doel is niet toegankelijk totdat u een koppeling hebt gedefinieerd voor de geselecteerde hotspot. 7. Typ in het tekstvak Alt alternatieve tekst voor weergave in tekstbrowsers of browsers die afbeeldingen handmatig downloaden. In sommige browsers wordt deze tekst weergegeven als knopinfo wanneer de gebruiker de muisaanwijzer boven de hotspot houdt. 8.
Problemen met koppelingen oplossen Zoeken naar verbroken, externe en zwevende koppelingen Verbroken koppelingen herstellen Zoeken naar verbroken, externe en zwevende koppelingen Naar boven Met de functie Koppelingen controleren kunt u zoeken naar verbroken koppelingen en zwevende bestanden (bestanden die op de site aanwezig zijn maar waarnaar niet wordt verwezen in andere bestanden op de site). U kunt zoeken in geopende bestanden, delen van de lokale site of in de hele lokale site.
Koppelingencontrole verwijderen door het gewenste bestand te selecteren in de lijst en op de Delete-toets te drukken. 4. Sla rapporten op door op de knop Rapport opslaan in het paneel Koppelingencontrole te klikken. Naar boven Verbroken koppelingen herstellen Nadat u koppelingen hebt gecontroleerd, kunt u verbroken koppelingen en verwijzingen naar afbeeldingen direct in het paneel Koppelingencontrole herstellen of bestanden in de lijst openen en de koppelingen herstellen in de eigenschappencontrole.
jQuery 446
jQuery UI-widgets gebruiken in Dreamweaver In Dreamweaver CC en hoger zijn Spry-widgets vervangen door jQuery-widgets. U kunt de bestaande Spry-widgets op uw pagina nog steeds wijzigen, maar u kunt geen nieuwe Spry-widgets toevoegen. Widgets zijn kleine webtoepassingen die zijn geschreven in talen als DHTML en JavaScript en die kunnen worden ingevoegd en uitgevoerd in een webpagina.
Juridische kennisgevingen | Online privacybeleid 448
jQuery-effecten gebruiken in Dreamweaver In Dreamweaver CC zijn Spry-effecten vervangen door jQuery-effecten. U kunt de bestaande Spry-effecten op uw pagina nog steeds wijzigen, maar u kunt geen nieuwe Spry-effecten toevoegen. jQuery-effecten toevoegen Op gebeurtenissen gebaseerde jQuery-effecten jQuery-effecten verwijderen Naar boven jQuery-effecten toevoegen 1. Selecteer in de ontwerpweergave of codeweergave van uw Dreamweaver-document het element waarop u een jQuery-effect wilt toepassen. 2.
Wanneer u een jQuery-effect toepast, wordt het effect standaard toegewezen aan de gebeurtenis onClick. U kunt de gebeurtenis voor activering van het effect wijzigen met het deelvenster Gedrag. 1. Selecteer het gewenste pagina-element. 2. Klik in het deelvenster Venster > Gedrag op het pictogram Gebeurtenissen instellen weergeven. 3. Klik op de rij die overeenkomt met het effect dat momenteel is toegepast.
Voorvertonen 451
Webpagina's voorvertonen en inspecteren op meerdere apparaten U kunt nu met Dreamweaver op meerdere apparaten tegelijk webpagina's testen die klaar zijn voor productie. U kunt zien hoe de webpagina in verschillende vormfactoren wordt herschikt. Daarnaast kunt u de interactieve functies op de pagina's testen. Dit kunt u allemaal doen zonder mobiele apps te installeren of apparaten fysiek aan te sluiten op uw computer.
de apparaten. Naar boven Ondersteunde apparaten Alle Android- en iOS-apparaten Naar boven Voorvertoning van webpagina's op apparaten 1. Start Dreamweaver op uw computer en open de webpagina waarvan u een voorvertoning op apparaten wilt bekijken. 2. Klik op het pictogram Voorvertoning van apparaat op de documentwerkbalk. Het pictogram Voorvertoning van apparaat Het pop-upvenster Voorvertoning van apparaat wordt weergegeven met een QR-code en een korte URL.
4. Er wordt een aanmeldingsscherm weergegeven op de apparaten. Meld u aan met uw Adobe ID-referenties. Zorg ervoor dat u dezelfde Adobe ID als voor Dreamweaver/Creative Cloud gebruikt. Het aanmeldingsscherm op apparaten 5. Als u bent aangemeld, worden de namen van de verbonden apparaten weergegeven in het pop-upvenster Voorvertoning van apparaat. U ziet daarnaast een voorvertoning van uw webpagina op het verbonden apparaat.
Als u de webpagina op een bepaald apparaat wilt controleren, klikt u op het controlepictogram dat overeenkomt met de apparaatnaam in het pop-upvenster Voorvertoning van apparaat. De viewport in Dreamweaver is zo ingesteld dat deze overeenkomt met de viewport van het bijbehorende apparaat en de controlemodus wordt geactiveerd op het specifieke apparaat en in Dreamweaver. Klik opnieuw op het controlepictogram in Dreamweaver om de controlemodus te sluiten.
Pagina's voorvertonen Pagina's voorvertonen in Dreamweaver Pagina's voorvertonen in browsers Opmerking: de gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger. Zie dit artikel voor meer informatie. In de ontwerpweergave krijgt u een idee van hoe de pagina er op het web uitziet, maar worden pagina's niet exact zo weergegeven als in browsers.
u het verwante bestand vanaf de werkbalk Verwante bestanden, boven het document. 4. Als u wijzigingen aanbrengt in de codeweergave of in een verwant bestand, vernieuwt u Live View door op de werkbalk Document op de knop Vernieuwen te klikken of door op F5 te drukken. 5. Als u weer naar de bewerkbare ontwerpweergave wilt terugkeren, klikt u opnieuw op de knop Live View.
Wijzigingen in Live code markeren Hiermee schakelt u markeringen voor wijzigingen in Live code in of uit. De Live View-pagina in een nieuw tabblad bewerken Hiermee kunt u nieuwe tabbladen openen voor sitedocumenten waar u naartoe bladert met de werkbalk Browsernavigatie of de functie Koppelingen volgen. U moet eerst naar het document bladeren en De Live View-pagina in een nieuw tabblad bewerken selecteren voor u een nieuw tabblad kunt maken.
Als u inhoud wilt voorvertonen die is gekoppeld via hoofdmapafhankelijke paden, plaatst u het bestand op een externe server en kiest u Bestand > Voorvertonen in browser om het bestand weer te geven. 3. Sluit de pagina in de browser wanneer u klaar bent met testen. Voorkeuren voor voorbeeld in browser instellen U kunt voorkeuren instellen die door de browser moeten worden gebruikt als u een voorbeeld van een site bekijkt en standaard primaire en secundaire browsers definiëren. 1.
Codering 460
Algemene informatie over coderen in Dreamweaver Ondersteunde talen Ongeldige opmaak Automatische codewijzigingen XHTML-code Gewone uitdrukkingen Code voor servergedrag Naar boven Ondersteunde talen Naast tekstverwerkingsmogelijkheden biedt Adobe® Dreamweaver® diverse andere functies, zoals coderingstips die u helpen bij het schrijven van code in de volgende talen: HTML XHTML CSS JavaScript ColdFusion Markup Language (CFML) VBScript (voor ASP) C# en Visual Basic (voor ASP.
niet over criteria beschikt om deze tags te beoordelen. Als een niet-herkende tag overlapt met een andere tag (bijvoorbeeld text), markeert Dreamweaver deze als fout maar wordt de code niet herschreven. U kunt Dreamweaver echter ook zo instellen dat ongeldige code (geel) wordt gemarkeerd in de codeweergave. Wanneer u een gemarkeerd gedeelte selecteert, wordt in de eigenschappencontrole informatie weergegeven over hoe de fout kan worden gecorrigeerd.
hun volledige vorm worden gebruikt. Alle kenmerkwaarden moeten tussen aanhalingstekens staan. Er worden aanhalingstekens geplaatst rondom kenmerkwaarden in de code die wordt gegenereerd en wanneer XHTML wordt opgeschoond. De volgende elementen moeten het kenmerk id en het kenmerk name bevatten: a, applet, form, frame, iframe, img en map. Inleiding is bijvoorbeeld niet geldig.
of “pension” . Eén teken behalve een nieuwe regel. Met .an vindt u “Jan” en “kan” in de zin “Jan kan goed koken” x|y x of y. Met FF0000|0000FF vindt u “FF0000” in bgcolor="#FF0000" en “0000FF” in font color="#0000FF" {n} Het voorgaande teken komt exact het opgegeven aantal keren (n) voor.
\w Een alfanumeriek teken, met inbegrip van het onderstrepingsteken. Equivalent met [A-Za-z0-9_]. Met b\w* vindt u “blaffende” in “de blaffende hond” en zowel “brave” als “bruine” in “de brave bruine hond” \W Elk niet-alfanumeriek teken. Equivalent met [^A-Za-z0-9_]. Met \W vindt u “&” in “Jan&Martijn” en “%” in “100%” Ctrl+Enter of Shift+Enter (Windows) of Control+Return of Shift+Return of Command+Return (Macintosh) Enter-teken.
De codeeromgeving opzetten Coderingsgerichte werkruimten gebruiken Code weergeven Sneltoetsen aanpassen Bestanden standaard openen in de codeweergave Naar boven Coderingsgerichte werkruimten gebruiken U kunt de codeeromgeving in Dreamweaver aanpassen aan uw manier van werken. U kunt bijvoorbeeld de manier wijzigen waarop u code weergeeft, verschillende sneltoetsen instellen of uw favoriete tagbibliotheek importeren en gebruiken.
Zie Code invoegen met de werkbalk Codering als u de werkbalk Codering, links in het venster, wilt gebruiken. Naar boven Sneltoetsen aanpassen U kunt uw favoriete sneltoetsen gebruiken in Dreamweaver. Als u gewend bent om specifieke sneltoetsen te gebruiken, bijvoorbeeld Shift+Enter om een regeleinde in te voegen of Ctrl+G om naar een bepaalde positie in de code te gaan, kunt u deze sneltoetsen via de sneltoetseditor toevoegen aan Dreamweaver. Zie Sneltoetsen aanpassen voor instructies.
Coderingsvoorkeuren instellen Coderingsvoorkeuren Het uiterlijk van de code instellen De codeopmaak wijzigen Voorkeuren voor het herschrijven van code instellen Het kleurenthema voor de codeweergave instellen Een externe editor gebruiken Opmerking: De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger. Zie dit artikel voor meer informatie.
Zo wordt een spatie vervangen door een stip, een tab door een dubbele chrevron en een regeleinde door een alineamarkering. Opmerking: Tijdelijke regeleinden die Dreamweaver gebruikt voor tekstterugloop, worden niet weergegeven met een alineamarkering. Ongeldige code markeren Als u deze optie inschakelt, markeert Dreamweaver alle ongeldige HTML-code in geel. Wanneer u een ongeldige tag selecteert, wordt in de eigenschappencontrole informatie weergegeven over de manier waarop u de fout kunt corrigeren.
invoegt, wordt een reeks spaties niet omgezet in een tab. Type regeleinde Hiermee kunt u het type externe server (Windows, Macintosh of UNIX) opgeven die als host optreedt voor de externe site. Als u het juiste type regeleindeteken selecteert, zorgt u ervoor dat de HTML-broncode correct wordt weergegeven op de externe server. Deze instelling is ook handig als u werkt met een externe teksteditor die alleen bepaalde soorten regeleinden herkent.
Naar boven Voorkeuren voor het herschrijven van code instellen Met de voorkeuren voor het herschrijven van code kunt u opgeven of en hoe Dreamweaver de code moet wijzigen wanneer u documenten opent, formulierelementen kopieert en plakt en kenmerkwaarden en URL's invoert met hulpmiddelen, zoals de eigenschappencontrole. Deze voorkeuren zijn niet van toepassing wanneer u HTML of scripts bewerkt in de codeweergave.
invoert of bewerkt met hulpmiddelen van Dreamweaver, zoals de eigenschappencontrole, alleen geldige tekens bevatten. Speciale tekens in URL's coderen met % Deze optie werkt op dezelfde manier als de voorgaande optie, maar er wordt een andere methode gebruikt om speciale tekens te coderen. Deze codeermethode (met het procentteken) is vaker compatibel met oudere browsers, maar werkt minder goed met tekens uit sommige talen.
Kant-en-klare thema's voor de codeweergave 4. Als u het thema wilt aanpassen, neemt u de volgende stappen: 1. Als u de achtergrondkleuren wilt wijzigen, gebruikt u de volgende opties: Standaardachtergrond Hiermee stelt u standaardachtergrondkleur voor de codeweergave en de codecontrole in. Verborgen tekens Hiermee stelt u de kleur voor verborgen tekens in. Live code van achtergrond Hiermee stelt u achtergrondkleur voor de weergave Live code in. De standaardkleur is geel.
Kleurenschema bewerken en stel de tekstkleur, achtergrondkleur en (optionele) stijl (vet, cursief of onderstrepen) in. De voorbeeldcode in het voorbeeldvak verandert en toont de nieuwe kleuren en stijlen. Het kleurenschema voor het documenttype HTML bewerken 3. Als u de standaardinstellingen van een thema wilt herstellen, klikt u op Standaardinstellingen herstellen. 5. Klik op Toepassen om de wijzigingen op te slaan.
bestaande thema's op de volgende locaties hergebruiken: Voor Windows: C:\Program Files\Adobe\Adobe Dreamweaver CC 2015\configuration\themes Voor Mac: Applications/Adobe Dreamweaver CC 2015/configuration/themes/ Kopieer bijvoorbeeld Raven.xml en defaultColorsRaven.xml en wijzig de naam van de gekopieerde bestanden in MyTheme.xml en defaultColorsMyTheme.xml. 5. Start Dreamweaver opnieuw en controleer de lijst met standaardthema's (Voorkeuren > Codekleuren) om na te gaan of uw thema wordt vermeld.
Voorkeuren voor codekleuren wijzigen voor een sjabloon Bibliotheken, tags en kenmerken bewerken Live code voorvertonen Voorkeuren voor coderingstips instellen Bestanden standaard openen in de codeweergave De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.
Code schrijven en bewerken Coderingstips Tips voor sitespecifieke code Code invoegen met de werkbalk Codering Code invoegen met het deelvenster Invoegen Code invoegen met Emmet Tags invoegen met de tagkiezer HTML-commentaar invoegen Code kopiëren en plakken Voorvertoningen van afbeeldingen en kleuren in de codeweergave Code analyseren Tags bewerken met tageditors Code bewerken met het contextmenu Coderen Een servertaaltag bewerken met de eigenschappencontrole Codeblokken inspringen Naar gerelateerde code na
ingebouwd. U kunt deze aangepaste klassen zelf schrijven of ze toevoegen via bibliotheken van derden, zoals Prototype. De lijst met coderingstips verdwijnt wanneer u op Backspace (Windows) of Delete (Macintosh) drukt. Zie www.adobe.com/go/lrvid4048_dw voor een videozelfstudie over coderingstips. Ga naar www.adobe.com/go/dw10javascript_nl voor een video-overzicht van het technische Dreamweaverteam over JavaScript-ondersteuning in Dreamweaver.
coderingstips voor CSS-stijlen, selecteert u Stijllijst vernieuwen in de lijst met coderingstips. Als de ontwerpweergave zichtbaar is, wordt soms tijdelijk ongeldige code in de ontwerpweergave weergegeven nadat u Stijlenlijst vernieuwen hebt geselecteerd. Druk op F5 nadat u klaar bent met het invoegen van de stijl om die ongeldige code uit de ontwerpweergave te verwijderen. 4. Als u een afsluitende tag wilt invoegen, typt u
of Spry-coderingstips wilt weergeven, kunt u deze uitschakelen in de voorkeuren voor coderingstips. U kunt ook voorkeuren opgeven voor de vertragingstijd van coderingstips en sluitende tags. Zelfs als coderingstips zijn uitgeschakeld, kunt u een pop-uptip weergeven in de codeweergave door op Ctrl+spatiebalk te drukken. 1. Selecteer Bewerken > Voorkeuren. 2. Selecteer Coderingstips in de lijst Categorie aan de linkerkant. 3.
Opmerking: u kunt de bestaande standaardframeworkstructuren niet verwijderen of hernoemen. 2. Geef in het tekstvak voor de subhoofdmap de subhoofdmap op waarin u de bestanden van uw framework bewaart. Klik op het mappictogram naast het tekstvak om naar de locatie van de frameworkbestanden te bladeren. In Dreamweaver wordt een bestandsstructuur weergegeven met de mappen die de frameworkbestanden bevatten.
dialoogvenster. 3. Geef een nieuwe naam op voor de structuur en klik op Naam wijzigen. Opmerking: Als de naam die u opgeeft, al wordt gebruikt, wordt u in Dreamweaver gevraagd om een andere naam op te geven of te bevestigen dat u de structuur met dezelfde naam wilt overschrijven. U kunt de standaardframeworkstructuren niet verwijderen. Bestanden of mappen toevoegen aan een sitestructuur U kunt bestanden of mappen toevoegen die zijn gekoppeld met uw framework.
Codenavigator tonen Hiermee geeft u de codenavigator weer. Zie Navigeren naar gerelateerde code voor meer informatie. Alle uitvouwen Hiermee herstelt u de samengevouwen code. Bovenliggende tag selecteren Hiermee selecteert u de inhoud en de openingtags en afsluitende tags van de regel waarin u de invoegpositie hebt geplaatst. Als u meerdere keren op deze knop klikt en uw tags zijn in evenwicht, worden in Dreamweaver uiteindelijk de meest buitenste html- en /html-tags geselecteerd.
toegepast. Commentaar verwijderen Hiermee verwijdert u commentaartags uit de geselecteerde code. Als een selectie geneste commentaren bevat, worden alleen de buitenste commentaartags verwijderd. Tags rondom plaatsen Hiermee plaatst u de tags die u in de Snelle tageditor hebt geselecteerd, rond de code. Recent gebruikte fragmenten Hiermee kunt u recent gebruikte codefragmenten uit het deelvenster Fragmenten invoegen. Zie Werken met codefragmenten voor meer informatie.
niet alle tags. Als u de keuze wilt hebben uit meer tags, gebruikt u de tagkiezer. Naar boven Code invoegen met Emmet Emmet is een insteekmodule voor snelle codering en het genereren van HTML- en CSS-code. U kunt nu Emmet-afkortingen gebruiken in de codeweergave of codecontrole in Dreamweaver en op de Tab-toets drukken om deze afkortingen uit te breiden naar HTML-opmaak of CSS. HTML-afkortingen worden uitgevouwen in HTML- en PHP-pagina's.
1 2 3 4 5 -webkit-border-radius: ; -moz-border-radius: ; border-radius: ; Naar boven Tags invoegen met de tagkiezer Met de tagkiezer kunt u elke tag uit de tagbibliotheken van Dreamweaver (waaronder ook ColdFusion- en ASP.NET-bibliotheken) in uw pagina invoegen. 1. Plaats de invoegpositie in de code, klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) en selecteer Tag invoegen. De tagkiezer verschijnt.
Commentaarmarkeringen weergeven in de ontwerpweergave Selecteer Weergave > Visuele hulpmiddelen > Onzichtbare elementen. Zorg dat de optie Commentaar is geselecteerd bij Onzichtbare elementen omdat de commentaarmarkering anders niet verschijnt. Een bestaand commentaar bewerken In de codeweergave zoekt u het commentaar en bewerkt u de tekst ervan. In de ontwerpweergave selecteert u de commentaarmarkering, bewerkt u de tekst van het commentaar in de eigenschappencontrole en klikt u in het documentvenster.
Voorvertoning van afbeeldingen in de codeweergave Voorvertoning van kleuren Houd de muis boven kleurwaarden om een voorvertoning van kleuren in de codeweergave. De volgende indelingen worden ondersteund: 3 en 6 cijfers hexadecimale kleurwaarden: #ff0000; RGB: rgb(0, 0, 0); RGBA: rgba(0, 255, 228,0.5); HSL: hsl(120, 100%, 50%); HSLA: hsla(120, 60%, 70%, 0.3); Vooraf gedefinieerde kleurnamen, zoals olijfolie, blauwgroen, rood.
fouten geïdentificeerd. In het deelvenster Uitvoer wordt een lijst van de fouten en waarschuwingen weergegeven die door linting worden gedetecteerd. Zie Linting voor code gebruiken voor meer informatie. Bovendien geeft Dreamweaver ook een snelle voorvertoning van fouten in de kolom regelnummer van de onjuiste regel. Het regelnummer wordt in het rood weergegeven om aan te geven dat het fouten bevat en wanneer u de muisaanwijzer eroverheen beweegt, wordt een korte beschrijving van de fout weergegeven.
Macintosh de code negeert. Caio-hack toepassen Hiermee worden commentaartags rond de geselecteerde CSScode geplaatst die ervoor zorgen dat Netscape Navigator 4 de code negeert. Commentaar verwijderen Hiermee verwijdert u commentaartags uit de geselecteerde code. Als een selectie geneste commentaren bevat, worden alleen de buitenste commentaartags verwijderd. Hack met backslash-commentaar verwijderen Hiermee worden commentaartags uit de geselecteerde CSS-code verwijderd.
U kunt de code in een servertaaltag (zoals een ASP-tag) bewerken zonder de codeweergave in te schakelen door de eigenschappencontrole te gebruiken. 1. In de ontwerpweergave selecteert u het visuele pictogram van de tag voor de servertaal. 2. Klik in de eigenschappencontrole op de knop Bewerken. 3. Breng de wijzigingen aan in de tagcode en klik op OK.
pagina klikt. De codenavigator geeft koppelingen weer naar de code die invloed heeft op het gebied waarop u hebt geklikt. Klik buiten de codenavigator om deze te sluiten. Opmerking: U kunt de codenavigator ook openen door op het symbool van de codenavigator te klikken Dit symbool wordt bij de invoegpositie op de pagina weergegeven wanneer de muis 2 seconden niet is gebruikt. Met de codenavigator naar code navigeren 1. Open de codenavigator vanuit het gebied op de pagina waarin u bent geïnteresseerd. 2.
Klik in de codecontrole op de knop Codenavigatie ({ }) op de werkbalk. 3. Selecteer een functienaam om naar die functie in de code te springen. Naar boven JavaScript uitpakken De JavaScript Extractor (JSE) verwijdert (bijna) alle JavaScript uit uw Dreamweaver-document, exporteert het naar een extern bestand en koppelt het extern bestand aan uw document.
document.write() of document.writeln() bevatten. Scriptblokken in het head-gedeelte van het document die functiehandtekeningen bevatten met betrekking op EOLAS-afhandelingscode; deze maken immers gebruik van document.write(). Scriptblokken in het hoofdgedeelte van het document, tenzij de blokken alleen constructors van Spry-widgets of Spry-gegevenssets bevatten. Dreamweaver kent automatisch id's toe aan elementen die nog geen id hebben. Als u liever een andere id hebt, kunt u ze bewerken in het tekstvak Id.
Code Hiermee geeft u op dat de code moet worden weergegeven in het deelvenster Voorvertoning. 5. Klik op OK. Een codefragment bewerken of verwijderen Selecteer een fragment in het deelvenster Fragmenten en klik op de knop Fragment bewerken of Verwijderen onder in het deelvenster. Mappen met codefragmenten maken en codefragmenten beheren 1. Klik op de knop Map voor nieuwe fragmenten onder in het deelvenster Fragmenten. 2. Sleep fragmenten desgewenst naar de nieuwe map of naar andere mappen.
tekst in. Klik daarna op een van de zoekknoppen of een van de vervangknoppen. 4. Klik op de knop Sluiten. 5. Als u nogmaals wilt zoeken zonder het dialoogvenster Zoeken en vervangen weer te geven, drukt u op F3 (Windows) of Command+G (Macintosh). Naar boven Zoekpatronen opslaan en terughalen U kunt zoekpatronen opslaan en later opnieuw gebruiken. Een zoekpatroon opslaan 1. Stel in het dialoogvenster Zoeken en vervangen (Bewerken > Zoeken en vervangen) de parameters voor de zoekopdracht in. 2.
kenmerk of het trefwoord waarop u klikte. 2. Als u het tekstformaat in het deelvenster Referentie wilt aanpassen, selecteert u Groot lettertype, Normale grootte lettertype of Klein lettertype in het optiemenu (het pijltje in de rechterbovenhoek van het deelvenster). Voorbeeldcode in een document plakken 1. Klik ergens in de voorbeeldcode in het deelvenster Referentie. De hele voorbeeldcode wordt gemarkeerd. 2. Selecteer Bewerken > Kopiëren en plak de voorbeeldcode in het document in de codeweergave.
Het menu met tips gebruiken in de Snelle tageditor W3C Document Object Model Zelfstudie over coderingstips Controleren of tags en haakjes in evenwicht zijn Overzicht van de werkbalk Codering Werkbalken weergeven Het deelvenster Invoegen gebruiken De tagbibliotheken van Dreamweaver Samengevouwen codefragmenten plakken en verplaatsen Codefragmenten samenvouwen en uitvouwen Uw computer instellen voor de ontwikkeling van toepassingen Verwante bestanden openen Zelfstudie codenavigator Spry-pagina's visueel opbou
Code samenvouwen U kunt codefragmenten samenvouwen en uitvouwen, zodat u verschillende delen van uw document kunt bekijken zonder de schuifbalk te gebruiken. Als u bijvoorbeeld alle CSS-regels in de head-tag wilt weergeven die van toepassing zijn op een div-tag verderop op de pagina, kunt u alle code tussen de head-tag en de div-tag zo samenvouwen dat u beide codesecties tegelijk kunt zien. U kunt nu code invouwen in HTML-, PHP-, XML- en SVG-bestanden op basis van tagblokken.
Naar boven Samengevouwen codefragmenten kopiëren en verplaatsen U kunt samengevouwen codefragmenten kopiëren en plakken in hetzelfde document of in andere documenten en toepassingen. U kunt samengevouwen codefragmenten ook verplaatsen door de fragmenten te slepen in de codeweergave. Een samengevouwen codefragment kopiëren en plakken 1. Klik op het samengevouwen codefragment om het fragment te selecteren. 2. Selecteer Bewerken > Kopiëren. 3. Plaats de cursor op het punt waar u de code wilt plakken. 4.
Linting voor code gebruiken Of u nu net begint met code schrijven of al veel ervaring hebt, er is altijd een kans dat er per ongeluk of vanwege onvoldoende kennis fouten in uw code sluipen. Wanneer de webpagina of een gedeelte ervan er niet uitziet zoals u had verwacht, wordt u gedwongen de code te controleren op syntaxis- of logische fouten. Foutopsporing kan zeer inspannend en tijdrovend zijn, met name bij complexe implementaties.
CSS: DW.csslintrc JS: DW.jshintrc Als u deze bestanden wilt openen en bewerken, moet u de volgende stappen uitvoeren: 1. Klik op Bewerken > Voorkeuren (Win) of Dreamweaver > Voorkeuren (Mac). 2. Selecteer Linting in de lijst Categorie. 3. Klik in de sectie Regelset bewerken op het vereiste bestandstype en klik op Bewerken en wijzigingen toepassen. Het bijbehorende configuratiebestand wordt geopend in Dreamweaver. 4. Bewerk de regels voor linting of voeg regels toe aan de configuratiebestanden.
Geel - Het huidige document bevat alleen waarschuwingen Groen - Het huidige document bevat geen fouten U kunt het lintingpictogram op de statusbalk ook gebruiken als schakelfunctie voor het deelvenster Uitvoer (openen/sluiten) als het pictogram rood of geel is (niet groen). De regels met fouten of waarschuwingen worden respectievelijk rood en geel gemarkeerd. Dubbelklik op een bericht in het deelvenster Uitvoer om naar de regel te gaan waarin de fout is opgetreden.
Code optimaliseren Code opschonen Controleren of tags en haakjes in evenwicht zijn Controleren op browsercompatibiliteit XML-documenten valideren Documenten valideren met W3C-validatie Voorkeuren voor de validatiefunctie instellen Pagina's XHTML-compatibel maken Naar boven Code opschonen U kunt automatisch lege tags verwijderen, geneste font-tags combineren en rommelige of onleesbare HTML- of XHTML-code verbeteren.
kunnen worden bijgewerkt wanneer sjablonen en bibliotheekitems worden bijgewerkt. Als u deze optie selecteert wanneer u code opschoont in een document dat op een sjabloon is gebaseerd, wordt het document losgekoppeld van de sjabloon. Zie Een document loskoppelen van een sjabloon voor meer informatie. Specifieke tag(s) verwijderen Hiermee verwijdert u de tags die u opgeeft in het aangrenzend tekstvak.
CSS opsporen die voor problemen zorgen in bepaalde browsers. Met deze functie kunt u ook controleren of de code in uw documenten eventuele CSS-eigenschappen of -waarden bevat die niet worden ondersteund door uw doelbrowsers. Opmerking: deze functie vervangt de voormalige functie voor controle van doelbrowsers, maar heeft de CSS-functionaliteit van die functie behouden.
Voor livedocumenten wordt een afzonderlijk venster geopend wanneer u op een fout dubbelklikt in het deelvenster voor W3C-validatie. In het venster wordt de door de browser gegenereerde code weergegeven, waarbij de regel met de fout is gemarkeerd. Validatie-instellingen aanpassen 1. Selecteer Venster > Resultaten > Validatie om het deelvenster Validatie te openen. 2. Klik op het afspeelpictogram van de W3C-validatie in het deelvenster W3C-validatie. Selecteer Instellingen. 3.
2. Selecteer W3C-validatie in de lijst Categorie aan de linkerkant. 3. Selecteer de tagbibliotheken die voor de validatie gebruikt moeten worden. U kunt meerdere versies van dezelfde tagbibliotheek of taal selecteren. Als u bijvoorbeeld HTML 4.0 selecteert, kunt u ook HTML 3.2 of HTML 2.0 selecteren. Selecteer de vroegste versie aan de hand waarvan u de code wilt valideren. Als een document bijvoorbeeld geldige HTML 2.0-code bevat, zal dit ook geldige HTML 4.0-code zijn. 4.
het framesetdocument. Opmerking: U kunt een instantie van een sjabloon niet converteren omdat de instantie in dezelfde taal moet zijn opgesteld als de sjabloon waarop deze is gebaseerd. Een document dat is gebaseerd op een XHTMLsjabloon, zal bijvoorbeeld altijd een XHTML-document zijn, terwijl een document dat is gebaseerd op een niet-XHTML-compatibele HTML-sjabloon, altijd een HTML-document zal zijn dat niet kan worden geconverteerd naar een XHTML-document of een document in een andere taal.
Code bewerken in de ontwerpweergave Code bewerken in de ontwerpweergave Onderliggende tags selecteren in de ontwerpweergave Code bewerken met de eigenschappencontrole CFML bewerken met de eigenschappencontrole Kenmerken wijzigen met de tagcontrole Overzicht van de Snelle tageditor Code bewerken met de Snelle tageditor Het menu met tips gebruiken in de Snelle tageditor Code bewerken met de tagkiezer Scripts schrijven en bewerken in de ontwerpweergave Scripts op de pagina bewerken via de eigenschappencontrole
2. Als de tag inhoud bevat tussen de begin- en eindtag, klikt u op de knop Inhoud om de inhoud te bewerken. De knop Inhoud wordt alleen weergegeven als de geselecteerde tag geen lege tag is (dat wil zeggen, als de tag een beginen een eindtag heeft). 3. Als de tag een voorwaardelijke expressie bevat, kunt u er wijzigingen in aanbrengen in het vak Expressie. Naar boven Kenmerken wijzigen met de tagcontrole U gebruikt de tagcontrole om kenmerken en waarden van kenmerken te bewerken of toe te voegen.
Naar boven Code bewerken met de Snelle tageditor Met de Snelle tageditor kunt u snel HTML-tags invoegen en bewerken zonder de ontwerpweergave te verlaten. Een HTML-tag invoegen 1. Klik op de pagina in de ontwerpweergave om de invoegpositie te plaatsen op de locatie waar u code wilt invoegen. 2. Druk op Ctrl+spatiebalk (Windows) of Command+spatiebalk (Macintosh). De Snelle tageditor wordt geopend in de modus HTML invoegen. 3. Voer de HTML-tag in en druk op Enter.
Zoek een item met de schuifbalk. 2. Druk op Enter om het geselecteerde item in te voegen of dubbelklik op een item om dit in te voegen. 3. Als u het menu wilt sluiten zonder een item in te voegen, drukt u op Escape of typt u verder. Het tipmenu uitschakelen of de vertraging wijzigen 1. Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh) en selecteer Coderingstips. Het dialoogvenster Voorkeuren voor Coderingstips verschijnt. 2.
Koppelen naar een extern scriptbestand 1. Plaats de invoegpositie op de locatie waar u het script wilt invoegen. 2. Selecteer Invoegen > HTML > Scriptobjecten > Script. 3. Klik op OK zonder iets te typen in het vak Inhoud. 4. Selecteer de scriptmarkering in de ontwerpweergave van het documentvenster. 5. Klik op het mappictogram in de eigenschappencontrole, blader naar het externe scriptbestand en selecteer dit bestand, of typ de bestandsnaam in het vak Bron. Een script bewerken 1.
Werken met de kopinhoud van pagina's Kopinhoud weergeven en bewerken De meta-eigenschappen voor de pagina instellen De paginatitel instellen Trefwoorden opgeven voor de pagina Beschrijvingen opgeven voor de pagina De eigenschappen voor het vernieuwen van de pagina instellen De eigenschappen van de basis-URL van de pagina instellen De eigenschappen van de koppelingen op de pagina instellen Pagina's bevatten elementen die de informatie op de pagina beschrijven en die door zoekmachines worden gebruikt.
goed gedefinieerd (en hebben hun eigen eigenschappencontroles in Dreamweaver), maar u kunt nagenoeg elke waarde opgeven (bijvoorbeeld creationdate, documentID of level). Inhoud Hier kunt u de daadwerkelijke informatie opgeven. Als u bijvoorbeeld bij Waarde niveau hebt opgegeven, kunt u bij Inhoudbeginner, gevorderde of expert opgeven. Naar boven De paginatitel instellen Er is slechts één titeleigenschap: de titel van de pagina.
De meta-tag Vernieuwen toevoegen 1. Selecteer Invoegen > HTML > Koptags > Vernieuwen. 2. Stel de eigenschappen van de meta-tag Vernieuwen in in het dialoogvenster dat wordt weergegeven. De meta-tag Vernieuwen bewerken 1. Selecteer Weergave > Kopinhoud. 2. Selecteer de markering Vernieuwen, die boven aan het documentvenster wordt weergegeven. 3. Stel in de eigenschappencontrole de eigenschappen van de meta-tag Vernieuwen in.
De eigenschappen van de meta-tag Koppeling instellen Stel de eigenschappen van de meta-tag Koppeling als volgt in: Href Hier kunt u de URL opgeven van het bestand waarvan u de relatie met het huidige document definieert. Klik op de knop Bladeren om een bestand te selecteren of typ een pad in het vak. Bedenk wel dat dit kenmerk geen bestand aangeeft waarnaar u een koppeling maakt in de gebruikelijke zin van het woord in de HTML-context.
Werken met include-bestanden op de server Include-bestanden op de server Include-bestanden op de server invoegen De inhoud van een include-bestand op de server bewerken Naar boven Include-bestanden op de server U kunt Dreamweaver gebruiken om include-bestanden op de server in uw pagina's in te voegen, de include-bestanden te bewerken of pagina's met include-bestanden te bekijken.
Naar boven Include-bestanden op de server invoegen U kunt Dreamweaver gebruiken om include-bestanden op de server in uw pagina in te voegen. Een include-bestand op de server invoegen 1. Selecteer Invoegen > Include-codes op de server. 2. In het dialoogvenster dat verschijnt, bladert u naar een bestand en voegt u dit toe. Standaard wordt een include-bestand van het type Bestand ingevoegd. 3.
Tagbibliotheken beheren De tagbibliotheken van Dreamweaver De tagbibliotheek-editor openen en sluiten Bibliotheken, tags en kenmerken toevoegen Bibliotheken, tags en kenmerken bewerken Bibliotheken, tags en kenmerken verwijderen Naar boven De tagbibliotheken van Dreamweaver In Dreamweaver is een tagbibliotheek een verzameling tags van een bepaald type, die tevens informatie bevat over de manier waarop Dreamweaver de tags moet opmaken.
Naar boven Bibliotheken, tags en kenmerken bewerken Met de tagbibliotheek-editor kunt u eigenschappen instellen voor een tagbibliotheek en tags en kenmerken in een bibliotheek bewerken. Eigenschappen instellen voor een tagbibliotheek 1. Selecteer in de tagbibliotheek-editor (Bewerken > Tagbibliotheken) een tagbibliotheek (geen tag) in de lijst Tags. Opmerking: De eigenschappen voor tagbibliotheken worden alleen weergegeven wanneer een tagbibliotheek is geselecteerd.
Juridische kennisgevingen | Online privacybeleid 523
Aangepaste tags importeren in Dreamweaver Aangepaste tags importeren in Dreamweaver Tags importeren uit XML-bestanden Aangepaste ASP.NET-tags importeren JSP-tags importeren uit een bestand of van een server (web.xml) JRun-tags importeren Naar boven Aangepaste tags importeren in Dreamweaver U kunt aangepaste tags importeren in Dreamweaver, zodat ze een integraal onderdeel vormen van de ontwerpomgeving.
wordt niet gebruikt om de website van de organisatie weer te geven, maar uitsluitend om de tagbibliotheek te identificeren. 6. (Optioneel) Typ het voorvoegsel dat voor de tags moet worden gebruikt. Sommige tagbibliotheken gebruiken een voorvoegsel om een tag in de code te identificeren als onderdeel van een bepaalde tagbibliotheek. 7. Klik op OK. Naar boven JRun-tags importeren Als u Adobe® JRun™ gebruikt, kunt u uw JRun-tags importeren in Dreamweaver. 1. Open een JSP-pagina in Dreamweaver. 2.
JavaScript 526
JavaScript-gedrag gebruiken (algemene instructies) Over JavaScript-gedrag Overzicht van het paneel Gedrag Over gebeurtenissen Een gedrag toepassen Gedrag wijzigen of verwijderen Een gedrag bijwerken Gedrag van derden downloaden en installeren Naar boven Over JavaScript-gedrag Met gedrag van Adobe® Dreamweaver® plaatst u JavaScript-code in documenten die bezoekers in staat stelt een webpagina op diverse manieren te wijzigen of bepaalde taken te starten.
acties lichter gekleurd worden weergegeven (niet beschikbaar zijn), kunnen er geen gebeurtenissen worden gegenereerd door het geselecteerde element. Gebeurtenis verwijderen (–) Hiermee verwijdert u de geselecteerde gebeurtenis en actie uit de lijst met gedragingen. De knoppen pijl-omhoog en pijl-omlaag Hiermee plaatst u de geselecteerde actie hoger of lager in de lijst met gedragingen voor een bepaalde gebeurtenis.
een afbeelding, heeft de afbeelding een id nodig. Als u geen id voor het element hebt opgegeven, geeft Dreamweaver er automatisch een voor u op. 5. De standaardgebeurtenis voor het activeren van de actie wordt in de kolom Gebeurtenissen weergegeven. Als dit niet de gewenste activeringsgebeurtenis is, selecteert u een andere gebeurtenis in het pop-upmenu Gebeurtenissen.
Ingebouwd JavaScript-gedrag toepassen Ingebouwd gedrag gebruiken De Call JavaScript-gedrag toepassen Het gedrag Eigenschap wijzigen toepassen Het gedrag Browser controleren toepassen Het gedrag Insteekmodule controleren toepassen Het gedrag Shockwave of SWF beheren toepassen Het gedrag AP-element slepen toepassen Informatie verzamelen over het versleepbare AP-element Het gedrag Ga naar URL toepassen Het gedrag Snelmenu toepassen Het gedrag Snelmenu Go toepassen Het gedrag Browservenster openen toepassen Het
3. Klik op OK en controleer of de standaardgebeurtenis juist is. Naar boven Het gedrag Eigenschap wijzigen toepassen Gebruik het gedrag Eigenschap wijzigen om de waarde van een van de eigenschappen van een object (bijvoorbeeld de achtergrondkleur van een laag of de actie van een formulier) te wijzigen. Opmerking: Gebruik dit gedrag alleen als u een ervaren programmeur bent en u alles weet van HTML en JavaScript. 1.
een bestemming waarnaar de bezoeker het AP-element moet slepen, of de bestemming magnetisch moet zijn en het AP-element moet aantrekken als dat zich binnen een straal van een bepaald aantal pixels ten opzichte van deze bestemming bevindt, wat er moet gebeuren als het AP-element zijn bestemming raakt en meer. Omdat het gedrag AP-element slepen moet worden aangeroepen voordat de bezoeker het AP-element kan slepen, moet u het gedrag AP-element slepen aan het body-object koppelen (met de gebeurtenisonLoad). 1.
Wanneer u het gedrag AP-element slepen aan een object koppelt, voegt Dreamweaver de functie MM_dragLayer() in de kopsectie van uw document in. (De functie blijft de oude naamgevingsconventie voor AP-elementen (“Laag”) gebruiken, zodat lagen die in vorige versies van Dreamweaver zijn gemaakt, bewerkbaar blijven.
Het gedrag Snelmenu Go toepassen Het gedrag Snelmenu Go is nauw verwant met het gedrag Snelmenu. Met Snelmenu Go kunt u een knop Go (Ga naar) aan een snelmenu koppelen. (Voordat u dit gedrag gebruikt, moet er al een snelmenu in het document aanwezig zijn.) Als u op de knop Go klikt, wordt de koppeling geopend die in het snelmenu is geselecteerd. Voor een snelmenu is gewoonlijk geen knop Go nodig.
Het gedrag Afbeeldingen vooraf laden toepassen Met het gedrag Afbeeldingen vooraf laden worden afbeeldingen die in eerste instantie nog niet verschijnen wanneer de pagina wordt weergegeven, alvast in het cachegeheugen geladen waardoor ze sneller worden weergegeven wanneer ze aan de beurt zijn. (Dit gedrag is bijvoorbeeld handig voor afbeeldingen die andere afbeeldingen vervangen wanneer ze worden geactiveerd met gedrag of scripts.
3. Voer de nieuwe tekst of HTML in het vak Nieuwe HTML in. 4. Klik op OK en controleer of de standaardgebeurtenis juist is. Het gedrag Tekst van statusbalk instellen toepassen Naar boven Met het gedrag Tekst van statusbalk instellen kunt u een bericht weergeven in de linkerbenedenhoek van het browservenster. Dit gedrag kunt u bijvoorbeeld gebruiken om een beschrijving van het doel van een koppeling in de statusbalk weer te geven in plaats van de desbetreffende URL.
worden enzovoort. Met het gedrag kunt u het desbetreffende element alleen weergeven of verbergen. U verwijdert het element niet werkelijk van de pagina wanneer u het verbergt. 1. Selecteer een object en selecteer Elementen weergeven/verbergen in het menu Gedrag toevoegen van het paneel Gedrag. Als Elementen weergeven/verbergen niet beschikbaar is, hebt u waarschijnlijk een AP-element geselecteerd. Omdat APelementen geen gebeurtenissen in beide 4.
verwisselen voor alle afbeeldingen die u in één keer wilt wijzigen, anders worden met de corresponderende actie Omwisselen van afbeeldingen herstellen niet alle oorspronkelijke afbeeldingen hersteld. 8. Selecteer de optie Afbeeldingen vooraf laden om de nieuwe afbeeldingen alvast in het cachegeheugen te laden wanneer de pagina wordt geladen. Hiermee voorkomt u downloadvertragingen op het moment dat de nieuwe afbeeldingen moeten verschijnen. 9. Klik op OK en controleer of de standaardgebeurtenis juist is.
Integratie met andere producten 539
Add-ons Add-ons zijn nieuwe functies die u eenvoudig aan Dreamweaver kunt toevoegen. U kunt vele typen add-ons gebruiken. Er zijn bijvoorbeeld addons waarmee u tabellen opnieuw kunt opmaken, verbinding kunt maken met back-end databases, of die u helpen bij het schrijven van scripts voor browsers. Opmerking: U moet zijn aangemeld als beheerder (Windows) of root (Mac OS X) om add-ons te kunnen installeren waartoe alle gebruiker in een besturingssysteem voor meer gebruikers toegang hebben.
De pagina Adobe Creative Cloud Add-Ons - Mijn add-ons Naar boven Bestandssynchronisatie met Adobe Creative Cloud inschakelen Voordat u add-ons van Adobe Creative Cloud installeert, moet u controleren of bestandssynchronisatie is ingeschakeld via uw Adobe Creative Cloud-client. 1. Klik op 2. Klik op in het systeemvak om de Adobe Creative Cloud-client te openen. en klik vervolgens op Voorkeuren.
Voorkeuren in de client van Adobe Creative Cloud 3. Selecteer op het tabblad Bestanden bij de optie Sync aan/uit het keuzerondje Aan.
Bestandssynchronisatie in de client van Adobe Creative Cloud De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.
Integratie tussen diverse toepassingen Over de integratie met Photoshop, Flash en Fireworks Over de integratie met Photoshop, Flash en Fireworks Naar boven Photoshop, Fireworks en Flash zijn krachtige webontwikkelingsprogramma's voor het maken en beheren van afbeeldingen en SWF-bestanden. U kunt Dreamweaver uitstekend met deze programma's integreren om het ontwikkelen van websites te vereenvoudigen. Opmerking: Er is eveneens een beperkte integratie met enkele andere toepassingen.
Werken met Fireworks en Dreamweaver Een Fireworks-afbeelding invoegen Een Fireworks-afbeelding of -tabel bewerken in Dreamweaver Een Fireworks-afbeelding optimaliseren vanuit Dreamweaver Fireworks gebruiken om voorlopige afbeeldingen uit Dreamweaver aan te passen Over pop-upmenu's van Fireworks Pop-upmenu's van Fireworks bewerken in Dreamweaver Een pop-upmenu bewerken dat is gemaakt in Fireworks MX 2004 of eerder Voorkeuren voor het openen en bewerken van Fireworks-bronbestanden opgeven HTML-code van Firewo
Opmerking: Als Fireworks het bronbestand niet kan vinden, wordt u gevraagd het PNG-bronbestand te zoeken. Wanneer u met het bronbestand van Fireworks werkt, worden wijzigingen zowel in het bronbestand als in het geëxporteerde bestand opgeslagen. Wanneer u met het geëxporteerde bestand werkt, wordt alleen dat bestand bijgewerkt. 4. Bewerk het PNG-bronbestand in Fireworks en klik op Done.
Het dialoogvenster Export verschijnt. Gebruik dit dialoogvenster om de afbeelding als een GIF- of JPEG-bestand op te slaan of, in het geval van gesegmenteerde afbeeldingen, als HTML en afbeeldingen. 8. Selecteer in het vak Save In de lokale Dreamweaver-sitemap. In het vak Name wordt automatisch de naam weergegeven die u voor het PNG-bestand hebt gebruikt. U kunt die naam wijzigen. 9.
Dreamweaver herkent deze voorkeuren alleen als u een afbeelding opent en optimaliseert die geen deel uitmaakt van een Fireworks-tabel en een juist ontwerpnotitiepad naar een PNG-bronbestand bevat. 1. Selecteer in Fireworks de optie Edit > Preferences (Windows) of Fireworks > Preferences (Macintosh) en klik op het tabblad Launch And Edit (Windows) of selecteer Launch And Edit in het pop-upmenu (Macintosh). 2.
Alle HTML- en JavaScript-code die is gekoppeld aan Fireworks-bestanden die u hebt geëxporteerd, wordt naar het Dreamweaver-document gekopieerd en alle koppelingen naar afbeeldingen worden bijgewerkt. Fireworks-HTML-code bijwerken die in Dreamweaver is geplaatst Naar boven In Fireworks biedt de opdracht File > Update HTML een alternatief voor de techniek van starten en bewerken die wordt gebruikt om Fireworksbestanden die in Dreamweaver zijn geplaatst, te bewerken.
Werken met Flash en Dreamweaver Een SWF-bestand van Dreamweaver bewerken in Flash Een SWF-bestand van Dreamweaver bewerken in Flash Naar boven Als u zowel Flash als Dreamweaver hebt geïnstalleerd, kunt u een SWF-bestand in een Dreamweaver-document selecteren en het bewerken met Flash. Het SWF-bestand wordt niet rechtstreeks bewerkt in Flash. Alleen het brondocument (het FLA-bestand) wordt bewerkt en vervolgens wordt het SWF-bestand opnieuw geëxporteerd. 1.
Werken met Adobe Bridge en Dreamweaver Over Adobe Bridge Adobe Bridge starten vanuit Dreamweaver Bestanden in Dreamweaver plaatsen vanuit Adobe Bridge Een Adobe Bridge-bestand op uw pagina plaatsen Een bestand van Bridge naar uw pagina slepen Dreamweaver starten vanuit Adobe Bridge Naar boven Over Adobe Bridge Dreamweaver biedt naadloze integratie met Adobe Bridge, de platformonafhankelijke bestandsbrowser die wordt geleverd bij Adobe Creative Suite 5-componenten.
Als u een HTML-bestand invoegt, wordt een koppeling naar het bronbestand ingevoegd. (Alleen Windows) Als u Microsoft Office hebt geïnstalleerd en u een Microsoft Word- of Excel-bestand invoegt, moet u opgeven of u het bestand zelf of een koppeling naar het bronbestand wilt invoegen. Als u het bestand wilt invoegen, kunt u opgeven hoeveel van de opmaak van het bestand u wilt behouden. Naar boven Een Adobe Bridge-bestand op uw pagina plaatsen 1.
Werken met Device Central en Dreamweaver Adobe Device Central gebruiken met Dreamweaver Tips voor het maken van Dreamweaver-webinhoud voor mobiele apparaten Adobe Device Central gebruiken met Dreamweaver Naar boven Device Central biedt webontwerpers en -ontwikkelaars die Dreamweaver gebruiken, de mogelijkheid om vooraf te controleren hoe Dreamweaverbestanden eruit zullen zien op een groot aantal verschillende mobiele apparaten.
Werken met ConnectNow en Dreamweaver Werken met ConnectNow Naar boven Werken met ConnectNow Adobe® ConnectNow verschaft u een veilige, persoonlijke onlinevergaderruimte waarin u via het web met collega's in real-time kunt afspreken en samenwerken. Dankzij ConnectNow kunt u uw computerscherm delen en er notities aan toevoegen, chatberichten verzenden en communiceren aan de hand van de geïntegreerde audio.
Extensie AIR voor Dreamweaver Extensie AIR voor Dreamweaver installeren Een AIR-toepassing maken in Dreamweaver Een toepassing ondertekenen met een digitaal certificaat Gekoppelde AIR-bestandstypen bewerken Instellingen voor AIR-toepassingen bewerken Een webpagina voorvertonen in een AIR-toepassing AIR-coderingstips en -codekleuren gebruiken Toegang tot de documentatie van Adobe AIR De extensie Adobe® AIR® voor Dreamweaver® kunt u gebruiken om een internettoepassing om te zetten in een desktoptoepassing.
1. Zorg dat de webpagina's die u in een toepassing wilt verpakken, onderdeel zijn van een gedefinieerde Dreamweaver-site. 2. Open in Dreamweaver de introductiepagina van de verzameling pagina's die u wilt verpakken. 3. Selecteer Site > Instellingen AIR-toepassing. 4. Geef de vereiste gegevens op in het dialoogvenster AIR - Instellingen voor toepassing en installer en klik vervolgens op AIRbestand maken. Zie de volgende opties van het dialoogvenster voor meer informatie.
verplicht. Zie de volgende sectie voor meer informatie. Map Programmamenu Deze instelling geeft een submap in het menu Start van Windows aan waar u de snelkoppeling voor de toepassing wilt maken. (Niet van toepassing op Macintosh.) Doel Deze instelling geeft aan waar de nieuwe toepassingsinstaller (AIR-bestand) moet worden opgeslagen. De standaardlocatie is de hoofdmap van de site. Klik op de knop Bladeren om een andere locatie te selecteren.
ingesloten in het AIR-bestand. Is het certificaat geldig op het moment van ondertekening, dan kan het AIR-bestand zelfs worden geïnstalleerd nadat het certificaat is verlopen. Als er geen tijdstempel wordt verkregen, kan het AIR-bestand niet meer worden geïnstalleerd nadat het certificaat is verlopen of is ingetrokken. Standaard wordt met de extensie Adobe AIR voor Dreamweaver een tijdstempel opgehaald tijdens het maken van een Adobe AIR-toepassing.
Toegang tot de documentatie van Adobe AIR De extensie Adobe AIR voegt een item toe aan het menu Help in Dreamweaver waarmee u toegang krijgt tot documentatie over het ontwikkelen van AIR-toepassingen met HTML en Ajax. Kies Help > Adobe AIR Help.
Dreamweaver gebruiken met onlineservices van Adobe BrowserLab Business Catalyst InContext Editing Adobe-onlineservices zijn gehoste webtoepassingen die op dezelfde manier werken als desktoptoepassingen. Het voordeel van onlineservices is dat u altijd up-to-date bent omdat ze op het web worden gehost en niet op uw computer. Dreamweaver kan rechtstreeks worden geïntegreerd met Adobe® BrowserLab en Adobe® Business Catalyst InContext Editing.
Selecteer andere inhoud op de pagina die u bewerkbaar wilt maken (zoals een tekstblok). 2. Kies Invoegen > InContext Editing > Bewerkbaar gebied maken. 3. De opties zijn afhankelijk van uw selectie. Als u een div-, th- of td-tag hebt geselecteerd, transformeert Dreamweaver de tag in een bewerkbaar gebied zonder meer stappen te volgen. Als u een nieuw, leeg bewerkbaar gebied invoegt, voert u een van de volgende stappen uit: Selecteer Nieuw bewerkbaar gebied invoegen op huidige invoegpositie en klik op OK.
Herhalingsgebieden zoals weergegeven in een bewerkbaar InContext Editing-browservenster. Het onderste gebied is geselecteerd en kan worden gedupliceerd, verwijderd of omhoog en omlaag worden verplaatst.
Selecteer De bovenliggende tag omzetten in een herhalingsgebied als u wilt dat Dreamweaver de bovenliggende tag van de selectie het containerelement voor het gebied maakt. Alleen bepaalde HTML-tags zijn omzetbaar: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul en var.
toegestaan. Als de selectie binnen een bewerkbaar gebied valt, of als er een bewerkbaar gebied binnen de selectie ligt, kunt u de omzetting in Dreamweaver niet uitvoeren. InContext Editing ondersteunt geen geneste bewerkbare gebieden. Bewerkbare gebieden mogen geen herhaalde gebieden of herhaalde gebiedsgroepen bevatten. Bewerkbare InContext Editing-gebieden kunnen geen andere InContext Editing-functie bevatten.
Extract in Dreamweaver CC Door de integratie van Extract met Dreamweaver kunnen webontwerpers en -ontwikkelaars ontwerpinformatie toepassen en webmiddelen rechtstreeks extraheren in de codeeromgeving. Extract biedt een volledige, zelfstandige oplossing voor het extraheren van stijlgegevens en middelen uit PSD-composities, zodat u niet steeds tussen Photoshop en Dreamweaver hoeft te schakelen.
Afbeeldingen extraheren Afmetingen extraheren Lettertypen, kleuren en verlopen extraheren Naar boven Aan de slag met Extract Via Extract in Dreamweaver hebt u rechtstreeks toegang tot uw PSDbestanden vanuit het deelvenster Extract in Dreamweaver.
Als u Dreamweaver voor de eerste keer start, wordt in het deelvenster Extract een interactieve zelfstudie weergegeven zodat u direct aan de slag kunt met de workflows. U kunt de vervolgkeuzelijst boven in het deelvenster gebruiken om tussen de verschillende zelfstudies te schakelen. Nadat u de zelfstudie hebt doorlopen, kunt u op Aan de slag klikken om met Extract in Dreamweaver te beginnen.
Naar boven Voorkeuren voor Extract instellen Met de voorkeuren voor Extract kunt u de standaardbestandsindeling opgeven waarin de afbeeldingen moeten worden geëxtraheerd en kunt u ook de standaardlettertypen kiezen die in het deelvenster Extract moeten worden weergegeven. 1. Selecteer Bewerken > Voorkeuren (Win) of Dreamweaver > Voorkeuren (Mac). 2. Selecteer Extract in de lijst Categorie. 3. (Optioneel) Wijzig de standaardindeling waarin de afbeeldingen moeten worden geëxtraheerd.
Naar boven CSS uit PSD-bestanden extraheren U kunt alle of bepaalde CSS-eigenschappen van elementen in een PSD-compositie kopiëren en de stijlen rechtstreeks in CSS ontwerpen, in Live View of in uw code (CSS-bron of HTML-document) plakken. Coderingstips worden ook automatisch gevuld met de CSS-eigenschappen van het element dat u selecteert in de PSD-compositie. Als u liever code gebruikt, kunt u deze coderingstips gebruiken om de CSSeigenschappen naar de code te extraheren. 1.
codeweergave van een HTML-document. 2. Klik in het deelvenster Extract op het vereiste PSD-bestand en vervolgens op het vereiste element in de samenstelling. 3. Plaats in uw document de invoegpositie op de vereiste positie in de code. 4. Typ de naam van een CSS-eigenschap om coderingstips weer te geven met de CSSeigenschappen van het geselecteerde element in de PSD-compositie. Klik op de vereiste CSS-eigenschap om de code in te voegen.
De optie Tekst kopiëren in het deelvenster Extract Nadat u de tekst hebt geëxtraheerd, kunt u eigenschappen extraheren die aan de tekst zijn gekoppeld, zoals lettertypen en kleuren. Zie Lettertypen, kleuren en verlopen uit PSD-bestanden extraheren voor meer informatie. Naar boven Afbeeldingen uit PSD-bestanden extraheren U kunt elke laag in uw PSD-compositie gewoon vanuit het deelvenster Extract naar een exacte locatie in Live View voor uw webpagina slepen.
afbeelding klikt. Geef het pad, de bestandsnaam, de bestandsindeling en de schaalfactor (indien nodig) op. Voer vervolgens een van de volgende handelingen uit: Klik op Opslaan om de afbeelding met een resolutie van 1x op te slaan. Als u de afbeelding wilt schalen, selecteert u Schalen op en geeft u de schaalfactor op. Klik op Meerdere opslaan om meerdere afbeeldingsversies met verschillende resoluties op te slaan. Het PSD-bestand hoeft deze versies niet noodzakelijkerwijs te bevatten.
De bewerkingsoptie voor de bestandsnaam en de extensie wanneer u een afbeelding vanuit het deelvenster Extract sleept Wanneer u op de afbeelding klikt, worden contextuele coderingstips in Dreamweaver gevuld. Plaats in de codeweergave van uw HTML-document of in uw CSS-document de cursor op de invoegpositie. Nadat u de naam van de eigenschap van de achtergrondafbeelding of de tag ![]()
hebt getypt, wordt de naam van de geselecteerde afbeelding in de coderingstips weergegeven.
Met behulp van het deelvenster Extract kunt u heel eenvoudig de afmetingswaarde tussen twee willekeurige elementen in de PSD-compositie extraheren. 1. Klik in het PSD-bestand in het deelvenster Extract op de vereiste elementen met de toets Shift of Command ingedrukt. In het deelvenster Extract worden de horizontale en verticale afstand tussen de twee elementen weergegeven.
Lettertypen extraheren Opmerking: U kunt in de voorkeuren van Extract het lettertype wijzigen in 'em' of 'rem' (Voorkeuren > Extract). Klik op PSD opnieuw laden in het pop-upmenu in de rechterbovenhoek van het panel Extract om de wijzigingen weer te geven. 3. Plak de CSS daar waar nodig, bijvoorbeeld in de code of in CSS ontwerpen. 3. Als u kleuren wilt extraheren, voert u de volgende handelingen uit in het gedeelte Kleuren: 1. Klik op de gewenste kleurstaal.
3. Plak de kleurwaarde daar waar nodig, bijvoorbeeld in de code of in CSS ontwerpen. 4. Als u verlopen wilt extraheren, klikt u op een verloopstaal in het gedeelte Verlopen. Klik in het pop-upvenster dat wordt weergegeven, op CSS kopiëren. Plak de CSS daar waar nodig, bijvoorbeeld in de code of in CSS ontwerpen. Verlopen extraheren Leveranciersvoorvoegsels die zijn geselecteerd in de voorkeuren (Voorkeuren > CSSstijlen) worden ook bij de verlopen geplakt.
Integratie van Dreamweaver met Business Catalyst Opmerking: De Business Catalyst-extensie voor Dreamweaver is niet beschikbaar in Dreamweaver CC 2015 en latere versies. Meer informatie over het gebruik van Business Catalyst met Dreamweaver vindt u in de documentatie van Business Catalyst.
6. Selecteer een map op uw computer voor de lokale site. Opmerking: Als u op Annuleren klikt, wordt de site gemaakt in Business Catalyst maar wordt deze niet in Dreamweaver weergegeven. Hetzelfde scenario geldt als er netwerkproblemen optreden wanneer u een Business Catalyst-site maakt. 7. Voer het wachtwoord in dat is gekoppeld aan uw Adobe ID. 8. Klik op Gereed wanneer de bestandsactiviteiten zijn voltooid. 9. Selecteer Venster > Bestand.
4. Geef de vereiste informatie op en klik op Invoegen. 5. Als uw huidige site de nieuwe rendering-engine gebruikt, wordt het tabblad Fragmenten weergegeven. Met de opties op het tabblad Fragmenten kunt u codefragmenten toevoegen, zoals herhalende en voorwaardelijke gebieden, secties met opmerkingen en include-bestanden (werkt ongeveer als include-bestanden op de server). 6. Klik op Live om een voorvertoning van de pagina te bekijken zoals deze in een webbrowser wordt weergegeven.
Microsoft Office-documenten importeren (alleen Windows) U kunt de volledige inhoud van een Microsoft Word- of Excel-document invoegen in een nieuwe of bestaande webpagina. Als u een Word- of Excel-document importeert, ontvangt Dreamweaver de geconverteerde HTML, waarna deze in uw webpagina wordt ingevoegd. De grootte van het bestand nadat Dreamweaver de geconverteerde HTML heeft ontvangen, moet minder zijn dan 300 kB.
Werken met Photoshop en Dreamweaver Over de integratie met Photoshop Over slimme objecten en Photoshop-Dreamweaver-workflows Een slim object maken Een slim object bijwerken Meerdere slimme objecten bijwerken Het formaat van een slim object wijzigen Het originele Photoshop-bestand van een slim object bewerken Status van slimme objecten Een selectie kopiëren en plakken vanuit Photoshop Geplakte afbeeldingen bewerken Opties instellen in het dialoogvenster Afbeelding optimaliseren Naar boven Over de integrati
Slim object Als de webafbeelding (de afbeelding op de Dreamweaver-pagina) niet is gesynchroniseerd met het oorspronkelijke Photoshop-bestand, wordt in Dreamweaver vastgesteld dat het oorspronkelijke bestand is bijgewerkt en wordt een van de pijlen van het pictogram van het slimme object rood weergegeven.
Een slim object maken Wanneer u een PSD-bestand (Photoshop-afbeelding) op uw pagina invoegt, maakt Dreamweaver een slim object. Een slim object is een voor het web bruikbare afbeelding die een liveverbinding met de originele Photoshop-afbeelding onderhoudt. Wanneer u de originele afbeelding bijwerkt in Photoshop, biedt Dreamweaver u de mogelijkheid om de afbeelding met één klik op een knop bij te werken in Dreamweaver. 1.
Naar boven Het formaat van een slim object wijzigen U kunt het formaat van een slim object in het venster Document op dezelfde wijze veranderen als het formaat van een gewone afbeelding. 1. Selecteer het slimme object in het venster Document en sleep de formaatgrepen om het formaat van de afbeelding te wijzigen. U kunt de verhouding tussen hoogte en breedte behouden door Shift ingedrukt te houden terwijl u sleept. 2. Klik in de eigenschappencontrole op de knop Bijwerken vanuit origineel.
webafbeelding worden gepixeld. afbeelding opnieuw wordt gemaakt. Afmetingen van oorspronkelijk middel zijn te klein voor geselecteerde HTML-breedte en -hoogte De breedte- en hoogtekenmerken in de HTMLcode zijn groter dan de breedte en hoogte in het originele Photoshop-bestand. De webafbeelding kan gepixeld worden weergegeven. Maak geen webafbeeldingen met afmetingen die groter zijn dan de afmetingen van het originele Photoshopbestand.
1. Selecteer in Dreamweaver een internetafbeelding die oorspronkelijk in Photoshop is gemaakt en ga op een van de volgende manieren te werk: Klik op de knop Bewerken in de eigenschappencontrole voor de afbeelding. Houd Control (Windows) of Command (Macintosh) ingedrukt terwijl u dubbelklikt op het bestand. Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh) op een afbeelding, kies Origineel bewerken met in het snelmenu en kies Photoshop.
Sjablonen 587
Over sjablonen van Dreamweaver Wat zijn Dreamweaver-sjablonen? Typen sjabloongebieden Koppelingen in sjablonen Serverscripts in sjablonen en op een sjabloon gebaseerde documenten Sjabloonparameters Sjabloonexpressies Taal voor sjabloonexpressies Meerdere if-voorwaarden in sjablooncode Naar boven Wat zijn Dreamweaver-sjablonen? Een sjabloon is een speciaal type document waarmee u een “vaste” paginalay-out kunt ontwerpen.
eventuele koppelingen in het bestand bijgewerkt, zodat hun documentafhankelijke relatieve paden correct zijn. Later, wanneer u een document maakt dat op deze sjabloon is gebaseerd, en dit opslaat, worden alle documentafhankelijke relatieve koppelingen opnieuw bijgewerkt om deze naar de juiste bestanden te laten verwijzen.
Naar boven Sjabloonparameters Sjabloonparameters geven waarden voor het bepalen van de inhoud in documenten die zijn gebaseerd op een sjabloon. Gebruik sjabloonparameters voor optionele gebieden of bewerkbare tagkenmerken, of voor het instellen van waarden die u wilt doorgeven aan een bijgevoegd document. Voor elke parameter selecteert u een naam, een gegevenstype en een standaardwaarde. Elke parameter moet een unieke naam hebben die hoofdlettergevoelig is.
_isFirst True (waar) als de huidige vermelding de eerste vermelding is in het herhalingsgebied ervan _isLast True (waar) als de huidige vermelding de laatste vermelding is in het herhalingsgebied ervan _prevRecord Het object _repeat voor de vorige vermelding. Deze eigenschap kan niet worden gebruikt voor de eerste vermelding in het gebied. _nextRecord Het object _repeat voor de volgende vermelding. Deze eigenschap kan niet worden gebruikt voor de laatste vermelding in het gebied.
Sjablonen en op een sjabloon gebaseerde documenten herkennen Sjablonen herkennen in de ontwerpweergave Sjablonen herkennen in de codeweergave Op een sjabloon gebaseerde documenten herkennen in de ontwerpweergave Op een sjabloon gebaseerde documenten herkennen in de codeweergave Naar boven Sjablonen herkennen in de ontwerpweergave In de ontwerpweergave worden bewerkbare gebieden weergegeven in het documentvenster met een rechthoekige omtrek in een vooraf ingestelde markeringskleur.
Opmerking: Als u sjablooncode bewerkt in de codeweergave, dient u ervoor te zorgen dat u geen van de aan de sjabloon gerelateerde tags voor de commentaar wijzigt, waarop Dreamweaver vertrouwt.
Juridische kennisgevingen | Online privacybeleid 594
Een Dreamweaver-sjabloon maken Over het maken van Dreamweaver-sjablonen Een sjabloon maken op basis van een bestaand document Het paneel Middelen gebruiken voor het maken van een nieuwe sjabloon Over het maken van sjablonen voor Contribute-sites Een sjabloon maken voor een Contribute-site Naar boven Over het maken van Dreamweaver-sjablonen U kunt een sjabloonformulier maken op basis van een bestaand document (zoals een HTLM-, een Adobe ColdFusion- of een Microsoft Active Server Pages-document); u kunt er
Over het maken van sjablonen voor Contribute-sites Naar boven Met Dreamweaver kunt u sjablonen maken, waardoor gebruikers van Adobe® Contribute® de mogelijkheid hebben om nieuwe pagina's te maken, waardoor uw site consistent blijft in stijl en sfeer, en waardoor u de indeling van meerdere pagina's in een keer kunt bijwerken.
Meer Help-onderwerpen Zelfstudie sjablonen maken Zelfstudie gebruik van sjablonen Een lege sjabloon maken Juridische kennisgevingen | Online privacybeleid 597
Bewerkbare gebieden maken in sjablonen Een bewerkbaar gebied invoegen Bewerkbare gebieden selecteren Een bewerkbaar gebied verwijderen De naam van een bewerkbaar gebied wijzigen Naar boven Een bewerkbaar gebied invoegen Bewerkbare sjabloongebieden bepalen welke gebieden van een op een sjabloon gebaseerde pagina een gebruiker kan bewerken. Voordat u een bewerkbaar gebied invoegt, slaat u het document waarin u aan het werk bent, op als een sjabloon.
Naar boven Een bewerkbaar gebied verwijderen Als u een gebied van uw sjabloonbestand hebt aangeduid als bewerkbaar en als u dit opnieuw wilt vergrendelen (dat wil zeggen het nietbewerkbaar maken in documenten die op een sjabloon zijn gebaseerd), gebruikt u de opdracht Sjabloonopmaak verwijderen. 1. Klik op de tab in de linkerbovenhoek van het bewerkbare gebied om het selecteren. 2. Voer een van de volgende handelingen uit: Selecteer Wijzigen > Sjablonen > Sjabloonopmaak verwijderen.
Herhalingsgebieden maken in sjablonen Over herhalingsgebieden in een sjabloon Een herhalingsgebied in een sjabloon maken Een herhalingstabel invoegen Wisselende achtergrondkleuren in een herhalingstabel instellen Naar boven Over herhalingsgebieden in een sjabloon Een herhalingsgebied is een gedeelte van een sjabloon dat vele malen in een op een sjabloon gebaseerde pagina kan worden gedupliceerd.
Celafstand Hiermee wordt het aantal pixels tussen aangrenzende tabelcellen vastgelegd. Als u niet expliciet waarden voor celopvulling en celafstand toewijst, wordt de tabel in de meeste browsers weergegeven alsof de celopvulling was ingesteld op 1 en celafstand op 2. Als u wilt dat de tabel in een browser zonder opvulling of afstand wordt weergegeven, stelt u Celopvulling en Celafstand in op 0. Breedte Hiermee bepaalt u de tabelbreedte in pixels of als percentage van de breedte van het browservenster.
Optionele gebieden gebruiken in sjablonen Over optionele gebieden in een sjabloon Een optioneel gebied invoegen Waarden voor een optioneel gebied instellen Naar boven Over optionele gebieden in een sjabloon Een optioneel gebied is een gebied in een sjabloon dat door gebruikers kan worden ingesteld op weergeven of verbergen in een op een sjabloon gebaseerd document. Gebruik een optioneel gebied wanneer u de voorwaarden voor de weergave van inhoud in een document wilt instellen.
Ga naar de categorie Algemeen van het paneel Invoegen, klik op de knop Sjablonen en selecteer het pictogram Bewerkbaar gebied in het pop-upmenu. 3. Geef een naam voor het optionele gebied op, klik op het tabblad Geavanceerd als u waarden voor het optionele gebied wilt instellen, en klik op OK. Naar boven Waarden voor een optioneel gebied instellen U kunt instellingen van het optionele gebied bewerken nadat u het gebied hebt ingevoegd in een sjabloon.
Bewerkbare tagkenmerken definiëren in sjablonen Bewerkbare tagkenmerken in een sjabloon opgeven Een bewerkbaar tagkenmerk niet-bewerkbaar maken Bewerkbare tagkenmerken in een sjabloon opgeven Naar boven U kunt de gebruiker van een sjabloon toestaan om opgegeven tagkenmerken te wijzigen in een document dat op basis van een sjabloon is gemaakt.
Een bewerkbaar tagkenmerk niet-bewerkbaar maken Een tag die eerder werd aangeduid als bewerkbaar, kan als niet-bewerkbaar worden aangeduid. 1. Klik in het sjabloondocument op het element dat aan het bewerkbare kenmerk is gekoppeld, of gebruik de tagkiezer om de tag te selecteren. 2. Selecteer Wijzigen > Sjablonen > Kenmerk bewerkbaar maken. 3. Selecteer in het pop-upmenu Kenmerken het desbetreffende kenmerk. 4. Schakel de optie Kenmerk bewerkbaar maken uit en klik op OK. 5.
Een geneste sjabloon maken Over geneste sjablonen Een geneste sjabloon maken Voorkomen dat een bewerkbaar gebied wordt doorgegeven aan een geneste sjabloon Naar boven Over geneste sjablonen Een geneste sjabloon is een sjabloon waarvan het ontwerp en de bewerkbare gebieden gebaseerd zijn op een andere sjabloon. Geneste sjablonen zijn handig om de inhoud te controleren bij pagina's van een site die veel ontwerpelementen gemeenschappelijk hebben, maar kunnen per pagina enigszins verschillen.
Als u een nieuw bewerkbaar gebied toevoegt aan een bewerkbaar gebied dat aan een geneste sjabloon is doorgegeven, dan wijzigt de markeerkleur van het bewerkbare gebied in oranje. De inhoud die u buiten het bewerkbare gebied toevoegt, zoals de afbeelding in de editableColumn kan niet meer bewerkt worden in documenten op basis van de geneste sjabloon.
1 @@("")@@ Deze sjablooncode kunt u overal invoegen tussen de tags die rondom de bewerkbare regio staan.
Sjablonen bewerken, bijwerken en verwijderen Over het bewerken en bijwerken van sjablonen Een sjabloon openen voor bewerken Naam van een sjabloon wijzigen Verander een sjabloomomschrijving Op sjablonen gebaseerde documenten handmatig bijwerken Sjablonen bijwerken op een Contribute-site Een sjabloonbestand verwijderen Naar boven Over het bewerken en bijwerken van sjablonen Als u wijzigingen aanbrengt aan een sjabloon en deze opslaat, worden alle op de sjabloon gebaseerde documenten bijgewerkt.
2. Voer een van de volgende handelingen uit: Selecteer Wijzigen > Sjablonen > Gekoppelde sjabloon openen. Klik met de rechtermuisknop (Windows) of terwijl u Control ingedrukt houdt (Macintosh), en selecteer vervolgens Sjablonen > Gekoppelde sjabloon openen. 3. Wijzig de inhoud van de sjabloon. Als u de pagina-eigenschappen van de sjabloon wilt wijzigen, selecteert u Wijzigen > Pagina-eigenschappen. (Op een sjabloon gebaseerde documenten nemen de pagina-eigenschappen van de sjabloon over.) 4.
de bestanden wel wilt zien, laat u de optie ingeschakeld. 5. Klik op Start om de aangegeven bestanden bij te werken. Als u de optie Logboek tonen hebt geselecteerd, geeft Dreamweaver informatie over de bestanden die het probeert bij te werken, inclusief informatie of ze met succes zijn bijgewerkt. 6. Klik op Sluiten. Naar boven Sjablonen bijwerken op een Contribute-site Gebruikers van Contribute kunnen geen wijzigingen aanbrengen aan een Dreamweaver-sjabloon.
Sjablooninhoud exporteren en importeren Over XML-inhoud van een sjabloon Bewerkbare gebieden van een document exporteren als XML XML-inhoud importeren Een site exporteren zonder sjabloonopmaakcodes Naar boven Over XML-inhoud van een sjabloon U kunt zich een op een sjabloon gebaseerd document voorstellen als een bestand met gegevens in de vorm van naam-waardeparen. Elk paar bestaat uit de naam van een bewerkbaar gebied en de inhoud van dat gebied.
2. Geef in het tekstvak Map het bestandspad op naar de map waarnaar u het bestand wilt exporteren, of klik op Bladeren en selecteer de map. Opmerking: U moet een map buiten de huidige site selecteren. 3. Als u een XML-versie van geëxporteerde, op een sjabloon gebaseerde documenten wilt opslaan, selecteert u Sjabloongegevensbestanden behouden. 4. Als u wijzigingen aan eerder geëxporteerde bestanden wilt bijwerken, selecteert u Alleen gewijzigde bestanden extraheren en klikt u op OK.
Een sjabloon uit een bestaand document toepassen of verwijderen Een sjabloon toepassen op een bestaand document Een document loskoppelen van een sjabloon Naar boven Een sjabloon toepassen op een bestaand document Als u een sjabloon toepast op een document dat bestaande inhoud bevat, probeert Dreamweaver de bestaande inhoud overeen te stemmen met een gebied in de sjabloon. Als u een gereviseerde versie van een van uw bestaande sjablonen toepast, komen de namen waarschijnlijk overeen.
verplaatsen, klikt u op Voor alles gebruiken. 6. Klik op OK om de sjabloon toe te passen of klik op Annuleren om de toepassing van de sjabloon op het document te annuleren. Belangrijk: Als u een sjabloon toepast op een bestaand document, vervangt de sjabloon de inhoud van het document met de “boilerplate”-inhoud van de sjabloon. Maak altijd een reservekopie van de inhoud van de pagina voordat u een sjabloon erop toepast.
Inhoud in een op een sjabloon gebaseerd document bewerken Over het bewerken van inhoud in op een sjabloon gebaseerde documenten Sjablooneigenschappen wijzigen De gegevens van een herhalingsgebied toevoegen, verwijderen en de volgorde ervan wijzigen Over het bewerken van inhoud in op een sjabloon gebaseerde documenten Naar boven Dreamweaver-sjablonen geven voor op een sjabloon gebaseerde documenten gebieden aan die zijn vergrendeld (niet-bewerkbaar), en andere die wel bewerkbaar zijn.
De gegevens van een herhalingsgebied toevoegen, verwijderen en de volgorde ervan wijzigen Naar boven Gebruik besturingselementen van herhalingsgebieden om gegevens in op een sjabloon gebaseerde documenten toe te voegen, te verwijderen of de volgorde ervan te wijzigen. Als u de gegevens van een herhalingsgebied toevoegt, wordt er een kopie van het gehele herhalingsgebied toegevoegd.
Sjabloonsyntaxis Algemene syntaxisregels Sjabloontags Objecttags Sjabloonsyntaxis controleren Naar boven Algemene syntaxisregels Dreamweaver gebruikt HTML-commentaartags om gebieden in sjablonen en op een sjabloon gebaseerde documenten aan te geven, zodat op een sjabloon gebaseerde documenten nog steeds geldige HTML-bestanden zijn. Als u een sjabloonobject invoegt, worden sjabloontags ingevoegd in de code.
8 9 Naar boven Sjabloonsyntaxis controleren Dreamweaver controleert de sjabloonsyntaxis wanneer u een sjabloon opslaat, maar u kunt de sjabloonsyntaxis ook handmatig controleren voordat u de sjabloon opslaat. Als u bijvoorbeeld een sjabloonparameter of een expressie in de codeweergave toevoegt, kunt u controleren of de code de juiste syntaxis volgt. 1. Open het te controleren document in het documentvenster. 2.
Voorkeuren voor het schrijven van sjablonen instellen De voorkeuren voor codekleuren wijzigen voor een sjabloon Voorkeuren voor de markering van sjabloongebieden instellen De voorkeuren voor codekleuren wijzigen voor een sjabloon Naar boven Voorkeuren voor codekleuren bepalen de tekst-, achtergrondkleur- en stijlkenmerken van de tekst, zoals wordt weergegeven in de codeweergave.
de juiste markeringskleur is geselecteerd. Zorg er ook voor dat de gewenste kleur zichtbaar is tegen de achtergrondkleur van uw pagina.
Mobiel en meerdere schermen 622
Mediaquery's maken U kunt mediaquery's gebruiken om CSS-bestanden op te geven op basis van de gerapporteerde kenmerken van een apparaat (responsief ontwerp). De browser op het apparaat controleert de mediaquery en gebruikt het bijbehorende CSS-bestand om de webpagina weer te geven. In het volgende voorbeeld is in de mediaquery het bestand phone.css opgegeven voor apparaten met een breedte van 300-320 pixels. 1 PAGE 631
1 6. Voer een van de volgende handelingen uit: Klik op '+' om de eigenschappen voor het mediaquerybestand te definiëren. Klik op Standaardvoorinstellingen als u wilt beginnen met de standaardwaarden. 7. Selecteer rijen in de tabel en gebruik de opties bij Eigenschappen om de eigenschappen van de rijen te bewerken. Beschrijving De beschrijving van het apparaat waarvoor het CSS-bestand moet worden gebruikt.
Gebruik deze procedure om het bestand met mediaquery's voor de hele site te wijzigen dat u hebt ingesteld in het dialoogvenster Mediaquery's. 1. Selecteer Site > Sites beheren. 2. Selecteer uw site in het dialoogventer Sites beheren. 3. Klik op Bewerken. Het dialoogvenster Site-instelling wordt weergegeven. 4. Selecteer Lokale informatie bij Geavanceerde instellingen in het linkerdeelvenster. 5. Klik op Bladeren bij Mediaquerybestand voor de hele site om het CSS-bestand voor mediaquery's te selecteren.
Paginaoriëntatie voor mobiele apparaten wijzigen Opmerking: De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger. Zie dit artikel voor meer informatie. Bij de meeste geavanceerde mobiele apparaten is de oriëntatie van de pagina afhankelijk van de wijze waarop het apparaat wordt vastgehouden. Als de gebruiker de telefoon verticaal houdt, wordt de staande oriëntatie gebruikt.
Webtoepassingen voor mobiele apparaten maken (CS5.5) Meer Help-onderwerpen http://jquerymobile.com/demos/1.0a3/ http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery http://en.wikipedia.org/wiki/Content_delivery_network http://docs.jquery.
XML 628
Over XML en XSLT XML en XSL gebruiken in webpagina's Server-side XSL-transformaties Client-side XSL-transformaties XML-gegevens en herhalende elementen XML-gegevens voorvertonen Naar boven XML en XSL gebruiken in webpagina's Extensible Markup Language (XML) is een taal waarmee u informatie kunt structureren. Evenals bij HTML kunt u bij XML informatie met tags structureren, maar XML-tags zijn niet vooraf gedefinieerd zoals de HTML-tags.
Dreamweaver biedt methoden voor het maken van XSLT-pagina's waarmee u server-side XSL-transformaties kunt uitvoeren. Als een toepassingsserver de XSL-transformatie uitvoert, kan het bestand met de XML-gegevens zich op uw eigen server bevinden of elders op het web. Bovendien kan elke browser de getransformeerde gegevens weergeven. Het implementeren van pagina's voor server-side transformaties is echter enigszins gecompliceerd en daarvoor is toegang vereist tot een toepassingsserver.
U kunt XSL-transformaties op de client uitvoeren zonder een toepassingsserver. Met Dreamweaver kunt u een hele XSLT-pagina maken die de transformaties uitvoert. Voor client-side transformaties is echter manipulatie van het XML-bestand vereist met de gegevens die u wilt weergeven. Bovendien werken client-side transformaties alleen in moderne browsers (Internet Explorer 6, Netscape 8, Mozilla 1.8 en Firefox 1.0.2). Zie www.w3schools.com/xsl/xsl_browsers.
Met Herhalingsgebied XSLT-object kunt u herhalende elementen van een XML-bestand op een pagina herhalen. Elk gebied met een tijdelijke aanduiding voor XML-gegevens kan als herhalingsgebied worden aangemerkt. De meestvoorkomende gebieden zijn echter een tabel, tabelrij of een reeks tabelrijen. In het volgende voorbeeld wordt geïllustreerd hoe het Herhalingsgebied XSLT-object wordt toegepast op een tabelrij met menu-informatie voor een restaurant.
In het vorige voorbeeld heeft Dreamweaver het XPath bijgewerkt voor alle elementen die binnen het Herhalingsgebied vallen (titel en omschrijving), en relatief zijn ten opzichte van het XPath in de ingesloten -tags in plaats van het volledige document. Dreamweaver genereert ook in andere gevallen contextrelatieve XPath-expressies.
XSL-transformaties op de server uitvoeren Workflow voor het uitvoeren van server-side XSL-transformaties XSLT-pagina maken HTML-pagina's omzetten naar XSLT-pagina's XML-gegevensbronnen koppelen XML-gegevens weergeven op XSLT-pagina's Herhalende XML-elementen weergeven XSLT-fragmenten invoegen in dynamische pagina's XSLT-fragmenten verwijderen uit dynamische pagina's Servergedrag voor XSL-transformaties bewerken Een dynamische koppeling maken Stijlen toepassen op XSLT-fragmenten Parameters met XSL-transforma
10. Bekijk de dynamische pagina in een browser. De toepassingsserver transformeert dan de XML-gegevens, voegt deze aan de dynamische pagina toe en geeft ze in de browser weer. Naar boven XSLT-pagina maken U kunt XSLT-pagina's maken waarmee u XML-gegevens kunt weergeven op webpagina's. U kunt een hele XSLT-pagina maken (een XLSTpagina die een
-code en een -code bevat), of u kunt een XSLT-fragment maken.
op te bouwen. 1. Open de HTML-pagina die u wilt omzetten. 2. Kies Bestand > Omzetten > XSLT 1.0. In het documentvenster wordt een kopie van de pagina geopend. De nieuwe pagina is een XSL-stijlpagina, opgeslagen met de extensie .xsl. Naar boven XML-gegevensbronnen koppelen Als u met een bestaande XSLT-pagina start of geen XML-gegevensbron koppelt bij het maken van een nieuwe XSLT-pagina met Dreamweaver, moet u een XML-gegevensbron koppelen met het paneel Bindingen. 1.
Op de pagina verschijnt een tijdelijke aanduiding voor XML-gegevens. Deze aanduiding wordt gemarkeerd en staat tussen accolades. De XPath-syntaxis (XML Path-taal) wordt gebruikt om de hiërarchische structuur van het XML-schema te beschrijven. Als u bijvoorbeeld het onderliggende element title naar de pagina sleept en dat element de bovenliggende elementen rss, channel en item heeft, is de syntaxis van de tijdelijke aanduiding voor de dynamische inhoud rss/channel/item/title.
Klik op Herhalingsgebied in de categorie XSLT van het paneel Invoegen. 3. Selecteer in de expressiebouwer voor XPath het herhalende element dat door een klein plusteken aangeduid wordt. 4. Klik op OK. In het documentvenster verschijnt een dunne grijze omtrek met tab rond het herhaalde gebied. Als u uw werk in een browser bekijkt (Bestand > Voorvertoning in browser), verdwijnt de grijze omtrek, wordt de selectie uitgebreid en geeft deze de opgegeven herhalende elementen in het XML-bestand weer.
3. Klik in het deelvenster Servergedrag (Venster > Servergedrag) op de knop Plus (+) en kies XSL-transformatie. 4. Klik in het dialoogvenster XSL-transformatie op Bladeren en blader naar een XSLT-fragment of een hele XSLT-pagina. Dreamweaver vult het volgende tekstveld met het bestandspad of de URL van het XML-bestand dat aan het opgegeven fragment is gekoppeld. Klik op Bladeren als u dit wilt wijzigen en ga naar een ander bestand. 5.
U kunt een dynamische koppeling op uw XSLT-pagina maken die verwijst naar een specifieke URL als de gebruiker op een bepaald woord of een groep woorden in uw XML-gegevens klikt. Zie de Dreamweaver-errata op www.adobe.com/go/dw_documentation_nl voor volledige instructies.
meer informatie. 5. In het vak Standaardwaarde typt u de waarde die de parameter moet gebruiken als de pagina geen runtimewaarde ontvangt. Klik daarna op OK. XSLT-parameter bewerken 1. Open het dialoogvenster XSL-transformatie. U kunt deze dialoog openen door te dubbelklikken op een servergedrag voor XSL-transformatie in het paneel Servergedrag (Venster > Servergedrag) of door een nieuw servergedrag voor XSLtransformatie toe te voegen. 2. Selecteer een parameter uit de lijst van XSLT-parameters. 3.
aanhalingstekens voor u (') zodat deze als geldige XHTML worden ingevoerd. Naast het testen van waarden van knooppunten kunt u alle ondersteunde XSLT-functies in een voorwaardelijke expressie gebruiken. De voorwaarde wordt getest voor het huidige knooppunt in uw XML-bestand. In het volgende voorbeeld wilt u het laatste knooppunt in de resultaten testen.
Eigenschappen voorwaardelijk gebied (If) instellen Doel van de eigenschappencontrole Voorwaardelijk gebied instellen is het wijzigen van de in een voorwaardelijk gebied van uw XSL-pagina gebruikte voorwaarde. Het voorwaardelijke gebied test de voorwaarde en neemt een bepaalde actie op basis van het resultaat. Voer in het vak Test een nieuwe voorwaarde in en druk op Enter.
Deze selectie voegt de volgende code in op uw XSLT-pagina: 1 3. (Optioneel) Selecteer een opmaakoptie in het pop-upmenu Opmaak. Opmaken van een selectie is handig wanneer het knooppunt een getal als waarde retourneert. Dreamweaver biedt een voorgedefinieerde lijst van opmaakfuncties. Zie het paneel Referenties voor een volledige lijst van opmaakfuncties en voorbeelden. In het volgende voorbeeld wilt u het subelement price opmaken als een valuta met twee decimalen.
5. Om de waarde van elk knooppunt in het XML-bestand weer te geven past u een herhalingsgebied toe op het element met de dynamische tekst (bijvoorbeeld een HTML-tabelrij of een alinea). Zie de sectie in het paneel Referentie voor meer informatie en voorbeelden desbetreffende het selecteren van knooppunten voor het retourneren van waarden. Te herhalen knooppunt selecteren U kunt een knooppunt selecteren om te herhalen en de resultaten eventueel filteren.
Waarde Geeft de waarde aan die gecontroleerd moet worden in het knooppunt voor Filteren op. Voer de waarde in. Als dynamische parameters voor uw XSLT-pagina gedefinieerd zijn, kunt u een daarvan selecteren in het pop-upmenu. 5. Klik nogmaals op de knop Plus (+) om een ander filter op te geven. Als u waarden invoert of iets in de pop-upmenu's selecteert, wordt XPath-expressie in het vak Expressie aangepast.
Als u op OK klikt, wordt de volgende code op uw XSLT-pagina ingevoegd. 1 2 3 Content goes here Zie de sectie in het paneel Referentie voor meer informatie en voorbeelden van desbetreffende herhalingsgebieden.
XSL-transformaties op de client uitvoeren Workflow voor het uitvoeren van client-side XSL-transformaties Hele XSLT-pagina's en XSLT-fragmenten maken en gegevens weergeven Een XSLT-pagina aan een XML-pagina koppelen Workflow voor het uitvoeren van client-side XSL-transformaties Naar boven U kunt client-side XSL-transformaties uitvoeren. Lees meer over server-side en client-side XSL-transformaties en over het gebruik van XML en XSL bij webpagina's voordat u pagina's gaat bouwen die XML-gegevens weergeven.
4. Klik op OK om het dialoogvenster te sluiten en voeg de verwijzing naar de XSLT-pagina bovenaan in het XML-document in.
Ontbrekende tekeneenheden voor XSLT Ontbrekende tekeneenheid opgeven Naar boven Ontbrekende tekeneenheid opgeven In XSLT zijn sommige tekens niet toegestaan in bepaalde contexten. U mag bijvoorbeeld het teken kleiner dan (<) en het en-teken (&) niet gebruiken in de tekst tussen tags of in de waarde van een kenmerk. De engine voor de XSLT-transformatie geeft een foutmelding als deze tekens niet correct zijn gebruikt.
2. Noteer de naam van de genoemde tekeneenheid en de eenheidcode. In het voorbeeld is Egrave de entiteitsnaam en is È de entiteitscode. 3. Schakel naar codeweergave en voer bovenaan in uw XSL-bestand (na de DOCTYPE-declaratie en samen met de andere eenheidtags) de volgende eenheidtag in: 1 entityname "entitycode;"> In het voorbeeld voert u de volgende eenheidtag in: 1 4. Sla uw bestand op.
Dynamische sites, pagina's en webformulieren 652
Wat zijn webtoepassingen Over webtoepassingen Veelvoorkomende toepassingen voor webtoepassingen Voorbeeld van webtoepassing De werking van een webtoepassing Statische webpagina's verwerken Dynamische pagina's verwerken Toegang krijgen tot een database Dynamische pagina's ontwerpen Webtoepassingsterminologie Naar boven Over webtoepassingen Een webtoepassing is een website die pagina's bevat met gedeeltelijk of geheel onbepaalde inhoud.
Werknemers kunnen hun maandelijkse voortgang volgen. Chris heeft met één klik toegang tot het puntentotaal aan het einde van elke maand. Janet heeft de toepassing vóór lunchtijd geschreven en geactiveerd met Dreamweaver, dat de hulpmiddelen heeft die nodig zijn om een dergelijke toepassing snel en eenvoudig samen te stellen. Naar boven De werking van een webtoepassing Een webtoepassing is een verzameling statische en dynamische webpagina's.
In het geval van webtoepassingen zijn bepaalde coderegels onbepaald wanneer de bezoeker de pagina aanvraagt. Deze regels moeten door enkele mechanismen worden bepaald voordat de pagina naar de browser kan worden verzonden. Het mechanisme wordt in de volgende sectie besproken. Naar boven Dynamische pagina's verwerken Wanneer een webserver een verzoek voor een statische webpagina ontvangt, verzendt de server de pagina rechtstreeks naar de desbetreffende browser.
de toepassingsserver, die de gegevens gebruikt om de pagina te voltooien. Hier volgt een eenvoudige databasequery in SQL: 1 2 SELECT lastname, firstname, fitpoints FROM employees Deze instructie maakt een recordset met drie kolommen en vult deze met rijen die de achternaam, voornaam en fitnesspunten bevatten van alle werknemers in de database. Voor meer informatie, zie www.adobe.com/go/learn_dw_sqlprimer_nl.
14 15 Met de ingesloten instructies op deze pagina worden de volgende acties uitgevoerd: 1. Er wordt een variabele met de naam department gemaakt en hieraan wordt de tekenreeks "Sales" toegekend. 2. De waarde van de variabele, "Sales", wordt in de HTML-code ingevoegd.
Een databasemanagementsysteem (DBMS of databasesysteem) Software die wordt gebruikt om databases te maken en te manipuleren. Veelvoorkomende databasesystemen zijn Microsoft Access, Oracle 9i en MySQL. Een databasequery De bewerking die een recordset uit een database haalt. Een query bestaat uit zoekcriteria die worden uitgedrukt in een databasetaal die SQL wordt genoemd. De query kan bijvoorbeeld stellen dat alleen bepaalde kolommen of alleen bepaalde records in de recordset mogen worden opgenomen.
Uw computer instellen voor de ontwikkeling van toepassingen Wat u nodig hebt voor het bouwen van webtoepassingen De basisprincipes van de webserver Een webserver kiezen Een toepassingsserver kiezen Een database kiezen Een ColdFusion-ontwikkelomgeving instellen Een PHP-ontwikkelomgeving instellen Een ASP-ontwikkelomgeving instellen Een hoofdmap maken voor de toepassing Het definiëren van een Dreamweaver-site Wat u nodig hebt voor het bouwen van webtoepassingen Naar boven Voor het bouwen van webtoepassinge
C:\Inetpub\wwwroot\vakantie\zon.html U kunt deze pagina openen door de volgende URL in te voeren in een browser op uw computer: http://zwarte_zee/vakantie/zon.html Wanneer de webserver wordt uitgevoerd op uw computer, kunt u de servernaam vervangen door localhost. Zo wordt bijvoorbeeld met de volgende URL's dezelfde pagina in een browser geopend: http://zwarte_zee/vakantie/zon.html http://localhost/vakantie/zon.
de ondersteuning van de beoogde gebruikersgroep voor uw site. Voor websites waarbij behoefte is aan een grotere mate van flexibiliteit voor modellering van gegevens, en aan de mogelijkheid om grote groepen gelijktijdige gebruikers te ondersteunen, kunt u op servers gebaseerde, relationele databases (doorgaans aangeduid als RDBMS) overwegen, zoals MySQL, Microsoft SQL Server en Oracle. Naar boven Een ColdFusion-ontwikkelomgeving instellen Ga naar de Adobe-website op www.adobe.
Als de webserver wordt uitgevoerd op uw lokale computer, kunt u localhost gebruiken in plaats van een domeinnaam. Voer in overeenstemming met uw webserver een van de volgende URL's voor de lokale host in: Webserver URL voor lokale host ColdFusion 8 http://localhost:8500/testpage.htm IIS http://localhost/testpage.htm Apache (Windows) http://localhost:80/testpage.htm Apache (Macintosh) http://localhost/~MijnGebruikersnaam/testpage.
Databaseverbindingen voor ColdFusion-ontwikkelaars Verbinding maken met een ColdFusion-database Een ColdFusion-gegevensbron maken of aanpassen Verbinding maken met de database in Dreamweaver Opmerking: De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger. Zie dit artikel voor meer informatie.
3. Meld u aan bij ColdFusion MX Administrator en maak een nieuwe gegevensbron of pas een gegevensbron aan. Voor instructies, zie ColdFusion Help (Help > ColdFusion Help). U moet bepaalde parameterwaarden opgeven om de ColdFusion-gegevensbron te maken. Zie de documentatie van de leverancier van het stuurprogramma of raadpleeg uw systeembeheerder voor de parameterwaarden voor uw specifieke databasestuurprogramma. Zodra u een ColdFusion-gegevensbron hebt gemaakt, kunt u deze in Dreamweaver gebruiken.
Databaseverbindingen voor ASP-ontwikkelaars ASP-databaseverbindingen OLE DB-verbindingen Verbindingstekenreeksen Een verbinding maken met een lokale DSN Een verbinding maken met een DSN op afstand Een verbinding maken met een verbindingstekenreeks Een databaseverbinding bewerken of verwijderen Opmerking: De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger.
UID=wiley;PWD=roadrunner Opmerking: u kunt een verbindingstekenreeks ook gebruiken als u een verbinding maakt via een ODBCstuurprogramma dat is geïnstalleerd op een Windows-systeem, maar het gebruik van een DSN is eenvoudiger. Naar boven OLE DB-verbindingen U kunt een OLE DB-provider gebruiken voor de communicatie met uw database (OLE DB is alleen beschikbaar op Windows NT, 2000 of XP).
Driver Het ODBC-stuurprogramma dat wordt gebruikt als u geen OLE DB-provider opgeeft voor uw database. Server De server die als host fungeert voor de SQL Server-database als uw webtoepassing op een andere server wordt uitgevoerd. Database De naam van een SQL Server-database. DBQ Het pad naar een bestandsdatabase, bijvoorbeeld een database die is gemaakt in Microsoft Access. Het pad is het pad op de server die als host fungeert voor het databasebestand. UID De gebruikersnaam.
2. Open een ASP-pagina in Dreamweaver en open vervolgens het paneel Databases (Venster > Databases). 3. Klik op de plusknop (+) in het paneel en selecteer Naam gegevensbron (DSN) in het menu. 4. Voer een naam in voor de nieuwe verbinding, zonder spaties of speciale tekens. 5. Selecteer de optie Lokale DSN gebruiken en kies de DSN die u wilt gebruiken in het menu Naam gegevensbron (DSN).
6. Voer de DSN in of klik op de knop DSN om een verbinding met de server te maken en selecteer de DSN voor de gewenste database. Vul vervolgens de opties in. 7. Vul de tekstvakken Gebruikersnaam en Wachtwoord in. 8. U kunt het aantal database-items beperken dat Dreamweaver ophaalt tijdens de ontwerpfase, door op Geavanceerd te klikken en een schema- of catalogusnaam in te voeren. Opmerking: In Microsoft Access kunt u geen schema of catalogus maken. 9.
Als uw ISP geen DSN voor u definieert of als dit te lang duurt, moet u een andere manier bedenken om de verbinding met uw databasebestanden te maken. Eén mogelijkheid is het maken van een verbinding zonder DSN met een databasebestand. U kunt zo'n verbinding echter alleen definiëren als u het fysieke pad van het databasebestand kent op de server van de ISP. U kunt het fysieke bestand van een databasebestand op een server verkrijgen met behulp van de MapPathmethode van het ASP-serverobject.
stringvariable. Hieronder ziet u een voorbeeld: <% Response.Write(Server.MapPath("/jsmith/index.htm")) %> 4. Schakel over naar Live View (Weergave > Live View) om de pagina te bekijken. Op de pagina wordt het fysieke pad weergegeven van het bestand op de toepassingsserver, bijvoorbeeld: c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm Voor meer informatie over de methode MapPath raadpleegt u de onlinedocumentatie die wordt geleverd bij Microsoft IIS.
Opmerking: Macintosh-gebruikers kunnen deze stap overslaan omdat alle databaseverbindingen de toepassingsserver gebruiken. Opmerking: Als het niet lukt om een verbinding tot stand te brengen, moet u de verbindingstekenreeks nog eens controleren of neemt u contact op met uw ISP om na te gaan of het databasestuurprogramma dat u hebt opgegeven in de verbindingstekenreeks, is geïnstalleerd op de server op afstand. Controleer ook of de ISP de meest recente versie heeft van het stuurprogramma.
De databasegegevens beperken die in Dreamweaver worden weergegeven Problemen met databaseverbindingen oplossen Verbinding maken met een ColdFusion-database De databasegegevens beperken die in Dreamweaver worden weergegeven Problemen met databaseverbindingen oplossen De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.
Databaseverbindingen voor PHP-ontwikkelaars PHP-databaseverbindingen Verbinding maken met een database Een databaseverbinding bewerken of verwijderen Opmerking: De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger. Zie dit artikel voor meer informatie. Naar boven PHP-databaseverbindingen Voor het ontwikkelen in PHP ondersteunt Dreamweaver alleen het MySQL-databasesysteem.
Wanneer u een databaseverbinding maakt, wordt de verbindingsinformatie door Dreamweaver opgeslagen in een opnamebestand in de submap Connections in de lokale hoofdmap van de site. U kunt de verbindingsinformatie in het bestand ofwel met de hand ofwel als volgt bewerken of verwijderen. Een verbinding bewerken 1. Open een PHP-pagina in Dreamweaver en open vervolgens het deelvenster Databases (Venster > Databases). 2.
Problemen met databaseverbindingen oplossen Problemen met rechten oplossen Microsoft-foutberichten oplossen MySQL-foutberichten oplossen Naar boven Problemen met rechten oplossen Een van de meest voorkomende problemen is dat van ontoereikende map- of bestandsrechten.
6. Selecteer de IUSR_computernaam-account en klik op Toevoegen. 7. Als u de volledige rechten aan de IUSR-account wilt toewijzen, selecteert u Volledig beheer in het menu Type toegang en klikt u op OK. Voor een nog strengere beveiliging kunnen er nog rechten worden ingesteld zodat de leesrechten worden uitgeschakeld voor de webmap die de database bevat. Het bekijken van de map is dan niet toegestaan, maar webpagina's hebben nog wel toegang tot de database.
PRB: Error “Cannot Open File Unknown” Using Access op http://support.microsoft.com/default.aspx?scid=kb;nl-nl;Q166029_nl. [Referentie]80004005—Aanmelden mislukt() Deze fout treedt op wanneer u werkt met Microsoft SQL Server en probeert een dynamische pagina weer te geven in een webbrowser of in Live View.
Deze fout is doorgaans het resultaat van een of meer van de volgende problemen met de naam van een veld, object of variabele in de database: Een gereserveerd woord als naam gebruiken. De meeste databases bevatten een lijst met gereserveerde woorden. Zo is “date” een gereserveerd woord dat niet voor kolomnamen in een database kan worden gebruikt. Speciale tekens in de naam gebruiken. Voorbeelden van speciale tekens zijn onder meer: ./*:!#&-? Een spatie in de naam gebruiken.
Verbindingsscripts verwijderen De opdracht Verbindingsscripts verwijderen gebruiken De opdracht Verbindingsscripts verwijderen gebruiken Naar boven U kunt de opdracht Verbindingsscripts verwijderen gebruiken om scripts te verwijderen die door Dreamweaver in een map op afstand zijn geplaatst om toegang te krijgen tot databases. Deze scripts zijn alleen nodig tijdens de ontwerpfase in Dreamweaver.
De werkruimte optimaliseren voor visuele ontwikkeling Panelen voor de ontwikkeling van webtoepassingen weergeven De database weergeven in Dreamweaver Dynamische pagina's bekijken in een browser De databasegegevens beperken die in Dreamweaver worden weergegeven Stel de eigenschappencontrole in voor opgeslagen ColdFusion-procedures en ASP-opdrachten Opties van Invoernaam Panelen voor de ontwikkeling van webtoepassingen weergeven Naar boven Selecteer de categorie Gegevens in het pop-upmenu Categorie van het
De kolompictogrammen reflecteren het gegevenstype en geven de primaire sleutel van de tabel aan. 4. Als u de gegevens in een tabel wilt weergeven, klikt u met de rechtermuisknop (Windows) of klikt u terwijl u Control ingedrukt houdt (Macintosh), op de tabelnaam in de lijst en kiest u Gegevens weergeven in het snelmenu. Naar boven Dynamische pagina's bekijken in een browser Ontwikkelaars van webtoepassingen debuggen hun pagina's dikwijls door ze regelmatig in een webbrowser te bekijken.
Meer Help-onderwerpen Handleiding ontwikkelwerkruimte Een testserver instellen Juridische kennisgevingen | Online privacybeleid 683
Dynamische pagina's ontwerpen Dreamweaver en het ontwerpen van dynamische pagina's Dreamweaver en het ontwerpen van dynamische pagina's Voer de volgende algemene stappen uit om een dynamische website te ontwerpen en te maken. 1. Ontwerp de pagina. Een belangrijke stap tijdens het ontwerpen van elke website, of het nu gaat om een statische of dynamische website, is het visuele ontwerp van de pagina.
Definieer een recordset op basis van een bestaande database. De gedefinieerde recordset wordt opgeslagen in het paneel Bindingen. Geef meerdere records op een enkele pagina weer. U selecteert een hele tabel of afzonderlijke cellen of rijen die dynamische inhoud bevatten, en u geeft op hoeveel records u in elke paginaweergave wilt weergeven. Maak of voeg een dynamische tabel op een pagina in en koppel de tabel aan een recordset.
Overzicht van dynamische inhoudsbronnen Over dynamische inhoudsbronnen Over recordsets Over URL- en formulierparameters Over sessievariabelen ASP- en ColdFusion-toepassingsvariabelen ASP-servervariabelen ColdFusion-servervariabelen Naar boven Over dynamische inhoudsbronnen Een dynamische inhoudsbron is een opslagplaats van informatie van waaruit u dynamische inhoud voor een webpagina kunt ophalen en weergeven.
URL-parameters slaan opgehaalde informatie-invoer van gebruikers op. Als u een URL-parameter wilt definiëren, maakt u een formulier- of hypertekstkoppeling die de methode GET gebruikt om gegevens te verzenden. De informatie wordt toegevoegd aan de URL van de gevraagde pagina en wordt aan de server doorgegeven. Als u URL-variabelen gebruikt, bevat de queryreeks een of meer naam-/waardeparen die aan de formuliervelden zijn gekoppeld. Deze naam-/waardeparen worden aan de URL toegevoegd.
Nadat u de waarde hebt opgeslagen in een sessievariabele, kunt u Dreamweaver gebruiken om de waarde op te halen uit sessievariabelen en deze te gebruiken in een webtoepassing. Nadat u de sessievariabele hebt gedefinieerd in Dreamweaver, kunt u de waarde ervan invoegen in een pagina. De HTML-syntaxis hiervoor ziet er als volgt uit: 1 2
Elke koppeling heeft een URL-parameter met de naam fontsize waarmee de tekstvoorkeur van de gebruiker naar de server wordt gestuurd, zoals u ziet in het volgende voorbeeld van Adobe ColdFusion®: 1 2 Larger Text Normal Text Sla de tekstvoorkeur van de gebruiker op in een sessievariabele en gebruik deze om op elke pagina de tekstgrootte in te stellen op het verzoek van de gebruiker.
pagina (of sessie) tot de volgende wordt bewaard zodat de toepassing zich de gebruiker en diens vorige keuzen en voorkeuren nog herinnert. Cookievariabelen benaderen cookies die door de browser aan de server zijn doorgegeven. CGI-variabelen verschaffen informatie over de server waarop ColdFusion wordt uitgevoerd, over de browser die een pagina opvraagt, en andere informatie over de verwerkingsomgeving. Servervariabelen kunnen worden benaderd door alle clients en toepassingen op de server.
Bronnen met dynamische inhoud definiëren Een recordset definiëren zonder SQL te schrijven Een geavanceerde recordset definiëren door SQL te schrijven SQL-query's maken met de structuur Database-items URL-parameters definiëren Formulierparameters definiëren Sessievariabelen definiëren Toepassingsvariabelen definiëren voor ASP en ColdFusion Een variabele als gegevensbron voor een ColdFusion-recordset gebruiken Servervariabelen definiëren Inhoudsbronnen opslaan in de cache Inhoudsbronnen wijzigen of verwijdere
Selecteer in het tweede pop-upmenu een voorwaardelijke expressie die u wilt gebruiken om de geselecteerde waarde in elke record met de testwaarde te vergelijken. Selecteer in het derde pop-upmenu de optie Ingevoerde waarde. Voer in het vak de testwaarde in. Als de opgegeven waarde in de record voldoet aan de filtervoorwaarde, wordt de record in de recordset opgenomen. 6.
Een geavanceerde recordset definiëren door SQL te schrijven Naar boven Schrijf uw eigen SQL-instructies met behulp van het dialoogvenster Geavanceerde recordset of maak een SQL-instructie met behulp van de grafische structuur Database-items. 1. Ga naar het documentvenster en open de pagina waarop de recordset gebruikt zal worden. 2. Kies Venster > Bindingen om het paneel Bindingen weer te geven. 3. Klik in het paneel Bindingen op de plusknop (+) en kies Recordset (Query) in het snelmenu.
ASP Request.QueryString(“formFieldName”) PHP $_GET['formFieldName'] Formulierparameters in de kolom Runtimewaarde: Servermodel Runtimewaarde-expressie voor formulierparameter ASP Request.Form(“formFieldName”) PHP $_POST['formFieldName'] 5. Klik op Testen om de database te verbinden en een instantie van de recordset te maken. Als de SQL-instructie variabelen bevat, moet u ervoor zorgen dat de kolom Standaardwaarde van het vak Variabelen geldige testwaarden bevat voordat u op Testen klikt.
geldige testwaarden bevat. Met de paginaparameters kunt u standaardwaarden opgeven voor verwijzingen naar runtimewaarden in de SQL die u schrijft. Met de volgende SQL-instructie wordt bijvoorbeeld een werknemersrecord geselecteerd op basis van de waarde van de werknemers-id. U kunt deze parameter een standaardwaarde geven om ervoor te zorgen dat altijd een runtimewaarde wordt geretourneerd.
Ga als volgt te werk om deze query te maken. 1. Vouw het element Tabellen uit om alle tabellen in de geselecteerde database weer te geven. 2. Selecteer de tabel Employees. 3. Klik op de knop Selecteren. 4. Klik op OK om de recordset aan het paneel Bindingen toe te voegen. Voorbeeld: Specifieke rijen in een tabel selecteren en de resultaten ordenen In het volgende voorbeeld worden twee rijen in de tabel Employees geselecteerd en wordt het taaktype geselecteerd met een variabele die u moet definiëren.
1. Ga naar het documentvenster en open de pagina waarop de variabele gebruikt zal worden. 2. Kies Venster > Bindingen om het paneel Bindingen weer te geven. 3. Klik in het paneel Bindingen op de plusknop (+) en kies een van de volgende opties in het snelmenu: Documenttypen Menu-item in paneel Bindingen voor formuliervariabele ASP Request-variabele > Request.Form ColdFusion Formuliervariabele PHP Formuliervariabele 4.
De toepassingsvariabele wordt in het paneel Bindingen onder het toepassingspictogram weergegeven. Een variabele als gegevensbron voor een ColdFusion-recordset gebruiken Naar boven Wanneer u een recordset definieert voor een pagina in het deelvenster Bindingen, voegt Dreamweaver de naam van de ColdFusiongegevensbron toe in de cfquery-tag op de pagina. Voor meer flexibiliteit kunt u een gegevensbronnaam in een variabele opslaan en deze variabele in de tag cfquery gebruiken.
Server.OS.Name Naam van besturingssysteem dat op de server wordt uitgevoerd (Windows XP, Windows 2000, Linux) Server.OS.AdditionalInformation Aanvullende informatie over geïnstalleerd besturingssysteem (servicepacks, updates). Server.OS.Version Versie van geïnstalleerd besturingssysteem. Server.OS.BuildNumber Buildnummer van geïnstalleerd besturingssysteem.
clientvariabelen worden weergegeven in het paneel Bindingen. Voer in het dialoogvenster Clientvariabele de naam van de variabele in en klik op OK. Als u bijvoorbeeld toegang wilt krijgen tot de informatie in de ColdFusion-variabele Client.LastVisit, voert u LastVisit in. Clientvariabelen zijn variabelen die in de code zijn gemaakt om gegevens aan een specifieke client te koppelen.
QUERY_STRING De query-informatie die op het vraagteken (?) volgt in de URL die naar dit script verwijst. REMOTE_HOST De naam van de host die de aanvraag doet. Als de server niet over deze informatie beschikt, wordt REMOTE_ADDR in plaats van REMOTE_HOST ingesteld. REMOTE_ADDR Het IP-adres van de externe host die de aanvraag doet.
2. Klik op de minknop (-). Een recordset kopiëren van de ene pagina naar de andere U kunt binnen een gedefinieerde site een recordset van de ene pagina naar de andere kopiëren. 1. Selecteer de recordset in het paneel Bindingen of het paneel Servergedrag. 2. Klik met de rechtermuisknop en kies Kopiëren in het snelmenu. 3. Open de pagina waarnaar u de recordset wilt kopiëren. 4. Klik met de rechtermuisknop in het paneel Bindingen of op de werkbalk Servergedrag en kies Plakken in het snelmenu.
Dynamische inhoud toevoegen aan pagina's Over het toevoegen van dynamische inhoud Dynamische tekst Tekst dynamisch maken Afbeeldingen dynamisch maken HTML-kenmerken dynamisch maken ActiveX-, Flash- en andere objectparameters dynamisch maken Naar boven Over het toevoegen van dynamische inhoud Wanneer u een of meer bronnen van dynamische inhoud hebt gedefinieerd, kunt u deze bronnen gebruiken om dynamische inhoud aan de pagina toe te voegen.
Het is mogelijk dat de pagina-indeling in het documentvenster wordt vervormd door de lengte van de tijdelijke aanduidingen voor dynamische tekst. U kunt dit probleem oplossen door lege accolades als tijdelijke aanduidingen te gebruiken, zoals in het volgende onderwerp wordt beschreven. Tijdelijke aanduidingen voor dynamische tekst weergeven 1. Kies Bewerken > Voorkeuren > Onzichtbare elementen (Windows) of Dreamweaver > Voorkeuren > Onzichtbare elementen (Macintosh). 2.
Als het kenmerk dat u wilt koppelen een mappictogram ernaast heeft in de eigenschappencontrole, klik dan op het mappictogram om een dialoogvenster te openen waarin u een bestand kunt selecteren, en klik vervolgens op de optie Gegevensbronnen om een lijst met gegevensbronnen weer te geven. Als er geen mappictogram staat naast het kenmerk dat u wilt koppelen, klikt u op het tabblad Lijst (het onderste van de twee tabbladen), links in de eigenschappencontrole.
Dynamische inhoud wijzigen Over dynamische inhoud Dynamische inhoud bewerken Dynamische inhoud verwijderen Dynamische inhoud testen Gebruikers van Adobe Contribute dynamische inhoud laten bewerken Recordsets wijzigen met de eigenschappencontrole Naar boven Over dynamische inhoud U kunt de dynamische inhoud op een pagina wijzigen door het servergedrag te wijzigen dat de inhoud verschaft. U kunt bijvoorbeeld het servergedrag van een resordset bewerken om meer records op de pagina weer te geven.
2. Breng de noodzakelijke wijzigingen op de pagina aan. Schakel tussen Live View en de code- of ontwerpweergave om wijzigingen aan te brengen en het effect van de wijzigingen te controleren. Gebruikers van Adobe Contribute dynamische inhoud laten bewerken Naar boven Wanneer een gebruiker van Contribute een pagina bewerkt die dynamische inhoud of onzichtbare elementen (zoals scripts en commentaren) bevat, worden de dynamische inhoud en onzichtbare elementen in Contribute als gele markeringen weergegeven.
Databaserecords weergeven Databaserecords Servergedrag en opmaakelementen Typografische elementen en pagina-indelingselementen toepassen op dynamische gegevens Navigeren door de resultaten van databaserecordsets Een navigatiebalk voor een recordset maken Aangepaste navigatiebalken voor recordsets Taken voor het ontwerpen van de navigatiebalk Gebieden weergeven en verbergen op basis van recordsetresultaten Meerdere recordsetresultaten weergeven Een dynamische tabel maken Recordtellers maken Vooraf gedefiniee
Recordsetstatusbalk Met servergedrag kunt u een teller opnemen, waaraan gebruikers kunnen zien waar ze zich in een set records bevinden ten opzichte van het totale aantal records dat is geretourneerd. Gebied weergeven Met servergedrag kunt u kiezen of u items op de pagina wilt weergeven of verbergen op basis van de relevantie van de op dat moment weergegeven records.
Voordat u de navigatiebalk op de pagina plaatst, moet u controleren of de pagina een recordset bevat waar u doorheen kunt navigeren en een pagina-indeling heeft waarin de records kunnen worden weergegeven. Wanneer u de navigatiebalk op de pagina hebt geplaatst, kunt u de ontwerpgereedschappen gebruiken om de balk aan uw eigen smaak aan te passen. U kunt ook het servergedrag Verplaatsen naar en Gebied weergeven bewerken door er in het paneel Servergedrag op te dubbelklikken.
Voeg koppelingen toe waarmee de gebruiker door records in een recordset kan navigeren. 1. Als u niets op de pagina hebt geselecteerd, selecteert u een koppeling in het pop-upmenu. 2. Selecteer de recordset die de records bevat waar u doorheen wilt bladeren, en klik op OK. Opmerking: Als de recordset een groot aantal records bevat, duurt de uitvoering van het servergedrag Verplaatsen naar laatste record soms erg lang wanneer de gebruiker op de koppeling klikt.
1. Selecteer in de ontwerpweergave het gebied op de pagina dat u wilt weergeven of verbergen. 2. Klik in het deelvenster Servergedrag (Venster > Servergedrag) op de plusknop (+). 3. Selecteer Gebied weergeven in het pop-upmenu, selecteer een van de vormen van servergedrag en klik op OK. Naar boven Meerdere recordsetresultaten weergeven Met het servergedrag Herhalingsgebied kunt u meerdere records uit een recordset op een pagina weergeven.
Als u een tabel wilt maken zoals de tabel uit het vorige voorbeeld, moet u een tabel maken die dynamische inhoud bevat, en het servergedrag Herhalingsgebied toepassen op de tabelrij die de dynamische inhoud bevat. Wanneer de pagina door de toepassingsserver wordt bewerkt, wordt de rij net zo vaak herhaald als in het serverobject Herhalingsgebied is opgegeven, met telkens een andere record in elke nieuwe rij. 1.
Recordtellers geven gebruikers een referentiepunt tijdens het navigeren door een reeks records. Gewoonlijk geven recordtellers het totaal aantal geretourneerde records weer, evenals de records die op dat moment worden weergegeven. Als een recordset bijvoorbeeld 40 records retourneert en er 8 records per pagina worden weergegeven, geeft de recordteller op de eerste pagina bijvoorbeeld “Records 1-8 van 40 worden weergegeven” aan.
3. Open het paneel Servergedrag (Venster > Servergedrag). 4. Klik op de plusknop (+) in de linkerbovenhoek en klik op Telling records weergeven. Selecteer Totaal aantal records weergeven in dit vervolgmenu. Het gedrag Totaal aantal records weergeven wordt op de pagina ingevoegd, en de tijdelijke aanduiding wordt op de plaats van de invoegpositie ingevoegd. De tekenreeks ziet er nu als volgt uit: 1 Displaying records thru of {Recordset1.RecordCount}. 5.
3. Klik in het paneel Bindingen op de vervolgkeuzepijl in de kolom Formaat om het pop-upmenu met beschikbare gegevensnotaties uit te vouwen. Als de vervolgkeuzepijl niet zichtbaar is, verbreedt u het paneel Bindingen verder. 4. Selecteer Lijst met formaten bewerken in het pop-upmenu. 5. Vul het dialoogvenster in en klik op OK. a. Selecteer de notatie in de lijst en klik op Bewerken. b. Verander de volgende parameters in het dialoogvensters Valuta, Getal of Percentage en klik op OK.
Live-gegevens weergeven Pagina in Live View van live-gegevens voorzien Problemen met live-gegevens in Live View oplossen De functie voor het weergeven van Live-gegevens wordt vanaf Dreamweaver CS5 niet meer ondersteund. Deze functie is vervangen door de meer gestroomlijnde functie Live View.
Aangepast servergedrag toevoegen Over aangepast servergedrag Workflow voor aangepast servergedrag De opbouwfunctie voor servergedrag gebruiken Codeblokken maken Een codeblok plaatsen Codeblokken herhalen met de lusinstructie Een parameter voor het servergedrag aanvragen Servergedrag bewerken en wijzigen Codeerrichtlijnen Servergedrag testen Naar boven Over aangepast servergedrag Dreamweaver wordt geleverd met een reeks vormen van ingebouwd servergedrag, waarmee u eenvoudig dynamische mogelijkheden aan ee
2. Kies in het pop-upmenu Documenttype het type document waarvoor u het servergedrag ontwikkelt. 3. Voer in het vak Naam een naam voor het servergedrag in. 4. (Optioneel) Als u een bestaand servergedrag wilt toevoegen om het gedrag dat u maakt, aan te vullen, kiest u de optie Bestaand servergedrag kopiëren en selecteert u vervolgens het servergedrag in het pop-upmenu Gedrag dat moet worden gekopieerd. Klik op OK. Het dialoogvenster Opbouwfunctie voor servergedrag wordt weergegeven. 5.
Wanneer u een servergedrag toepast, wordt een van de codeblokken in het gedrag aangewezen als het 'codeblok dat moet worden geselecteerd'. Als u het servergedrag toepast en het gedrag vervolgens in het paneel Servergedrag selecteert, wordt het aangewezen blok in het documentvenster geselecteerd. Standaard wordt in Dreamweaver het eerste codeblok geselecteerd dat zich niet boven de html-tag. Als alle codeblokken boven de html-tag staan, wordt het eerste codeblok geselecteerd.
1 @@rsName@@ = Statement@@rsName@@.executeQuery(); Naar boven Een codeblok plaatsen Wanneer u met de opbouwfunctie voor servergedrag codeblokken maakt, moet u opgeven waar u ze in de HTML-code van de pagina wilt invoegen. Als u bijvoorbeeld een codeblok invoegt boven de begintag , moet u de positie van het codeblok opgeven ten opzichte van andere tags, scripts en servergedrag in die sectie van de HTML-code van de pagina.
1. Selecteer in het pop-upmenu Code invoegen de optie Relatief ten opzichte van een specifieke tag. 2. Voer de tag in het vak Tag in of selecteer er een in het pop-upmenu. Als u een tag invoert, hoeft u geen haakjes (<>). 3. Geef een locatie ten opzichte van de tag op door een optie in het pop-upmenu Relatieve positie te selecteren. Een codeblok plaatsen ten opzichte van een tag die de ontwerper van de pagina heeft gekozen 1.
gemaakt, had u dit voorbeeld in twee deelnemers moeten verdelen: een hoofdtag CFSTOREDPROC en een CFPROCPARAM-tag met een meervoudig deelnemerstype.
dialoogvenster voor het servergedrag, waarin de paginaontwerper wordt gevraagd een parameterwaarde op te geven. Opmerking: Een parameter wordt zonder uw tussenkomst aan het codeblok toegevoegd als u opgeeft dat de code relatief ten opzichte van een door de paginaontwerper gekozen tag moet worden ingevoegd (dus als u Relatief ten opzichte van een specifieke tag hebt gekozen in het popupmenu Code invoegen).
upmenu. 2. Selecteer het servergedrag in de lijst en klik op Openen. 3. Klik op Volgende. Een dialoogvenster wordt geopend met een overzicht van alle door de ontwerp opgegeven parameters die u in uw code hebt gedefinieerd. 4. Als u de weergavevolgorde van de besturingselementen in het dialoogvenster wilt wijzigen, selecteert u een parameter en klikt u op de pijlen omhoog en omlaag. 5.
1 2 var MM_ERROR_STRING = "..."; function MM_hideLayer() { Vermijd dezelfde codeblokken opdat de code die u schrijft niet al te zeer lijkt op de code in andere blokken. Als een codeblok teveel op een ander codeblok op de pagina lijkt, zou het eerste codeblok in het paneel Servergedrag per ongeluk kunnen worden beschouwd als een instantie van het tweede codeblok (of andersom). Een eenvoudige oplossing is het toevoegen van een opmerking aan een codeblok om het verschil groter te maken.
Informatie over formulieren maken Opmerking: de gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger. Zie dit artikel voor meer informatie. Wanneer een bezoeker informatie invoert in een webformulier dat in een webbrowser wordt weergegeven, en op de verzendknop klikt, wordt de informatie verstuurd naar de server waar deze wordt verwerkt door een script of toepassing op de server.
Formulieren gebruiken om informatie van gebruikers te verzamelen Informatie over het verzamelen van informatie van gebruikers HTML-formulierparameters URL-parameters URL-parameters maken met HTML-koppelingen Informatie over het verzamelen van informatie van gebruikers Naar boven U kunt webformulieren of hypertekstkoppelingen gebruiken om informatie van gebruikers te verzamelen, deze informatie in het geheugen van de server op te slaan en vervolgens met die informatie een dynamische reactie te maken op ba
Nadat er een formulierparameter is gemaakt, kan Dreamweaver de waarde ophalen en deze in een webtoepassing gebruiken. Na het definiëren van de formulierparameter in Dreamweaver kunt u de waarde ervan in een pagina invoegen. Naar boven URL-parameters Met URL-parameters kunt u door de gebruiker opgegeven informatie doorgeven van de browser naar de server.
formulier wordt ingediend. URL-parameters worden bijvoorbeeld vaak gebruikt voor het aanpassen van websites op basis van voorkeuren van gebruikers. Zo kan een URL-parameter bestaande uit een gebruikersnaam en wachtwoord worden gebruikt om een gebruiker te verifiëren, waarbij alleen informatie wordt weergegeven waarop de gebruiker zich heeft geabonneerd.
ColdFusion-formulieren maken ColdFusion-formulieren ColdFusion-verbeteringen inschakelen ColdFusion-formulieren maken ColdFusion-formulierbesturingselementen invoegen ColdFusion-tekstvelden invoegen Verborgen ColdFusion-velden invoegen ColdFusion-tekstgebieden invoegen ColdFusion-knoppen invoegen ColdFusion-selectievakjes invoegen ColdFusion-keuzerondjes invoegen ColdFusion-selecties invoegen ColdFusion-afbeeldingsvelden invoegen ColdFusion-bestandsvelden invoegen ColdFusion-datumvelden invoegen ColdFusion-
Naar boven ColdFusion-formulieren maken Met een aantal knoppen in het paneel Invoegen, menu-items en eigenschappencontroles kunt u vanuit Dreamweaver snel ColdFusion-formulieren maken en hun eigenschappen instellen. Opmerking: Deze verbeteringen zijn alleen beschikbaar als u toegang hebt tot een computer waarop ColdFusion MX 7 of hoger wordt uitgevoerd. 1. Open een ColdFusion-pagina en plaats de invoegpositie op de plaats waar u het ColdFusion-formulier wilt weergeven. 2.
Flash/XML Skin Hier kunt u een halo-kleur opgeven om de uitvoer te stileren. Het thema bepaalt welke kleur voor gemarkeerde en geselecteerde elementen wordt gebruikt. Gegevens behouden Hiermee bepaalt u of u de beginwaarden van het besturingselement wilt overschrijven door ingediende waarden wanneer het formulier naar het formulier zelf wordt gepost. Bij de instelling Onwaar worden de waarden gebruikt die in de tagkenmerken van het besturingselement zijn opgegeven.
eigenschappencontrole in. Raadpleeg de onderwerpen over de besturingselementen voor informatie over de eigenschappen van specifieke besturingselementen. Naar boven ColdFusion-tekstvelden invoegen U kunt visueel een ColdFusion-tekstveld of wachtwoordveld in uw formulier invoegen en daarna de opties ervan instellen. Opmerking: Deze verbetering is alleen beschikbaar als u toegang hebt tot een computer waarop ColdFusion MX 7 of hoger wordt uitgevoerd. Een ColdFusion-tekstveld visueel invoegen 1.
Valideren Hier geeft u het type validatie op voor het huidige veld. Valideren bij Hiermee geeft u aan wanneer het veld wordt gevalideerd: onSubmit, onBlur of onServer. Label Hier kunt u een label voor het tekstveld opgeven. Patroon Hier kunt u een regulier JavaScript-expressiepatroon opgeven om invoer te valideren. Laat de schuine strepen aan het begin en aan het einde achterwege. Raadpleeg de ColdFusion-documentatie voor meer informatie.
Hoogte Hier kunt u de hoogte van het besturingselement in pixels opgeven. Deze eigenschap wordt in runtime door de ColdFusion-server genegeerd. Breedte Hier kunt u de breedte van het besturingselement in pixels opgeven. Deze eigenschap wordt in runtime door de ColdFusion-server genegeerd. Grootte Hier kunt u de grootte van het besturingselement opgeven. Deze eigenschap wordt in runtime door de ColdFusionserver genegeerd.
Stijl Hier geeft u een stijl voor het besturingselement op. Raadpleeg de ColdFusion-documentatie voor meer informatie. Hoogte Hier kunt u de hoogte van het besturingselement in pixels opgeven. Deze eigenschap wordt in runtime door de ColdFusion-server genegeerd. Breedte Hier kunt u de breedte van het besturingselement in pixels opgeven. Deze eigenschap wordt in runtime door de ColdFusion-server genegeerd.
Cf-selectievakje Hier geeft u een unieke naam voor het besturingselement op. Geselecteerde waarde Hier kunt u een waarde opgeven die door het selectievakje moet worden geretourneerd als de gebruiker het vakje inschakelt. Status bij openen Hier kunt u opgeven of het selectievakje is ingeschakeld wanneer de pagina de eerste keer in een browser wordt geopend. Valideren Hier geeft u het type validatie op voor het selectievakje.
Geselecteerde waarde Hier kunt u een waarde opgeven die door het keuzerondje moet worden geretourneerd als de gebruiker de optie inschakelt. Status bij openen Hier kunt u opgeven of het keuzerondje is ingeschakeld wanneer de pagina de eerste keer in een browser wordt geopend. Valideren Hier geeft u het type validatie op voor het keuzerondje. Valideren bij Hiermee geeft u aan wanneer het keuzerondje wordt gevalideerd: onSubmit, onBlur of onServer. Label Hier geeft u een label voor het keuzerondje op.
Type Hier kunt u kiezen tussen een pop-upmenu of een lijst. Als u het lijsttype selecteert, worden de opties Lijsthoogte en Meerdere lijstselecties toestaan beschikbaar. Lijsthoogte Hier kunt u opgeven uit hoeveel regels het lijstmenu bestaat. Deze optie is alleen beschikbaar als u het lijsttype selecteert. Meerdere lijstselecties toestaan Hier kunt u opgeven of de gebruiker meer dan één optie tegelijk in de lijst mag selecteren. Deze optie is alleen beschikbaar als u het lijsttype selecteert.
Opmerking: Als de afbeelding zich niet binnen de hoofdmap van de site bevindt, moet u de afbeelding naar de hoofdmap kopiëren. Afbeeldingen buiten de hoofdmap zijn mogelijk niet toegankelijk wanneer u de site publiceert. 3. Selecteer het afbeeldingsveld op de pagina en stel de volgende opties in de eigenschappencontrole in: Cf-afbeeldingsveld Hier geeft u een unieke naam voor het besturingselement op. Bron Hier kunt u de URL van de ingevoegde afbeelding opgeven.
klikken om het bestand te zoeken en te selecteren. Voor bestandsvelden moet u de methode POST gebruiken om bestanden van de browser naar de server over te brengen. Het bestand wordt gepost naar het adres dat u in het vak Actie van het formulier hebt opgegeven. Neem contact op met de serverbeheerder om te vragen of bestanden anoniem geladen mogen worden voordat u het bestandsveld in uw formulier gebruikt.
Hoewel u in Dreamweaver visueel geen ColdFusion-datumveld kunt invoegen, kunt u wel visueel de eigenschappen ervan instellen. Een ColdFusion-datumveld is een speciaal type tekstveld waarmee gebruikers een datum kunnen selecteren in een pop-upkalender om deze in het tekstveld in te voegen. Opmerking: Deze verbetering is alleen beschikbaar als u toegang hebt tot een computer waarop ColdFusion MX 7 of hoger wordt uitgevoerd. 1.
U kunt de eigenschappen van ColdFusion-formulierbesturingselementen visueel wijzigen, zowel in de ontwerpweergave als in de codeweergave. Opmerking: Deze verbetering is alleen beschikbaar als u toegang hebt tot een computer waarop ColdFusion MX 7 of hoger wordt uitgevoerd. 1. In de ontwerpweergave selecteert u het formulierbesturingselement op de pagina. In de codeweergave klikt u ergens in de tag van het besturingselement.
Webformulieren maken Internetformulieren Formulierobjecten Een HTML-formulier maken Over dynamische formulierobjecten Een dynamisch HTML-formuliermenu invoegen of wijzigen Bestaande HTML-formuliermenu's dynamisch maken Dynamische inhoud weergeven in HTML-tekstvelden Opties in het dialoogvenster Dynamisch tekstveld instellen Een HTML-selectievakje dynamisch vooraf selecteren Een HTML-keuzerondje dynamisch vooraf inschakelen HTML-formuliergegevens valideren JavaScript-gedrag aan HTML-formulierobjecten koppele
Opmerking: Wachtwoorden en andere informatie die via een wachtwoordveld naar een server worden verzonden, worden niet versleuteld. De overgebrachte gegevens kunnen worden onderschept en als alfanumerieke tekst worden gelezen. Daarom moet u gegevens die u wilt beveiligen, altijd versleutelen. Verborgen velden Slaan informatie op die een gebruiker heeft ingevoerd, zoals een naam, e-mailadres of weergavevoorkeur. Deze gegevens worden opnieuw gebruikt wanneer de gebruiker de site nogmaals bezoekt.
veel items moet weergeven, of als u de waarden die aan de server worden geretourneerd, moet controleren. In tegenstelling tot tekstvelden, waarin gebruikers alles kunnen typen wat ze willen, zelfs ongeldige gegevens, stelt u de exacte waarden in die door een menu worden geretourneerd. Opmerking: Een pop-upmenu in een HTML-formulier is niet hetzelfde als een grafisch pop-upmenu.
_self Hiermee wordt het doeldocument geopend in hetzelfde venster als het venster waarin het formulier is verzonden. _top Hiermee wordt het doeldocument geopend in het huidige venster. Deze waarde kan worden gebruikt om ervoor te zorgen dat het doeldocument het volledige venster overneemt, zelfs als het originele document in een frame wordt weergegeven. 4. Voeg formulierobjecten op de pagina in: a. Plaats de invoegpositie op de plaats waar het formulierobject in het formulier moet worden weergegeven. b.
Klasse Hiermee kunt u CSS-regels op het object toepassen. Opties van knopobjecten Knopnaam Hiermee geeft u de knop een naam. Met de twee gereserveerde namen, Verzenden en Beginwaarden, kunt u respectievelijk opgeven dat de formuliergegevens moeten worden verzonden naar de toepassing of het script dat de gegevens verwerkt, of dat alle formuliervelden moeten worden teruggezet op hun beginwaarden. Waarde Hiermee geeft u de tekst op die op de knop moet worden weergegeven.
Voordat u velden voor het laden van bestanden kunt gebruiken, moet u een script aan serverzijde of een pagina hebben die het verzenden van bestanden kan afhandelen. Raadpleeg de documentatie bij de servertechnologie die u gebruikt voor de verwerking van formuliergegevens. Als u bijvoorbeeld PHP gebruikt, raadpleegt u “Handling files uploads” in de online-PHP-handleiding op http://us2.php.net/features.file-upload.php.
de nieuwe knop in. c. Klik op de pijlen omhoog of omlaag als u de volgorde van de knoppen wilt wijzigen. d. Als u wilt dat een bepaald keuzerondje is ingeschakeld wanneer de pagina in een browser wordt geopend, typt u een waarde in het vak Selecteer waarde gelijk aan, die gelijk is aan de waarde van het keuzerondje.
b. Kies Invoegen > Formulier > Lijst/Menu om het formulierobject in te voegen. 2. Voer een van de volgende handelingen uit: Selecteer de nieuwe of een bestaande HML-lijst/menu formulierobject en klik dan op de knop Dynamisch eigenschappencontrole. Selecteer Invoegen > Gegevensobjecten > Dynamische gegevens > Dynamische selectielijst 3. Vul het dialoogvenster Dynamische lijst/menu in en klik op OK. a. Selecteer in het pop-upmenu Opties uit recordset de recordset die u als inhoudsbron wilt gebruiken.
3. Vul het dialoogvenster Dynamisch selectievakje in en klik op OK: Klik op het pictogram met de bliksemflits naast het vakje Inschakelen indien, en selecteer het veld in de lijst met gegevensbronnen. De gegevensbron moet Booleaanse gegevens bevatten, zoals Yes en No of true en false. Als de lijst geen gegevensbronnen bevat of als de beschikbare gegevensbronnen niet geschikt zijn, klikt u op de plusknop (+) om een nieuwe gegevensbron te definiëren.
2. Selecteer de verzendknop. 3. Klik in het paneel Gedrag (Venster > Gedrag) op de plusknop (+) en selecteer het gedrag Formulier valideren in de lijst. 4. Stel de validatieregels voor elk tekstveld in en klik op OK. U kunt bijvoorbeeld opgeven dat in een tekstveld voor de leeftijd van een persoon alleen cijfers mogen worden ingevoerd. Opmerking: Het gedrag Formulier valideren is alleen beschikbaar als het document een tekstveld bevat.
Labeltag koppelen met het kenmerk 'for' Als u deze optie kiest, wordt het for-kenmerk gebruikt om een labeltag als volgt rond het formulieritem te plaatsen: 1 2 Bij deze keuze geeft de browser tekst die aan een selectievakje of keuzerondje is gekoppeld, weer in een focusrechthoek, en kan de gebruiker het selectievakje of keuzerondje inschakelen door ergens in de desbetreffende tekst t
Verbeterde HTML5-ondersteuning voor formulierelementen Gereviseerde workflow voor formulieren in Dreamweaver Nieuwe veelgebruikte kenmerken voor formulierelementen Formulierelementen met gewijzigde kenmerken HTML5-formulierelementen Voor de blijvende HTML5-ondersteuning in Dreamweaver zijn nieuwe kenmerken geïntroduceerd voor bepaalde formulierelementen. Daarnaast zijn er vier nieuwe HMTL5-formulierelementen geïntroduceerd. U kunt de formulierelementen vinden in het deelvenster Invoegen.
Formulierelement zijn voor het element Beschrijving van kenmerken Tekstveld List http://www.w3.org/TR/html-markup/input.text.html Knop http://www.w3.org/wiki/HTML/Elements/button Selectievakje http://www.w3.org/TR/html-markup/input.checkbox.html Bestand Multiple http://www.w3.org/TR/html-markup/input.file.html Formulier No validate, Accept charset http://www.w3.org/TR/2012/WD-html-markup20120329/form.
Zoeken 12.1 Een besturingselement van één regel voor bewerking van normale tekst waarmee u een of meer zoektermen kunt invoeren. http://www.w3.org/TR/htmlmarkup/input.search.html Telefoon (tel) 12.1 Een besturingselement van één regel voor bewerking van normale tekst waarmee u een telefoonnummer kunt invoeren. http://www.w3.org/TR/htmlmarkup/input.tel.html URL 12.1 Een besturingselement voor het bewerken van een absolute URL die is opgegeven in de waarde voor het element. http://www.w3.
Toepassingen visueel samenstellen 759
Hoofd- en detailpagina's samenstellen Over hoofd- en detailpagina's Een hoofdpagina maken Koppelingen maken met de detailpagina De gevraagde record zoeken en op de detailpagina weergeven Een specifieke record zoeken en op een pagina weergeven (ASP) In één bewerking hoofd- en detailpagina's maken Naar boven Over hoofd- en detailpagina's Hoofd- en detailpagina's zijn paginasets die worden gebruikt om recordsetgegevens te organiseren en weer te geven.
Detailpagina U kunt hoofd- en detailpagina's samenstellen door een gegevensobject in te voegen om in één bewerking een hoofd- en een detailpagina te maken, of door servergedragingen te gebruiken om de hoofd- en detailpagina's op een meer aangepaste wijze te maken. Wanneer u hoofd- en detailpagina's maakt met behulp van servergedrag, maakt u eerst een hoofdpagina waarop de records worden vermeld, en voegt u daarna vanuit die lijst koppelingen met de detailpagina's toe.
meer kolommen uit dezelfde tabel ophaalt om de extra details te kunnen geven. De recordset kan door de gebruiker in runtime worden gedefinieerd. Zie Zoekpagina's en resultatenpagina's maken voor meer informatie. 3. Een dynamische tabel invoegen om de records weer te geven. Plaats de invoegpositie waar u de dynamische tabel op de pagina wilt weergeven. Kies Invoegen > Gegevensobjecten > Dynamische gegevens > Dynamische tabel, stel de opties in en klik op OK.
6. (PHP) In het veld Koppeling van de eigenschappencontrole voegt u de volgende tekenreeks aan het einde van de URL toe: 1 ?recordID=recordsetName['fieldName']; ?> Het vraagteken vertelt de server dat er na het vraagteken een of meer URL-parameters volgen. Het woord recordID is de naam van de URL-parameter (u mag ook een andere naam gebruiken). Noteer de naam van de URL-parameter, want die gaat u later op de detailpagina gebruiken.
3. Geef de recordset een naam, en selecteer een gegevensbron en de databasetabel waaruit de recordset de gegevens moet ophalen. 4. Selecteer in het gebied Kolommen de tabelkolommen die u in de recordset wilt opnemen. De recordset kan gelijk zijn aan de recordset op de hoofdpagina. Dat is echter niet noodzakelijk. Gewoonlijk heeft een recordset voor een detailpagina meerdere kolommen om meer details weer te geven.
Naar boven In één bewerking hoofd- en detailpagina's maken Wanneer u webtoepassingen ontwikkelt, kunt u met het gegevensobject Hoofddetailpaginaset snel hoofd- en detailpagina's maken. 1. Kies Bestand > Nieuw > Lege pagina, selecteer in de lijst Paginatype een dynamische pagina en klik op Maken om een lege dynamische pagina te maken. Deze pagina wordt de hoofdpagina. 2. Definieer een recordset voor de pagina.
Juridische kennisgevingen | Online privacybeleid 766
Zoekpagina's en resultatenpagina's maken Over zoekpagina's en resultatenpagina's De zoekpagina samenstellen Een basisresultatenpagina samenstellen Een geavanceerde resultatenpagina samenstellen De zoekresultaten weergeven Een detailpagina maken voor een resultatenpagina Een koppeling maken om een gerelateerde pagina te openen (ASP) Naar boven Over zoekpagina's en resultatenpagina's Met Dreamweaver kunt u een reeks pagina's maken waarmee gebruikers uw databases kunnen doorzoeken en de zoekresultaten kunne
zoekparameters op de zoekpagina toevoegt. 3. Voeg een knop Verzenden aan het formulier toe (Invoegen > Formulier > Knop). 4. (Optioneel) Verander de label van de knop Verzenden door de knop te selecteren, de eigenschappencontrole te openen (Venster > Eigenschappen) en een nieuwe waarde in te voeren in het vak Waarde. Vervolgens geeft u aan waar het formulier de zoekparameters naartoe moet sturen wanneer de gebruiker op de knop Verzenden klikt. 5.
5. Selecteer in het pop-upmenu Tabel de tabel die in de database mag worden doorzocht. Opmerking: Bij een zoekactie met één parameter kunt u naar records in slechts één tabel zoeken. Als u meer tabellen tegelijk wilt doorzoeken, moet u het dialoogvenster Geavanceerde recordset gebruiken en een SQL-query definiëren. 6.
4. Voer een SELECT-instructie in het tekstgebied SQL in. Zorg ervoor dat de instructie een WHERE-clausule met variabelen bevat om de zoekparameters in op te slaan.
beschikbaar wanneer het ASP-servermodel wordt gebruikt. Voordat u een servergedrag Ga naar aanverwante pagina aan een pagina toevoegt, moet u ervoor zorgen dat de pagina formulier- of URLparameters van een andere pagina ontvangt. Het servergedrag heeft als taak om deze parameters door te geven aan een derde pagina. U kunt bijvoorbeeld zoekparameters die u van een resultatenpagina hebt ontvangen, aan een andere pagina doorgeven zodat de gebruiker de zoekparameters niet nogmaals hoeft in te voeren.
Een pagina voor het invoegen van records maken Een pagina voor het invoegen van pagina's maken Een invoegpagina bloksgewijs samenstellen De invoegpagina samenstellen in één bewerking Opmerking: De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger. Zie dit artikel voor meer informatie.
De formulierobjecten dienen voor de gegevensinvoer. Gewoonlijk worden tekstvelden voor dit doel gebruikt, maar u kunt ook menu's, opties en keuzerondjes gebruiken. 5. Voeg een knop Verzenden aan het formulier toe (Invoegen > Formulier > Knop). U kunt de label van de knop Verzenden veranderen door de knop te selecteren, de eigenschappencontrole te openen (Venster > Eigenschappen) en een nieuwe waarde in te voeren in het vak Label.
Servergedrag toevoegen om records in een databasetabel in te voegen (PHP) 1. Klik in het deelvenster Servergedrag (Venster > Servergedrag) op de plusknop (+) en selecteer Record invoegen in het popupmenu. 2. Selecteer een formulier in het pop-upmenu Waarden verzenden vanaf. 3. Selecteer in het pop-upmenu Verbinding een verbinding met de database. 4. Selecteer in het pop-upmenu 'Invoegen in tabel' de databasetabel waarin u de record wilt invoegen. 5.
menu's en groepen keuzerondjes opent u een ander dialoogvenster waarin u de eigenschappen kunt instellen. Voor opties schakelt u de optie Ingeschakeld of Uitgeschakeld in. 8. Klik op OK. Dreamweaver voegt zowel een HTML-formulier als het servergedrag Record invoegen aan de pagina toe. De formulierobjecten worden in de vorm van een basistabel ingedeeld. U kunt de indeling wijzigen met de paginaontwerpgereedschappen van Dreamweaver.
Recordupdatepagina's samenstellen Recordupdatepagina's De record zoeken die moet worden bijgewerkt Koppelingen maken met de updatepagina De record ophalen die moet worden bijgewerkt De updatepagina bloksgewijs invullen De updatepagina in één bewerking voltooien Opties voor eigenschappen van formulierelementen Opmerking: De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger.
tekstgebied waarin SQL-instructies kunnen worden ingevoerd. Het eenvoudige dialoogvenster bevat zo'n tekstgebied niet. 3. Geef de recordset een naam en geef met behulp van de pop-upmenu's Verbinding en Tabel op waar de gegevens zich bevinden die moeten worden bijgewerkt. 4. Klik op Geselecteerd en selecteer een sleutelkolom (gewoonlijk de kolom met de record-id) en de kolommen met de gegevens die moeten worden bijgewerkt. 5.
uitzondering is de kolom met de unieke sleutel. Deze hoeft geen corresponderend formulierobject te hebben. 6. Voeg een knop Verzenden aan het formulier toe (Invoegen > Formulier > Knop). U kunt de label van de knop Verzenden veranderen door de knop te selecteren, de eigenschappencontrole te openen (Venster > Eigenschappen) en een nieuwe waarde in te voeren in het vak Label. De record in het formulier weergeven 1.
De updatepagina in één bewerking voltooien Een updatepagina bevat drie elementen: Een gefilterde recordset om de record uit een databasetabel op te halen Een HTML-formulier waarmee gebruikers de gegevens van een record kunnen wijzigen Het servergedrag Record bijwerken om de databasetabel bij te werken U kunt de twee laatste elementen van een updatepagina in één bewerking toevoegen met het gegevensobject Formulier Record bijwerken.
menu's en groepen keuzerondjes opent u een ander dialoogvenster waarin u de eigenschappen kunt instellen. Voor opties schakelt u de optie Ingeschakeld of Uitgeschakeld in. 9. Stel de eigenschappen van andere formulierobjecten in door een andere rij Formuliervelden te selecteren en een label, een 'Weergeven als'-waarde en een 'Verzenden als'-waarde op te geven. Voor menu's en groepen keuzerondjes opent u een ander dialoogvenster waarin u de eigenschappen kunt instellen.
Recordverwijderpagina's maken Over recordverwijderpagina's De te verwijderen record zoeken Koppelingen maken naar een verwijderpagina De verwijderpagina samenstellen Instructies toevoegen om de record te verwijderen Naar boven Over recordverwijderpagina's Uw toepassing kan een set pagina's bevatten waarmee gebruikers bestaande records in een databasetabel kunnen verwijderen. De pagina's bestaan gewoonlijk uit een zoekpagina, een resultatenpagina en een verwijderpagina.
later op de verwijderpagina gebruiken. De expressie na het gelijkteken is de waarde van de parameter. In dit geval wordt de waarde gegenereerd door een ColdFusion-expressie die een record-id uit de recordset retourneert. Voor elke rij in de dynamische tabel wordt een andere id gegenereerd. Vervang recordsetName in de ColdFusion-expressie door de naam van de recordset, en vervang fieldName door de naam van het veld in uw recordset dat elke record op unieke wijze identificeert.
Wanneer de pagina wordt uitgevoerd, worden de waarden van het veld CODE van de recordset ingevoegd in de corresponderende rijen van de dynamische tabel. Als de verhuurlocatie Canberra, Australië bijvoorbeeld de code CBR heeft, wordt de volgende URL gebruikt in de rij Canberra van de dynamische tabel: 1 confirmDelete.asp?recordID=CBR 10. Sla de pagina op. De koppelingen visueel maken (alleen ASP) 1. Maak op de resultatenpagina een kolom in de tabel die wordt gebruikt om records weer te geven.
Het verborgen formulierveld is nodig om de record-id op te slaan die door de URL-parameter wordt doorgegeven. U voegt een verborgen veld toe door de invoegpositie in het formulier te plaatsen en Invoegen > Formulier > Verborgen veld te kiezen. 4. Voeg een knop aan het formulier toe. De gebruiker zal straks op de knop klikken om de weergegeven record te bevestigen en te verwijderen. U voegt een knop toe door de invoegpositie in het formulier te plaatsen en Invoegen > Formulier > Knop te kiezen. 5.
2. Zorg ervoor dat Onzichtbare elementen is ingeschakeld (Weergave > Visuele hulpmiddelen > Onzichtbare elementen) en klik vervolgens op het pictogram met het gele schild dat het verborgen formulierveld vertegenwoordigt. Het verborgen formulierveld is geselecteerd. 3. Klik in de eigenschappencontrole op het pictogram met de bliksemflits naast het vak Waarde. 4. Selecteer in het dialoogvenster Dynamische gegevens de kolom met de record-id in de recordset.
gedefinieerd'. Verderop in dit dialoogvenster geeft u de waarde van de primaire sleutel op. 4. Selecteer in het pop-upmenu Verbinding of Gegevensbron (ColdFusion) een verbinding met de database zodat het servergedrag een verbinding met de desbetreffende database tot stand kan brengen. 5. Selecteer in het pop-upmenu Tabel de databasetabel die de te verwijderen records bevat. 6. Selecteer in het pop-upmenu 'Kolom primaire sleutel' de tabelkolom die de record-id's bevat.
2. Klik op de knop Bevestigen om de record uit de database te verwijderen. 3. Controleer of de record is verwijderd door de record opnieuw te zoeken. De record mag nu niet meer op de resultatenpagina voorkomen.
Pagina's samenstellen met geavanceerde objecten voor gegevensmanipulatie (ColdFusion, ASP) Over ASP-opdrachtobjecten ASP-opdrachten gebruiken om een database te wijzigen Opgeslagen procedures Een opgeslagen procedure toevoegen (ColdFusion) (CS6) Een opgeslagen procedure uitvoeren (ASP) (CS6) Opmerking: De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger.
4. Maak de SQL-instructie af. Raadpleeg een handleiding bij Transact SQL voor informatie over het schrijven van SQL-instructies die databases wijzigen. 5. Gebruik het gebied Variabelen als u SQL-variabelen wilt definiëren. Geef de naam en runtime waarde op. Door het type en de grootte van elke variabele op te geven, kunt u injectie-aanvallen voorkomen. In het volgende voorbeeld ziet u een Insert-instructie die drie SQL-variabelen bevat.
records in de database invoegt, bijwerkt of verwijdert. Standaard stelt de code de eigenschap Prepared van het Command-object in op true, zodat de toepassingsserver dezelfde gecompileerde versie van het object telkens opnieuw gebruikt wanneer de opdracht wordt uitgevoerd. Als u deze instelling wilt wijzigen, gaat u naar de codeweergave en verandert u de eigenschap Prepared (Voorbereid) in false. 7. Maak een pagina met een HTML-formulier zodat gebruikers recordgegevens kunnen invoeren.
Opmerking: U moet corresponderende paginaparameters toevoegen voor elke resultaatwaarde van elke opgeslagenprocedureparameter. Voeg alleen paginaparameters toe als er een corresponderende resultaatwaarde is. Klik nogmaals op de plusknop (+) als u nog een paginaparameter moet toevoegen. 9. Selecteer een paginaparameter en klik op de minknop (-) als u de parameter moet verwijderen, of klik op Bewerken als u de parameter moet wijzigen. 10.
Als de opgeslagen procedure parameters nodig heeft, kunt u een pagina maken waarop de parameterwaarden worden verzameld en worden verstuurd naar de pagina met de opgeslagen procedure. U zou bijvoorbeeld een pagina kunnen maken die URL-parameters of een HTML-formulier gebruikt om parameterwaarden van gebruikers te verkrijgen. Adobe raadt ook het volgende aan: De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.
Een registratiepagina samenstellen Over registratiepagina's Aanmeldingsgegevens van gebruikers opslaan Een HTML-formulier toevoegen om een gebruikersnaam en wachtwoord te selecteren De databasetabel met gebruikers bijwerken Een servergedrag toevoegen om te controleren of de gebruikersnaam uniek is Naar boven Over registratiepagina's Uw webtoepassing kan een pagina bevatten waarop gebruikers zich eerst moeten registreren wanneer ze uw website de eerste keer bezoeken.
4. Voeg tekstvelden toe (Invoegen > Formulier > Tekstveld) waarin de gebruiker een gebruikersnaam en wachtwoord kan invoeren. Het formulier kan ook meerdere formulierobjecten bevatten om andere persoonlijke gegevens te registreren. Plaats labels (tekst- of afbeeldingslabels) naast elk formulierobject zodat gebruikers weten wat ze moeten invullen. Orden de formulierobjecten door ze binnen een HTML-tabel te plaatsen. Zie Webformulieren maken voor meer informatie over formulierobjecten. 5.
Een aanmeldingspagina samenstellen Over aanmeldingspagina's Een databasetabel met geregistreerde gebruikers maken Een HTML-formulier toevoegen waarop gebruikers zich kunnen aanmelden Gebruikersnaam en wachtwoord controleren Naar boven Over aanmeldingspagina's Uw webtoepassing kan een pagina bevatten waarop geregistreerde gebruikers zich kunnen aanmelden bij de site.
In de volgende stap voor het samenstellen van een aanmeldingspagina voegt u het servergedrag Gebruiker aanmelden toe om te controleren of de ingevoerde gebruikersnaam en het wachtwoord wel geldig zijn. Naar boven Gebruikersnaam en wachtwoord controleren U moet een servergedrag Gebruiker aanmelden aan de aanmeldingspagina toevoegen om te controleren of de gebruikersnaam en het wachtwoord die de gebruiker heeft ingevoerd, geldig zijn.
Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben Over beveiligde pagina's Niet-gemachtigde gebruikers omleiden Toegangsrechten opslaan in de gebruikersdatabase Gebruikers afmelden Naar boven Over beveiligde pagina's Uw webtoepassing kan een beveiligde pagina bevatten waartoe alleen geautoriseerde gebruikers toegang hebben.
Zorg ervoor dat de tekenreeks voor het machtigingsniveau exact overeenkomt met de tekenreeks die in de gebruikersdatabase is opgeslagen. Als bijvoorbeeld de machtigingenkolom in uw database de waarde "Administrator" bevat, voert u in het vak Naam Administrator en niet Admin in. 5. Als u meer machtigingsniveaus voor een pagina wilt instellen, houdt u Control (Windows) of Command (Macintosh) ingedrukt terwijl u op de niveaus in de lijst klikt.
2. Klik in het deelvenster Servergedrag op de plusknop (+) en selecteer Gebruikersverificatie > Gebruiker afmelden. 3. Selecteer de optie 'Afmelden bij laden van pagina' en klik op OK.
Een map in uw toepassing beveiligen (ColdFusion) Een map of site op de server beveiligen (ColdFusion) Opmerking: Ondersteuning voor ColdFusion is verwijderd uit Dreamweaver CC en hoger. Naar boven Een map of site op de server beveiligen (ColdFusion) In Dreamweaver kunt u een specifieke map in uw ColdFusion-toepassing met een wachtwoord beveiligen, ook de hoofdmap van de toepassing.
ColdFusion-componenten gebruiken ColdFusion-componenten Overzicht van het paneel CF-componenten (ColdFusion) Een CFC maken of verwijderen in Dreamweaver CFC's weergeven in Dreamweaver CFC's bewerken in Dreamweaver Webpagina's samenstellen die CFC's gebruiken Een recordset definiëren in een CFC Een CFC-recordset als een bron van dynamische inhoud gebruiken Dynamische inhoud definiëren met een CFC Opmerking: Ondersteuning voor ColdFusion is verwijderd uit Dreamweaver CC en hoger.
Opmerking: Het paneel Componenten is alleen beschikbaar wanneer u een ColdFusion-pagina in Dreamweaver weergeeft. Naar boven Een CFC maken of verwijderen in Dreamweaver Met Dreamweaver kunt u visueel een CFC en de bijbehorende functies definiëren. Dreamweaver maakt een CFC-bestand en voegt de noodzakelijke CFML-tags voor u in. Opmerking: Afhankelijk van de component, moet u bepaalde code handmatig afmaken. 1. Open een ColdFusion-pagina in Dreamweaver. 2.
hoofdmap van de website beheert, kunt u twee Dreamweaver-sites definiëren. Stel de eerste site zo in dat deze naar de hoofdmap van de server wijst en laat de tweede naar de hoofdmap van de website wijzen. Gebruik het pop-upmenu van de site in het paneel Bestanden om snel tussen de twee sites te schakelen. Ga als volgt te werk om CFC's in Dreamweaver weer te geven: 1. Open een willekeurige ColdFusion-pagina in Dreamweaver. 2.
2. Selecteer CF-componenten in het pop-upmenu van het paneel en klik op de knop Vernieuwen van het paneel. Omdat ColdFusion lokaal wordt uitgevoerd, geeft Dreamweaver componentenpakketten op de vaste schijf weer. Opmerking: Als u de CFC-recordset visueel wilt bewerken, dubbelklikt u erop in het paneel Bindingen. 3. Als u een componentenbestand algemeen wilt bewerken, opent u het pakket en dubbelklikt u op de naam van de component in de structuurweergave.
stap 5. De recordset wordt in de functie gedefinieerd. 4. Als u een nieuwe functie in de CFC wilt definiëren, klikt u op de knop Nieuwe functie, typt u een naam voor de functie in het dialoogvenster dat wordt geopend, en klikt u op OK. De naam mag alleen alfanumerieke tekens en het onderstrepingsteken (_) bevatten. 5. Als u een recordset voor de functie wilt definiëren, geeft u de opties in het dialoogvenster Recordset op. De nieuwe functie wordt ingevoegd in de CFC die de recordset definieert.
b. Voer in het vak Map van component de locatie voor de CFC in, of blader om de map te zoeken. Opmerking: De map moet het relatieve pad naar de hoofdmap van de site zijn. 5. Selecteer in het pop-upmenu Functie de functie die de recordsetdefinitie bevat. Het pop-upmenu functie bevat alleen de functies die in de geselecteerde component zijn gedefinieerd.
Toegankelijkheid 807
Dreamweaver en toegankelijkheid Informatie over toegankelijke inhoud Gebruik van schermlezers in Dreamweaver Ondersteuning van toegankelijkheidsfuncties van besturingssystemen De werkomgeving optimaliseren voor het ontwerp van toegankelijke pagina's De functie van Dreamweaver voor toegankelijkheidscontrole Navigeren in Dreamweaver via het toetsenbord Naar boven Informatie over toegankelijke inhoud Toegankelijkheid heeft betrekking op websites en webproducten bruikbaar maken voor mensen met een visuele, a
In de ontwerpweergave worden de achtergrond- en tekstkleuren gebruikt die u instelt in Wijzigen > Pagina-eigenschappen, zodat de pagina's die u ontwerpt, kleuren weergeven als in een browser. De werkomgeving optimaliseren voor het ontwerp van toegankelijke pagina's Naar boven Wanneer u toegankelijke pagina's maakt, moet u informatie, zoals labels en omschrijvingen, aan paginaobjecten koppelen om de inhoud voor alle gebruikers toegankelijk te maken.
Opmerking: De toetsenbordfocus moet zich binnen de eigenschappencontrole bevinden (en niet op de titel van het paneel) als u uw werk wilt uitvouwen of samenvouwen. Navigeren door een dialoogvenster 1. Druk op de Tab-toets om door de opties in het dialoogvenster te gaan. 2. Gebruik de pijltoetsen om de keuzes van een optie te doorlopen. 3.
Dreamweaver en Creative Cloud 811
Dreamweaver-instellingen synchroniseren met Creative Cloud Eerste synchronisatie Instellingen importeren uit vorige versies van Dreamweaver Voorkeuren voor synchroniseren van instellingen bewerken Automatische synchronisatie Handmatige synchronisatie Conflicten oplossen tijdens synchroniseren Bronnen rechtstreeks openen op Creative Cloud Met uw Adobe Creative Cloud-abonnementsaccount kunt u Dreamweaver op twee computers activeren.
aanwezig is in hetzelfde pad. Als een site niet aanwezig is op een computer, maakt Dreamweaver een nieuwe sitemap op de standaardlocatie en zijn alle paden relatief ten opzichte van deze map. U kunt dit pad op elk gewenst moment wijzigen. Voor alle volgende synchronisaties worden alleen de wijzigingen in de sitemap gesynchroniseerd. Sneltoetsen: de sneltoetsen worden alleen gesynchroniseerd tussen computers met hetzelfde besturingssysteem.
Instellingen synchroniseren in het dialoogvenster Voorkeuren Op de tweede computer wordt het volgende dialoogvenster weergegeven als u Dreamweaver start: Cloudinstellingen synchroniseren Hiermee worden de instellingen in de cloud opgehaald. De toepassingsvoorkeuren op de tweede computer worden overschreven met de instellingen in de cloud. Siteinstellingen in de cloud worden toegevoegd aan de site-instellingen op de tweede computer.
Cloudinstellingen synchroniseren Hiermee worden de gewijzigde voorkeuren op de eerste computer gesynchroniseerd met de tweede computer. De wijzigingen die u hebt aangebracht op de tweede computer, gaan verloren. Lokaal synchroniseren Hiermee blijven de gewijzigde voorkeuren op de tweede computer behouden en worden de wijzigingen ook gesynchroniseerd met de cloud.
Als u instellingen op een later moment wilt importeren, kunt u dit doen via het dialoogvenster Voorkeuren. 1. Selecteer Bewerken > Voorkeuren om het dialoogvenster Voorkeuren te openen. 2. Klik op Instellingen synchroniseren in de lijst Categorie. Instellingen importeren uit vorige versies van Dreamweaver 3. Selecteer Importeer syncinstellingen en klik op Sluiten. 4. Sluit Dreamweaver af en start het programma opnieuw op om de geïmporteerde instellingen toe te passen.
2. Klik op Instellingen synchroniseren in de lijst Categorie. 3. Klik in het gedeelte Te synchroniseren instellingen op de instellingen die u wilt synchroniseren. 4. Selecteer in de lijst Conflict oplossen een optie om conflicten tijdens synchroniseren op te lossen. Zie Conflicten oplossen tijdens synchroniseren voor meer informatie. 5. Klik op Automatische synchronisatie inschakelen, als u de synchronisatie elke 30 minuten automatisch wilt uitvoeren. 6.
8. Klik op Sluiten om het dialoogvenster Voorkeuren af te sluiten. Naar boven Automatische synchronisatie U kunt automatische synchronisatie op een van de volgende manieren inschakelen: Selecteer Instellingen altijd automatisch synchroniseren in het dialoogvenster Instellingen synchroniseren. Opmerking: Het dialoogvenster Instellingen synchroniseren wordt alleen weergegeven wanneer u Dreamweaver voor de eerste keer start nadat u de toepassing hebt geïnstalleerd op de computers.
Als Conflict oplossen is ingesteld op Voorkeur vragen, wordt bij een conflict het volgende dialoogvenster weergegeven: Als u de optie Mijn voorkeuren onthouden inschakelt, wordt de optie die u kiest (Lokaal synchroniseren of Cloudinstellingen synchroniseren) geselecteerd in het dialoogvenster Voorkeuren. Belangrijk: Als u op Esc drukt om het dialoogvenster Conflicterende instellingen te sluiten, wordt de handeling Lokaal synchroniseren uitgevoerd.
