Gesucht: dreigeteilten Editor HTML, CSS mit WYSIWYG-Ergebnis?
4 Antworten
dreigeteilten Editor HTML, CSS mit WYSIWYG-Ergebnis?
Was du suchst ist ein Editor mit Live-Preview. Genau das kann mittlerweile fast jeder gescheite Editor. Egal ob es GitHub Atom, Adobe Brackets oder Microsoft VisualStudio Code mit entsprechenden Extensions ist.
- Atom » https://atom.io/
- Brackets » http://brackets.io/
- Visual Studio Code » https://code.visualstudio.com/
WYSIWYG ist etwas anderes. ;) Damit sind Editoren gemeint, bei denen man nicht zwingend eigene Code-Zeilen schreiben muss. Zu solchen Werkzeugen gehört u.a. Adobe Dreamweaver oder Muse. Wobei Dreamweaver eher nen aufgeblähter Editor mit WYSIWYG-Features ist.
Ich selber arbeite fast ausschließlich mit Atom. Für die Vorschau von HTML und CSS kannst du dann einfach html-preview verwenden. Die Erweiterung öffnet dir einen weiteren Tab (siehe Screenshot), in dem du sämtliche Änderungen direkt begutachten kannst.
Für zwischendurch ganz praktisch. Da ich jedoch fast ausschließlich mit Preprocessoren arbeite, damit eigentlich nicht viel anfangen kann. Daher alles über Gulp laufen lasse. Wobei auch mal Tools wie CodeKit und Prepros samt BrowserSync verwendet werden.
LG medmonk
Hallo medmonk
Du hast recht, ich sollte meine Frage "HTML/CSS-Editor mit Live-Preview" nennen. Danke.
Deine ausführliche Antwort habe ich sehr geschätzt.
Ich habe eine Vereinverwaltung für eine Kollegin gesucht und gefunden. Diese beeinhaltet auch ein Webseiten-Modul. Allerdings ist das Layout davon 0815. Es wird auf eine CSS Datei verwiesen, mit welcher man das Aussehen verändern kann. Es besteht jedoch keine Beschreibung davon und ich habe (noch) keine Ahnung von CSS. Deshalb habe ich einen Editor gesucht, in welchem ich Änderungen am CSS-File vornehmen kann und auch sehe was dies bewirkt.
Ich habe die 3 Editoren, welche du mir empfohlen hast mal installiert schaue wie ich damit zurecht komme.
Unterdessen habe ich die Website jsfiddle.net entdeckt, welche mir meine Anderungen gleich anzeigt.
LG TamTamTamTamTam
Ich war auch einmal auf der Suche nach einem guten Editor. Notepad++ war mit Abstand der beste und bequemste, den ich finden konnte. Tatsächlich habe ich festgestellt, dass dieser auch bei anderen Entwicklern recht beliebt ist.
Wenn du nicht den Browser zum Testen nehmen möchtest, sondern gleich im Editor eine Preview haben willst, kannst du dieses Plugin nutzen:
https://www.ampercent.com/how-to-preview-html-in-notepad/16844/
Dennoch würde ich ab und an in unterschiedlichen Browsern nachsehen, weil diese häufig bestimmte Elemente verschieden/fehlerhaft darstellen.
Wie kommst du darauf? Dort steht z.B.
C:\Program Files (x86)\Notepad++\plugins (For x64)
C:\Program Files\Notepad++\plugins (For x86)
Du kannst es aber auch, wie ganz unten beschrieben, über den Plugin-Manager installieren.
Ich bin auch drauf "reingefallen". Das (For x64) und (For x86) bezieht sich auf die Windows-Version. Ich hatte auch einen Moment bis ich es verstanden habe.
Achso. Aber wird es im Plugin-Manager angezeigt und lässt es sich dort installieren?
Ich bezweifle das der PlugInManager eine 32-Bit-Version in eine 64-Bit Version konvertieren kann. Das PlugIn müsste als 64-Bit-Version kompiliert werden, damit es anschliessend mit NPP-64-Bit verwendet werden kann.
Aber Danke für deine Antwort
Ich weiß. Ich meine nur, es kann sein, dass in diesem eine 64-Bit-Version enthalten ist.
brackets kann dass, allerdings mit liveansicht ohne bearbeitungsmöglichkeit wie bei what u see ...
1. Downloade Sublime Text 3
2. Installiere Package Control
3. Installiere das LiveReload Plugin
Hallo abbrechen
Sublime Text 3 habe ich unter www.sublimetext.com gefunden.
das Package Control (packagecontrol.io) konnte ich installieren.
Doch beim LiveReload PlugIn komme ich nicht mehr weiter.
Ich habe es gerade selbst nochmal probiert und scheinbar scheint es nicht mehr so richtig zu wollen wie damals. Nun, die nächsten beiden Alternativen wären das Sublime Plugin Auto Refresh, das deinen Browsertab aber nur in Intervallen aktualisiert, oder du nutzt eine andere nicht mit einem Editor verbundene Option. Die simpelste wäre da einen vorgefertigten NodeJs Server zu verwenden. NodeJs ist eine auf unter anderem Javascript basierende serverseitige Programmiersprache, die man für Webserver verwendet. Und ein Webserver ist im Großen und Ganzes auch nichts anderes als dein Rechner Daheim.
1. NodeJs über https://nodejs.org installieren
2. Öffne deine Konsole. Bei Windows wäre es auf deutsch Eingabeaufforderung, kannst du aber auch in der Suche mit dem Suchwort "cmd" finden oder in dem du via Windowstaste + R cmd eingibst. Nun sollte dir der Befehl npm zur Verfügung stehen
3. Du installierst dir ein Modul namens live-server mit dem Befehl npm install live-server -g. Das -g steht für eine globale Installation, also dass du das Modul auf deinem gesamten Rechner nutzen und so als weiteren Befehl in der Konsole verwenden kannst
4. Du navigierst mit der Konsole in deinen Projektordner. In der Konsole kannst du dich mit dem Befehl cd .. einen Ordner hoch navigieren und cd Ordnername in den entsprechenden Ordner, der in dem Verzeichnis liegt, in welchem du mit der Konsole gerade bist. Falls du nicht genau weisst, wo du gerade mit der Konsole bist, kannst du dir mit dem Befehl dir die aktuelle Umgebung anschauen
5. Im Projektordner gibst du nun in der Konsole den Befehl live-reload ein
6. Falls sich nun kein Browsertab öffnen sollte, erreichst du deinen neuen lokalen Server unter http://localhost:8080 bzw. http://127.0.0.1:8080
Das war's schon. Der Server erkennt Änderungen an allen Dateien, die in dem Verzeichnis oder den Unterverzeichnissen liegen, in welchem der Server via Konsole gestartet wurde.
Den Sublime Editor brauchst du nun natürlich nicht mehr, aber ich würde ihn dir empfehlen, weil andere Plugins und die Projektleiste links das Arbeiten mit diesem Editor sehr angenehm machen.
Hallo tavkomann,
herzlichen Dank für deine Antwort.
Ich habe eine Vereinverwaltung für eine Kollegin gesucht und gefunden. Diese beeinhaltet auch ein Webseiten-Modul. Allerdings ist das Layout davon 0815. Es wird auf eine CSS datei verwiesen, mit welcher man das Aussehen verändern kann. Es besteht jedoch keine Beschreibung davon und ich habe (noch) keine Ahnung von CSS. Deshalb habe ich einen Editor gesucht, in welchem ich Änderungen am CSS-File vornehmen kann und auch sehe was dies bewirkt.
Auch ich nutze notepad++ schon lange und schätze den Leistungsumfang.
Ich bin kürzlich auf Win10 umgestigen und habe somit die 64-bit Version von Notepad++ istalliert, aber vielleicht sollte ich wegen den PlugIns wieder die 32-Variante installieren.
Der Link den du mir gegeben hast, ist für die 32-bit-Version von NPP, kennst du eine 64-Bit Variante des PlugIns?