Creative Cloud im Überblick

Websites mit Dreamweaver erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Adobe Creative Cloud stellt mit Dreamweaver eine Entwicklungsumgebung für die Erstellung von Websites sowie die Verwaltung von Webprojekten zur Verfügung.
09:30

Transkript

Adobe Dreamweaver ist eine Entwicklungsumgebung für Webseiten und Website Projekte. Im Gegensatz zu den Edge Tools und Serives, ist Dreamweaver doch etwas breiter aufgestellt. Als aller erstes kann man eine Website einrichten. Das machen wir hier unter dem Datei Menü und hier kann ich sagen "Sites verwalten". Wir haben bereits hier eine Website angelegt und wollen eine zweite einfach hinzufügen. Da sage ich hier "neue Site", nenne das Ganze jetzt "Meine Website". Wir legen einen lokalen Ordner an, sprich, wo liegen die Daten bei mir? Ich lege das jetzt mal hier auf den Desktop, lege einen neuen Ordner an nenne das jetzt hier mal "lokale Website" Ordner auswählen und wir können das sofort speichern. Natürlich kann ich hier weitere Informationen hinzufügen wie zum Beispiel eine FDP Verbindung für meinen WEB Server. Sagen wir hier "Verbindung über" welche FDP, also FDP, SFDP, lokales Netzwerk oder auch WebDAV und LDS. Wir können die FDP Adresse eingeben, Benutzername und Kennwort. Machen wir das hier einfach mal. Geben die Adresse ein, den Benutzernamen und ein Kennwort und wir können das Ganze jetzt mal testen. Wenn hier steht, "Dreamweaver wurde erfolgreich mit dem WEB Server verbunden", kann es auch schon los gehen. Speichern wir das Ganze und damit haben wir unsere Webseite fertig aufgesetzt. Ich kann jetzt als nächstes losgehen und hier ein HTML Dokument hinzufügen. Hier stehen mir verschiedene Dokumenttypen zur Verfügung. Ein leeres HTML Dokument, CSS Dateien, Java Script Dateien oder auch serverseitige Codes wie PHP und Vorlagen wie zum Beispiel fließende Raster-Layouts. Das ist ganz praktisch, um jetzt zu sagen, dass das Layout sich jeweils anpassen soll an eine mobile Webseite, ein Tablett oder einen Desktop Computer. In den Sitevorlagen stehen mir hier weitere Informationen zur Verfügung, zum Beispiel Starter Vorlagen und da kann ich jetzt sagen, ich möchte ein jQuery Mobile Projekt für ein Smart Phone oder ein Tablett erzeugen. wir gehen mal zu so einem fließenden Raster-Layout, klicken auf "Erstellen" und speichern jetzt hier als aller erstes mal die CCS Stile ab, und haben jetzt dann auch schon mal so ein Dokument angelegt. Gehen wir hier mal in die Entwurfsansicht. Ich möchte ebenfalls einige Bilddokumente hinzufügen und ich mache das Ganze einfach mal, indem ich hier so einen Ordner mit Bildern zu meiner Website hinzufüge per Drag and Drop. Hier können wir jetzt verschiedene Layout Container hinzufügen. Wir gehen dazu mal in die "Hilfslinien für fließende Raster-Layouts", und erzeugen einfach hier mal einzelne Container. Hier oben möchte ich zum Beispiel eines der Bilder platzieren. Wir nehmen einfach hier ein Bild aus dem Ordner und ziehen es hier entsprechend drauf. Wichtig ist, dass ich noch daran denke, mein HTML Dokument zu speichern und das am besten hier in den Stammordner meiner Webseite. Unterhalb des Bildes möchte ich jetzt hier einige Schaltflächen hinzufügen wie beispielsweise "Home", eine zweite "Über Uns" eine dritte namens "Service" und eine vierte names "Contact". Die wollen wir jetzt ein bisschen formatieren und dafür können wir jetzt die unterschiedlichen Layouts benutzen. An einem Desktop Computer, an einem Tablett und an einem Smart Phone. Beim Smart Phone ist vielleicht ok, wenn alle Sachen untereinander auftauchen. Bei einem Tablett könnte ich mir hier eine andere Anordnung vorstellen beispielsweise jeweils zwei Schaltflächen nebeneinander. Machen wir dafür die Schaltflächen hier entsprechend etwas kleiner und wir können jetzt hier mit der Taste dafür sorgen, dass die Schaltflächen nebeneinander dargestellt werden. Auf dem Desktop Computer habe ich ja noch mehr Platz und kann jetzt die Schaltflächen hier alle direkt nebeneinander anzeigen lassen. So kann ich mir im Prinzip ein Raster-Layout bauen, das eben dann für die Darstellung meiner Webseite auf den verschiedenen Geräten sorgen kann. Klicken wir jetzt zwischen diesen verschiedenen Designs hin und her, so können wir sehen, dass die Raster-Layouts sich je nach Anzeigegröße anpassen. Ich speicher mal alles und sage, dass ich das Ganze hier im Chrome Browser mir mal ansehen möchte. Je nachdem wie breit ich jetzt das Browser Fenster mache, passt sich nicht nur das Bild an, sondern wir sehen, dass auch die Schaltflächen jetzt sich im Design der Seite entsprechend anpassen. Wir gehen mal zu einer komplexeren Seite. Nehmen wir mal diese hier und öffnen daraus mal ein Bilddokument. Ich nehme hier das Dokument "artist-vimes". Das ist jetzt schon eine mehr oder wenig fertige Umsetzung eines Designs, wo ich nur noch Anpassungen machen möchte. Dazu hat Dreamweaver hier eine Live Ansicht und diese Live Ansicht ist im Prinzip nichts anderes als das was mir ein Browser ebenfalls zeigt. Das Schöne ist, in dieser Live Ansicht kann ich jetzt Dinge auch bearbeiten. Das heißt, wir können hier zum Beispiel runter gehen und den Text anwählen und jetzt kann ich hier mit einem Doppelklick neue Texte hinzufügen und die Texte entsprechend bearbeiten oder auch formatieren. Zum Formatieren stehen mir hier Stil-Anweisungen zur Verfügung, die ich jetzt hier hinzufügen kann. Nehmen wir hier zum Beispiel mal den Stil .bio und Sie sehen, das hat direkt Einfluss auf die Darstellung dieses Textes. Da die Stile ja hier größtenteils auf CSS basieren, gibt es hier einen umfangreichen CSS Designer. Für den brauche ich allerdings ein bisschen Platz. Deswegen ziehe ich mir das jetzt hier mal so ein bisschen groß. Wir sehen jetzt hier, welche CSS Dateien in dieser Webseite verwendet werden, welche Stile, also welche Medienregeln Anwendung finden und welche Selektoren es gibt und welche Eigenschaften diese hier haben. Gehen wir mal in den Überprüfungsmodus und klicken jetzt einfach mal hier auf den Text. Dadurch wird der jetzt entsprechend selektiert und ich sehe alle Regeln, die auf diesen Text ".bio p" entsprechend angewendet werden. Wir können hier runter scrollen und sehen jetzt die verschiedenen Parameter, wie beispielsweise die Farbe, die ich hier jetzt natürlich schnell bearbeiten kann. Wir können sortieren nach Layout Information, Textgestaltungsinformation, hier verschiedene Rahmen, Verläufe und Hintergründe und weiteren Eigenschaften. Klicke ich hier auf "nur verwendete", wird mir angezeigt, was tatsächlich in dieser Regel ".bio p" definiert worden ist. Hier kann ich auch andere Regeln anschauen. Zum Beispiel Regeln für Überschriften. Ich könnte mir vorstellen, wenn man in den Überprüfungsmodus geht, dass das hier als Headline formatiert ist. H1 Headline steht tatsächlich hier und ich sehe jetzt hier die entsprechenden Regeln, die hier in der Screen-Ansicht zum Tragen kommen. "Nur verwendete Stile", sehe ich zum Beispiel die Font Size, die ich jetzt hier schnell anpassen kann. Sagen wir hier mal 3em und machen die Überschrift damit einfach etwas kleiner. Kann man hier auch anpassen, je nachdem wie man das nachher haben möchte. Mit dem CSS Designer kann ich sozusagen die Stile meiner Webseite entsprechend bearbeiten. Möchte ich weitere Elemente hinzufügen, so verlasse ich hier einmal die Live Ansicht, gehe zurück in die Entwurfsansicht und kann jetzt hier über das Einfügen-Bedienfeld verschiedene Informationen hinzufügen. Hier können das allgemeine, Strukturinformationen, neue Medien sein, Formulare, jQuery UI Elemente und vieles mehr. Nehmen wir zum Beispiel mal hier aus jQuery UI einen Datepicker. Den wähle ich jetzt hier an und wenn ich dann wieder in die Live Ansicht zurückkehre, so kann ich sehen, dass meiner Webseite hier unten ein entsprechendes Datepicker Element hinzugefügt worden ist, mit dem man hier so ein Datum auswählen kann. Möchte man sich in seiner Webseite zurechtfinden, so ist der HTML Selektor gar nicht schlecht. Er zeigt mir im Prinzip eine bestimmte Struktur meiner Webseite an und ich kann jetzt hier auf die einzelnen Elemente klicken, um sie im Design zu selektieren. Natürlich kann ich auch den Quellcode bearbeiten, indem wir hier auf Code gehen. Das ist sozusagen das Gerippe, aus dem sich meine Webseite jetzt tatsächlich zusammengesetzt hat. Wenn ich mit dem Design meiner Seite zufrieden bin, so kann ich die auf meinen WEB Server übertragen. Dazu steht mir diese Dualansicht hier zur Verfügung und ich kann mich jetzt mit den Daten von meinem WEB Server entsprechend verbinden. Auf der linken Seite sehen wir die WEB Server Daten, auf der rechten Seite meine lokalen Daten. Möchte ich Daten übertragen, so wähle ich die hier an und kann jetzt sagen, dass ich diese auf meinen WEB Server laden möchte. Diese Ansicht kann ich wieder verlassen, um wieder zurückzukehren in den Design Modus. Wie wir gesehen haben, ist Dreamweaver eine recht umfangreiche Anwendung, um ganze Website Projekte zu verwalten und um diese dann auch mit dem Server zu synchronisieren. Dokumente lassen sich bearbeiten, neue Elemente hinzufügen und im CSS Designer kann ich die Stile für bestimmte Elemente verwalten.

Creative Cloud im Überblick

Lernen Sie Adobes Creative Cloud und all ihre Applikationen kennen. Sven Brencher zeigt, was hinter CC und den Applikationen für Web, Design, Fotografie und Publishing steckt.

7 Std. 24 min (55 Videos)
Derzeit sind keine Feedbacks vorhanden...

Mit dem Creative Cloud Update vom Oktober 2014 wurde Adobe Kuler umbenannt in Adobe Color.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!