Kompozer . installieren und verwenden

KompoZer-Symbol

Kostenlose Web-Authoring-Software zum Erstellen von Webseiten

KompoZer ist eine Web-Authoring-Software, mit der Sie Webseiten mit WYSIWYG erstellen können.
Auch wenn Sie die Auszeichnungssprache (Computersprache) nicht verstehen, können Sie visuell ähnlich der Bedienung eines Textverarbeitungs- oder Grafikprogramms arbeiten.

Die Entwicklung von KompoZer erreichte nicht die offizielle Veröffentlichung, und die Entwicklung wurde am Ende der Beta-Version 2010 im Jahr 0.83 eingestellt, und ab 2018 ist auch die offizielle Seite geschlossen.
Die unterstützten Sprachen sind HTML 4.0 oder XHTML 1.0, die nicht mit HTML 5 kompatibel sind, das derzeit der Mainstream ist.

KompoZer ist der Nachfolger von Nvu, einer auf Mozilla Composer basierenden Web-Authoring-Software, die eingestellt wurde, und hat auch eine offizielle Version für seine abgeleitete Software von Nvu veröffentlicht. BlueGriffon Es gibt.

BlueGriffon-Symbol

Installieren und Verwenden von BlueGriffon

BlueGriffon, eine WYSIWYG-kompatible Web-Authoring-Software mit kostenlosen Grundfunktionen, ist der Entwickler der Open-Source-Web-Authoring-Software Nvu, Disruptive I […]

System Anforderungen

Letzte Version 0.8β3

Betriebssystem: Windows XP / Vista / 7/8

 Funktioniert unter Windows 10 (32 & 64bit) bestätigt.

Wo bekommt man die Software

SOURCE FORGE – Kompozer Downloadseite

Die offizielle Website ist geschlossen, aber die japanische Version ist von SOURCE FORGE erhältlich.

Kompozer installieren

KompoZer hat Installer für jede Sprache, also besorge dir die japanische Version des Installers.

KompoZer wysiwyg HTML-Editor 002

Klicken Sie auf "KompoZer -0.8b3.ja.win32.exe" von der KompoZer-Seite von SOURCE FORGE, um es herunterzuladen.

KompoZer wysiwyg HTML-Editor-1006

Starten Sie das Installationsprogramm und wenn das Dialogfeld Benutzerkontensteuerung angezeigt wird, klicken Sie auf "Ja", um es zuzulassen.

KompoZer wysiwyg HTML-Editor 003

Der Setup-Assistent wird gestartet, klicken Sie also auf "Weiter".

KompoZer wysiwyg HTML-Editor 004

Die EULA wird angezeigt, überprüfen Sie diese und wenn keine Probleme auftreten, "Zustimmen".

KompoZer wysiwyg HTML-Editor 005

Geben Sie das Installationsziel an.
Wenn Sie sich nicht sicher sind, belassen Sie die Standardeinstellung und klicken Sie auf "Installieren".

KompoZer wysiwyg HTML-Editor 006

Behalten Sie die Standard-Programmgruppenspezifikation bei und klicken Sie auf "Weiter".

KompoZer wysiwyg HTML-Editor 007

Wählen Sie Desktop-Verknüpfung erstellen und Quick Ranch-Verknüpfung.
Deaktivieren Sie das Kontrollkästchen, wenn Sie es nicht benötigen.

KompoZer wysiwyg HTML-Editor 009

Überprüfen Sie das Installationsziel und klicken Sie auf "Installieren", um Kompozer zu installieren.

KompoZer wysiwyg HTML-Editor 010

Die Einrichtung ist abgeschlossen.

So verwenden Sie Kompozer

Obwohl es möglich ist, eine bestimmte Anzahl von Seiten allein durch die Bearbeitung des Designs von KompoZer zu erstellen, gibt es keine Beschreibung von Meta-Tags, so dass es nicht zu leugnen ist, dass eine Hand fehlt und Kenntnisse über Tags nicht wenig erforderlich sind.

In 0.8β3 gibt es ein Problem, dass das h-Attribut und das div-Attribut nicht umgeschaltet werden können, wenn Sie nach dem Wechsel von "Design" zu "Source" zum Design zurückkehren und die Quelle direkt bearbeiten.
Wenn ein Problem auftritt, wird es normalerweise durch Speichern und erneutes Öffnen der Seite oder Neustarten von KompoZer behoben, es wird jedoch empfohlen, eine andere Anwendung wie einen Texteditor zum direkten Bearbeiten der Quelle zu verwenden.

KompoZer wysiwyg HTML-Editor-1007

Wenn KompoZer gestartet wird, blinkt der I-Beam auf einer leeren Seite wie eine Textverarbeitungssoftware.

设定

Sie können Kompozer mit den Standardeinstellungen verwenden, aber überprüfen Sie jedes Element, bevor Sie die Seite erstellen.

KompoZer wysiwyg HTML-Editor-1008

Wählen Sie in der Menüleiste "Extras" -> "Einstellungen".

KompoZer wysiwyg HTML-Editor-1009

Wählen Sie die zu verwendende Sprache aus "Markup Format" in "Details" aus "HTML 4.0" und "XHTML 1.0".

XHTML ist ein neuer Standard basierend auf HTML4.0.
Obwohl XHTML sehr erweiterbar ist, ist die Grammatik schwierig, daher wird HTML4.0 für Anfänger empfohlen.
Da "Strict" der DTD (Document Type Definition) in der Grammatik streng ist und "Transitional" etwas lockerer ist, wählen Sie "Transitional".
Text Eingabe

WYSIWYG WHut You See Is WHut You GEs ist eine Abkürzung von et (get what you see) und es ist möglich, eine WEB-Seite mit einem in einem Browser angezeigten Bild zu erstellen.

KompoZer wysiwyg HTML-Editor-1010

Geben Sie den Text in den rechten Bereich ein.

Sie können den Site-Manager usw. im linken Bereich ausblenden, indem Sie in der Menüleiste "Ansicht" auswählen.

KompoZer wysiwyg HTML-Editor-1011

Wenn Sie unten auf dem Bildschirm auf die Registerkarte "Quelle" wechseln, sind die eingegebenen Zeichen HTML ( HyperText MArkupe LEs wird nach Sprache angezeigt).

WYSIWYG ersetzt automatisch das, was Sie in "sichtbar" arbeiten, durch eine Auszeichnungssprache, die es Ihnen im Extremfall ermöglicht, minimale Seiten zu erstellen, ohne HTML zu verstehen, sondern für die Designbearbeitung von KompoZer. Aufgrund von Einschränkungen ist es notwendig, Tags beim Design entsprechend zu beschreiben zum Bild.

KompoZer wysiwyg HTML-Editor-1012

Um die Datei zu speichern, klicken Sie im oberen Symbolmenü auf "Speichern".

kompozer-1013

Beim Speichern einer neuen Datei erscheint das Eingabedialogfeld für den Seitentitel, geben Sie also einen beliebigen Seitentitel ein.

KompoZer wysiwyg HTML-Editor 019

Der Seitentitel wird im Browser anstelle des Dateinamens oder in den Suchergebnissen von Google oder Yahoo angezeigt.

Wenn Sie nach der Eingabe des Seitentitels auf "OK" klicken, wird die Datei mit demselben Dateinamen wie der Titelname gespeichert, der Titel ändert sich jedoch nicht, selbst wenn Sie den Dateinamen ändern.

Sie können im Titel Doppelbyte-Zeichen wie Kanji und Hiragana verwenden. Achten Sie darauf, für den Dateinamen alphanumerische Einzelbyte-Einzelbytezeichen zu verwenden.Ich tue

KompoZer wysiwyg HTML-Editor 020

Da die erstellte Datei nach Fertigstellung hochgeladen werden muss, sollte die Dateistruktur vorab festgelegt werden.

Mit KompoZer erstellte Dateien und zu verwendende Bilder werden alle in einem Ordner gespeichert, um Verknüpfungen mit "relativen Pfaden" zu erstellen.
Erstellen Sie im Allgemeinen separate Ordner zum Speichern von "erstellten Seiten" und "für Seiten verwendeten Materialien" im "Kategorieordner" der Site und verwenden Sie alphanumerische Zeichen halber Breite für alle Ordnernamen.

Da alle zum Anzeigen der Seite erforderlichen Materialien in den ursprünglichen Ordner (Stammverzeichnis) des Hosts hochgeladen werden, wird die anschließende Verarbeitung sehr kompliziert, wenn die Ordner nicht richtig aufgeteilt sind.

Layouteinstellungen

Nachdem Sie sich einigermaßen für das Bild der Seitengestaltung entschieden haben, legen Sie zunächst das grobe Layout der Seite fest.

Komponist16

Klicken Sie für das Layout im oberen Symbolmenü auf "Tabelle" oder wählen Sie "Tabelle"-> "Einfügen" aus dem Menü.

Kompozer022

Installieren Sie die Tabelle, indem Sie die Anzahl der zu installierenden Zellen angeben.

Sie können später eine Tabelle hinzufügen und eine Tabelle innerhalb der Tabelle erstellen.
Sie können auch Zellen wie Tabellenkalkulationsprogramme wie Excel kombinieren.

Kompozer023

Die Tabelle wird eingefügt.Diese Zelle kann mit dem Mauszeiger beliebig vergrößert oder verkleinert werden.

Kompozer024

Um zu sehen, wie die Zelle in Ihrem Browser aussieht, speichern Sie die Datei und klicken Sie dann auf das Symbol Durchsuchen, um Ihren Browser zu starten.

Kompozer025

Um den Rand und die Ränder der installierten Tabelle festzulegen, doppelklicken Sie auf die Tabelle oder wählen Sie "Tabelle"-> "Tabelleneigenschaften" aus dem Menü.

Der Bildschirm mit den detaillierten Tabelleneinstellungen wird geöffnet, klicken Sie also auf die Registerkarte "Tabelle".
Legen Sie die Rahmendicke, den Zellen-zu-Zellen-Abstand und die Zellen-zu-Zellen-Ränder fest.

Wenn Sie die Zellen im Grundlayout ausblenden möchten, setzen Sie den Rahmen auf „0 Pixel“.
Geben Sie für andere Einstellungen einen beliebigen numerischen Wert ein und geben Sie ihn beim Prüfen des Anzeigeergebnisses an.

Kompozer026

Rand: 0px Zellenabstand: 0px Rand 5px ist der in der obigen Abbildung gezeigte Zustand.

Der Rahmen hat sich von einer durchgezogenen Linie zu einer rot gepunkteten Linie geändert.Wenn Sie diesen Status mit einem Browser überprüfen, werden nur die eingegebenen Zeichen angezeigt.

Kompozer027

Schieben Sie, um die Breite der Zelle anzupassen, oder wählen Sie in den Tabelleneigenschaften die Registerkarte "Zelle" und geben Sie den Teil "Größe" an.

Kompozer028

Wenn Sie einen numerischen Wert angeben, überprüfen Sie unbedingt die angegebene Seite.

Kompozer029

Um Zellen zusammenzuführen, markieren Sie die zu verbindenden Zellen und wählen Sie "Tabelle" -> "Ausgewählte Zellen zusammenführen" oder wählen Sie aus dem Kontextmenü (Rechtsklick-Menü) "Ausgewählte Zellen zusammenführen", wie in einer Tabellenkalkulationssoftware.

Kompozer030

Um eine Tabelle in eine Tabelle einzufügen, klicken Sie auf die entsprechende Zelle und fügen Sie sie auf die gleiche Weise wie beim Erstellen einer normalen Tabelle ein.

In den Eigenschaften der eingefügten Tabelle können Sie auch Rahmen und Ränder festlegen.

Bild hinzufügen

Um ein Bild auf der Seite einzufügen, klicken Sie auf das Bildsymbol im oberen Menü, wo Sie es hinzufügen möchten, und öffnen Sie "Bildeigenschaften".

Kompozer031

Speichern Sie die zu installierende Bilddatei im "pict folder" usw., klicken Sie auf das Ordnersymbol in der "image URL" und wählen Sie das gespeicherte Bild aus.

Stellen Sie zu diesem Zeitpunkt sicher, dass "Relative URL verwenden" aktiviert ist.
Wenn dies nicht aktiviert ist, ist der Pfad absolut und der Link wird beim Hochladen auf den Server unterbrochen.

Geben Sie für den Alternativtext eine Beschreibung des Bildes ein, das in einem Browser angezeigt wird, der das Bild nicht anzeigen kann.

Kompozer032

Die Größe des zu platzierenden Bildes kann auf der Registerkarte "Größe" der "Bildeigenschaften" beliebig vergrößert oder verkleinert werden.

Zum Vergrößern / Verkleinern aktivieren Sie "Benutzerdefiniert" und geben Sie eine beliebige Größe ein.

Kompozer034

Der Textumbruch für das Bild wird unter "Textausrichtung für das Bild" auf der Registerkarte "Anzeige" der "Bildeigenschaften" festgelegt.

Wenn Sie das Textlayout auf "nach links umbrechen" einstellen, wird der Text zur linken Seite des Bildes umgebrochen.
Wenn dies auf "Nach unten ausrichten" eingestellt ist, wird der Text nicht an der Stelle eingefügt, an der das Bild platziert wird, und der Text befindet sich unter dem Bild.

Wenn Sie dem Bild einen Rand oder eine Kontur hinzufügen möchten, geben Sie einen beliebigen Wert im Punkt "Rand" ein.
Linke und rechte Ränder (HSPACE) sowie obere und untere Ränder (VSPACE) sind jedoch veraltete Einstellungen in HTML 4.01 und es wird empfohlen, Stylesheets zu verwenden.

Kompozer035

Um einen Link in ein Bild einzubetten, geben Sie die URL des Linkziels auf der Registerkarte "Linkziel" ein.

Geben Sie bei einem externen Link die URL der entsprechenden Seite und bei einem internen Link das Linkziel mit einem relativen Pfad wie beim Einfügen eines Bildes an.

Linkeinstellungen

Das Festlegen des Links entspricht genau dem Hinzufügen eines Links zum Bild. Geben Sie einfach die URL des Linkziels auf dem Linkeigenschaftenbildschirm an.

Kompozer036

Um einen Link in einen Satz zu setzen, wählen Sie die Zielzeichenfolge aus und klicken Sie auf das Link-Symbol oder wählen Sie "Link erstellen" aus dem Kontextmenü.

Kompozer037

Klicken Sie für interne Links (andere Seiten) auf das Ordnersymbol und geben Sie die entsprechende Seite an, und der Link wird automatisch mit einer relativen URL erstellt.

Um "Link in einem neuen Fenster zu öffnen", aktivieren Sie "Link öffnen" im Punkt "Link-Ziel", wählen Sie "In einem neuen Fenster öffnen" und klicken Sie auf "OK".

Kompozer038

Verwenden Sie "Anker" für Links innerhalb derselben Seite.
Wenn Sie auf den Link klicken, wird der verankerte Text oder das Bild oben im Browser angezeigt.

Wählen Sie bei einer Zeichenkette die Zeichenkette aus, für die Sie einen Anker setzen möchten, und klicken Sie bei einem Bild auf das Ikari-Symbol in der Symbolleiste mit angeklicktem Zielbild, um die "Named Anchor Properties" zu öffnen. Geben Sie alphanumerische Zeichen halber Breite ein.
Bei der Installation mehrerer Anker dürfen die Ankernamen natürlich nicht dupliziert werden.

Kompozer039

Wenn der Anker installiert ist, wird die Ankermarkierung an der installierten Stelle angezeigt, wie im roten Rahmen in der linken Abbildung dargestellt.

Kompozer040

Für den Link zu dem Ort, an dem der Anker installiert ist, klicken Sie wie bei einem normalen Link auf das Link-Symbol, öffnen Sie "Linkeigenschaften" für eine Zeichenfolge, "Bildeigenschaften" für ein Bild und klicken Sie auf ▼ im roten Rahmen in der linken Abbildung Klicken Sie auf , um die auf der Seite installierten Anker anzuzeigen.

Wenn es sich auf derselben Seite befindet, lautet der Link "#Ankername".
Darüber hinaus können Links zu Ankern, die von anderen Seiten installiert wurden, erstellt werden, indem "#ankername" nach dem Link zur normalen Seite hinzugefügt wird.

Text- und Hintergrunddekoration

Die Hintergrundfarbe und die Zeichenplatzierung von Zellen in der Tabelle werden über "Tabelleneigenschaften" vorgenommen.

Kompozer041

Unter "Inhaltsanordnung" können Sie Zeichen und Bilder in "Vertikaler Richtung", "Oben / Mitte / Unten" auswählen und in "Horizontaler Richtung" können Sie "Rechts / Mitte / Links" auswählen. Wählen Sie eine Anordnung aus.

Kompozer042

Wenn Sie statt der Zellenhintergrundfarbe den Seitenhintergrund selbst bearbeiten möchten, legen Sie das Hintergrundbild und das Farbschema im Menü "Format"-> "Seitenfarbschema und Hintergrund" fest.

Stylesheet

Standardmäßig ist die Schriftgröße von "Überschrift 1" bei den Zeichenattributen am größten, diese können aber im Stylesheet (CSS) frei verändert werden.

Kompozer043

Um die Zeichenattribute zu ändern, wählen Sie aus dem Pulldown-Menü in der Symbolleiste aus, aber die Überschrift bestimmt nicht nur den Stil des Zeichens, sondern drückt die Bedeutung jedes einzelnen aus, z Grundsätzlich ist die Syntax, in der Überschrift 3 nach Überschrift 2 folgt, falsch.

Kompozer044

Ein Stylesheet definiert buchstäblich "Stil" wie Schriftgröße und -farbe, Kursivschrift, Fettdruck, Hintergrundfarbe und Hintergrundbild. Wenn Sie beispielsweise ein <p>-Tag definieren, das einen Absatz im Stylesheet bedeutet,Alle von den Tags verwendeten Teile haben den gleichen Stil, was der Seitenstruktur ein Gefühl von Einheit verleiht.

KompoZer implementiert einen CSS-Editor, daher ist es am einfachsten, das Stylesheet im CSS-Editor einzustellen.
Klicken Sie auf das "CSS"-Symbol, um den CSS-Editor zu öffnen. Erstellen Sie eine neue Stilregel, aktivieren Sie "Stil wird auf alle Elemente des angegebenen Typs angewendet" und definieren Sie ihn aus dem Listenfeld im roten Rahmen unten in der linken Abbildung. Nachdem Sie das gewünschte Tag ausgewählt haben, klicken Sie auf "Stilregel erstellen".

Kompozer045

Der Stil wird durch Umschalten der Menüregisterkarte festgelegt.

Auf der Registerkarte "Text" können Sie Schriftart und -größe, Dekoration, Zeilenabstand, Textfarbe usw. einstellen.Die Registerkarte Hintergrund legt buchstäblich die Hintergrundfarbe und das Bild der Schriftart fest.Auf der Registerkarte „Rahmen“ wird der in der Schriftart festgelegte Rahmen angezeigt, und Sie können das Erscheinungsbild der Zeichen festlegen, die in Textverarbeitungs- und Tabellenkalkulationsprogrammen verwendet werden.

Klicken Sie nach dem Einstellen des Stils auf "OK", um den CSS-Editor zu verlassen.

Kompozer046

Wenn Sie mit dem CSS-Editor erneut eine Stilregel für ein anderes Element erstellen möchten, klicken Sie in der obigen Abbildung auf den roten Rahmen, um zum Bildschirm zum Erstellen einer neuen Stilregel zu wechseln.

Außerdem ist dieses Stylesheet ein "internes Stylesheet", und alle Regeln des erstellten Styles sind auf der Seite beschrieben, sodass der Style nicht auf anderen Seiten widergespiegelt wird.
Um den eingestellten Stil auf anderen Seiten widerzuspiegeln, können Sie ganz einfach das gleiche Erscheinungsbild auf allen Seiten erreichen, indem Sie den Stil nach außen ausgeben und die Einstellung auf die Seite laden.

Kompozer047

Um die im internen Stylesheet festgelegten Regeln nach außen auszugeben, starten Sie den CSS-Editor und klicken Sie auf "Stylesheet nach außen ausgeben ...".

Geben Sie das Speicherziel an und speichern Sie die Datei unter einem Namen in alphanumerischen Zeichen halber Breite.
Speichern Sie es natürlich im selben Ordner wie die Seite oder das Bild.

Kompozer048

Wählen Sie "Neues Linkelement", um das externe Ausgabe-Stylesheet auf einer neuen Seite zu laden.

Kompozer049

Klicken Sie auf "Auswählen" und geben Sie das Ausgabe-Stylesheet an. Der Pfad des Stylesheets wird im URL-Feld angezeigt, Sie müssen also nur noch auf "Stylesheet erstellen" klicken.

Wenn das externe Stylesheet korrekt geladen ist, wird der Dateiname des externen Stylesheets unter dem undefinierten "internen Stylesheet" angezeigt und der Stil wird auf die Seite angewendet.

In Verbindung stehende Artikel

BlueGriffon-Symbol

Installieren und Verwenden von BlueGriffon

BlueGriffon, eine WYSIWYG-kompatible Web-Authoring-Software mit kostenlosen Grundfunktionen, ist der Entwickler der Open-Source-Web-Authoring-Software Nvu, Disruptive I […]

KompoZer-Symbol

Kompozer . installieren und verwenden

Kostenlose Web-Authoring-Software zum Erstellen von Webseiten KompoZer ist eine Web-Authoring-Software, mit der Sie Webseiten mit WYSIWYG erstellen können.Auszeichnungssprache (Compi […]