Sidebar div, links zwevend A. Breedte 200 pixels B. Celopvulling boven en onder, 15 pixels Ten slotte maakt de CSS-regel voor de container div-hoofdlabel de lay-out af: #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } Volgens de regel #mainContent krijgt de main content-div een linkermarge van 250 pixels, wat betekent dat er een ruimte van 250 pixels wordt geplaatst tussen de linkerkant van de container-div en de linkerkant van de main content-div.
nieuwe externe bestand in het dialoogvenster Stijlpaginabestand opslaan als. Indien u in het pop-upvenster CSS-lay-out het gekozen voor Koppeling met een bestaand bestand, voegt u het externe bestand toe in het tekstvak CSS-bestand koppelen door op het pictogram Stijlpagina toevoegen te klikken, het dialoogvenster Externe stijlpagina koppelen in te vullen en op OK te klikken. Wanneer u klaar bent, klikt u in het dialoogvenster Nieuw document op Maken.
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. 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.
Het deelvenster CSS ontwerpen bestaat uit de volgende deelvensters: Bronnen Hier worden alle CSS-stijlpagina's weergegeven die aan het document zijn gekoppeld. Met dit deelvenster kunt u CSS maken en koppelen aan het document of stijlen definiëren in het document. @Media Hier worden alle mediaquery's in de bron die is geselecteerd in het deelvenster Bronnen weergegeven. Als u geen specifieke CSS selecteert, bevat dit deelvenster alle mediaquery's die aan het document zijn gekoppeld.
Opmerking: Wanneer u een pagina-element selecteert, wordt 'Berekend' geselecteerd in het deelvenster Kiezers. Klik op een kiezer om de bijbehorende bron, mediaquery of eigenschappen weer te geven. Als u alle kiezers wilt weergeven, kiest u Alle bronnen in het deelvenster Bronnen. Als u kiezers wilt weergeven die niet tot een mediaquery in de geselecteerde bron behoren, klikt u op Algemeen in het deelvenster @Media.
Als u een kiezer van de ene bron naar een andere wilt verplaatsen, sleept u de kiezer naar de gewenste bron in het deelvenster Bronnen. Als u een kiezer in de geselecteerde bron wilt dupliceren, klikt u met de rechtermuisknop op de kiezer en klikt u op Dupliceren. Als u een kiezer wilt dupliceren en toevoegen aan een mediaquery, klikt u met de rechtermuisknop op de kiezer en plaatst u de muisaanwijzer op Dupliceren in mediaquery. Kies vervolgens de mediaquery.
Alle eigenschappen Alleen ingestelde eigenschappen Als u een eigenschap, zoals width of border-collapse, wilt instellen, klikt u op de vereiste opties naast de eigenschap in het deelvenster Eigenschappen.
Doorgehaalde weergave voor overschreven eigenschappen Marges, opvulling en positie instellen Met de vakbesturingselementen in het deelvenster Eigenschappen van CSS ontwerpen, kunt u snel de eigenschappen voor marges, opvulling en positie instellen. Als u de voorkeur geeft aan code, kunt u stenocode voor marge en opvulling in de tekstvakken voor snel bewerken opgeven. eigenschap 'margin' eigenschap 'padding' eigenschap 'position' Klik op de waarden en typ de vereiste waarde.
Als u de voorkeur geeft aan code, kunt u stenocode voor randen en de straal van de rand opgeven in het tekstvak voor snel bewerken. Als u eigenschappen voor besturingselementen voor randen wilt opgeven, stelt u eerst de eigenschappen in op het tabblad Alle zijden. De andere tabbladen worden dan ingeschakeld en de eigenschappen van het tabblad Alle zijden worden weergegeven voor afzonderlijke randen.
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.
Als u de markering wilt instellen voor de elementen, klikt u op de kiezer. De elementen zijn nu gemarkeerd met een blauwe rand. 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 Nv.t. Nv.t. Ontwerp Nv.t. Nv.t.
Dynamische rasterlay-outs (CC) Dynamische rasterlay-outs gebruiken Een dynamische rasterlay-out maken Elementen voor dynamische rasterlay-outs invoegen Elementen nesten De lay-out van een website moet reageren op en zich aanpassen aan de afmetingen van het apparaat waarop de website wordt weergegeven. Dynamische rasterlay-outs bieden een visuele methode om verschillende lay-outs te maken die geschikt zijn voor de apparaten waarop de website wordt weergegeven.
Wanneer u de elementen invoegt, kunt u ervoor kiezen deze als dynamische elementen in te voegen. 1. Selecteer in het deelvenster Invoegen het element dat u wilt invoegen. 2. Selecteer een klasse in het dialoogvenster dat wordt weergegeven of voer een waarde voor de id in. Het menu Class bevat klassen uit het CSS-bestand dat u hebt opgegeven bij het maken van de pagina. 3. Schakel het selectievakje Invoegen als dynamisch element in. 4.
dynamische CSS gegenereerd. Absolute elementen binnen het geselecteerde element worden op de juiste wijze gepositioneerd. Geneste elementen kunnen ook worden gedupliceerd met de knop Dupliceren. Wanneer u een bovenliggend element verwijdert, worden de bijbehorende CSS, de onderliggende elementen en gekoppelde HTML van het element verwijderd. U kunt geneste elementen ook verwijderen met de toets Delete (toetsenbordsneltoets: Ctrl+Delete).
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.
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.
Naar boven jQuery-effecten verwijderen 1. Selecteer het gewenste pagina-element. In het deelvenster Gedrag worden alle effecten weergegeven die momenteel zijn toegepast op het geselecteerde pagina-element. 2. Klik op het effect dat u wilt verwijderen en klik vervolgens op . De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.
Visuele lay-outhulpmiddelen gebruiken Linialen instellen Lay-outhulplijnen instellen Hulplijnen met sjablonen gebruiken Het lay-outraster gebruiken Een overtrekafbeelding gebruiken Naar boven Linialen instellen Linialen dienen om uw lay-out eenvoudiger te meten, organiseren en plannen. Ze worden langs de linker- en bovenrand van de pagina weergegeven en bevatten maateenheden in pixels, inches of centimeters.
Opmerking: De maateenheid is gelijk aan de maateenheid die voor de linialen wordt gebruikt. Het zichtbare gebied van een webbrowser emuleren Selecteer Weergave > Hulplijnen en selecteer vervolgens een vooraf ingestelde browsergrootte in het menu. Een hulplijn verwijderen Sleep de hulplijn uit het document. Hulplijninstellingen wijzigen Selecteer Weergave > Hulplijnen > Hulplijnen bewerken, stel de volgende opties in en klik op OK. Hulplijnkleur Hier kunt u opgeven welke kleur de hulplijnen moeten hebben.
Freehand of Fireworks is gemaakt. Een overtrekafbeelding is een JPEG-, GIF- of PNG-afbeelding die op de achtergrond van het documentvenster is geplaatst. U kunt de afbeelding verbergen, de doorzichtigheid ervan instellen en de positie ervan wijzigen. De overtrekafbeelding is alleen zichtbaar in Dreamweaver. De afbeelding is niet zichtbaar wanneer u de pagina in een browser bekijkt.
Frames gebruiken De werking van frames en framesets Beslissen of u frames wilt gebruiken Geneste framesets Werken met framesets in het documentvenster Frames en framesets maken Frames en framesets selecteren Een document in een frame openen Frame- en framesetbestanden opslaan Eigenschappen en kenmerken van frames weergeven en instellen Frameseteigenschappen weergeven en instellen Frame-inhoud met koppelingen controleren Inhoud opgeven voor browsers zonder frameondersteuning JavaScript-gedrag met frames gebr
zijframe identiek. In het frame met de hoofdinhoud rechts wordt het document weergegeven dat hoort bij de koppeling waarop de bezoeker in het linkerframe klikt. Een frame is geen bestand: het document dat momenteel in een frame wordt weergegeven is een integraal onderdeel van het frame, maar het document maakt feitelijk geen deel uit van het systeem. Het frame is een houder dat het document bevat.
gebruikt, moet u altijd een noframes-sectie bieden in uw frameset, voor bezoekers die geen frames kunnen bekijken. U kunt ook een expliciete koppeling van een frameloze versie van de site opnemen. Raadpleeg Thierry Koblentz’s website op www.tjkdesign.com/articles/frames/ voor uitgebreidere informatie over frames. Naar boven Geneste framesets Een frameset binnen een andere frameset wordt aangeduid als een geneste frameset. Eén framesetbestand kan meerdere, geneste framesets bevatten.
frameset ontwerpen. Als u een vooraf gedefinieerde frameset kiest, worden alle framesets en frames geconfigureerd die vereist zijn om de lay-out te maken. Dit is de eenvoudigste manier om snel een lay-out met frames te maken. U kunt een vooraf gedefinieerde frameset alleen in de ontwerpweergave van het documentvenster invoegen. U kunt in Dreamweaver ook uw eigen frameset ontwerpen door “splitsers” aan het documentvenster toe te voegen.
Een frame vergroten/verkleinen Als u framegroottes bij benadering wilt instellen, versleept u de frameranden in de ontwerpweergave van het documentvenster. Als u de groottes precies wilt instellen en wilt opgeven hoe veel ruimte in de browser aan een rij of kolom met frames wordt toegewezen wanneer frames in het browservenster niet op volledige grootte kunnen worden weergegeven, gebruikt u de eigenschappencontrole.
Een andere frame of frameset selecteren Als u de vorige of volgende frameset op hetzelfde hiërarchische niveau als de huidige selectie wilt selecteren, drukt u op Alt+Linkerpijl of Alt+Rechterpijl (Windows) of Command+Linkerpijl of Command+Rechterpijl (Macintosh). U kunt met deze toetsen door de frames en framesets bladeren in de volgorde waarin ze in het framesetbestand zijn gedefinieerd.
1. Voer een van de volgende handelingen uit om een frame te selecteren: Houd de Alt-toets (Windows) of de Option-Shift-toetsen (Macintosh) ingedrukt en klik in een frame in de ontwerpweergave van het documentvenster. Klik in een frame in het paneel Frames (Venster > Frames). 2. Klik in de eigenschappencontrole (Venster > Eigenschappen) op de uitbreidingspijl in de rechterbenedenhoek om alle frame-eigenschappen weer te geven. 3. Stel de opties van de eigenschappencontrole voor frames in.
Naar boven Frameseteigenschappen weergeven en instellen U kunt met de eigenschappencontrole de meeste frameseteigenschappen (inclusief framesettitel, randen, marges en framegrootten) weergeven en instellen. Een titel voor een framesetdocument instellen 1. Voer een van de volgende handelingen uit om een frameset te selecteren: Klik in de ontwerpweergave van het documentvenster op een rand tussen twee frames in de frameset. Klik in het paneel Frames (Venster > Frames) op de rand die een frameset omgeeft.
Als uw navigatiebalk zich bijvoorbeeld in het linkerframe bevindt en u het gekoppelde materiaal in het frame met de hoofdinhoud wilt weergeven, moet u de naam van het frame met de hoofdinhoud opgeven als het doel voor elk van de navigatiebalkkoppelingen. Wanneer een bezoeker op een navigatiekoppeling klikt, wordt de opgegeven inhoud in het hoofdframe geopend. 1. Selecteer in de ontwerpweergave tekst of een voorwerp. 2.
Inhoud in tabellen presenteren Over tabellen Voorkeursvolgorde voor tabelopmaak in HTML Tabelcellen splitsen en samenvoegen Een tabel invoegen en inhoud toevoegen Tabelgegevens importeren en exporteren Tabelelementen selecteren Tabeleigenschappen instellen Cel-, rij- of kolomeigenschappen instellen Tabellen eenvoudiger bewerken met de modus Uitgebreide tabellen Tabellen en cellen opmaken Tabellen, kolommen en rijen groter/kleiner maken Tabellen, kolommen en rijen groter/kleiner maken Rijen en kolommen toevo
U kunt elk gewenst aantal aangrenzende cellen samenvoegen (op voorwaarde dat de volledige selectie uit een regel of rechthoek met cellen bestaat) om één cel te maken die meerdere kolommen of rijen omvat. U kunt een cel in een willekeurig aantal rijen op kolommen splitsen, ongeacht of de cel eerder was samengevoegd. Dreamweaver herstructureert de tabel automatisch (door de noodzakelijke colspan- of rowspan kenmerken toe te voegen) om de opgegeven indeling te verkrijgen.
met de desbetreffende gegevens, plakt u de cellen buiten de tabel (om een nieuwe tabel te maken) en exporteert u de nieuwe tabel. Tabelgegevens importeren 1. Voer een van de volgende handelingen uit: Selecteer Bestand > Importeren > Tabelgegevens. Ga naar de categorie Gegevens van het paneel Invoegen en klik op het pictogram Tabelgegevens importeren . Selecteer Invoegen> Tabelobjecten > Tabelgegevens importeren. 2. Geef de opties voor de tabelgegevens op en klik op OK.
-tag in de tagkiezer in de linkerbenedenhoek van het documentvenster. Klik in een tabelcel en selecteer vervolgens Wijzigen > Tabel > Tabel selecteren. Klik in een tabelcel, klik op het tabelkopmenu en selecteer vervolgens Tabel selecteren. Er verschijnen selectiegrepen op de onder- en rechterrand van de geselecteerde tabel. Aparte of meerdere rijen of kolommen selecteren 1.
Als u de markering van tabelelementen wilt in- of uitschakelen, schakelt u de optie Weergeven bij Aanwijzen met muis in of uit. Opmerking: Deze opties zijn van toepassing op alle objecten (zoals AP-elementen) die in Dreamweaver worden gemarkeerd wanneer u ze met de muisaanwijzer aanwijst. Naar boven Tabeleigenschappen instellen Met de eigenschappencontrole kunt u tabellen bewerken. 1. Selecteer een tabel. 2. Wijzig desgewenst de eigenschappen in de eigenschappencontrole (Venster > Eigenschappen).
In een browser worden de rijhoogte en kolombreedte standaard zodanig ingesteld dat de breedste afbeelding of de langste regel in een kolom past. Daarom wordt een kolom soms veel breder dan de andere kolommen in de tabel wanneer u er inhoud aan toevoegt. Opmerking: U kunt een hoogte opgeven als percentage van de totale tabelhoogte. In browsers wordt de rij dan echter niet altijd volgens het opgegeven percentage weergegeven.
Naar boven Tabellen en cellen opmaken U kunt het uiterlijk van tabellen wijzigen door de eigenschappen van de tabel en bijbehorende cellen in te stellen, of door een vooraf vastgelegd ontwerp op de tabel toe te passen. Voordat u de tabel- en celeigenschappen instelt, moet u eraan denken dat de voorrangsvolgorde voor tabelopmaak 'cellen, rijen, tabellen' is. Als u tekst in een tabelcel wilt opmaken, voert u dezelfde procedures uit als u buiten een tabel zou doen.
Als u de tabel horizontaal en verticaal wilt vergroten/verkleinen, versleept u de selectiegreep in de rechterbenedenhoek. De breedte van een kolom wijzigen zonder de tabelbreedte te veranderen Versleep de rechterrand van de kolom die u wilt aanpassen. De breedte van de aangrenzende kolom wordt ook gewijzigd. U maakt dus feitelijk twee kolommen groter/kleiner. De visuele feedback geeft aan hoe de kolommen worden aangepast. De tabelbreedte blijft ongewijzigd.
2. Klik met de rechtermuisknop in de tabel (Windows), of houd de Control-toets ingedrukt en klik in de tabel (Macintosh). Selecteer vervolgens Tabel > Tabelbreedten. Naar boven Rijen en kolommen toevoegen en verwijderen Als u rijen en kolommen wilt toevoegen en verwijderen, doet u dat met Wijzigen > Tabel of gebruikt u het kolomkopmenu. Als u in de laatste tabel van een cel op de Tab-toets drukt, wordt er automatisch een rij aan de tabel toegevoegd.
In de volgende afbeelding bestaat de selectie niet uit een rechthoek, zodat de cellen niet kunnen worden samengevoegd. 2. Voer een van de volgende handelingen uit: Selecteer Wijzigen > Tabel > Cellen samenvoegen. Klik in de uitgebreide HTML-eigenschappencontrole (Venster > Eigenschappen) op Cellen samenvoegen . Opmerking: Als de knop niet zichtbaar is, klikt u op de uitvouwpijl rechtsonder in de eigenschappencontrole om alle opties weer te geven.
2. Selecteer Bewerken > Knippen, of Bewerken > Kopiëren. Opmerking: Als u een volledige rij of kolom hebt geselecteerd en u selecteert Bewerken > Knippen, wordt de volledige rij of kolom uit de tabel verwijderd (niet alleen de inhoud van de cellen). Tabelcellen plakken 1. Selecteer waar u de cellen wilt plakken: Als u bestaande cellen wilt vervangen door de cellen die u plakt, selecteert u een set bestaande cellen met dezelfde opmaak als de cellen op het Klembord.
Selecteer Numeriek als een kolom cijfers bevat. Bij alfabetisch sorteren worden getallen van één of twee cijfers gesorteerd alsof het woorden zijn (wat een volgorde oplevert zoals 1, 10, 2, 20, 3, 30) in plaats van cijfers (wat een volgorde oplevert zoals 1, 2, 3, 10, 20, 30). Vervolgens op/Volgorde: Hier kunt u de sorteervolgorde bepalen voor een tweede sortering op een andere kolom.
Gegevens weergeven met Spry Over Spry-gegevenssets Een Spry-gegevensset maken Een Spry-gebied maken Een Spry-herhalingsgebied maken Een lijst met Spry-herhalingen maken Opmerking: 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. Naar boven Over Spry-gegevenssets Een Spry-gegevensset is in feite een JavaScript-object dat een verzameling gegevens bevat die u opgeeft.
Het element selecteren voor de gegevenscontainer van de HTML-gegevensset. Bij lange bestanden klikt u op de pijl Uitvouwen/samenvouwen onder aan het venster Gegevensselectie om meer gegevens weer te geven. Nadat u het containerelement voor de gegevensset hebt geselecteerd, geeft Dreamweaver een voorbeeld weer van de gegevensset in het venster Gegevensvoorbeeld. (Optioneel) Selecteer Geavanceerde gegevensselectie als u CSS-gegevenskiezers wilt opgeven voor de gegevensset. Als u bijvoorbeeld .
Selecteer een lay-out voor de nieuwe gegevensset en geef de juiste instellingen op. Zie Een lay-out voor de gegevensset kiezen voor meer informatie. Selecteer Geen HTML invoegen. Als u deze optie selecteert, wordt de gegevensset in Dreamweaver gemaakt, maar wordt er geen HTML aan de pagina toegevoegd. De gegevensset wordt beschikbaar in het paneel Bindingen (Venster > Bindingen) en u kunt gegevens handmatig van de gegevensset naar de pagina slepen. 6. Klik op Gereed.
taalspecificatie XPath op de W3C-website van www.w3.org/TR/xpath voor meer informatie over XPath. Wanneer u klaar bent in het scherm Gegevensbron opgeven, klikt u op Gereed om de gegevensset direct te maken of klikt u op Volgende om door te gaan naar het scherm Opties voor gegevens instellen. Als u op Gereed klikt, wordt de gegevensset beschikbaar in het paneel Bindingen (Venster > Bindingen). 4.
3. Als u CSS-stijlen aan uw pagina hebt gekoppeld als een gekoppelde stijlpagina of als een reeks afzonderlijke stijlen in de HTML-pagina, kunt u een CSS-klasse toepassen op een of meer van de volgende opties: Klasse met oneven rijen Hiermee verandert u de weergave van oneven rijen in de dynamische tabel volgens de geselecteerde klassenstijl. Klasse met even rijen Hiermee verandert u de weergave van even rijen in de dynamische tabel volgens de geselecteerde klassenstijl.
standaard ingevuld met gegevens uit elke kolom in de gegevensset. Selecteer een kolomnaam en klik op de pijl omhoog of omlaag om de kolom te verplaatsen. Wanneer u een kolom omhoog en omlaag verplaatst in het paneel Kolommen, bepaalt u de volgorde van de gegevens in de gestapelde containers op de pagina. 2. (Optioneel) Stel verschillende containertypen in voor gegevens in de gestapelde containers.
Wanneer u een Invoer ontwerptijd gebruikt, wordt in Dreamweaver uw werkomgeving alleen ingevuld met gegevens uit die invoer. Referenties naar de gegevensbron in de paginacode blijven referenties naar de echte gegevensbron die u wilt gebruiken. 1. Beginnen met het maken van een Spry-gegevensset (zie eerdere procedures voor instructies). 2. Klik in het scherm Gegevensbron opgeven op de koppeling Invoer ontwerptijd. 3. Klik op de knop Bladeren om naar de Invoer ontwerptijd te zoeken en klik op OK.
wilt binden die worden bijgewerkt wanneer gegevens in andere Spry-gebieden veranderen. Opmerking: U dient een detailgebied in te voegen in een andere
dan die voor het hoofdtabelgebied. Misschien moet u naar de codeweergave gaan om de invoegpositie op de juiste plaats neer te zetten. 4. Kies de Spry-gegevensset in het menu. 5.
6. Klik op OK om een herhalingsgebied op de pagina weer te geven. Opmerking: Alle Spry-gegevensobjecten moeten in de gebieden liggen. Zorg er dus voor dat u een Spry-gebied hebt gemaakt op de pagina voordat u een herhalingsgebied invoegt. 7. Wanneer u op OK klikt, voegt Dreamweaver een tijdelijke aanduiding voor het gebied op de pagina in met de tekst 'Plaats hier de inhoud van Spry-gebied'.
Databaserecords weergeven Over 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 gedef
Met recordsetnavigatiekoppelingen kunnen gebruikers van de ene record naar de volgende, of van de ene set records naar de volgende gaan. Als u een pagina bijvoorbeeld hebt ontworpen om vijf records tegelijk weer te geven, kunt u de koppelingen Volgende of Vorige toevoegen waarmee gebruikers de volgende of vorige vijf records kunnen weergeven. U kunt vier typen navigatiekoppelingen maken om door een recordset te navigeren: Eerste, Vorige, Volgende en Laatste.
De koppelingen in de ontwerpweergave op de pagina plaatsen; Afzonderlijk servergedrag aan elke navigatiekoppeling toewijzen; In deze sectie wordt beschreven hoe u afzonderlijk servergedrag aan de navigatiekoppelingen kunt toekennen. Servergedrag maken en aan een navigatiekoppeling toekennen. 1. Selecteer in de ontwerpweergave de tekenreeks of afbeelding op de pagina die u als recordnavigatiekoppeling wilt gebruiken. 2. Open het paneel Servergedrag (Venster > Servergedrag) en klik op de plusknop (+). 3.
Weergeven indien laatste pagina Weergeven indien niet laatste pagina 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.
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.
Aangepaste recordtellers maken U gebruikt afzonderlijke vormen van gedrag voor het tellen van records om aangepaste recordtellers te maken. Door een aangepaste recordteller te maken, kunt u een recordteller maken die meer is dan de eenvoudige, enkele rijtabel die met het serverobject Navigatiestatus recordset wordt ingevoegd. U kunt de ontwerpelementen op diverse creatieve manieren ordenen en een geschikt servergedrag op elk element toepassen.
Een gegevensformaat aanpassen 1. Open een pagina met dynamische gegevens in de ontwerpweergave. 2. Selecteer de dynamische gegevens waarvan u de notatie wilt aanpassen. Het gebonden gegevensitem waarvan u de dynamische tekst hebt geselecteerd, wordt gemarkeerd in het paneel Bindingen (Venster > Bindingen). Het paneel geeft twee kolommen weer voor het geselecteerde item: Binding en Formaat. Als de kolom Formaat niet zichtbaar is, verbreedt u het paneel Bindingen om het te tonen. 3.
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 geeft de mediaquery het bestand phone.css op voor apparaten met een breedte van 300-320 pixels. PAGE 212
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. Bijvoorbeeld telefoon, televisie, tablet enzovoort.
5. Klik op Bladeren bij Mediaquerybestand voor de hele site om het CSS-bestand voor mediaquery's te selecteren. Opmerking: als u het mediaquerybestand voor de hele site wijzigt, heeft dit geen invloed op documenten die zijn gekoppeld aan een ander of eerder mediaquerybestand voor de hele site. 6. Klik op Opslaan.
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.
Over het Spry-framework Opmerking: 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. Het Spry-framework is een JavaScript-bibliotheek met behulp waarvan webontwerpers webpagina's kunnen bouwen die de bezoekers een prettiger ervaring geven. Met Spry kunt u HTML, CSS en een minimale hoeveelheid JavaScript gebruiken om XML-gegevens op te nemen in uw HTML-documenten.
CSS Pagina's in Dreamweaver ontwerpen met CSS3 Janine Warner (24 februari 2011) zelfstudie Dreamweaver CS5: CSS-controlefunctie Geoff Blake (23 april 2010) videozelfstudie 216
CSS-stijlpagina's bijwerken op een Contribute-site Opmerking: In Dreamweaver CC en hoger is het deelvenster CSS-stijlen vervangen door CSS ontwerpen. Zie CSS ontwerpen voor meer informatie. Gebruikers van Adobe Contribute kunnen geen wijzigingen aanbrengen in een CSS-stijlblad. Gebruik Dreamweaver om een stijlpagina voor een Contribute-site te wijzigen. 1. Bewerk de stijlpagina met behulp van de hulpprogramma's van Dreamweaver voor het bewerken van stijlpagina's. 2.
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.
Eigenschappen voor CSS-stijlachtergronden definiëren Naar boven Gebruik de categorie Achtergrond van het dialoogvenster Definitie van CSS-regel om de achtergrondinstellingen voor een CSS-stijl te definiëren. U kunt de achtergrondeigenschappen toepassen op elk element op een webpagina. Maak bijvoorbeeld een stijl die een achtergrondkleur of achtergrondafbeelding aan elk pagina-element toevoegt, bijvoorbeeld achter tekst, een tabel, de pagina enzovoort.
Text Align Hiermee stelt u in hoe de tekst wordt uitgelijnd binnen het element. Het kenmerk Text Align wordt door beide browsers ondersteund. Text Indent Hiermee geeft u op hoe ver de eerste regel tekst inspringt. U kunt een negatieve waarde gebruiken om een uitspringing te maken, maar de weergave is afhankelijk van de browser. Dreamweaver geeft dit kenmerk alleen in het documentvenster weer wanneer de label wordt toegepast op elementen op blokniveau.
3. Selecteer in het dialoogvenster Definitie van CSS-regel de optie Rand en stel een van de volgende stijleigenschappen in. (Laat de eigenschap leeg als deze niet belangrijk is voor de stijl.) Type Hiermee bepaalt u het uiterlijk van de stijl van de rand. De manier waarop de stijl eruitziet, is afhankelijk van de browser. Schakel de selectie van de optie Allemaal hetzelfde om de stijl van de rand van afzonderlijke zijkanten van het element in te stellen.
linkerbovenhoek van de browser. Terwijl de gebruiker via schuiven door de pagina bladert, blijft de inhoud vast op die positie. Static plaatst de inhoud op de plaats ervan in de tekststroom. Dit is de standaardpositie van alle positioneerbare HTML-elementen. Visibility Hiermee bepaalt u de aanvankelijke weergavetoestand van de inhoud. Als u geen eigenschap voor zichtbaarheid opgeeft, krijgt de inhoud standaard de waarde van de bovenliggende label. De standaardzichtbaarheid van de label body is zichtbaar.
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.
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.
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.
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.
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.
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.
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.
Dynamische rasterlay-outs (CC) Dynamische rasterlay-outs gebruiken Een dynamische rasterlay-out maken Elementen voor dynamische rasterlay-outs invoegen Elementen nesten De lay-out van een website moet reageren op en zich aanpassen aan de afmetingen van het apparaat waarop de website wordt weergegeven. Dynamische rasterlay-outs bieden een visuele methode om verschillende lay-outs te maken die geschikt zijn voor de apparaten waarop de website wordt weergegeven.
Wanneer u de elementen invoegt, kunt u ervoor kiezen deze als dynamische elementen in te voegen. 1. Selecteer in het deelvenster Invoegen het element dat u wilt invoegen. 2. Selecteer een klasse in het dialoogvenster dat wordt weergegeven of voer een waarde voor de id in. Het menu Class bevat klassen uit het CSS-bestand dat u hebt opgegeven bij het maken van de pagina. 3. Schakel het selectievakje Invoegen als dynamisch element in. 4.
dynamische CSS gegenereerd. Absolute elementen binnen het geselecteerde element worden op de juiste wijze gepositioneerd. Geneste elementen kunnen ook worden gedupliceerd met de knop Dupliceren. Wanneer u een bovenliggend element verwijdert, worden de bijbehorende CSS, de onderliggende elementen en gekoppelde HTML van het element verwijderd. U kunt geneste elementen ook verwijderen met de toets Delete (toetsenbordsneltoets: Ctrl+Delete).
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.
U kunt met één klik de volgorde wijzigen waarin achtergrondafbeeldingen en verlopen worden weergegeven in de code. Klik op naast de eigenschap url of gradient in CSS ontwerpen. Achtergrond omwisselen Opmerking: Dreamweaver CC bevat een basisimplementatie van de functie voor het omwisselen van achtergronden. Met meerdere waarden of afbeeldingen werkt het omwisselen mogelijk niet zoals verwacht. Stel dat u werkt met een afbeelding en een tweede afbeelding en een verloop hebt toegepast op de achtergrond.
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.
implementatie van Mozilla voor de eigenschap border-image. Naar boven Wijzigingen voorvertonen in Live View Wijzigingen in CSS-eigenschappen worden niet weergegeven in de ontwerpweergave. Schakel over naar Live View om de wijzigingen te controleren. In Live View kunt u CSS3-eigenschappen ook snel bewerken, waarbij de wijzigingen meteen worden getoond in deze weergave.
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.
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.
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.
Werken met labels voor div-tags Div-tags invoegen en bewerken CSS-lay-outblokken Werken met AP-elementen (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. Zie Semantische elementen van HTML5 invoegen vanuit het deelvenster Invoegen voor meer informatie.
toevoegen aan de label voor een div-element door gewoon de invoegpositie binnen de label voor het div-element te plaatsen en vervolgens inhoud toe te voegen op de manier waarop u inhoud toevoegt aan een pagina. Op de label voor een div-tag toegepaste regels weergeven en bewerken 1. Voer een van de volgende handelingen uit om de label voor een div-element te selecteren: Klik op de rand van de label voor het div-element. Let op de markering om de rand te zien.
worden de overige achtergrondkleuren en -afbeeldingen die gewoonlijk op de pagina worden weergegeven, verborgen. Wanneer u het visuele hulpmiddel inschakelt om CSS-lay-outblokachtergronden weer te geven, wijst Dreamweaver automatisch aan elk CSS-layoutblok een opvallende achtergrondkleur toe. (Dreamweaver selecteert de kleuren met behulp van een algoritmisch proces—u kunt de kleuren op geen enkele manier zelf toewijzen.
AP-elementen bestaan doorgaans uit absoluut gepositioneerde labels voor div-tags. (Dit is het soort AP-elementen dat Dreamweaver standaard invoegt.) Maar onthoud dat u elk HTML-element (bijvoorbeeld een afbeelding) als AP-element kunt aanmerken door er een absolute positie aan toe te wijzen. Alle AP-elementen (niet alleen absoluut gepositioneerde labels voor div-tags) komen in het paneel AP-elementen te staan. HTML-code voor AP Div-elementen Dreamweaver maakt AP-elementen met behulp van de div tag.
De randen van het AP Div-element worden gemarkeerd en de selectiegreep wordt weergegeven, maar het AP Div-element zelf wordt niet geselecteerd. Randen van AP Div-elementen tonen Selecteer Weergave > Visuele hulpmiddelen en selecteer Omtrek van AP Div-element of Omtrek van CSS-lay-out. Opmerking: Het gelijktijdig selecteren van beide opties heeft hetzelfde effect.
1. Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh). 2. Selecteer AP-elementen in de lijst Categorie aan de linkerzijde, geef een van de volgende voorkeuren op en klik vervolgens op OK. Visibility Hiermee bepaalt u of AP-elementen standaard zichtbaar zijn. De opties zijn default (Standaard), inherit (Overnemen), visible (Zichtbaar) en hidden (Verborgen).
Klasse Hiermee geeft u de CSS-klasse voor de stijl van het AP-element op. Overflow Hiermee bepaalt u hoe AP-elementen er in een browser uitzien wanneer de inhoud de opgegeven grootte van het AP-element overschrijdt. Met Visible geeft u aan dat de extra inhoud in het AP-element wordt weergegeven; in feite wordt het AP-element uitgestrekt om de extra inhoud te kunnen bevatten. Met Hidden geeft u aan dat de extra inhoud niet in de browser wordt weergegeven.
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.
2. Selecteer in het deelvenster AP-elementen of in het documentvenster het AP-element waarvan u de Z-index wilt wijzigen. 3. Typ in de eigenschappencontrole (Venster > Eigenschappen) een getal in het tekstvak Z-index. Typ een hoger getal om het AP-element naar een hogere plaats in de stapelvolgorde te verplaatsen. Typ een lager getal om het AP-element naar een lagere plaats in de stapelvolgorde te verplaatsen.
AP-elementen verplaatsen U kunt in de ontwerpweergave AP-elementen op ongeveer dezelfde wijze verplaatsen als het verplaatsen van objecten in de meeste eenvoudige grafische toepassingen. Als de optie Overlappingen voorkomen is ingeschakeld, kunt u een AP-element niet dusdanig verplaatsen dat het overlapt met een ander APelement. 1. Selecteer in de ontwerpweergave een AP-element of meerdere AP-elementen. 2.
uitgeschakeld, bevat de resulterende tabel geen transparante GIF's, maar kan de breedte van de kolommen van browser tot browser variëren. Centreren op de pagina Hiermee centreert u de resulterende tabel op de pagina. Als deze optie is uitgeschakeld, begint de tabel op de linkerrand van de pagina. Tabellen converteren naar absoluut gepositioneerde div-tags 1. Selecteer Modify > Convert > Tables to AP Divs. 2.
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.
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.
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).
} 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: 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.
Nieuwe CSS-regel Hiermee opent u een dialoogvenster waarin u het type te maken stijl selecteert—bijvoorbeeld, het maken van een klassenstijl, het opnieuw definiëren van een HTML-tag of het definiëren van een CSS-kiezer. Stijl bewerken Hiermee opent u een dialoogvenster waarin u de stijlen in het huidige document of in een externe stijlpagina kunt bewerken.
Pagina's met CSS opmaken Over de CSS-paginalay-out Over de structuur van de CSS-paginalay-out Een pagina met een CSS-lay-out maken Naar boven Over de CSS-paginalay-out Voor de indeling van een CSS-pagina wordt de indeling Cascading Style Sheet gebruikt in plaats van HTML-tabellen of frames voor het ordenen van de inhoud van een webpagina.
Sidebar div, links zwevend A. Breedte 200 pixels B. Celopvulling boven en onder, 15 pixels Ten slotte maakt de CSS-regel voor de container div-hoofdlabel de lay-out af: #mainContent { margin: 0 0 0 250px; padding: 0 20px 20px 20px; } Volgens de regel #mainContent krijgt de main content-div een linkermarge van 250 pixels, wat betekent dat er een ruimte van 250 pixels wordt geplaatst tussen de linkerkant van de container-div en de linkerkant van de main content-div.
nieuwe externe bestand in het dialoogvenster Stijlpaginabestand opslaan als. Indien u in het pop-upvenster CSS-lay-out het gekozen voor Koppeling met een bestaand bestand, voegt u het externe bestand toe in het tekstvak CSS-bestand koppelen door op het pictogram Stijlpagina toevoegen te klikken, het dialoogvenster Externe stijlpagina koppelen in te vullen en op OK te klikken. Wanneer u klaar bent, klikt u in het dialoogvenster Nieuw document op Maken.
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. 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.
Het deelvenster CSS ontwerpen bestaat uit de volgende deelvensters: Bronnen Hier worden alle CSS-stijlpagina's weergegeven die aan het document zijn gekoppeld. Met dit deelvenster kunt u CSS maken en koppelen aan het document of stijlen definiëren in het document. @Media Hier worden alle mediaquery's in de bron die is geselecteerd in het deelvenster Bronnen weergegeven. Als u geen specifieke CSS selecteert, bevat dit deelvenster alle mediaquery's die aan het document zijn gekoppeld.
Opmerking: Wanneer u een pagina-element selecteert, wordt 'Berekend' geselecteerd in het deelvenster Kiezers. Klik op een kiezer om de bijbehorende bron, mediaquery of eigenschappen weer te geven. Als u alle kiezers wilt weergeven, kiest u Alle bronnen in het deelvenster Bronnen. Als u kiezers wilt weergeven die niet tot een mediaquery in de geselecteerde bron behoren, klikt u op Algemeen in het deelvenster @Media.
Als u een kiezer van de ene bron naar een andere wilt verplaatsen, sleept u de kiezer naar de gewenste bron in het deelvenster Bronnen. Als u een kiezer in de geselecteerde bron wilt dupliceren, klikt u met de rechtermuisknop op de kiezer en klikt u op Dupliceren. Als u een kiezer wilt dupliceren en toevoegen aan een mediaquery, klikt u met de rechtermuisknop op de kiezer en plaatst u de muisaanwijzer op Dupliceren in mediaquery. Kies vervolgens de mediaquery.
Alle eigenschappen Alleen ingestelde eigenschappen Als u een eigenschap, zoals width of border-collapse, wilt instellen, klikt u op de vereiste opties naast de eigenschap in het deelvenster Eigenschappen.
Doorgehaalde weergave voor overschreven eigenschappen Marges, opvulling en positie instellen Met de vakbesturingselementen in het deelvenster Eigenschappen van CSS ontwerpen, kunt u snel de eigenschappen voor marges, opvulling en positie instellen. Als u de voorkeur geeft aan code, kunt u stenocode voor marge en opvulling in de tekstvakken voor snel bewerken opgeven. eigenschap 'margin' eigenschap 'padding' eigenschap 'position' Klik op de waarden en typ de vereiste waarde.
Als u de voorkeur geeft aan code, kunt u stenocode voor randen en de straal van de rand opgeven in het tekstvak voor snel bewerken. Als u eigenschappen voor besturingselementen voor randen wilt opgeven, stelt u eerst de eigenschappen in op het tabblad Alle zijden. De andere tabbladen worden dan ingeschakeld en de eigenschappen van het tabblad Alle zijden worden weergegeven voor afzonderlijke randen.
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.
Als u de markering wilt instellen voor de elementen, klikt u op de kiezer. De elementen zijn nu gemarkeerd met een blauwe rand. 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 Nv.t. Nv.t. Ontwerp Nv.t. Nv.t.
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.
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.
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 CSSregel te openen: Selecteer Opmaak > CSS-stijlen > Nieuw.
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
Een probleem uitsluiten van de browsercompatibiliteitscontrole Naar boven 1. Voer de test voor browsercompatibiliteit uit. 2. Klik in het paneel Resultaten met de rechter muisknop (Windows) of de Control-knop (Macintosh) op het probleem dat u van toekomstige controles wilt uitsluiten. 3. Selecteer Probleem negeren in het contextmenu. Naar boven De lijst Genegeerde problemen bewerken 1. Selecteer in het deelvenster Resultaten (Venster> Resultaten) het tabblad Browsercompatibiliteit controleren. 2.
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.
Informatie over CSS (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 in: 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.
vinden dat het lettertype te klein is. Uiteindelijk (tenminste in dit geval) vervangt de selectie van de gebruiker zowel de standaardstijlen van de browser voor de alineatekengrootte als de alineastijlen die door de auteur van de webpagina zijn gemaakt. Overerving is een ander belangrijk deel van de getrapte versie.
wanneer een stenoregel een regel onderdrukt die is geschreven met de lange versie. Als u een webpagina die is gecodeerd met steno-CSSnotatie opent in Dreamweaver, moet u rekening mee houden dat Dreamweaver alle nieuwe CSS-regels maakt met de lange versie. U kunt opgeven hoe Dreamweaver CSS-regels maakt en bewerkt, door de voorkeuren voor CSS-bewerkingen te wijzigen in de categorie CSS-stijlen van het dialoogvenster Voorkeuren (Bewerken > Voorkeuren in Windows; Dreamweaver > Voorkeuren op de Macintosh).
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 [.
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.
Het paneel Invoegen gebruiken Het paneel Invoegen bevat knoppen voor het maken en invoegen van objecten zoals tabellen en afbeeldingen. De knoppen zijn georganiseerd in categorieën.
Deelvenster Invoegen in Dreamweaver CC Naar boven Een object invoegen 1. Selecteer de juiste categorie in het pop-upmenu Categorie van het paneel Invoegen. 2. Voer een van de volgende handelingen uit: Klik op een objectknop of sleep het pictogram van de knop naar het documentvenster (in de weergave Ontwerp, Live of Code). Klik op de pijl op een knop en selecteer een optie in het menu.
de twee panelen, of dubbelklikt u op het object in het paneel Beschikbare objecten. Opmerking: U kunt één object tegelijk toevoegen. U kunt geen categorienaam, zoals Algemeen, selecteren om een hele categorie toe te voegen aan uw lijst met favorieten. Als u een object of scheidingsteken wilt verwijderen, selecteert u een object in het paneel Favoriete objecten aan de rechterkant en klikt u op de knop Verwijder het geselecteerde object uit de lijst Favoriete objecten boven het paneel.
Klik met de rechtermuisknop (Windows) of klik terwijl u Control ingedrukt houdt (Macintosh) op een categorietab op de horizontale invoegbalk en kies de opdracht Weergeven als menu. Adobe raadt ook het volgende aan: Overzicht van het deelvenster Invoegen De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.
Edge- en weblettertypen toevoegen aan de lettertypenlijst U kunt Adobe Edge- en weblettertypen toevoegen aan de lettertypenlijst in Dreamweaver. In de lettertypenlijst worden de door Dreamweaver ondersteunde lettertypestapels eerst weergegeven en vervolgens de weblettertypen en Edge Web Fonts.
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. Selecteer het bestand en open het. Als op de locatie ook andere andere indelingen voor het lettertype aanwezig zijn, worden deze automatisch toegevoegd aan het dialoogvenster.
Werken met de widget Spry-tekstveld voor validatie Over de widget tekstveld voor validatie De widget tekstveld voor validatie invoegen en bewerken De widget tekstveld voor validatie aanpassen Opmerking: 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.
De standaard-HTML voor de widget tekstveld voor validatie bevindt zich gewoonlijk in een formulier, en bevat een containertag met daarbinnen de -tag van het tekstveld. De HTML voor de widget tekstveld voor validatie bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van de widget. Voor een uitvoerige uitleg van de werking van de widget tekstveld voor validatie, waaronder een volledige anatomie van de code van de widget tekstveld voor validatie, gaat u naar www.adobe.
Reëel-getal/wetenschappelijke notatie Valideert diverse soorten getallen; gehele getallen (bijvoorbeeld, 1); zwevende waarden (bijvoorbeeld 12.123) en zwevende waarden in de wetenschappelijke notatie (bijvoorbeeld 1.212e+12, 1.221e-12 waarbij e een macht van 10 is). IP-adres Notaties variëren. Maak uw keuze uit het menu Formaat van de eigenschappencontrole. URL Tekstveld accepteert URL's die zijn opgemaakt als http://xxx.xxx.xxx of ftp://xxx.xxx.xxx.
2. Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer een tip in het tekstvak Tip in. Ongeldige tekens blokkeren U kunt voorkomen dat gebruikers ongeldige tekens in een widget tekstveld voor validatie invoeren. Als u deze optie bijvoorbeeld inschakelt voor een widget waarvoor het validatietype Geheel getal is ingesteld, verschijnt niets in het tekstveld als de gebruiker een letter probeert te typen. 1. Selecteer een widget tekstveld voor validatie in het documentvenster. 2.
Achtergrondkleur van widget bij focus input.textfieldFocusState background-color: #FFFFCC; Adobe raadt ook het volgende aan: De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.
Werken met de widget Tekstgebied voor Spry-validatie Over de widget tekstgebied voor validatie De widget tekstgebied voor validatie invoegen en bewerken De widget tekstgebied voor validatie aanpassen Opmerking: 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.
tekstgebied voor validatie, gaat u naar www.adobe.com/go/learn_dw_sprytextarea_nl. De widget tekstgebied voor validatie invoegen en bewerken Naar boven De widget tekstgebied voor validatie invoegen 1. Kies Invoegen > Spry > Spry-validatie voor tekstgebied. 2. Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK. Opmerking: U kunt een widget tekstgebied voor validatie ook invoegen met behulp van de categorie Spry in het paneel Invoegen.
dan 20 tekens invoeren. 1. Selecteer een widget tekstgebied voor validatie in het documentvenster. 2. Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Extra tekens blokkeren in. Naar boven De widget tekstgebied voor validatie aanpassen Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een widget tekstgebied voor validatie kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund.
Werken met de widget Spry-validatie bevestigen Over de widget Validatie voor bevestigen De widget validatie voor bevestigen invoegen en bewerken De widget Bevestigen aanpassen Opmerking: 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.
1. Selecteer een widget validatie voor bevestigen in het documentvenster door op de desbetreffende blauwe tab te klikken. 2. Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Vereist in of uit. Geef het tekstveld op waarop moet worden gevalideerd 1. Selecteer een widget validatie voor bevestigen in het documentvenster door op de desbetreffende blauwe tab te klikken. 2.
Tekst van foutbericht .confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg kleur: #CC3333; rand: 1px solid #CC3333; De achtergrondkleuren wijzigen van de widget validatie voor bevestigen Als u de achtergrondkleuren van de widget validatie voor bevestigen in verschillende staten wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende CSS-regel op te zoeken, en verandert u de standaardwaarden voor de achtergrondkleur.
Werken met de widget Wachtwoord voor Spry-validatie Over de widget wachtwoord voor validatie De widget wachtwoord voor validatie invoegen en bewerken De widget wachtwoord voor validatie aanpassen Opmerking: 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.
Standaard is voor alle widgets Wachtwoord voor validatie die u met Dreamweaver invoegt, invoer van de gebruiker nodig wanneer de widget op een webpagina wordt gepubliceerd. U kunt het invullen van tekstvelden voor een wachtwoord echter optioneel maken voor de gebruiker. 1. Selecteer een widget wachtwoord voor validatie in het documentvenster door op de desbetreffende blauwe tab te klikken. 2. Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel de optie Vereist in of uit.
Hoewel u de regels voor de widget wachtwoord voor validatie gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt bewerken, kunt u ook het deelvenster CSS-stijlen gebruiken om de CSS van de widget te bewerken. Het deelvenster CSS-stijlen is handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van dee widget zijn toegewezen, met name als u de modus Huidig van het paneel gebruikt. Een widget wachtwoord voor validatie opmaken (algemene instructies) 1.
Werken met de widget Groep met Spry-validatiekeuzerondjes Over de widget groep met validatiekeuzerondjes De widget groep met validatiekeuzerondjes invoegen en bewerken De widget groep keuzerondjes aanpassen Opmerking: 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.
5. Klik in de kolom Waarde op een waarde om deze bewerkbaar te maken en wijs een unieke waarde toe aan elk keuzerondje. 6. (Optioneel) Klik op een keuzerondje of op de bijbehorende waarde om een specifieke rij te selecteren en klik op de pijl omhoog of omlaag om de rij naar boven of naar beneden te verplaatsen. 7. Selecteer een lay-outtype voor de groep keuzerondjes. Regeleinden Plaatst elk keuzerondje op een afzonderlijke regel met behulp van regeleinden (br-tags).
4. Geef in de eigenschappencontrole lege of ongeldige waarden op. Als u een widget wilt maken die het foutbericht voor lege waarden 'Selecteer een optie' weergeeft, typt u geen in het vak Lege waarde. Als u een widget wilt maken die het foutbericht voor ongeldige waarden 'Selecteer een geldige waarde' weergeeft, typt u ongeldig in het vak Ongeldige waarde.
Werken met de widget Spry-validatie selecteren Over de widget Validatie selecteren De widget validatie selecteren invoegen en bewerken De widget Validatie selecteren aanpassen Opmerking: 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.
2. Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK. 3. Ga naar de codeweergave en voeg option-tags toe die menu-items en -waarden bevatten. Dit wordt niet automatisch in Dreamweaver gedaan. Zie het vorige onderwerp voor meer informatie. Opmerking: U kunt een widget validatie selecteren ook invoegen met behulp van de categorie Spry in het paneel Invoegen.
Werken met de widget Spry-accordeon Over de accordeonwidget De accordeonwidget invoegen en bewerken De accordeonwidget aanpassen Opmerking: 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. Naar boven Over de accordeonwidget Een accordeonwidget is een reeks inklapbare panelen die een grote hoeveelheid inhoud op een beperkte ruimte kunnen opslaan.
Plaats de muisaanwijzer boven de tab van het paneel om het in de ontwerpweergave te openen, en klik op het oogpictogram dat rechts van de tab wordt weergegeven. Selecteer een accordeonwidget in het documentvenster en klik in het menu Panelen van de eigenschappencontrole (Venster > Eigenschappen) op de naam van het paneel dat u wilt bewerken. De volgorde van panelen wijzigen 1. Selecteer een accordeonwidget in het documentvenster. 2.
accordeonpaneel Achtergrondkleur van paneeltabs bij aanwijzen Achtergrondkleur van geopende paneeltab bij aanwijzen standaardwaarde) .AccordionPanelTabHover .AccordionPanelOpen .AccordionPanelTabHover kleur: #555555; (Dit is de standaardwaarde) color: #555555; (Dit is de standaardwaarde.) De breedte van een accordeon beperken Standaard wordt de accordeonwidget opengeklapt zodat de beschikbare ruimte geheel in beslag wordt genomen.
Werken met de widget Inklapbaar Spry-deelvenster Over de inklapbaar-deelvensterwidget De inklapbaar-deelvensterwidget invoegen en bewerken De inklapbaar-deelvensterwidget aanpassen Opmerking: 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.
2. Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel Animatie inschakelen in of uit. Naar boven De inklapbaar-deelvensterwidget aanpassen Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een inklapbaar-deelvensterwidget kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de widget Inklapbaar deelvenster wijzigen en een inklapbaar deelvenster maken dat naar uw eigen smaak is opgemaakt.
van een inklapbaar-deelvensterwidget echter beperken door een breedte-eigenschap voor de inklapbaar-deelvenstercontainer in te stellen. 1. Zoek de CSS-regel .CollapsiblePanel op door het bestand SpryCollapsible Panel.css te openen. Deze regel definieert eigenschappen voor het hoofdcontainerelement van de inklapbaar-deelvensterwidget. U vindt de regel ook door de inklapbaar-deelvensterwidget te selecteren en het deelvenster CSS-stijlen te bekijken (Venster > CSSstijlen).
Werken met de widget Selectievakje voor Spry-validatie Over de widget selectievakje voor validatie De widget selectievakje voor validatie invoegen en bewerken Foutberichten aanpassen voor de widget selectievakje voor validatie Opmerking: 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.
De widget selectievakje voor validatie invoegen 1. Kies Invoegen > Spry > Spry-selectievakje voor validatie 2. Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK. Opmerking: U kunt een widget selectievakje voor validatie ook invoegen met behulp van de categorie Spry in het paneel Invoegen.
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.
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.
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.
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.
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.
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.
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. Naar boven Een bijnaam voor een favoriet element maken U kunt bijnamen (bij voorbeeld PaginaAchtergrondKleur in plaats van #999900) geven aan alleen elementen in de lijst Favorieten. De sitelijst behoudt echter de werkelijke bestandsnamen (of waarden, zoals in het geval van kleuren en URL's). 1.
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.
Paneel CSS Hiermee opent u het deelvenster CSS-stijlen waarin eigenschappen voor de doelregel in de huidige weergave worden weergegeven. Font Hiermee verandert u het lettertype van de doelregel. Grootte Hiermee stelt u de tekengrootte voor de doelregel in. Tekstkleur Hiermee stelt u de geselecteerde kleur als tekenkleur voor de doelregel in. Selecteer een webveilige kleur door op het kleurvak te klikken of door een hexadecimale waarde (bijvoorbeeld #FF0000) in het ernaast liggende tekstveld te typen.
_blank laadt het gekoppelde bestand in een nieuw naamloos browservenster. _parent laadt het gekoppelde bestand in het bovenliggende frame of venster ten opzichte van het frame dat de koppeling bevat. Als het frame dat de koppeling bevat niet is genest, wordt het gekoppelde bestand geladen in het volledige browservenster. _self laadt het gekoppelde bestand in het frame of venster waarin de koppeling zich bevindt. Dit doel is impliciet, dus u hoeft het meestal niet op te geven.
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.
bewaart. In dat geval slaat u de volgende stap over. 3. Zoek in het dialoogvenster Afbeeldingsbron selecteren naar het Photoshop PSD-afbeeldingsbestand door op de knop Bladeren te klikken en naar het bestand te gaan. 4. Pas in het dialoogvenster Afbeelding optimaliseren dat verschijnt de optimalisatie-instellingen naar wens aan en klik op OK. 5. Sla het afbeeldingsbestand, dat klaar is voor internet, op een locatie binnen de hoofdmap van uw website op.
2. Klik in de eigenschappencontrole op de knop Bewerken. 3. Breng de wijzigingen aan in Photoshop en sla het nieuwe PSD-bestand op. 4. Selecteer in Dreamweaver opnieuw het slimme object en klik op de knop Bijwerken vanuit origineel. Opmerking: als u het formaat van de afbeelding in Photoshop hebt gewijzigd, moet u het formaat van de webafbeelding opnieuw instellen in Dreamweaver.
actieve en lagere lagen van het segment naar het klembord gekopieerd. U kunt Selecteren > Alles kiezen om snel een afbeelding te selecteren voor kopiëren. 2. Plaats in Dreamweaver (ontwerp- of codeweergave) de invoegpositie op de pagina waar u de afbeelding wilt invoegen. 3. Selecteer Bewerken > Plakken. 4. Pas in het dialoogvenster Afbeelding optimaliseren de optimalisatie-instellingen naar wens aan en klik op OK. 5.
HTML5-video invoegen (CC) Deze functie is alleen beschikbaar voor gebruikers met een Creative Cloud-abonnement of een abonnement voor een los product. Zie Adobe Creative Cloud om lid te worden van Adobe Creative Cloud. 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.
Als u Automatisch selecteert, wordt de volledige video geladen als de pagina wordt gedownload. Als u Metagegevens selecteert, worden alleen de metagegevens gedownload nadat het downloaden van de pagina is voltooid. Deelvenster Eigenschappen van de HTML5-video Naar boven De video voorvertonen in een browser 1. Sla de webpagina op. 2. Selecteer Bestand > Voorvertoning in browser. Selecteer de browser waarin u de video wilt voorvertonen.
Documenten maken en openen 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.
XML Extensible Markup Language-bestanden hebben de extensie .XML. Deze bestanden bevatten gegevens in onbewerkte vorm die kunnen worden opgemaakt met XSL (Extensible Stylesheet Language). XSL Extensible Stylesheet Language-bestanden hebben de extensie .XSL of .XSLT. Deze bestanden worden gebruikt om XML-gegevens die u op een website wilt weergeven, op te maken.
Een pagina die geschikt is voor InContext Editing moet ten minste één div-tag bevatten die kan worden ingesteld als bewerkbaar gebied. Als u bijvoorbeeld het paginatype HTML hebt geselecteerd, moet u voor de nieuwe pagina een van de CSS-lay-outs selecteren omdat deze lay-outs al voorgedefinieerde div-tags bevatten. Het bewerkbare InContext Editing-gebied wordt automatisch op de div-tag met de inhouds-id geplaatst. Later kunt u desgewenst meer bewerkbare gebieden toevoegen aan de pagina.
Nieuw bestand maken Hiermee voegt u CSS voor de indeling toe aan een nieuw, extern CSS-bestand en koppelt u de nieuwe stijlpagina aan de pagina die u maakt. Koppeling naar bestaand bestand Hiermee kunt u een bestaand CSS-bestand opgeven dat reeds de CSS-regels bevat die nodig zijn voor de indeling. Klik hiertoe op het pictogram Stijlpagina koppelen boven het deelvenster CSS-bestand koppelen en selecteer een bestaande CSS-stijlpagina.
1. Open het deelvenster Middelen (Venster > Middelen), als dit nog niet geopend is. 2. Klik in het deelvenster Middelen op het pictogram Sjablonen aan de linkerkant om de lijst met sjablonen op de huidige site weer te geven. Als u zojuist de sjabloon hebt gemaakt die u wilt toepassen, moet u mogelijk op de knop Vernieuwen klikken om deze sjabloon weer te geven. 3.
Gebruik als u bestanden een naam geeft geen spaties en speciale tekens in bestands- en mapnamen. Gebruik vooral geen speciale tekens (zoals é, ç of ¥) of leestekens (zoals dubbele punten, schuine strepen of punten) in de namen van bestanden die u op een externe server wilt plaatsen. Door veel servers worden deze tekens tijdens het uploaden gewijzigd, waardoor koppelingen naar de bestanden niet meer werken. Begin een bestandsnaam ook niet met een cijfer. Een document opslaan 1.
Als u Unicode (UTF-8) selecteert als documentcodering, is eenheidscodering niet nodig, omdat UTF-8 zonder problemen alle tekens kan vertegenwoordigen. Als u een andere documentcodering selecteert, hebt u mogelijk eenheidscodering nodig voor het vertegenwoordigen van bepaalde tekens. Zie www.w3.org/TR/REC-html40/sgml/entities.html voor meer informatie over tekeneenheden.
Als u HTML- of XHTML-code wilt opruimen die niet door Microsoft Word is gegenereerd, gebruikt u de opdracht HTML opruimen. U kunt ook tekstbestanden openen die geen HTML bevatten, zoals JavaScript-bestanden, XML-bestanden, CSS-stijlpagina's of tekstbestanden die in tekstverwerkingsprogramma's of teksteditors zijn opgeslagen. 1. Selecteer Bestand > Openen. U kunt ook het deelvenster Bestanden gebruiken om bestanden te openen. 2. Ga naar het bestand dat u wilt openen en selecteer dit bestand.
De weergave van verwante bestanden wijzigen U kunt verwante bestanden op diverse manieren weergeven: Wanneer u een verwant bestand opent vanuit de ontwerpweergave of de code- en ontwerpweergave (gesplitste weergave), wordt het verwante bestand weergegeven in een gesplitste weergave boven de ontwerpweergave van het hoofddocument. U kunt Beeld > Ontwerpweergave bovenaan selecteren als u het verwante bestand liever onder in het documentvenster wilt weergeven.
Uitgeschakeld te selecteren. Dynamisch verwante bestanden detecteren 1. Open een pagina waaraan dynamisch verwante bestanden zijn gekoppeld, bijvoorbeeld de pagina index.php in de hoofdmap van een WordPress-, Drupal- of Joomla!- site. 2. Als de detectie van dynamisch verwante bestanden is ingesteld op handmatig (standaardinstelling), klikt u op de koppeling Discover op de balk Info die wordt weergegeven boven de pagina in het documentvenster.
die optie in het dialoogvenster hebt uitgeschakeld). Alle Word-specifieke opmaakcodes verwijderen Hiermee verwijdert u alle Microsoft Word-specifieke HTML-code, inclusief XML uit HTML-tags, aangepaste Word-metagegevens en koppelingstags in de kop van het document, XML-opmaakcodes van Word, voorwaardelijke tags en hun inhoud, en lege alinea's en marges uit stijlen. U kunt elk van deze opties afzonderlijk selecteren op het tabblad Gedetailleerd.
/nl/HTML5-audio invoegen(CC) Deze functie is alleen beschikbaar voor gebruikers met een Creative Cloud-abonnement of een abonnement voor een los product. Zie Adobe Creative Cloud om lid te worden van Adobe Creative Cloud. 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.
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.
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
Werken met Spry-widgets (algemene instructies) Over Spry-widgets Bronnen en zelfstudies voor Spry-widgets Een Spry-widget invoegen Een Spry-widget selecteren Een Spry-widget bewerken Een Spry-widget opmaken Meer widgets ophalen De standaardmap Spry-gegevensset Opmerking: 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.
Naar boven Een Spry-widget bewerken Selecteer de widget die u wilt bewerken en breng de wijzigingen aan in de eigenschappencontrole (Venster > Eigenschappen). Raadpleeg de desbetreffende secties voor elke widget voor details over hoe u wijzigingen aanbrengt in de specifieke widgets. Naar boven Een Spry-widget opmaken Zoek het desbetreffende CSS-bestand voor de widget in de map SpryAssets van uw site, en bewerk de CSS volgens uw voorkeuren.
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.
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 Naar boven Tekst aan een document toevoegen Als u tekst wilt toevoegen aan een Dreamweaver-document, kunt u rechtstreeks tekst in het documentvenster typen, of kunt u tekst knippen en plakken.
Er zijn heel wat andere speciale tekens beschikbaar; om er een te selecteren, selecteert u Invoegen > HTML > Speciale tekens > Overige, of klikt u op de knop Tekens in de categorie Tekst van het paneel Invoegen en selecteert u de optie Andere lettertekens. Selecteer een teken uit het dialoogvenster Andere lettertekens en klik op OK. Naar boven Witruimte toevoegen tussen tekens In HTML kan er maar één spatie tussen tekens staan.
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—Niet-geordende lijst, Geordende lijst of Definitielijst. Een geneste lijst maken 1. Selecteer de lijstitems die u wilt nesten. 2. Klik in de HTML-eigenschappencontrole op de knop Blockquote of selecteer Formaat > Inspringen.
4. Gebruik het pop-upvenster Zoeken naar om op te geven welk soort zoekopdracht u wilt uitvoeren: Broncode Hiermee zoekt u naar specifieke tekstreeksen in de HTML-broncode. U kunt met deze optie naar specifieke tags zoeken, maar zoeken met Specifieke tag biedt een flexibelere benadering voor het zoeken naar tags. Tekst Hiermee zoekt u naar specifieke tekstreeksen in de tekst van het document. Met een tekstzoekopdracht wordt HTML genegeerd waarmee de reeks wordt onderbroken.
andere tekst of tags. 1. Selecteer Bewerken > Zoeken en vervangen. 2. Selecteer in het pop-upmenu Zoeken de optie Specifieke tag. 3. Selecteer een specifieke tag of [willekeurige tag] uit het pop-upmenu naast het pop-upmenu Zoeken of typ de naam van een tag in het tekstvak. 4. (Optioneel.) U kunt de zoekopdracht beperken met een van de volgende tagaanpassingen: Met kenmerk Hiermee kunt u een kenmerk selecteren dat in de tag moet voorkomen.
Voorkeuren voor kopiëren en plakken instellen U kunt speciale voorkeuren voor plakken instellen als standaardopties als u Bewerken > Plakken gebruikt om tekst uit andere toepassingen te plakken. Als u bijvoorbeeld tekst altijd als alleen-tekst of als tekst met een basisopmaak wilt plakken, kunt u de standaardoptie instellen in het dialoogvenster met voorkeuren voor Kopiëren/Plakken. Opmerking: Als u tekst in een Dreamweaver-document plakt, kunt u de opdracht Plakken of Plakken speciaal gebruiken.
Werken met de widget Spry-knopinfo Over de knopinfo-widget De knopinfo-widget invoegen Opties voor knopinfo-widget bewerken Opmerking: 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.
U kunt opties instellen waarmee u het gedrag van de knopinfo-widget kunt aanpassen. Naam De naam van de knopinfo-container. De container bevat de inhoud van de knopinfo. Standaard gebruikt Dreamweaver een div-tag als de container. Trigger Het element op de pagina dat de knopinfo activeert. Standaard voegt Dreamweaver als trigger een tijdelijke aanduiding in de vorm van een zin in, omgeven door span-tags, maar u kunt elk element op de pagina met een unieke id selecteren.
Werken met de widget Spry-deelvensters met tabs Over de widget deelvensters met tabs De widget deelvensters met tabs invoegen en bewerken De widget deelvensters met tabs aanpassen Opmerking: 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.
De volgorde van panelen wijzigen 1. Selecteer een widget deelvensters met tabs in het documentvenster. 2. Open het menu Panelen van de eigenschappencontrole (Venster > Eigenschappen) en selecteer de naam van het paneel dat u wilt verplaatsen. 3. Klik op de pijlen omhoog of omlaag om het paneel omhoog of omlaag te verplaatsen. Het standaard geopende paneel instellen U kunt instellen welk deelvenster van de widget deelvensters met tabs standaard is geopend wanneer de pagina in een browser wordt geopend. 1.
Achtergrondkleur van geselecteerde tab Achtergrondkleur van paneeltabs wanneer de muisaanwijzer eroverheen beweegt .TabbedPanelsTabSelected .TabbedPanelsTabHover background-color: #EEE; (Dit is de standaardwaarde) background-color: #CCC; (Dit is de standaardwaarde.) De breedte van deelvensters met tabs beperken Standaard wordt de widget deelvensters met tabs opengeklapt zodat de beschikbare ruimte geheel in beslag wordt genomen.
Over het Spry-framework Opmerking: 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. Het Spry-framework is een JavaScript-bibliotheek met behulp waarvan webontwerpers webpagina's kunnen bouwen die de bezoekers een prettiger ervaring geven. Met Spry kunt u HTML, CSS en een minimale hoeveelheid JavaScript gebruiken om XML-gegevens op te nemen in uw HTML-documenten.
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.
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. Zo kunt u wijzigen of de standaardinstelling van de inhoud moet worden weergegeven of niet, een parameter koppelen aan een optioneel gebied of een sjabloonexpressie wijzigen.
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.
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.
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.
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.
behouden. 4. Als u wijzigingen aan eerder geëxporteerde bestanden wilt bijwerken, selecteert u Alleen gewijzigde bestanden extraheren en klikt u op OK.
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 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.
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.
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. Sla de sjabloon op. Dreamweaver vraagt u om de op de sjabloon gebaseerde pagina's bij te werken. 5.
6. Klik op Sluiten. Naar boven Sjablonen bijwerken op een Contribute-site Gebruikers van Contribute kunnen geen wijzigingen aanbrengen aan een Dreamweaver-sjabloon. Ze kunnen Dreamweaver echter wel gebruiken om een sjabloon voor een Contribute-site te wijzigen.
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.
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. Werk op de sjabloon gebaseerde documenten bij.
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.
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.
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. Rand Hiermee wordt de breedte van de tabelranden in pixels vastgelegd.
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.
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.
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 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.
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.
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. Sjabloonwijzigingen ongedaan maken Selecteer Bewerken > Toepassen sjabloon ongedaan maken. Het document wordt teruggebracht naar de toestand voordat de sjabloon werd toegepast.
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.
naar de juiste bestanden te laten verwijzen. Als u een nieuwe documentafhankelijke relatieve koppeling toevoegt aan een sjabloonbestand, bestaat het gevaar dat u een onjuiste padnaam opgeeft als u in het tekstvak voor de koppeling in de eigenschappencontrole het pad typt. Het correcte pad in een sjabloonbestand is het pad van de map Sjablonen naar het gekoppelde document, niet het pad van de map van het op een sjabloon gebaseerde document naar het gekoppelde document.
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. Ze moeten een van de vijf toegestane gegevenstypen zijn: text (tekst), boolean (Booleaans), color (kleur), URL of number (getal).
deze eigenschap buiten een genest herhaald gebied leidt tot een foutsituatie. Tijdens de beoordeling van een expressie zijn alle velden van het object _document en het object _repeat impliciet beschikbaar. Zo kunt u title opgeven in plaats van _document.title voor toegang tot de titelparameter van het document. In gevallen waarin sprake is van een conflict tussen velden, krijgen velden van het object _repeat voorrang op velden van het object _document.
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
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. Als u een XSLT-fragment maakt, maakt u een onafhankelijke bestand dat geen body- of head-code bevat; een eenvoudig stukje code dat later wordt ingevoegd in een dynamische pagina. Opmerking: Als u begint met een bestaande XSLT-pagina, moet u daar een XML-gegevensbron aan koppelen.
.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. Klik op de XML-koppeling in het paneel Bindingen (Venster > Bindingen). Opmerking: U kunt ook op de koppeling Bron klikken rechtsboven in het paneel Bindingen om een XML-gegevensbron toe te voegen. 2.
de tijdelijke aanduiding voor de dynamische inhoud rss/channel/item/title. Dubbelklik op de tijdelijke aanduiding voor XML-gegevens op de pagina om de expressiebouwer voor XPath te openen. Met de expressiebouwer voor XPath kunt u geselecteerde gegevens opmaken en andere items in het XML-schema selecteren. 4.
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. Als u het Herhalingsgebied XSLT-object aan de pagina toevoegt, wordt de lengte van de tijdelijke aanduiding voor de XML-gegevens in het documentvenster ingekort.
op de pagina hebt geplaatst, om te zorgen dat de invoegpositie op de juiste plaats staat. Als dat niet het geval is, kunt u elders in codeweergave klikken om de invoegpositie op de gewenste plaats te zetten. 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.
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.
Dynamische gegevens in en klikt u op OK. Klik op Help in het dialoogvenster Dynamische gegevens voor 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.
resultaten testen. Zie de sectie in het paneel Referentie (Help > Referentie) voor meer informatie en voorbeelden desbetreffende het schrijven van voorwaardelijke expressies. Meervoudige voorwaardelijke XSLT-gebieden toepassen U kunt een enkelvoudige voorwaardelijke expressie schrijven en in uw XSLT-pagina invoegen. Als de inhoud geselecteerd is wanneer u het dialoogvenster Voorwaardelijk gebied opent, wordt de inhoud door een -blok omsloten.
Eigenschappen voorwaarden (When) instellen Doel van de eigenschappencontrole Voorwaardelijk gebied instellen is het wijzigen van de in een voorwaardelijk gebied van uw XSL-pagina gebruikte meervoudige voorwaarde. Het meervoudige 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: 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.
Te herhalen knooppunt selecteren U kunt een knooppunt selecteren om te herhalen en de resultaten eventueel filteren. In het dialoogvenster Expressiebouwer voor XPath wordt de geselecteerde inhoud omsloten binnen een -blok. Als u geen inhoud hebt geselecteerd, wordt het -blok ingevoerd op de plaats van de invoegpositie. 1. Dubbelklik op de tijdelijke aanduiding voor XML-gegevens op de pagina om de expressiebouwer voor XPath te openen. 2.
Als u op OK klikt, wordt de volgende code op uw XSLT-pagina ingevoegd. Content goes here Opmerking: Tekenreekswaarden als “true" moet u tussen aanhalingstekens plaatsen. Dreamweaver codeert de aanhalingstekens voor u (') zodat deze als geldige XHTML worden ingevoerd. U kunt meer complexe filters maken waarmee u bovenliggende knooppunten kunt opgeven als deel van uw filtercriteria.
Als u op OK klikt, wordt de volgende code op uw XSLT-pagina ingevoegd. 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.
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.
In het voorbeeld voert u de volgende eenheidtag in: 4. Sla uw bestand op. Als u herhaaldelijk dezelfde tekeneenheden gebruikt, kunt u de definities daarvoor permanent opnemen in de XSL-bestanden die Dreamweaver standaard maakt wanneer u Bestand > Nieuw kiest. Eenheiddefinities toevoegen aan de XSL-bestanden die Dreamweaver standaard maakt 1.
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.
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.
Naar boven jQuery-effecten verwijderen 1. Selecteer het gewenste pagina-element. In het deelvenster Gedrag worden alle effecten weergegeven die momenteel zijn toegepast op het geselecteerde pagina-element. 2. Klik op het effect dat u wilt verwijderen en klik vervolgens op . De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.
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.
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. Koppelingen herstellen in het paneel Koppelingencontrole 1. Voer een koppelingencontrole uit. 2.
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.
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
Het pad naar het gekoppelde document wordt weergegeven in het vak URL. In het vervolgkeuzemenu Ten opzichte van in het dialoogvenster HTML-bestand selecteren kunt u instellen of het pad document- of hoofdmapafhankelijk is. Klik vervolgens op Selecteer. Het geselecteerde padtype geldt alleen voor de huidige koppeling. (U kunt de standaardinstellingen wijzigen in het vak Ten opzichte van in de site-instellingen.) Typ het pad en de bestandsnaam van het document in het vak 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. Relatieve paden instellen voor nieuwe koppelingen Naar boven Dreamweaver maakt voor koppelingen naar andere pagina's in uw site standaard gebruik van documentafhankelijke relatieve paden. Als u hoofdmapafhankelijke relatieve paden wilt gebruiken, moet u eerst een locale map in Dreamweaver definiëren als equivalent aan de hoofdmap op de server.
Sleep het pictogram Wijs bestand aan (doelpictogram) aan de rechterzijde van het vak Koppeling in de eigenschappencontrole naar het anker waarnaar u een koppeling wilt maken. Dit kan een anker binnen hetzelfde document of een anker in een ander open document zijn. Houd Shift ingedrukt terwijl u in het documentvenster sleept van de geselecteerde tekst of afbeelding naar het anker waarnaar u een koppeling wilt maken. Dit kan een anker binnen hetzelfde document of een anker in een ander open document zijn.
Dreamweaver brengt geen wijzigingen aan in de externe map totdat u de lokale bestanden op de externe server plaatst of incheckt. Dreamweaver kan een cachebestand maken waarin gegevens over alle koppelingen in uw lokale map zijn opgeslagen zodat het bijwerken sneller verloopt. Het cachebestand wordt op de achtergrond bijgewerkt wanneer u koppelingen in uw lokale site toevoegt, wijzigt of verwijdert. Koppelingen automatisch bijwerken inschakelen 1.
verwijderen en gewijzigde bestanden handmatig plaatsen of inchecken. Als u dat niet doet, worden uw wijzigingen niet zichtbaar voor bezoekers van uw site. 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.
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.
Naar boven Problemen met snelmenu's oplossen Wanneer een gebruiker een snelmenuonderdeel selecteert, kan er geen nieuwe keuze worden gemaakt in dat menu wanneer de gebruiker terugbladert naar de pagina of wanneer het vak URL's openen in naar een frame verwijst. Dit probleem kunt u op twee manieren oplossen: Gebruik een selectieverzoek zoals een beschrijving of een instructie (bijvoorbeeld “Maak een keuze").
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).
browsers wordt deze tekst weergegeven als knopinfo wanneer de gebruiker de muisaanwijzer boven de hotspot houdt. 8. Herhaal stap 4 tot en met 7 als u meer hotspots wilt definiëren in de afbeelding met hyperlinks. 9. Wanneer u alle hotspots hebt aangebracht in de afbeelding, klikt u in een leeg gebied in het document om de eigenschappencontrole te herstellen. Hotspots in afbeeldingen met hyperlinks aanpassen Naar boven U kunt de gedefinieerde hotspots in een afbeelding met hyperlinks gemakkelijk bewerken.
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.
Code schrijven en bewerken Coderingstips Tips voor sitespecifieke code Code invoegen met de werkbalk Codering Code invoegen met het paneel Invoegen Tags invoegen met de tagkiezer HTML-commentaar invoegen Code kopiëren en plakken Tags bewerken met tageditors Code bewerken met het contextmenu Coderen Een servertaaltag bewerken met de eigenschappencontrole Codeblokken inspringen Naar gerelateerde code navigeren Naar een JavaScript- of VBScript-functie gaan JavaScript uitpakken Werken met codefragmenten Zoeken
jQuery (CS5.5 en hoger) JavaScript (bevat tips voor aangepaste klassen) JSP PHP MySQL Spry Een menu met coderingstips weergeven Het menu met coderingstips wordt automatisch weergegeven wanneer u in de weergave Code typt. U kunt het menu met coderingstips echter ook handmatig weergeven zonder te typen. 1. Daartoe plaatst u in de weergave Code (Venster > Code) de invoegpositie in een tag. 2. Druk op Ctrl+spatiebalk. Code in de codeweergave invoegen door coderingstips te gebruiken 1.
U kunt de standaardvoorkeuren voor coderingstips wijzigen. Als u bijvoorbeeld geen CSS-eigenschapsnamen 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.
opnemen in de scan voor een bepaald bestand of een bepaalde map. Sitestructuur opslaan U kunt de aangepaste sitestructuur opslaan die u hebt gemaakt in het dialoogvenster Tips voor sitespecifieke code. 1. Maak de gewenste structuur van bestanden en mappen door de benodigde bestanden en mappen toe te voegen of bestanden en mappen te verwijderen. 2. Klik op de knop Structuur opslaan in de rechterbovenhoek van het dialoogvenster. 3. Geef een naam op voor de sitestructuur en klik op Opslaan.
deze knop klikt terwijl u Ctrl ingedrukt houdt, wordt de optie “intelligent samenvouwen” uitgeschakeld, waardoor Dreamweaver de inhoud die wordt samengevouwen buiten de volledige tags, niet wordt aangepast. Zie Code samenvouwen voor meer informatie. Selectie samenvouwen Hiermee vouwt de geselecteerde code samen. U kunt ook de code buiten de selectie samenvouwen door op de knop Selectie samenvouwen te klikken terwijl u Alt (Windows) of Option (Macintosh) ingedrukt houdt.
1. Plaats de invoegpositie in de code. 2. Selecteer de gewenste categorie in het paneel Invoegen. 3. Klik op een knop in het paneel Invoegen of selecteer een item in een pop-upmenu van het paneel Invoegen. Wanneer u klikt op een pictogram, verschijnt de code direct op de pagina of verschijnt er een dialoogvenster waarin u om meer informatie wordt gevraagd om de code te voltooien. Als u de functie van een knop wilt achterhalen, plaatst u de aanwijzer op de knop totdat de knopinfo wordt weergegeven.
2. Plaats de invoegpositie in de codeweergave en selecteer Bewerken > Plakken. Naar boven Tags bewerken met tageditors U gebruikt tageditors om de kenmerken van tags te bekijken, op te geven en te bewerken. 1. Klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) op een tag in de codeweergave of op een object in de ontwerpweergave en selecteer Tag bewerken in het pop-upmenu. (De inhoud van dit dialoogvenster hangt af van de geselecteerde tag.) 2.
Converteren naar hoofdletters Hiermee converteert u alle letters in de selectie (met inbegrip van namen en waarden van tags en kenmerken) naar hoofdletters. Converteren naar kleine letters Hiermee converteert u alle letters in de selectie (met inbegrip van namen en waarden van tags en kenmerken) naar kleine letters. Tags converteren naar hoofdletters Hiermee converteert u alle namen van tags en kenmerken en alle waarden van kenmerken in de selectie naar hoofdletters.
2. Klik op het stukje code waar u naartoe wilt gaan. De codenavigator groepeert gerelateerde codebronnen per bestand en geeft de bestanden in alfabetische volgorde weer. Stel dat CSS-regels in drie externe bestanden invloed hebben op de selectie in uw document. In dat geval geeft de codenavigator deze drie bestanden weer plus de CSS-regels die relevant zijn voor de selectie. Voor CSS die betrekking hebben op een gegeven selectie, werkt de codenavigator net als het deelvenster CSS-stijlen in Huidige modus.
2. Kies Opdrachten > JavaScript extern maken. 3. Bewerk indien nodig de standaardselecties van het dialoogvenster JavaScript extern maken. Selecteer Alleen JavaScript extern maken als u wilt dat Dreamweaver alle JavaScript naar een extern bestand verplaatst, en in het huidige document een verwijzing naar dit bestand opneemt. Bij deze optie blijven gebeurtenishandlers, zoals onclick en onload in het document en blijven gedragingen zichtbaar in het paneel Gedrag.
5. (Optioneel) Selecteer een type voorvertoning: Code of Ontwerp. Ontwerp Hiermee geeft u op dat de code moet worden gerenderd en moet worden weergegeven in het deelvenster Voorvertoning van het paneel Fragmenten. Code Hiermee geeft u op dat de code moet worden weergegeven in het deelvenster Voorvertoning. 6. Klik op OK. Een codefragment bewerken of verwijderen Selecteer een fragment in het paneel Fragmenten en klik op de knop Fragment bewerken of Verwijderen onder in het paneel.
1. Selecteer Bewerken > Zoeken en vervangen. 2. Klik op de knop Query laden (het mappictogram). 3. Navigeer naar de map waarin uw query's zijn opgeslagen. Selecteer een querybestand en klik op Openen. 4. Klik op Volgende zoeken, Alles zoeken, Vervangen of Alles vervangen om de zoekopdracht te starten. Naar boven Taalspecifiek referentiemateriaal gebruiken Het paneel Referentie vormt een snel naslaghulpmiddel voor opmaaktalen, programmeertalen en CSS-stijlen.
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.
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.
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.
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 titel wordt weergegeven in de titelbalk van het documentvenster in Dreamweaver en in de titelbalk van de meeste browsers wanneer u de pagina in de browser bekijkt. De titel wordt ook weergegeven op de werkbalk van het documentvenster.
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.
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.
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.
Codeervoorkeuren instellen Codeervoorkeuren Het uiterlijk van de code instellen De codeopmaak wijzigen Voorkeuren voor het herschrijven van code instellen Codekleuren instellen Een externe editor gebruiken Naar boven Codeervoorkeuren U kunt naar eigen behoefte coderingsvoorkeuren instellen, zoals coderingsopmaak en -kleurgebruik. Opmerking: Als u geavanceerde voorkeuren wilt instellen, gebruikt u de tagbibliotheek-editor (zie Tagbibliotheken beheren).
Opmerking: De meeste van de inspringingsopties in dit dialoogvenster zijn alleen van toepassing op code die Dreamweaver genereert, niet op code die u zelf typt. Als u wilt dat elke nieuwe regel code die u typt, inspringt tot hetzelfde niveau als de vorige regel, selecteert u Weergave > Codeweergaveopties > Automatisch inspringen. Zie Het uiterlijk van de code instellen voor meer informatie.
Namen van formulieritems wijzigen als deze worden geplakt Hiermee voorkomt u dubbele namen voor formulierobjecten. Deze optie is standaard ingeschakeld. Opmerking: In tegenstelling tot de andere opties in dit voorkeurenvenster wordt deze optie niet toegepast wanneer u een document opent, maar alleen wanneer u een formulierelement kopieert en plakt. Extra afsluitende tags verwijderen Hiermee verwijdert u eindtags waarvoor geen bijbehorende begintag aanwezig is.
Gewijzigde bestanden opnieuw laden Hiermee geeft u op wat er moet gebeuren wanneer Dreamweaver detecteert dat er extern wijzigingen zijn aangebracht in een document dat in Dreamweaver is geopend. Opslaan bij het starten Hiermee geeft u op of Dreamweaver het huidige document altijd moet opslaan voordat de editor wordt gestart, het document nooit moet opslaan of u moet vragen of het document moet worden opgeslagen telkens wanneer u de externe editor start.
Code optimaliseren en fouten opsporen Code opschonen Controleren of tags en haakjes in evenwicht zijn Controleren op browsercompatibiliteit XML-documenten valideren Documenten valideren met W3C-validatie (CS5.5) Voorkeuren voor de validatiefunctie instellen Pagina's XHTML-compatibel maken De ColdFusion-foutopsporing gebruiken (alleen Windows) Naar boven Code opschonen U kunt automatisch lege tags verwijderen, geneste font-tags combineren en rommelige of onleesbare HTML- of XHTML-code verbeteren.
1. Open het document in de codeweergave. 2. Plaats de invoegpositie in de geneste code die u wilt controleren. 3. Selecteer Bewerken > Bovenliggende tag selecteren. De omsluitende bijbehorende tags (en de inhoud ervan) worden in de code geselecteerd. Als u Bewerken > Bovenliggende tag selecteren blijft selecteren en de tags in evenwicht zijn, zal Dreamweaver uiteindelijk de buitenste html- en /html-tags selecteren. Controleren op evenwichtige ronde of vierkante haakjes of accolades 1.
3. Kies Bestand > Valideren > Livedocument valideren (W3C). 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. Kies Venster > Resultaten > W3C-validatie. 2. Klik op het afspeelpictogram van de W3C-validatie in het deelvenster W3C-validatie. Selecteer Instellingen. 3.
2. Selecteer een categorie en een type pagina dat u wilt maken. 3. Selecteer een van de XHTML-documenttypedefinities (DTD) in het pop-upmenu DocType uiterst rechts in het dialoogvenster en klik op Maken. U kunt een HTML-document bijvoorbeeld XHTML-compatibel maken door XHTML 1.0 Transitional of XHTML 1.0 Strict te selecteren in het pop-upmenu Opmerking: Niet alle documenttypen kunnen XHTML-compatibel worden gemaakt. Standaard XHTML-compatibele documenten maken 1.
op de pagina worden gevonden, verschijnt de categorie Uitzonderingen niet meer in het paneel. 6. U verlaat de foutopsporingsmodus door te schakelen naar de codeweergave (Weergave > Code) of de ontwerpweergave (Weergave > Ontwerp).
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.
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.
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. Open de tagbibliotheek-editor (Bewerken > Tagbibliotheken). 3. Klik op de plusknop (+) en selecteer JSP > JRun Server-tags importeren uit map. 4. Typ een mapnaam voor de map met de JRun-tags. 5. Voer een URI in die de tagbibliotheek identificeert.
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.
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. Naar boven XHTML-code Dreamweaver genereert nieuwe XHTML-code en schoont bestaande XHTML-code zodanig op dat deze voldoet aan de meeste XHTML-vereisten.
juiste vorm is en bij het opschonen van XHTML. Inleiding of Inleiding. Voor kenmerken met opsommingswaarden moeten de waarden in kleine letters worden weergegeven. Een opsommingswaarde is een waarde in een opgegeven lijst van toegestane waarden. Het kenmerk align heeft bijvoorbeeld de volgende toegestane waarden: center, justify, left en right. Alle script- en stijlelementen moeten het kenmerk type hebben.
[^abc] Elk teken dat niet tussen de haakjes staat. U kunt een tekenbereik opgeven met een koppelteken (bijvoorbeeld [^a-f] komt overeen met [^abcdef]). Met [^aeiou] vindt u in eerste instantie “r” in “oranje”, “b” in “boek” en “k” in “eikel” \b Een woordgrens (zoals een spatie of regeleinde). Met \bb vindt “b” in “boek” maar niets in “ober” of “snob” \B Alles behalve een woordgrens. Met \Bb vindt u “b” in “ober” maar niets in “boek” \d Elk cijfer. Equivalent met [0-9].
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
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. Met de tagcontrole kunt u tags en objecten bewerken via een eigenschappenblad dat vergelijkbaar is met dat van andere geïntegreerde ontwikkelomgevingen (IDE's). 1.
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. De tag wordt in de code ingevoegd, samen met de bijbehorende eindtag, indien van toepassing. 4. Druk op Escape als u de editor wilt sluiten zonder wijzigingen aan te brengen.
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. Als u het menu met tips wilt uitschakelen, schakelt u de optie Coderingstips inschakelen uit. 3.
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. Selecteer de scriptmarkering. 2. Klik in de eigenschappencontrole op de knop Bewerken. Het script verschijnt in het dialoogvenster Scripteigenschappen.
Code samenvouwen Code samenvouwen Codefragmenten samenvouwen en uitvouwen Samengevouwen codefragmenten plakken en verplaatsen Naar boven Code samenvouwen U kunt codefragmenten samenvouwen en uitvouwen, zodat u verschillende delen van uw document kunt bekijken zonder de schuifbalk te moeten gebruiken.
Samengevouwen codefragmenten plakken en verplaatsen Naar boven U kunt samengevouwen codefragmenten kopiëren en plakken. U kunt samengevouwen codefragmenten verplaatsen door ze te verslepen. Een samengevouwen codefragment kopiëren en plakken 1. Selecteer het samengevouwen codefragment. 2. Selecteer Bewerken > Kopiëren. 3. Plaats de invoegpositie op de locatie waar u de code wilt plakken. 4. Selecteer Bewerken > Plakken.
Mobiel en meerdere schermen Mobiele pagina's maken met Dreamweaver CS5.5 David Karlins (03 augustus 2011) zelfstudie David Karlins, auteur ‘Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques’ (Procedures voor Adobe Creative Suite 5 Web Premium: 100 essentiële technieken), bespreekt de Dreamweaver-technieken waarmee u webpagina's voor mobiele apparaten op basis van jQuery JavaScript kunt maken.
Webtoepassingen verpakken als systeemeigen mobiele toepassingen met PhoneGap Build Over PhoneGap Build en Dreamweaver Een PhoneGap Build-serviceaccount maken De ontwikkelomgeving instellen De PhoneGap Build-add-on installeren Mobiele toepassingen verpakken met PhoneGap Build Naar boven Over PhoneGap Build en Dreamweaver PhoneGap Build is een cloudservice waarmee u uw webtoepassingen kunt verpakken als systeemeigen mobiele toepassingen.
Naar boven De PhoneGap Build-add-on installeren Voordat u in Dreamweaver de PhoneGap Build-service kunt gebruiken, moet u de PhoneGap Build-add-on installeren. Ga naar Venster > Bladeren in Add-ons om de add-on te installeren. De pagina Adobe Creative Cloud Add-Ons wordt weergegeven. Ga naar de PhoneGap Build-add-on en volg de instructies op het scherm om de add-on te installeren.
Pas de identiteit van uw toepassing aan door de inhoud van dit bestand te bewerken. Als u dit niet doet, krijgen al uw toepassingen dezelfde standaardnaam. Raadpleeg de documentatie van PhoneGap Build voor meer informatie over het werken met het bestand config.xml. 7. Sla het bewerkte bestand config.xml op en sluit het bestand. Klik vervolgens op de knop Opnieuw samenstellen in het deelvenster PhoneGap Build-service.
Opmerking: QR-codes zijn niet beschikbaar voor iOS-toepassingen zonder sleutels voor ondertekening. 1. Klik in het deelvenster PhoneGap Build-service op de QR-code van de toepassing die u wilt downloaden. 2. Start de QR-codelezer op uw mobiele apparaat en scan de QR-code. 3. Nadat de toepassing is gedownload, kunt u deze rechtstreeks starten op uw apparaat. 4. Klik op de knop Terug naar deelvenster Samenstellen om terug te keren naar de lijst met samengestelde toepassingen.
Webtoepassingen verpakken Webtoepassingen verpakken als systeemeigen mobiele toepassingen (CS5.5 en hoger) Webtoepassingen verpakken als systeemeigen mobiele toepassingen (CS5.5 en hoger) Naar boven Dankzij de integratie van Dreamweaver met jQuery Mobile en PhoneGap kunt u webtoepassingen maken en verpakken voor distributie op Android™- en iOS-apparaten. Dreamweaver gebruikt PhoneGap SDK's om het pakket te maken (bestand .apk voor Android en bestand .
Android SDK (installatie-instructies verderop). Een toepassingspakket maken (Windows) Bekijk deze zelfstudie op Dreamweaver Developer Center voor met informatie, inclusief voorbeeldbestanden, over het maken van een webtoepassing. 1. Open de webtoepassing die u wilt converteren naar een mobiele toepassing. Zorg dat uw webtoepassing is ingesteld als een site in Dreamweaver en dat de site kleiner is dan 25 MB. Opmerking: Controleer of de toepassing alleen HTML5-, CSS- en JavaScript-bestanden bevat. 2.
Dreamweaver wijzigt het pictogramformaat in het standaardformaat als u het formaat nog niet hebt aangepast. (Mac® OS 10.6.x) Geef bij PNG van startpagina een PNG-bestand op dat wordt gebruikt als pictogram voor de iOS-toepassing. Dreamweaver wijzigt het pictogramformaat in het standaardformaat als u het formaat nog niet hebt aangepast. (Mac OS 10.6.x) Selecteer een versie van de iPhone/iPod Touch/iPad waarvoor u het pakket maakt. Geef een ander doelpad voor het pakket op.
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.
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 geeft de mediaquery het bestand phone.css op voor apparaten met een breedte van 300-320 pixels. PAGE 515
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. Bijvoorbeeld telefoon, televisie, tablet enzovoort.
5. Klik op Bladeren bij Mediaquerybestand voor de hele site om het CSS-bestand voor mediaquery's te selecteren. Opmerking: als u het mediaquerybestand voor de hele site wijzigt, heeft dit geen invloed op documenten die zijn gekoppeld aan een ander of eerder mediaquerybestand voor de hele site. 6. Klik op Opslaan.
Paginaoriëntatie voor mobiele apparaten wijzigen(CS5.5 en hoger) 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. Wanneer de gebruiker het apparaat in horizontale richting draait, wordt de pagina automatisch aangepast aan de afmetingen voor de liggende oriëntatie.
Webtoepassingen voor mobiele apparaten maken (CS5.5, CS6) Over het maken van een webtoepassing met jQuery Mobile Startpagina's gebruiken om een toepassing voor mobiele apparaten te maken Een webtoepassing voor mobiele apparaten maken met een nieuwe pagina Dankzij de integratie van Dreamweaver met jQuery Mobile kunt u snel een webtoepassing ontwerpen die geschikt is voor de meeste apparaten en automatisch wordt aangepast aan de schermafmetingen van het apparaat.
Pagina uit voorbeeld > Mobiele starters > jQuery Mobile (CDN). Pagina uit voorbeeld > Mobiele starters > jQuery Mobile (lokaal). Pagina uit voorbeeld > Mobiele starters > jQuery Mobile met thema (lokaal). 3. Klik op Maken. Schakel de optie Koppelingen continu volgen (Beeld > Live View-opties) in op de pagina die wordt weergegeven en schakel over naar Live View. Gebruik de navigatieonderdelen om de werking van de toepassing te testen.
2. Sla het bestand op in de kernmap die de overige bronnen bevat. 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.com/Downloading_jQuery Twitter™ and Facebook posts are not covered under the terms of Creative Commons.
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.
De code die in de live codeweergave wordt weergegeven, komt overeen met de code die u zou zien als u de paginabron vanuit een browser zou openen. Dergelijke paginabronnen zijn statisch, en tonen alleen de bron van de pagina vanuit de browser. De live codeweergave is echter dynamisch, en wordt bijgewerkt op basis van uw interacties met de pagina in Live View. 1. Zorg ervoor dat u zich in Live View bevindt. 2. Klik op de knop Live code.
HTTP-aanvraaginstellingen Kies deze optie om een dialoogvenster met geavanceerde instellingen te openen waarin u waarden kunt invoeren voor de weergave van live gegevens. Klik op in het dialoogvenster op Help voor meer informatie. Naar boven Pagina's voorvertonen in browsers Voorvertoning in een browser U kunt op elk moment een pagina in een browser voorvertonen. U hoeft de pagina niet eerst naar de server te uploaden.
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.
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.
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. Een statische webpagina is een webpagina die niet verandert als een sitebezoeker de pagina opvraagt: de webserver verzendt de pagina ongewijzigd naar de desbetreffende webbrowser.
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.
Hier volgt een eenvoudige databasequery in SQL: 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. In het volgende voorbeeld ziet u hoe de query voor de database wordt uitgevoerd en de gegevens naar de browser worden geretourneerd: 1.
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. De toepassingsserver retourneert de volgende pagina aan de webserver:
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. Een dynamische pagina Een webpagina die door een toepassingsserver wordt aangepast voordat de pagina naar een browser wordt verzonden.
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.
gekozen aandelenprijzen weergeven op basis van op de beurs gebruikte symbolen die de gebruiker eerder heeft gekozen. Ontwikkelaars van webtoepassingen gebruiken doorgaans URL-parameters om de waarden binnen toepassingen door te geven aan variabelen. U kunt bijvoorbeeld zoektermen doorgeven aan SQL-variabelen in een webtoepassing om zo zoekresultaten te genereren.
ColdFusion-componenten gebruiken Over 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.
2. Selecteer in het paneel Componenten (Venster > Componenten) CF-componenten in het pop-upmenu. 3. Klik op de plusknop (+) en vul het dialoogvenster Componenten maken in. Klik op OK a. Voer in de sectie Componenten de details over de component in. Hier volgt een gedeeltelijke lijst: Naam Hier geeft u de bestandsnaam van de component op. De naam mag alleen alfanumerieke tekens en het onderstrepingsteken (_) bevatten. Geef de bestandsextensie .CFC niet op wanneer u de naam invoert.
Functies die geen argumenten hebben, hebben geen plusknop (+). Als u snel de details van een argument, functie, component of pakket wilt bekijken, selecteert u het item in de structuurweergave en klikt u op de knop Details ophalen op de paneelwerkbalk. U kunt ook met de rechtermuisknop (Windows) of Control (Macintosh) ingedrukt op het item klikken en Details ophalen in het popupmenu kiezen. Details over het item worden in een berichtvak weergegeven.
Naar boven Een recordset definiëren in een CFC Dreamweaver kan u helpen bij het definiëren van een recordset (ook wel een ColdFusion-query genoemd) in een ColdFusion-component (CFC). Als u een recordset in een CFC definieert, hoeft u de recordset niet te definiëren op elke pagina die deze gebruikt. U definieert de recordset eenmaal in de CFC en gebruikt de CFC op verschillende pagina's.
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.
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.
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. Zie de volgende technische notities in het Support Center van Adobe voor meer informatie over de IUSR-account en de webserverrechten: 'Understanding anonymous authentication and the IUSR account' op www.adobe.
beveiliging gebruikt). Hieronder vindt u een aantal mogelijke oplossingen: Als u standaardbeveiliging gebruikt, kloppen de accountnaam en het wachtwoord misschien niet. Probeer de account Admin en het bijbehorende wachtwoord van het systeem (UID= “sa” en geen wachtwoord), die moeten worden gedefinieerd op de regel van de verbindingstekenreeks. (In DSN's worden geen gebruikersnamen en wachtwoorden opgeslagen.
overeenstemmen met het masker. U kunt dit probleem verhelpen door het gebruik van woorden als “date”, “name”, “select”, “where” en “level” te vermijden wanneer u kolomnamen opgeeft in uw database. Ook mag u geen spaties en andere speciale tekens gebruiken. Zie de volgende webpagina's voor lijsten met gereserveerde woorden voor algemene databasesystemen: Microsoft Access op http://support.microsoft.com/default.aspx?scid=kb;nl-nl;Q209187 Microsoft SQL Server op http://msdn.microsoft.com/library/default.
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
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.html Opmerking: Een andere expressie die u kunt gebruiken in plaats van de servernaam of localhost, is 127.0.0.1 (bijvoorbeeld http://127.0.0.1/vakantie/zon.html).
Naar boven Een ColdFusion-ontwikkelomgeving instellen Ga naar de Adobe-website op www.adobe.com/devnet/dreamweaver/articles/setup_cf.html voor gedetailleerde instructies voor het instellen van een ColdFusion-ontwikkelomgeving voor Dreamweaver op uw Windows- of Mac-computer. Zowel Windows- als Macintosh-gebruikers kunnen vanaf de Adobe-website op www.adobe.com/go/coldfusion_nl gratis een volledig functionele ontwikkelaarsversie van de ColdFusion-toepassingsserver downloaden en installeren.
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.htm (waarbij MijnGebruikersnaam uw Macintosh-gebruikersnaam is) Opmerking: Standaard werkt de ColdFusion-webserver via poort 8500 en de Apache-webserver voor Windows via poort 80.
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. Een map of site op de server beveiligen (ColdFusion) Naar boven In Dreamweaver kunt u een specifieke map in uw ColdFusion-toepassing met een wachtwoord beveiligen, ook de hoofdmap van de toepassing.
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
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. U kunt dynamische pagina's snel in een browser bekijken. U hoeft ze daarvoor niet eerst handmatig op een server te laden (druk op F12). Als u dynamische pagina's wilt bekijken, moet u eerst de categorie Testserver van het dialoogvenster Sitedefinitie invullen.
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.
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. Formulierparameters slaan opgehaalde informatie op die in de HTTP-aanvraag voor een webpagina is opgenomen. Als u een formulier maakt dat de methode POST gebruikt, worden de gegevens die door het formulier zijn verzonden, doorgegeven aan de server.
pagina. De HTML-syntaxis hiervoor ziet er als volgt uit:
Zowel de gebruiker servertechnologie als de methode die u gebruikt voor het in bezit krijgen van de informatie, bepaalt de code die wordt gebruikt voor de opslag van de informatie in een sessievariabele. De basissyntaxis voor elke servertechnologie is als volgt: ColdFusion
Boven aan de bestemmingspagina voert u de volgende code in om een sessie met de naam font_pref te maken waarin de voorkeur voor de tekstgrootte van de gebruiker wordt opgeslagen. ColdFusion ASP <% Session("font_pref") = Request.QueryString("fontsize") %> Wanneer de gebruiker op de hypertextkoppeling klikt, verzendt de pagina de tekstvoorkeur van de gebruiker in een URL-parameter naar de doelpagina.
Panelen voor dynamische inhoud Bindingen, paneel Servergedrag, paneel Paneel Databases Paneel Componenten Naar boven Bindingen, paneel In het paneel Bindingen definieert en bewerkt u bronnen met dynamische inhoud, voegt u dynamische inhoud aan een pagina toe en past u gegevensindelingen op dynamische tekst toe.
Naar boven Paneel Databases Gebruik het paneel Databases om databaseverbindingen te maken, databases te bekijken en aan databases gerelateerde code op uw pagina's in te voegen.
Databaserecords weergeven Over 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 gedef
Met recordsetnavigatiekoppelingen kunnen gebruikers van de ene record naar de volgende, of van de ene set records naar de volgende gaan. Als u een pagina bijvoorbeeld hebt ontworpen om vijf records tegelijk weer te geven, kunt u de koppelingen Volgende of Vorige toevoegen waarmee gebruikers de volgende of vorige vijf records kunnen weergeven. U kunt vier typen navigatiekoppelingen maken om door een recordset te navigeren: Eerste, Vorige, Volgende en Laatste.
De koppelingen in de ontwerpweergave op de pagina plaatsen; Afzonderlijk servergedrag aan elke navigatiekoppeling toewijzen; In deze sectie wordt beschreven hoe u afzonderlijk servergedrag aan de navigatiekoppelingen kunt toekennen. Servergedrag maken en aan een navigatiekoppeling toekennen. 1. Selecteer in de ontwerpweergave de tekenreeks of afbeelding op de pagina die u als recordnavigatiekoppeling wilt gebruiken. 2. Open het paneel Servergedrag (Venster > Servergedrag) en klik op de plusknop (+). 3.
Weergeven indien laatste pagina Weergeven indien niet laatste pagina 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.
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.
Aangepaste recordtellers maken U gebruikt afzonderlijke vormen van gedrag voor het tellen van records om aangepaste recordtellers te maken. Door een aangepaste recordteller te maken, kunt u een recordteller maken die meer is dan de eenvoudige, enkele rijtabel die met het serverobject Navigatiestatus recordset wordt ingevoegd. U kunt de ontwerpelementen op diverse creatieve manieren ordenen en een geschikt servergedrag op elk element toepassen.
Een gegevensformaat aanpassen 1. Open een pagina met dynamische gegevens in de ontwerpweergave. 2. Selecteer de dynamische gegevens waarvan u de notatie wilt aanpassen. Het gebonden gegevensitem waarvan u de dynamische tekst hebt geselecteerd, wordt gemarkeerd in het paneel Bindingen (Venster > Bindingen). Het paneel geeft twee kolommen weer voor het geselecteerde item: Binding en Formaat. Als de kolom Formaat niet zichtbaar is, verbreedt u het paneel Bindingen om het te tonen. 3.
Dynamische pagina's ontwerpen Dreamweaver en het ontwerpen van dynamische pagina's Dreamweaver en het ontwerpen van dynamische pagina's Naar boven 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.
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. Later kunt u zowel de weergave als het herhalingsgebied van de tabel wijzigen met respectievelijk de eigenschappencontrole en het servergedrag van het herhalingsgebied. Voeg een dynamisch tekstobject op een pagina in.
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
Als de opgegeven waarde in de record voldoet aan de filtervoorwaarde, wordt de record in de recordset opgenomen. 6. (Optioneel) Als u de records wilt sorteren, selecteert u de kolom waarop u wilt sorteren, en geeft u op of u de records in oplopende volgorde (1, 2, 3... of A, B, C...) of in aflopende volgorde wilt sorteren. 7. Klik op Testen om de database te verbinden en een instantie van de gegevensbron te maken, en klik op OK om de gegevensbron te sluiten.
Het dialoogvenster Geavanceerde recordset wordt geopend. Als u een ColdFusion-site ontwikkelt, ziet het dialoogvenster Recordset er iets anders uit. (Als het dialoogvenster Eenvoudige recordset wordt geopend, klikt u op de knop Geavanceerd om naar het dialoogvenster Geavanceerde recordset te schakelen.) 4. Vul het dialoogvenster Geavanceerde recordset in. Raadpleeg de onderstaande onderwerpen voor instructies. 5.
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. Als de instructie is geslaagd, wordt een tabel met de gegevens in de recordset weergegeven. Elke rij bevat een record en elke kolom stelt een veld in die record voor. Klik op OK om de recordset te wissen. 6.
FormFieldName 0001 De runtimewaarde is gewoonlijk een URL of formulierparameter die een gebruiker in een HTML-formulierveld invoert. 6. Klik op Testen om de database te verbinden en een instantie van de recordset te maken. Als de SQL-instructie runtimeverwijzingen bevat, moet u ervoor zorgen dat de kolom Standaardwaarde van het veld Paginaparameters geldige testwaarden bevat voordat u op Testen klikt. Als de instructie is geslaagd, wordt een tabel met de gegevens in de recordset weergegeven.
Selecteer emplName en klik op de knop SELECT. Selecteer emplJob en klik op de knop WHERE. Selecteer emplName en klik op de knop ORDER BY. 3. Plaats de invoegpositie achter WHERE emplJob in het SQL-tekstgebied en typ ='varJob' (inclusief het 'is gelijk'-teken). 4. Definieer de variabele 'varJob' door op de plusknop (+) in het gebied Variabelen te klikken en de volgende waarden in de kolommen Naam, Standaardwaarde en Runtime waarde in te voeren: varJob, CLERK, Request("job"). 5.
Naar boven Sessievariabelen definiëren Met sessievariabelen kunt u informatie opslaan en weergeven die gedurende het bezoek van een gebruiker (een gebruikerssessie) wordt vastgehouden. De server maakt voor elke gebruiker een afzonderlijk sessieobject en onderhoudt dat gedurende een ingestelde periode of tot het object expliciet wordt beëindigd. Voordat u sessievariabelen voor een pagina definieert, moet u ze in de broncode maken.
in de tag cfquery gebruiken. Dreamweaver beschikt over een visuele methode om een dergelijke variabele in uw recordsets op te geven. 1. Zorg ervoor dat een ColdFusion-pagina in het documentvenster actief is. 2. Klik in het paneel Bindingen op de plusknop (+) en kies Variabele voor naam gegevensbron in het pop-upmenu. Het dialoogvenster Variabele voor naam gegevensbron wordt geopend. 3. Definieer een variabele en klik op OK. 4.
3. Selecteer in het dialoogvenster Request-variabele een van de volgende request-collecties in het pop-upmenu Type: De QueryString-collectie Haalt informatie op die is toegevoegd aan de URL van de verzendende pagina, bijvoorbeeld wanneer de pagina een HTML-formulier heeft met de GET-methode. De queryreeks bestaat uit een of meer naam-/waardeparen (bijvoorbeeld last=Smith, first=Winston) die met een vraagteken achter de URL zijn geplaatst (?).
Client.TimeCreated Registreert het tijdstempel waarop CFID en CFTOKEN het eerst voor een bepaalde client zijn gemaakt. Een ColdFusion-cookievariabele definiëren Cookievariabelen worden in de code gemaakt en hebben toegang tot informatie in cookies die door een browser aan de server worden doorgegeven. De gedefinieerde cookievariabele wordt in het paneel Bindingen weergegeven. Voer in het dialoogvenster Cookievariabele de naam van de cookievariabele in en klik op OK.
CONTENT_TYPE Voor query's waaraan informatie is gekoppeld (zoals HTTP POST en PUT), is dit het inhoudstype van de gegevens. CONTENT_LENGTH De lengte van de inhoud zoals de client die heeft gegeven. De volgende tabel bevat een overzicht van de meest voorkomende CGI-variabelen die door de browser zijn gemaakt en aan de server zijn doorgegeven: Variabele Beschrijving HTTP_REFERER Het document dat de verwijzing bevat.
Databaseverbindingen voor ASP-ontwikkelaars (CS6) 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 Naar boven ASP-databaseverbindingen Een ASP-toepassing moet worden verbonden met een database via een ODBC-stuurprogramma (Open Database Connectivity) of een OLE DBprovider (Object Linking and Embedding).
www.oracle.com/technology/software/tech/windows/ole_db/index.html (registratie verplicht). Maak in Dreamweaver een OLE DB-verbinding door een Provider-parameter op te nemen in een verbindingstekenreeks. Hier ziet u bijvoorbeeld een aantal parameters voor algemene OLE DB-providers voor respectievelijk Access-, SQL Server- en Oracle-databases: Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;...
U kunt een lokaal gedefinieerde DSN gebruiken om een databaseverbinding te maken in Dreamweaver. 1. Definieer een DSN op de Windows-computer waarop Dreamweaver draait. Zie de volgende artikelen op de Microsoft-website voor instructies: Voor een computer met Windows 2000, zie Microsoft Knowledge Base, artikel 300596 op http://support.microsoft.com/default.aspx? scid=kb;nl-nl;300596 Voor een computer met Windows XP, zie Microsoft Knowledge Base, artikel 305599 op http://support.microsoft.com/default.
1. Open een ASP-pagina in Dreamweaver en open vervolgens het deelvenster Databases (Venster > Databases). 2. Klik op de plusknop (+) in het paneel, selecteer Aangepaste verbindingstekenreeks in het menu, vul de opties in en klik op OK. 3. Voer een naam in voor de nieuwe verbinding, zonder spaties of speciale tekens. 4. Voer een verbindingstekenreeks in voor de database.
<%Response.Write(stringvariable)%> 3. Gebruik de methode MapPath om een waarde te verkrijgen voor het argument 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.
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 ASP-pagina in Dreamweaver en open vervolgens het deelvenster Databases (Venster > Databases). 2.
Databaseverbindingen voor ColdFusion-ontwikkelaars (CS6) Verbinding maken met een ColdFusion-database Een ColdFusion-gegevensbron maken of aanpassen Verbinden met de database in Dreamweaver Naar boven Verbinding maken met een ColdFusion-database Wanneer u een ColdFusion webtoepassing ontwikkelt in Dreamweaver, maakt u verbinding met een database door een ColdFusion-gegevensbron te selecteren die is gedefinieerd in Dreamweaver of in ColdFusion Administrator, de beheersconsole van de server.
Databaseverbindingen voor PHP-ontwikkelaars PHP-databaseverbindingen Verbinding maken met een database Een databaseverbinding bewerken of verwijderen Naar boven PHP-databaseverbindingen Voor het ontwikkelen in PHP ondersteunt Dreamweaver alleen het MySQL-databasesysteem. Andere databasesystemen zoals Microsoft Access of Oracle worden niet ondersteund. MySQL is openbronsoftware die u gratis kunt downloaden van het internet voor niet-commercieel gebruik.
Een verbinding verwijderen 1. Open een PHP-pagina in Dreamweaver en open vervolgens het deelvenster Databases (Venster > Databases). 2. Klik met de rechtermuisknop op de verbinding (Windows) of houd de Command-toets ingedrukt en klik op de verbinding (Macintosh), en selecteer vervolgens Verbinding verwijderen in het menu. 3. Bevestig in het dialoogvenster dat verschijnt, dat u de verbinding wilt verwijderen. Opmerking: U kunt voorkomen dat er fouten optreden na het verwijderen van een verbinding.
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
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. Knoppen Voeren acties uit wanneer erop wordt geklikt. U kunt een aangepaste naam of label voor een knop toevoegen, of een van de vooraf gedefinieerde tags 'Verzenden' of 'Beginwaarden' gebruiken.
3. Stel de eigenschappen van het HTML-formulier in de eigenschappencontrole in (Venster >Eigenschappen): a. Klik in het documentvenster op de formulieromtrek om het formulier te selecteren. b. Typ in het vak Formuliernaam een unieke naam voor het formulier. Door een formulier een naam te geven, kunt u er met een scripttaal, zoals JavaScript of VBScript, naar verwijzen of het besturen.
5. Pas de indeling van het formulier aan. Gebruik regeleinden, alinea-einden, vooraf opgemaakte tekst of tabellen om uw formulieren op te maken. U kunt geen formulier in een ander formulier invoegen (u kunt tags dus niet overlappen), maar u kunt wel meer dan één formulier op een pagina opnemen.
Geselecteerde waarde Hiermee stelt u de waarde in die naar de server wordt verzonden wanneer het keuzerondje is ingeschakeld. Typ bijvoorbeeld skiing in het vak Geselecteerde waarde om aan te geven dat een gebruiker skiën heeft gekozen. Status bij openen Hiermee bepaalt u of het keuzerondje is ingeschakeld wanneer het formulier in de browser wordt geladen. Dynamisch Hiermee laat u de server dynamisch de begintoestand van het keuzerondje bepalen.
te voeren, moet u een gedrag aan het formulierobject koppelen. 1. Plaats de invoegpositie binnen de formulieromtrek in het document. 2. Selecteer Invoegen > Formulier > Afbeeldingsveld. Het dialoogvenster Afbeeldingsbron selecteren wordt geopend. 3. Selecteer de afbeelding voor de knop in het dialoogvenster Afbeeldingsbron selecteren en klik op OK. 4. Stel in de eigenschappencontrole een van de volgende opties in: Afbeeldingsveld Hiermee geeft u de knop een naam.
b. Klik op de plusknop (+) om een selectievakje aan de groep toe te voegen. Voer een label en geselecteerde waarde voor het nieuwe selectievakje in. c. Klik op de pijlen omhoog of omlaag als u de volgorde van de selectievakjes wilt wijzigen. d. Als u wilt dat een bepaald selectievakje 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 selectievakje.
Bestaande HTML-formuliermenu's dynamisch maken 1. Selecteer in de ontwerpweergave het lijst/menuformulierobject. 2. Klik in de eigenschappencontrole op de knop Dynamisch. 3. Vul het dialoogvenster in en klik op OK. Dynamische inhoud weergeven in HTML-tekstvelden Naar boven U kunt dynamische inhoud in HTML-tekstvelden weergeven wanneer het formulier in een browser wordt weergegeven.
2. Selecteer een waarde om dynamisch vooraf een keuze te maken uit de lijst met waarden. Deze waarde wordt in het vak Waarde weergegeven. 3. Klik op het pictogram met de bliksemflits naast het vak Selecteer waarde gelijk aan en selecteer een recordset die mogelijke geselecteerde waarden voor de keuzerondjes in de groep bevatten. De recordset die u selecteert, bevat waarden die overeenkomen met de geselecteerde waarden van de keuzerondjes.
function processMyForm(){ alert('Thanks for your order!'); } Naar boven Toegankelijke HTML-formulieren maken Wanneer u een HTML-formulierobject invoegt, kunt u het formulierobject toegankelijk maken en de toegankelijkheidskenmerken later wijzigen. Een toegankelijk formulierobject toevoegen 1. Wanneer u de eerste keer toegankelijke formulierobjecten toevoegt, activeert u het dialoogvenster Toegankelijkheid voor formulierobjecten (zie De werkruimte optimaliseren voor visuele ontwikkeling).
Bewerk de desbetreffende kenmerken in de codeweergave. Klik met de rechtermuisknop (Windows), of houd de Command-toets ingedrukt terwijl u klikt, en kies Tag bewerken.
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.
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. Standaard kunnen Contributegebruikers deze markeringen niet selecteren of verwijderen.
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
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. Selecteer het formulier door de tag
Laat het dialoogvenster Recordset nog even geopend. Hierin gaat u zo dadelijk de parameters ophalen die de zoekpagina heeft verzonden, en een recordsetfilter maken om de records uit te sluiten die niet aan de parameters voldoen. Het recordsetfilter maken 1. Selecteer in het eerste pop-upmenu in het gebied Filter een kolom in de databasetabel waarin u naar een overeenkomst wilt zoeken. Als de zoekpagina als waarde bijvoorbeeld een plaatsnaam heeft verzonden, selecteert u de tabelkolom die plaatsnamen bevat.
naam van de variabelen in, de standaardwaarde (de waarde die de variabele krijgt als geen runtime-waarde wordt geretourneerd) en een runtime-waarde (gewoonlijk een serverobject dat een waarde bevat die door een browser wordt verzonden, bijvoorbeeld een requestvariabele).
Pagina's samenstellen met geavanceerde gegevensmanipuleringsobjecten (ColdFusion, ASP) (CS6) Over ASP-opdrachtobjecten ASP-opdrachten gebruiken om een database te wijzigen Over opgeslagen procedures Een opgeslagen procedure toevoegen (ColdFusion) (CS6) Een opgeslagen procedure uitvoeren (ASP) (CS6) Naar boven Over ASP-opdrachtobjecten Een ASP-opdrachtobject is een serverobject dat een bepaalde bewerking uitvoert in een database.
Gebruik het paneel Databases in Dreamweaver om de waarde voor Grootte te verkrijgen. Zoek de database in het paneel Databases en vouw het item uit. Zoek vervolgens de tabel waarmee u werkt en vouw ook deze uit. In de tabel worden de grootten van de velden vermeld. U vindt hier bijvoorbeeld ADDRESS (WChar 50). In dit voorbeeld is 50 de grootte. U kunt de grootte ook in uw databasetoepassing vinden. Opmerking: De gegevenstypen Numeriek, Boolean en Datum/tijd hebben altijd de grootte -1.
van de database zelf wijzigen. U kunt een opgeslagen procedure bijvoorbeeld gebruiken om een tabelkolom toe te voegen, of zelfs om een tabel te verwijderen. Een opgeslagen procedure kan ook een andere opgeslagen procedure aanroepen, en invoerparameters accepteren of in de vorm van uitvoerparameters meerdere waarden aan de aanroepende procedure retourneren.
Een opgeslagen procedure uitvoeren (ASP) (CS6) Met ASP-pagina's moet u een opdrachtobject aan een pagina toevoegen om een opgeslagen procedure te kunnen uitvoeren. Zie Over ASPopdrachtobjecten voor meer informatie over opdrachtobjecten. 1. Open de pagina die de opgeslagen procedure zal uitvoeren, in Dreamweaver. 2. Klik in het paneel Bindingen (Venster > Bindingen) op de plusknop (+) en selecteer Opdracht (opgeslagen procedure). Het dialoogvenster Opdracht wordt geopend. 3.
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.
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.
gebruiken. De expressie na het gelijkteken is de waarde van de parameter. In dit geval wordt de waarde gegenereerd door een PHP-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 PHP-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. In de meeste gevallen bestaat het veld uit een record-id-nummer.
overeenkomen met de waarde van de URL-parameter die door de hoofdpagina is doorgegeven. Selecteer in het pop-upmenu naast het eerste menu het gelijkteken (dit moet al zijn geselecteerd). Selecteer in het derde pop-upmenu de optie URL-parameter. De hoofdpagina gebruikt een URL-parameter om informatie door te geven aan de detailpagina. Voer in het vierde vak de naam in van de URL-parameter die de hoofdpagina heeft doorgegeven. 6. Klik op OK. De recordset wordt in het paneel Bindingen weergegeven. 7.
Op de hoofdpagina worden de recordsetkolommen horizontaal in een tabel weergegeven. Klik op de pijl-omhoog om de kolom naar links te verplaatsen en klik op de pijl-omlaag om de kolom naar rechts te verplaatsen. 7. Selecteer in het pop-upmenu 'Naar detailpagina gaan vanuit' de kolom in de recordset die een waarde weergeeft die ook als een koppeling naar de detailpagina fungeert.
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.
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 Waarde. In de volgende stap voor het maken van een registratiepagina voegt u het servergedrag Record invoegen in om records in de gebruikerstabel in de database in te voegen.
Een pagina voor het invoegen van records maken (CS6) Over het samenstellen van recordinvoegpagina's Een invoegpagina bloksgewijs samenstellen De invoegpagina samenstellen in één bewerking Naar boven Over het samenstellen van recordinvoegpagina's Uw toepassing kan een pagina bevatten waarmee gebruikers nieuwe records in een database kunnen invoegen.
Het gegevenstype is het soort gegevens dat de kolom in de databasetabel verwacht (tekst, numeriek, Booleaanse opties). Herhaal de procedure voor elk formulierobject in het formulier. 7. Voer in het vak 'Na invoegen, ga naar' de pagina in die u wilt openen nadat de record in de tabel is ingevoegd, of klik op de knop Bladeren om het bestand te zoeken. 8. Klik op OK.
genereert voor elke nieuwe record, verwijdert u het formulierobject dat correspondeert met de sleutelkolom door het object in de lijst te selecteren en op de minknop (-) te klikken. Hiermee sluit u het risico uit dat de gebruiker van het formulier een bestaande id-waarde invoert. U kunt de volgorde van de formulierobjecten in het HTML-formulier wijzigen. Daartoe selecteert u het formulierobject in de lijst en klikt u op de pijl-omhoog of de pijl-omlaag, rechts in het dialoogvenster. 7.
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.
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. U kunt bijvoorbeeld opgeven dat iedere gebruiker met de toegangsrechten van een gast, lid of beheerder de pagina kan bekijken. 6.
Dreamweaver voegt een leeg ColdFusion-formulier in. In de ontwerpweergave wordt het formulier aangeduid met een gestippelde rode omtrek. Als u deze omtrek niet ziet, controleert u of Weergave > Visuele hulpmiddelen > Onzichtbare elementen is geselecteerd. 3. Terwijl het formulier nog steeds is geselecteerd, gaat u naar de eigenschappencontrole om een of meer van de volgende formuliereigenschappen in te stellen. CFForm Hier geeft u het formulier een naam.
HTML in het formulier. Denk eraan dat u de ColdFusion-formuliervelden een beschrijvende tekstlabel geeft zodat gebruikers weten wat ze moeten invullen. Maak bijvoorbeeld een label 'Voer uw naam in' als u de naam van de gebruiker wilt vragen. ColdFusion-formulierbesturingselementen invoegen Naar boven Gebruik het paneel Invoegen of het menu Invoegen om snel ColdFusion-formulierbesturingselementen in een ColdFusion-formulier in te voegen.
Grootte Hier kunt u de grootte van het besturingselement opgeven. Vereiste Hier kunt u opgeven of het tekstveld gegevens moet bevatten voordat het formulier bij de server wordt ingediend. Tageditor weergeven Met de tageditor kunt u eigenschappen bewerken die niet in de eigenschappencontrole worden weergegeven. Naar boven Verborgen ColdFusion-velden invoegen U kunt visueel een verborgen ColdFusion-veld in een formulier invoegen en de eigenschappen ervan instellen.
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.
4. Als u het selectievakje van een label wilt voorzien, klikt u naast het selectievakje op de pagina en voert u tekst voor de label in. Naar boven ColdFusion-keuzerondjes invoegen U kunt visueel een ColdFusion-keuzerondje in een formulier invoegen en de eigenschappen ervan instellen. Gebruik keuzerondjes wanneer gebruikers maar één optie in een reeks opties mogen kiezen. Keuzerondjes behoren meestal tot een groep. Alle keuzerondjes in een groep moeten dezelfde naam hebben.
selectie kunt verwijderen. In eerste instantie geselecteerd Hier kunt u instellen welke optie standaard is geselecteerd. Als u de optie Meerdere lijstselecties toestaan hebt geselecteerd, mag u meer dan één optie selecteren. Recordset Hier kunt u de naam opgeven van de ColdFusion-query die u wilt gebruiken om de lijst of het menu te vullen. Kolom weergeven Hier kunt u de recordsetkolom opgeven die elk lijstelement van een weergavelabel voorziet. Wordt gebruikt met de eigenschap Recordset.
U kunt visueel een ColdFusion-bestandsveld in een formulier invoegen en de eigenschappen ervan instellen. Met een bestandsveld geeft u gebruikers de mogelijkheid om een bestand op hun computer te selecteren, bijvoorbeeld een tekstverwerkingsdocument of een afbeeldingsbestand, om dat naar de server te laden. Een ColdFusion-bestandsveld ziet er net zo uit als andere tekstvelden, maar heeft eveneens een knop Bladeren.
Als u een dynamische waarde wilt opgeven, klikt u op het pictogram van de bliksemflits naast het vak Waarde en selecteert u een recordsetkolom in het dialoogvenster Dynamische gegevens. De recordsetkolom levert een waarde aan het datumveld wanneer u het formulier in een browser weergeeft. Valideren Hier geeft u het type validatie op voor het veld. Valideren bij Hiermee geeft u aan wanneer het veld wordt gevalideerd: onSubmit, onBlur of onServer. Label Hier geeft u een label voor het veld op.
Recordupdatepagina's samenstellen (CS6) Over recordupdatepagina's De bij te werken record zoeken Koppelingen maken met de updatepagina De bij te werken record ophalen De updatepagina bloksgewijs invullen De updatepagina in één bewerking voltooien Opties voor eigenschappen van formulierelementen Naar boven Over recordupdatepagina's Uw toepassing kan een set pagina's bevatten waarmee gebruikers bestaande records in een databasetabel kunnen bijwerken.
kolom wilt aanduiden als de primaire sleutel. Het gegevenstype is het soort gegevens dat de kolom in de databasetabel verwacht (tekst, numeriek, Booleaanse opties). Herhaal de procedure voor elk formulierobject in het formulier. 7. (ASP) Geef in het pop-upmenu Selecteer een record uit de recordset op die de record bevat die in het HTML-formulier wordt weergegeven.
de naam van de tabelkolom in de label weer. Selecteer in het pop-upmenu Weergeven als een formulierobject dat als gegevensinvoerveld moet fungeren. U kunt kiezen uit Tekstveld, Tekstgebied, Menu, Selectievakje, Groep keuzerondjes en Tekst. Selecteer Tekst voor alleen-lezenvermeldingen. U kunt ook Wachtwoordveld, Bestandsveld en Verborgen veld selecteren. Opmerking: Verborgen velden worden aan het einde van het formulier ingevoegd.
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.
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. Wanneer een gebruiker op de knop Verzenden van de aanmeldingspagina klikt, vergelijkt het servergedrag Gebruiker aanmelden de waarden die de gebruiker heeft ingevoerd met de waarden van geregistreerde gebruikers. Als de waarden overeenkomen, opent het servergedrag één pagina (gewoonlijk het welkomstscherm van de site).
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.
recordset dat elke record op unieke wijze identificeert. In de meeste gevallen bestaat het veld uit een record-id-nummer. In het volgende voorbeeld bestaat het veld uit unieke locatiecodes: confirmDelete.cfm?recordID=#rsLocations.CODE# Wanneer de pagina wordt uitgevoerd, worden de waarden van het veld CODE van de recordset ingevoegd in de corresponderende rijen van de dynamische tabel.
U kunt ook een afbeelding met een woord of symbool invoegen om te verwijderen. 4. Selecteer de tekenreeks Delete om er een koppeling op toe te passen. 5. Klik in het deelvenster Servergedrag (Venster > Servergedrag) op de plusknop (+) en kies Naar detailpagina in het pop-upmenu. 6. Klik in het vak Detailpagina op Bladeren en zoek de verwijderpagina. 7. Geef in het vak URL-parameter doorgeven de naam van de parameter op, bijvoorbeeld recordID.
resultatenpagina is doorgegeven: Selecteer in het eerste pop-upmenu in het gebied Filter de kolom in de recordset met waarden die overeenkomen met de waarde van de URL-parameter die door de pagina met de koppelingen Verwijderen is doorgegeven. Als de URL-parameter bijvoorbeeld een record-idnummer bevat, selecteert u de kolom die record-id-nummers bevat.
De kolom met de record-id is geselecteerd. 5. Klik op OK en sla de pagina op. Verwijderpagina is voltooid. Instructies toevoegen om de record te verwijderen Naar boven Wanneer de geselecteerde record op de verwijderpagina is weergegeven, moet u instructies aan de pagina toevoegen om de record uit de database te verwijderen wanneer de gebruiker op de knop Verwijdering bevestigen klikt. U kunt deze instructies snel en eenvoudig toevoegen met het servergedrag Record verwijderen.
Het servergedrag Record verwijderen zoekt in deze kolom naar een overeenkomst. De kolom moet dezelfde record-id-gegevens bevatten als de recordsetkolom die u hebt gekoppeld aan het verborgen formulierveld op de pagina. Als de record-id numeriek is, selecteert u de optie Numeriek. 7. (PHP) Selecteer in het menu 'Waarde primaire sleutel' de variabele op de pagina die de record-id bevat die de te verwijderen record identificeert. De variabele wordt gemaakt door het verborgen formulierveld.
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.
Tijdelijke aanduidingen voor dynamische tekst weergeven 1. Kies Bewerken > Voorkeuren > Onzichtbare elementen (Windows) of Dreamweaver > Voorkeuren > Onzichtbare elementen (Macintosh). 2. Selecteer { } in het pop-upmenu Dynamische tekst weergeven als en klik op OK. Naar boven Afbeeldingen dynamisch maken U kunt afbeeldingen op uw pagina dynamisch maken. Stel bijvoorbeeld dat u een pagina ontwerpt om artikelen weer te geven die op een liefdadigheidsveiling worden verkocht.
Als het kenmerk dat u wilt koppelen, niet in de lijstweergave wordt vermeld, klikt u op de plusknop (+) en voert u de naam van het kenmerk in of klikt u op de kleine pijlknop en selecteert u het kenmerk in het pop-upmenu. 3. Als u de waarde van het kenmerk dynamisch wilt maken, klikt u op het kenmerk. Klik daarna op het pictogram met de bliksemflits of het mappictogram aan het einde van de rij van het kenmerk.
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 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
met het geëxporteerde bestand werkt, wordt alleen dat bestand bijgewerkt. 4. Bewerk het PNG-bronbestand in Fireworks en klik op Done. Fireworks slaat de wijzigingen op in het PNG-bestand en exporteert de bijgewerkte afbeelding (of HTML en afbeeldingen) waarna u weer terugkeert naar Dreamweaver. De bijgewerkte afbeelding of tabel wordt in Dreamweaver weergegeven. Zie www.adobe.com/go/vid0188_nl voor een zelfstudie over de integratie van Dreamweaver en Fireworks.
In het vak Name wordt automatisch de naam weergegeven die u voor het PNG-bestand hebt gebruikt. U kunt die naam wijzigen. 9. Selecteer in het vak Opslaan als type het type van het bestand of de bestanden die u wilt exporteren, bijvoorbeeld Alleen afbeeldingen of HTML en afbeeldingen. 10. Klik op Save om het geëxporteerde bestand op te slaan. Het bestand wordt opgeslagen en u keert terug naar Dreamweaver.
Altijd PNG bronbestand gebruiken Hiermee wordt automatisch het PNG-bestand van Fireworks geopend dat in de ontwerpnotitie is gedefinieerd als bron van de geplaatste afbeelding. Het PNG-bronbestand en de corresponderende, geplaatste afbeelding worden bijgewerkt. Nooit PNG bronbestand gebruiken Hiermee wordt de geplaatste afbeelding van Fireworks automatisch geopend, ongeacht of er een PNGbronbestand bestaat of niet. Alleen de geplaatste afbeelding wordt bijgewerkt.
en vervolgens alle geëxporteerde HTML-code en afbeeldingsbestanden die in een Dreamweaver-document zijn geplaatst, automatisch bijwerken. Met deze opdracht kunt u zelfs Dreamweaver-bestanden bijwerken, wanneer Dreamweaver niet wordt uitgevoerd. 1. Open het PNG-bronbestand in Fireworks en breng uw wijzigingen aan. 2. Selecteer File > Save. 3. Selecteer in Fireworks File > Update HTML. 4. Ga naar het Dreamweaver-bestand met de HTML-code die u wilt bijwerken en klik op Open. 5.
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.
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.
van het bestand u wilt behouden. Naar boven Een Adobe Bridge-bestand op uw pagina plaatsen 1. Plaats in Dreamweaver (ontwerpweergave) de invoegpositie op de pagina op de locatie waarop het bestand moet worden ingevoegd. 2. Selecteer het bestand inAdobe Bridge en kies Bestand > Plaatsen in Dreamweaver. 3. Als het bestand niet in de hoofdmap van de site staat, wordt u gevraagd om het bestand daarheen te kopiëren. 4.
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.
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.
Bewerkbare gebieden mogen geen herhaalde gebieden of herhaalde gebiedsgroepen bevatten. Bewerkbare InContext Editing-gebieden kunnen geen andere InContext Editing-functie bevatten. Als u een herhalingsgebied of een groep herhalingsgebieden wilt toevoegen aan een bewerkbaar gebied, kunt u de omzetting in Dreamweaver niet uitvoeren. Herhaalde gebieden mogen zich niet binnen bewerkbare gebieden bevinden en mogen geen herhaalde gebiedsgroepen bevatten.
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.
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 Bestandssynchronisatie met Adobe Creative Cloud inschakelen Naar boven 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.
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.
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.
4. Geef de vereiste gegevens op in het dialoogvenster AIR - Instellingen voor toepassing en installer en klik vervolgens op AIR-bestand maken. Zie de volgende opties van het dialoogvenster voor meer informatie. Dreamweaver maakt een bestand application.xml in de hoofdmap van uw site als u voor de eerste keer een Adobe AIR-bestand maakt. Dit bestand dient als manifest waarin verschillende eigenschappen van de toepassing zijn gedefinieerd.
Een toepassing ondertekenen met een digitaal certificaat Naar boven Een digitale handtekening biedt zekerheid dat de code voor de toepassing niet is gewijzigd of corrupt is geraakt sinds de code is geschreven door de ontwikkelaar van de software. Alle Adobe AIR-toepassingen vereisen een digitale handtekening en kunnen niet worden geïnstalleerd zonder handtekening.
Standaard wordt met de extensie Adobe AIR voor Dreamweaver een tijdstempel opgehaald tijdens het maken van een Adobe AIR-toepassing. U kunt de tijdstempelfunctie echter uitschakelen door in het dialoogvenster Digitale handtekening de optie Tijdstempel uit te schakelen. (Dit kunt u bijvoorbeeld doen als er geen tijdstempelservice beschikbaar is.) U kunt het beste een tijdstempel opnemen in elk AIR-bestand dat u openbaar distribueert.
Afbeeldingen toevoegen en wijzigen Over afbeeldingen Een afbeelding invoegen De grootte van een afbeelding visueel wijzigen Een tijdelijke aanduiding voor afbeeldingen invoegen Een tijdelijke aanduiding voor afbeeldingen vervangen Eigenschappen instellen voor tijdelijke aanduidingen voor afbeeldingen Afbeeldingen bewerken in Dreamweaver Een rollover-afbeelding maken Een externe afbeeldingseditor gebruiken Gedrag toepassen op afbeeldingen Naar boven Over afbeeldingen Er zijn veel verschillende bestandsind
3. Sleep een afbeelding van het bureaublad naar de gewenste locatie in het documentvenster en ga vervolgens verder met stap 3. 2. Voer in het dialoogvenster een van de volgende handelingen uit: Selecteer Bestandssysteem om een afbeeldingsbestand te kiezen. Selecteer Gegevensbron om een dynamische afbeeldingsbron te kiezen. Klik op de knop Sites en servers als u een afbeeldingsbestand wilt kiezen in een externe map van uw Dreamweaver-sites. 3.
Alt Hiermee geeft u alternatieve tekst op die in plaats van de afbeelding wordt weergegeven in browsers die alleen tekst weergeven of in browsers waarvoor is ingesteld dat afbeeldingen handmatig moeten worden gedownload. Voor blinde of slechtziende gebruikers die spraakprogramma's gebruiken met browsers die alleen tekst weergeven, wordt de tekst hardop voorgelezen. In sommige browsers wordt deze tekst ook weergegeven als de aanwijzer op de afbeelding wordt geplaatst.
zoveel mogelijk overeenkomen met de weergave van de oorspronkelijke afbeelding. Als u een nieuw voorbeeld maakt van een afbeelding, wordt het bestand kleiner en verloopt het downloaden sneller. De grootte van een element visueel wijzigen 1. Selecteer het element (bijvoorbeeld een afbeelding of SWF-bestand) in het documentvenster. Aan de onderkant en rechterkant van het element en in de rechterbenedenhoek worden formaatgrepen weergegeven.
Een tijdelijke aanduiding voor afbeeldingen vervangen Naar boven Een voorlopige afbeelding geeft geen afbeelding weer in een browser. Voordat u uw site publiceert, moet u alle voorlopige afbeeldingen die u hebt toegevoegd, vervangen door webvriendelijke afbeeldingsbestanden, zoals GIF- of JPEG-bestanden. Als u Fireworks hebt, kunt u een nieuwe afbeelding maken vanuit de tijdelijke aanduiding voor afbeeldingen in Dreamweaver.
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. De Dreamweaver-functies voor het bewerken van afbeeldingen zijn zo ontworpen dat u gemakkelijk kunt samenwerken met de inhoudsontwerpers die de afbeeldingsbestanden voor uw website maken.
Een afbeelding scherper maken Als u een afbeelding scherper maakt, wordt het contrast van pixels rond de randen van objecten vergroot, zodat de afbeelding gedefinieerder of scherper wordt. 1. Open de pagina die de afbeelding bevat die u scherper wilt maken, selecteer de afbeelding en ga op een van de volgende manieren te werk: Klik op de knop Verscherpen in de eigenschappencontrole voor de afbeelding. Selecteer Wijzigen > Afbeelding > Verscherpen. 2.
Ga als erop wordt geklikt, naar de URL Het bestand dat u wilt openen als een gebruiker op de rollover-afbeelding klikt. Typ het pad of klik op Bladeren en selecteer het bestand. Opmerking: Als u geen koppeling instelt voor de afbeelding, voegt Dreamweaver een lege koppeling (#) in de broncode in waaraan het rollover-gedrag wordt gekoppeld. Als u de lege koppeling verwijdert, werkt de rollover-afbeelding niet meer. 4. Selecteer Bestand > Voorvertoning in browser of druk op F12. 5.
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. Selecteer in het dialoogvenster dat wordt weergegeven de toepassing die u wilt gebruiken voor het bewerken van dit afbeeldingstype. 6. Klik op Primair maken als u van deze editor de primaire editor voor dit bestandstype wilt maken.
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.
bewaart. In dat geval slaat u de volgende stap over. 3. Zoek in het dialoogvenster Afbeeldingsbron selecteren naar het Photoshop PSD-afbeeldingsbestand door op de knop Bladeren te klikken en naar het bestand te gaan. 4. Pas in het dialoogvenster Afbeelding optimaliseren dat verschijnt de optimalisatie-instellingen naar wens aan en klik op OK. 5. Sla het afbeeldingsbestand, dat klaar is voor internet, op een locatie binnen de hoofdmap van uw website op.
2. Klik in de eigenschappencontrole op de knop Bewerken. 3. Breng de wijzigingen aan in Photoshop en sla het nieuwe PSD-bestand op. 4. Selecteer in Dreamweaver opnieuw het slimme object en klik op de knop Bijwerken vanuit origineel. Opmerking: als u het formaat van de afbeelding in Photoshop hebt gewijzigd, moet u het formaat van de webafbeelding opnieuw instellen in Dreamweaver.
actieve en lagere lagen van het segment naar het klembord gekopieerd. U kunt Selecteren > Alles kiezen om snel een afbeelding te selecteren voor kopiëren. 2. Plaats in Dreamweaver (ontwerp- of codeweergave) de invoegpositie op de pagina waar u de afbeelding wilt invoegen. 3. Selecteer Bewerken > Plakken. 4. Pas in het dialoogvenster Afbeelding optimaliseren de optimalisatie-instellingen naar wens aan en klik op OK. 5.
Integratie van Dreamweaver met Business Catalyst De Business Catalyst-add-on installeren Een tijdelijke Business Catalyst-site maken Een Business Catalyst-site importeren Bestanden beheren Modules, gegevens of fragmenten invoegen Eigenschappen van Business Catalyst-objecten bewerken Business Catalyst is een gehoste toepassing voor het maken en beheren van onlinebedrijven. Met dit uniforme platform kunt u alles zonder backendcode maken, van websites tot geavanceerde onlinewinkels.
Naar boven Een Business Catalyst-site importeren Zie Business Catalyst-sites migreren naar Dreamweaver CS6 voor meer informatie over het migreren van sites die u eerder hebt gemaakt met de Business Catalyst-extensie. 1. Selecteer Site > Sites beheren. 2. Klik op Business Catalyst-site importeren. De lijst met Business Catalyst-sites die u hebt gemaakt met de Adobe-id wordt weergegeven. 3. Selecteer de site en klik op Site importeren. 4.
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 Over JavaScript-gedrag Naar boven 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.
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.
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. (Als u het menu Gebeurtenissen wilt openen, selecteert u een gebeurtenis of actie in het paneel Gedrag en klikt u op de zwarte, naar beneden wijzende pijl die tussen de naam van de gebeurtenis en de naam van de actie wordt weergegeven.
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
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. Selecteer een object en kies Eigenschap wijzigen in het menu Gedrag toevoegen van het paneel Gedrag. 2.
ontwerpweergave van het documentvenster te tekenen. 2. Klik op de
-tag in de tagkiezer in de linkerbenedenhoek van het documentvenster. 3. Selecteer AP-element slepen in het menu Gedrag toevoegen van het paneel Gedrag. Als AP-element slepen niet beschikbaar is, hebt u waarschijnlijk een AP-element geselecteerd. 4. Selecteer AP-element in het pop-upmenu AP-element. 5. Selecteer Beperkt of Onbeperkt in het pop-upmenu Verplaatsing.
function getPos(layerId){ var layerRef = document.getElementById(layerId); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; } U kunt de waarden van MM_UPDOWN of MM_LEFTRIGHT in een formulierveld weergeven, maar u kunt deze waarden ook op diverse andere manieren gebruiken.
2. Selecteer in het menu Snelmenu kiezen een menu dat met de Go-knop moet worden geactiveerd en klik op OK. Het gedrag Browservenster openen toepassen Naar boven Gebruik het gedrag Browservenster openen om een pagina in een nieuw venster te openen. U kunt de eigenschappen van het nieuwe venster opgeven, zoals het formaat, de kenmerken (of het formaat kan worden gewijzigd, of het een menubalk heeft enzovoort) en de naam.
Het gedrag Navigatiebalkafbeelding instellen toepassen Naar boven Dit gedrag wordt vanaf Dreamweaver CS5 niet meer ondersteund. Het gedrag Tekst van frame instellen toepassen Naar boven Het gedrag Tekst van frame instellen biedt u de mogelijkheid om de tekst van een frame dynamisch in te stellen en de inhoud en opmaak van een frame te vervangen door de inhoud die u opgeeft. De inhoud kan bestaan uit elke geldige HTML-code. Gebruik dit gedrag om gegevens dynamisch weer te geven.
Houd het bericht beknopt. De browser kapt de tekst van het bericht af als de tekst niet op de statusbalk past. 3. Klik op OK en controleer of de standaardgebeurtenis juist is. Het gedrag Tekst van tekstveld instellen toepassen Naar boven Met het gedrag Tekst van tekstveld instellen vervangt u de inhoud van een tekstveld van een formulier door de inhoud die u opgeeft. U kunt elke geldige functie-aanroep, eigenschap, globale variabele of andere expressie in JavaScript in de tekst insluiten.
Dit gedrag wordt vanaf Dreamweaver CS5 niet meer ondersteund. Een pop-upmenu wijzigen Naar boven Dit gedrag wordt vanaf Dreamweaver CS5 niet meer ondersteund. Het gedrag Afbeelding verwisselen toepassen Naar boven Met het gedrag Afbeelding verwisselen wordt een afbeelding vervangen door een andere door het src-kenmerk van de -tag te wijzigen. Gebruik dit gedrag om knop-rollovers en andere afbeeldingseffecten te maken (inclusief het verwisselen van meerdere afbeeldingen tegelijk).
Als u meerdere velden ineens wilt valideren, selecteert u een tekstveld in de lijst Velden. 6. Selecteer de optie Vereist als er gegevens in het veld moeten worden ingevuld. 7. Selecteer een van de volgende opties voor Accepteren: Iets Hiermee controleert u of een verplicht veld gegevens bevat. Dit kunnen gegevens zijn van elk willekeurig type. E-mailadres Hiermee controleert u of het veld het symbool @ bevat. Getal Hiermee controleert u of het veld uitsluitend cijfers bevat.
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 Informatie over toegankelijke inhoud Naar boven Toegankelijkheid heeft betrekking op websites en webproducten bruikbaar maken voor mensen met een visuele, a
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. Hiervoor activeert u voor elk object het toegankelijkheidsdialoogvenster zodat u door Dreamweaver naar toegankelijkheidsinformatie wordt gevraagd wanneer u objecten invoegt.
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. Als het dialoogvenster een lijst Categorie bevat, drukt u Ctrl+Tab (Windows) om de categorielijst actief te maken en gebruikt u vervolgens de pijltoetsen om naar boven of beneden door de lijst te gaan. 4. Druk nogmaals op Ctrl +Tab om de opties voor een categorie te doorlopen. 5. Druk op Enter om het dialoogvenster te sluiten.
Dreamweaver-instellingen synchroniseren met Creative Cloud Eerste synchronisatie Instellingen migreren naar Dreamweaver CC 2014 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.
Eerste synchronisatie Naar boven Wanneer u Dreamweaver start op de computer waarop u de toepassing als eerste hebt geïnstalleerd, wordt het volgende dialoogvenster weergegeven: Instellingen nu synchroniseren Hiermee worden de instellingen meteen gesynchroniseerd met de cloud. Instellingen altijd automatisch synchroniseren Hiermee worden de instellingen automatisch gesynchroniseerd. Zie Automatische synchronisatie voor meer informatie.
Geavanceerd Hiermee worden de opties voor Instellingen synchroniseren in het dialoogvenster Voorkeuren geopend. De volgende scenario's geven u inzicht in het verschil tussen de opties Cloudinstellingen synchroniseren en Lokale instellingen synchroniseren: Scenario 1 U wijzigt de voorkeuren op de eerste computer en synchroniseert deze wijzigingen met de cloud. Ook op de tweede computer wijzigt u de voorkeuren.
2. Klik op Instellingen synchroniseren in de lijst Categorie. 3. Klik in de sectie Te synchroniseren instellingen op de instelling 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.
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. Bij volgende synchronisaties moet u het dialoogvenster Voorkeuren of de pop-upmelding ( ) gebruiken. Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Mac) en selecteer vervolgens Instellingen synchroniseren > Automatische synchronisatie inschakelen.
dialoogvensters Openen, Opslaan en Selecteren van Dreamweaver. De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.
