Installieren und Verwenden von BlueGriffon

WYSIWYG-kompatible Web-Authoring-Software, mit der Sie grundlegende Funktionen kostenlos nutzen können

BlueGriffon Ist eine Open-Source-Web-Authoring-Software Nvu Entwickler von Daniel GratzmannHerr (Disruptive Innovations SAS ) Basierend auf Mozilla Composer entwickelt von WYSIWYG Es handelt sich um eine kompatible Web-Authoring-Software, bei der grundlegende Teile wie HTML5 und CSS kostenlos verfügbar sind und Funktionen wie Vorlagen und responsives Design gegen eine Gebühr (75 Euro) verfügbar sind.

WYSIWYG

WYSIWYG steht für What You See Is What You Get, und Sie können das fertige Bild bearbeiten, um eine Webseite wie Textverarbeitungssoftware oder Grafiksoftware zu erstellen.

Nvu Wurde 2006 eingestellt und ist eine freie Software, die den Nvu-Code erbt. Kompozer Hat die Entwicklung am Ende der 2010 veröffentlichten Beta-Version 0.83 eingestellt.

System Anforderungen

Version 3. 1 ab

Betriebssystem: Windows 7/8/10 (64bit)

3.1-Bit-Windows wird seit Version 32 nicht mehr unterstützt.

Wo bekommt man die Software

Download-Seite der offiziellen BlueGriffon-Website

Installieren Sie BlueGriffon

Das BlueGriffon-Installationsprogramm enthält keine Adware oder Spyware.

Von der Download-Seite Windows 7, 8, 10 Klicken Sie hier, um das Installationsprogramm herunterzuladen.

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

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

Wenn Sie das Installationsziel nicht genau kennen, ist die Standardeinstellung "Weiter".

Die Standardeinstellung für die Registrierung im Startmenü ist "Weiter".

Wenn Sie es nicht zum Startmenü hinzufügen möchten Erstellen Sie keinen Startmenüordner Aktivieren Sie das Kontrollkästchen.

Wenn Sie ein Verknüpfungssymbol auf dem Desktop erstellen möchten, aktivieren Sie es und klicken Sie auf "Weiter".

Überprüfen Sie den Inhalt der Installation und klicken Sie auf „Installieren“, wenn kein Problem vorliegt.

Mit „Fertig stellen“ wird die Einrichtung abgeschlossen.

Beim ersten Start wird eine Übersicht über die installierte Version angezeigt, klicken Sie also auf "OK", um sie zu schließen.

So verwenden Sie BlueGriffon

BlueGriffon unterstützt WYSIWYG, aber Sie müssen CSS und HTML kennen, da es viele Designeinschränkungen gibt, wenn Sie den Code nicht bearbeiten.

HTML – HyperText-Auszeichnungssprache

Eine Auszeichnungssprache zum Anzeigen von Text, Bildern usw. in einem Webbrowser und deren Verknüpfung mit Links.
Wenn Sie in BlueGriffon Text wie Textverarbeitungssoftware eingeben, wird er in HTML geschrieben.

CSS – Cascading Stylesheets

Beschrieben in "Stylesheet-Sprache" in den Spezifikationen, die das Design der Webseite vorgeben.
BlueGriffon erstellt automatisch CSS, wenn Sie den Text formatieren, aber das Bearbeiten des CSS erweitert Ihr Design erheblich.

Relative und absolute Pfade

Der relative Pfad gibt die Position des Linkziels ausgehend von der aktuellen Position an, und der absolute Pfad gibt die URL von oben an.
Beim Einfügen eines Bildes oder Erstellen eines Links mit BlueGriffon wird es mit "relativer Pfad" beschrieben.

Speicherort der Datei

Wenn die Webseite fertig ist, werden das für die Anzeige der Seite erforderliche Material und alle erstellten Webseiten in den ursprünglichen Ordner (Stammverzeichnis) des Hosts (Webservers) hochgeladen. Erstellen Sie die Seite also so, dass der relative Pfadlink nicht angezeigt wird Die Ordnerunterteilung ist zuvor erforderlich, und alle Dateien in den Ordnern und Dateinamen in Unterordnern verwenden alphanumerische Zeichen halber Breite.

Erstelle neu

Legen Sie die Auszeichnungssprache und die Metainformationen fest, die beim Erstellen einer neuen Seite verwendet werden sollen.

Um eine neue Seite zu erstellen, klicken Sie auf in der Menüleiste. ファイル から Erstelle neu か Neuer Zauberer wählen.

Neuer Zaubererkann verwendet werden, um grundlegende Seiteneinstellungen zu konfigurieren.

Neuer Zauberer Wenn Sie auswählen, wird der Einstellungsbildschirm für die Auszeichnungssprache angezeigt, also die derzeit empfohlene HTML5 Wählen Sie "Weiter".

In den Dokumenteigenschaften Meta-Element Geben Sie jedes Element ein, das wird.

Titel: Der Titel der Seite, wie er in Browser-Tabs und Suchergebnissen angezeigt wird.
Autor: Der Autor der Seite
Beschreibung: Eine detaillierte Beschreibung der Seite
Schlüsselwörter: Geben Sie Schlüsselwörter ein, die sich auf die Seite beziehen (trennen Sie Schlüsselwörter mit Kommas (,))
Sprache: Wählen Sie Japanisch aus der Sprachauswahl.
Zeichensatz: Unicode (UTF-8)
Linienrichtung: nicht angegeben

Reihenrichtung Wird nicht vollständig angezeigt, aber die Standardeinstellungen sind in Ordnung.

Geben Sie die Textfarbe und das Link-Farbschema an.

Wenn du dich ändern willst Geben Sie die Farbe an Aktivieren Sie das Kontrollkästchen und wählen Sie eine beliebige Farbe aus.

Um ein Bild im Hintergrund anzuzeigen, klicken Sie auf das Ordnersymbol und geben Sie eine beliebige Bilddatei an.Wenn Sie das Hintergrundbild nicht benötigen, lassen Sie es deaktiviert und klicken Sie auf "Weiter".

Das eingestellte Hintergrundbild ist Der Titel で Andere (Single) ·Horizontal (nebeneinander) ・Vertikal (vertikale Anordnung) ・Beide Geben Sie die Platzierung von (Gesamt) an.
scrollen Wählen Sie nun aus, ob der angegebene Hintergrund beim Scrollen verschoben oder fixiert bleiben soll.

Im Seitenlayout können Sie die Seitenbreite und Seitenleiste festlegen, 追加 Fügen Sie ein beliebiges Layout aus der Liste hinzu und klicken Sie auf „Fertig stellen“, wenn die Einstellung abgeschlossen ist.

Wenn das Layout nicht entschieden wurde 1 Reihe, 100 % Hinzufügen.

Wenn Sie die Breite der Seite festlegen möchten Breite Wenn Sie eine Seitenleiste erstellen möchten, wählen Sie aus der Dropdown-Liste von Sidebar Wählen Sie eine Position und Größe aus der Dropdown-Liste aus.

Eine neue Seite mit Beispieltext wird angezeigt.

Nach dem Erstellen einer neuen Seite in der Menüleiste ファイル から保存 Wählen Sie aus, um die Datei zu speichern.

Verwenden Sie beim Speichern unbedingt alphanumerische Zeichen halber Breite für den Dateinamen.

Formatierung – CSS bearbeiten

Die kostenlose Version von BlueGriffon enthält keinen CSS-Editor, wenn Sie also CSS direkt bearbeiten möchten Quelle Nehmen Sie Korrekturen vor.

In der Menüleiste パネル から Stileigenschaften Aktivieren Sie das Kontrollkästchen.

Auf der rechten Seitenleiste Stileigenschaften Wird angezeigt.

Stileigenschaften Dient zur Bearbeitung des Seitendesigns, wobei neben der Textdekoration auch Detaileinstellungen wie Bilder, Hintergrundfarben und Tabellen vorgenommen und einfache Effekte beim Mouseover hinzugefügt werden können.

Stileigenschaften Sie müssen die ID und die Klasse beim Formatieren mit festlegen, aber BlueGriffon implementiert die automatische Einstellungsfunktion.

Zum Aktivieren der automatischen ID- und Klasseneinstellungen in der Menüleiste Das Werkzeug から オオショョ Öffnen undDer Stil の So bearbeiten Sie CSS で Automatisch Aktivieren Sie das Kontrollkästchen.

Es wird empfohlen, es für Anfänger zu aktivieren, die die ID oder Klasse nicht kennen.

Nach Auswahl des Bereichs, um das Format anzuwenden Stileigenschaften Stellen Sie mit ein.

Schriftarteinstellungen

Schriftgröße, Zeichenausrichtung, Dekoration, Zeilenhöhe etc. 一般 Stellen Sie im Element von ein.

Es kann mit dem gleichen Bedienungsgefühl wie MS Word eingestellt werden.

Ränder, Polsterung etc. ALLE IMMOBILIEN ANZEIGEN Er kann mit eingestellt und durch Doppelklicken auf den Zahlenwert des entsprechenden Elements bearbeitet werden.

Zeichendekoration, Liste mit Symbolen, Zeichenausrichtung usw. können auch auf der Symbolleiste auf der linken Seite eingestellt werden.

Vordergrundfarbe / Hintergrundfarbe

Ändern der Text- und Hintergrundfarbe des Seitenkopfs und -körpers Stileigenschaften の色 Mach es mit.

Der Vordergrund ist Buchstabenfarbe Neben der Hintergrundfarbe können Sie auch ein Bild als Hintergrund festlegen oder einen Farbverlauf als Hintergrundfarbe verwenden.

Bei Verwendung von Gradation Hintergrundbild Klicken Sie auf "+" Linear または Radial wählen.

Schweben

Der Float verschiebt das angegebene Bild und andere Elemente nach links und rechts, und der Inhalt ist fortlaufend. Umwickeln In den Einstellungen wurde es häufig verwendet, als Websites auf einem Personal Computer durchsucht wurden.

Spezifizieren Lage und Anordnung Im Artikel von schweben Wählen Sie das Symbol mit aus.

Wenn der Float nach links gesetzt wird, bewegt sich das Bild nach links und der Text wird rechts vom Bild umbrochen.

Direktbearbeitung

Wenn CSS geschrieben werden kann, legen Sie es nicht in der style-Eigenschaft fest Quelle Kann direkt bearbeitet werden.

Anzeige Vorschau から Quelle Wechseln Sie zum CSS und bearbeiten Sie es.

Inhalte erstellen

Die Inhaltserstellung erfolgt mit MS Word oder LibreOffice Es kann mit dem gleichen Bedienungsgefühl wie Textverarbeitungssoftware wie Writer erstellt werden.

見見出

Im Titelteil der Seite Überschrift 1 , Der Untertitel ist Überschrift 2 Bei Schlüsselwörtern, die den Inhalt der Seite darstellen, wie z 見見出 Benutzen.

Überschriften- und Absatzeinstellungen befinden sich oben links Formatauswahl Wählen Sie aus der Dropdown-Liste aus.

Das Überschriftenformat ist Stileigenschaften Set mit.

Bild einfügen

Da es beim Einfügen eines Bildes nach dem Platzieren kein Einstellungselement für Bildgröße und Rand gibt ALLE IMMOBILIEN ANZEIGEN Muss eingestellt werden.

Vom Werkzeugsymbol 画像 Klicken Sie auf oder in der Menüleiste Einfügung から画像 wählen.

Bildort Klicken Sie auf das Ordnersymbol, geben Sie das einzufügende Bild an undMachen Sie die URL relativ zur Seite Aktivieren Sie das Kontrollkästchen,Der Titel と Alternative Zeichenfolge Enter (alt-Attribut).

Wenn Sie einen Rand um das Bild hinzufügen möchten, lassen Sie das Bild ausgewählt. ALLE IMMOBILIEN ANZEIGEN Erweitern Sie und klicken Sie auf "+" Marge Hinzufügen.

Wenn Sie die Größe des eingefügten Bildes ändern möchten ALLE IMMOBILIEN ANZEIGEN に Breite Und geben Sie eine beliebige Breite an.

Video einfügen

Wenn Sie eine Videodatei direkt einfügen, speichern Sie sie in einem Ordner als Material wie ein Bild.

Wenn die Videodatei die hochzuladende Dateigröße überschreitet, laden Sie sie auf YouTube usw. hoch und fügen Sie dann den Einbettungscode zur Quelle hinzu.

Vom Werkzeugsymbol Video Klicken Sie auf oder in der Menüleiste Einfügung から Video wählen.

Speicherort der Videodatei Geben Sie das einzufügende Video an.

Breite Nach Eingabe der Größe des Players zum Einfügen in die Seite mitVideosteuerung anzeigen Aktivieren Sie das Kontrollkästchen und optional automatisches Abspielen·Wiederholung Aktivieren und mit „OK“ bestätigen.

Videosteuerung anzeigen Wenn Sie deaktivieren, wird das Video nicht angezeigt.

Link einfügen

Einige Links bewegen sich innerhalb der Website und andere außerhalb der Website, im Grunde genommen Links innerhalb der Website Relativer Pfad Verwenden Sie und Links außerhalb der Website Absoluter Pfad Benutzen.

Wenn die Zeichenfolge oder das Bild, zu dem Sie einen Link hinzufügen möchten, ausgewählt ist, wird das Werkzeugsymbol angezeigt リンク Klicken Sie auf oder in der Menüleiste Einfügung から リンク wählen.

Ziel Im Teil der Link-Ziel-URL und Der Titel Eingeben.

Wenn Sie zu einer anderen Seite der Website wechseln möchten Machen Sie die URL relativ zur Seite Aktivieren Sie das Kontrollkästchen.

Wo der Link zu öffnen ist では Aktuelles Fenster·Neues Fenster usw. können ausgewählt werden.

Anker

Anker Macht eine Markierung an einer Stelle, an der es keine URL gibt, z. B. auf derselben Seite.見見出 Und so weiter ID festlegenUnd erschaffe es.

Wählen Sie den Text aus, dem Sie einen Anker hinzufügen möchten, und wählen Sie das Werkzeugsymbol aus Anker Klicken Sie auf oder in der Menüleiste Einfügung から Anker wählen.

Ankername Geben Sie eine beliebige Zeichenfolge in alphanumerischen Zeichen halber Breite ein und klicken Sie auf „OK“.

Wählen Sie einen beliebigen Text für den auf der Seite erstellten Anker aus リンク Erstellen und Ziel に # (ID festlegen ) erstellt werden.

Zum Wechseln zu einem Anker auf einer anderen Seite nach der Seiten-URL # Anker-ID Hinzufügen.

Bestätigung mit einem Browser

Wenn die Seite einigermaßen erstellt ist, überprüfen Sie die Anzeige mit einem Browser.

Wählen Sie "Browser" aus dem Werkzeugsymbol.

Derzeit sind Chromium-Serien wie Chrome / Edge / Brave / Vivaldi und Firefox der Mainstream, also überprüfen Sie mit beiden Browsern.

Ausführbarer Speicherort

Google Chrome
C: \ Programme \ Google \ Chrome \ Application
Firefox
C: \ Programme \ Mozilla Firefox
Microsoft Edge
C:\Programme (x86)\Microsoft\Edge\Anwendung

Probleme beim Start

エラーメッセージ XML-Parsing-Fehler: Es wird eine undefinierte Realität verwendet. angezeigt wird und BlueGriffon nicht startet, wird das BlueGriffon-Profil gespeichert. Disruptive Innovations SARL Dies kann durch Löschen des Ordners vermieden werden.

Disruptive Innovations SARL Ist ein versteckter Ordner Roaming Weil es in einem Ordner istLaufMit (Win + R-Taste) % Appdata% Um den Ordner zu öffnen.

C: \ Benutzer \ (Benutzername) \ AppData \ Roaming \ Disruptive Innovations SARL \ BlueGriffon

Nach dem Beenden von BlueGriffon aus dem Roaming-Ordner Disruptive Innovations SARL Löschen Sie den Ordner.

Disruptive Innovations SARL Wird beim Start von BlueGriffon automatisch generiert. Wenn Sie BlueGriffon also erneut starten, dauert der Start länger als gewöhnlich.

Wenn BlueGriffon nach einer Weile nicht startet, versuchen Sie es erneut.

In Verbindung stehende Artikel