Dynamische inhoud toevoegen aan pagina's

Laatst bijgewerkt op 25 apr. 2024
Notitie

De gebruikersinterface van nieuwere versies van Dreamweaver is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in nieuwere versies van Dreamweaver. Meer informatie vindt u in dit artikel.

Informatie over het toevoegen van dynamische inhoud

Nadat je een of meer bronnen van dynamische content hebt gedefinieerd, kun je de bronnen gebruiken om dynamische content aan de pagina toe te voegen. Content-bronnen kunnen een kolom in een recordset bevatten, een Waarde die is verzonden door een HTML-formulier, de Waarde in een server-object of andere gegevens.

In Dreamweaver kun je dynamische content bijna overal op een webpagina of in de HTML-broncode plaatsen. Je kunt dynamische content plaatsen op het invoegpunt, een tekenreeks vervangen of invoegen als HTML-attribuut. Dynamische content kan bijvoorbeeld het src-attribuut van een Afbeelding definiëren of het value-attribuut van een formulierveld.

Je kunt dynamische content aan een pagina toevoegen door een content- bron te selecteren in het deelvenster Bindingen. Dreamweaver voegt een server-side script toe aan de code van de pagina dat de server opdracht geeft om de gegevens van de contentbron over te dragen naar de HTML-code van de pagina wanneer de pagina wordt aangevraagd door een browser.

Er is vaak meer dan een manier om een bepaald pagina-element dynamisch te maken. Om bijvoorbeeld een afbeelding dynamisch te maken kun je het deelvenster Bindingen, de eigenschappencontrole of de opdracht Afbeelding in het menu Invoegen gebruiken.

Standaard kan op een HTML-pagina maar één record tegelijk worden weergegeven. Om de andere records in de recordset weer te geven, kun je een koppeling toevoegen om een voor een door de records te navigeren, of je kunt een herhalende regio maken om meer dan een record op een enkele pagina weer te geven.

Dynamische tekst

Dynamische tekst neemt alle tekstopmaak over die is toegepast op de bestaande tekst of op het invoegpunt. Als bijvoorbeeld een Cascading Style Sheet (CSS)-stijl de geselecteerde tekst beïnvloedt, wordt de dynamische content die deze vervangt ook beïnvloed door de stijl.Je kunt de tekstopmaak van dynamische content toevoegen of wijzigen door een van de Dreamweaver-tools voor tekstopmaak te gebruiken.

U kunt eveneens gegevensopmaak op dynamische tekst toepassen. Als je gegevens bijvoorbeeld uit datums bestaan, kun je een bepaalde datumnotatie opgeven zoals 04/17/00 voor Amerikaanse bezoekers of 17/04/00 voor Canadese bezoekers.

Tekst dynamisch maken

Je kunt bestaande tekst vervangen door dynamische tekst of je kunt dynamische tekst op een bepaald invoegpunt op de pagina plaatsen.

Dynamische tekst toevoegen

Selecteer in de ontwerpweergave tekst op de pagina of klik waar je dynamische tekst wilt toevoegen.
Selecteer in het deelvenster Bindingen (Venster > Bindingen) een contentbron uit de lijst.Als je een recordset selecteert, geef je de kolom op die je wilt in de recordset.

De inhoudsbron moet platte tekst (ASCII-tekst) bevatten. Platte tekst omvat ook HTML. Als er geen contentbronnen in de lijst verschijnen of als de beschikbare contentbronnen niet voldoen aan je behoeften, klik je op de Plus (+)-knop om een nieuwe contentbron te definiëren.

(Optioneel) Selecteer een gegevensopmaak voor de tekst.
Klik op Invoegen of sleep de inhoudsbron naar de pagina.

Er wordt een tijdelijke aanduiding voor dynamische inhoud weergegeven. (Als je tekst op de pagina hebt geselecteerd, vervangt de tijdelijke aanduiding de tekstselectie.) De tijdelijke aanduiding voor recordset-content gebruikt de syntaxis {RecordsetName.ColumnName}, waar Recordset de naam van de recordset is en ColumnName de naam van de kolom die je hebt gekozen uit de recordset.

Soms verstoren de lange tijdelijke aanduidingen voor dynamische tekst de lay-out van de pagina in het documentvenster. Je kunt het probleem oplossen door lege accolades als tijdelijke aanduidingen te gebruiken, zoals beschreven in het volgende onderwerp.

Tijdelijke aanduidingen voor dynamische tekst weergeven

Selecteer Bewerken > Voorkeuren > Onzichtbare elementen (Windows) of Dreamweaver > Voorkeuren > Onzichtbare elementen (Macintosh).
Selecteer { } in het pop-upmenu Dynamische tekst weergeven als en klik op OK.

Afbeeldingen dynamisch maken

U kunt afbeeldingen op uw pagina dynamisch maken. Stel bijvoorbeeld dat je een pagina ontwerpt om items weer te geven die te koop zijn bij een liefdadigheidsveiling. Elke pagina zou beschrijvende tekst bevatten en een foto van één item. De algemene lay-out van de pagina zou hetzelfde blijven voor elk item, maar de foto (en beschrijvende tekst) zou kunnen veranderen.

Open de pagina in Ontwerpweergave (Weergave > Ontwerp) en plaats de invoegpositie waar je de afbeelding wilt laten verschijnen op de pagina.
Selecteer Invoegen > Afbeelding.

Het dialoogvenster Afbeeldingsbron selecteren wordt geopend.

Klik op de optie Databronnen (Windows) of de knop Databron (Macintosh).

Een lijst met inhoudsbronnen wordt weergegeven.

Selecteer een inhoudsbron in de lijst en klik op OK.

De contentbron moet een recordset zijn die de paden naar je afbeeldingsbestanden bevat. Afhankelijk van de bestandsstructuur van je site kunnen de paden absoluut, documentrelatief of hoofdmapgerelateerd zijn.

Notitie

Dreamweaver ondersteunt momenteel geen binaire afbeeldingen die zijn opgeslagen in een database.

Als er geen recordsets verschijnen in de lijst of als de beschikbare recordsets niet aan je behoeften voldoen, definieer dan een nieuwe recordset.

HTML-kenmerken dynamisch maken

Je kunt het uiterlijk van een pagina dynamisch wijzigen door HTML-attributen aan gegevens te binden. Je kunt bijvoorbeeld de achtergrondafbeelding van een tabel wijzigen door het background-attribuut van de tabel te binden aan een veld in een recordset.

Je kunt HTML-attributen binden met het paneel Bindingen of met de Property inspector.

HTML-attributen dynamisch maken met het paneel Bindingen

Open het paneel Bindingen door Venster > Bindingen te kiezen.
Zorg ervoor dat het paneel Bindingen de gegevensbron vermeldt die je wilt gebruiken.

De contentbron moet gegevens bevatten die geschikt zijn voor het HTML-attribuut dat je wilt binden. Als er geen contentbronnen verschijnen in de lijst, of als de beschikbare contentbronnen niet aan je behoeften voldoen, klik dan op de plusknop (+) om een nieuwe gegevensbron te definiëren.

Selecteer een HTML-object in de ontwerpweergave.

Om bijvoorbeeld een HTML-tabel te selecteren, klik je in de tabel en klik je op de tag <table> in de tagselectie linksonder in het documentvenster.

Selecteer een contentbron uit je lijst in het paneel Bindingen.
Selecteer een HTML-attribuut uit het pop-upmenu in het vak Binden aan.
Klik op Binden.

De volgende keer dat de pagina wordt uitgevoerd op de applicatieserver, wordt de waarde van de gegevensbron toegewezen aan het HTML-attribuut.

HTML-attributen dynamisch maken met de Property inspector

Selecteer in Ontwerpweergave een HTML-object en open de Property inspector (Venster > Eigenschappen).

Om bijvoorbeeld een HTML-tabel te selecteren, klik je in de tabel en klik je op de <table>-tag in de tag selector linksonder in het Document-venster.

Hoe je een dynamische contentbron bindt aan het HTML-kenmerk hangt af van waar het zich bevindt.
  • Als het attribuut dat je wilt binden een mappictogram ernaast heeft in de Property inspector, klik je op het mappictogram om een bestandsselectiedialoogvenster te openen; klik vervolgens op de optie Data Sources om een lijst met databronnen weer te geven.

  • Als het attribuut dat je wilt binden geen mappictogram ernaast heeft, klik je op het tabblad List (het onderste van de twee tabbladen) aan de linkerkant van de inspector.

    De lijstweergave van de Property inspector verschijnt.

  • Als het attribuut dat je wilt binden niet wordt vermeld in de List-weergave, klik je op de Plus (+)-knop; voer vervolgens de naam van het attribuut in of klik op de kleine pijlknop en selecteer het attribuut uit het pop‑upmenu.

Om de waarde van het attribuut dynamisch te maken, klik je op het attribuut; klik vervolgens op het bliksempictogram of mappictogram aan het einde van de rij van het attribuut.

Als je op het bliksempictogram hebt geklikt, verschijnt er een lijst met databronnen.

Als je op het mappictogram hebt geklikt, verschijnt er een bestandsselectiedialoogvenster. Selecteer de optie Gegevensbronnen om een lijst met inhoudsbronnen weer te geven.

Selecteer een contentbron uit de lijst met contentbronnen en klik op OK.

De content-bron moet gegevens bevatten die geschikt zijn voor het HTML-attribuut dat je wilt binden. Als er geen contentbronnen verschijnen in de lijst of als de beschikbare contentbronnen niet voldoen aan je behoeften, definieer dan een nieuwe contentbron.

De volgende keer dat de pagina wordt uitgevoerd op de applicatieserver, wordt de waarde van de databron toegewezen aan het HTML-attribuut.

ActiveX-, Flash- en andere objectparameters dynamisch maken

Je kunt de parameters van Java-applets en plug-ins dynamisch maken, evenals de parameters van ActiveX-, Flash-, Shockwave-, Director- en Generator-objecten.

Voordat je begint, zorg dat de velden in je recordset gegevens bevatten die geschikt zijn voor de objectparameters die je wilt binden.

Selecteer in de ontwerpmodus een object op de pagina en open de Property inspector (Window > Properties).
Klik op de knop Parameters.
Als je parameter niet in de lijst staat, klik je op de Plus (+)-knop en voer je een parameternaam in in de kolom Parameter.
Klik op de kolom Waarde van de parameter en klik vervolgens op het bliksempictogram om een dynamische waarde op te geven.

Een lijst met gegevensbronnen wordt weergegeven.

Selecteer een gegevensbron in de lijst en klik op OK.

De databron moet gegevens bevatten die geschikt zijn voor de objectparameter die je wilt binden. Als er geen databronnen verschijnen in de lijst of als de beschikbare databronnen niet voldoen aan je behoeften, definieer dan een nieuwe databron.