161 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS Een pagina met een CSS-lay-out maken Bij het maken van een nieuwe pagina in Dreamweaver kunt u een pagina maken met een CSS-lay-out. Dreamweaver wordt geleverd met zestien verschillende CSS-lay-outs waaruit u kunt kiezen. Bovendien kunt u eigen CSS-lay-outs maken en deze opnemen in de configuratiemap zodat ze verschijnen als lay-outkeuze in het dialoogvenster Nieuw document.
162 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS 7 Voer een van de volgende handelingen uit: • Indien u in het pop-upvenster CSS-lay-out hebt gekozen voor Toevoegen aan koptekst (de standaard optie), klikt u op Maken. • Indien u in het pop-upvenster CSS-lay-out hebt gekozen voor Nieuw bestand maken, klikt u op Maken en voert u de naam in van het nieuwe externe bestand in het dialoogvenster Stijlpaginabestand opslaan als.
163 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS Werken met labels voor div-tags Div-tags invoegen en bewerken U kunt paginalay-outs maken door labels voor div-elementen handmatig in te voeren en hierop CSSpositioneringsstijlen toe te passen. De label voor een div-element is een label waarmee logische scheidingen binnen de inhoud van een webpagina worden gedefinieerd.
164 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS De label voor het div-element wordt als een vak in uw document met de tekst van een tijdelijke aanduiding weergegeven. Als u de muisaanwijzer over de rand van het vak beweegt, wordt het element door Dreamweaver gemarkeerd. Als de label voor het div-element absoluut is gepositioneerd, wordt het een AP-element. (U kunt labels voor divelementen die niet absoluut zijn gepositioneerd, bewerken.
165 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS Wijzig de tekst voor de tijdelijke aanduiding in een label voor een div-tag ❖ Selecteer de tekst en typ er vervolgens overheen, of druk op Verwijderen. Opmerking: U kunt inhoud toevoegen aan de label voor het div-element op dezelfde manier als bij het toevoegen van inhoud aan een pagina.
166 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS CSS-lay-outachtergronden Hiermee worden voor afzonderlijke CSS-lay-outblokken tijdelijk toegewezen achtergrondkleuren weergegeven en 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-lay-outblok een opvallende achtergrondkleur toe.
167 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS 7 Klik op OK om het dialoogvenster Design-Time stijlbladen te sluiten. De stijlpagina wordt aan uw document gekoppeld. Als u een stijlpagina had gemaakt met behulp van het vorige voorbeeld, zouden alle alinea's en lijstitems zijn opgemaakt met het kenmerk display:block, waardoor u visuele hulpmiddelen voor CSS-lay-outblokken voor alinea's en lijstitems zou hebben kunnen in- of uitschakelen.
168 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS
Sample AP Div Page
U kunt eigenschappen van AP Div-elementen (of van elk AP-element) op uw pagina wijzigen, inclusief x- en ycoördinaten, de z-index (ook wel de stapelvolgorde g
169 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS Een AP Div-element invoegen op een bepaalde plaats in het document ❖ Plaats de invoegpositie in het documentvenster en selecteer vervolgens Invoegen > Lay-outobjecten > AP Div. Opmerking: Deze procedure plaatst de label voor het AP Div-element op de plaats waar u in het documentvenster klikte. De visuele weergave van het AP Div-element kan op deze manier invloed uitoefenen op andere pagina-elementen (zoals tekst) die eromheen staan.
170 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS U kunt de optie Nesten inschakelen om automatisch te nesten wanneer u een AP Div-element tekent, dat binnen een ander AP Div-element staat. Als u binnen of over een ander AP Div-element wilt tekenen, dient u de optie Overlappingen voorkomen uit te schakelen. Een genest AP Div-element tekenen 1 Zorg ervoor dat Overlappingen voorkomen is uitgeschakeld in het paneel AP-elementen (Venster > APelementen).
171 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS Eigenschappen van één AP-element weergeven of instellen Als u een AP-element selecteert, geeft de eigenschappencontrole AP-elementeigenschappen weer. 1 Selecteer een AP-element. 2 Klik in de eigenschappencontrole (Venster > Eigenschappen) op de uitbreidingspijl in de rechterbenedenhoek als er nog niets is uitgevouwen, om alle eigenschappen te zien.
172 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS Gebruik een scripttaal, zoals JavaScript, om de zichtbaarheidseigenschap te bepalen en om de inhoud van APelementen dynamisch weer te geven. Achtergrondafbeelding Hiermee geeft u een achtergrondafbeelding voor het AP-element op. Klik op het pictogram voor de map waarnaar u gaat bladeren, en selecteer een afbeeldingsbestand. Bg Color Hiermee geeft u een achtergrondkleur van het AP-element op.
173 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS 3 Stel een of meer van de volgende eigenschappen van meerdere AP-elementen in: L en T (left (links) en top (boven)) Hiermee geeft u de positie van de linkerbovenhoek van de AP-elementen aan, relatief ten opzichte van de linkerbovenhoek van de pagina of van het bovenliggende AP-element, indien het is genest. B en H Hiermee geeft u de breedte en hoogte van de AP-elementen op.
174 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS AP-elementen selecteren U kunt een of meerdere AP-elementen selecteren om ze te manipuleren of om hun eigenschappen te wijzigen. Een AP-element selecteren in het paneel AP-elementen ❖ Klik in het paneel AP-elementen (Venster > AP-elementen) op de naam van het AP-element. Een AP-element selecteren in het documentvenster ❖ Voer een van de volgende handelingen uit: • Klik op de selectiegreep van een AP-element.
175 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS De stapelvolgorde van AP-elementen wijzigen met behulp van de eigenschappencontrole 1 Selecteer Venster > AP-elementen om het paneel AP-elementen te openen om de huidige stapelvolgorde te bekijken. 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.
176 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS 2 Voer een van de volgende handelingen uit om het AP-element groter of kleiner te maken: • Als u groter of kleiner wilt maken door middel van slepen, sleept u een willekeurige formaatgreep van het APelement. • Als u groter of kleiner wilt maken met één pixel tegelijk, houdt u Control (Windows) of Option (Macintosh) ingedrukt terwijl u op een pijltoets drukt.
177 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS Bij het uitlijnen van AP-elementen worden niet-geselecteerde, onderliggende AP-elementen mogelijk ook verplaatst omdat hun bovenliggende AP-element wordt geselecteerd en verplaatst. Als u dit wilt voorkomen, dient u geen geneste AP-elementen te gebruiken. 1 Selecteer in de ontwerpweergave het AP-element. 2 Selecteer Wijzigen > Ordenen en selecteer vervolgens een uitlijningsoptie.
178 DREAMWEAVER GEBRUIKEN Pagina's maken met CSS Als deze optie is ingeschakeld, kunt u de resulterende tabel niet bewerken door de kolommen ervan te slepen. Als deze optie is 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.
179 Hoofdstuk 7: Pagina's opmaken met HTML Visuele lay-outhulpmiddelen gebruiken 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. • Als u de weergave van linialen wilt in- of uitschakelen, selecteert u Weergave > Linialen > Tonen.
180 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Opmerking: Als u elementen zoals AP-elementen (met absolute positie), tabellen en afbeeldingen groter of kleiner maakt, worden de desbetreffende elementen automatisch aan de hulplijnen vastgeklikt. Alle hulplijnen vergrendelen of ontgrendelen ❖ Selecteer Weergave > Hulplijnen > Hulplijnen vergrendelen.
181 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML U kunt ook uw eigen hulplijnen aan exemplaren van een sjabloon toevoegen. Hulplijnen die u op deze manier toevoegt, worden niet overschreven wanneer het sjabloonexemplaar door de hoofdsjabloon wordt overschreven. Meer Help-onderwerpen “AP-elementen uitlijnen” op pagina 176 “AP-elementen verplaatsen” op pagina 176 Het lay-outraster gebruiken Het raster bestaat uit horizontale en verticale lijnen die in het documentvenster worden weergegeven.
182 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML De overtrekafbeelding is alleen zichtbaar in Dreamweaver. De afbeelding is niet zichtbaar wanneer u de pagina in een browser bekijkt. Wanneer de overtrekafbeelding zichtbaar is, zijn de echte achtergrondafbeelding en -kleur van de pagina niet in het documentvenster zichtbaar. De achtergrondafbeelding en -kleur zijn echter wel zichtbaar in een browser.
183 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Inhoud in tabellen presenteren Over tabellen Tabellen zijn een krachtig hulpmiddel om tabelgegevens te presenteren en tekst en afbeeldingen op een HTML-pagina op te maken. Een tabel bestaat uit een of meer rijen. Elke rij bestaat uit een of meer cellen. Hoewel kolommen meestal niet expliciet in HTML-code worden vastgelegd, kunt u in Dreamweaver zowel kolommen als rijen en cellen manipuleren.
184 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Tabelcellen splitsen en samenvoegen 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.
185 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Het is raadzaam koppen te gebruiken ingeval bezoekers van uw website schermleesapparaten gebruiken. Met schermleesapparaten worden tabelkoppen gelezen, zodat de gebruikers van deze apparaten beter kunnen nagaan waar zich welke gegevens bevinden in de tabel. Bijschrift Hiermee kunt u voor de tabel een titel opgeven die buiten de tabel wordt weergegeven. Bijschrift uitlijnen Hiermee geeft u op waar het bijschrift ten opzichte van de tabel moet verschijnen.
186 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Rand Hier kunt u de breedte van de tabelranden in pixels opgeven. Celopvulling Hier kunt u het aantal pixels tussen de inhoud van een cel en de grenzen van de cel opgeven. Celafstand Hier kunt u het aantal pixels tussen aangrenzende tabelcellen opgeven.
187 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML • 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 Wijs met de muiscursor de linkerrand van een rij of de bovenrand van een kolom aan.
188 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Niet-aangrenzende cellen selecteren ❖ Houd de Control-toets (Windows) of de Command-toets (Macintosh) ingedrukt en klik in de gewenste cellen, rijen of kolommen. Als een cel, rij of kolom waarop u klikt nog niet is geselecteerd, wordt deze aan de selectie toegevoegd. Als deze al was geselecteerd, wordt deze uit de selectie verwijderd.
189 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Klasse Hiermee stelt u een CSS-klasse in voor de tabel. Opmerking: U moet mogelijk de eigenschappencontrole van de tabel uitvouwen om de volgende opties weer te geven. Als u de eigenschappencontrole van de tabel wilt uitvouwen, klikt u op de uitvouwpijl in de rechterbenedenhoek. Kolombreedten wissen en Kolomhoogten wissen: hiermee verwijdert u alle expliciet opgegeven rijhoogten of kolombreedten uit de tabel.
190 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML cel typt of plakt. (Normaal gesproken worden cellen horizontaal vergroot om het langste woord of de breedste afbeelding in de cel in te passen en worden zij vervolgens verticaal vergroot om de andere inhoud in te passen.) Kop Hiermee worden de geselecteerde cellen als tabelkopcellen opgemaakt. De inhoud van tabelkopcellen wordt standaard vet en gecentreerd weergegeven. U kunt breedten en hoogten in pixels of als percentages opgeven.
191 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML De modus Uitgebreide tabellen verlaten ❖ Voer een van de volgende handelingen uit: • Klik op Afsluiten in de balk die is gelabeld als Modus Uitgebreide tabellen en die langs de bovenrand van het documentvenster wordt weergegeven. • Selecteer Weergave > Tabelmodus > Standaardmodus. • Klik in de categorie Lay-out van het paneel Invoegen op Standaardmodus.
192 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Tabellen, kolommen en rijen groter/kleiner maken Tabellen groter/kleiner maken U kunt in een keer een volledige tabel of aparte rijen en kolommen groter/kleiner maken. Wanneer u een volledige tabel groter/kleiner maakt, worden de afmetingen van alle cellen in de tabel naar verhouding aangepast.
193 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML 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.
194 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML • Klik op het tabelkopmenu en selecteer vervolgens Alle hoogten wissen of Alle breedten wissen. De ingestelde breedte van een kolom wissen ❖ Klik in de kolom, klik op het kolomkopmenu en selecteer Kolombreedte wissen. Tabel- en kolombreedten en menu's in- of uitschakelen 1 Selecteer Weergave > Visuele hulpmiddelen > Tabelbreedten. 2 Klik met de rechtermuisknop in de tabel (Windows), of houd de Control-toets ingedrukt en klik in de tabel (Macintosh).
195 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Een rij of kolom verwijderen ❖ Voer een van de volgende handelingen uit: • Klik in een cel van de rij of kolom die u wilt verwijderen. Selecteer vervolgens Wijzigen > Tabel > Rij verwijderen of Wijzigen > Tabel > Kolom verwijderen. • Selecteer een volledige rij of kolom. Selecteer vervolgens Bewerken > Wissen, of druk op Verwijderen. Rijen of kolommen met de eigenschappencontrole toevoegen of verwijderen 1 Selecteer de tabel.
196 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML De inhoud van de afzonderlijke cellen worden in de resulterende samengevoegde cel geplaatst. De eigenschappen van de eerst geselecteerde cel worden op de samengevoegde cel toegepast. Een cel splitsen 1 Klik in de cel en voer een van de volgende handelingen uit: • Selecteer Wijzigen > Tabel > Cel splitsen. • Klik in de uitgebreide HTML-eigenschappencontrole (Venster > Eigenschappen) op Cel splitsen .
197 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML In de volgende afbeelding bestaat de selectie niet uit een rechthoek, zodat de cellen niet kunnen worden geknipt of gekopieerd. 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).
198 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Tabellen nesten Een geneste tabel is een tabel in een cel van een andere tabel. U kunt een geneste tabel op dezelfde manier opmaken als elke andere cel. De breedte ervan wordt echter beperkt door de breedte van de cel waarin de tabel is opgenomen. 1 Klik in een cel van de bestaande tabel. 2 Selecteer Invoegen > Tabel, stel de opties Tabel invoegen in en klik op OK. Tabellen sorteren U kunt de rijen van een tabel sorteren op de inhoud van één kolom.
199 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Frames gebruiken De werking van frames en framesets Een frame is een gebied in een browservenster waarin een HTML-document kan worden weergegeven onafhankelijk van alles wat er in de rest van het browservenster wordt weergegeven. Met frames kunt u een browservenster zodanig in meerdere gebieden verdelen dat er in elk gebied een ander HTML-document kan worden weergegeven.
200 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML 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. Opmerking: Een “pagina” verwijst naar één HTML-document of naar de volledige inhoud van een browservenster op een bepaald moment, zelfs als er meerdere HTML-documenten tegelijk worden weergegeven.
201 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML In veel gevallen kunt u een webpagina zonder frames maken en dezelfde doelen bereiken als met een set frames. Als u bijvoorbeeld een navigatiebalk links op uw pagina wilt weergeven, kunt u uw pagina door een set frames vervangen of een navigatiebalk op elke pagina van uw site opnemen. (In Dreamweaver kunt u eenvoudig meerdere pagina's met dezelfde lay-out maken.
202 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML A B A. Hoofdframeset B. Het menuframe en het inhoudsframe zijn binnen de hoofdframeset genest. Dreamweaver werkt het nesten van framesets automatisch af. Als u in Dreamweaver de framesplitsers gebruikt, hoeft u zich niet af te vragen welke frames worden genest en welke niet. Er zijn twee manieren om framesets in HTML te nesten: de binnenste frameset kan in hetzelfde bestand worden gedefinieerd als de buitenste frameset of in een eigen, apart bestand.
203 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Frames en framesets maken U kunt op twee manieren framesets maken in Dreamweaver: u kunt een van de vele vooraf gedefinieerde framesets selecteren of u kunt zelf een 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.
204 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Een frameset maken ❖ Selecteer Wijzigen > Frameset. Selecteer vervolgens in het vervolgmenu een splitsopdracht (zoals Frame links splitsen of Frame rechts splitsen). Het venster wordt door Dreamweaver in frames gesplitst. Als u een bestaand document had geopend, verschijnt het in een van de frames.
205 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML In het paneel Frames worden de frames in een frameset grafisch voorgesteld. De hiërarchie van de frameset wordt weergegeven op een manier die in het documentvenster niet altijd duidelijk is. In het paneel Frames wordt elke frameset met een erg dikke rand omringd. Elk frame is omringd met een dunne, grijze lijn en wordt met een framenaam aangeduid.
206 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML 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.
207 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Opmerking: Als u een document met Bestand > Openen in frame hebt geopend in een frame en u slaat de frameset op, wordt het in het frame geopende document het standaarddocument voor weergave in het desbetreffende frame. Als u dat document niet tot het standaarddocument wilt maken, slaat u het framesetbestand niet op.
208 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Randen Hiermee kunt u de randen van het huidige frame weergeven of verbergen wanneer het frame in een browser wordt getoond. Als u de optie Randen voor een frame instelt, worden de randinstellingen van de frameset hierdoor vervangen. De instellingen voor randen zijn Ja (randen weergeven), Nee (randen verbergen) en Standaard.
209 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML 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. 2 Typ in het vak titel van de documentwerkbalk een naam voor het framesetdocument.
210 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML toegewezen nadat dit gebeurd is voor frames met eenheden in pixels, maar voor frames met eenheden die op relatief zijn ingesteld. Relatief Hiermee kunt u opgeven dat aan de geselecteerde rij of kolom de ruimte moet worden toegewezen die overblijft nadat ruimte aan frames in pixels en percentages is toegewezen, en dat de resterende ruimte verhoudingsgewijs moet worden verdeeld tussen de frames met grootten die op relatief zijn ingesteld.
211 DREAMWEAVER GEBRUIKEN Pagina's opmaken met HTML Inhoud opgeven voor browsers zonder frameondersteuning U kunt in Dreamweaver inhoud opgeven voor weergave in een op tekst gebaseerde browser en in oudere grafische browsers zonder frameondersteuning. Deze inhoud wordt opgeslagen in het framesetbestand en afgebakend met een noframes-tag.
212 Hoofdstuk 8: Inhoud toevoegen aan pagina's Werken met pagina's 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. Meer Help-onderwerpen “Overzicht van paneel Invoegen” op pagina 14 “Tags bewerken met tageditors” op pagina 324 “Elementen selecteren en weergeven in het documentvenster” op pagina 220 Het paneel Invoegen verbergen of weergeven ❖ Selecteer Venster > Invoegen.
213 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Het pop-upmenu voor een knop weergeven ❖ Klik op de pijl-omlaag naast het pictogram van de knop. 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. • Klik op de pijl op een knop en selecteer een optie in het menu.
214 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Opmerking: Met deze procedure kunt u niet alle dialoogvensters voor het invoegen van objecten omzeilen. Voor veel objecten, zoals AP-elementen en framesets, worden geen tijdelijke aanduidingen of objecten met een standaardwaarde ingevoegd. Voorkeuren voor het paneel Invoegen wijzigen 1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).
215 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Het paneel Invoegen als een horizontale invoegbalk weergeven In tegenstelling tot andere panelen in Dreamweaver kunt u het paneel Invoegen uit de standaard gedokte positie slepen en horizontaal, boven in het venster Document, neerzetten. Wanneer u dat doet, verandert het paneel in een werkbalk (al kunt u de balk niet op dezelfde wijze als andere werkbalken verbergen en weergeven).
216 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Categorieën op de horizontale invoegbalk weergeven als een menu ❖ 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.
217 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Achtergrondafbeelding Stelt een achtergrondafbeelding in. Klik op de knop Bladeren en blader naar de afbeelding om ze te selecteren. U kunt ook het pad naar de achtergrondafbeelding typen in het vak Achtergrondafbeelding. In Dreamweaver wordt de achtergrondafbeelding naast elkaar weergegeven (herhaald) als deze niet groot genoeg is om het hele venster te vullen, net zoals bij browsers.
218 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 2 Selecteer de categorie Koppelingen (CSS) en stel de opties in. Lettertype koppelingen Geeft de standaardlettertypefamilie aan die voor koppelingstekst wordt gebruikt. Standaard gebruikt Dreamweaver de lettertypefamilie die is opgegeven voor de hele pagina, tenzij u een ander lettertype opgeeft. Grootte Geeft de standaardtekengrootte aan die voor koppelingstekst wordt gebruikt.
219 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's eenheidscodering nodig voor het vertegenwoordigen van bepaalde tekens. Zie www.w3.org/TR/REChtml40/sgml/entities.html voor meer informatie over tekeneenheden. Opnieuw laden Converteert het bestaande document of opent het opnieuw met de nieuwe codering. Unicode-formulieren Is alleen beschikbaar als u UTF-8 hebt geselecteerd als documentcodering. Er zijn vier UNF's.
220 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Als u Japanese (Shift JIS) opgeeft, wordt de volgende meta-tag ingevoegd: . Het document wordt in Dreamweaver weergegeven met de lettertypen die u hebt opgegeven voor de codering Japanese. Het document wordt in een browser weergegeven met de lettertypen die de gebruiker van de browser heeft opgegeven voor de Japanse codering.
221 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's • Als u een volledige tag (inclusief de eventuele inhoud) wilt selecteren, klikt u op een tag in de tagkiezer linksonder in het documentvenster. (De tagkiezer wordt zowel in de ontwerpweergave als in de codeweergave weergegeven.) In de tagkiezer worden altijd de tags weergegeven die de huidige selectie of invoegpositie bevatten. De meest linkse tag is de buitenste tag die de huidige selectie of invoegpositie bevat.
222 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Regeleinden Geeft een pictogram weer waarmee de locatie van elk regeleinde wordt gemarkeerd (BR). Deze optie is standaard niet geselecteerd. Afbeeldingen met hyperlinks op de client Geeft een pictogram weer waarmee de locatie van elke afbeelding met hyperlinks aan de client-kant in het document wordt gemarkeerd.
223 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Tijdens tests blijkt echter dat er maar 212 webveilige kleuren zijn in plaats van de totale 216, omdat in Internet Explorer op Windows de kleuren #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) en #33FF00 (51,255,0) niet op de juiste manier worden weergegeven. In de tijd van de eerste webbrowsers konden de meeste computers maar 256 kleuren (8-bits per kanaal [bpk]) weergeven.
224 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's In- en uitzoomen 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 pagina's kunt ontwerpen, enzovoort. Opmerking: De zoomfuncties zijn alleen beschikbaar in de ontwerpweergave.
225 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's JavaScript-gedrag gebruiken om browsers en insteekmodules op te sporen U kunt gedrag gebruiken om vast te stellen welke browser uw bezoekers gebruiken en of ze een bepaalde insteekmodule hebben geïnstalleerd. Browser controleren Stuurt bezoekers naar verschillende pagina's, afhankelijk van het merk en de versie van hun browser. U kunt bezoekers bijvoorbeeld naar de ene pagina sturen als ze Netscape Navigator 4.
226 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Als u de opdracht Plakken gebruikt voor het plakken van tekst uit andere toepassingen, kunt u plakvoorkeuren instellen als standaardopties. Opmerking: Met Control+V (Windows) en Command+V (Macintosh) wordt altijd alleen tekst (zonder opmaak) geplakt in de codeweergave. ❖ Ga op een van de volgende manieren te werk om tekst toe te voegen aan uw document: • Typ tekst rechtstreeks in het documentvenster.
227 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Een vaste spatie invoegen ❖ Voer een van de volgende handelingen uit: • Selecteer Invoegen > HTML > Speciale tekens > Vaste spaties. • Druk op Control+Shift+spatiebalk (Windows) of Option+spatiebalk (Macintosh). • Ga naar de categorie Tekst van het paneel Invoegen, klik op de knop Tekens en selecteer het pictogram Vaste spaties.
228 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 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. De tekst wordt ingesprongen in Dreamweaver en er wordt een afzonderlijke lijst gemaakt met de HTML-kenmerken van de oorspronkelijke lijst. 3 Pas een nieuw lijsttype of een nieuwe lijststijl toe op de ingesprongen tekst via de hierboven beschreven procedure.
229 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Meer Help-onderwerpen “Code weergeven” op pagina 309 “Gewone uitdrukkingen” op pagina 307 Tekst zoeken en vervangen 1 Open het document waarin u wilt zoeken of selecteer documenten of een map in het paneel Bestanden. 2 Selecteer Bewerken > Zoeken en vervangen. 3 Met de optie Zoeken in kunt u opgeven in welke bestanden moet worden gezocht: Geselecteerde tekst Beperkt de zoekopdracht tot de tekst die momenteel is geselecteerd in het actieve document.
230 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's standaardexpressie expliciet schrijven zodat witruimte wordt genegeerd. Merk op dat
- en
-tags niet als witruimten worden beschouwd. Heel woord Hiermee beperkt u de zoekopdracht tot tekst die overeenkomt met een of meer hele woorden. Opmerking: Deze optie is hetzelfde al een zoekopdracht met een standaardexpressie waarmee u zoekt naar een tekenreeks die begint en eindigt met \b, de standaardexpressie voor een woordgrens.
231 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 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. Geef een bepaalde waarde op voor het kenmerk of selecteer [alle waarden].
232 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Afkortingen en letterwoorden definiëren HTML biedt tags waarmee u afkortingen en letterwoorden kunt definiëren die u in uw pagina gebruikt voor zoekmachines, spellingcontrole, vertaalprogramma's of spraakprogramma's. U kunt bijvoorbeeld opgeven dat de afkorting ME in uw pagina voor mechanical engineer staat, of het letterwoord WHO voor World Health Organization. 1 Selecteer de afkorting of het acroniem in de tekst van de pagina.
233 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Spelling op een webpagina controleren Gebruik de opdracht Spelling controleren om de spelling van het huidige document te controleren. Het document moet een webpagina zijn (bijvoorbeeld een HTML-, ColdFusion- of PHP-pagina). De opdracht Spelling controleren werkt niet voor tekst- of XML-bestanden. Daarnaast worden met de opdracht Spelling controleren HTML-tags en kenmerkwaarden genegeerd.
234 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Meer Help-onderwerpen “Bestaande documenten openen en bewerken” op pagina 70 “Tabelgegevens importeren en exporteren” op pagina 185 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.
235 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Door het document naar de hoofdmap van de site te kopiëren, zorgt u ervoor dat het document beschikbaar is als u de website publiceert. 5 Als u de pagina uploadt naar uw webserver, moet u ervoor zorgen dat u het Word- of Excel-bestand ook uploadt. De pagina bevat nu een koppeling naar het Word- of Excel-document. De tekst van de koppeling is de naam van het gekoppelde bestand. U kunt deze tekst desgewenst wijzigen in het venster Document.
236 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Opmerking: Als u inline CSS-stijlen maakt, voegt Dreamweaver rechtstreeks stijlkenmerkcode toe aan de hoofdtekst van de pagina.
237 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's HTML-opmaak instellen in de eigenschappencontrole 1 Open de eigenschappencontrole (Venster > Eigenschappen) als deze nog niet is geopend en klik op de knop HTML. 2 Selecteer de tekst die u wilt opmaken. 3 Stel de opties in die u wilt toepassen op de geselecteerde tekst: Indeling Bepaalt de alineastijl van de geselecteerde tekst. Alinea past de standaardopmaak voor een
-tag toe, Kop 1 voegt een H1-tag toe enzovoort.
238 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's HTML-opmaak gebruiken Hoewel CSS de voorkeursmethode is voor het opmaken van tekst, kunt u tekst in Dreamweaver nog steeds opmaken met HTML. Alinea's opmaken Gebruik het pop-upmenu Formaat in de HTML-eigenschappencontrole of het submenu Formaat> Alineaopmaak om de standaardtags voor alinea's en koppen toe te passen. 1 Plaats de invoegpositie in de alinea of selecteer wat tekst in de alinea.
239 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 2 Selecteer Formaat > Uitlijnen en selecteer een uitlijningsopdracht. Pagina-elementen centreren 1 Selecteer het element (afbeelding, invoegtoepassing, tabel of ander pagina-element) dat u wilt centreren. 2 Selecteer Formaat > Uitlijnen > Centreren Opmerking: U kunt volledige blokken tekst uitlijnen en centreren. U kunt niet een gedeelte van een kop of een gedeelte van een alinea uitlijnen of centreren.
240 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Witruimte tussen alinea's toevoegen De manier van werken van Dreamweaver lijkt op die van heel wat tekstverwerkingstoepassingen: om een nieuwe alinea te maken, drukt u op Enter (Windows) of op Return (Macintosh). Webbrowsers voegen automatisch een lege regel met witruimte in tussen alinea's. U kunt één regel witruimte tussen alinea's toevoegen door een regeleinde in te voegen. Een regeleinde toevoegen ❖ Druk op Enter (Windows) of Return (Macintosh).
241 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Lettertypecombinaties wijzigen 1 Selecteer Formaat> Lettertype > Lettertypenlijst bewerken. 2 Selecteer de lettertypecombinatie uit de lijst bovenaan in het dialoogvenster. De lettertypen in de geselecteerde combinatie worden weergegeven in de lijst Gekozen lettertypen in de linkerbenedenhoek van het dialoogvenster. Rechts ervan staat een lijst met alle beschikbare lettertypen die op uw computer zijn geïnstalleerd.
242 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 2 Voer een van de volgende handelingen uit: • Selecteer Invoegen > Datum. • Ga naar de categorie Algemeen in het paneel Invoegen en klik op de knop Datum. 3 Selecteer in het dialoogvenster dat wordt weergegeven een notatie voor de naam van de weekdag, een notatie voor de datum en een notatie voor de tijd. 4 Als u wilt dat de ingevoegde datum elke keer dat u het document opslaat wordt bijgewerkt, selecteert u Automatisch bijwerken bij opslaan.
243 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Een afbeelding invoegen Als u een afbeelding invoegt in een Dreamweaver-document, wordt een verwijzing naar het afbeeldingsbestand gegenereerd in de HTML-broncode. Deze verwijzing klopt alleen als het afbeeldingsbestand zich op de juiste site bevindt. Als het zich niet op de huidige site bevindt, wordt u door Dreamweaver gevraagd of u het bestand naar de site wilt kopiëren. U kunt afbeeldingen ook dynamisch invoegen.
244 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 5 Typ waarden in de tekstvakken Alternatieve tekst en Lange beschrijving en klik op OK. • In het tekstvak Alternatieve tekst typt u een naam of korte beschrijving voor de afbeelding. De schermlezer leest de informatie die u hier typt. Gebruik niet meer dan ongeveer 50 tekens. Voor langere beschrijvingen kunt u een koppeling gebruiken (in het tekstvak Lange beschrijving) naar een bestand dat meer informatie over de afbeelding bevat.
245 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Opmerking: U kunt deze waarden wijzigen om de weergavegrootte van dit exemplaar van de afbeelding aan te passen, maar dat heeft geen invloed op de downloadtijd, omdat de browser alle afbeeldingsgegevens downloadt voordat de grootte van de afbeelding wordt aangepast.
246 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Grootte opnieuw instellen Hiermee kunt u de B- en H-waarden opnieuw instellen op de oorspronkelijke grootte van de afbeelding. Deze knop wordt rechts van de tekstvakken B en H weergegeven als u de waarden voor de geselecteerde afbeelding wijzigt. Toegankelijkheidskenmerken van een afbeelding bewerken in code Als u toegankelijkheidskenmerken hebt ingevoegd voor een afbeelding, kunt u die waarden bewerken in de HTML-code.
247 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's De grootte van een afbeelding visueel wijzigen U kunt de grootte van elementen als afbeeldingen, insteekmodules, Shockwave- of SWF-bestanden, applets en ActiveX-besturingselementen visueel wijzigen in Dreamweaver. Als u de grootte van een afbeelding visueel wijzigt, kunt u zien hoe de afbeelding met verschillende afmetingen de indeling beïnvloedt, maar wordt het afbeeldingsbestand niet geschaald naar de door u opgegeven verhoudingen.
248 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 2 Klik op de knop Nieuw voorbeeld in de eigenschappencontrole voor de afbeelding. Opmerking: U kunt geen nieuw voorbeeld maken van voorlopige afbeeldingen of andere elementen dan bitmapafbeeldingen. Een voorlopige afbeelding invoegen Een voorlopige afbeelding is een afbeelding die u gebruikt totdat u de definitieve afbeelding kunt toevoegen aan een webpagina.
249 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Als u Fireworks hebt, kunt u een nieuwe afbeelding maken vanuit de voorlopige afbeelding in Dreamweaver. De nieuwe afbeelding krijgt dezelfde afmetingen als de voorlopige afbeelding. U kunt de afbeelding bewerken en vervolgens in Dreamweaver vervangen. 1 Voer een van de volgende handelingen uit in het documentvenster: • Dubbelklik op de voorlopige afbeelding.
250 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Grootte opnieuw instellen Hiermee kunt u de B- en H-waarden opnieuw instellen op de oorspronkelijke grootte van de afbeelding. Kleur Geeft een kleur voor de voorlopige afbeelding. Meer Help-onderwerpen “Fireworks gebruiken om voorlopige afbeeldingen uit Dreamweaver aan te passen” op pagina 378 Afbeeldingen bewerken in Dreamweaver U kunt afbeeldingen in Dreamweaver opnieuw samplen, bijsnijden, optimaliseren en scherper maken.
251 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Een afbeelding uitsnijden Met Dreamweaver kunt u bitmapafbeeldingen uitsnijden (of bijsnijden). Opmerking: Als u een afbeelding uitsnijdt, wordt het bronbestand van de afbeelding gewijzigd op de schijf. Bewaar daarom een back-upexemplaar van het afbeeldingsbestand voor het geval u de oorspronkelijke afbeelding weer wilt gebruiken.
252 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 4 Sla uw wijzigingen op door Bestand > Opslaan te selecteren, of keer terug naar de oorspronkelijke afbeelding door Bewerken > Verscherpen ongedaan maken te selecteren. Opmerking: U kunt het effect van de opdracht Verscherpen alleen ongedaan maken (en terugkeren naar het oorspronkelijke afbeeldingsbestand) als u de pagina met de afbeelding nog niet hebt opgeslagen.
253 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Vooraf laden van Rollover-afbeelding Hiermee worden afbeeldingen vooraf in het cachegeheugen van de browser geladen, zodat er geen vertraging optreedt als de gebruiker de aanwijzer over de afbeelding rolt. Alternatieve tekst (Optioneel) Tekst waarmee u de afbeelding beschrijft voor mensen die een browser met alleen tekst gebruiken.
254 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Als u geen bijgewerkte afbeelding ziet nadat u bent teruggekeerd naar het Dreamweaver-venster, selecteert u de afbeelding en klikt u op de knop Vernieuwen in de eigenschappencontrole. Een externe afbeeldingseditor instellen voor een bestaand bestandstype U kunt een afbeeldingseditor selecteren voor het openen en bewerken van grafische bestanden.
255 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 3 Selecteer in de lijst Editors de editor die u wilt wijzigen en ga vervolgens op een van de volgende manieren te werk: • Klik op de knop Toevoegen (+) of Verwijderen (–) boven de lijst Editors om een editor toe te voegen of te verwijderen. • Klik op de knop Primair maken om te wijzigen welke editor standaard wordt geopend voor het bewerken.
256 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's SWF-bestanden invoegen FLA-, SWF- en FLV-bestandstypen Voordat u Dreamweaver gebruikt om inhoud in te voegen die met Adobe Flash is gemaakt, moet u vertrouwd zijn met de volgende verschillende bestandstypen: FLA-bestand (.fla) Het bronbestand voor elk project, gemaakt in hulpprogramma voor het maken van Flash-objecten Dit type bestand kan alleen worden geopend in Flash (niet in Dreamweaver of in browsers).
257 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's In het documentvenster wordt een tijdelijke SWF-aanduiding weergegeven. De tijdelijke aanduiding heeft een blauwe omtrek met tabs. De tab geeft het type element (SWF-bestand) en de id van het SWF-bestand aan. Op de tab wordt ook een oogje weergegeven. Dit fungeert als schakeloptie tussen het SWFbestand en de downloadinformatie die gebruikers zien wanneer ze niet over de juiste versie van Flash Player beschikken. 3 Sla het bestand op.
258 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 2 Klik in de eigenschappencontrole (Venster > Eigenschappen) op de knop Afspelen. Klik op Stoppen om het voorbeeld te beëindigen. U kunt ook een voorbeeld van het SWF-bestand in de browser bekijken door op F12 te drukken. Als u alle SWF-bestanden op een pagina wilt bekijken, drukt u op Ctrl+Alt+Shift+P (Windows) of Command+Option+Shift+P (Macintosh). Alle SWF-bestanden zijn ingesteld op Afspelen.
259 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's transparanties bevat en u DHTML-elementen daarachter wilt weergeven. Selecteer de optie Venster om de parameter Wmode uit de code te verwijderen zodat het SWF-bestand boven andere DHTML-elementen wordt weergegeven. Afspelen Hiermee speelt u de film af in het venster Document. Parameters Hiermee wordt een dialoogvenster geopend waarin u extra parameters kunt invoeren die aan de film moeten worden doorgegeven.
260 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Net als met gewone SWF-bestanden voegt Dreamweaver wanneer u een FLV-bestand invoegt code in waarmee wordt gedetecteerd of de gebruiker over de juiste versie van Flash Player beschikt om de video weer te geven. Als de gebruiker niet over de correcte versie beschikt, wordt alternatieve inhoud op de pagina weergegeven waarmee de gebruiker wordt gevraagd de meest recente versie van Flash Player te downloaden.
261 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Automatisch afspelen Geeft aan of de video moet worden afgespeeld als de webpagina wordt geopend. Automatisch terugspoelen Geeft aan of het besturingselement voor afspelen terugkeert naar de beginpositie nadat de video helemaal is afgespeeld. 4 Klik op OK om het dialoogvenster te sluiten en het FLV-bestand toe te voegen aan uw webpagina.
262 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Buffertijd De tijd, in seconden, die moet worden gebruikt voor bufferen voordat wordt begonnen met het afspelen van de video. De standaardbuffertijd is ingesteld op 0, zodat het afspelen van de video meteen begint zodra er op de knop Afspelen wordt geklikt. (Als Automatisch afspelen is geselecteerd, wordt begonnen met het afspelen van de video zodra er verbinding is gemaakt met de server.
263 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Weergaveproblemen als gevolg van ontbrekende verwante bestanden De code die wordt gegenereerd door Dreamweaver CS4 en latere versies, vertrouwt op vier afhankelijke bestanden, anders dan het FLV-bestand zelf: • swfobject_modified.js • expressInstall.swf • FLVPlayer_Progressive.swf • Het skinbestand (bijvoorbeeld Clear_Skin_1.
264 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's • Let goed op wanneer u bestanden en mappen buiten Dreamweaver om verplaatst. Wanneer u bestanden en mappen buiten Dreamweaver om verplaatst, kan Dreamweaver de juiste paden naar FLV-verwante bestanden niet garanderen. • U kunt het FLV-bestand waarmee de problemen optreden, tijdelijk vervangen door een FLV-bestand waarvan u weet dat dit goed werkt.
265 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's U kunt ook een webwidget toevoegen aan een Dreamweaver-pagina (CS5.5 en hoger) door de volgende handelingen uit te voeren: 1 Blader in de Widgetbrowser naar My Widgets (Mijn widgets). 2 Selecteer de widget die u wilt toevoegen. 3 Klik op het pictogram voor slepen en neerzetten in Dreamweaver in de linkerbovenhoek van het tabblad Live View en houd het pictogram ingedrukt.
266 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's een bezoeker niet met luisteren hoeft te wachten totdat het hele bestand is gedownload. MP3-bestanden zijn echter groter dan Real Audio-bestanden, dus het downloaden van een heel nummer via een inbelverbinding (telefoonlijn) kan nog steeds behoorlijk lang duren. Voor het afspelen van mp3-bestanden moeten bezoekers een extra toepassing of insteekmodule downloaden en installeren, zoals QuickTime, Windows Media Player of RealPlayer. .ra, .ram, .
267 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 2 Blader naar het audiobestand en klik op OK. 3 Geef de breedte en hoogte op door de waarden in de desbetreffende tekstvakken in de eigenschappencontrole te typen of door het formaat te wijzigen van de voorlopige insteekmodule in het documentvenster. Deze waarden bepalen de grootte waarmee de besturingselementen voor geluid worden weergegeven in de browser.
268 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's toegangstoets gebruiken voor toegang tot het object. Als u bijvoorbeeld B typt als toegangstoets, gebruikt u Control+B om het object te selecteren in de browser. Tabindex Typ een getal voor de tabvolgorde van het formulierobject. Het instellen van een tabvolgorde is handig wanneer de pagina nog andere koppelingen en formulierobjecten bevat en de gebruiker deze in een specifieke volgorde moet doorlopen.
269 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Bestandsnaamextensies, zoals .gif, .wav en .mpg, worden links onder Extensies weergegeven. Gekoppelde editors voor een geselecteerde extensie worden rechts onder Editors weergegeven. 2 Selecteer de bestandstype-extensie in de lijst Extensies en ga op een van de volgende manieren te werk: • Klik op de knop Plus (+) boven de lijst Editors en vul het dialoogvenster in dat wordt weergegeven om een nieuwe editor te koppelen aan het bestandstype.
270 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Shockwave-films invoegen U kunt Dreamweaver gebruiken om Shockwave-films in te voegen in uw documenten. Adobe® Shockwave®, een standaard voor interactieve multimedia op het web, is een gecomprimeerde indeling waarmee mediabestanden die zijn gemaakt in Adobe® Director®, snel kunnen worden gedownload en afgespeeld door de meeste populaire browsers.
271 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's In de eigenschappencontrole worden aanvankelijke de meest gebruikte eigenschappen weergegeven. Klik op de uitvouwpijl in de rechterbenedenhoek om alle eigenschappen te zien.
272 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Het afspelen van inhoud voor insteekmodules stoppen ❖ Selecteer een media-element en selecteer Beeld > Insteekmodules > Stoppen of klik op de knop Stoppen in de eigenschappencontrole. U kunt ook Beeld > Insteekmodules > Alles stoppen selecteren om het afspelen van alle inhoud voor insteekmodules te stoppen.
273 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's ActiveX-eigenschappen In de eigenschappencontrole worden aanvankelijke de meest gebruikte eigenschappen weergegeven. Klik op de uitvouwpijl in de rechterbenedenhoek om alle eigenschappen te zien. Naam Hiermee geeft u een naam op waarmee het ActiveX-object wordt aangeduid voor scripts. Typ een naam in het tekstvak zonder label helemaal links in de eigenschappencontrole. B en H De breedte en hoogte van het object in pixels.
274 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Eigenschappen van Java-applet In de eigenschappencontrole worden aanvankelijke de meest gebruikte eigenschappen weergegeven. Klik op de uitvouwpijl in de rechterbenedenhoek om alle eigenschappen te zien. Naam Hiermee geeft u een naam op waarmee de applet wordt aangeduid voor scripts. Typ een naam in het tekstvak zonder label helemaal links in de eigenschappencontrole. B en H De breedte en hoogte van de applet in pixels.
275 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Parameters gebruiken voor het beheren van mediaobjecten Definieer speciale parameters voor het besturen van Shockwave- en SWF-bestanden, ActiveX-besturingselementen, insteekmodules voor Netscape Navigator en Java-applets. Parameters worden gebruikt met de object-, embed- en applet-tag. Met parameters worden kenmerken ingesteld die specifiek zijn voor verschillende objecttypen.
276 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Opgeslagen opdrachten worden permanent vastgehouden (tenzij u deze verwijdert), terwijl vastgelegde opdrachten worden gewist wanneer u Adobe® Dreamweaver® CS5 afsluit. Gekopieerde reeksen stappen worden gewist wanneer u iets anders kopieert.
277 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Het aantal stappen instellen dat het paneel Historie vasthoudt en weergeeft Voor de behoeften van de meeste gebruikers is het standaardaantal stappen voldoende. Hoe groter het aantal, des te meer geheugen het paneel Historie vereist, hetgeen de prestaties negatief kan beïnvloeden en uw computer aanmerkelijk langzamer kan maken. 1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).
278 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Een selectie maken of uitbreiden ❖ Houd Shift ingedrukt terwijl u op een pijltoets drukt. Als er een zwarte lijn verschijnt om een muisbeweging aan te geven terwijl u een taak uitvoert die u later wilt herhalen, kunt u vóór die stap een bewerking voor ongedaan maken uitvoeren en een andere benadering proberen, bijvoorbeeld door de pijltoetsen te gebruiken.
279 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's 9 Selecteer in het paneel Historie de stappen die overeenkomen met het instellen van de afstanden van de afbeelding en het selecteren van de volgende afbeelding. Klik op Opnieuw afspelen om die stappen opnieuw af te spelen. De afstanden van de huidige afbeelding worden gewijzigd en de volgende afbeelding wordt geselecteerd. 10 Blijf klikken op Opnieuw afspelen totdat alle afbeeldingen zijn voorzien van de juiste afstanden.
280 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Opdrachten uit historiestappen maken en gebruiken Sla een reeks historiestappen op als een benoemde opdracht, die vervolgens beschikbaar komt in het menu Opdrachten. Maak een nieuwe opdracht en sla deze op als u de reeks stappen de volgende keer dat u Dreamweaver start mogelijk opnieuw kunt gebruiken. Een opdracht maken 1 Selecteer een stap of een reeks stappen in het paneel Historie.
281 DREAMWEAVER GEBRUIKEN Inhoud toevoegen aan pagina's Een vastgelegde opdracht afspelen ❖ Selecteer Opdrachten > Opgenomen opdracht afspelen of druk op Control+Shift+R (Windows) of Command+Shift+R (Macintosh). Een vastgelegde opdracht opslaan 1 Selecteer Opdrachten > Opgenomen opdracht afspelen. 2 Selecteer de stap Opdracht uitvoeren die in de stappenlijst van het paneel Historie verschijnt, en klik vervolgens op de knop Opslaan als opdracht. 3 Geef een naam op voor de opdracht en klik op OK.
282 Hoofdstuk 9: Koppelingen en navigatie Over koppelingen en navigatie 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.
283 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie Absolute paden Absolute paden bevatten de volledige URL van het gekoppelde document, met inbegrip van het bijbehorende protocol (meestal http:// voor webpagina's). Voorbeeld: http://www.adobe.com/support/dreamweaver/contents.html. Voor een afbeelding kan de volledige URL bijvoorbeeld http://www.adobe.com/support/dreamweaver/images/image1.jpg zijn.
284 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie Wanneer u een groep bestanden verplaatst, bijvoorbeeld een hele map zodat alle bestanden in de map dezelfde relatieve paden behouden, hoeft u de documentafhankelijke relatieve paden tussen deze bestanden niet bij te werken. Als u echter een enkel bestand verplaatst dat documentafhankelijke relatieve koppelingen bevat of een bestand waarnaar wordt verwezen door een documentafhankelijke relatieve koppeling, moet u deze koppelingen bijwerken.
285 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie Belangrijk: Sla nieuwe bestanden altijd op voordat u een documentafhankelijk relatief pad maakt. Een dergelijk pad is niet geldig als het beginpunt nog niet is vastgesteld. Als u een documentafhankelijk relatief pad maakt voordat het bestand wordt opgeslagen, gebruikt Dreamweaver een tijdelijk absoluut pad dat begint met file:// totdat het bestand is opgeslagen. Wanneer u het bestand opslaat, converteert Dreamweaver het absolute pad naar een relatief pad.
286 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie • _parent laadt het gekoppelde document in een bovenliggend 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 document geladen in het volledige browservenster. • _self laadt het gekoppelde document in het frame of venster waarin de koppeling zich bevindt. Dit doel is de standaardinstelling, zodat u deze instelling gewoonlijk niet hoeft te definiëren.
287 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie In het vervolgkeuzemenu worden de namen van alle benoemde frames in het huidige document weergegeven. Als u een frame opgeeft dat niet bestaat, wordt de gekoppelde pagina geopend in een nieuw venster met de opgegeven naam. U kunt ook een van de volgende gereserveerde doelnamen selecteren: • _blank laadt het gekoppelde bestand in een nieuw naamloos browservenster.
288 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie Koppelingen maken naar specifieke locaties in een document In de eigenschappencontrole kunt u koppelingen maken naar een specifieke locatie in een document door eerst benoemde ankers te maken. Met benoemde ankers kunt u locaties in een document markeren. Dit wordt vaak gedaan bij een bepaald onderwerp of bovenaan een document. U kunt vervolgens koppelingen naar deze benoemde ankers maken, waarmee de bezoeker snel naar de opgegeven locatie kan gaan.
289 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie • 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. E-mailkoppelingen maken Als u op een e-mailkoppeling klikt, wordt een blanco berichtvenster geopend in de e-mailtoepassing die is ingesteld in de browser van de gebruiker.
290 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie Null-koppelingen maken 1 Selecteer tekst, een afbeelding of een object in de ontwerpweergave van het documentvenster. 2 Typ javascript:; (het woord javascript, gevolgd door een dubbele punt, gevolgd door een puntkomma) in het vak Koppelingen in de eigenschappencontrole. Scriptkoppelingen maken 1 Selecteer tekst, een afbeelding of een object in de ontwerpweergave van het documentvenster.
291 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie Het kan even duren voordat de cache van een grote site is geladen omdat Dreamweaver moet controleren of de cache is bijgewerkt door de tijdstempel van de bestanden in de lokale site te vergelijken met de tijdstempel die is geregistreerd in de cache. Als u geen bestanden buiten Dreamweaver hebt gewijzigd, kunt u gerust op de Stop-knop klikken wanneer deze wordt weergegeven.
292 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie Meer Help-onderwerpen “Zoeken naar verbroken, externe en zwevende koppelingen” op pagina 296 “Verbroken koppelingen herstellen” op pagina 297 Snelmenu's Over snelmenu's Een snelmenu is een pop-upmenu met koppelingen naar documenten of bestanden dat zichtbaar is voor bezoekers van de site.
293 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie De knop Ga naar invoegen na het menu Schakel dit selectievakje in om een Ga naar-knop in te voegen in plaats van een selectieverzoek. Het eerste item na wijziging van de URL selecteren Schakel dit selectievakje in wanneer u een selectieverzoek ("Maak een keuze:") hebt ingesteld als eerste menuonderdeel.
294 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie Meer Help-onderwerpen “Werken met de menubalkwidget” op pagina 444 Afbeeldingen met hyperlinks 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).
295 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie In het vervolgkeuzemenu worden de namen van alle benoemde frames in het huidige document weergegeven. Als u een frame opgeeft dat niet bestaat, wordt de gekoppelde pagina geladen in een nieuw venster met de opgegeven naam. U kunt ook een van de volgende gereserveerde doelnamen selecteren: • _blank laadt het gekoppelde bestand in een nieuw naamloos browservenster.
296 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie Problemen met koppelingen oplossen Zoeken naar verbroken, externe en zwevende koppelingen 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.
297 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie U kunt zoeken naar zwevende bestanden wanneer u koppelingen controleert op de hele site. 5 Sla rapporten op door op de knop Rapport opslaan in het paneel Koppelingencontrole te klikken. Koppelingen in de hele site controleren 1 Selecteer in het vervolgkeuzemenu Huidige sites in het paneel Bestanden een site. 2 Selecteer Site > Koppelingen op de hele site controleren.
298 DREAMWEAVER GEBRUIKEN Koppelingen en navigatie Dreamweaver opent het bestand, selecteert de verbroken verwijzing of koppeling en markeert het pad en de bestandsnaam in de eigenschappencontrole. (Als de eigenschappencontrole niet wordt weergegeven, selecteert u Venster > Eigenschappen.) 3 Als u een nieuw pad en een nieuwe bestandsnaam wilt instellen in de eigenschappencontrole, klikt u op het mappictogram om naar het gewenste bestand te bladeren of typt u over de gemarkeerde tekst heen.
299 Hoofdstuk 10: Pagina's voorvertonen 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. Live weergave biedt een nauwkeurigere weergave en geeft u de mogelijkheid om in de codeweergave te werken en de wijzigingen in het ontwerp te bekijken. Met de functie Voorvertoning in browser kunt u zien hoe pagina's er in specifieke browsers uitzien.
300 DREAMWEAVER GEBRUIKEN Pagina's voorvertonen 2 Klik op de knop Live View. 3 (Optioneel) Breng wijzigingen aan in de codeweergave, in het deelvenster CSS-stijlen, in een extern CSS-stijlblad of in een ander verwant bestand. De opties voor het bewerken van andere gebieden (bijvoorbeeld in het deelvenster CSS-stijlen of in de codeweergave) veranderen zodra u in Live weergave klikt, ook al kunt u niet bewerken in de live weergave.
301 DREAMWEAVER GEBRUIKEN Pagina's voorvertonen Opties van live weergave Naast de optie JavaScript bevriezen, zijn nog enkele andere opties beschikbaar in het pop-upmenu van de knop Live weergave of via het menu-item Weergave > Live weergave-opties. JavaScript bevriezen Hiermee worden elementen die door JavaScript worden beïnvloed, in hun huidige toestand bevroren.
302 DREAMWEAVER GEBRUIKEN Pagina's voorvertonen 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.
303 DREAMWEAVER GEBRUIKEN Pagina's voorvertonen Met F12 (Windows) of Option+F12 (Macintosh) opent u de primaire browser en met Control+F12 (Windows) of Command+F12 (Macintosh) opent u de secundaire browser. 6 Selecteer Voorvertonen met een tijdelijk bestand om een tijdelijke kopie te maken voor het bekijken van een voorbeeld en het oplossen van fouten op de server. (Schakel deze optie uit als u het document rechtstreeks wilt bijwerken.
304 Hoofdstuk 11: Werken met paginacode Algemene informatie over coderen in Dreamweaver Meer Help-onderwerpen “Coderingstips” op pagina 316 “Codeervoorkeuren instellen” op pagina 311 “Sneltoetsen aanpassen” op pagina 310 “Pagina's XHTML-compatibel maken” op pagina 339 “Zoeken naar tags, kenmerken of tekst in code” op pagina 331 “Zoekpatronen opslaan en terughalen” op pagina 331 “De werkruimte optimaliseren voor visuele ontwikkeling” op pagina 577 “Databaserecords weergeven” op pagina 610 Ondersteunde tale
305 DREAMWEAVER GEBRUIKEN Werken met paginacode U kunt ook voorkeuren instellen voor het automatisch herschrijven van diverse soorten ongeldige code wanneer u een document opent. Automatische codewijzigingen U kunt opties instellen die Dreamweaver de opdracht geven zelfgeschreven code automatisch op te schonen op basis van criteria die u opgeeft.
306 DREAMWEAVER GEBRUIKEN Werken met paginacode XHTML-vereiste Acties die Dreamweaver uitvoert In het document moet een DOCTYPE-declaratie staan vóór het rootelement en die declaratie moet verwijzen naar een van de drie DTDbestanden (Document Type Definition) voor XHTML (Strict, Transitional of Frameset). Er wordt een XHTML DOCTYPE toegevoegd aan een XHTMLdocument.
307 DREAMWEAVER GEBRUIKEN Werken met paginacode XHTML-vereiste Acties die Dreamweaver uitvoert Voor kenmerken met opsommingswaarden moeten de waarden in kleine letters worden weergegeven. Opsommingswaarden worden weergegeven in kleine letters in de code die wordt gegenereerd en wanneer XHTML wordt opgeschoond. 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.
308 DREAMWEAVER GEBRUIKEN Werken met paginacode Teken Vindt Voorbeeld [^abc] Elk teken dat niet tussen de haakjes staat. U Met [^aeiou] vindt u in eerste instantie “r” in “oranje”, “b” in kunt een tekenbereik opgeven met een “boek” en “k” in “eikel” koppelteken (bijvoorbeeld [^a-f] komt overeen met [^abcdef]). \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.
309 DREAMWEAVER GEBRUIKEN Werken met paginacode Als u de code in een codeblok handmatig wijzigt, kunt u het servergedrag niet meer bewerken via panelen zoals de panelen Bindingen en Servergedrag. Dreamweaver zoekt naar specifieke patronen in de paginacode om servergedrag te detecteren en weer te geven in het paneel Servergedrag. Als u de code in een codeblok op enigerlei wijze verandert, kan Dreamweaver het servergedrag niet meer detecteren en weergeven in het paneel Servergedrag.
310 DREAMWEAVER GEBRUIKEN Werken met paginacode Een pagina tegelijk coderen en bewerken in het documentvenster 1 Selecteer Beeld > Code en ontwerp. De code wordt weergegeven in het bovenste deelvenster en de pagina in het onderste deelvenster. 2 Als u de pagina bovenaan wilt weergeven, selecteert u Ontwerpweergave bovenaan in het menu Weergaveopties op de werkbalk Document. 3 Als u de afmetingen van de deelvensters in het documentvenster wilt wijzigen, sleept u de splitsbalk naar de gewenste positie.
311 DREAMWEAVER GEBRUIKEN Werken met paginacode Bestanden standaard openen in de codeweergave Wanneer u een bestandstype opent dat normaal gesproken geen HTML bevat (zoals een JavaScript-bestand), wordt het bestand geopend in de codeweergave (of in de codecontrole) in plaats van de ontwerpweergave. U kunt opgeven welke bestandstypen in de codeweergave moeten worden geopend. 1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh).
312 DREAMWEAVER GEBRUIKEN Werken met paginacode Ongeldige code markeren Als u deze optie inschakelt, markeert Dreamweaver alle ongeldige HTML-code in geel. Wanneer u een ongeldige tag selecteert, wordt in de eigenschappencontrole informatie weergegeven over de manier waarop de fout kan worden gecorrigeerd. Syntaxiskleuring Hiermee kunt u codekleuren in- of uitschakelen. Zie “Codekleuren instellen” op pagina 315 voor informatie over het wijzigen van het kleurenschema.
313 DREAMWEAVER GEBRUIKEN Werken met paginacode correct wordt weergegeven op de externe server. Deze instelling is ook handig als u werkt met een externe teksteditor die alleen bepaalde soorten regeleinden herkent. Gebruik bijvoorbeeld CR LF (Windows) als Kladblok uw externe editor is en gebruik CR (Macintosh) als SimpelTekst uw externe editor is. Opmerking: Voor servers waarmee u verbinding maakt via FTP is deze optie alleen van toepassing op de binaire overdrachtsmodus.
314 DREAMWEAVER GEBRUIKEN Werken met paginacode Voorkeuren voor het herschrijven van code instellen Met de voorkeuren voor het herschrijven van code kunt u opgeven of en hoe Dreamweaver de code moet wijzigen wanneer u documenten opent, formulierelementen kopieert en plakt en kenmerkwaarden en URL's invoert met hulpmiddelen, zoals de eigenschappencontrole. Deze voorkeuren zijn niet van toepassing wanneer u HTML of scripts bewerkt in de codeweergave.
315 DREAMWEAVER GEBRUIKEN Werken met paginacode Codekleuren instellen Met de voorkeuren voor codekleuren kunt u kleuren instellen voor algemene categorieën tags en code-elementen, zoals formuliertags of JavaScript-id's. Als u de kleurvoorkeuren voor een bepaalde tag wilt wijzigen, bewerkt u de tagdefinitie in de tagbibliotheek-editor. 1 Selecteer Bewerken > Voorkeuren (Windows) of Dreamweaver > Voorkeuren (Macintosh). 2 Selecteer Codekleuren in de lijst Categorie aan de linkerkant.
316 DREAMWEAVER GEBRUIKEN Werken met paginacode 2 Selecteer Bestandstypen/editors in de lijst Categorie links, stel de opties in en klik op OK. Openen in de codeweergave Hiermee geeft u de bestandsextensies op die automatisch moeten worden geopend in de codeweergave. Externe code-editor Hiermee kunt u de teksteditor opgeven die moet worden gebruikt.
317 DREAMWEAVER GEBRUIKEN Werken met paginacode • ASP JavaScript • ASP.NET C# • ASP.NET VB • ASP VBScript • CSS2 en CSS3 • DOM (Document Object Model) • HTML4 en HTML5 • 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.
318 DREAMWEAVER GEBRUIKEN Werken met paginacode • Als u een waarde wilt wijzigen, verwijdert u de waarde en voegt u een waarde toe, zoals wordt beschreven in de vorige procedure. Coderingstips voor JavaScript vernieuwen Dreamweaver vernieuwt automatisch de lijst met beschikbare coderingstips terwijl u in JavaScript-bestanden werkt. Stel, u werkt in een primair HTML-bestand en schakelt over naar een JavaScript-bestand om een wijziging aan te brengen.
319 DREAMWEAVER GEBRUIKEN Werken met paginacode Menu's Hiermee kunt u precies bepalen welk type coderingstips tijdens het typen moeten worden weergegeven. U kunt alle of sommige menu's gebruiken.
320 DREAMWEAVER GEBRUIKEN Werken met paginacode Opmerking: Als het geselecteerde raamwerk Drupal of Joomla is, wordt in het dialoogvenster Tips voor sitespecifieke code een extra pad weergegeven naar een bestand in de Dreamweaver-configuratiemap. Dit bestand is vereist wanneer u deze raamwerken gebruikt en moet niet worden verwijderd.
321 DREAMWEAVER GEBRUIKEN Werken met paginacode Site scannen op bestandsextensies Gebruik het dialoogvenster Extensie(s) zoeken om de bestandsextensies die zijn opgenomen in de sitestructuur, weer te geven en te bewerken. 1 Klik op de knop Extensies in het dialoogvenster Tips voor sitespecifieke code. In het dialoogvenster Extensie(s) zoeken worden de extensies weergegeven waarop momenteel wordt gescand.
322 DREAMWEAVER GEBRUIKEN Werken met paginacode Ongeldige code markeren Markeer ongeldige code geel. Syntaxisfoutwaarschuwingen in Infobalk Hiermee schakelt u de weergave in of uit van een informatiebalk boven aan de pagina waarop waarschuwingen over syntaxisfouten worden weergegeven. Wanneer Dreamweaver een syntaxisfout detecteert, wordt in de syntaxisfoutinformatie de regel in de code vermeld waar de fout voorkomt.
323 DREAMWEAVER GEBRUIKEN Werken met paginacode Meer Help-onderwerpen “Controleren of tags en haakjes in evenwicht zijn” op pagina 336 “Overzicht van de werkbalk Codering” op pagina 12 “Werkbalken weergeven” op pagina 22 Code invoegen met het paneel Invoegen 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.
324 DREAMWEAVER GEBRUIKEN Werken met paginacode Meer Help-onderwerpen “De tagbibliotheken van Dreamweaver” op pagina 354 HTML-commentaar invoegen Commentaar is beschrijvende tekst die u in de HTML-code invoegt om de code toe te lichten of om andere informatie te bieden. De tekst van het commentaar is alleen zichtbaar in de codeweergave en wordt niet weergegeven in een browser. Commentaar invoegen op de invoegpositie ❖ Selecteer Invoegen > Commentaar.
325 DREAMWEAVER GEBRUIKEN Werken met paginacode Code bewerken met het contextmenu Coderen 1 Selecteer een stuk code in de codeweergave en klik met de rechtermuisknop (Windows) of met ingedrukte Control- toets (Macintosh). 2 Selecteer een van de volgende opties in het vervolgmenu Selectie: Selectie samenvouwen Hiermee vouwt de geselecteerde code samen. Buitenste selectie samenvouwen Hiermee vouwt u alle code buiten de geselecteerde code samen.
326 DREAMWEAVER GEBRUIKEN Werken met paginacode Uitspringen Hiermee verschuift u de selectie naar links. Alle tags verwijderen Hiermee kunt u alle tags in de selectie verwijderen. Lijnen converteren naar tabel Hiermee plaatst u een table-tag zonder kenmerken rond de selectie. Regeleinden toevoegen Hiermee voegt u br-tag toe aan het einde van elke regel van de selectie.
327 DREAMWEAVER GEBRUIKEN Werken met paginacode Naar gerelateerde code navigeren In de codenavigator wordt een lijst weergegeven met codebronnen die betrekking hebben op een bepaalde selectie op uw pagina. Gebruik deze lijst om naar gerelateerde codebronnen te gaan, zoals interne of externe CSS-regels, includes aan serverzijde, externe JavaScript-bestanden, bovenliggende sjabloonbestanden, bibliotheekbestanden en iframebronbestanden.
328 DREAMWEAVER GEBRUIKEN Werken met paginacode Meer Help-onderwerpen “Verwante bestanden openen” op pagina 70 Zelfstudie codenavigator Naar een JavaScript- of VBScript-functie gaan In de codeweergave en de codecontrole kunt u een lijst weergeven met alle JavaScript- of VBScript-functies in uw code en naar een van die functies springen. 1 Geef het document weer in de codeweergave (Weergave > Code) of de codecontrole (Venster > Codecontrole).
329 DREAMWEAVER GEBRUIKEN Werken met paginacode Ga naar www.adobe.com/go/dw10javascript_nl voor een video-overzicht van het technische Dreamweaver-team over JavaScript-ondersteuning in Dreamweaver. De JavaScript Extractor gebruiken: 1 Open een pagina die JavaScript bevat (bijvoorbeeld een Spry-pagina). 2 Kies Opdrachten > JavaScript extern maken. 3 Bewerk indien nodig de standaardselecties van het dialoogvenster JavaScript extern maken.
330 DREAMWEAVER GEBRUIKEN Werken met paginacode Fragmenten die -tags en andere verouderde elementen en kenmerken bevatten, bevinden zich in de map Legacy in het paneel Fragmenten. Een codefragment invoegen 1 Plaats de invoegpositie op de locatie waar u het codefragment wilt invoegen of selecteer de code waar u het fragment omheen wilt plaatsen. 2 Dubbelklik op het fragment in het paneel Fragmenten (Venster > Fragmenten).
331 DREAMWEAVER GEBRUIKEN Werken met paginacode Een sneltoets voor een fragment toevoegen of bewerken 1 Klik met de rechtermuisknop (Windows) of met ingedrukte Control-toets (Macintosh) in het paneel Fragmenten en selecteer Sneltoetsen bewerken. De Sneltoetseditor verschijnt. 2 Selecteer Fragmenten in het pop-upmenu Opdrachten. Er verschijnt een lijst met fragmenten. 3 Selecteer een fragment en wijs er een sneltoets aan toe. Zie “Sneltoetsen aanpassen” op pagina 35 voor meer informatie.
332 DREAMWEAVER GEBRUIKEN Werken met paginacode Een zoekpatroon opslaan 1 Stel in het dialoogvenster Zoeken en vervangen (Bewerken > Zoeken en vervangen) de parameters voor de zoekopdracht in. 2 Klik op de knop Query opslaan (het schijfpictogram). 3 In het dialoogvenster dat verschijnt, navigeert u naar de map waarin u query's wilt opslaan. Typ een bestandsnaam voor de query en klik op Opslaan. Als u met het zoekpatroon wilt zoeken naar img-tags zonder alt-kenmerk, kunt u de query img_geen_alt.
333 DREAMWEAVER GEBRUIKEN Werken met paginacode Bladeren in de inhoud van het paneel Referentie 1 Als u tags, objecten of stijlen uit een ander boek wilt weergeven, selecteert u een ander boek in het pop-upmenu Boek. 2 Als u informatie over een bepaald item wilt weergeven, selecteert u dit in het pop-upmenu Tag, Object, Stijl of CFML (afhankelijk van het geselecteerde boek).
334 DREAMWEAVER GEBRUIKEN Werken met paginacode Soms wordt niet exact het geselecteerde codefragment samengevouwen. Dreamweaver gebruikt “intelligent samenvouwen” om de code samen te vouwen tot de meest gangbare en visueel aantrekkelijke selectie. Als u bijvoorbeeld een ingesprongen tag selecteert en vervolgens ook de ingesprongen spaties voor de tag selecteert, vouwt Dreamweaver niet de ingesprongen spaties samen, omdat de meeste gebruikers verwachten dat hun inspringingen behouden blijven.
335 DREAMWEAVER GEBRUIKEN Werken met paginacode Meer Help-onderwerpen “Code invoegen met de werkbalk Codering” op pagina 321 “Code opschonen” op pagina 335 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. Opmerking: U kunt een codefragment plakken in andere toepassingen, maar in dat geval blijft de code niet samengevouwen.
336 DREAMWEAVER GEBRUIKEN Werken met paginacode Overbodige geneste tags verwijderen Hiermee verwijdert u alle overbodige exemplaren van een tag. In de code Dit is wat ik werkelijk wilde zeggen zijn bijvoorbeeld de b-tags rond het woord werkelijkoverbodig. Deze worden verwijderd. Niet-Dreamweaver HTML-commentaar verwijderen Hiermee verwijdert u alle commentaar dat niet is ingevoegd door Dreamweaver.
337 DREAMWEAVER GEBRUIKEN Werken met paginacode Alle codes tussen de omsluitende haakjes of accolades wordt geselecteerd. Als u nogmaals Bewerken > Accolades balanceren selecteert, wordt alle code tussen de haakjes of accolades rondom de nieuwe selectie geselecteerd. Controleren op browsercompatibiliteit Met behulp van de functie voor de controle van de browsercompatibiliteit kunt u combinaties van HTML en CSS opsporen die voor problemen zorgen in bepaalde browsers.
338 DREAMWEAVER GEBRUIKEN Werken met paginacode 2 Klik op Live View. 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.
339 DREAMWEAVER GEBRUIKEN Werken met paginacode U kunt meerdere versies van dezelfde tagbibliotheek of taal selecteren. Als u bijvoorbeeld HTML 4.0 selecteert, kunt u ook HTML 3.2 of HTML 2.0 selecteren. Selecteer de vroegste versie aan de hand waarvan u de code wilt valideren. Als een document bijvoorbeeld geldige HTML 2.0-code bevat, zal dit ook geldige HTML 4.0-code zijn. 4 Klik op Opties en stel opties voor die bibliotheken in.
340 DREAMWEAVER GEBRUIKEN Werken met paginacode Een bestaand HTML-document XHTML-compatibel maken 1 Open een document en voer een van de volgende handelingen uit: • Voor een document zonder frames selecteert u Bestand > Converteren. Selecteer daarna een van de XHTMLdocumenttypedefinities. U kunt een HTML-document bijvoorbeeld XHTML-compatibel maken door XHTML 1.0 Transitional of XHTML 1.
341 DREAMWEAVER GEBRUIKEN Werken met paginacode De categorie Uitzonderingen verschijnt als de server een of meer problemen op de pagina heeft aangetroffen. Vouw de categorie uit om meer informatie over het probleem weer te geven. 4 Ga terug naar de codeweergave (Weergave > Code) of ontwerpweergave (Weergave > Ontwerp) en herstel de fout. 5 Sla het bestand op en klik nogmaals op het pictogram Fouten op server opsporen.
342 DREAMWEAVER GEBRUIKEN Werken met paginacode Opmerking: U kunt de kenmerken van een tag weergeven en bewerken met de tagcontrole en met de eigenschappencontrole. Met de tagcontrole kunt u elk kenmerk van een bepaalde tag weergeven en bewerken. In de eigenschappencontrole worden alleen de meest gangbare kenmerken weergegeven, maar dit onderdeel biedt uitgebreidere mogelijkheden om de waarden van die kenmerken te wijzigen.
343 DREAMWEAVER GEBRUIKEN Werken met paginacode • Als u de waarde van het kenmerk wilt verwijderen, selecteert u de waarde en drukt u op Backspace (Windows) of Delete (Macintosh). • Als u de naam van een kenmerk wilt wijzigen, selecteert u de naam en bewerkt u deze. Opmerking: Als u de naam van een standaardkenmerk wijzigt en vervolgens een waarde toevoegt voor dat kenmerk, worden het kenmerk en de nieuwe waarde naar de juiste categorie verplaatst.
344 DREAMWEAVER GEBRUIKEN Werken met paginacode Meer Help-onderwerpen “Scripts schrijven en bewerken in de ontwerpweergave” op pagina 346 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.
345 DREAMWEAVER GEBRUIKEN Werken met paginacode Het menu met tips gebruiken in de Snelle tageditor De Snelle tageditor bevat een menu met tips dat alle geldige kenmerken vermeldt voor de tag die u bewerkt of invoegt. U kunt dit menu uitschakelen of de vertraging aanpassen voordat het menu in de Snelle tageditor verschijnt. Als u een menu wilt weergeven met geldige kenmerken voor een tag, wacht u even terwijl u de naam van een kenmerk bewerkt in de Snelle tageditor.
346 DREAMWEAVER GEBRUIKEN Werken met paginacode 3 Als u een tag wilt bewerken, selecteert u Tag bewerken in het menu. Breng de gewenste wijzigingen aan in de Snelle tageditor. Zie “Code bewerken met de Snelle tageditor” op pagina 343 voor meer informatie. 4 Als u een tag wilt verwijderen, selecteert u Tag verwijderen in het menu. Een object selecteren dat overeenkomt met een tag 1 Klik in het document. De tags die van toepassing zijn op de invoegpositie worden weergegeven in de tagkiezer.
347 DREAMWEAVER GEBRUIKEN Werken met paginacode Een script bewerken 1 Selecteer de scriptmarkering. 2 Klik in de eigenschappencontrole op de knop Bewerken. Het script verschijnt in het dialoogvenster Scripteigenschappen. Als u een koppeling naar een extern scriptbestand had toegevoegd, wordt het bestand geopend in de codeweergave waar u wijzigingen kunt aanbrengen.
348 DREAMWEAVER GEBRUIKEN Werken met paginacode Werken met de kopinhoud van pagina's Pagina's bevatten elementen die de informatie op de pagina beschrijven en die door zoekmachines worden gebruikt. U kunt de eigenschappen van head-elementen instellen om te bepalen hoe uw pagina's worden geïdentificeerd. Kopinhoud weergeven en bewerken U kunt de elementen in de kopsectie van een document weergeven via het menu Weergave, de codeweergave van het documentvenster of de codecontrole.
349 DREAMWEAVER GEBRUIKEN Werken met paginacode Waarde Hiermee geeft u het type informatie aan dat u in deze tag verstrekt. Sommige waarden, zoals description, keywords en refresh, zijn al goed gedefinieerd (en hebben hun eigen eigenschappencontroles in Dreamweaver), maar u kunt nagenoeg elke waarde opgeven (bijvoorbeeld creationdate, documentID of level). Inhoud Hier kunt u de daadwerkelijke informatie opgeven.
350 DREAMWEAVER GEBRUIKEN Werken met paginacode De meta-tag Beschrijving toevoegen 1 Selecteer Invoegen > HTML > Koptags > Beschrijving. 2 Voer een beschrijvende tekst in in het dialoogvenster dat verschijnt. De meta-tag Beschrijving bewerken 1 Selecteer Weergave > Kopinhoud. 2 Selecteer de markering Beschrijving, die boven aan het documentvenster wordt weergegeven. 3 In de eigenschappencontrole kunt u nu de beschrijvende tekst bekijken, wijzigen of verwijderen.
351 DREAMWEAVER GEBRUIKEN Werken met paginacode 2 Selecteer de markering Basis, die boven aan het documentvenster wordt weergegeven. 3 Stel in de eigenschappencontrole de eigenschappen van de meta-tag Basis in. De eigenschappen van de meta-tag Basis instellen ❖ Stel de eigenschappen van de meta-tag Basis als volgt in: Href Geef hier de basis-URL op. Klik op de knop Bladeren om een bestand te selecteren of typ een pad in het vak.
352 DREAMWEAVER GEBRUIKEN Werken met paginacode Rel Hier kunt u de relatie tussen het huidige document en het document in het tekstvak Href opgeven. De mogelijke waarden zijn: Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help en Bookmark. Als u meer dan één relatie wilt opgeven, scheidt u de waarden met een spatie.
353 DREAMWEAVER GEBRUIKEN Werken met paginacode Er bestaan twee soorten include-bestanden: Virtueel en Bestand. Dreamweaver voegt standaard includes van het bestandstype in, maar met de eigenschappencontrole kunt u het type selecteren dat geschikt is voor het type webserver dat u gebruikt: • Als u een Apache-webserver gebruikt, selecteert u Virtueel. In Apache werkt Virtueel in alle gevallen, terwijl Bestand slechts in bepaalde gevallen werkt.
354 DREAMWEAVER GEBRUIKEN Werken met paginacode Wijzigen welk bestand wordt ingesloten 1 Selecteer het include-bestand in het documentvenster. 2 Open de eigenschappencontrole (Venster > Eigenschappen). 3 Voer een van de volgende handelingen uit: • Klik op het mappictogram en selecteer het nieuwe bestand dat u wilt insluiten. • Typ het pad en de bestandsnaam van het nieuwe bestand dat u wilt insluiten in het vak.
355 DREAMWEAVER GEBRUIKEN Werken met paginacode Opmerking: Als u op Annuleren klikt, worden alle wijzigingen die u in de tagbibliotheek-editor hebt aangebracht, genegeerd. Als u een tag of tagbibliotheek hebt verwijderd, wordt deze hersteld. Bibliotheken, tags en kenmerken toevoegen U kunt de tagbibliotheek-editor gebruiken om tagbibliotheken, tags en kenmerken toe te voegen aan de tagbibliotheken in Dreamweaver.
356 DREAMWEAVER GEBRUIKEN Werken met paginacode Opmerking: De eigenschappen voor tagbibliotheken worden alleen weergegeven wanneer een tagbibliotheek is geselecteerd. Tagbibliotheken worden weergegeven door de mappen op het hoogste niveau in de lijst Tags. De map HTML-tags vertegenwoordigt bijvoorbeeld een tagbibliotheek, terwijl de map abbr in de map HTML-tags een tag vertegenwoordigt. 2 Selecteer in de lijst Gebruikt in elk documenttype dat de tagbibliotheek moet gebruiken.
357 DREAMWEAVER GEBRUIKEN Werken met paginacode Als u Opsomming selecteert, typt u elke toegestane waarde voor het kenmerk in het vak Waarden. Scheid de waarden met komma's, maar zonder spaties. De opsommingswaarden van het kenmerk showborder van de cfchart-tag worden weergegeven als yes,no. Bibliotheken, tags en kenmerken verwijderen 1 Selecteer in de tagbibliotheek-editor (Bewerken > Tagbibliotheken) een tagbibliotheek, tag of kenmerk in het vak Tags. 2 Klik op de minknop (–).
358 DREAMWEAVER GEBRUIKEN Werken met paginacode Zorg voordat u begint dat de aangepaste tag is geïnstalleerd op de testserver, die is gedefinieerd in het dialoogvenster Sitedefinitie (zie “Een testserver instellen” op pagina 48). Gecompileerde tags (DLL-bestanden) moeten worden geplaatst in de map /bin in de hoofdmap van de site. Niet-gecompileerde tags (ASCX-bestanden) kunnen zijn opgeslagen in elke virtuele directory of subdirectory op de server. Raadpleeg de documentatie van Microsoft ASP.
359 DREAMWEAVER GEBRUIKEN Werken met paginacode De URI (Uniform Resource Identifier) bestaat vaak uit de URL van de organisatie die de tagbibliotheek onderhoudt. De URL wordt niet gebruikt om de website van de organisatie weer te geven, maar uitsluitend om de tagbibliotheek te identificeren. 6 (Optioneel) Typ het voorvoegsel dat voor de tags moet worden gebruikt. Sommige tagbibliotheken gebruiken een voorvoegsel om een tag in de code te identificeren als onderdeel van een bepaalde tagbibliotheek.
360 Hoofdstuk 12: JavaScript-gedrag toevoegen JavaScript-gedrag gebruiken Over JavaScript-gedrag Met gedrag van Adobe® Dreamweaver® CS5 plaatst u JavaScript-code in documenten die bezoekers in staat stelt een webpagina op diverse manieren te wijzigen of bepaalde taken te starten. Met gedrag wordt een combinatie aangeduid van een gebeurtenis en een actie die door die gebeurtenis wordt geactiveerd.
361 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen Gedragingen die al zijn gekoppeld aan het op dat moment geselecteerde pagina-element, worden in de lijst met gedragingen (het hoofdgedeelte van het paneel) weergegeven en alfabetisch gerangschikt op gebeurtenis. Als er voor één gebeurtenis meerdere acties worden weergegeven, worden deze acties uitgevoerd in de volgorde waarin ze in de lijst worden weergegeven.
362 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen Welke gebeurtenissen worden weergegeven in het menu Gebeurtenissen, hangt af van het object dat is geselecteerd. Als u wilt weten welke gebeurtenissen een bepaalde browser ondersteunt voor een bepaald pagina-element, voegt u het desbetreffende pagina-element in uw document in, koppelt u een gedrag aan het element en kijkt u vervolgens in het menu Gebeurtenissen in het paneel Gedrag. (Standaard worden gebeurtenissen uit de lijst met HTML 4.
363 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen 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.
364 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen Ingebouwd Dreamweaver-gedrag toepassen Ingebouwd gedrag gebruiken De gedragingen die in Dreamweaver zijn opgenomen, zijn allemaal afgestemd op het gebruik in moderne browsers. In oudere browsers doen ze niets. Opmerking: De Dreamweaver-acties zijn zo geschreven dat ze kunnen functioneren in zoveel mogelijk browsers.
365 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen Het gedrag Insteekmodule controleren toepassen Gebruik het gedrag Insteekmodule controleren om bezoekers naar verschillende webpagina's te sturen afhankelijk van het antwoord op de vraag of ze de gespecificeerde insteekmodule hebben geïnstalleerd. U kunt bezoekers bijvoorbeeld naar de ene pagina sturen als ze Shockwave al hebben en naar de andere pagina als ze Shockwave nog niet hebben geïnstalleerd.
366 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen Omdat het gedrag AP-element slepen moet worden aangeroepen voordat de bezoeker het AP-element kan slepen, moet u het gedrag AP-element slepen aan het body-object koppelen (met de gebeurtenisonLoad). 1 Selecteer Invoegen > Lay-outobjecten > AP Div of klik op de knop AP Div tekenen in het paneel Invoegen om een AP Div in de ontwerpweergave van het documentvenster te tekenen.
367 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen • Voer JavaScript-code of een functienaam (bijvoorbeeld monitorAPelement()) in het vak JavaScript aanroepen in als u de code of functie herhaaldelijk wilt uitvoeren terwijl het AP-element wordt gesleept. U kunt bijvoorbeeld een functie schrijven die de coördinaten van het AP-element in de gaten houdt en in een tekstvak aanwijzingen weergeeft, zoals “je wordt al warmer” of “het doel bevindt zich heel ergens anders”.
368 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen In de lijst Openen in worden automatisch de namen van alle frames in de huidige frameset en ook het hoofdvenster weergegeven. Als er geen frames zijn, vormt het hoofdvenster de enige optie. Opmerking: Dit gedrag kan leiden tot onverwachte resultaten als een van de frames de naam top, blank, self of parent heeft. Browsers vatten deze namen soms op als gereserveerde doelnamen.
369 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen 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 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.
370 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen Het gedrag Afbeeldingen vooraf laden toepassen Met het gedrag Afbeeldingen vooraf laden worden afbeeldingen die in eerste instantie nog niet verschijnen wanneer de pagina wordt weergegeven, alvast in het cachegeheugen geladen waardoor ze sneller worden weergegeven wanneer ze aan de beurt zijn. (Dit gedrag is bijvoorbeeld handig voor afbeeldingen die andere afbeeldingen vervangen wanneer ze worden geactiveerd met gedrag of scripts.
371 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen Het gedrag Tekst van container instellen toepassen Met het gedrag Tekst van container instellen vervangt u de inhoud en opmaak van een bestaande container (dus elk element dat tekst of andere elementen kan bevatten) op een pagina door de inhoud die u opgeeft. De inhoud kan bestaan uit elke geldige HTML-broncode. U kunt elke geldige functie-aanroep, eigenschap, globale variabele of andere expressie in JavaScript in de tekst insluiten.
372 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen Het gedrag Tekst van tekstveld instellen toepassen 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. Als u een JavaScript-expressie wilt insluiten, plaatst u deze binnen accolades ({}).
373 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen Het gedrag Pop-upmenu weergeven toepassen Dit gedrag wordt vanaf Dreamweaver CS5 niet meer ondersteund. Items van het pop-upmenu toevoegen, verwijderen of opnieuw rangschikken Dit gedrag wordt vanaf Dreamweaver CS5 niet meer ondersteund. Een pop-upmenu opmaken Dit gedrag wordt vanaf Dreamweaver CS5 niet meer ondersteund. Een pop-upmenu in een document plaatsen Dit gedrag wordt vanaf Dreamweaver CS5 niet meer ondersteund.
374 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen 7 Herhaal de stappen 5 en 6 voor eventuele extra afbeeldingen die u wilt wijzigen. Gebruik dezelfde actie Afbeelding verwisselen voor alle afbeeldingen die u in één keer wilt wijzigen, anders worden met de corresponderende actie Omwisselen van afbeeldingen herstellen niet alle oorspronkelijke afbeeldingen hersteld.
375 DREAMWEAVER GEBRUIKEN JavaScript-gedrag toevoegen 10 Als u afzonderlijke velden valideert, moet u controleren of de standaardgebeurtenis onBlur of onChange is. Als dat niet het geval is, moet u een van deze gebeurtenissen selecteren. Beide gebeurtenissen activeren het gedrag Formulier valideren wanneer de gebruiker zich met de aanwijzer van het veld af beweegt.
376 Hoofdstuk 13: Werken met andere toepassingen Integratie tussen diverse toepassingen Over de integratie met Photoshop, Flash en Fireworks 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.
377 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Meer Help-onderwerpen “Over ontwerpnotities” op pagina 107 “Ontwerpnotities inschakelen en uitschakelen voor een site.
378 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Wanneer u een afbeelding selecteert die vanuit Fireworks is geëxporteerd, wordt deze door Dreamweaver als een Fireworks-afbeelding of -tabel herkend en wordt de naam van het PNG-bronbestand weergegeven. 3 Ga op een van de volgende manieren te werk om Fireworks te starten voor het bewerken: • Klik in de eigenschappencontrole op Bewerken. • Houd Control (Windows) of Command (Macintosh) ingedrukt en dubbelklik op de geselecteerde afbeelding.
379 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Als u een nieuwe afbeelding wilt maken vanuit een tijdelijke aanduiding voor afbeelding, moeten zowel Dreamweaver als Fireworks op uw computer zijn geïnstalleerd. 1 Controleer of u Fireworks al hebt ingesteld als de afbeeldingseditor voor PNG-bestanden. 2 Klik in het documentvenster op de tijdelijke aanduiding voor de afbeelding om deze te selecteren. 3 Start Fireworks in de modus voor het bewerken van afbeeldingen vanuit Dreamweaver.
380 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Meer Help-onderwerpen “Een externe afbeeldingseditor gebruiken” op pagina 253 “Een afbeelding invoegen” op pagina 243 Over pop-upmenu's van Fireworks In Fireworks kunt u snel en eenvoudig op CSS gebaseerde pop-upmenu's maken. De pop-upmenu's die u in Fireworks maakt, kunnen niet alleen gemakkelijk worden uitgebreid en snel worden gedownload, maar bieden ook de volgende voordelen: • De menu-items kunnen worden geïndexeerd door zoekmachines.
381 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen 3 Breng de gewenste wijzigingen aan in het dialoogvenster Pop-upmenu en klik op OK. Meer Help-onderwerpen “Het gedrag Pop-upmenu weergeven toepassen” op pagina 373 Voorkeuren voor het openen en bewerken van Fireworks-bronbestanden opgeven Wanneer u Fireworks gebruikt om afbeeldingen te bewerken, worden de afbeeldingen op uw webpagina's gewoonlijk door Fireworks geëxporteerd vanuit een PNG-bronbestand.
382 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen 4 Als u het bestand verder niet meer nodig hebt, selecteert u de optie Bestand verwijderen na invoegen. Als u deze optie selecteert, heeft dat geen effect op het PNG-bronbestand dat aan het HTML-bestand is gekoppeld. Opmerking: Als het HTML-bestand zich op een netwerkstation bevindt, wordt het bestand permanent verwijderd en niet naar de prullenbak of prullenmand verplaatst.
383 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen 4 Ga naar het Dreamweaver-bestand met de HTML-code die u wilt bijwerken en klik op Open. 5 Ga naar de doelmap waarin u de bijgewerkte afbeeldingsbestanden wilt plaatsen en klik op Select (Windows) of Choose (Macintosh). De HTML- en JavaScript-code in het Dreamweaver-document wordt door Fireworks bijgewerkt. Fireworks exporteert ook bijgewerkte afbeeldingen die aan de HTML-code zijn gekoppeld en plaatst de afbeeldingen in de opgegeven doelmap.
384 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Slimme-objectenworkflow Als u werkt met volledige Photoshop-bestanden, wordt u aangeraden de slimme-objectenworkflow te gebruiken. Een slim object in Dreamweaver is een afbeeldingsmiddel op een webpagina met een actieve verbinding met een oorspronkelijk Photoshop PSD-bestand. In de ontwerpweergave van Dreamweaver worden slimme objecten gemarkeerd met een pictogram links boven aan de afbeelding.
385 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Als u een update kopieert en plakt naar een specifiek segment of specifieke laag, worden in Dreamweaver de oorspronkelijke instellingen opgeslagen en wordt de webafbeelding met deze instellingen opnieuw gemaakt. Ook als u een slim object bijwerkt met de eigenschappencontrole, worden in Dreamweaver de instellingen gebruikt die u hebt gebruikt toen u de afbeelding voor het eerst hebt ingevoegd.
386 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Voor een zelfstudie over het werken met slimme objecten in Photoshop en Dreamweaver raadpleegt u www.adobe.com/go/lrvid4043_dw_nl.
387 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Het originele Photoshop-bestand van een slim object bewerken Nadat u een slim object op de Dreamweaver-pagina hebt gemaakt, kunt u het originele PSD-bestand in Photoshop bewerken. Nadat u wijzigingen in Photoshop hebt aangebracht, kunt u de webafbeelding eenvoudig in Dreamweaver bijwerken. Opmerking: Zorg ervoor dat u Photoshop als uw primaire externe afbeeldingseditor hebt ingesteld. 1 Selecteer het slimme object in het venster Document.
388 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Een selectie uit Photoshop kopiëren en plakken U kunt een Photoshop-afbeelding geheel of gedeeltelijk kopiëren en de selectie als afbeelding voor internet in uw Dreamweaver-pagina plakken. U kunt één laag of een set lagen voor een geselecteerd gebied van de afbeelding kopiëren, of u kunt een segment van de afbeelding kopiëren. Wanneer u dit doet, maakt Dreamweaver echter geen slim object.
389 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Geplakte afbeeldingen bewerken Nadat u Photoshop-afbeeldingen op uw Dreamweaver-pagina's hebt geplakt, kunt u het originele PSD-bestand in Photoshop bewerken. Wanneer u de methode met kopiëren en plakken gebruikt, wordt u geadviseerd om uw bewerkingen altijd in het originele PSD-bestand aan te brengen (in plaats van in de webafbeelding zelf), en de afbeelding daarna opnieuw te plakken om het werken met één enkele bron te handhaven.
390 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen A B C Het dialoogvenster Voorvertoning van afbeelding A. Tabblad Opties B. Tabblad Bestand C. Voorvertoning (paneel) Opmerking: De instellingen die u selecteert, hebben alleen invloed op de geëxporteerde versie van het afbeeldingsbestand. Het originele Photoshop PSD- of Fireworks PNG-bestand verandert nooit.
391 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Progressieve browserweergave Hiermee wordt een afbeelding aanvankelijk met een lage resolutie weergegeven, waarna de resolutie tijdens het downloaden geleidelijk wordt verhoogd. Standaard niet ingeschakeld. Kleurranden scherper maken Hiermee kunt de kwaliteit van de afbeelding verhogen Matte Hiermee kunt u de achtergrond van de afbeelding instellen.
392 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen • Alfa Gebruik alfatransparantie bij het exporteren van 8-bpc PNG-afbeeldingen die transparante gebieden bevatten. Bij alfatransparantie zijn graduele transparantie en semi-doorzichtige pixels mogelijk. Randkleur Hiermee kunt u de achtergrond van de afbeelding instellen. U kunt de transparantie van een PNG van 32bpc behouden door op het transparantiepictogram in het dialoogvenster Matte te klikken.
393 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen (Optioneel) Afbeeldingen bekijken en aanpassen in het paneel Voorvertoning 1 Kies in het dialoogvenster Voorvertoning van afbeelding de optie Voorvertoning als u wilt zien hoe de afbeelding er uitziet met uw instellingen. Als prestaties van belang zijn, kunt u deze optie beter uitschakelen.
394 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen 5 Als u het bijgewerkte bestand in het document wilt bekijken, klikt u op Afspelen in Eigenschappencontrole van Dreamweaver of drukt u op F12 om een voorvertoning van de pagina weer te geven in een browservenster. Werken met Adobe Bridge Over Adobe Bridge Dreamweaver biedt naadloze integratie met Adobe Bridge, de platformonafhankelijke bestandsbrowser die wordt geleverd bij Adobe Creative Suite 5-componenten.
395 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Bestanden in Dreamweaver plaatsen vanuit Adobe Bridge U kunt bestanden invoegen in Dreamweaver-pagina's door ze vanuit Adobe Bridge in uw pagina in te voegen of te slepen. Als u deze functie wilt gebruiken, moet het Dreamweaver-document waarin u het bestand wilt invoegen, geopend zijn in de ontwerpweergave.
396 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Opmerking: Als de invoegpositie in de codeweergave staat, start Adobe Bridge op de gebruikelijke manier, maar wordt het bestand niet geplaatst. U kunt alleen bestanden plaatsen in de ontwerpweergave. Dreamweaver starten vanuit Adobe Bridge ❖ Selecteer een bestand in Adobe Bridge en voer een van de volgende handelingen uit: • Selecteer Bestand > Openen met > Adobe Dreamweaver.
397 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Tips voor het maken van Dreamweaver-webinhoud voor mobiele apparaten In Device Central kunt u webpagina's die zijn gemaakt in Dreamweaver, voorvertonen met behulp van de renderfunctie voor kleine schermen van Opera. Via deze voorvertoning krijgt u een goede indruk van de webpagina zoals deze eruit komt te zien op een mobiel apparaat.
398 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Zie http://help.adobe.com/en_US/Acrobat.com/ConnectNow/index.html voor alomvattende informatie over het gebruik van ConnectNow. Ga voor een zelfstudie over het gebruik van ConnectNow naar Using ConnectNow to share your screen (7:12). (Deze demonstratie is in Dreamweaver.) Extensie AIR voor Dreamweaver De extensie Adobe® AIR® voor Dreamweaver® kunt u gebruiken om een internettoepassing om te zetten in een desktoptoepassing.
399 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen 3 Volg de aanwijzingen op het scherm op om de extensie te installeren. 4 Start Dreamweaver opnieuw als u klaar bent. Zie Extensie AIR voor Dreamweaver gebruiken voor meer informatie over het gebruik van de extensie Adobe AIR voor Dreamweaver. Een AIR-toepassing maken in Dreamweaver Als u een op HTML gebaseerde AIR-toepassing wilt maken in Dreamweaver, selecteert u een bestaande site die u wilt verpakken als AIR-toepassing.
400 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen (ondoorzichtig), maar hierbij worden mogelijkheden voor doorzichtigheid toegevoegd aan de randen van de pagina. Zo kunt u toepassingsvensters maken die niet rechthoekig van vorm zijn. Venstergrootte Deze instelling geeft de afmetingen van het toepassingsvenster aan wanneer het wordt geopend. Pictogram Deze instelling kunt u gebruiken om aangepaste afbeeldingen te selecteren voor de toepassingspictogrammen.
401 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen In het volgende voorbeeld zijn een aantal basisopties van het dialoogvenster ingesteld: Een toepassing ondertekenen met een digitaal certificaat 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.
402 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen • Als u een digitaal certificaat wilt maken dat u zelf ondertekent, klikt u op de knop Maken en vult u de velden van het dialoogvenster in. De optie Type verwijst naar het beveiligingsniveau van het certificaat: 1024-RSA gebruikt een 1024-bits sleutel (minder veilig) en 2048-RSA gebruikt een 2048-bits sleutel (veiliger). Klik op OK als u klaar bent.
403 DREAMWEAVER GEBRUIKEN Werken met andere toepassingen Locatie pictogrambestand kunt u gebruiken om aangepaste afbeeldingen te selecteren voor de gekoppelde bestandstypen. (De standaardafbeeldingen zijn Adobe AIR-afbeeldingen die worden geleverd bij de extensie.) Instellingen voor AIR-toepassingen bewerken U kunt op elk gewenst moment de instellingen voor uw Adobe AIR-toepassing bewerken. ❖ Selecteer Site > Instellingen AIR-toepassing en breng de gewenste wijzigingen aan.
404 Hoofdstuk 14: Sjablonen maken en beheren Over sjablonen van Dreamweaver Wat zijn Dreamweaver-sjablonen? Een sjabloon is een speciaal type document waarmee u een “vaste” paginalay-out kunt ontwerpen. Vervolgens kunt u op deze sjabloon gebaseerde documenten maken, die de paginalay-out ervan overnemen. Bij het ontwerpen van een sjabloon geeft u aan welke inhoud gebruikers kunnen bewerken in een document dat is gebaseerd op de sjabloon.
405 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren sjabloongebruiker de inhoud in het herhalingselement wel kan bewerken, maar dat het ontwerp zelf onder de controle van de sjabloonauteur blijft. Er zijn twee typen herhalingsgebieden die u in een sjabloon kunt invoegen: een herhalingsgebied en een herhalingstabel. Een optioneel gebied Een gedeelte van een sjabloon dat inhoud—zoals tekst of een afbeelding—bevat die al dan niet in een document wordt weergegeven.
406 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren gebaseerde index.html-pagina's maken zonder dat u er zich zorgen over hoeft te maken of Dreamweaver deze specifieke koppelingen bijwerkt. Als Dreamweaver MX 2004 de op een sjabloon gebaseerde index.html-pagina's maakt, verwijzen de (niet-bijgewerkte) koppelingen href="main.css" naar de bestanden main.css die zich in de mappen voor Dreamweaver, Flash en Photoshop bevinden en niet naar het bestand main.css dat zich in de map Sjablonen bevindt.
407 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren Met deze code in een sjabloon worden wijzigingen aan scripts vóór de tag of na de tag gekopieerd naar documenten die op deze sjabloon zijn gebaseerd. U kunt deze scripts in documenten die op de sjabloon zijn gebaseerd, dan echter niet meer bewerken. U hebt dan ook de keuze tussen deze scripts in de sjabloon bewerken en deze scripts bewerken in documenten die op de sjabloon zijn gebaseerd; beide mogelijkheden hebben is niet mogelijk.
408 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren @@(firstName+lastName)@@ De volgende functies en operatoren worden ondersteund: • numerieke constanten, tekenreeksconstanten (uitsluitend syntaxis met dubbele aanhalingstekens), Booleaanse constanten (true (waar) of false (onwaar)) • variabele verwijzing (zie de lijst van gedefinieerde variabelen verderop in dit gedeelte) • veldverwijzing (de “punt”-operator) • monadische operatoren: +, -, ~, ! • binaire operatoren: +, -, *, /, %, &, |, ^, &&, ||, <,
409 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren Meerdere if-voorwaarden in sjablooncode U kunt expressies definiëren voor enkelvoudige en meervoudige if-voorwaarden. Het volgende voorbeeld toont de manier waarop u een parameter met de naam “Dept” definieert, een aanvankelijke waarde instelt en een meervoudige if-voorwaarde definieert die bepaalt welk logo wordt weergegeven.
410 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren U kunt een sjabloonbestand herkennen door naar de titelbalk in het documentvenster te kijken. De titelbalk van een sjabloonbestand bevat het woord <> in de titelbalk, terwijl de extensie van de bestandsnaam van het bestand .dwt is.
411 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren Meer Help-onderwerpen “De voorkeuren voor codekleuren wijzigen voor een sjabloon” op pagina 437 Op een sjabloon gebaseerde documenten herkennen in de ontwerpweergave In de ontwerpweergave worden bij een document dat is gebaseerd op een sjabloon (een op een sjabloon gebaseerd document), bewerkbare gebieden in de ontwerpweergave van het documentvenster weergegeven met een rechthoekige omtrek in een vooraf ingestelde markeringskleur.
412 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren
| Name | Address | Telephone Number |
| Enter name | Enter Address | Enter Telephone |
De standaardkleur voor niet-bewer
413 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren Een sjabloon maken op basis van een bestaand document U kunt een sjabloon maken op basis van een bestaand document 1 Open het document dat u als sjabloon wilt opslaan. 2 Voer een van de volgende handelingen uit: • Selecteer Bestand > Opslaan als sjabloon. • Ga naar de categorie Algemeen van het paneel Invoegen, klik op de knop Sjablonen en selecteer het pictogram Sjablonen maken in het pop-upmenu.
414 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren Opmerking: Zorg ervoor dat de hoofdmap van de site zoals gedefinieerd in elke sitedefinitie van de gebruiker van Contribute dezelfde is als de hoofdmap van de site die in uw sitedefinitie gedefinieerd is in Dreamweaver. Als een hoofdmap van een gebruikerssite niet overeenkomt met de uwe, dan zal die gebruiker geen sjablonen kunnen gebruiken.
415 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren 7 Selecteer een rol in de categorie Gebruikers en rollen, en klik op de knop Rolinstellingen bewerken. 8 Selecteer de categorie Nieuwe pagina's en voeg dan de bestaande pagina's toe aan de lijst onder Maak een nieuwe pagina door een pagina uit deze lijst te kopiëren. Zie Contribute beheren voor meer informatie. 9 Klik twee maal op OK om de dialoogvensters te sluiten.
416 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren 4 Klik op OK. Het bewerkbare gebied wordt omgeven door een gemarkeerde rechthoekige omtrek in de sjabloon, waarbij de markeerkleur wordt gebruikt die is ingesteld in uw voorkeuren. Een tabblad in de linkerbovenhoek van het gebied toont de naam van het gebied. Als u een leeg bewerkbaar gebied invoegt in het document, wordt de naam van het gebied ook binnen het gebied weergegeven.
417 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren Herhalingsgebieden maken 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. Doorgaans worden herhalingsgebieden gebruikt bij tabellen, maar u kunt ook een herhalingsgebied definiëren voor andere pagina-elementen.
418 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren Een herhalingstabel invoegen U kunt een herhalingstabel gebruiken om een bewerkbaar gebied (in tabelindeling) met zich herhalende rijen te maken. U kunt tabelkenmerken definiëren en bepalen welke tabelcellen bewerkbaar zijn. 1 Plaats de invoegpositie in het documentvenster op de plaats waar u de herhalingstabel wilt invoegen. 2 Voer een van de volgende handelingen uit: • Selecteer Invoegen > Sjabloonobjecten > Herhalingstabel.
419 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren Hieronder ziet u een codevoorbeeld van een tabel met afwisselende achtergrondkleuren voor tabelrijen:
| Name | Phone Number | Email Address |
|---|
| name | InstanceEnd --> InstanceBeginEditable name="..." --> InstanceEndEditable --> InstanceParam name="..." type="..." value="..." passthrough="..." --> InstanceBeginRepeat name="...
438 DREAMWEAVER GEBRUIKEN Sjablonen maken en beheren Opmerking: Als u globale wijzigingen wilt aanbrengen, kunt u het bronbestand bewerken waarin uw voorkeuren worden opgeslagen. Onder Windows XP vindt u deze in C:\Documents and Settings\%gebruikersnaam%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml. Onder Windows Vista vindt u deze in C:\Users\%gebruikersnaam%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml.
439 Hoofdstuk 15: Spry-pagina's visueel opbouwen 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. U kunt widgets maken, zoals accordeons en menubalken, en diverse effecten toevoegen aan allerhande pagina-elementen.
440 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Het Spry-framework ondersteunt een reeks herbruikbare widgets, die zijn geschreven in standaard-HTML, CSS en JavaScript. U kunt deze widgets eenvoudig invoegen—de code bestaat uit de eenvoudigste HTML en CSS—en de widget daarna opmaken.
441 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen 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. Raadpleeg de desbetreffende secties voor elke widget voor details over hoe u de specifieke widgets opmaakt. U kunt een Spry-widget ook opmaken door stijlen te bewerken in het paneel CSS, net zoals u een ander opgemaakt element op de pagina kunt wijzigen.
442 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen A C B A. Tabblad in accordeonpaneel B. Inhoud van accordeonpaneel C. Accordeonpaneel (geopend) De standaard-HTML voor de accordeonwidget bestaat uit een buitenste div-tag die alle panelen bevat, een div-tag voor elk paneel, en een kop-div en inhouds-div in de tag voor elk paneel. Een accordeonwidget kan een willekeurig aantal afzonderlijke panelen bevatten.
443 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen • 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 Selecteer in de eigenschappencontrole (Venster > Eigenschappen) de naam van het accordeonpaneel dat u wilt verplaatsen.
444 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen De achtergrondkleur wijzigen van accordeonwidget ❖ Als u de achtergrondkleuren van verschillende delen van een accordeonwidget wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende CSS-regel op te zoeken.
445 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen A B Menubalkwidget (bestaat uit , - en -tags) A. Menu-item heeft vervolgmenu B. Vervolgmenu-item heeft vervolgmenu De HTML voor de menubalkwidget bestaat uit een buitenste ul-tag die een li-tag bevat voor elk menu-item op het hoogste niveau.
-
446 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Een vervolgmenu-item toevoegen 1 Selecteer een menubalkwidget in het documentvenster. 2 Ga naar de eigenschappencontrole en selecteer de naam van het hoofdmenu-item waaraan u het vervolgmenu wilt toevoegen. 3 Klik op de plusknop boven de tweede kolom. 4 (Optioneel) Verander de naam van het nieuwe vervolgmenu-item door de standaardtekst te wijzigen in het documentvenster of in het tekstvak van de Eigenschappencontrole.
-
447 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Een doelkenmerk toewijzen voor een menu-item Het doelkenmerk bepaalt waar u een gekoppelde pagina wilt openen. U kunt bijvoorbeeld een doelkenmerk aan een menu-item toekennen zodat de gekoppelde pagina in een nieuw browservenster wordt geopend wanneer de bezoeker op de koppeling klikt. Als u framesets gebruikt, kunt u ook de naam opgeven van een frame waarin u de gekoppelde pagina wilt openen. 1 Selecteer een menubalkwidget in het documentvenster.
-
448 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); Opmerking: Als u echter een verticale menubalk in een horizontale converteert, voegt u de laadoptie imgDown en de komma toe. 7 (Optioneel) Als de pagina geen andere horizontale menubalkwidgets meer bevat, verwijdert u de koppelingen naar het voormalige bestand MenuBarHorizontal.css in de kop van het document. 8 Sla de pagina op.
-
449 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Te wijzigen stijl CSS-regel voor verticale of horizontale menubalk Relevante eigenschappen en standaardwaarden Tekstkleur bij focus ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus kleur: #FFF; Kleur van menubalkitem wanneer muisaanwijzer eroverheen schuift ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover kleur: #FFF; Kleur van vervolgmenu-item wanneer de muisaanwijzer eroverheen schuift ul.
-
450 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Vervolgmenu's plaatsen De positie van Spry-menubalken wordt geregeld met de marge-eigenschap voor ul-tags van vervolgmenu's. 1 Zoek de regel ul.MenuBarVertical ul of ul.MenuBarHorizontal ul op. 2 Wijzig de marge: -5% 0 0 95%; standaardwaarden naar de gewenste waarden. Werken met de inklapbaar-deelvensterwidget Over de inklapbaar-deelvensterwidget Een inklapbaar-deelvensterwidget is een deelvenster dat inhoud opslaat op een vrij beperkte ruimte.
-
451 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen De standaardtoestand van een inklapbaar-deelvensterwidget instellen U kunt instellen welke toestand (geopend of gesloten) een inklapbaar-deelvensterwidget standaard heeft wanneer de webpagina in een browser wordt geopend. 1 Selecteer een inklapbaar-deelvensterwidget in het documentvenster. 2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer Geopend of Gesloten in het pop- upmenu Standaardtoestand.
-
452 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Te wijzigen stijl Relevante CSS-regel Voorbeeld van toe te voegen of te wijzigen eigenschappen en waarden Tekst in het gehele inklapbare paneel .CollapsiblePanel font: Arial; font-size:medium; Tekst op de paneeltab .CollapsiblePanelTab font: bold 0.7em sans-serif; (Dit is de standaardwaarde) Tekst in het inhoudspaneel .
-
453 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen A B C D A. Tab B. Inhoud C. Widget deelvensters met tabs D. Paneel met tabs De HTML-code voor de widget deelvensters met tabs bestaat uit een buitenste div-tag die alle panelen bevat, een lijst voor de tabs, een div-tag voor de inhoudspanelen en een div-tag voor elk inhoudspaneel. De HTML voor de widget deelvensters met tabs bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van de widget deelvensters met tabs.
-
454 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen 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.
-
455 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen De achtergrondkleur wijzigen van een widget deelvensters met tabs ❖ Als u de achtergrondkleuren van verschillende delen van een widget deelvensters met tabs wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende CSS-regel op te zoeken.
-
456 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Denk aan de volgende punten wanneer u met de knopinfo-widget werkt: • Een geopende knopinfo wordt gesloten voordat de volgende wordt geopend. • Knopinfo blijft in beeld zolang de gebruiker boven het triggergebied beweegt. • Er zijn geen beperkingen aan het soort tags dat u kunt gebruiken voor triggers en voor knopinfo-inhoud.
-
457 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Verbergen bij muis buiten Wanneer u deze optie selecteert, blijft de knopinfo geopend zolang de muis over de knopinfo beweegt (zelfs als de muis het trigger-element verlaat). Het is handig om de knopinfo op de voorgrond te houden als deze nog koppelingen of andere interactieve elementen bevat. Als deze optie niet is geselecteerd, sluit het knopinfo-element wanneer de muis het trigger-gebied verlaat.
-
458 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Toestand Geldig Wanneer de gebruiker een selectie maakt en het formulier kan worden verzonden. Toestand Vereist Wanneer de gebruiker geen vereiste selectie heeft gemaakt. Toestand Ongeldig Wanneer de gebruiker een keuzerondje selecteert waarvan de waarde niet acceptabel is.
-
459 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen 2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de optie die aangeeft wanneer de validatie moet worden uitgevoerd. U kunt alle opties of alleen Verzenden selecteren. Vervagen Valideert zodra de gebruiker buiten de groep keuzerondjes klikt. Wijzigen Valideert wanneer de gebruiker selecties maakt. Verzenden Valideert op het moment dat de gebruiker het formulier probeert te verzenden.
-
460 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Zowel aan het keuzerondje zelf als aan de widget groep met keuzerondjes moeten de waarden geen of ongeldig zijn toegewezen, anders worden deze berichten niet juist weergegeven. De widget groep keuzerondjes aanpassen Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een widget groep met validatiekeuzerondjes kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund.
-
461 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Werken met de widget tekstveld voor validatie Over de widget tekstveld voor validatie Een Spry-widget tekstveld voor validatie is een tekstveld dat geldige of ongeldige toestanden weergeeft wanneer de sitebezoeker tekst invoert. U kunt bijvoorbeeld een widget tekstveld voor validatie toevoegen aan een formulier waarin bezoekers hun e-mailadressen invoeren.
-
462 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Toestand Maximumwaarde De toestand van de widget wanneer de gebruiker een waarde heeft ingevoerd die groter is dan de waarde die in het tekstveld is vereist. (Is van toepassing op validaties van het gegevenstype Geheel getal en reëel getal.) Wanneer een widget tekstveld voor validatie na een gebruikersactie één van deze toestanden krijgt, past de Spryframeworksoftware in runtime een specifieke CSS-klasse toe op de HTML-container voor de widget.
-
463 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Validatietype Indeling Tijd Notaties variëren. Maak uw keuze uit het menu Formaat van de eigenschappencontrole. (“tt” staat voor de notatie am/pm, en “t” staat voor de notatie a/p.) Creditcard Notaties variëren. Maak uw keuze uit het menu Formaat van de eigenschappencontrole. U kunt ervoor kiezen alle creditcards te accepteren of u kunt een bepaalde soort creditcard opgeven (MasterCard, Visa, enzovoort).
-
464 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Minimum- en maximumwaarden opgeven Deze optie is alleen beschikbaar voor de validatietypen Geheel getal, Tijd, Valuta en Reëel-getal/wetenschappelijke notatie. 1 Selecteer een widget tekstveld voor validatie in het documentvenster. 2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer een waarde in het vak Min. waarde en Max. waarde in. Als u in het vak Min.
-
465 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryValidationTextField.css. Wanneer u een Spry-widget tekstveld voor validatie maakt, slaat Dreamweaver het bestand SpryValidationTextField.css op in de map SpryAssets van uw site. Het is wellicht interessant om dit bestand te raadplegen omdat het nuttige informatie bevat over de diverse stijlen die u op de widget kunt toepassen.
-
466 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Werken met de widget tekstgebied voor validatie Over de widget tekstgebied voor validatie Een Spry-widget tekstgebied voor validatie is een tekstgebied dat alleen geldige of ongeldige toestanden weergeeft wanneer de gebruiker enkele regels tekst invoert. Als het tekstgebied een verplicht veld is en de gebruiker geen tekst invoert, retourneert de widget het bericht dat een waarde verplicht.
-
467 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Wanneer een widget tekstgebied voor validatie na een gebruikersactie één van deze toestanden krijgt, past de Spryframeworksoftware in runtime een specifieke CSS-klasse toe op de HTML-container voor de widget. Als een gebruiker bijvoorbeeld een formulier verstuurt waarin geen tekst is ingevuld in een verplicht tekstgebied, past Spry een klasse op de widget toe die ervoor zorgt dat het foutbericht “Een waarde is verplicht” wordt weergegeven.
-
468 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Een tekenteller toevoegen U kunt een tekenteller toevoegen zodat de gebruikers kunnen zien hoeveel tekens ze al hebben getypt en hoeveel tekens er nog in het tekstgebied ingevoerd kunnen worden. Wanneer u een tekenteller toevoegt, wordt deze standaard buiten de rechterbenedenhoek van de widget weergegeven. 1 Selecteer een widget tekstgebied voor validatie in het documentvenster.
-
469 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryValidationTextArea.css. Wanneer u een Spry-widget tekstgebied voor validatie maakt, slaat Dreamweaver het bestand SpryValidationTextArea.css op in de map SpryAssets van uw site. Het is wellicht interessant om dit bestand te raadplegen omdat het nuttige informatie bevat over de diverse stijlen die u op de widget kunt toepassen.
-
470 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Werken met de widget Validatie selecteren Over de widget Validatie selecteren Een Spry-widget validatie selecteren is een vervolgkeuzemenu dat geldige of ongeldige toestanden weergeeft wanneer de gebruiker een selectie maakt. U kunt bijvoorbeeld een widget validatie selecteren invoegen die een lijst met toestanden bevat, die in verschillende secties zijn gegroepeerd en met horizontale lijnen zijn gescheiden.
-
471 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Voor een uitvoerige uitleg van de werking van de widget Validatie selecteren, waaronder een volledige anatomie van de code van de widget Validatie selecteren, gaat u naar www.adobe.com/go/learn_dw_spryselect_nl. De widget validatie selecteren invoegen en bewerken De widget Validatie selecteren invoegen 1 Kies Invoegen > Spry > Spry-validatie selecteren. 2 Vul het dialoogvenster Toegankelijkheidskenmerken van de invoertag in en klik op OK.
-
472 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen 1 Selecteer een widget validatie selecteren in het documentvenster. 2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en voer in het vak Ongeldige waarde een getal in dat u als een ongeldige waarde wilt gebruiken.
-
473 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Werken met de widget selectievakje voor validatie Over de widget selectievakje voor validatie Een Spry-widget selectievakje voor validatie is een selectievakje of groep selectievakjes in een HTML-formulier waarin geldige of ongeldige toestanden worden weergegeven wanneer de gebruiker een selectievakje al dan niet inschakelt.
-
474 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen De standaard-HTML voor de widget selectievakje voor validatie bevindt zich gewoonlijk in een formulier, en bevat een containertag met daarbinnen de tag van het selectievakje. De HTML voor de widget selectievakje voor validatie bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van de widget.
-
475 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen 2 Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer de toestand die u wilt zien in het pop- upmenu Voorvertoningsstatus. Selecteer bijvoorbeeld Bij openen om de widget in de status bij openen weer te geven. Foutberichten aanpassen voor de widget selectievakje voor validatie Standaard worden foutberichten voor de widget selectievakje voor validatie weergegeven in een kader met een rode rand van 1 pixel dik.
-
476 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen A B C A. Wachtwoordwidget, status minimaal aantal tekens B. Wachtwoordwidget, status maximaal aantal tekens C. Wachtwoordwidget, status vereist De widget wachtwoord voor validatie bevat een aantal staten (bijvoorbeeld geldig, vereist, minimaal aantal tekens, enzovoort). U kunt de eigenschappen van deze staten wijzigen door het bijbehorende CSS-bestand te bewerken (SpryValidationPassword.css), afhankelijk van de gewenste validatieresultaten.
-
477 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Status wijziging vereist voor een widget wachtwoord voor validatie Standaard is voor alle widgets wachtwoord voor validatie die u met Dreamweaver invoegt, invoer van de gebruiker nodig wanneer deze op een webpagina wordt gepubliceerd. U kunt het invullen van tekstvelden voor een wachtwoord echter optioneel maken voor de gebruiker.
-
478 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Minimum/Maximum aantal hoofdletters Geeft het minimale en maximale aantal hoofdletters aan (A, B, C, enzovoort) dat het wachtwoord moet bevatten om geldig te zijn. Minimum/Maximum aantal speciale tekens Geeft het minimale en maximale aantal speciale tekens aan (!, @, #, enzovoort) dat het wachtwoord moet bevatten om geldig te zijn.
-
479 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Te wijzigen tekst Relevante CSS-regel Relevante eigenschappen om te wijzigen Tekst van foutbericht .passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .
-
480 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen De widget validatie voor bevestigen bevat een aantal staten (bijvoorbeeld geldig, ongeldig, vereist, enzovoort). U kunt de eigenschappen van deze staten wijzigen door het bijbehorende CSS-bestand te bewerken (SpryValidationConfirm.css), afhankelijk van de gewenste validatieresultaten.
-
481 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Widgettoestanden weergeven in de ontwerpweergave 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 selecteer de toestand die u wilt zien in het pop- upmenu Voorvertoningsstatus. Bijvoorbeeld, selecteer Geldig als u de widget in de toestand Geldig wilt weergeven.
-
482 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Tekst opmaken van foutbericht voor widget validatie voor bevestigen Standaard worden foutberichten voor de widget validatie voor bevestigen weergegeven in een kader met een effen rode rand van 1 pixel breed. ❖ Als u de tekstopmaak van de foutberichten voor een widget validatie voor bevestigen wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende CSS-regel op te zoeken.
-
483 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Een Spry-gegevensset maken Een Spry HTML-gegevensset maken 1 Als u alleen een gegevensset maakt, hoeft u zich geen zorgen te maken over de invoegpositie. Als u een gegevensset maakt en ook een lay-out invoegt, moet u ervoor zorgen dat de invoegpositie op de plaats staat waar u de lay-out op de pagina wilt invoegen. 2 Kies Invoegen > Spry > Spry-gegevensset.
-
484 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen 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.
-
485 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen 4 Voer de volgende stappen uit in het scherm Opties voor gegevens instellen: • (Optioneel) Stel gegevenssetkolomtypen in door een kolom te selecteren en een kolomtype uit het pop-upmenu Type te kiezen. Als een kolom in de gegevensset bijvoorbeeld cijfers bevat, selecteert u de kolom en kiest u number uit het pop-upmenu Type. Deze optie is alleen van belang als u wilt dat de gebruiker de gegevens op die kolom kan sorteren.
-
486 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen 2 Kies Invoegen > Spry > Spry-gegevensset. 3 Voer de volgende stappen uit in het scherm Gegevensbron opgeven: • Selecteer XML uit het pop-upmenu Gegevenstype selecteren. • Geef een naam op voor de nieuwe gegevensset. Als u voor het eerst een gegevensset maakt, krijgt deze de standaardnaam ds1. De gegevenssetnaam kan letters, cijfers en onderstrepingstekens bevatten, maar mag niet beginnen met een cijfer.
-
487 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Een herhalingselement selecteren voor de XML-gegevensset. Nadat u het containerelement voor de gegevensset hebt geselecteerd, geeft Dreamweaver een voorbeeld weer van de gegevensset in het venster Gegevensvoorbeeld. Het tekstvak XPath bevat een expressie die laat zien waar het geselecteerde knooppunt zich in het XML-bronbestand bevindt. Opmerking: XPath (XML Path Language) is een syntaxis voor het adresseren van delen van een XML-document.
-
488 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen 4 Voer de volgende stappen uit in het scherm Opties voor gegevens instellen: • (Optioneel) Stel gegevenssetkolomtypen in door een kolom te selecteren en een kolomtype uit het pop-upmenu Type te kiezen. Als een kolom in de gegevensset bijvoorbeeld cijfers bevat, selecteert u de kolom en kiest u number uit het pop-upmenu Type. Deze optie is alleen van belang als u wilt dat de gebruiker de gegevens op die kolom kan sorteren.
-
489 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Wanneer u deze optie hebt geselecteerd, klikt u op de knop Instellen om het dialoogvenster Tabel invoegen te openen en onderstaande stappen te volgen: 1 Ga naar het paneel Kolommen en pas op de volgende wijze de kolommen voor uw tabel aan: • Selecteer een kolomnaam en klik op het minteken (-) om de kolom uit de tabel te verwijderen. Klik op het plusteken (+) en selecteer een kolomnaam om nieuwe kolommen aan de tabel toe te voegen.
-
490 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Wanneer u deze optie hebt geselecteerd, klikt u op de knop Instellen om het dialoogvenster Hoofd-/detailindeling invoegen te openen en onderstaande stappen te volgen: 1 Pas in het paneel Hoofdkolommen de inhoud van het hoofdgebied als volgt aan: • Selecteer een kolomnaam en klik op het minteken (-) om de kolom uit het hoofdgebied te verwijderen.
-
491 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Gestapelde containers met de lay-out Spotlightgebied Selecteer deze optie als u de gegevens wilt weergeven met een herhalende containerstructuur op de pagina met in elke container een spotlightgebied. Het spotlightgebied bevat doorgaans een afbeelding. De lay-out Spotlightgebied is vergelijkbaar met de lay-out Gestapelde containers.
-
492 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Een invoer ontwerptijd gebruiken Als u met gegevens werkt die nog in ontwikkeling zijn, is het soms handig om met een invoer ontwerptijd te werken. Als de serverontwikkelaar bijvoorbeeld nog bezig is met het voltooien van de database achter uw XMLgegevensbestand, kunt u een testversie van het bestand gebruiken om uw pagina onafhankelijk van de databaseontwikkeling te ontwerpen.
-
493 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Raadpleeg de Spry-ontwikkelaarshandleiding op www.adobe.com/go/learn_dw_sdg_masterdetail_nl voor meer informatie over het handmatig maken van hoofd-/detailgebieden.
-
494 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen In het paneel Bindingen worden de beschikbare gegevens uit de gegevensset weergegeven. Opmerking: In het paneel Bindingen worden ook een aantal ingebouwde Spry-elementen, ds_RowID, ds_CurrentRowID en ds_RowCount, genoemd. Met behulp van deze elementen kan Spry definiëren in welke rij een gebruiker heeft geklikt, wanneer wordt bepaald hoe dynamische detailgebieden moeten worden bijgewerkt.
-
495 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Voor meer flexibiliteit kunt u de optie Onderliggende niveaus herhalen gebruiken, waarbij gegevensvalidatie wordt uitgevoerd voor elke regel in een lijst op het onderliggende niveau. Als u bijvoorbeeld een -lijst hebt, worden de gegevens op het - -niveau gecontroleerd. Als u de optie Herhalen kiest, worden de gegevens op het
-
496 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Een lijst met Spry-herhalingen maken U kunt lijsten met herhalingen toevoegen om uw gegevens weer te geven als een geordende lijst, een niet-geordende lijst (lijst met opsommingstekens) of een vervolgkeuzelijst. 1 Kies Invoegen > Spry > Lijst met Spry-herhalingen. U kunt ook op de knop Lijst met Spry-herhalingen klikken in de categorie Spry van het paneel Invoegen. 2 Selecteer de containertag die u wilt gebruiken. UL, OL, DL of SELECT.
-
497 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Verduisteren Hiermee simuleert u een verduisteringsgordijn dat omhoog of omlaag wordt getrokken om het element te verbergen of weer te geven. Schuiven Hiermee verschuift u een element naar boven of beneden. Vergroten/Verkleinen Hiermee maakt u het element groter of kleiner. Schudden Hiermee simuleert u het van links naar rechts schudden van het element. Soppen Hiermee laat u het element in de linkerbovenhoek van de pagina verdwijnen.
-
498 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen 8 Selecteer Effect in-/uitschakelen als u wilt dat het effect omkeerbaar is, dus dat het met een klik verandert van omhoog verduisteren in omlaag verduisteren, en omgekeerd. Het effect Vergroten/Verkleinen toepassen Opmerking: U kunt dit effect gebruiken met de volgende HTML-elementen: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu of pre.
-
499 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Het effect Schudden toepassen Opmerking: U kunt dit effect gebruiken met de volgende HTML-elementen: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre of table. 1 (Optioneel) Selecteer het inhouds- of indelingselement waarop u het effect wilt toepassen. 2 Klik in het paneel Gedrag (Venster > Gedrag) op de Plusknop (+) en kies Effecten > Schudden in het menu.
-
500 DREAMWEAVER GEBRUIKEN Spry-pagina's visueel opbouwen Een effect verwijderen U kunt een of meer effecten uit een element verwijderen. 1 (Optioneel) Selecteer het inhouds- of indelingselement waarop u het effect wilt toepassen. 2 Klik in het paneel Gedrag (Venster > Gedrag) op het effect dat u uit de lijst met gedragingen wilt verwijderen. 3 Voer een van de volgende handelingen uit: • Klik op de knop Gebeurtenis verwijderen op de titelbalk van het subpaneel (-).
-
501 Hoofdstuk 16: Ontwerpen voor meerdere schermen en apparaten Mediaquery's maken (CS5.5) U kunt mediaquery's gebruiken om CSS-bestanden op te geven op basis van de gerapporteerde kenmerken van een apparaat. 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 509
502 DREAMWEAVER GEBRUIKEN Ontwerpen voor meerdere schermen en apparaten Als u deze optie inschakelt, wordt de volgende code ingevoegd in uw bestand. 6 Voer een van de volgende handelingen uit: • Klik op ‘+’ om de eigenschappen voor het mediaquerybestand te definiëren. • Klik op Standaardvoorinstellingen als u wilt beginnen met de standaardwaarden.
-
503 DREAMWEAVER GEBRUIKEN Ontwerpen voor meerdere schermen en apparaten Een ander bestand met mediaquery's voor de hele site selecteren Gebruik deze procedure om het bestand met mediaquery's voor de hele site te wijzigen dat u hebt ingesteld in het dialoogvenster Mediaquery's. 1 Selecteer Site > Sites beheren. 2 Selecteer uw site in het dialoogventer Sites beheren. 3 Klik op Bewerken. Het dialoogvenster Site-instelling wordt weergegeven.
-
504 DREAMWEAVER GEBRUIKEN Ontwerpen voor meerdere schermen en apparaten Een webtoepassing maken met jQuery Mobile 1. Open een jQuery Mobile-startpagina of maak een HTML5-pagina Gebruik de jQuery Mobile-startpagina's in Dreamweaver om uw toepassing te maken. U kunt uw webpagina ook maken met een nieuwe HTML5-pagina. De jQuery Mobile-startpagina's bevatten HTML-, CSS-, JavaScript- en afbeeldingsbestanden waarmee u aan de slag kunt gaan met het ontwerpen van uw toepassing.
-
505 DREAMWEAVER GEBRUIKEN Ontwerpen voor meerdere schermen en apparaten jQuery Mobile (PhoneGap) Gebruik deze startpagina als uw webtoepassing systeemeigen functies van mobiele apparaten gebruikt wanneer de toepassing wordt gedistribueerd. Zie “Webtoepassingen distribueren als systeemeigen mobiele toepassingen (CS5.5)” op pagina 506 voor meer informatie. Startpagina's gebruiken om een toepassing voor mobiele apparaten te maken 1 Selecteer Bestand > Nieuw.
-
506 DREAMWEAVER GEBRUIKEN Ontwerpen voor meerdere schermen en apparaten 5 Selecteer een van de volgende opties in het dialoogvenster jQuery Mobile-bestanden: Extern (CDN) Selecteer deze optie als u verbinding wilt maken met een externe CDN-server waarop de jQuery Mobile-bestanden worden gehost. Gebruik de standaardoptie voor de jQuery-site als u nog geen site met jQuery Mobile-bestanden hebt geconfigureerd. U kunt ook ervoor kiezen andere CDN-servers te gebruiken.
-
507 DREAMWEAVER GEBRUIKEN Ontwerpen voor meerdere schermen en apparaten Meer Help-onderwerpen http://www.phonegap.com/about http://jquerymobile.com/demos/1.0a2/ http://docs.phonegap.com/ Een webtoepassing maken met de startpagina 1 Selecteer Bestand > Nieuw. 2 Selecteer Pagina uit voorbeeld > Mobiele startpagina's > jQuery Mobile (PhoneGap). 3 Klik op Maken. 4 Selecteer jQuery Mobile in het deelvenster Invoegen (Venster > Invoegen).
-
508 DREAMWEAVER GEBRUIKEN Ontwerpen voor meerdere schermen en apparaten Opmerking: Wanneer u op Opslaan klikt, wordt het bestand phonegap.js naar de hoofdmap van de site gekopieerd. 9 Voer een van de volgende handelingen uit: • Selecteer Site > Mobiele toepassingen > Samenstellen als u uw toepassing rechtstreeks naar een apparaat distribueert. Selecteer een platform/apparaat voor de build.
-
509 DREAMWEAVER GEBRUIKEN Ontwerpen voor meerdere schermen en apparaten • Selecteer Site > Mobiele toepassingen > Samenstellen en emuleren als u wilt controleren hoe de build eruit ziet in een emulator voordat u de build gaat samenstellen. Meer Help-onderwerpen www.abobe.
-
510 DREAMWEAVER GEBRUIKEN Ontwerpen voor meerdere schermen en apparaten Navigeren door koppelingen Het deelvenster Voorvertoning voor meerdere schermen synchroniseert niet automatisch met de ontwerpweergave of Live View. Als u in een van deze weergaven bewerkt, klikt u op de knop Vernieuwen in het deelvenster Voorvertoning voor meerdere schermen.
-
511 Hoofdstuk 17: Onlineservices van Adobe gebruiken Adobe-onlineservices 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. In de volgende Help-secties vindt u informatie over het gebruik van deze services.
-
512 DREAMWEAVER GEBRUIKEN Onlineservices van Adobe gebruiken In deze documentatie wordt uitgelegd hoe u met de bewerkbare InContext Editing-gebieden in Dreamweaver kunt werken. Adobe biedt daarnaast ook andere informatiebronnen die u helpen bij het werken met InContext Editing: • Zie www.adobe.com/go/learn_dw_incontextediting_browser_nl voor documentatie over het gebruik van InContext Editing om pagina's te bewerken in een browser. • Zie www.adobe.
-
513 DREAMWEAVER GEBRUIKEN Onlineservices van Adobe gebruiken • Als u andere inhoud hebt geselecteerd om bewerkbaar te maken, voert u één van de volgende stappen uit: • Selecteer Huidige selectie tussen DIV-tags plaatsen en het vervolgens omzetten als u het geselecteerde item tussen div-tags wilt plaatsen en in een bewerkbaar gebied wilt omzetten. De div-tags waartussen Dreamweaver de inhoud plaatst, fungeert als de container voor het bewerkbare gebied.
-
514 DREAMWEAVER GEBRUIKEN Onlineservices van Adobe gebruiken 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.
-
515 DREAMWEAVER GEBRUIKEN Onlineservices van Adobe gebruiken Opmerking: Alleen div-tags kunnen tegelijkertijd de kenmerken voor een bewerkbaar gebied als die voor een herhalingsgebied bevatten. • Plaats de invoegpositie daar waar u een nieuw herhalingsgebied op de pagina wilt plaatsen. • Selecteer exact één herhalingsgebied in een Dreamweaver-sjabloon (DWT-bestand). • Selecteer andere inhoud op de pagina die u wilt kunnen herhalen (zoals een kop of een tekstblok).
-
516 DREAMWEAVER GEBRUIKEN Onlineservices van Adobe gebruiken Als u de functie InContext Editing voor het eerst aan een pagina toevoegt, krijgt u bericht van Dreamweaver dat er ondersteunende bestanden van InContext Editing aan uw site worden toegevoegd: ice.conf.js, ice.js, en ide.html. Laad deze bestanden naar de server wanneer u de pagina laadt, anders zal de InContext Editing-functie niet werken in een browser.
-
517 DREAMWEAVER GEBRUIKEN Onlineservices van Adobe gebruiken Herhaalde gebieden mogen zich niet binnen bewerkbare gebieden bevinden en mogen geen 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.
-
518 Hoofdstuk 18: XML-gegevens met XSLT weergeven Over XML en XSLT 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. Bij XML kunt u daarentegen tags maken die uw gegevensstructuur (schema) het best definiëren. Tags worden binnen andere tags genest en vormen een schema van boven- en onderliggende tags.
-
519 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Welke benadering u uiteindelijk kiest (server-side dan wel client-side transformaties), is afhankelijk van het eindresultaat dat u beoogt, van de technologieën waarover u beschikt, van het toegangsniveau dat u hebt voor XMLbronbestanden, en van andere factoren. Beide benaderingen hebben hun eigen voordelen en beperkingen.
-
520 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven WEBSERVER 6 Gegevens 5 Toepassing Server 4 3 XML Webbrowser 1 2 1. Browser vraagt dynamische pagina aan 2. Webserver zoekt de pagina en geeft deze door aan de toepassingsserver 3. Toepassingsserver scant pagina op instructies en haalt XSLT-fragment op 4. Toepassingsserver voert transformatie uit (leest XSLT-fragment, haalt XML-gegevens op en maakt deze op) 5.
-
521 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Client-side XSL-transformaties 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).
-
522 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Als u Dreamweaver gebruikt om een XSLT-pagina aan een XML-pagina te koppelen, voegt Dreamweaver bovenaan in de XML-pagina de juiste code voor u in. Als u eigenaar bent van de XML-pagina waaraan u koppelt (dat wil zeggen dat het XML-bestand alleen op uw webserver aanwezig is), hoeft u alleen met Dreamweaver de juiste code in te voegen die de beide pagina's koppelt.
-
523 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven In het volgende voorbeeld wordt geïllustreerd hoe het Herhalingsgebied XSLT-object wordt toegepast op een tabelrij met menu-informatie voor een restaurant. De eerste rij toont drie elementen van het XML-schema: gerecht, beschrijving en prijs.
-
524 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven De volgende code is voor dezelfde tabel maar waarbij wel het Herhalingsgebied XSLT-object is toegepast: | | PAGE 532
525 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Pagina's bekijken voor server-side transformaties Bij server-side transformaties ziet de bezoeker van de site uiteindelijk de inhoud die door uw toepassingsserver getransformeerd is. Bij het bouwen van XSLT- en dynamische pagina's voor gebruik met server-side transformaties is het altijd raadzaam om de dynamische pagina met het XSLT-fragment te bekijken in plaats van het XSLT-fragment zelf.
-
526 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven 1. Zet een Dreamweaver-site op. 2. Kies een server-technologie en stel een toepassingsserver in. 3. Test de toepassingsserver. Maak bijvoorbeeld een pagina die verwerking vereist, en zorg ervoor dat de toepassingsserver de pagina verwerkt. 4. Maak een XSLT-fragment of -pagina of zet een HTML-pagina om in een XSLT-pagina. • Maak op uw Dreamweaver-site een XSLT-fragment of een hele XSLT-pagina.
-
527 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Opmerking: Als u begint met een bestaande XSLT-pagina, moet u daar een XML-gegevensbron aan koppelen. 1 Selecteer Bestand > Nieuw. 2 Selecteer in de categorie Lege pagina van het dialoogvenster Nieuw document een van de volgende opties in de kolom Paginatype: • Selecteer XSLT (hele pagina) om een hele XSLT-pagina te maken. • Selecteer XSLT (fragment) om een XSLT-fragment te maken.
-
528 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven In het documentvenster wordt een kopie van de pagina geopend. De nieuwe pagina is een XSL-stijlpagina, opgeslagen met de extensie .xsl. XML-gegevensbronnen koppelen Als u met een bestaande XSLT-pagina start of geen XML-gegevensbron koppelt bij het maken van een nieuwe XSLTpagina met Dreamweaver, moet u een XML-gegevensbron koppelen met het paneel Bindingen. 1 Klik op de XML-koppeling in het paneel Bindingen (Venster > Bindingen).
-
529 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven 3 In het paneel Bindingen kiest u een XML-element en sleept het naar een plaats op de pagina waar u gegevens wilt invoegen. Op de pagina verschijnt een tijdelijke aanduiding voor XML-gegevens. Deze aanduiding wordt gemarkeerd en staat tussen accolades. De XPath-syntaxis (XML Path-taal) wordt gebruikt om de hiërarchische structuur van het XMLschema te beschrijven.
-
530 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Herhalende XML-elementen weergeven Met Herhalingsgebied XSLT-object kunt u herhalende elementen van een XML-bronbestand op een webpagina herhalen. Als u bijvoorbeeld titels van artikelen en beschrijvingen van een nieuwsbron met 10 tot 20 artikelen weergeeft, is elke titel en beschrijving in het XML-bestand waarschijnlijk een onderliggend element van een herhalend element.
-
531 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven 3 Selecteer in de expressiebouwer voor XPath het herhalende element dat door een klein plusteken aangeduid wordt. 4 Klik op OK. In het documentvenster verschijnt een dunne grijze omtrek met tab rond het herhaalde gebied. Als u uw werk in een browser bekijkt (Bestand > Voorvertoning in browser), verdwijnt de grijze omtrek, wordt de selectie uitgebreid en geeft deze de opgegeven herhalende elementen in het XML-bestand weer.
-
532 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven 2 Klik in de eigenschappencontrole (Venster > Eigenschappen) op het dynamische pictogram naast het tekstveld Selecteren. 3 Breng in de expressiebouwer voor XPath de wijzigingen aan en klik op OK. XSLT-fragmenten invoegen in dynamische pagina's Nadat u een XSLT-fragment hebt gemaakt, kunt u het met het servergedrag voor XSL-transformatie invoegen in een dynamische webpagina.
-
533 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven 6 Klik op OK om een verwijzing naar het XSLT-fragment in de pagina in te voegen. Het fragment kan niet worden bewerkt. U kunt dubbelklikken op het fragment om het bronbestand ervan te openen en te bewerken. In de hoofdmap van de site wordt ook een map includes/MM_XSLTransform/ gemaakt met een runtime bibliotheekbestand. De toepassingsserver gebruikt de in dit bestand gedefinieerde functies voor het uitvoeren van de transformatie.
-
534 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Stijlen toepassen op XSLT-fragmenten Als u een hele XSLT-pagina maakt (dat wil zeggen een XSLT-pagina met - en -tags), kunt u XMLgegevens op de pagina weergeven en de gegevens met de eigenschappencontrole of het deelvenster CSS-stijlen opmaken zoals elk ander deel van de inhoud.
-
535 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven 2 In het dialoogvenster XSL-transformatie klikt u op de knop Plus (+) naast XSLT-parameters. 3 In het vak Naam in het dialoogvenster Parameter toevoegen typt u een naam voor de parameter. Deze naam mag alleen alfanumerieke tekens bevatten. Er mogen geen spaties in voorkomen. 4 Voer een van de volgende handelingen uit: • Als u een statische waarde wilt gebruiken, typt u deze in het vak Waarde.
-
536 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Als u bijvoorbeeld naast de prijs van een uitverkocht artikel het woord "Uitverkocht" wilt plaatsen, typt u "Uitverkocht" op de pagina, selecteert u het woord en past u daarna een voorwaardelijk gebied toe op de geselecteerde tekst. Dreamweaver plaatst de selectie tussen -tags en geeft het woord "Uitverkocht" alleen op de pagina weer als de gegevens voldoen aan de voorwaarden van de voorwaardelijke expressie.
-
537 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Naast het testen van waarden van knooppunten kunt u alle ondersteunde XSLT-functies in een voorwaardelijke expressie gebruiken. De voorwaarde wordt getest voor het huidige knooppunt in uw XML-bestand. In het volgende voorbeeld wilt u het laatste knooppunt in de resultaten testen. Zie de sectie in het paneel Referentie (Help > Referentie) voor meer informatie en voorbeelden desbetreffende het schrijven van voorwaardelijke expressies.
-
538 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Content goes here Content goes here 4 Om een andere voorwaarde in te voegen, plaatst u de invoegpositie in codeweergave tussen de paren - tags of vlak voor de -tag en voegt daarna een voorwaardelijk gebied in (Invoegen > XSLTobjecten > Voorwaardelijk gebied).
-
539 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Expressies voor XML-gegevens toevoegen met de expressiebouwer voor XPath XPath (XML Path Language) is een niet-XML syntaxis voor het adresseren van delen van een XML-document. Deze syntaxis wordt meestal als een querytaal voor XML-gegevens gebruikt, zoals SQL wordt gebruik voor het zoeken naar gegevens in databases. Zie de XPath taalspecificatie op de W3C-website van www.w3.org/TR/xpath voor meer informatie over XPath.
-
540 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven 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.
-
541 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven In het volgende voorbeeld wilt u elk knooppunt item in het XML-bestand herhalen. Als u op OK klikt, wordt de volgende code op uw XSLT-pagina ingevoegd. Content goes here Soms wilt u wellicht werken met een subset van de herhalende knooppunten–bijvoorbeeld als u alleen artikelen wilt met een kenmerk van een bepaalde waarde. In dat geval moet u een filter maken.
-
542 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven In het volgende voorbeeld wilt u de resultaten beperken tot die item-knooppunten waarbij de waarde van het kenmerk @availabletrue (waar) is. 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.
-
543 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven U kunt meer complexe filters maken waarmee u bovenliggende knooppunten kunt opgeven als deel van uw filtercriteria. In het volgende voorbeeld wilt u de resultaten beperken tot die item-knooppunten waarbij het @idkenmerk van de store gelijk is aan 1 en het price-knooppunt van het item groter is dan 5. Als u op OK klikt, wordt de volgende code op uw XSLT-pagina ingevoegd.
-
544 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven 3. Koppel een XML-gegevensbron aan de pagina (als u dat nog niet gedaan hebt). Het gekoppelde XML-bestand moet zich in dezelfde directory bevinden als de XSLT-pagina. 4. Bind uw XML-gegevens aan de XSLT-pagina. 5. Geef de XML-gegevens weer door de gegevens aan de hele XSLT-pagina te binden. 6. Voeg zo nodig een Herhalingsgebied XSLT-object aan de tabel of de tabelrij toe met de tijdelijke aanduiding(en) voor XML-gegevens. 7.
-
545 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Een XSLT-pagina aan een XML-pagina koppelen Als u een hele XSLT-pagina hebt met tijdelijke aanduidingen voor dynamische inhoud voor uw XML-gegevens, moet u in de XML-pagina een verwijzing invoegen naar de XSLT-pagina. Opmerking: De XML- en XSL-bestanden voor client-side transformaties moeten zich in dezelfde directory bevinden.
-
546 DREAMWEAVER GEBRUIKEN XML-gegevens met XSLT weergeven Als u een aan een XSLT-bestand gekoppeld XML-bestand of een server-side pagina met een XSLT-transformatie voorvertoont, meldt de server of de browser (in plaats van Dreamweaver) dat een niet gedefinieerde tekeneenheid is aangetroffen. Het volgende voorbeeld is een melding die Internet Explorer u kan geven als u een XSL-bestand aanvraagt dat door een XML-bestand getransformeerd is en waarin de definitie van een tekeneenheid ontbreekt.
-
547 Hoofdstuk 19: Voorbereidingen voor het bouwen van dynamische websites Voordat u kunt beginnen met het bouwen van dynamische webpagina's, moeten er enkele voorbereidingen worden getroffen, zoals het opstellen van een webtoepassingsserver en het verbinden met een database voor ColdFusion-, ASP, - en PHP-toepassingen. Afhankelijk van uw servertechnologie worden databaseverbindingen in Adobe® Dreamweaver® CS5 verschillend behandeld.
-
548 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Voorbeeld van webtoepassing Janet is een professionele webontwerper en is altijd de Dreamweaver-gebruiker geweest die verantwoordelijk was voor het onderhoud van de intranet- en internetsites van een middelgroot bedrijf met 1000 werknemers. Op een dag komt Chris van Personeelszaken bij haar met een probleem.
-
549 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Trio Motors Information Page About Trio Motors Trio Motors is a leading automobile manufacturer. Elke regel HTML-code van de pagina wordt door de ontwerper geschreven voordat de pagina op de server wordt geplaatst. Omdat de HTML niet meer verandert wanneer deze eenmaal op de server staat, wordt dit soort pagina een statische pagina genoemd.
-
550 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites WEBSERVER 5 Antwoord 4 H1 Toepassings server Webbrowser Verzoek 1 2 3 1. Webbrowser vraagt een dynamische pagina op. 2. Webserver zoekt de pagina en geeft deze door aan de toepassingsserver. 3. Toepassingsserver scant de pagina voor instructies en voltooit de pagina. 4. Toepassingsserver geeft de voltooide pagina weer terug aan de webserver 5.
-
551 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites 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.
-
552 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Trio Motors Information Page About Trio Motors Trio Motors is a leading automobile manufacturer. Be sure to visit our #department# page.
-
553 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Meer Help-onderwerpen “Een toepassingsserver kiezen” op pagina 556 Webtoepassingsterminologie In deze sectie vindt u een definitie van regelmatig gebruikte termen met betrekking tot webtoepassingen. Een toepassingsserver Software die een webserver helpt bij de verwerking van webpagina's die scripts of tags bevatten aan de serverzijde.
-
554 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Een relationele database Een database met meer dan één tabel waarbij de tabellen gemeenschappelijke gegevens hebben. De volgende database is relationeel omdat de twee tabellen de kolom DepartmentID gemeenschappelijk hebben. Een servertechnologie De technologie die een toepassingsserver gebruikt om dynamische pagina's in runtime te wijzigen.
-
555 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites • Een databasesysteem • Een databasestuurprogramma dat uw database ondersteunt Diverse webhostingbedrijven bieden programma's aan, waarmee u hun software kunt gebruiken voor het testen van en werken met webtoepassingen. In bepaalde gevallen kunt u voor ontwikkelingsdoeleinden de vereiste software installeren op dezelfde computer als Dreamweaver.
-
556 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites 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.
-
557 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Servertechnologie Toepassingsserver ColdFusion Adobe ColdFusion 8 ASP Microsoft IIS PHP PHP-server Voor meer informatie over ColdFusion selecteert u ColdFusion Help in het menu Help. Voor meer informatie over ASP gaat u naar de Microsoft-website op http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnanchor/html/activeservpages.asp. Voor meer informatie over PHP gaat u naar de PHP-website op www.php.
-
558 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Een PHP-ontwikkelomgeving instellen Ga naar de Adobe-website op www.adobe.com/devnet/dreamweaver/articles/setup_php.html voor gedetailleerde instructies voor het instellen van een PHP-ontwikkelomgeving voor Dreamweaver op uw Windows- of Maccomputer. Er zijn versies van de PHP-toepassingsserver verkrijgbaar voor Windows-, Linux-, UNIX-, HP-UX-, Solaris- en Mac OS X-systemen.
-
559 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites 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 Macintoshgebruikersnaam is) Opmerking: Standaard werkt de ColdFusion-webserver via poort 8500 en de Apache-webserver voor Windows via poort 80.
-
560 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites 3. Een testmap definiëren Dreamweaver gebruikt deze map om dynamische inhoud te genereren en weer te geven en om een verbinding met databases tot stand te brengen terwijl u werkt. De testserver kan uw lokale computer, een ontwikkelingsserver, een parkeerserver of een productieserver zijn. Wat u kiest, maakt niet uit, zolang de server maar de dynamische pagina's kan verwerken die u wilt gaan ontwikkelen.
-
561 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites 3 Als u een nieuwe gegevensbron wilt maken, klikt u op de plusknop (+) in het paneel Databases (Vensters > Databases) en voert u de parameterwaarden in voor het databasestuurprogramma. Opmerking: In Dreamweaver wordt de plusknop alleen weergegeven als u werkt met ColdFusion MX 7 of later. 4 Als u een gegevensbron wilt aanpassen, dubbelklikt u op de databaseverbinding in het paneel Databases en voert u uw wijzigingen in.
-
562 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Database Databasestuurprogramma Microsoft Access Microsoft Access Driver (ODBC) Microsoft Jet Provider voor Access (OLE DB) Microsoft SQL Server Microsoft SQL Server Driver (ODBC) Microsoft SQL Server Provider (OLE DB) Oracle Microsoft Oracle Driver (ODBC) Oracle Provider voor OLE DB U kunt een DSN (Data Source Name, gegevensbronnaam) of een verbindingstekenreeks gebruiken voor het maken van een verbinding met de dat
-
563 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites 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;...
-
564 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Research\trees.
-
565 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Meer Help-onderwerpen “De databasegegevens beperken die in Dreamweaver worden weergegeven” op pagina 579 “Uw computer instellen voor de ontwikkeling van toepassingen” op pagina 554 “Problemen met databaseverbindingen oplossen” op pagina 571 Een verbinding maken met een DSN op afstand Opmerking: In deze paragraaf wordt ervan uitgegaan dat u een ASP-toepassing hebt ingesteld.
-
566 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Meer Help-onderwerpen “Uw computer instellen voor de ontwikkeling van toepassingen” op pagina 554 “De databasegegevens beperken die in Dreamweaver worden weergegeven” op pagina 579 “Problemen met databaseverbindingen oplossen” op pagina 571 Een verbinding maken met een verbindingstekenreeks U kunt een verbinding zonder DSN gebruiken om een ODBC- of OLE DB-verbinding te maken tussen uw webtoepassing en uw database.
-
567 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites U kunt het fysieke bestand van een databasebestand op een server verkrijgen met behulp van de MapPath-methode van het ASP-serverobject. Opmerking: De technieken die in deze paragraaf worden besproken, zijn alleen van toepassing als uw database is gebaseerd op een bestand, zoals een Microsoft Access-database waarin gegevens worden opgeslagen in een.mdb-bestand.
-
568 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Voor meer informatie over de methode MapPath raadpleegt u de onlinedocumentatie die wordt geleverd bij Microsoft IIS. Een virtueel pad gebruiken om te verbinden met een database Als u een verbindingstekenreeks zonder DSN wilt schrijven voor een databasebestand dat zich op een server op afstand bevindt, moet u weten wat het fysieke pad naar het bestand is.
-
569 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Een databaseverbinding bewerken of verwijderen 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.
-
570 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Verbinding maken met een database Als u een verbinding met een database wilt maken tijdens het ontwikkelen van een PHP-toepassing in Dreamweaver, moet u een of meer MySQL-databases hebben en moet de MySQL-server actief zijn. 1 Open een PHP-pagina in Dreamweaver en open vervolgens het paneel Databases (Venster > Databases).
-
571 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Opmerking: U kunt voorkomen dat er fouten optreden na het verwijderen van een verbinding. Hiertoe werkt u elke recordset bij die de oude verbinding gebruikt, door op de naam van de recordset te dubbelklikken in het paneel Bindingen en een nieuwe verbinding te selecteren in het dialoogvenster Recordset.
-
572 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites 9 Als u de volledige rechten aan de IUSR-account wilt toewijzen, selecteert u Volledig beheer en klikt u op OK. De rechten voor het databasebestand controleren of wijzigen (Windows 2000) 1 Controleer of u beheerdersrechten op de computer hebt. 2 Zoek in Windows Verkenner het databasebestand of de map op die de database bevat, klik met de rechtermuisknop op het bestand of de map en selecteer Eigenschappen.
-
573 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites • De pagina kan de DSN niet vinden. Controleer of er op zowel de webserver als de lokale computer een DSN is gemaakt. • Wellicht is de DSN ingesteld als een gebruikers-DSN in plaats van een systeem-DSN. Verwijder de gebruikers-DSN en maak een systeem-DSN die de gebruikers-DSN vervangt. Opmerking: Als u de gebruikers-DSN niet verwijdert, genereren de dubbele DSN-namen een nieuwe ODBC-fout.
-
574 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites 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.
-
575 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites U probeert wellicht een record in te voegen in een databaseveld met een vraagteken (?) in de veldnaam. Het vraagteken wordt beschouwd als een speciaal teken voor bepaalde database-engines, waaronder Microsoft Access, en mag niet worden gebruikt voor databasetabelnamen of veldnamen. Open uw databasesysteem en verwijder het vraagteken (?) uit de veldnamen en werk op uw pagina het servergedrag bij dat naar dit veld verwijst.
-
576 DREAMWEAVER GEBRUIKEN Voorbereidingen voor het bouwen van dynamische websites Het probleem treedt op wanneer op de pagina gegevens moeten worden weergegeven uit een lege recordset. Dit probleem kunt u oplossen door het servergedrag Regio tonen toe te passen op de dynamische inhoud die op de pagina moet worden weergegeven: 1 Selecteer de dynamische inhoud op de pagina. 2 Klik in het paneel Servergedrag op de plusknop (+) en selecteer Regio tonen> Regio tonen als recordset niet leeg is.
-
577 Hoofdstuk 20: Pagina's dynamisch maken U kunt dynamische pagina's maken die informatie weergeven op basis van dynamische inhoudsbronnen, zoals databases en sessievariabelen. Adobe® Dreamweaver® CS5 ondersteunt de ontwikkeling van dynamische pagina's voor ColdFusion, ASP-, - en PHP-servermodellen. U kunt ook een op Ajax gebaseerd framework, Spry genoemd, gebruiken om dynamische pagina's te maken die XMLgegevens weergeven en verwerken.
-
578 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Meer Help-onderwerpen “Bindingen, paneel” op pagina 587 “Servergedrag, paneel” op pagina 588 “Paneel Databases” op pagina 588 “Paneel Componenten” op pagina 589 Handleiding ontwikkelwerkruimte De database weergeven in Dreamweaver Nadat u verbinding hebt gemaakt met uw database, kunt u de structuur en gegevens ervan in Dreamweaver bekijken. 1 Open het paneel Databases (Venster > Databases).
-
579 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Met de optie Voorvertoning in browser worden de desbetreffende pagina's, zoals een pagina met resultaten of details, afhankelijke bestanden zoals afbeeldingsbestanden of includes aan de serverzijde, niet geladen. Als u een ontbrekend bestand wilt laden, kiest u Venster > Site om het Sitepaneel te openen, selecteert u het bestand onder Lokale map en klikt u op de blauwe pijl-omhoog op de werkbalk om het bestand naar de map op de webserver te kopiëren.
-
580 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Als u het veldtype in de eigenschappencontrole verandert in een waarde die Dreamweaver herkent (als u bijvoorbeeld de typefout verbetert), wordt de eigenschappencontrole bijgewerkt en worden de eigenschappen voor het herkende type weergegeven. Stel in de eigenschappencontrole een van de volgende opties in: Invoernaam Hiermee geeft u het veld een naam. Dit vakje is vereist, en de naam moet uniek zijn. Type Hiermee stelt u het invoertype van het veld in.
-
581 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Wanneer u een dynamisch inhoudselement of ander servergedrag op een pagina invoegt, voegt Dreamweaver een script dat op de server staat, in de broncode van de pagina in. Dit script bevat de instructies voor de server om de gegevens op te halen uit de gedefinieerde gegevensbron en deze op de webpagina weer te geven.
-
582 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Meer Help-onderwerpen “Inhoud in tabellen presenteren” op pagina 183 “Tekst toevoegen en opmaken” op pagina 225 “Afbeeldingen toevoegen en wijzigen” op pagina 242 “SWF-bestanden invoegen” op pagina 256 Overzicht van dynamische inhoudsbronnen Over dynamische inhoudsbronnen Een dynamische inhoudsbron is een opslagplaats van informatie van waaruit u dynamische inhoud voor een webpagina kunt ophalen en weergeven.
-
583 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Een query kan een recordset opleveren die alleen bepaalde kolommen, alleen bepaalde records of een combinatie van beide bevat. Een recordset kan ook alle records en kolommen van een databasetabel bevatten. Omdat toepassingen echter zelden alle data in een database moeten gebruiken, dient u ernaar te streven om uw recordsets zo klein mogelijk te houden.
-
584 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Voordat u sessievariabelen voor een pagina definieert, moet u ze in de broncode maken. Wanneer u een sessievariabele in de broncode van de webtoepassing hebt gemaakt, kunt u met Dreamweaver de waarde ervan ophalen en op een webpagina gebruiken.
-
585 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Nadat er informatie naar de server is verzonden, slaat u de informatie op in sessievariabelen door de juiste code voor uw servermodel toe te voegen aan de pagina die wordt opgegeven door de URL- of formulierparameter. Wordt de doelpagina genoemd. Deze pagina wordt in het kenmerk action van het HTML-formulier of in het kenmerk href van de hypertekstkoppeling op de startpagina opgegeven.
-
586 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Voorbeeld van in sessievariabelen opgeslagen informatie U bent bezig met een site met een grote doelgroep van oudere gebruikers. Voeg in Dreamweaver twee koppelingen toe aan het welkomstscherm, waarmee de gebruikers de lettergrootte van de tekst op de site kunnen aanpassen. Voor grotere, beter te lezen tekst klikt de gebruiker op de ene koppeling en voor tekst van normale grootte klikt de gebruiker op de andere koppeling.
-
587 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Omdat toepassingsvariabelen blijven bestaan gedurende de hele levensduur van de toepassing, en zelfs van gebruiker tot gebruiker, zijn ze bijzonder geschikt om informatie op te slaan die voor alle gebruikers hetzelfde is, zoals de juiste tijd en datum. De waarde van de toepassingsvariabele wordt gedefinieerd in de code van de toepassing. ASP-servervariabelen U kunt de volgende ASP-servervariabelen definiëren als bronnen met dynamische inhoud: Request.
-
588 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken • “URL-parameters” op pagina 683 • “Sessievariabelen definiëren” op pagina 597 • “Toepassingsvariabelen definiëren voor ASP en ColdFusion” op pagina 598 • “Servervariabelen definiëren” op pagina 599 • “Inhoudsbronnen opslaan in de cache” op pagina 603 • “Een recordset kopiëren van de ene pagina naar de andere” op pagina 603 • “HTML-kenmerken dynamisch maken” op pagina 606 Servergedrag, paneel In het paneel Servergedrag kunt u Dreamweaver-servergedrag aan
-
589 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Paneel Componenten Gebruik het paneel Componenten om componenten te maken en te bekijken en om componentcode op uw pagina's in te voegen. Opmerking: Het paneel werkt niet in de ontwerpweergave. In dit paneel kunt u de volgende taken uitvoeren: ❖ “ColdFusion-componenten gebruiken” op pagina 675 Bronnen met dynamische inhoud definiëren Een recordset definiëren zonder SQL te schrijven U kunt een recordset maken zonder handmatig SQL-instructies in te voeren.
-
590 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken 4 Als u een subset van de tabelkolommen in de recordset wilt opnemen, klikt u op Geselecteerd en kiest u de gewenste kolommen door op de kolommen in de lijst te klikken terwijl u Control (Windows) of Command (Macintosh) ingedrukt houdt.
-
591 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken 5 Selecteer in het pop-upmenu Tabel de databasetabel die de gegevens voor de recordset moet leveren. In het pop-upmenu Tabel worden alle tabellen in de opgegeven database weergegeven. 6 Als u een subset van de tabelkolommen in de recordset wilt opnemen, klikt u op Geselecteerd en kiest u de gewenste kolommen door op de kolommen in de lijst te klikken terwijl u Control (Windows) of Command (Macintosh) ingedrukt houdt.
-
592 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Meer Help-onderwerpen “SQL-query's maken met de structuur Database-items” op pagina 595 “Databaseverbindingen voor ASP-ontwikkelaars” op pagina 561 “Databaseverbindingen voor PHP-ontwikkelaars” op pagina 569 “Bronnen met dynamische inhoud definiëren” op pagina 589 “Een opgeslagen procedure toevoegen (ColdFusion)” op pagina 664 Beknopte SQL-handleiding Opties voor het dialoogvenster Geavanceerde recordset (PHP, ASP) Definieer een recordset als een bron va
-
593 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken URL-parameters in de kolom Runtimewaarde: Servermodel Runtimewaarde-expressie voor URL-parameter ASP Request.QueryString(“formFieldName”) PHP $_GET['formFieldName'] Formulierparameters in de kolom Runtimewaarde: Servermodel Runtimewaarde-expressie voor formulierparameter ASP Request.Form(“formFieldName”) PHP $_POST['formFieldName'] 5 Klik op Testen om de database te verbinden en een instantie van de recordset te maken.
-
594 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken 5 (Optioneel) Ga als volgt te werk om de SQL-instructie op te bouwen met behulp van de grafische structuur Database-items: • Zorg ervoor dat het tekstgebied SQL leeg is. • Vouw de elementen van de structuur uit tot u het gewenste databaseobject hebt gevonden, bijvoorbeeld een kolom in een tabel. • Selecteer het databaseobject en klik op een van de knoppen aan de rechterzijde van de structuur.
-
595 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Parameters definiëren in een SQL-instructie (PHP) Definieer parameters in een SQL-instructie. De standaardwaarde is de waarde die de parameter moet gebruiken als geen runtimewaarde wordt geretourneerd. 1 Typ een parameternaam in het vakje Naam. 2 Voer een standaardwaarde voor de parameter in het vakje Standaardparameter in. 3 Voer een runtimewaarde voor een parameter in het vakje Runtimewaarde in en klik op OK.
-
596 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken 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 Klik op OK om de recordset aan het paneel Bindingen toe te voegen. URL-parameters definiëren URL-parameters slaan opgehaalde informatie-invoer van gebruikers op.
-
597 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Documenttypen Menu-item in paneel Bindingen voor formuliervariabele ASP Request-variabele > Request.Form ColdFusion Formuliervariabele PHP Formuliervariabele 4 Voer in het dialoogvenster Formuliervariabele de naam van de formuliervariabele in en klik op OK. De naam van de formuliervariabele is doorgaans de naam van het HTML-formulierveld of het object dat wordt gebruikt om deze waarde te verkrijgen.
-
598 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Meer Help-onderwerpen “Informatie van gebruikers verzamelen” op pagina 682 “Hoe werken sessievariabelen” op pagina 584 “Informatie in sessievariabelen verzamelen, opslaan en ophalen” op pagina 584 Toepassingsvariabelen definiëren voor ASP en ColdFusion In ASP en ColdFusion kunt u toepassingsvariabelen gebruiken om informatie op te slaan en weer te geven die gedurende de levensduur van de toepassing wordt bijgehouden en die van gebruiker tot gebruiker bli
-
599 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken In het dialoogvenster Recordset wordt de variabele in het pop-upmenu Gegevensbron samen met de ColdFusiongegevensbronnen op de server weergegeven. 5 Vul het dialoogvenster Recordset in en klik op OK. 6 Initialiseer de variabele. In Dreamweaver wordt de variabele niet voor u geïnitialiseerd. U kunt variabelen dus initialiseren hoe en waar u wilt.
-
600 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Een lokale ColdFusion-variabele definiëren Lokale variabelen zijn variabelen die gemaakt zijn met de tag CFSET of de tag CFPARAM in een ColdFusion-pagina. De gedefinieerde lokale variabele wordt in het paneel Bindingen weergegeven. ❖ Voer in het dialoogvenster Lokale variabele de naam van de lokale variabele in en klik op OK. ASP-servervariabelen definiëren U kunt de volgende ASP-servervariabelen definiëren als bronnen met dynamische inhoud: Request.
-
601 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken 3 Voer in het dialoogvenster Request-variabele de naam van de variabele in (bijvoorbeeld REQUEST_METHOD) en klik op OK. Voor meer informatie zoekt u op het trefwoord $_SERVER in de PHP-documentatie. Een ColdFusion-clientvariabele definiëren Definieer een ColdFusion-clientvariabele als een bron van dynamische inhoud voor de pagina. De zojuist gedefinieerde ColdFusion-clientvariabelen worden weergegeven in het paneel Bindingen.
-
602 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Variabele Beschrijving SERVER_SOFTWARE De naam en versie van de informatieserversoftware die de aanvraag beantwoordt (en waarop de gateway wordt uitgevoerd). Indeling: naam/versie. SERVER_NAME De hostnaam, DNS-alias of het IP-adres van de server zoals gebruikt in naar zichzelf verwijzende URL's. GATEWAY_INTERFACE De revisie van de CGI-specificatie waaraan deze server voldoet. Indeling: CGI/revisie.
-
603 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Inhoudsbronnen opslaan in de cache U kunt bronnen van dynamische inhoud in een Ontwerpnotitie in de cache opslaan. Op die manier kunt u zelfs aan een site werken als u geen toegang hebt tot de database of toepassingsserver waarop de bronnen van dynamische inhoud zijn opgeslagen. Met caching kunt u ook de ontwikkeling versnellen omdat u niet telkens via het netwerk toegang moet krijgen tot de database en toepassingsserver.
-
604 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Dynamische inhoud toevoegen aan pagina's 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. Inhoudsbronnen kunnen een kolom in een recordset zijn, een waarde die door een HTML-formulier is ingediend, de waarde van een serverobject of andere gegevens.
-
605 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Meer Help-onderwerpen “Over recordsets” op pagina 582 “Vooraf gedefinieerde gegevensindelingen gebruiken” op pagina 618 Dynamische tekst toevoegen 1 Ga naar de ontwerpweergave en selecteer tekst op de pagina of klik op de plaats waar u dynamische tekst wilt toevoegen. 2 Selecteer in het paneel Bindingen (Venster > Bindingen) een inhoudsbron in de lijst. Als u een recordset selecteert, geeft u de gewenste kolom in de recordset op.
-
606 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Opmerking: Dreamweaver biedt momenteel geen ondersteuning voor binaire afbeeldingen die in een database zijn opgeslagen. Als de lijst geen recordsets bevat of als de beschikbare recordsets niet geschikt zijn, definieert u een nieuwe recordset.
-
607 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken • 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.
-
608 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Dynamische inhoud op een pagina wordt in het paneel Servergedrag weergegeven.
-
609 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Als u wilt dat Contribute-gebruikers dynamische inhoud en andere onzichtbare elementen kunnen selecteren en van een pagina kunnen verwijderen, wijzigt u de instellingen in de machtigingsgroep zodat selectie of verwijdering is toegestaan. Contribute-gebruikers kunnen dynamische inhoud normaliter nooit bewerken, zelfs niet wanneer u de selectie ervan toestaat.
-
610 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Databaserecords weergeven Over databaserecords Om databaserecords weer te geven, moet informatie worden opgehaald die is opgeslagen in een database of andere inhoudsbron, en moet deze informatie op een webpagina worden weergegeven.
-
611 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Meer Help-onderwerpen “Inhoud in tabellen presenteren” op pagina 183 “Tekst toevoegen en opmaken” op pagina 225 Navigeren door de resultaten van databaserecordsets Met recordsetnavigatiekoppelingen kunnen gebruikers van de ene record naar de volgende, of van de ene set records naar de volgende gaan.
-
612 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken In Dreamweaver wordt een tabel gemaakt die tekst- of afbeeldingskoppelingen bevatten waarmee de gebruiker door de geselecteerde recordset kan navigeren wanneer erop wordt geklikt. Wanneer de eerste record in de recordset wordt weergegeven, zijn de koppelingen of afbeeldingen Eerste en Vorige verborgen. Wanneer de laatste record in de recordset wordt weergegeven, zijn de koppelingen of afbeeldingen Volgende en Laatste verborgen.
-
613 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Opmerking: Als de recordset een groot aantal records bevat, duurt de uitvoering van het servergedrag Verplaatsen naar laatste record soms erg lang wanneer de gebruiker op de koppeling klikt. Taken voor het ontwerpen van de navigatiebalk Wanneer u een aangepaste navigatiebalk wilt maken, maakt u eerst de visuele representatie met de paginaontwerpgereedschappen van Dreamweaver. U hoeft geen koppeling voor de tekenreeks of afbeelding te maken.
-
614 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken 3 Selecteer Gebied weergeven in het pop-upmenu, selecteer een van de vormen van servergedrag en klik op OK. Meer Help-onderwerpen “Over databaserecords” op pagina 610 “Een dynamische tabel maken” op pagina 615 Meerdere recordsetresultaten weergeven Met het servergedrag Herhalingsgebied kunt u meerdere records uit een recordset op een pagina weergeven. Elke selectie van dynamische gegevens kan worden omgezet in een herhalingsgebied.
-
615 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Een dynamische tabel maken In het volgende voorbeeld wordt geïllustreerd hoe het servergedrag Herhalingsgebied wordt toegepast op een tabelrij, en wordt opgegeven dat per pagina negen records worden weergegeven. De rij zelf geeft vier verschillende records weer: plaats, staat, adres en postcode.
-
616 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Een tabel en tijdelijke aanduidingen voor de dynamische inhoud die in de bijbehorende recordset is gedefinieerd, worden op de pagina ingevoegd. In dit voorbeeld bevat de recordset vier kolommen: AUTHORID, FIRSTNAME, LASTNAME, en BIO. De veldnamenrij van de tabel wordt gevuld met de namen van elke kolom. U kunt de koppen bewerken met beschrijvende tekst of ze vervangen door een representatieve afbeelding.
-
617 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken De recordteller bouwen en aan de pagina toevoegen ❖ Selecteer in het statusvenster Recordsetnavigatiestatus de bij te houden recordset en klik op OK. Aangepaste recordtellers maken U gebruikt afzonderlijke vormen van gedrag voor het tellen van records om aangepaste recordtellers te maken.
-
618 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Vooraf gedefinieerde gegevensindelingen gebruiken Dreamweaver bevat diverse vooraf gedefinieerde gegevensformaten (gegevensindelingen of -notaties) die u op dynamische gegevenselementen kunt toepassen. De gegevensformaatstijlen omvatten notaties voor de datum en tijd, valuta, getallen en percentages. Gegevensformaten toepassen op dynamische inhoud 1 Selecteer de tijdelijke aanduiding voor dynamische inhoud in venster Document.
-
619 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken 4 Selecteer Lijst met formaten bewerken in het pop-upmenu. 5 Klik op de plusknop (+) en selecteer een formaattype. 6 Definieer de notatie en klik op OK. 7 Voer een naam voor de nieuwe notatie in de kolom Naam in en klik op OK.
-
620 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Externe map URL C:\Inetpub\wwwroot\ http://localhost/ C:\Inetpub\wwwroot\myapp\ http://localhost/myapp/ C:\Inetpub\wwwroot\fs\planes http://localhost/fs/planes Meer Help-onderwerpen “Schakelen tussen weergaven in het documentvenster” op pagina 18 “Pagina's voorvertonen in de live weergave” op pagina 299 “Dynamische pagina's bekijken in een browser” op pagina 578 Aangepast servergedrag toevoegen Over aangepast servergedrag Dreamweaver wordt geleve
-
621 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken • Als voor het servergedrag een parameterwaarde moet worden opgegeven, maakt u een dialoogvenster waarin de webontwikkelaar die het gedrag toepast, wordt gevraagd een geschikte waarde op te geven. • Test het servergedrag voordat anderen het kunnen toepassen.
-
622 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Meer Help-onderwerpen “Codeblokken herhalen met de lusinstructie” op pagina 625 “Codeerrichtlijnen” op pagina 630 “Vraag een parameter voor het servergedrag” op pagina 627 “Aangepast servergedrag toevoegen” op pagina 620 Geavanceerde opties Wanneer u de broncode en invoeglocatie voor elk codeblok hebt opgegeven, is het servergedrag helemaal gedefinieerd. In de meeste gevallen hoeft u geen aanvullende informatie meer op te geven.
-
623 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken U kunt de codeblokken rechtstreeks in de opbouwfunctie voor servergedrag maken, of u kunt de code uit andere bronnen kopiëren en plakken. Elk codeblok dat u in de opbouwfunctie voor servergedrag maakt, moet een enkele tag of een enkel scriptblok zijn. Als u meerdere tagblokken moet invoeren, splitst u ze in afzonderlijke codeblokken.
-
624 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Een codeblok plaatsen Wanneer u met de opbouwfunctie voor servergedrag codeblokken maakt, moet u opgeven waar u ze in de HTML-code van de pagina wilt invoegen. Als u bijvoorbeeld een codeblok invoegt boven de begintag , moet u de positie van het codeblok opgeven ten opzichte van andere tags, scripts en servergedrag in die sectie van de HTML-code van de pagina.
-
625 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Meer Help-onderwerpen “Vraag een parameter voor het servergedrag” op pagina 627 “Codeerrichtlijnen” op pagina 630 “Over aangepast servergedrag” op pagina 620 “Codeblokken maken” op pagina 622 “Servergedrag testen” op pagina 630 Een codeblok plaatsen (algemene instructies) 1 Schrijf een codeblok met de opbouwfunctie voor servergedrag.
-
626 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken <@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>code block <@ endloop @> De lusinstructie accepteert een met komma's gescheiden lijst met parameterarrays als argumenten. In dit geval kan een gebruiker met parameterarrays als argument meerdere waarden voor een enkele parameter opgeven. De herhalingstekst wordt n keer gedupliceerd, waarbij n de lengte is van de parameterarray-argumenten.
-
627 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken procedure = "proc1" conn = "connection1" paramName = ["@CategoryId", "@Year", "@ISBN"] value = ["#Form.CategoryId#", "#Form.Year#", "#Form.
-
628 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Definieer de parameter in de code van het servergedrag 1 Voer een parametermarkering in de code in op de plaats waar u de opgegeven parameterwaarde wilt invoegen. De parameter heeft de volgende syntaxis: @@parameterName@@ 2 Plaats de tekenreeks formParam tussen parametermarkeringen (@@): <% Session("lang_pref") = Request.Form("@@formParam@@"); %> Als het servergedrag bijvoorbeeld het volgende codeblok bevat: <% Session("lang_pref") = Request.
-
629 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken Bewerk het dialoogvenster dat u gemaakt heeft voor het servergedrag 1 Klik in het paneel Servergedrag (Venster > Servergedrag) op de plusknop (+) en kies Servergedrag bewerken in het pop-upmenu. 2 Selecteer het servergedrag in de lijst en klik op Openen. 3 Klik op Volgende. Een dialoogvenster wordt geopend met een overzicht van alle door de ontwerp opgegeven parameters die u in uw code hebt gedefinieerd.
-
630 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken 5 Als de gewijzigde code door de ontwerper opgegeven parameters bevat, klikt u op Volgende. In Dreamweaver wordt u gevraagd of u een nieuw dialoogvenster wilt maken dat het oude overschrijft. Breng de gewenste wijzigingen aan en klik op OK. Dreamweaver slaat alle wijzigingen in het EDML-bestand van het servergedrag op. Codeerrichtlijnen In het algemeen moet de code van het servergedrag compact en robuust zijn.
-
631 DREAMWEAVER GEBRUIKEN Pagina's dynamisch maken • Pas het servergedrag nogmaals toe en voer ongeldige gegevens in elk veld van het dialoogvenster in. Probeer het veld leeg te laten, gebruik extreem grote of negatieve waarden alsmede ongeldige tekens (zoals /, ?, :, * enzovoort) en voer letters in numerieke velden in.
-
632 Hoofdstuk 21: Toepassingen visueel samenstellen In Adobe® Dreamweaver® CS5 kunt u met Adobe ColdFusion, PHP of ASP pagina's samenstellen waarmee u databaserecords kunt zoeken, invoegen, verwijderen en bijwerken, hoofd- en subgegevens kunt weergeven en toegang kunt beperken tot specifieke gebruikers. Hoofd- en detailpagina's samenstellen Over hoofd- en detailpagina's Hoofd- en detailpagina's zijn paginasets die worden gebruikt om recordsetgegevens te organiseren en weer te geven.
-
633 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 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.
-
634 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Recordsetkolommen die zijn geselecteerd voor een hoofdpagina Gewoonlijk haalt de recordset op de hoofdpagina enkele kolommen uit een database terwijl de recordset op de detailpagina meer kolommen uit dezelfde tabel ophaalt om de extra details te kunnen geven. De recordset kan door de gebruiker in runtime worden gedefinieerd. Zie “Zoekpagina's en resultatenpagina's maken” op pagina 639 voor meer informatie.
-
635 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen De detailpagina openen en een record-id doorgeven (ColdFusion, PHP) 1 Selecteer in de dynamische tabel de tijdelijke aanduiding voor tekst die als een koppeling zal dienen. Koppelingen die van toepassing zijn op de tijdelijke aanduiding voor tekst, zijn geselecteerd. 2 Klik in de eigenschappencontrole op het mappictogram naast het vak Koppeling. 3 Zoek en selecteer de detailpagina.
-
636 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 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.
-
637 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 3 Geef de recordset een naam, en selecteer een gegevensbron en de databasetabel waaruit de recordset de gegevens moet ophalen. 4 Selecteer in het gebied Kolommen de tabelkolommen die u in de recordset wilt opnemen. De recordset kan gelijk zijn aan de recordset op de hoofdpagina. Dat is echter niet noodzakelijk. Gewoonlijk heeft een recordset voor een detailpagina meerdere kolommen om meer details weer te geven.
-
638 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen • Er zijn recordsetkolommen aan de pagina gekoppeld. De specifieke record moet op de pagina worden weergegeven. Zie “Tekst dynamisch maken” op pagina 604 voor meer informatie. 2 U kunt het servergedrag voor het zoeken naar de record die is opgegeven in de URL-parameter, toevoegen door te klikken op de plusknop (+) in het paneel Servergedrag (Window > Servergedrag) en Recordset pagineren > Ga naar specifiek record.
-
639 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 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. Als u bijvoorbeeld wilt dat elke productnaam op de hoofdpagina een koppeling bevat naar de detailpagina, selecteert u de recordsetkolom die de productnamen bevat.
-
640 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen In de meeste gevallen hebt u minstens twee pagina's nodig om deze functie aan uw webtoepassing te kunnen toevoegen. De eerste pagina is een pagina die een HTML-formulier bevat waarin gebruikers zoekparameters invoeren. Hoewel op deze pagina in feite geen zoekactie wordt uitgevoerd, wordt deze toch de 'zoekpagina' genoemd. De tweede pagina die u nodig hebt is de resultatenpagina, waarop het meeste werk wordt verricht.
-
641 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Formulierobjecten zijn tekstvelden, menu's, opties en keuzerondjes. U kunt net zoveel formulierobjecten toevoegen als u wilt opdat gebruikers hun zoekacties kunnen verfijnen. Onthoud echter dat uw SQL-instructie complexer wordt naarmate u meer zoekparameters op de zoekpagina toevoegt. 3 Voeg een knop Verzenden aan het formulier toe (Invoegen > Formulier > Knop).
-
642 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen De recordset voor de zoekresultaten maken 1 Open de resultatenpagina in het documentvenster. Als u nog geen resultatenpagina hebt, maakt u een lege dynamische pagina (Bestand > Nieuw > Lege pagina). 2 Maak een recordset door het paneel Bindingen te openen (Venster > Bindingen), op de plusknop te klikken (+) en Recordset in het pop-upmenu te kiezen. 3 Controleer of het dialoogvenster Eenvoudige recordset wordt geopend.
-
643 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen De zoekpagina gebruikt een formuliervariabele of een URL-parameter om informatie aan de resultatenpagina door te geven. 4 In het vierde vak voert u de naam in van het formulierobject waarin de zoekparameter op de zoekpagina wordt opgeslagen. De naam van het object wordt gekopieerd als de naam van de formuliervariabele of URL-parameter.
-
644 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Zorg ervoor dat de instructie een WHERE-clausule met variabelen bevat om de zoekparameters in op te slaan.
-
645 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 2 Vul het dialoogvenster Dynamische tabel in door de recordset te selecteren die u voor de opslag van de zoekresultaten hebt gedefinieerd. 3 Klik op OK. Op de resultatenpagina wordt een dynamische tabel ingevoegd die de zoekresultaten weergeeft. Een detailpagina maken voor een resultatenpagina Uw set met zoek- en resultatenpagina's kan een detailpagina bevatten om meer informatie over specifieke records op de resultatenpagina weer te geven.
-
646 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Een invoegpagina bestaat uit twee elementen: • Een HTML-formulier waarmee gebruikers gegevens kunnen invoeren; • Een servergedrag Record invoegen waarmee de database wordt bijgewerkt. Wanneer een gebruiker op een formulier op Verzenden klikt, voegt het servergedrag records in een databasetabel in. U kunt deze elementen in een enkele bewerking toevoegen met behulp van het gegevensobject Formulier Record invoegen.
-
647 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 2 Selecteer een formulier in het pop-upmenu 'Waarden verzenden vanaf'. 3 Selecteer in het pop-upmenu Gegevensbron een verbinding met de database. 4 Voer uw gebruikersnaam en wachtwoord in. 5 Selecteer in het pop-upmenu 'Invoegen in tabel' de databasetabel waarin u de record wilt invoegen.
-
648 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 2 Selecteer een formulier in het pop-upmenu 'Waarden verzenden vanaf'. 3 Selecteer in het pop-upmenu Verbinding een verbinding met de database. 4 Selecteer in het pop-upmenu 'Invoegen in tabel' de databasetabel waarin u de record wilt invoegen.
-
649 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen • Stel de eigenschappen van het formulierobject in. De mogelijke opties hangen af van het formulierobject dat u als gegevensinvoerveld hebt geselecteerd. Voor tekstvelden, tekstgebieden en tekst kunt u een beginwaarde invoeren. Voor menu's en groepen keuzerondjes opent u een ander dialoogvenster waarin u de eigenschappen kunt instellen. Voor opties schakelt u de optie Ingeschakeld of Uitgeschakeld in. 8 Klik op OK.
-
650 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen De bij te werken record ophalen Nadat de resultatenpagina aan de updatepagina een record-ID heeft doorgegeven die aangeeft welke record moet worden bijgewerkt, moet de updatepagina de parameter lezen, de record opvragen van de databasetabel en die tijdelijk opslaan in een recordset. 1 Maak een pagina in Dreamweaver en sla deze op. Deze pagina wordt de updatepagina.
-
651 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 2 Deel de pagina in met de ontwerpgereedschappen van Dreamweaver. 3 Voeg een HTML-formulier toe door de invoegpositie te plaatsen waar u het formulier wilt weergeven en Invoegen > Formulier > Formulier te kiezen. Op de pagina wordt een leeg formulier gemaakt. Misschien moet u onzichtbare elementen inschakelen (Weergave > Visuele hulpmiddelen > Onzichtbare elementen) om de grenzen van het formulier te zien.
-
652 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 6 (ColdFusion, PHP) Geef de databasekolom op die u wilt bijwerken, selecteer in het pop-upmenu Waarde het formulierobject dat de kolom bijwerkt, selecteer in het pop-upmenu Verzenden als een gegevenstype voor het formulierobject en selecteer Primaire sleutel als u deze kolom wilt aanduiden als de primaire sleutel. Het gegevenstype is het soort gegevens dat de kolom in de databasetabel verwacht (tekst, numeriek, Booleaanse opties).
-
653 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 2 Selecteer in het pop-upmenu Verbinding een verbinding met de database. Klik op de knop Definiëren als u een verbinding moet definiëren. 3 Selecteer in het pop-upmenu Bij te werken tabel de databasetabel die de record bevat die u wilt bijwerken. 4 Geef in het pop-upmenu 'Selecteer een record uit' de recordset op die de record bevat die in het HTML-formulier wordt weergegeven.
-
654 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Als u het servergedrag wilt bewerken, opent u het paneel Servergedrag (Venster > Servergedrag) en dubbelklikt u op het gedrag Record bijwerken.
-
655 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Koppelingen maken naar een verwijderpagina Wanneer u de zoek- en resultatenpagina's hebt gemaakt, moet u koppelingen aan de resultatenpagina's toevoegen om de verwijderpagina te kunnen openen. Daarna wijzigt u de koppelingen zodat ze de id's doorgeven van de records die de gebruiker wil verwijderen. De verwijderpagina gebruikt deze id om de record te zoeken en te verwijderen.
-
656 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Het vraagteken vertelt de server dat er na het vraagteken een of meer URL-parameters volgen. Het woord recordID is de naam van de URL-parameter (u mag ook een andere naam kiezen). Noteer de naam van de URL-parameter, want die gaat u later op de verwijderpagina gebruiken. De expressie na het gelijkteken is de waarde van de parameter. In dit geval wordt de waarde gegenereerd door een PHP-expressie die een record-id uit de recordset retourneert.
-
657 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 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. U kunt elke gewenste naam opgeven, maar noteer de naam, want u gaat deze later op de verwijderpagina gebruiken. 8 Geef de waarde op die u aan de verwijderpagina wilt doorgeven door een recordset en een kolom te selecteren in de menu's Recordset en Kolom.
-
658 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen De gebruiker zal straks op de knop klikken om de weergegeven record te bevestigen en te verwijderen. U voegt een knop toe door de invoegpositie in het formulier te plaatsen en Invoegen > Formulier > Knop te kiezen. 5 Pas het ontwerp van de pagina desgewenst aan en sla de pagina op.
-
659 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen De recordset wordt in het paneel Bindingen weergegeven. De record weergeven die de gebruiker wil verwijderen 1 Selecteer de recordsetkolommen (recordvelden) in het paneel Bindingen en sleep ze naar de verwijderpagina. Zorg ervoor dat u deze dynamische alleen-lezeninhoud binnen de grenzen van het formulier invoegt. Zie“Tekst dynamisch maken” op pagina 604 voor meer informatie over het invoegen van dynamische inhoud op een pagina.
-
660 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Verwijderpagina is voltooid. Instructies toevoegen om de record te verwijderen 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.
-
661 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 8 Geef in het vak 'Ga na verwijderen naar' of het vak 'Ga bij succes naar' een pagina op die moet worden geopend nadat de record is verwijderd uit de databasetabel. U kunt een pagina opgeven die een kort bericht van slagen weergeeft, of een pagina met een overzicht van de resterende records zodat de gebruiker kan zien dat de record is verwijderd. 9 Klik op OK om uw werk op te slaan.
-
662 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 3 Controleer of de record is verwijderd door de record opnieuw te zoeken. De record mag nu niet meer op de resultatenpagina voorkomen. Pagina's samenstellen met geavanceerde gegevensmanipuleringsobjecten (ColdFusion, ASP) Over ASP-opdrachtobjecten Een ASP-opdrachtobject is een serverobject dat een bepaalde bewerking uitvoert in een database.
-
663 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Dreamweaver start de SQL-instructie op basis van het type bewerking dat u hebt geselecteerd. Als u bijvoorbeeld Invoegen selecteert, ziet het dialoogvenster eruit als in het volgende voorbeeld: 4 Maak de SQL-instructie af. Raadpleeg een handleiding bij Transact SQL voor informatie over het schrijven van SQL-instructies die databases wijzigen. 5 Gebruik het gebied Variabelen als u SQL-variabelen wilt definiëren.
-
664 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Type in database Type in Dreamweaver Grootte Alle andere tekstveldtypen, waaronder de MySQL-tekstgegevenstypen LongVarChar char, varchar en longtext databasetabel controleren Text (MS Access) of nvarchar, nchar (MS SQL Server) VarWChar databasetabel controleren Memo (MS Access), ntext (MS SQL Server), of velden die grote hoeveelheden tekst ondersteunen LongVarWChar 1073741823 Zie www.adobe.
-
665 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 2 Klik in het paneel Bindingen (Venster > Bindingen) op de plusknop (+) en selecteer Opgeslagen procedure. 3 Selecteer in het pop-upmenu Gegevensbron een verbinding met de database die de opgeslagen procedure bevat. 4 Voer de gebruikersnaam en het wachtwoord voor de ColdFusion-gegevensbron in. 5 Selecteer een opgeslagen procedure in het pop-upmenu Procedures. Dreamweaver vult alle parameters automatisch in.
-
666 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Een opgeslagen procedure uitvoeren (ASP) Met ASP-pagina's moet u een opdrachtobject aan een pagina toevoegen om een opgeslagen procedure te kunnen uitvoeren. Zie “Over ASP-opdrachtobjecten” op pagina 662 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).
-
667 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen • Een servergedrag Record invoegen om de databasetabel met sitegebruikers bij te werken; • Een servergedrag Nieuwe gebruikersnaam controleren om te controleren of de gebruikersnaam die de gebruiker heeft ingevoerd, niet door een andere gebruiker wordt gebruikt; Meer Help-onderwerpen “Een HTML-formulier toevoegen om een gebruikersnaam en wachtwoord te selecteren” op pagina 667 “De databasetabel met gebruikers bijwerken” op pagina 668 “Een serverg
-
668 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen U hoeft geen action- of method-kenmerk voor het formulier op te geven om door te geven hoe de recordgegevens moeten worden verzonden en waar ze naartoe moeten worden gestuurd wanneer de gebruiker op de knop Verzenden klikt. Deze kenmerken zijn al ingesteld door het servergedrag Record invoegen. 4 Voeg tekstvelden toe (Invoegen > Formulier > Tekstveld) waarin de gebruiker een gebruikersnaam en wachtwoord kan invoeren.
-
669 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 2 Selecteer in het pop-upmenu Veld gebruikersnaam het formuliertekstveld dat uw bezoekers gebruiken om een gebruikersnaam in te vullen. 3 Geef in het vak 'Indien reeds bestaand, ga naar' een pagina op die moet worden geopend als een overeenstemmende gebruikersnaam in de databasetabel is gevonden. Klik op OK.
-
670 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen 2 Voeg een HTML-formulier toe door de invoegpositie te plaatsen waar u het formulier wilt weergeven en Formulier te kiezen in het menu Invoegen. Op de pagina wordt een leeg formulier gemaakt. Misschien moet u onzichtbare elementen inschakelen (Weergave > Visuele hulpmiddelen > Onzichtbare elementen) om de grenzen van het formulier te zien. Deze worden met dunne rode lijnen aangeduid.
-
671 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Dit is doorgaans een pagina met het bericht dat de aanmelding is mislukt en waarop de gebruiker het opnieuw kan proberen. 7 Als u wilt dat gebruikers naar de aanmeldingspagina worden doorgestuurd wanneer ze toegang proberen te krijgen tot een beveiligde pagina, zodat ze naar de beveiligde pagina kunnen terugkeren wanneer ze zich hebben aangemeld, selecteert u de optie 'Ga naar vorige URL'.
-
672 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen • Een extra kolom in de databasetabel met gebruikers om de toegangsrechten van iedere gebruiker op te slaan; Ongeacht of u met machtigingsniveaus werkt, kunt u een koppeling naar de beschermde pagina toevoegen waarmee een gebruiker zich kan afmelden en alle sessievariabelen kan wissen.
-
673 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen De toegangsrechten van een pagina kopiëren en plakken naar andere pagina's op de site 1 Open de beveiligde pagina en kies het servergedrag 'Toegang tot pagina beperken' in het paneel Servergedrag (niet de vermelding in het pop-upmenu dat u met de plusknop (+) opent). 2 Klik op de pijlknop in de rechterbovenhoek van het paneel en kies Kopiëren in het pop-upmenu.
-
674 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Dit is doorgaans een Tot ziens- of een Dank u-pagina. 2 Klik in het paneel Servergedrag op de plusknop (+) en selecteer Gebruikersverificatie > Gebruiker afmelden. 3 Selecteer de optie 'Afmelden bij laden van pagina' en klik op OK.
-
675 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen ColdFusion-componenten gebruiken Over ColdFusion-componenten Met CFC-bestanden (ColdFusion component) kunt u toepassings- en bedrijfslogica in zelfstandige, herbruikbare eenheden opnemen. Met CFC's kunt u snel en eenvoudig webservices maken. Een CFC is een herbruikbare software-eenheid, geschreven in CFML (ColdFusion markup language), die het hergebruik en onderhoud van uw code eenvoudiger maakt.
-
676 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Een CFC maken of verwijderen in Dreamweaver Met Dreamweaver kunt u visueel een CFC en de bijbehorende functies definiëren. Dreamweaver maakt een CFCbestand en voegt de noodzakelijke CFML-tags voor u in. Opmerking: Afhankelijk van het component, moet u bepaalde code handmatig afmaken. 1 Open een ColdFusion-pagina in Dreamweaver. 2 Selecteer in het paneel Componenten (Venster > Componenten) CF-componenten in het pop-upmenu.
-
677 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen U kunt de volgende informatie over uw CF-componenten weergeven: • Geef een lijst weer met alle ColdFusion-componenten die op de server zijn gedefinieerd. • Als u met ColdFusion MX 7 of hoger werkt, filtert u de lijst zodat alleen de CFC's in uw sitemap worden weergegeven. • Verken de functies en argumenten van elk component. • Bekijk de eigenschappen van functies die als webservices fungeren.
-
678 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen CFC's bewerken in Dreamweaver Dreamweaver biedt een gestroomlijnde manier om de code te bewerken van de ColdFusion-componenten die voor de site zijn gedefinieerd. U kunt een componentfunctie bijvoorbeeld toevoegen, wijzigen of verwijderen zonder Dreamweaver te verlaten. Om deze functie te gebruiken, moet u de ontwikkelomgeving als volgt instellen: • ColdFusion moet lokaal worden uitgevoerd.
-
679 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Opmerking: Voor andere manieren waarop u componenten kunt gebruiken, raadpleegt u de ColdFusion-documentatie vanuit Dreamweaver (Help > ColdFusion gebruiken). 1 Open de ColdFusion-pagina die de componentfunctie zal gebruiken, in Dreamweaver. 2 Schakel naar de codeweergave (Weergave > Code). 3 Open het paneel Componenten (Venster > Componenten) en selecteer CF-componenten in het pop-upmenu van het paneel.
-
680 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Een CFC-recordset als een bron van dynamische inhoud gebruiken U kunt een ColdFusion-component (CFC) als een bron van dynamische inhoud voor uw pagina's gebruiken als de component een functie bevat die een recordset definieert. Opmerking: Deze functie is alleen beschikbaar als u toegang hebt tot een computer waarop ColdFusion MX 7 of hoger wordt uitgevoerd. Zie De ColdFusion-verbeteringen inschakelen voor meer informatie.
-
681 DREAMWEAVER GEBRUIKEN Toepassingen visueel samenstellen Het pop-upmenu functie bevat alleen de functies die in de geselecteerde component zijn gedefinieerd. Als dit popupmenu geen functies bevat of als de laatste wijzigingen niet in de vermelde functies worden weergegeven, controleert u of de laatste wijzigingen wel op de server zijn geladen. Opmerking: De vakken Verbinding en SQL zijn alleen-lezen.
-
682 Hoofdstuk 22: Formulieren samenstellen Wanneer een bezoeker informatie invoert in een webformulier dat in een webbrowser wordt weergegeven, en op de verzendknop klikt, wordt de informatie verstuurd naar de server waar deze wordt verwerkt door een script of toepassing op de server. De server antwoordt door de verwerkte informatie weer naar de gebruiker (of client) terug te sturen of door een andere actie uit te voeren op basis van de inhoud van het formulier.
-
683 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Formulierparameters nemen de namen van hun overeenkomstige formulierobjecten over.
-
684 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Een URL-parameter is een naam-waardepaar dat wordt toegevoegd aan een URL. De parameter begint met een vraagteken (?) en heeft de vorm naam=waarde. Als er meer dan één URL-parameter is, wordt elke parameter gescheiden door een en-teken (&). Het volgende voorbeeld toont een URL-parameter met twee naam-waardeparen: http://server/path/document?name1=value1&name2=value2 In dit voorbeeldstroomschema is de toepassing een op het web gebaseerde winkel.
-
685 DREAMWEAVER GEBRUIKEN Formulieren samenstellen URL-parameters maken met HTML-koppelingen U maakt URL-parameters in een HTML-koppeling door het href-kenmerk van de HTML-ankertag te gebruiken. U kunt de URL-parameters rechtstreeks in het kenmerk opgeven in de codeweergave (Weergave > Code) of u kunt de URL-parameters toevoegen aan het einde van de koppelings-URL in het vak Koppeling van de eigenschappencontrole.
-
686 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Meer Help-onderwerpen “Informatie van gebruikers verzamelen” op pagina 682 “ColdFusion-formulieren maken” op pagina 700 Formulierobjecten In Dreamweaver worden formulierinvoertypen formulierobjecten genoemd. Formulierobjecten zijn de mechanismen waarmee gebruikers gegevens invoeren. U kunt de volgende formulierobjecten aan een formulier toevoegen: Tekstvelden Accepteren elk type alfanumerieke tekstinvoer.
-
687 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Selectievakjes Hiermee maakt u meerdere antwoorden in een enkele groep opties mogelijk. Een gebruiker kan net zoveel opties selecteren als van toepassing kunnen zijn. In het volgende voorbeeld ziet u hoe drie selectievakjes zijn geselecteerd: Surfen, Mountainbiken en Raften. Keuzerondjes Hiermee worden exclusieve keuzen voorgesteld.
-
688 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Meer Help-onderwerpen “Het gedrag Pop-upmenu weergeven toepassen” op pagina 373 Een HTML-formulier maken 1 Open een pagina en plaats de invoegpositie op de plaats waar u het formulier wilt weergeven. 2 Kies Invoegen > Formulier of selecteer de categorie Formulieren in het paneel Invoegen en klik op het pictogram Formulier. In de ontwerpweergave worden formulieren aangeduid met een gestippelde rode omtrek.
-
689 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Als het genoemde venster nog niet is geopend, wordt een nieuw venster met die naam geopend. Stel een van de volgende doelwaarden in: _blank Hiermee wordt het doeldocument in een nieuw, naamloos venster geopend. _parent Hiermee wordt het doeldocument geopend in het bovenliggende venster van het venster waarin het huidige document wordt weergegeven.
-
690 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Meer Help-onderwerpen “Informatie van gebruikers verzamelen” op pagina 682 “Formulierparameters definiëren” op pagina 596 “URL-parameters definiëren” op pagina 596 “ColdFusion-formulieren maken” op pagina 700 “Spry-pagina's visueel opbouwen” op pagina 439 Zelfstudie formulieren maken Zelfstudie stijlformulieren Objecteigenschappen tekstveld Selecteer het tekstveldobject en stel de volgende opties in de eigenschappencontrole in: Tekenbreedte Hiermee geeft
-
691 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Opties van knopobjecten Knopnaam Hiermee geeft u de knop een naam. Met de twee gereserveerde namen, Verzenden en Beginwaarden, kunt u respectievelijk opgeven dat de formuliergegevens moeten worden verzonden naar de toepassing of het script dat de gegevens verwerkt, of dat alle formuliervelden moeten worden teruggezet op hun beginwaarden. Waarde Hiermee geeft u de tekst op die op de knop moet worden weergegeven.
-
692 DREAMWEAVER GEBRUIKEN Formulieren samenstellen formulier in een browser wordt weergegeven. Om de andere opties weer te geven, moet de gebruiker op de vervolgkeuzepijl klikken. Kies de optie Lijst als u enkele of alle opties wilt weergeven wanneer het formulier in een browser wordt weergegeven, en als gebruikers meerdere items kunnen selecteren. Hoogte (Alleen type Lijst) Hiermee stelt u in hoeveel items in het menu worden weergegeven.
-
693 DREAMWEAVER GEBRUIKEN Formulieren samenstellen 7 Stel in de eigenschappencontrole een van de volgende opties in: Naam bestandsveld Hiermee geeft u de naam voor het bestandsveldobject op. Tekenbreedte Hiermee geeft u het maximaal aantal tekens op dat in het veld kan worden weergegeven. Maximum aantal tekens Hiermee geeft u het maximum aantal tekens op dat het veld kan bevatten.
-
694 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Als u de keuzerondjes instelt om parameters aan de server terug te geven, worden de parameters aan de naam gekoppeld. Als u de groep bijvoorbeeld mijnGroep noemt en de formuliermethode instelt op GET (dus, u wilt dat het formulier URL-parameters doorgeeft in plaats van formulierparameters wanneer de gebruiker op de verzendknop klikt), wordt de expressie mijnGroep="CheckedValue" in de URL aan de server doorgegeven.
-
695 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Over dynamische formulierobjecten Een dynamisch-formulierobject is een formulierobject waarvan de begintoestand door de server wordt bepaald op het moment dat de pagina bij de server wordt aangevraagd. De toestand wordt dus niet in de ontwerpfase door de ontwerper bepaald.
-
696 DREAMWEAVER GEBRUIKEN Formulieren samenstellen U kunt een statische waarde invoeren, of u kunt een dynamische waarde opgeven door op het pictogram met de bliksemflits naast het vak te klikken en een dynamische waarde te selecteren in de lijst met gegevensbronnen. In beide gevallen moet de waarde die u opgeeft, overeenkomen met de waarde van een van de menu-items. Bestaande HTML-formuliermenu's dynamisch maken 1 Selecteer in de ontwerpweergave het lijst/menuformulierobject.
-
697 DREAMWEAVER GEBRUIKEN Formulieren samenstellen 3 Vul het dialoogvenster Dynamisch selectievakje in en klik op OK: • Klik op het pictogram met de bliksemflits naast het vakje Inschakelen indien, en selecteer het veld in de lijst met gegevensbronnen. De gegevensbron moet Booleaanse gegevens bevatten, zoals Yes en No of true en false. Als de lijst geen gegevensbronnen bevat of als de beschikbare gegevensbronnen niet geschikt zijn, klikt u op de plusknop (+) om een nieuwe gegevensbron te definiëren.
-
698 DREAMWEAVER GEBRUIKEN Formulieren samenstellen c (Optioneel) Wijzig de code die Dreamweaver op de pagina invoegt om de dynamische tekst weer te geven. 4 Klik op OK om het dialoogvenster Dynamische groep keuzerondjes te sluiten, en voeg de tijdelijke aanduiding voor de dynamische inhoud in de groep keuzerondjes in.
-
699 DREAMWEAVER GEBRUIKEN Formulieren samenstellen 2 Klik in het paneel Gedrag (Venster > Gedrag) op de plusknop (+) en selecteer JavaScript aanroepen in de lijst. 3 Voer in het vak JavaScript aanroepen de naam in van de JavaScript-functie die u wilt uitvoeren wanneer de gebruiker op de knop klikt, en klik op OK. U kunt bijvoorbeeld de naam invoeren van een functie die nog niet bestaat, zoals processMyForm().
-
700 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Opmerking: Deze optie heeft de voorkeur wat toegankelijkheid betreft. De functionaliteit kan echter per browser verschillen.
-
701 DREAMWEAVER GEBRUIKEN Formulieren samenstellen ColdFusion-verbeteringen inschakelen Voor sommige verbeteringen moet u een computer waarop ColdFusion MX 7 of hoger wordt uitgevoerd, definiëren als een testserver voor Dreamweaver. De eigenschappencontroles voor formulierbesturingselementen zijn bijvoorbeeld alleen beschikbaar als u de juiste testserver hebt opgegeven. U hoeft een testserver slechts eenmaal te definiëren.
-
702 DREAMWEAVER GEBRUIKEN Formulieren samenstellen • GET Hiermee verzendt u de gegevens met de HTTP-methode get die de inhoud van het formulierveld in de URLqueryreeks plaatst. Doel Hiermee kunt u de waarde van het doelkenmerk van de cfform-tag wijzigen. Type codering Hier geeft u op welke coderingsmethode wordt gebruikt om de formuliergegevens over te brengen. Opmerking: Het coderingstype heeft niets te maken met tekencodering.
-
703 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Zorg ervoor dat het besturingselement in de ontwerpweergave is geselecteerd en stel vervolgens de eigenschappen in de eigenschappencontrole in. Voor meer informatie over de eigenschappen klikt u op de knop Help in de eigenschappencontrole. 6 Pas de indeling van het ColdFusion-formulier aan. Als u een HTML-formulier maakt, kunt u uw formulieren opmaken met regeleinden, alinea-einden, vooraf opgemaakte tekst of tabellen.
-
704 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Een ColdFusion-tekstveld visueel invoegen 1 Ga naar de ontwerpweergave en plaats de invoegpositie binnen de formulieromtrek in het document. 2 Ga naar de categorie CFForm van het paneel Invoegen en klik op het pictogram CF-tekstveld of selecteer invoegen > ColdFusion-objecten > CFForm > CFtextfield. Er wordt een tekstveld in het formulier weergegeven.
-
705 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Tageditor weergeven Met de tageditor kunt u eigenschappen bewerken die niet in de eigenschappencontrole worden weergegeven. Verborgen ColdFusion-velden invoegen U kunt visueel een verborgen ColdFusion-veld in een formulier invoegen en de eigenschappen ervan instellen. Gebruik verborgen velden om informatie op te slaan en in te dienen die de gebruiker niet invoert. De informatie wordt verborgen voor de gebruiker.
-
706 DREAMWEAVER GEBRUIKEN Formulieren samenstellen ColdFusion-tekstgebieden invoegen U kunt visueel een ColdFusion-tekstgebied in een formulier invoegen en de eigenschappen ervan instellen. Een tekstgebied is een invoerelement dat uit meerdere tekstregels bestaat. Opmerking: Deze verbetering is alleen beschikbaar als u toegang hebt tot een computer waarop ColdFusion MX 7 of hoger wordt uitgevoerd. 1 Plaats de invoegpositie in het formulier.
-
707 DREAMWEAVER GEBRUIKEN Formulieren samenstellen ColdFusion-knoppen invoegen U kunt visueel een ColdFusion-knop in een formulier invoegen en de eigenschappen ervan instellen. Met ColdFusionknoppen kunnen bewerkingen van ColdFusion-formulieren worden bestuurd. Met knoppen kunnen gebruikers ColdFusion-formuliergegevens bij de server indienen en het ColdFusion-formulier herstellen. De standaard ColdFusion-knoppen hebben doorgaans de label Indienen, Herstellen of Verzenden.
-
708 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Patroon Hier kunt u een regulier JavaScript-expressiepatroon opgeven om invoer te valideren. Laat de schuine strepen aan het begin en aan het einde achterwege. Raadpleeg de ColdFusion-documentatie voor meer informatie. Hoogte Hier kunt u de hoogte van het besturingselement in pixels opgeven. Deze eigenschap wordt in runtime door de ColdFusion-server genegeerd. Breedte Hier kunt u de breedte van het besturingselement in pixels opgeven.
-
709 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Hoogte Hier kunt u de hoogte van het besturingselement in pixels opgeven. Deze eigenschap wordt in runtime door de ColdFusion-server genegeerd. Breedte Hier kunt u de breedte van het besturingselement in pixels opgeven. Deze eigenschap wordt in runtime door de ColdFusion-server genegeerd. Grootte Hier kunt u de grootte van het besturingselement opgeven. Deze eigenschap wordt in runtime door de ColdFusion-server genegeerd.
-
710 DREAMWEAVER GEBRUIKEN Formulieren samenstellen 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.
-
711 DREAMWEAVER GEBRUIKEN Formulieren samenstellen Rand Hier kunt u de breedte van de afbeeldingsrand instellen. Afbeelding bewerken Hiermee opent u de afbeelding in de standaardafbeeldingseditor. Als u een standaardafbeeldingseditor wilt openen, selecteert u Bewerken > Voorkeuren > Bestandstypen / editors. Anders gebeurt er niets wanneer er op de knop Afbeelding bewerken wordt geklikt. Valideren Hier geeft u het type validatie op voor het afbeeldingsveld.
-
712 DREAMWEAVER GEBRUIKEN Formulieren samenstellen 2 Stel in de eigenschappencontrole de formuliermethode in op POST. 3 Selecteer in het pop-upmenu Enctype de optie multipart/form-data. 4 Plaats de invoegpositie in het formulier op de plaats waar u het bestandsveld wilt weergeven. 5 Selecteer Invoegen > ColdFusion-objecten > CFForm > CFfilefield. Er wordt een bestandsveld in het document weergegeven.
-
713 DREAMWEAVER GEBRUIKEN Formulieren samenstellen 3 Ga naar de codeweergave (Weergave > Code) en voer ergens tussen de eerste en laatste CFForm-tag de volgende tag in: 4 Ga naar de ontwerpweergave, selecteer het datumveld op de pagina en stel de volgende opties in de eigenschappencontrole in: Cf-datumveld Hier geeft u een unieke naam voor het besturingselement op.
-
714 DREAMWEAVER GEBRUIKEN Formulieren samenstellen ColdFusion-formuliergegevens valideren U kunt in Dreamweaver ColdFusion-formulieren samenstellen die de inhoud van opgegeven velden controleren om ervoor te zorgen dat de gebruiker gegevens van het juiste gegevenstype heeft ingevoerd. Opmerking: Deze verbetering is alleen beschikbaar als u toegang hebt tot een computer waarop ColdFusion MX 7 of hoger wordt uitgevoerd. 1 Maak een ColdFusion-formulier dat minstens één invoerveld en een verzendknop bevat.
-
715 Hoofdstuk 23: Toegankelijkheid Dreamweaver en toegankelijkheid Meer Help-onderwerpen “Een afbeelding invoegen” op pagina 243 “SWF-bestanden invoegen” op pagina 256 “HTML-formuliergegevens valideren” op pagina 698 “Frames en framesets maken” op pagina 203 “Een tabel invoegen en inhoud toevoegen” op pagina 184 Informatie over toegankelijke inhoud Toegankelijkheid heeft betrekking op websites en webproducten bruikbaar maken voor mensen met een visuele, auditieve, motorische en/of andere handicap.
-
716 DREAMWEAVER GEBRUIKEN Toegankelijkheid Dreamweaver ondersteunt de schermlezers JAWS for Windows van Freedom Scientific (www.freedomscientific.com) en Window-Eyes van GW Micro (www.gwmicro.com). Ondersteuning van toegankelijkheidsfuncties van besturingssystemen Dreamweaver ondersteunt toegankelijkheidsfuncties in zowel de Windows- als Macintosh-besturingssystemen. Op de Macintosh, bijvoorbeeld kunt u de visuele voorkeuren instellen in het dialoogvenster Universele toegang (Apple > Systeemvoorkeuren).
-
717 DREAMWEAVER GEBRUIKEN Toegankelijkheid Navigeren in Dreamweaver via het toetsenbord U kunt het toetsenbord gebruiken voor navigatie zonder muis door panelen, controles, dialoogvensters, frames en tabellen. Opmerking: Het gebruik van de Tab-toets en pijltoetsen wordt alleen bij Windows ondersteund. Navigeren door panelen 1 Druk in het documentvenster op Ctrl+F6 om een paneel actief te maken.
-
718 DREAMWEAVER GEBRUIKEN Toegankelijkheid 5 Druk op Enter om het dialoogvenster te sluiten. Navigeren door frames ❖ Als uw document frames bevat, kunt u door middel van de pijltoetsen een frame actief maken. Een frame selecteren 1 Druk op Alt+pijltoets omlaag om de invoegpositie in het documentvenster te plaatsen. 2 Druk op Alt+pijltoets omhoog om het frame te selecteren, dat momenteel actief is.
| |
