Springe zum Inhalt

Erweiterung der Fähigkeiten von Mobirise HTML Website Builder mit dem Code Editor

Kürzlich habe ich eine einfache, mobilfreundliche HTML-Website für einen Freund erstellt, der ein Bauunternehmen betreibt. Er bat darum, auf seiner Website und seinen Werbematerialien alle Dienstleistungen aufzulisten, die sein Unternehmen anbietet. Wir begannen also mit kleinen und kosmetischen Reparaturen, gingen durch Einfamilienhäuser und beendeten die Liste mit Wohn- und Industriekomplexen. Ich dachte mir, dass ich mit diesem Artikel beginne, nachdem ich zwei Tage lang mit dem mächtigsten Werkzeug des Mobirise HTML5 Website Builders herumgespielt hatte - dem HTML/CSS Code Editor.

Wie Sie sich vielleicht aus meinen früheren Artikeln erinnern, bin ich eher ein Illustrator- und Photoshop-Typ, und die Erstellung von Websites war für mich eine Notwendigkeit, um die Wünsche meiner Kunden zu erfüllen. Ich begann zunächst mit WordPress und entdeckte erst kürzlich die Existenz dieses wunderbaren Stücks Software - den Mobirise HTML Bootstrap Builder. Die Art und Weise, wie Websites erstellt werden können, erschien mir einfach natürlich und richtig. Also beschloss ich, dieses großartige Tool in meine tägliche Arbeit zu integrieren.

Vorgefertigte HTML-Codes und Tipps, die Ihnen das Leben weiter erleichtern
Im Laufe der Zeit habe ich die großartigen Möglichkeiten des Mobirise HTML5 Builders oft genossen und dabei einige kleine Lücken bemerkt, die ich einfach nicht füllen konnte und die ich überwinden musste, indem ich meine Vision änderte oder einen Kompromiss einging. Kleine Lücken in der Tat, aber da ich dem Motto folge: Wenn es sich lohnt, etwas zu tun - dann lohnt es sich, es so zu tun, wie es sein sollte, fragte ich mich.

Wie viel Programmierkenntnisse sind erforderlich, um dieses Tutorial zu nutzen?
Um die vorgefertigten HTML-Codes zu verwenden, die hier angegeben sind, fast keine. Alles, was Sie brauchen, ist das Kopieren/Einfügen an den richtigen Stellen und das Ändern einiger Werte, um sie an die Vision Ihrer Website anzupassen - hauptsächlich Farben und Schriftarten. Die genauen Stellen, an denen Sie Ihre Änderungen vornehmen sollten, sind in den Kommentaren innerhalb des Codes gut beschrieben, damit Sie sie leicht finden können.

Überblick

Um zu lernen, wie man eine Webseite mit HTML und CSS erstellt, sollten wir uns die Oberfläche des Code-Editors genauer ansehen. Wie alles in Mobirise ist sie ganz natürlich und intuitiv. Sie rufen ihn auf, indem Sie auf das blaue </>-Symbol klicken, das erscheint, wenn Sie mit der Maus über einen bereits eingefügten Block in Ihrem Mobirise-Projekt fahren. Im Code-Editor haben Sie zwei Möglichkeiten - Sie können das Erscheinungsbild mit zusätzlichen CSS-Deklarationen gestalten oder sowohl CSS als auch benutzerdefiniertes HTML hinzufügen, wobei Sie allerdings die Funktion zur Bearbeitung der Blockparameter verlieren.

Sie entscheiden auch, wie der Code-Editor aussehen soll. Wenn Sie in den App-Einstellungen auf Konto gehen, finden Sie die Option, eines von 3 Themes für Ihren Code-Editor auszuwählen, das Ihnen am besten gefällt.

Für die Themen M4 (Bootstrap 4-basiert) und AMP (Accelerated Mobile Pages) gibt es nur einen Vollbildmodus, so dass Sie HTML und CSS bequem bearbeiten können. Um die Änderungen zu überprüfen, müssen Sie normalerweise auf die blaue, augenähnliche Schaltfläche in der unteren rechten Ecke des Code-Editors klicken. Bei diesen Themes müssen Sie die Änderungen nur anwenden und sehen sie direkt in der App. Sie können sowohl im Code-Editor als auch in der App immer alles rückgängig machen und wiederherstellen, wenn Änderungen vorgenommen wurden.

Mein Rat ist - nutzen Sie die Möglichkeiten der leistungsstarken Software voll aus - lassen Sie sie die meiste Arbeit machen und lernen Sie schnell, wie man eine Website mit HTML und CSS erstellt. Wählen Sie einen Block aus, der dem von Ihnen angestrebten Erscheinungsbild am nächsten kommt, und passen Sie ihn mit Hilfe der Blockparameter und CSS-Deklarationen so weit wie möglich an. Drücken Sie dann auf , um den HTML-Editor freizuschalten und fügen Sie bei Bedarf eigenen Code hinzu. Das mag alles etwas gewöhnlich klingen, daher möchte ich es anhand einiger Beispiele erläutern. Als jemand, der keinen Code braucht, habe ich versucht, die einfachsten und leichtesten Wege zu finden, und werde sie nun mit Ihnen teilen.

Etwas Interessantes: Der Code-Editor von Mobirise hilft Ihnen beim Schreiben, indem er den Text während der Eingabe korrekt einfärbt (Sie möchten Rot vermeiden) und - was am wichtigsten ist - Sie nicht speichern und schließen lässt, wenn etwas Falsches im HTML/CSS-Code erkannt wird. In meinem Fall - meistens vergessen" } " am Ende.