Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Creative Cloud im Überblick

Quellcode mit Edge Code entwickeln

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Adobe Creative Cloud beinhaltet mit Edge Code einen funktionellen, mit Plug-ins erweiterbaren Texteditor für die Entwicklung von Quellcode für eine Website.
05:41

Transkript

Webseiten bestehen in der Regel ja aus purem HTML, Javascript und CSS-Code, und wer nichts weiter braucht als einen Text-Editor, der wird vielleicht mit Adobe Edge Code CC recht glücklich. Das Programm ist erstmal nur ein Text-Editor, und testen kann ich die Seiten im Browser. Hier habe ich mal so eine HTML-Seite, und wenn ich hier auf die Live Preview klicke, dann wird mir hier ein Browser-Fenster geöffnet. Das heißt, ich teste nicht in einer Testumgebung, sondern, ja, wirklich im Browser. Und wenn man jetzt hier über bestimmte Elemente drüberfährt mit der Maus, dann werden die tatsächlich auch gehighlighted. Und ich kann jetzt hier Änderungen daran vornehmen, und wir sehen diese Änderungen tauchen auch sofort hier im Browser auf. Eine schöne Möglichkeit der Bearbeitung ist es, dass ich die CSS-Stile direkt im HTML-Browser bearbeiten kann, ich klicke dazu die Taste CTRL + E, oder finde das hier unter Navigate Quick Edit. Wenn ich das gemacht habe, also mein Cursor steht dann hier im Tag, dann sehe ich jetzt hier die entsprechenden Gestaltungsregeln für alle Überschriften der ersten Ordnung, und ich könnte hier jetzt zum Beispiel eine neue Farbe definieren, das Update sehen wir dann gleich hier auf der rechten Seite. Passen wir das Ganze nochmal wieder an, gleich hier die Schriftart, nochmal ein bisschen vergrößern, und so kann ich jetzt das Design hier anpassen. Möchte ich tatsächlich in die Regel reingehen, drücke ich nochmal die CTRL+E klicke hier auf Main.css, und jetzt bringt mich das Ganze hier direkt in den CSS-Editor, und ich kann die CSS-Stile bearbeiten. Edge-Code lässt sich sehr einfach durch Plug-ins erweitern. sogenannten Extensions, es gibt eine ganze Reihe, wenn Sie einfach mal nach Adobe Edge Code Extensions googlen, dann finden Sie sehr schnell entsprechende URL's, von denen Sie Extensions wie zum Beispiel diesen brackets-css-shapes-Editor installieren können. Dieser taucht jetzt hier in der Liste auf, und ich kann ihn für mein Design benutzen. CSS-Shapes sind eigentlich ein sehr experimentelles Feature, um das hier zu ermöglichen, muss ich hier so einen chrome-flag in den Browser eingeben, also hier oben schreiben: chrome://flags/#enable- experimental-web-platform-Features dann drücken wir Return, und dementsprechend kann ich jetzt diese experimentellen Web-Plattform-Funktionen aktivieren, und Chrome einmal neu starten, hier unten auf Jetzt neu starten, danach kann ich das entsprechend hier wieder verbinden, und jetzt möchte ich meiner Webseite gerne mal so ein Shape-Element hinzufügen, machen wir mal hier ein neues div mit der Klasse shape, okay, ist jetzt hier noch gar nicht großartig sichtbar, gehen jetzt mal in unsere Stile, und hier werden wir jetzt mal eine neue shape-Klasse erzeugen, wir geben da mal die Breite von 400 Pixeln, die Höhe - wir sehen auch hier eine sehr schöne Code Completion - Code-Vervollständigung - das Ganze soll auch fließen, also ein float auf der left, auf der linken Seite, das heißt, mein Text soll daran vorbeifließen. sehen wir jetzt noch nicht viel, denn jetzt fehlt eben genau diese Shape-Eigenschaft, und dafür sagen wir jetzt hier mal, wir wollen ein shape-outside haben, hier gibt es jetzt verschiedene Typen, runde, also ein circle, eine Ellipse oder so ein Polygon, das Angenehme ist, dass ich das jetzt hier direkt im Chrome-Browser editieren kann, anstatt jetzt also hier mühsam den Code dafür schreiben zu müssen, kann ich das hier sehr schön editieren, und wir sehen jetzt, wie mein Text um dieses Element dann drumherum schwebt, wir können das hier auch entsprechend anpassen, in der Breite, in der Höhe, und natürlich auch hier diese Formen dann noch editieren. Halte ich die Steuerungstaste gedrückt, kann ich hier auch weitere Punkte hinzufügen, und so jetzt einfach genau steuern, wo mein Text drumherum fließen soll. Das ist eine ganz neue Browserfunktion, das unterstützen noch nicht alle Browser, deswegen muss man es hier extra als experimentelles Feature über die chrome-flags installieren, da gibt es auch weitere solcher Features, hier über chrome-flags können wir die sozusagen hier aktivieren, das was wir jetzt gemacht haben, waren eben diese experimentellen Web-Plattform-Features, da unten zu aktivieren, eventuell sollten Sie die in Ihrem Browser auch später wieder deaktivieren, wenn Sie es nicht mehr brauchen, es kann sein, dass bestimmte Webseiten auf diese experimentellen Features etwas seltsam reagieren. Edge Code arbeitet auch sehr gut mit Phonegap und Edge Inspect zusammen, hier beispielsweise kann ich Webseiten auf mobilen Geräten testen, und kann dann eben kucken, warum bestimmte Funktionen vielleicht nicht so im Browser auf dem Tablet oder Smartphone funktionieren, wie ich das erwartet habe. Insofern ein feiner, schlanker Code-Editor, der sich mit entsprechenden Extensions erweitern lässt, und dementsprechend habe ich hier, ja, Projekte, die ich dann bearbeiten kann, wo ich mich wirklich primär auf den Quellcode fokussiere.

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!