Begrüßung und Projekteinführung

aus: Adobe Dreamweaver CS3 Profi-Workshops

Kaufen

Über dieses Video

"So nah wie möglich am echten Leben" – das ist das Kriterium, nach dem Ihr Trainer Marc Thiele die Workshops definiert hat. Sammeln Sie neue Inspiration für die Arbeit mit Dreamweaver, indem Sie ihm über die Schulter schauen und erkennen, wie er an die einzelnen Projekte herangeht.

Auszug aus: Adobe Dreamweaver CS3 Profi-Workshops

Dieses Video-Training überbrückt die Kluft zwischen Theorie und Praxis! Von der ersten Codezeile bis zur Veröffentlichung und der täglichen Wartung entwickelt und analysiert Marc Thiele drei reale Webprojekte.

EUR 49,95

Kaufen

Ähnliche Video-Trainings

Bonusmaterial

Mit der Version CS3 von Dreamweaver hat Adobe eine neue Funktion eingabeut, die die lästigen und viele kaum beherrschbaren Probleme bei der Browserabhängigkeit löst: Ein Hilfesystem führt Sie vom Problem bis zur Lösung aus dem online-Forum.

Browserabhängigkeiten

02:35
Die tolle Intergration von Dreamweaver in die Creative Suite 3 lässt sich mit diesem Beispiel belegen: Platzieren Sie ein Photoshop-Bild in einer Dreamweaver-Seite erscheint ein umfangreicher Konvertierungsdialog, der auch für eine funktionierende Verknüpfung zum Original mit allen Ebenen generiert.

Photoshop im Team

06:40
Sie haben erst kürzlich die geforderte Funktionalität in einem anderen Projekt implementiert und möchten diese in die neue Site übernehmen? Dreamweaver bietet genau dafür eine Verwaltung für "Codefragmente"

Codefragmente einsetzen

01:41
Je größer das Projekt, desto wichtiger wird es für den Entwickler, die Übersicht zu bewahren. Dreamweaver bietet im Bedienfeld "Dateien" einen eigenen Register, der Ihnen viele Sorgen vom Leib hält.

Das Bedienfeld Elemente

01:17

"So nah wie möglich am echten Leben" – das ist das Kriterium, nach dem Ihr Trainer Marc Thiele die Workshops definiert hat. Sammeln Sie neue Inspiration für die Arbeit mit Dreamweaver, indem Sie ihm über die Schulter schauen und erkennen, wie er an die einzelnen Projekte herangeht.

Begrüßung und Projekteinführung

04:26
In diesem ersten Kapitel stellt Ihnen Ihr Trainer die Oberfläche von Dreamweaver sowie einige essenzielle Kernfunktionen vor. Lernen Sie jetzt also die Funktionen des Startbildschirms kennen und wie Sie Ihre Site mit den dazugehörigen CSS-Dateien verwalten …

Grundlagen

ca. 37 min
- Beim Starten des Programms begrüßt Sie der Startbildschirm. Hier finden Sie schnellen Zugriff auf die unterschiedlichsten Funktionen. Nachdem Ihnen Ihr Trainer diese erklärt hat, lernen Sie die Oberfläche von Dreamweaver CS3 kennen und erhalten einen Überblick darüber, wo Sie was finden.
  
  Startbildschirm
  
  06:45
- Sie haben die Möglichkeit, den Arbeitsbereich in der Codeansicht oder in der Entwurfsansicht zu nutzen. Erfahren Sie jetzt, wie Sie die beiden Varianten am effizientesten einsetzen und für Ihre Bedürfnisse anpassen …
  
  Dokumentfenster
  
  08:03
- In den Voreinstellungen konfigurieren Sie die Arbeitsumgebung nach Ihren Wünschen. Sie legen fest, wie der Quellcode formatiert und wie verschiedene Dateitypen gehandhabt werden.
  
  Voreinstellungen
  
  05:41
- Eine der Kernfunktionalitäten in Dreamweaver ist das Einrichten und Verwalten von sogenannten Sites. Ihr Trainer zeigt Ihnen hier, wie Sie eine Site definieren und die dazugehörigen Dateien und Einstellungen verwalten.
  
  Site erstellen und verwalten
  
  05:38
- Die Ein- und Auscheckfunktion ist nützlich, wenn Sie in einem Team arbeiten. Mithilfe dieser Funktion kennzeichnen Sie die von Ihnen bearbeiteten Dateien für andere als "aktuell in Bearbeitung".
  
  Dateien ein- und auschecken
  
  02:26
- Der Dialog für das Erstellen neuer Dokumente wurde überarbeitet. Neben der Möglichkeit, den DocType (DTD) für das Dokument zu wählen, können Sie hier nun direkt CSS-Dateien verknüpfen.
  
  Neues Dokument
  
  01:42
- Eine Neuerung in Dreamweaver CS3 sind die sogenannten CSS-Layoutvorlagen. Neben der einfachen Verwendbarkeit ist der Vorteil der CSS-Layouts, dass sie wegen ihrer reichhaltigen Kommentare einen hohen Lerneffekt bieten. Erfahren Sie jetzt, wie Sie diese Vorlagen verwenden und anpassen.
  
  CSS-Layoutvorlagen
  
  03:11
- Die neuen CSS-Verwaltungsfunktionen ermöglichen eine bequeme Bearbeitung und Verwaltung. Sie haben die Möglichkeit, Eigenschaften per Drag&Drop zwischen Dokumenten auszutauschen oder Inline-CSS in CSS-Regeln umzuwandeln.
  
  CSS verwalten
  
  03:42
Im ersten Praxis-Workshop erstellen Sie eine Site für einen Autohändler, die dieser später mithilfe von Contribute pflegen möchte.

Workshop: Website Kfz-Handel

ca. 90 min
- Dieser Film bietet eine kurze Einführung in das Pflichtenheft des ersten Projekts: Überblick über die Anforderungen an Gestaltung, Inhalt und Pflege.
  
  Überblick über die Anforderungen
  
  01:48
- Das Grundlayout beruht auf der Basis einer CSS-Layout-Vorlage, die Dreamweaver schon mitbringt. Ein paar kleine Änderungen und schon haben Sie eine individuelle Seite.
  
  Erstellen des Grundlayouts
  
  03:29
- Die Navigation erfolgt auf Basis einer ungeordneten Liste, die flexibel ist und mit CSS-Styles nachträglich formatiert werden kann.
  
  Die Seitennavigation
  - In der HTML-Datei erstellen Sie einen zusätzlichen Div-Bereich für die Navigation. Die Navigationsschaltflächen sind dabei einfache Listenelemente.
    
    HTML-Teil der Navigationsleiste
    
    05:11
  - Mithilfe von CSS gestalten und formatieren Sie die Navigation. So ist die Struktur im HTML-Dokument sauber von der Gestaltung in der CSS-Datei getrennt.
    
    CSS-Teil der Navigationsleiste
    
    12:00
- Benutzen Sie Vorlagen und erstellen Sie auf ihrer Basis weitere Vorlagen, um mit geringfügigem Aufwand komplexe Seiten zu strukturieren. Mit den Dreamweaver-Vorlagen ist das ganz einfach.
  
  Dreamweaver Templates nutzen
  - Auf Grundlage eines Rohentwurfs erstellen Sie eine erste Seite als Basisvorlage. Auf ihr fußen alle weiteren Seiten des Projekts. Zentrale Änderungen übernimmt Dreamweaver in der kompletten Site.
    
    Erzeugen der Basisvorlage
    
    06:01
  - Verschachtelte Dreamweaver-Vorlagen sind Vorlagenseiten auf Grundlage einer Basisvorlage. Dreamweaver aktualisiert deren Inhalte ebenso wie alle direkt auf der Basisvorlage beruhenden Webseiten.
    
    Verschachtelte Vorlagen
    
    04:12
  - Wiederholende Bereiche sind Abschnitte, die auf einer Seite dupliziert und mehrfach benutzt werden dürfen. Kleine Schaltflächen erlauben das Einfügen, Löschen und Verschieben von einzelnen Elementen.
    
    Wiederholender Bereich
    
    05:23
  - In diesem Film sehen Sie, wie Sie die Platzhalterelemente einer Vorlage mit CSS für die endgültige Fassung aufbereiten und formatieren.
    
    Inhalte mit CSS gestalten
    
    07:48
  - Bereiten Sie das Projekt für den Kunden optimal vor: Eine komplette Seitenstruktur erlaubt es, die Inhalte später mit der Adobe-Anwendung Contribute einzupflegen.
    
    Restliche Inhaltsseiten erstellen
    
    06:09
- Mit aktivierter Contribute-Kompatibilität kann Dreamweaver jederzeit eine Verbindung zu einer Contribute-Site herstellen und diese verwalten.
  
  Kompatibilität mit Contribute
  - Dreamweaver und Contribute sind ein eingespieltes Team - verwalten Sie Contribute-Sites flott und ohne viel Aufwand direkt aus Dreamweaver heraus.
    
    Verwalten der Contribute-Kompatibilität
    
    07:11
  - Die Benutzer- und Rolleneinstellungen legen fest, in welchem Ausmaß welche Benutzer eine Website bearbeiten dürfen. Regeln Sie Dateizugriffsoptionen, codebasierte Optionen und typografische Einstellungen.
    
    Benutzer- und Rolleneinstellungen
    
    06:50
- Contribute kombiniert die Funktionen eines Webbrowsers mit einem visuellen Webeditor. Berechtigte Contribute-Benutzer dürfen Webinhalte hinzufügen und aktualisieren.
  
  Adobe Contribute
  - Dieser Film zeigt eine kurze Übersicht über das Programm Adobe Contribute und beschreibt seine bevorzugten Einsatzgebiete.
    
    Überblick über Contribute
    
    01:26
  - Die Arbeitsoberfläche von Contribute ist schlank und überschaubar. Sie zeigt dem Benutzer nur das, was er für seine Arbeit braucht. Der Vorteil: ein Minimum an Einarbeitungszeit auch ohne technisches Hintergrundwissen.
    
    Arbeitsoberfläche
    
    06:25
  - Die Voraussetzung für die Pflege einer Website mit Contribute ist eine Verbindung zum Webserver – im Idealfall über einen vorab vom Site-Administrator gelieferten Key, alternativ mit einer manuellen Konfiguration.
    
    Verbindung herstellen
    
    05:57
  - Die Benutzer- und Rolleneinstellungen sind nicht schwer zu verwalten. Ein paar Mausklicks hier, einige Optionen dort … schon sind die Rollen verteilt. Und ein paar Musterrollen bringt Dreamweaver schon mit.
    
    Benutzer und Rollen verwalten
    
    05:43
  - Den Zugriff einzelner Benutzer auf bestimmte CSS-Styles beschränken Sie mit einzelnen CSS-Klassen, auf die Sie den Benutzer verweisen. Damit die Klassen auch für den Admin verfügbar sind, importieren Sie sie in eine zentrale CSS-Datei.
    
    CSS für Contribute
    
    04:22
In diesem Workshop entsteht eine Site für eine Rockband. Dabei sollen Texte der Site über eine Datenbank gepflegt werden und den Besuchern soll ein Gästebuch zur Verfügung stehen, um Kommentare hinterlassen zu können.

Workshop Band-Website

ca. 105 min
- Verschaffen Sie sich vorab einen Überblick über das nachfolgende Projekt: Wie sieht das Ergebnis aus? Welche Vorgaben versucht Marc Thiele dabei einzuhalten? Und welche Mittel aus Dreamweaver CS3 wird er dazu einsetzen?
  
  Erläuterung des Band-Projekts
  
  03:01
- Zu Beginn des Projekts werden die Grundeinstellungen festgelegt. Wir richten die Site in Dreamweaver ein und erstellen eine Seitenstruktur sowie das entsprechende CSS, das zur Gestaltung der Seite benötigt wird.
  
  Vorbereitung und Grundaufbau
  - Zu Beginn des Projekts muss die Site erst einmal in Dreamweaver konfiguriert und die Remote-Verbindung eingerichtet werden. Dabei setzt der Autor "Cloaking" ein, um die Datenmenge beim Synchronisationsprozess klein zu halten.
    
    Site-Konfiguration
    
    04:15
  - Nun geht es an die Basis für eine Website: die Grundstruktur. Diese soll XHTML-Regeln entsprechen und durch eine Reihe von Div-Tags definiert werden. Am Ende dieses Films sind die zu füllenden Bereiche fertig definiert - aber leer.
    
    Seitenstruktur erstellen
    
    06:28
  - Nach der Einteilung der Seite in Bereiche geht der Autor daran, diese mit ersten Texten zu füllen. Dabei berücksichtigt er neben passenden Überschriftsebenen auch bereits die Verknüpfungen zu den anderen Seiten des Projekts, um so eine gute Basis für das weitere Arbeiten zu schaffen.
    
    Grundelemente definieren
    
    06:52
  - In diesem Film geht es um die ersten, sehr grundlegenden Definitionen von CSS-Eigenschaften: Wie sehen die Body-Elemente aus, wie weit vererben sich diese Formatierungsanweisungen?
    
    CSS-Grundeinstellungen
    
    06:27
  - Die Struktur der Seite ist definiert, die Grundelemente sind eingebaut. Nun kümmert sich der Autor um die Positionierung der Seitenlemente per Cascading Style Sheet und legt das Verhalten bei Veränderungen des Browser-Fensters fest.
    
    Layout und Seitenaufbau mit CSS
    
    03:00
  - Immer näher zu den Details ... Als erstes Element der Seite gestaltet Marc Thiele den Kopf der Website. Mithilfe von CSS erstellt er Regeln, die am Ende ein Bild optimal positioniert einblenden und den eigentlichen Text ausblenden.
    
    Header-Gestaltung mit CSS
    
    04:35
  - So schnell kann aus einer ungeordneten Liste eine waagerechte Navigationsleiste werden! Sehen Sie sich an, mit wie wenig CSS-Attributen es Marc Thiele schafft, eine professionelle Navigation ausschließlich per CSS zu gestalten.
    
    Navigation mit CSS
    
    06:54
  - Auch der Hauptinhalt der Seite muss formatiert und gestaltet werden. Verschiedene Überschriftenformatierungen wie zum Beispiel der Übersichtlichkeit bringende Absatzabstand werden über Cascading Style Sheets gesteuert.
    
    Den Hauptinhalt mit CSS formatieren
    
    04:28
  - Damit das "Image Replacement" durch CSS-Attribute seitenabhängig wird, verwendet der Autor einen einfachen Trick. In diesem Film sehen Sie, wie einfach Sie über IDs verschiedene Hintergrundbilder für eine Überschriftsebene vorgeben können.
    
    Bildtexte mit CSS
    
    03:15
  - Zum Abschluss der grundsätzlichen Seitengestaltung wird der Fuß der Seite – ebenfalls mithilfe von CSS – gestaltet. Mit dem geschickten Einsatz passender CSS-Attribute lässt sich vieles auf einfache Art erreichen, was zuerst kompliziert aussieht.
    
    Fußzeilen mit CSS gestalten
    
    04:43
- Mit Dreamweaver CS3 ist es möglich, Datenbanken anzusprechen und Inhalte aus dieser Datenbank in Ihre Seiten zu integrieren. In diesem Workshop kommen PHP und MySQL zum Einsatz – dieses Team wird von Dreamweaver unterstützt.
  
  Dynamische Daten anzeigen
  - Zuerst erfahren Sie, welche Funktionen Ihnen innerhalb von Dreamweaver für das Arbeiten mit PHP und MySQL zur Verfügung stehen, außerdem erklärt Ihnen Marc Thiele die Ziele des Band-Site-Projekts.
    
    Überblick und Einführung
    
    02:35
  - Erst wenn Ihre Arbeitsumgebung auch entsprechend eingerichtet ist, stehen Ihnen die Bearbeitungsmöglichkeiten für PHP zur Verfügung. Anhand dieses Kapitels sehen Sie, wie eine Testserverumgebung eingerichtet wird und Sie Ihre Site PHP-fähig machen.
    
    php-Site und Testserver einrichten
    
    04:42
  - Für das Anlegen und Verwalten einer Datenbank auf dem Webserver kann man verschiedene Programme nutzen. Davon ist "phpMyAdmin" eines der verbreitetsten und daher bei vielen Webhostern vorinstalliert.
    
    phpMyAdmin
    
    02:40
  - Damit Sie Daten aus einer Datenbank verwenden können, müssen Sie zunächst eine Verbindung zur Datenbank herstellen. In diesem Teil des Projekts lernen Sie, wie Sie das realisieren.
    
    Datenbankverbindung herstellen
    
    03:11
  - Nach dem Anzapfen der Datenbank wollen Sie Ihre Daten auch darstellen. Per Drag&Drop ziehen Sie die entsprechenden Elemente einfach aus einem Bedienfeld in Ihren Quellcode und definieren so einen Bereich, in dem die Daten dargestellt werden.
    
    Dynamische Daten einbauen
    
    05:30
  - Große Mengen an Daten werden schnell unübersichtlich. Über zwei Links ermöglichen Sie es den Benutzern, bequem zwischen verschiedenen Stapeln eines Datensatzes zu blättern. Auch dafür ist keine Zeile Code selbst zu tippen – Dreamweaver spielt seine Stärken aus!
    
    Die Blättern-Funktion
    
    05:41
- Neben der einfachen Anzeige lassen sich Daten in einer Datenbank auch bearbeiten. Mithilfe der in Dreamweaver CS3 dazu bereitgestellten Funktionen erstellen wir einen Administrationsbereich, in dem die Daten gepflegt werden können.
  
  Dynamische Daten bearbeiten
  - Damit Sie Inhalte in der Datenbank haben, müssen diese erst einmal eingefügt werden. Dreamweaver bietet alle Mittel für eine sehr einfache Formularerstellung, wobei sogar eine Anbindung an eine Datenbank vorgesehen ist.
    
    Datensätze einfügen
    
    10:40
  - 'Spry' ist eine der Top-Neuerungen in Adobe Dreamweaver CS3. Unter anderem helfen Ihnen Formular-Validierungsfunktionen bei der sofortigen Überprüfung von Benutzereingaben.
    
    Formularvalidierung mit Spry
    
    09:03
  - Mit einer dynamischen Auswahlliste machen Sie es dem Benutzer leicht, einen bestehenden Eintrag aus der Datenbank zu wählen. Sehen Sie sich an, wie Sie deren Inhalt editieren können.
    
    Dynamische Auswahlliste
    
    06:18
  - Nach der Auswahl eines bestimmten Eintrags soll dieser aktualisiert und wieder in die Datenbank zurückgeschrieben werden. Ein Formular-Assistent für das Aktualisieren von Daten hilft Ihnen bei der Umsetzung in Dreamweaver.
    
    Datensätze aktualisieren
    
    05:50
  - Alte oder unnötige Daten können aus der Datenbank gelöscht werden. Dank Dreamweaver erzeugen Sie in wenigen Schritten eine Seite, mit der ausgewählte Elemente entfernt werden können.
    
    Datensätze löschen
    
    03:08
In diesem Projekt geht es hauptsächlich um das neue Ajax-Framework Spry. Mit seinen Funktionen erstellen Sie Oberflächenelemente, binden dynamische Daten ein und wenden Effekte auf Produktbilder an.

Praxisworkshop 'Jetaction'

ca. 50 min
- In diesem Film sehen Sie eine kurze Einleitung in das Beispielprojekt "Jetaction" und die Definition der Ziele und der Wege, wie Sie diese umsetzen.
  
  Das Projekt 'Jetaction'
  
  01:34
- Spry basiert auf Ajax, einem Mix an Technologien, die in den letzten Monaten stark an Popularität gewonnen haben. In Dreamweaver nutzen Sie Ajax fast ohne Programmierung.
  
  Einführung in Spry
  
  05:18
- Als Bestandteile des Ajax-Framework liefert Adobes Spry eine – erweiterbare – Reihe von Bedienungselementen für die Website mit.
  
  Spry Widgets
  - Dieser Film zeigt, wie Sie mit der Spry-Menüleiste eine benutzerfreundliche Navigation mit ausklappenden Sub-Menüs erstellen.
    
    Menüleiste
    
    06:23
  - Sehen Sie, wie Sie in wenigen Schritten Daten für die Website aus einer XML-Datei einbinden. Dank Dreamweavers Menüs und Funktionen geht das selbst per Drag&Drop.
    
    XML-Anbindung
    
    04:06
  - Über Spry-Bereiche steuern Sie die Anzeige von Details aus einer angebundenen XML-Datei. Der Film erklärt den Hauptbereich und zeigt, wie Sie eine Spry-Tabelle einbinden, um die Elemente darzustellen.
    
    Bereiche und Tabellen
    
    04:27
  - Mithilfe von CSS lassen sich fast alle grafischen Dinge der Spry-Elemente gestalten. Exemplarisch anhand der Spry-Tabelle sehen Sie, wie Sie dabei vorgehen müssen.
    
    Tabellen gestalten
    
    05:26
  - Der Spry-Detailbereich ist der Bereich, in dem nach einem Klick auf ein Element im Hauptbereich Daten entsprechend aktualisiert werden.
    
    Der Detailbereich
    
    05:12
  - Das Akkordeon-Widget bietet eine platzsparende Variante der Informationsdarstellung. In Kombination mit einem Detailbereich aktualisieren Sie die Inhalte ohne Browser-Refresh.
    
    Das Akkordeon-Widget
    
    07:33
  - Spry-Effekte werten eine Site optisch auf. Mit Blendeneffekten oder Bewegungen wirken Bilder gleich viel dynamischer.
    
    Effekte
    
    03:43
  - Video im Web ist ein heißes Thema. Die Integration von Flash-Video-Dateien erledigen Sie mit ein paar Klicks. Das eingefügte Video liefert die Abspielumgebung gleich mit.
    
    Flash-Video
    
    05:48