Visueller HTML-Editor. Visueller HTML-Editor

Visuelles HTML- ein 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, all dies in HTML zu dekorieren.

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 ähnelt NVU einigen Texteditor. Dies ist sein Hauptverdienst - visuell GUI.

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 Hilfestellungen 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.

NVU ist ein kleines Programm zum Bearbeiten von HTML-Code. HTML-Editor NVU hat eine visuelle Schnittstelle 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.

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 in das iPhone integriert und Betriebssystem MacOS auf Apple-Computern. 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.

Ein visueller HTML-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 sieht aus wie eine Art Texteditor. Dies ist sein Hauptverdienst - eine visuelle grafische Benutzeroberfläche. 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, aber einige Optionen sind in der Menüleiste ausgeblendet und werden nicht sofort angezeigt.

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: