Im Dreamweaver das Layout statisch erstellen und gestalten (CSS+Tabelle+Boxen)
Dummywert zur Formatierung (zwecks erkennbarkeit)
Tabellarische Anzeige > eine Zeile ausreichend
im Quellcode in PHP Ausgabe umwandeln
Dummywerte ersetzen ( Datenabfrage,fetch_array,Schleife)
Anzeigen in Webseiten
HTML > PHP > Seiten
Flashobjekte
Liste (Tabelle, Alle, Datensätze)
Detailanzeige (enthält ein Datensatz)
Datenbank+Inhalte (Bestandteile aus dem kompletten Bestand)
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die [...]
Site im Dreamweaver auf Testserver einstellen
Site Definition ändern
Kategorie > Testserver
Php&Maysql aus der Liste wählen
Ordner belassen
URL-Präffix: http://localhost/projektordner
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.
Anwendungsbeispiele
Bildaustausch auf Benutzeraktion
Popup Menü
Nachrichten / Fußzeile per Text
Ebenen sichtbar & unsichtbar machen
Plugin Prüfung > Alternative Seiten
> Java Script, wird im Dreamweaver einbaut. Im Browser des Nutzers abschaltbar ! Nicht für alle Medien funktionsfähig ( z.B. auf Mobile Endgeräte )
Verhalten ( Behairiors )
Fenster > Verhalten
oder Taginspector > Verhalten
Ereignis –> Event
Mausereignis (Rollover klicken … )
Browserereignisse
Benutzereingaben ( Tastendruck, [...]
Voreinstellungen: mit Hilfe des Eingabeassistent
Formulare anlegen und gestalten
Cursor in ein Formularfeld setzen
DW + Javascript = Formularinhalt prüfen
Formularelemente in CSS gestalten
Eingabehilfeassistent
einfügen von Objekten, werden Parameter per Dialog abgefragt (Bsp. Bild > Alternativetext)
Bearbeiten > Voreinstellungen > Kategorie: Eingabehilfe
einfügen eines Formulares
Formular <form>
Bedienfeldgruppe > Einfügeleiste > Formular > Formular einfügen
Formularelement immer zuerst einfügen <form>, bevor Formularfelder eingefügt wurde
Hinweis: [...]
Möglichkeiten
existierende Dateien
von anderen Editoren
Kunden oder Drittfirmen
Vorlage wird auf vorhandene Dateien angewendet und ein einheitliches Layout mit ihren jeweiligen Inhalten erstellt. Bei komplexeren Inhalten sollten einzelne editierbare Bereiche erstellt werden.
Anwendung
“Neues” Dokument öffnen (das vorhandene Dokument)
Elemente > Vorlagen (Vorlage auswählen)
Anwenden
Inkonsistente Bereiche auf Vorlagen anwenden
die nicht definierten Inhalte müssen den bearbeitbaren Bereichen zugewiesen werden.
Bestandteil auswählen
bearbeitbaren Bereich wählen
Spendiere mir [...]
In Webseiten gibt es Inhalte und Bereiche die in allen Dokumenten der Webseite identisch sind, sowie Bereiche die unterschiedliche Themen anzeigen
Dreamweaver bietet hierfür die Möglichkeit “feste Bereiche” anzulegen
Themen variabel zu gestalten
Bereiche definieren die bearbeitbar sind
als Vorlage speichern
Dokument aus Vorlage erstellen
In Dreamweaver
alles anlegen was “fest” ist (Kopf,Menü,Fuß)
Boxmodell - Div Tag (für bearbeitbare Bereiche festlegen)
Tabelle - Zelle [...]
Hilfsmittel des Dreamweaver zur effektiveren Arbeit um wiederholende Inhalte bzw. Elemente, die in allen Seiten auftauchen effizent zu verwalten.
Abhilfe: Bibliothek
Element wird einmal angelegt
mehrfach nutzen
bei änderung werden alle eingesetzten Elemente aktualisiert
In Dreamweaver
im Dokument den Inhalt markieren
Elemente > Bibliothek (aufgeklapptes Buchsymbol)
markierten Inhalt in Bibliothek ziehen
Übernahme in Bibliothek / Namen zuweisen
Wenn ein Inhalt in der Bibliothek übernommen wurde
Inhalt [...]
Zellen markieren
Eigenschaftenleiste > Symbol “Zellen verbinden”
oder rechte Maustaste > Tabellen > Zellen verbinden
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.
Zeilen oder Spaltenanzahl beim arbeiten ergänzen oder reduzieren
Tabelle auswählen
in der Eigenschaftenleiste die Anzahl der Spalten oder Zeilen ändern
Zeilen anhängen
letzte Zeile auswählen
Tab Taste > komplette Zeile wird angehängt (Formatierungen werden übernommen)
Spalten und Zeilen einfügen
Spalte oder Zeile mit Cursor anwählen die eingefügt werden soll
rechte Maustaste > Tabelle > Zeile einfügen / Spalte einfügen (wird davor eingefügt)
mehrere Spalten [...]
Tabellenangaben in HTML Dokumenten
Zeile und Spalten <th>text automatisch fett und zentriert</th>
Rahmen - Standardwert beträgt 1
Zwischenraum - Standardwert beträgt 1
Abstand / Aufüllen - Standardwert 0
Breite - in Pixel oder Prozent
Einfügen von Tabellen
Bedienfeldgruppe > Einfügen > Allgemein > Tabelle
oder Dateileiste > Einfügen > Tabelle
Im Dialogfenster müssen die Werte eingetragen werden.
Ergebnis: Tabelle wird eingefügt wo Cursor stand
im Eigenschaftenfenster [...]
Importieren von tabellarischen Daten
Exceltabelle ( Exceltabelle anlegen und speichern unter XLS Datei)
CSV Dateien (Textdateien in Tabellenform)
Textdateien in Tabellenform
Vorgehensweise
Datei > Importieren > (Excel Tabelle, Word Tabelle, Tabellendaten, XML)
Layouten mit Tabellen
Seite in Tabellenraster aufteilen
Inhalt wird später auf die Zellen verteilt
ältere DW Versionen - Div Tag zeichnen > anschliessend konvertieren in Tabelle
beim zeichnen wird Tabelle erzeugt
Anmerkung: Der <body> [...]
Ausgabe Standard HTML
HTML, Link, Besuchter Link, Aktiven Link
standardlink = blau
standard besuchter Link, aktiver Link = weinrot,lila
weitere Ausgaben mit CSS Stile möglich
mehr Möglichkeiten als Standard HTML
Mausberührung möglich
Anwendung (Selektor)
a:zustand
a:link
a:selektor
a:hover
a:active
Anwendung (Block)
Hintergrund+Kasten
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.