Visueller Web-Editor. Visueller HTML-Editor

Visuelles HTML- ein Editor ähnlich Macromedia Dreamweaver, aber kostenlos.

Letztes Mal habe ich Ihnen erzählt, wie Sie Ihre Website mithilfe von lokalen Denver-Server. Aber die eigentliche Frage, diese Seite zu erstellen, blieb ungelöst. Lassen Sie uns versuchen, dieses lästige Versehen zu beheben - heute erzähle ich Ihnen von einem Programm, mit dem Sie eine einfache Website erstellen können, auch ohne Kenntnisse in HTML-Programmierung und anderen Tricks.

Ich mache Sie darauf aufmerksam kostenloser visueller HTML-Editor NVU.

Warum ist er gut? Ja, die Tatsache, dass Sie sich zum Erstellen einer Webseite nicht mit dem Studium von Web-Programmiersprachen beschäftigen müssen. Sie geben einfach Text ein, fügen Bilder oder Animationen ein, und die ganze "schmutzige" Arbeit, all dies in HTML zu dekorieren, übernimmt NVU.

Leider aktuell die Entwicklung NVU ausgesetzt, aber das Projekt ist bis zur ersten stabilen Version gewachsen, und das ist schon eine Menge.

NVU-Fähigkeiten

• Unterstützung mehrere Anzeigemodi bearbeitbare Seite;
• erweiterte Optionen für Textbearbeitung;
• Bilder einfügen(einschließlich Hintergrund);
• Bearbeitung einzelne Seiten u ganze Seiten;
• Erstellen von Formularen und Tabellen;
• Rechtschreibprüfung;
• Wahrscheinlichkeit Site-Veröffentlichungen direkt aus dem Programm;
• eingebauter CSS-Editor und Java-Script-Konsole.

All dies und noch viel mehr ermöglicht es uns, mit minimalen (vorzugsweise) Kenntnissen im Bereich HTML (oder deren völliger Abwesenheit :)) eine kleine Website von Grund auf neu zu erstellen.

Herunterladen ... Installieren ... Starten und Ansehen :) (das ist richtig - keine unnötigen Gesten mit Russifizierung, Eingabe zusätzlicher Informationen usw.). Stimmen Sie zu, eine Verknüpfung auf dem Desktop zu erstellen und damit auszuführen NVU:

NVU-Schnittstelle

Von einem Blick NVU erinnert an einige Texteditor. Dies ist sein Hauptverdienst - visuell GUI. Aber wenn Sie nach unten schauen, werden Sie sehen, dass es neben den üblichen noch einige mehr gibt Anzeigemodi eingegebene Informationen: HTML-Tags, Code und Vorschau.

HTML-Tag-Modus

"HTML-Tags" sind eine Art Mosaik aus Text und Tags, die als farbige Rechtecke gestaltet sind. Dieser Ansichtsmodus ist für unerfahrene Benutzer nützlich, da er alle verwendeten Haupttags anzeigt und sich gleichzeitig nicht um eine große Anzahl von ihnen kümmert, während er derselbe visuelle Editor bleibt. In diesem Modus ist es gut, die Namen von Tags zu lernen, damit Sie sie später problemlos im Codebearbeitungsmodus verwenden können.

Moduscode

Modus "Der Code" ist ein Fenster mit dem HTML-Code der bearbeiteten Seite, das allen Webentwicklern bekannt ist. Von hier aus wachsen alle Ressourcen des Internets aus all diesen Kritzeleien. Nachdem Sie die Codesprache gemeistert haben, können Sie Ihrer Website problemlos alle Steuerelemente, Skripte und andere "Goodies" hinzufügen, die Sie auf den Websites anderer Leute zu bewundern gewohnt sind :).

Vorschau

Und endlich, "Vorschau" ermöglicht es Ihnen, das Ergebnis unserer Bemühungen zu bewerten und die Seite in der Form anzuzeigen, die sie im Internet erhalten wird. Im Screenshot unterscheidet es sich nicht vom Textgegenstück, aber es lohnt sich, Navigationselemente oder Skripte hinzuzufügen, da sich der Unterschied zeigt:

Nachdem nun die Ansichts- und Bearbeitungsoptionen ein wenig geklärt wurden, werfen wir einen tieferen Blick auf die Möglichkeiten. NVU. Interagieren mit dem Programm können Sie verwenden Menüleiste oder verwenden Piktogramme und Symbole darunter.

Versteckte Funktionen des visuellen HTML-Editors von NVU

Alle grundlegenden Formatierungsoptionen sind als Symbole verfügbar, einige Optionen sind jedoch in der Menüleiste versteckt und zeigen sich nicht sofort.

Zum Beispiel im Menü "Datei" Sie werden solche finden Funktionen,, wie:

1. „Adresse im Internet öffnen“. Dank der Engine von Mozilla können Sie Seiten direkt aus dem Internet öffnen und bearbeiten. Dies kann sehr nützlich sein, wenn Sie sehen möchten, wie diese oder jene Funktion für die Site ausgeführt wird. Geben Sie einfach die Adresse in das sich öffnende Fenster ein und bewundern Sie das Ergebnis:

2. „In Textformat exportieren“. Nachdem Sie die Seite bewundert haben, können Sie ihren Quellcode im .txt-Format auf Ihrer Festplatte speichern.

BEI "Bearbeitung" es gibt werkzeuge für Suche die richtigen Wörter im Text und Rechtschreibprüfung.

Auf der Speisekarte "Einfügung" Auf die Möglichkeit kann geachtet werden PHP-Code-Einfügungen und Zeichen, die sich nicht auf der Tastatur befinden.

"Format" bietet die größten Chancen für Einstellungen für die Textansicht, Bilder und andere Informationen. Die interessanteste und vor allem nirgendwo angezeigte Gelegenheit hier ist "Seitenfarbe und Hintergrund". Mit dieser Option können Sie ganz einfach ein beliebiges Hintergrundbild hinzufügen oder einfach die Hintergrundfarbe für die Website festlegen.

Endlich die Speisekarte "Werkzeug" bietet Funktionen wie den Zugriff auf JavaScript-Konsolen, Editor css und Werkzeug für HTML-Validierung Code. Auch von hier aus können Sie zugreifen die Einstellungen Programme u Themen Einstellungen Entwurf NVU.

BEI NVU leicht verständlich, da alle Bedienelemente im Programm mit ausgestattet sind Kurzinfos und Erklärungen, und dank einer Gruppe russischer Entwickler aus Mozilla-Team Es gibt auch eine sehr gute Hilfe auf Russisch. Das einzig Negative NVU Der vom Programm generierte Code ist sehr umständlich und enthält viele zusätzliche Tags. Aber lassen Sie dies nur einen Ansporn für Sie sein, sich mit HTML zu beschäftigen und Ihre Seite zu optimieren und zu perfektionieren.

Viel Glück mit Ihren Entwicklungen und Erfolg bei all Ihren Unternehmungen :)!!!

P.S. Dieser Artikel ist zur kostenlosen Verteilung bestimmt. Es darf gerne unter Wahrung der Urheberschaft kopiert werden Ruslan Tertyschny und alle P.S. und P.P.S.

P.S.S. Sie mögen vielleicht auch einen anderen eher vernünftigen

Ich möchte auch eine gute empfehlen HTML-Buch die ich selbst verwendet habe:

Wlad Merschewitsch

Für effektives Arbeiten können Sie auf die notwendigen und vertrauten Werkzeuge nicht verzichten, auch beim Schreiben von HTML-Code. Daher benötigen wir für die anfängliche Entwicklung von Webseiten oder sogar einer kleinen Website - dies ist der Name einer Reihe von Seiten, die durch Links und ein einziges Design miteinander verbunden sind, die folgenden Programme.

• Texteditor.
• Browser zum Anzeigen der Ergebnisse.
• Validator ist ein Programm zur Überprüfung der HTML-Syntax und zur Erkennung von Fehlern im Code.
• Grafikeditor.
• Verweis auf HTML-Tags.

Texteditor

Ein HTML-Dokument kann in jedem Texteditor erstellt werden, auch Notepad, jedoch ist nicht jedes Programm dafür geeignet. Sie benötigen eine, die die folgenden Funktionen unterstützt:

• Syntaxhervorhebung - Hervorhebung von Tags, Text, Schlüsselwörtern und Parametern in verschiedenen Farben. Das erleichtert das Auffinden des gewünschten Elements, beschleunigt die Arbeit des Entwicklers und reduziert das Auftreten von Fehlern;
• Arbeit mit Tabs. Die Website besteht aus einer Reihe von Dateien, die separat bearbeitet werden müssen, was einen Redakteur erfordert, der gleichzeitig mit mehreren Dokumenten gleichzeitig arbeiten kann. Gleichzeitig ist es bequem, Dateien in separaten Registerkarten zu öffnen, um schnell zum gewünschten Dokument zu navigieren;
• Überprüfung des aktuellen Dokuments auf Fehler.

PSPad

HtmlReader

Notepad++

Plus bearbeiten

Browser

Ein Browser ist ein Programm zum Anzeigen von Webseiten. Zunächst reicht jeder Browser aus, aber mit zunehmender Erfahrung und Kenntnis müssen Sie eine ganze "Menagerie" starten, um die korrekte Anzeige der Website in verschiedenen Browsern zu überprüfen. Tatsache ist, dass jeder Browser seine eigenen einzigartigen Funktionen hat. Um die Universalität des Codes zu überprüfen, müssen Sie den Code überprüfen und anpassen, um sie zu berücksichtigen. Die drei beliebtesten Browser sind heute Firefox, Internet Explorer und Oper.

Mozilla-Firefox

Ein vielversprechender und sich entwickelnder Browser, der weltweit Anerkennung gefunden hat. Sein Merkmal ist Einfachheit und Erweiterbarkeit, die durch spezielle Erweiterungen, wie sie genannt werden, erreicht wird. Anfangs verfügt Firefox nur über eine Reihe von nur den notwendigsten Funktionen, aber durch die Installation der gewünschten Erweiterungen können Sie den Browser schließlich zu einem System ausbauen, das alle Aktionen ausführt, die Sie für Ihre Arbeit benötigen. Der Firefox-Browser ist ein offenes System, das von der Mozilla-Gruppe entwickelt wurde.

Microsoft Internet Explorer (IE)

Einer der ältesten Browser, der kostenlos mit dem Betriebssystem geliefert wird Windows-System. Dies bestimmte seine Popularität. Die IE 7-Version ist ihren alten Konkurrenten in Sachen Komfort näher, insbesondere sind Tabs aufgetaucht. Leider unterstützt dieser Browser die HTML-Spezifikation am schlechtesten, sodass man für eine korrekte Darstellung im IE teilweise den Code speziell dafür separat debuggen muss.

Oper

Ein schneller und bequemer Browser, der viele zusätzliche Funktionen unterstützt, die den Komfort beim Arbeiten mit Websites erhöhen.

Safari

Dieser von Apple entwickelte Browser ist auf Apple-Computern in das iPhone- und macOS-Betriebssystem integriert. Es gibt auch eine Version für Windows.

Google Chrome

Ein Browser, der Ende 2008 auf den Markt kam. Von Google entwickelt.

Prüfer

Die Validierung eines HTML-Dokuments dient dazu, Fehler in der Syntax einer Webseite und Abweichungen von der HTML-Spezifikation zu erkennen. Dementsprechend wird ein Programm oder System für eine solche Überprüfung als Validator bezeichnet.

So prüfen Sie die HTML-Datei auf Gültigkeit

Wenn Sie über einen Internetzugang verfügen, sollten Sie auf http://validator.w3.org gehen und den Pfad zu dem zu prüfenden Dokument oder der Seite in einem speziellen Formular eingeben. Nach der Validierung werden mögliche Fehler angezeigt oder es erscheint ein Hinweis, dass das Dokument erfolgreich validiert wurde.

Ordentlich

Um eine lokale HTML-Datei zu überprüfen oder wenn keine Internetverbindung besteht, ist das Tidy-Programm konzipiert. Einige Editoren, wie z. B. PSPad, enthalten bereits integriertes Tidy, und die Dokumentenvalidierung kann ohne zusätzliche Tools durchgeführt werden.

Grafikeditor

Um Bilder zu bearbeiten und für die Veröffentlichung auf einer Webseite aufzubereiten, wird ein Grafikeditor benötigt. Das beliebteste Programm dieser Art ist Photoshop, das sich zum Standard für die Bearbeitung von Fotos und die Erstellung von Grafiken für Websites entwickelt hat. Aber meistens ist die Leistung von Photoshop übertrieben, und es ist besser, etwas Einfacheres und Flinkeres zu verwenden. Insbesondere das Paint.Net-Programm ermöglicht es Ihnen, alle notwendigen Manipulationen mit Bildern vorzunehmen, außerdem ist es kostenlos zu verwenden.

HTML-Tag-Referenz

Es ist zunächst schwierig, sich alle Tags und ihre Parameter auswendig zu lernen, daher müssen Sie regelmäßig in das Handbuch schauen, um ein bestimmtes Problem zu klären. Generell braucht jeder einen guten Guide, unabhängig vom Ausbildungsstand.

Online-Verzeichnisse

Beschreibung der HTML-Tags (auf Englisch)
http://www.w3.org/TR/html4/index/elements.html

Auf dieser Seite finden Sie auch eine der besten Anleitungen zu Tags in Runet.

NVU ist ein kleines Programm zum Bearbeiten von HTML-Code. Der NVU-HTML-Editor hat eine visuelle Oberfläche und existiert für verschiedene Betriebssysteme. Dieser Code-Editor wurde auf Basis des HTML-Editors Mozilla Composer erstellt, wodurch NVU recht einfach und verständlich ist und in seinen Fähigkeiten dem ursprünglichen Programm bereits weit voraus ist und der Funktionalität von nahe kommt solche bezahlten Redakteure wie Dreamweaver und FrontPage.

Einer der Vorteile dieses Code-Editors ist, dass Sie NVU auf Russisch herunterladen können. Die NVU-Russischseite ist vollständig übersetzt, was es für Benutzer einfacher macht, die damit nicht vertraut sind Englische Sprache. Wenn Sie NVU kostenlos auf Russisch herunterladen, erhalten Sie komfortables Programm um Ihre Seite oder Website in guter Qualität zu erstellen, auch wenn Sie ein absoluter Anfänger sind. Im Editor können Sie Websites erstellen, die alle erforderlichen Internetstandards erfüllen.

Erfahrenere Benutzer können auf Wunsch direkt zur Bearbeitung des Codes übergehen. Darüber hinaus verfügt NVU über weitere Tools wie Site Manager und CSS Editor. Mit ihnen können Sie die Seiten bearbeiten, die eingeschaltet sind entfernter Server, verwenden Sie Syntaxhervorhebung, überprüfen Sie den Code auf Fehler usw. Die Oberfläche des Editors lässt sich durch die Verwendung verschiedener Themen leicht ändern, und die Möglichkeiten lassen sich leicht durch die Installation von Erweiterungen erweitern, die für NVU erstellt wurden.

Sie können alle Funktionen des Editors nutzen, wenn Sie die NVU in wenigen Minuten herunterladen. Dieser HTML-Editor verfügt über Registerkarten, Vorschauen und Zugriff auf die am häufigsten verwendeten Tags, wodurch die Website-Entwicklung viel schneller wird. Es gibt auch viele Optionen zum Ändern von Text: Zentrieren, Schriftart, Stil usw.

Funktionen des NVU-HTML-Editors

• kann unter Windows, Linux, Mac OS X installiert werden;
• Open-Source-Code zum Anzeigen und Ändern verfügbar;
• der Benutzer kann das Programm für seine eigenen Zwecke persönlich modifizieren oder modifizieren;
• die Möglichkeit, HTML- und CSS-Code direkt zu bearbeiten;
• eine kleine Menge an Speicherplatz, die vom Computer belegt wird;
• Elemente haben Eigenschaften, deren Parameter konfigurierbar sind;
• Satzstellung markieren.

Ein visueller HTML-Editor ähnlich Macromedia Dreamweaver, aber völlig kostenlos. Ein großartiges Tool für Anfänger, die gerade erst anfangen, die Wissenschaft der Erstellung von Websites zu beherrschen.

Warum ist er gut? Ja, die Tatsache, dass Sie sich zum Erstellen einer Webseite nicht mit dem Studium von Web-Programmiersprachen beschäftigen müssen. Sie geben einfach Text ein, fügen Bilder oder Animationen ein, und NVU kümmert sich um die ganze "schmutzige" Arbeit, alles in HTML zu formatieren.

Leider wurde die Entwicklung von NVU im Moment ausgesetzt, aber das Projekt ist bis zur ersten stabilen Version gewachsen, und das ist schon eine Menge. Schauen wir es uns genauer an.

NVU-Fähigkeiten

• verschiedene Anzeigemodi der bearbeiteten Seite;
• reichliche Möglichkeiten zur Textgestaltung;
• Einfügen von Bildern (einschließlich Hintergründen);
• die Möglichkeit, an der gesamten Website zu arbeiten und nicht nur an einzelnen Seiten;
• Erstellen von Tabellen und Formularen;
• Veröffentlichung der bearbeiteten Seite direkt vom Herausgeber;
• eigener CSS-Editor (Cascading Style Sheet) und Java-Script-Konsole.

All dies und noch viel mehr ermöglicht es uns, mit minimalen (vorzugsweise) Kenntnissen im Bereich HTML (oder deren völliger Abwesenheit :)) eine kleine Website von Grund auf neu zu erstellen.

Installieren des visuellen Editors

Herunterladen ... Installieren ... Starten und Ansehen :) (das ist richtig - keine unnötigen Gesten mit Russifizierung, Eingabe zusätzlicher Informationen usw.).

Wir stimmen zu, eine Verknüpfung auf dem Desktop zu erstellen und NVU damit zu starten.

NVU-Schnittstelle

Auf den ersten Blick sieht NVU wie eine Art Texteditor aus. Dies ist sein Hauptverdienst - eine visuelle grafische Benutzeroberfläche.

Wenn Sie jedoch nach unten schauen, werden Sie sehen, dass es neben den üblichen noch einige weitere Modi zum Anzeigen der eingegebenen Informationen gibt:

• HTML-Tags;
• und Vorschau.

HTML-Tag-Modus

"HTML-Tags" sind eine Art Mosaik aus Text und Tags, die als farbige Rechtecke gestaltet sind.

Dieser Ansichtsmodus ist für unerfahrene Benutzer nützlich, da er alle verwendeten Haupttags anzeigt und sich gleichzeitig nicht um eine große Anzahl von ihnen kümmert, während er derselbe visuelle Editor bleibt.

Außerdem ist es in diesem Modus praktisch, die Namen von Tags zu studieren, damit Sie sie später problemlos im Codebearbeitungsmodus verwenden können.

Moduscode

Der „Code“-Modus ist ein allen Webentwicklern vertrautes Fenster mit dem HTML-Code der bearbeiteten Seite. Von hier aus, von all diesen Kritzeleien, wachsen alle Ressourcen des Internets.

Nachdem Sie die Codesprache gemeistert haben, können Sie Ihrer Website problemlos alle Steuerelemente, Skripte und andere "Goodies" hinzufügen, die Sie auf den Websites anderer Leute zu bewundern gewohnt sind :).

Vorschau

Und schließlich ermöglicht Ihnen „Vorschau“, das Ergebnis unserer Bemühungen zu bewerten und die Seite in der Form anzuzeigen, die sie im Internet erhalten wird.

Im Screenshot unterscheidet es sich nicht vom Textgegenstück, aber es lohnt sich, Navigationselemente oder Skripte hinzuzufügen, da sich der Unterschied zeigt:

Wenn Sie diese Seite wie ein Hardcore-Programmierer in Notepad bearbeiten, benötigen Sie mindestens einen Browser und einen lokalen Webserver, um sie anzuzeigen.

Und hier, wie sie sagen, bereits "all inclusive".

Nachdem nun die Anzeige- und Bearbeitungsoptionen ein wenig geklärt wurden, werfen wir einen tieferen Blick auf die Möglichkeiten von NVU.

Versteckte Funktionen des visuellen HTML-Editors von NVU

Alle grundlegenden Formatierungsoptionen sind als Symbole verfügbar, einige Optionen sind jedoch in der Menüleiste ausgeblendet.

Im Menü „Datei“ finden Sie beispielsweise Funktionen wie:

1. „Öffnen Sie eine Adresse im Internet.“ Dank der Engine von Mozilla können Sie Seiten direkt aus dem Internet öffnen und bearbeiten.

Dies kann sehr nützlich sein, wenn Sie sehen möchten, wie diese oder jene Funktion für die Site ausgeführt wird. Geben Sie einfach die Adresse in das sich öffnende Fenster ein und bewundern Sie das Ergebnis:

2. „In Textformat exportieren“. Nachdem Sie die Seite bewundert haben, können Sie ihren Quellcode im .txt-Format auf Ihrer Festplatte speichern.

Unter „Bearbeiten“ gibt es Werkzeuge, um im Text nach den richtigen Wörtern zu suchen und die Rechtschreibung zu prüfen.

Im Menü "Einfügen" können Sie auf die Möglichkeit achten, PHP-Code und Zeichen einzufügen, die sich nicht auf der Tastatur befinden.

"Format" bietet eine Vielzahl von Optionen zum Anpassen des Erscheinungsbilds von Text, Bildern und anderen Informationen.

Die interessanteste und vor allem nirgendwo angezeigte Funktion hier ist "Seitenfarbe und Hintergrund". Mit dieser Option können Sie ganz einfach ein beliebiges Hintergrundbild hinzufügen oder einfach eine gute Hintergrundfarbe für die Website auswählen.

Schließlich bietet das Menü „Tools“ Optionen wie den Zugriff auf eine JavaScript-Konsole, einen CSS-Editor und ein HTML-Code-Inspektionstool.

Von hier aus können Sie auch auf die Programmeinstellungen und die NVU-Designeinstellungen zugreifen.

Schlussfolgerungen

NVU ist leicht verständlich, da alle Bedienelemente im Programm mit Tooltips und Erklärungen versehen sind, und dank einer Gruppe russischer Entwickler aus dem Mozilla.ru-Team gibt es auch sehr gute Hilfe auf Russisch.

Der einzige Nachteil von NVU ist, dass der vom Programm generierte Code sehr umständlich ist und viele unnötige Tags enthält. Aber lassen Sie dies nur einen Ansporn für Sie sein, sich mit HTML zu beschäftigen und Ihre Seite zu optimieren und zu perfektionieren.

Viel Glück bei Ihren Entwicklungen und viel Erfolg bei all Ihren Unternehmungen!

P.S. Es ist erlaubt, diesen Artikel frei zu kopieren und zu zitieren, sofern ein offener aktiver Link zur Quelle angegeben und die Urheberschaft von Ruslan Tertyshny gewahrt bleibt.

Wenn es um Code-Editoren geht, ist es manchmal schwierig, einen klaren Überblick über alle Vorteile und Funktionen zu bekommen, die verschiedene Editoren zu bieten haben. Am Ende ist jedoch mindestens einer erforderlich, daher ist es wichtig zu wissen, welcher Editor für Ihre persönlichen Bedürfnisse am besten geeignet ist.

WYSIWYG-Editoren werden oft von Handwerkern für den aufgeblähten, chaotischen und standardinkompatiblen Quellcode kritisiert, den sie produzieren. Allerdings sind WYSIWYG-Editoren in letzter Zeit viel besser geworden. Manchmal müssen Sie Ihren Kunden die einfachsten Tools zum Bearbeiten oder Aktualisieren ihrer Websites zur Verfügung stellen. Und hier sind WYSIWYG-Editoren unverzichtbar.

Es wäre falsch, Ihnen einige der "besten" Editoren zu empfehlen, denn die Wahl hängt immer von Ihren Bedürfnissen, Hauptzielen, Fähigkeiten und Erfahrungen ab. Daher haben wir in diesem Artikel versucht, Ihnen einen Überblick über verschiedene, nützliche und nicht so WYSIWYG-Editoren zu geben.
Wir hoffen, Sie finden neue Editoren, von denen Sie noch nie zuvor gehört haben. Oder vielleicht finden Sie einige Funktionen, die Sie in Ihrem Lieblingseditor vermisst haben, oder wagen es, mit einer Reihe vielversprechender Optionen zu experimentieren, um Ihren Workflow zu verbessern. Außerdem erfahren Sie, welche Editoren Sie verwenden können und welche Tools Sie nicht verwenden sollten.

Was bedeutet das WYSIWYG?
In solchen Editoren können Sie nicht den Quellcode Ihrer Dokumente ändern, sondern dessen Darstellung, die (wenn möglich) im endgültigen Dokument veröffentlicht wird. Anstatt also Codeblöcke von Hand zu schreiben, verwalten Sie das Design mit Komponenten im Editorfenster. Das bedeutet, dass Sie dem Endergebnis sehr ähnlich sehen, obwohl das Dokument oder Bild noch erstellt wird.
Notiz: Dieser Artikel behandelt nur Desktop-basierte WYSIWYG-Editoren, die unter Windows, Linux oder Mac ausgeführt werden. Es bietet keinen Überblick über JavaScript-WYSIWIG-Editoren, aber Sie finden einen ausführlichen Überblick über solche Editoren auf oder .

Adobe Dreamweaver

Dreamweaver (Win/Mac)

Dreamweaver, früher ein Produkt von Macromedia, ist einer der am häufigsten verwendeten Editoren, der Entwicklern helfen kann, ihren Arbeitsablauf zu verbessern und beim Codieren viel Zeit zu sparen. Wenn frühere Versionen von Dreamweaver manchmal bizarren Quellcode generierten, dann letzte Version kann (in den meisten Fällen) perfekt sauberes Markup generieren.

Dreamweaver bietet auch verschiedene nützliche Tools wie Code-Snippet-Bibliotheken, FTP-Verwaltung, Debug-Server und integrierte Codierung. Beispielsweise können Sie CSS-Informationen in einem einzigen, einheitlichen CSS-Bereich anzeigen, wodurch es einfacher wird, auf bestimmte Elemente angewendete Stile anzuzeigen, festzustellen, wo Attribute definiert sind, und vorhandene Stile zu bearbeiten. Siehe auch unsere Liste der Dreamweaver-Tutorials. Preis: 400 $ (CS3-Version).

Einige der vielen Funktionen von Dreamweaver:
* Erweiterte CSS-Bearbeitung
* Integrierte Programmierumgebung
* Spry-Framework für Ajax
* Überprüfen Sie die Browserkompatibilität.
* Integration mit Photoshop CS3 und Fireworks.
* Codeschnipsel (wie CSS-Formate)
* FTP-Verwaltung
* XML-Unterstützung
* FLV-Unterstützung
* Lernressourcen (z. B. Adobe CSS Advisor)
* Zahlreiche Erweiterungen für Dreamweaver.
Amaya
Amaya (Win/Mac/Linux)
Was Amaya wirklich von den anderen unterscheidet, ist, dass es eine Mischung aus einem Webbrowser und einem Webseiten-Editor ist, sodass Sie im Internet surfen und Ihre Seiten in derselben Anwendung bearbeiten können. Dieses von einem WWW-Konsortium entwickelte Tool ermöglicht es Ihnen, Websites zu verwalten, deren Inhalt zu ändern und zu aktualisieren, neue Bilder und Links hinzuzufügen. Natürlich, wenn Amaya diese Seiten anzeigen kann.

Die neueste Version des Editors, Amaja 10, wurde im Februar 2008 veröffentlicht. Es kann mit mehreren Dokumenten gleichzeitig arbeiten ((X)HTML, MathML (. Mml) und SVG (. SVG) Dokumente können gleichzeitig angezeigt und bearbeitet werden). Beispielsweise können Sie mathematische Formeln per Pop-up einfügen: Amaya konvertiert sie per Math-ML on the fly.

Amaya enthält auch eine einheitliche Anmerkungsanwendung (Anmerkungen, externe Kommentare, Anmerkungen, Anmerkungen, die an jedes Webdokument oder einen bestimmten Teil eines Dokuments angehängt werden können) und unterstützt SVG, RDF und XPointer. Open Source.

Schnellweber
RapidWeaver (Mac)
RapidWeaver ist ein leistungsstarkes vorlagenbasiertes Website-Erstellungstool, das alle Arten von Seiten wie Textseiten, Blogs, Kontaktformulare, Bildergalerien und Flash-Diashows generieren kann und über einen integrierten FTP-Manager und Integration mit iPhoto und .Mac verfügt.

Der Editor umfasst Podcasting, Inline-Kommentare, RSS-Feeds, Permalink und Tagging-Unterstützung. RapidWeaver wird auch SEO-freundlich sein. Es hat auch viele leistungsstarke Funktionen wie Themenmodifikation, PHP-Rendering, Mischen und Anpassen von WYSIWYG und HTML, Smart Publishing, XHTML- und CSS-basierte Site-Ausgabe, Quellcode-Browsing, integrierte Fehlerprüfung. Alle Templates basieren auf XHTML und CSS. Bemerkenswert ist das RapidWeaver generiert einen gültigen Code. Preis: 49 $.

Adobe Contribute
Adobe Contribute

Der Hauptzweck von Adobe Contribute besteht darin, Benutzern ohne technische Kenntnisse die Bearbeitung von Websites und Blogs zu ermöglichen. Contribute CS3 ermöglicht es Autoren, vorhandene Websites und Blogs zu aktualisieren und gleichzeitig die Integrität der Website zu wahren. Contribute bietet Dreamweaver-Integration, Hosting mit Microsoft Office und Bearbeitung von IE 7 und Firefox aus.

Mit diesem WYSIWYG-Editor können Autoren jede Website oder jeden Blog bearbeiten oder aktualisieren, ohne HTML lernen zu müssen. Preis: 169 $ (CS3-Version).

Adobe Live
Adobe Golive (Win/Mac)

Im April stellte Adobe die Entwicklung und den Verkauf von GoLive 9 ein. Adobe GoLive ermutigt Benutzer, zu Dreamweaver zu wechseln, danach sollten Sie GoLive (eigentlich ein überraschend leistungsstarkes Bearbeitungstool (siehe unten)) Ihren Kunden wahrscheinlich nicht mehr empfehlen.

Einige Funktionen von Adobe GoLive 9:
* Designer-Stile
* Visuelles CSS-Layout
* Befehl platzieren
*Adobe InDesign®-Integration
* Farbmanagement
*Plattformunterstützung
* Site-Management-Tools
* Veröffentlichungsserver
* Intelligente Objekte

Microsoft Expression Web
Microsoft-Ausdruck (Windows)

Einst heftig kritisiert für seinen wirklich schlechten Web-Editor (Frontpage), hat Microsoft kürzlich einen Editor namens Expression entwickelt, der viel von seinen Vorgängern zu übernehmen scheint. Expression hat versucht, eine komfortable Umgebung für Internetbenutzer zu schaffen, mit Funktionen, die denen von Adobe Dreamweaver sehr ähnlich sind. Im direkten Vergleich bietet Dreamweaver jedoch mehr und produziert saubereren Code. Expression produziert jedoch anständigen, standardkonformen Code und weiß, wie man mit CSS und CSS-Layouts arbeitet.

Studio Edition mit anderen Softwareanwendungen (Grafikdesign-Tool, Video-Encoding-Tool etc.) kostet ca. $500. Eine Expression-Lizenz kostet 350 US-Dollar. Sie können Expression erhalten, indem Sie Frontpage aktualisieren und Geld sparen. Die Testversion für 60 Tage kann kostenlos heruntergeladen werden, eine Registrierung ist jedoch erforderlich.

Bitte beachten Sie: Expression ist kein Nachfolger von Frontpage, es sind vielmehr unterschiedliche Entwicklungswerkzeuge. Microsoft Expression ähnelt eher Microsoft SharePoint Designer, es ist eher ein Designer, der sich auf die allgemeine Webentwicklung konzentriert und darauf abzielt. Microsoft SharePoint Designer konzentriert sich auf die Entwicklung und Anpassung an SharePoint-basierte Websites und kann als der große Bruder von Frontpage betrachtet werden.



Einige Funktionen von Microsoft Expression:
* ASP.NET 2.0-Integration
* Erweitertes CSS-Rendering
* XPath-Ausdrucksgenerator
* Erstellen und formatieren Sie Ansichten von branchenüblichen XML-Daten
* Tag-Eigenschaftsraster
* Zugänglichkeitsprüfung
* Echtzeit-Standardvalidierung
*Volle Schemaunterstützung

NVU (Win/Mac/Linux)

Dieser Editor soll eine echte Alternative zu den dominierenden Produkten sein: ein WYSYWIG-Editor für Linux, Microsoft Windows und Mac, der es mit FrontPage und Dreamweaver aufnehmen könnte. Und in gewisser Weise bietet Nvu mehr, als Sie von völlig kostenloser Software erwarten würden.

Nvu (ausgesprochen N-view, für „neue Ansicht“) bietet einen integrierten FTP-Manager, leistungsstarke Unterstützung für Formulare, Tabellenkalkulationen und Vorlagen und ist wirklich einfach zu bedienen. CaScadeS, ein bekannter CSS-Editor wie Zusatzmodul lässt sich in Nvu integrieren und macht es einfach, Stile zu erstellen und zu verwalten und zu sehen, wie Ihre Stile im Handumdrehen in dem Dokument angewendet werden, das Sie ändern.

Nvu ist Open Source und unter der Mozilla Public License (MPL) veröffentlicht. Leider geht die Entwicklung von NVU nicht weiter den letzten Jahren. Eine verbesserte Version von NVU finden Sie hier - KompoZer.

Einige der NVU-Funktionen:
* Mit Site Manager können Sie die von Ihnen erstellten Sites anzeigen.
* XML-Unterstützung.
* Eingebauter Validator.

Komponist
Kompozer (Win/Mac/Linux)

Dieses Tool ist ein Ableger von NVU, das entwickelt wurde, nachdem sich die Weiterentwicklung von NVU verlangsamt hatte. KompoZer ist ein Web-Autorensystem, das einen Web-Dateimanager und einen WYSIWYG-Editor kombiniert.

KompoZer ist extrem einfach zu bedienen und somit eine geeignete Lösung für Benutzer, die Websites erstellen möchten, ohne sich technische Kenntnisse anzueignen. Im Vergleich zu NVU produziert Kompozer sauberen Markup-Code.

Die neueste Version wurde im August 2007 veröffentlicht. Kompozer kann als Alternative für kleinere Projekte und für Benutzer ohne technische Kenntnisse in Betracht gezogen werden. Aber für professionelle Webentwickler ist es definitiv zu schwach.

Namo WebEditor 2006
Namo WebEditor 2006 (Win)
Namo WebEditor vereint fast alle Tools, die Sie zum Erstellen von Websites benötigen, in einer einfachen und intuitiven Benutzeroberfläche. Die Oberflächenelemente sind äußerst übersichtlich, einfach und leicht zu bedienen. Sie können zwischen Design-Editor, HTML-Browser und Foto-Viewer wechseln. Sie können auch eine Reihe von Assistenten verwenden, um Ihren Workflow zu automatisieren. Namo ist leistungsfähig, aber seine WYSIWYG-Fähigkeiten sind begrenzt. Der Editor wurde seit 2006 nicht mehr aktualisiert, weshalb das Generieren von Quellcode manchmal äußerst seltsam ist. Namo Pro Web Editor wird mit einem Flash-Editor sowie Grafikprogrammen geliefert. Testversion ist verfügbar. Preis: 99,95 $.



Einige Funktionen von Namo Webeditor:
* Code-Helfer für automatisch schließende Tags
*Schneller Tag-Editor
* Tag-Selektor
*HTML/CSS-Referenz

Evrsoft Erste Seite 2006
Evrsoft Erste Seite 2006 (Win)
Tatsächlich wird dieser Editor sehr unterschätzt. Es ist nicht sehr beliebt und wurde seit 2006 nicht aktualisiert, aber es hat viele sehr nützliche Funktionen, die in moderne WYSIWYG-Editoren integriert werden könnten. Beispielsweise merkt sich die Auto-History-Funktion alle verwendeten Attribute und Werte und schlägt automatisch den „richtigen“ Wert vor.

Mit der Dual Preview Engine können Sie Webdokumente mit First Page 2006 in mehreren Browsern anzeigen. Sie können eine Vorschau Ihrer Arbeit in Internet Explorer oder Mozilla anzeigen oder Seiten in beiden Browsern nebeneinander anzeigen (horizontale/vertikale Fenster). Und sehen Sie Code in Echtzeit an und bearbeiten Sie Dokumente.

Die erste Seite ist kostenlos. Eine ähnliche kostenlose Alternative (ebenfalls seit 2005 nicht mehr aktualisiert): Selida HTML Editor.

Einige der Funktionen der ersten Seite:
* CSS-Klassenunterstützung und automatische Erkennung
* Satzstellung markieren
* Tool zur Auswahl von Dokumenten markieren
* Automatische Vervollständigung von Tags
* Ordentliche HTML Power Tools
* Vorschau im IE während der Eingabe
* Image-Mapper
* CSS-Stylesheet-Designer
* Serverseitiger Support
* Hochgradig anpassbare Symbolleisten und Benutzeroberfläche
*FTP-Client
* Erweitertes Suchen und Ersetzen in Dateien

Microsoft SharePoint-Designer
Microsoft SharePoint Designer 2007 (Win)

Es ist der Nachfolger von Microsofts Frontpage. SharePoint Designer ist ein Standard-WYSIWYG-Editor. Abgesehen von der Unterstützung interaktiver ASP.NET-Seiten bietet es nichts Revolutionäres. Kostenlose Testversion verfügbar. Es gibt eine Online-Version, die den Internet Explorer und viel Geduld erfordert.

Einige der Funktionen von Sharepoint:
* Unterstützung für interaktive ASP.NET-Seiten
* Erstellen Sie Datenansichten aus RSS, XML, Office XML
* Arbeiten Sie mit dem integrierten Workflow Designer zusammen
* CSS-Tools
* Verfolgen Sie benutzerdefinierte Seiten
* Rechtschreibprüfung
* SharePoint Server 2007-Integration

NetObjects-Fusion
NetObjects-Fusion
Dieser Editor war einst wahrscheinlich der schlechteste, aber immer noch sehr beliebte WYSIWYG-Editor. Es erzeugte schrecklichen Quellcode (nur MS Word machte es noch schlimmer), wurde aber oft von Webhosting-Unternehmen und -Providern verwendet. Mit NetObjects Fusion können Sie Websites ohne technische Kenntnisse erstellen. Besonders wenn Sie eine Visitenkarte erstellen möchten, können Sie dies in wenigen Minuten erledigen. Wenn Sie jedoch eine professionelle Website erstellen möchten, ist NetObjects keine Option, die eine Überlegung wert ist.

NetObjects Fusion Version 10 ist derzeit verfügbar. Die Qualität des generierten Quellcodes kann sich geändert haben, aber das spielt keine Rolle. Es gibt eine Testversion, für die Sie sich im Store registrieren müssen. Deshalb haben wir keinen Screenshot von diesem Produkt. Preis: ? 100.

QuantaPlus

QuantaPlus (Linux)
Quanta Plus ist eine stabile, sehr benutzerfreundliche und funktionsreiche Webentwicklungsumgebung. Quanta hat einen Editor geschaffen, der auf effiziente und natürliche Entwicklung und maximale Erweiterbarkeit für den Benutzer ausgelegt ist.

Der Editor unterstützt sowohl Handcodierung als auch WYSIWYG-Schnittstelle. Es hat die folgenden Funktionen: automatische Vervollständigung von Tags, wenn Sie Tags innerhalb der Dialogschnittstelle eingeben und bearbeiten, Projektmanagement, die Möglichkeit, PHP-Code zu debuggen. Er hat auch visueller Editor CSS, CSS-Vervollständigung, bietet eine hohe Erweiterbarkeit und Vorschau.

Der Editor hat auch interessante Funktionen für das Projektmanagement, einschließlich der Unterstützung für lokale und entfernte (über das Netzwerk) Projekte. Projekte können von verschiedenen Servern mit unterschiedlichen Protokollen heruntergeladen werden. CVS-Unterstützung enthalten, Subversion-Unterstützung über externe Plugins verfügbar. Quanta basiert auf KDE. Freigegeben unter der GPL-Lizenz.

Autobahn
Autobahn (Mac)

Freeway (ursprünglich Uniqorn) gibt es in zwei Varianten, Freeway Pro und Freeway Express. Freeway 5 Pro kann verwendet werden, um CSS-Layouts mit absoluter Positionierung zu erstellen. In einer erweiterten Version erfolgt beispielsweise die Verbindung zu einer MySQL-Datenbank mit einer Skriptsprache wie PHP über Plugins namens "Actions". Einige Aktionen können kostenlos von mehreren Websites heruntergeladen werden, aber es gibt auch kommerzielle Aktionen wie Aktionen von Drittanbietern.

Es gibt eine Testversion, bei der Sie ein ziemlich langes Webformular ausfüllen müssen. Freeway wurde bei den Macworld 2008 Awards als Creative Web Product of the Year nominiert. Wenn Sie einen Mac verwenden, ist Freeway zusammen mit RapidWeaver die erste Option, die es wert ist, in Betracht gezogen zu werden.

Einige der Freeway-Features:
* Mehrere Masterseiten
* Layout-Tools
* Linkkarte
* Linkstile
* Integrierter .Mac-Upload
*Internet Explorer-Kompatibilität
* Unterstützung für geschnittene Hintergrundbilder
* Integrierte Vorschau in Freeway (Safari/Webkit)
* Vollständiger Import von EPS (Panther und höher), Illustrator, Photoshop-Dateien mit Ebenen
* Autobahnladen
* Arbeiten Sie mit Blogger-Vorlagen

Seamonkey-Komponist
SeaMonkey Composer (Win/Mac/Linux)
Dieser Editor ist eine einfache, aber sehr leistungsfähige Alternative zu großen kommerziellen Anwendungen. Als Nachfolger von Netscape Composer hat SeaMonkey Composer wirklich nichts damit zu tun.

Der Editor ist leistungsstark und dennoch einfach und bietet dynamische Größenanpassung von Bildern und Tabellen, schnelles Einfügen und Löschen aus Tabellenzellen, erweiterte CSS-Unterstützung und Unterstützung für positionierte Ebenen. In SeaMonkey integrierter WYSIWYG-Editor.

Schaffen
Erstellen (Mac)
Create kombiniert die Kernfunktionen von Anwendungen wie Illustrator, InDesign, Pages, GoLive, Canvas, Dreamweaver, QuarkExpress und organisiert sie für eine einfache Verwendung, es ist kostengünstig und für OS X konzipiert. Unter anderem können Sie Links zu Text und Grafiken hinzufügen Mit Drag-n-Drop gibt es ein Tool, das die Navigation und den Index automatisch erstellt, und Sie können PDFs und Websites aus demselben Dokument erstellen.

WYSIWYG-Web-Builder
WYSIWYG-Web-Builder
Web Builder ist eine hochgradig anpassbare und erweiterbare Anwendung mit vielen Funktionen, Skripten und Vorlagen. Neue Gestaltungselemente können per Drag'n'Drop hinzugefügt werden und es stehen viele Skripte zur Verfügung. Es ist möglich, Bilder innerhalb der Software zu bearbeiten.

PayPal eCommerce Tools integriert; Es gibt ein RSS-Feed-Objekt, einen Blog mit eingebautem RSS und einen Google-kompatiblen SiteMap-Generator. Der Editor verfügt außerdem über viele Erweiterungen wie Passwortschutz, RSS-Feed, RSS-Parser, Fotoalbum und Leuchtkästen.

Bei Fragen nutzen Sie bitte unsere