Lägg till dynamiskt innehåll på sidor

Senast uppdaterad den 25 apr. 2024
Obs!

Användargränssnittet i Dreamweaver och senare har förenklats. Det kan därför hända att du inte hittar vissa av alternativen i den här artikeln i Dreamweaver och senare. Mer information finns i den här artikeln.

Om att lägga till dynamiskt innehåll

När du har definierat en eller flera källor för dynamiskt innehåll kan du använda dem för att lägga till dynamiskt innehåll på sidan.Innehållskällor kan inkludera en kolumn i en postuppsättning, ett värde som skickas av ett HTML-formulär, det värde som finns i ett serverobjekt eller andra data.

I Dreamweaver kan du placera dynamiskt innehåll nästan var som helst på en webbsida eller i dess HTML-källkod.Du kan placera dynamiskt innehåll vid insättningspunkten, ersätta en textsträng eller infoga det som ett HTML-attribut.Till exempel kan dynamiskt innehåll definiera attributet src för en bild eller attributet value för ett formulärfält.

Du kan lägga till dynamiskt innehåll på en sida genom att välja en innehållskälla i panelen Bindningar.Dreamweaver infogar ett skript på serversidan i sidans kod som instruerar servern att överföra data från innehållskällan till sidans HTML-kod när sidan begärs av en webbläsare.

Det finns ofta mer än ett sätt att göra ett givet sidelement dynamiskt.För att till exempel göra en bild dynamisk kan du använda panelen Bindningar, Egenskapskontrollen eller kommandot Bild i menyn Infoga.

Som standard kan en HTML-sida bara visa en post åt gången. För att visa de andra posterna i postuppsättningen kan du lägga till en länk för att flytta genom posterna en i taget, eller så kan du skapa ett upprepande omräde för att visa mer än en post på en enda sida.

Om dynamisk text

Dynamisk text antar all textformatering som tillämpas på den befintliga texten eller på insättningspunkten.Om till exempel en Cascading Style Sheet (CSS)-stil påverkar den valda texten, påverkas även det dynamiska innehållet som ersätter den av stilen.Du kan lägga till eller ändra textformatet för dynamiskt innehåll genom att använda ett av Dreamweavers textformateringsverktyg.

Du kan också använda ett dataformat på dynamiskt text. Om din data till exempel består av datum kan du ange ett visst datumformat som 04/17/00 för amerikanskabesökare eller 17/04/00 för kanadensiska besökare.

Göra text dynamisk

Du kan ersätta befintlig text med dynamisk text, eller så kan du placera dynamisk text vid en given insättningspunkt på sidan.

Lägga till dynamisk text

I designvyn väljer du text på sidan eller klickar där du vill lägga till dynamisk text.
I panelen Bindningar (Fönster > Bindningar) väljer du en innehållskälla från listan.Om du väljer en postuppsättning anger du den kolumn du vill ha i postuppsättningen.

Innehållskällan ska innehålla vanlig text (ASCII-text). Vanlig text inkluderar HTML. Om inga innehållskällor visas i listan eller om de tillgängliga innehållskällorna inte uppfyller dina behov klickar du på plusknappen (+) för att definiera en ny innehållskälla.

(Valfritt) Välj ett dataformat för texten.
Klicka på Infoga, eller dra innehållskällan till sidan.

En dynamisk innehållsplatshållare visas. (Om du valde text på sidan ersätter platshållaren textvalet.) Platshållaren för postuppsättningsinnehåll använder syntaxen {RecordsetName.ColumnName}, där Recordset är namnet på postuppsättningen och ColumnName är namnet på kolumnen du valde från postuppsättningen.

Ibland förvränger längden på platshållare för dynamisk text sidlayouten i dokumentfönstret.Du kan lösa problemet genom att använda tomma krullparenteser som platshållare, som beskrivs i nästa avsnitt.

Visa platshållare för dynamisk text

Välj Redigera > Inställningar > Osynliga element (Windows) eller Dreamweaver > Inställningar > Osynliga element (Macintosh).
I popup-menyn Visa dynamisk text som väljer du { }, och klickar på OK.

Göra bilder dynamiska

Du kan göra bilder på sidan dynamiska. Anta till exempel att du utformar en sida för att visa föremål som ska säljas vid en välgörenhetsauktion. Varje sida skulle innehålla beskrivande text och ett foto av ett föremål. Sidans allmänna layout skulle förbli densamma för varje föremål, men fotot (och den beskrivande texten) kunde ändras.

Med sidan öppen i designvyn (Visa > Design) placerar du infogningspunkten där du vill att bilden ska visas på sidan.
Välj Infoga > Bild.

Dialogrutan Välj bildkälla visas.

Klicka på alternativet Datakällor (Windows) eller knappen Datakälla (Macintosh).

En lista med innehållskällor visas.

Markera en innehållskälla i listan och klicka på OK.

Innehållskällan ska vara en postuppsättning som innehåller sökvägarna till dina bildfiler. Beroende på filstrukturen för din webbplats kan sökvägarna vara absoluta, dokumentrelativa eller rotrelativa.

Obs!

Dreamweaver stöder för närvarande inte binära bilder som lagras i en databas.

Om inga postuppsättningar visas i listan, eller om de tillgängliga postuppsättningarna inte uppfyller dina behov, definiera en ny postuppsättning.

Göra HTML-attribut dynamiska

Du kan dynamiskt ändra utseendet på en sida genom att binda HTML-attribut till data. Du kan till exempel ändra bakgrundsbilden för en tabell genom att binda tabellens background-attribut till ett fält i en postuppsättning.

Du kan binda HTML-attribut med panelen Bindningar eller med egenskapsinspektorn.

Gör HTML-attribut dynamiska med panelen Bindningar

Öppna panelen Bindningar genom att välja Fönster > Bindningar.
Se till att panelen Bindningar listar den datakälla du vill använda.

Innehållskällan ska innehålla data som är lämplig för HTML-attributet du vill binda.Om inga innehållskällor visas i listan, eller om de tillgängliga innehållskällorna inte uppfyller dina behov, klickar du på Plus (+)-knappen för att definiera en ny datakälla.

Markera ett HTML-objekt i designvyn.

För att till exempel välja en HTML-tabell klickar du inuti tabellen och klickar på taggen <table> i taggväljaren nere till vänster i dokumentfönstret.

I panelen Bindningar väljer du en innehållskälla från din lista.
I rutan Bind till väljer du ett HTML-attribut från popup-menyn.
Klicka på Bind.

Nästa gång sidan körs på applikationsservern kommer värdet för datakällan att tilldelas HTML-attributet.

Gör HTML-attribut dynamiska med egenskapsinspektorn

I designvyn väljer du ett HTML-objekt och öppnar egenskapsinspektorn (Fönster > Egenskaper).

Om du till exempel vill välja en HTML-tabell klickar du inuti tabellen och klickar på taggen <table> i taggväljaren nedtill till vänster i dokumentfönstret.

Hur du binder en källa för dynamiskt innehåll till HTML-attributet beror på var det finns.
  • Om attributet du vill binda har en mappikon bredvid sig i egenskapsinspektören klickar du på mappikonen för att öppna en filvalsdialog. Klicka sedan på alternativet Datakällor för att visa en lista över datakällor.

  • Om attributet du vill binda inte har en mappikon bredvid sig klickar du på fliken Lista (den nedre av de två flikarna) på vänster sida av inspektören.

    Egenskapsinspektörens listavy visas.

  • Om attributet du inte vill binda inte finns med i listavyn klickar du på Plus-knappen (+) och anger sedan attributets namn eller klickar på den lilla pilknappen och väljer attributet från snabbmenyn.

För att göra attributets värde dynamiskt klickar du på attributet och sedan på blixtikonen eller mappikonen i slutet av attributets rad.

Om du klickade på blixtikonen visas en lista över datakällor.

Om du klickade på mappikonen visas en filvalsdialog. Välj alternativet Datakällor om du vill visa en lista med innehållskällor.

Välj en källa för innehåll från listan över innehållskällor och klicka på OK.

Innehållskällan bör innehålla data som är lämplig för HTML-attributet du vill binda. Om inga innehållskällor visas i listan, eller om de tillgängliga innehållskällorna inte uppfyller dina behov, definierar du en ny innehållskälla.

Nästa gång sidan körs på programservern tilldelas datakällans värde till HTML-attributet.

Gör ActiveX-, Flash- och andra objektparametrar dynamiska

Du kan göra parametrarna för Java- applets och plug-ins dynamiska, liksom parametrarna för ActiveX-, Flash-, Shockwave-, Director- och generator-objekt.

Innan du börjar kontrollerar du att fälten i din postuppsättning innehåller data som är lämplig för objektparametrarna du vill binda.

I designvyn väljer du ett objekt på sidan och öppnar egenskapsinspektören (Fönster > Egenskaper).
Klicka på knappen Parametrar.
Om din parameter inte visas i listan klickar du på Plus-knappen (+) och anger ett parameternamn i kolumnen Parameter.
Klicka på parameterns värdekolumn och klicka sedan på blixtikonen för att ange ett dynamiskt värde.

En lista med datakällor visas.

Markera en datakälla i listan och klicka på OK.

Datakällan bör innehålla data som är lämplig för objektparametern du vill binda. Om inga datakällor visas i listan, eller om de tillgängliga datakällorna inte uppfyller dina behov, definierar du en ny datakälla.