Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative

Inhaltsverzeichnis
1 Einleitung
2 Projektablauf für die Buchwebsite
3 Programmgrundlagen
4 Dreamweaver erweitern
5 Eine Site erstellen
6 Grundlegende Dokumenteinstellungen
7 Tabellen in Dreamweaver
8 Bilder im Web
9 Framesets
10 Aktionen
11 Die Zeitleiste
12 CSS in Dreamweaver
13 Ebenen
14 Hyperlinks
15 Vorlagen und Bibliotheken
16 Formulare
17 Quelltext de Luxe
18 Dreamweaver und Flash
19 Office-Daten einfügen
20 Dynamische Websites – eine Einführung
21 Einführung in PHP
22 Lokalen Webserver installieren
23 Dynamische Sites in Dreamweaver einrichten
24 MySQL-Grundlagen
25 Datenbanken mit Dreamweaver anbinden
26 PHP und Dreamweaver
27 Datenbanken abfragen
28 Daten einfügen und dynamische Formulare
29 Datensätze bearbeiten
30 Benutzer authentifizieren und Zugriffsrechte festlegen
31 Fortgeschrittene Techniken
32 Dreamweaver 8 und XML
33 Menüs für dynamische Verhalten
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Dreamweaver 8 von Richard Beer, Susann Gailus
Webseiten entwickeln mit HTML, CSS, XML, PHP und MySQL
Buch: Dreamweaver 8

Dreamweaver 8
mit CD
639 S., 39,90 Euro
Rheinwerk Design
ISBN 978-3-89842-739-5
gp 27 Datenbanken abfragen
  gp 27.1 Das Bedienfeld Bindungen
  gp 27.2 Datensätze in Dreamweaver abfragen
    gp 27.2.1 Einfache Abfragen erstellen
    gp 27.2.2 Anzeigen von Datensätzen
    gp 27.2.3 Formatieren in der Live Data-Ansicht
    gp 27.2.4 Erweiterte Abfragen erstellen
    gp 27.2.5 Mehrere Datensätze abfragen
    gp 27.2.6 Bestimmte Datensätze abfragen
    gp 27.2.7 Datensatz-ID mit URL übergeben
    gp 27.2.8 Einstellbare Variablentypen
    gp 27.2.9 Testen der Abfragen
  gp 27.3 Dynamische Tabellen
    gp 27.3.1 Erstellen einer dynamischen Tabelle
    gp 27.3.2 Dynamische Tabelle mit Serververhalten
  gp 27.4 Bilder dynamisch einfügen
    gp 27.4.1 Bilder aus Datenbanken verlinken
    gp 27.4.2 Vorbereitungen für dynamisch eingefügte Bilder
  gp 27.5 In Datensätzen navigieren
    gp 27.5.1 Datensatznavigation erstellen
    gp 27.5.2 Bereiche in Abhängigkeit von Daten anzeigen
    gp 27.5.3 Datensatzanzahl anzeigen
    gp 27.5.4 Individuelle Datensatznavigationen erstellen
  gp 27.6 HTML-Attribute dynamisch generieren
    gp 27.6.1 Eigenschaften aus Datenquellen einfügen
    gp 27.6.2 Daten in der URL mit Hyperlinks übergeben
  gp 27.7 Automatische Master- und Detailseiten
  gp 27.8 Ausgabe formatieren
  gp 27.9 Aufbau der dynamischen Inhalte der Buchwebsite
    gp 27.9.1 Das Funktionsschema
    gp 27.9.2 Die Masterseite
    gp 27.9.3 Die Detailseiten


Rheinwerk Computing

27.4 Bilder dynamisch einfügen  downtop


Rheinwerk Computing

27.4.1 Bilder aus Datenbanken verlinken  downtop

Neben Texten sind Bilder die häufigsten Elemente auf Websites. Mit Dreamweaver 8 können Sie Bilder ganz einfach dynamisch hinzufügen. Auf Seite 153 haben wir bereits mit Bild-Platzhaltern gearbeitet. Jetzt, bei der dynamischen Website-Erstellung, kommt diese Technik zum Einsatz.

Bild-Platzhalter einfügen | Wir haben dazu eine kleine Beispieldatenbank angelegt. Die Bilder werden als Hyperlink in ein varchar-Feld eingetragen. Alle Bilder haben eine Abmessung von 350 x 500 Pixel.

Um einen Bild-Platzhalter einzufügen, gehen Sie in der Einfügeleiste auf Allgemein und klicken dann auf BilderBild-Platzhalter.

Abbildung 27.38 Einen Bild-Platzhalter ins Dokument einfügen

Benennen Sie jetzt den Bild-Platzhalter und legen Sie die Abmessungen des zukünftigen Bildes fest.

Abbildung 27.39 Eigenschaften des Platzhalters werden festgelegt.

Nachdem nun der Bild-Platzhalter eingefügt wurde, müssen Sie noch die notwendige Abfrage erstellen. Wir benötigen die Tabelle »bilder«, da in dieser Tabelle die Datenfelder für die Bilder vorhanden sind.

Abbildung 27.40 Eine Abfrage für das Bild erstellen

Wenn Sie eine Abfrage erstellt haben, können Sie den Datensatz »image« einfach mit der Maus auf den Bild-Platzhalter ziehen (siehe Abbildung 27.41).

Im Quelltext wird nun Folgendes eingetragen:

<img src="<?php echo $row_BILD['image']; ?>" alt=""
name="BILD" width="350" height="500" id="BILD"
style="background-color: #CCCCCC" />

Sie sehen, dass anstelle des Zielpfades zum Bild ein PHP-Skript mit der Datensatzvariablen zum Bild 1 abgelegt wird. Manchmal werden die Maße aus dem Bild-Platzhalter nicht korrekt übernommen. Tragen Sie in solch einem Fall die Abmessungen des Bildes im Eigenschafteninspektor ein. Die Abmessungen müssen, wenn Sie die genauen Maße des Bildes nicht kennen, nicht angegeben werden. Um einen schnelleren Seitenaufbau zu garantieren, sollte dies aber nach Möglichkeit geschehen.

In der Live Data-Ansicht sehen Sie das eingefügte Bild korrekt angezeigt, die Datenbankanbindung hat funktioniert.

Abbildung 27.41 Dem Bild-Platzhalter wird ein Datensatz zugewiesen.

Abbildung 27.42 Das dynamisch angezeigte Bild in der Live Data-Ansicht

Bilder in wiederholten Bereichen | Selbstverständlich können Sie Bilder auch in wiederholten Bereichen verwenden. In einem Shopsystem können Sie so z. B. die ganzen Produktbilder mit den relevanten Daten anzeigen lassen und müssen das Tabellenlayout für die Produkte nur einmal anlegen.

Abbildung 27.43 Dynamisch eingeblendete Bilder in wiederholten Bereichen auf einer Seite

Eine weitere Möglichkeit, dynamische Bilder einzubinden, ergibt sich durch das Anbinden von HTML-Attributen an dynamische Daten. Zu diesem Thema lesen Sie bitte den Abschnitt weiter unten (siehe Seite 472). Welche der Methoden Sie verwenden, bleibt letztlich Ihnen überlassen.


Rheinwerk Computing

27.4.2 Vorbereitungen für dynamisch eingefügte Bilder  toptop

Genau genommen werden nicht Bilder direkt in eine Datenbank eingefügt, sondern immer nur die Verknüpfungen zu einem Bild.

Abbildung 27.44 In der Datenbank werden nicht die Bilder, sondern die Pfadangaben abgespeichert.

Damit die Verlinkung der Bilder mit relativen Pfaden funktioniert, haben wir uns einen Unterordner mit dem Namen »images« angelegt, in dem das soeben erstellte Dokument gespeichert wurde.

Abbildung 27.45 Neuer Ordner für die Testdokumente

Pfadangaben | In unserem Fall müssen wir, da es keinen Webserver für die Website gibt, mit relativen Pfaden arbeiten. Später, wenn eine Website veröffentlicht werden soll, ist es besser, mit absoluten Pfaden zu den Bildern zu arbeiten, es sei denn, wir wissen genau, von welchem Ort auf dem Webserver die Bilder eingebunden werden.

Diese Methode wird bei einem leeren Datensatz die übliche Fehlerdarstellung für fehlende Bilder erzeugen, da der Image-Tag ja trotzdem an HTML ausgegeben wird. Geben Sie daher in Ihrer Datenbank als Standardvorgabe den Pfad zu einem transparenten GIF an, bis dieses durch ein richtiges Bild überschrieben wird.



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Adobe Dreamweaver CS3
Die Neuauflage:
Adobe Dreamweaver CS3
Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: Adobe Dreamweaver CC






 Adobe
 Dreamweaver CC


Zum Rheinwerk-Shop: Adobe Dreamweaver CC Einstieg






 Adobe Dreamweaver
 CC Einstieg


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern