Erstellen Sie mit RocketCake eine Site ohne HTML-Kenntnisse

Eine Site ohne HTML-Kenntnisse erstellen? Online-Redakteure zum Erstellen von Websites gewinnen häufig aufgrund der schönen Vorlagen an Bedeutung. Möchten Sie lieber nicht von einem so vorgefertigten Design ausgehen, das oft noch mit einer kostenpflichtigen Option endet, dann ist RocketCake ein Desktop-Programm, mit dem Sie eine schöne Site von Grund auf neu erstellen können.

Das englische Programm enthält nur fünfzehn Vorlagen zur Inspiration. Sie möchten mit RocketCake eine eigene Site erstellen, die Sie später problemlos aktualisieren können. RocketCake ist ein sogenannter WYSIWYG-Editor. Sie müssen keine HTML-Codes eingeben. Sie kompilieren Ihre eigene Site, indem Sie Elemente im Arbeitsbereich platzieren und dann den Fall hochladen. Zu den Elementen gehören Textfelder, Schaltflächen, Bilder, Menüs, Diashows, Videos, Audioclips und mehr. Das Besondere an RocketCake ist, dass es sich um einen Editor handelt, der sogenannte Responsive-Websites erstellt. Eine solche reaktionsschnelle Website ist mobilfreundlich, da sich das Layout an den Bildschirm des Geräts anpasst, mit dem jemand die Website besucht.

Eine reaktionsschnelle Webseite bleibt ordentlich, egal ob Sie sie auf einem großen Monitor oder einem kleinen Smartphone-Bildschirm anzeigen. Zu diesem Zweck passt die Website eine Reihe von Komponenten an, z. B. die Schriftgröße, die Anordnung bestimmter Elemente und die Art und Weise, wie das Menü auf dem Bildschirm angezeigt wird.

Laden Sie RocketCake hier herunter. Es gibt eine Version für Windows und eine für MacOS. In diesem Workshop verwenden wir die kostenlose Edition. Dies macht es einfach, eine reibungslos funktionierende reaktionsfähige Website zu erstellen. Es gibt auch eine professionelle Ausgabe von RocketCake, die 39 Euro kostet. Mit der Professional-Version können Sie eine unbegrenzte Anzahl von Websites erstellen. Es gibt auch CSS-Unterstützung, mit der Sie Layoutstile auf einer gesamten Site schnell anpassen können. Version 3.1 von RocketCake wurde verbessert, damit Ihre Website bei Google und anderen Suchmaschinen besser abschneidet. Darüber hinaus enthält die kostenlose Version einige Funktionen, die früher nur in der kostenpflichtigen Version verfügbar waren.

Arbeitsumgebung und Anzeige

Oben im Arbeitsbereich befindet sich die Leiste mit Schaltflächen zum Hinzufügen einer neuen Seite, zur Vorschau mit Internet Explorer und zum Veröffentlichen der Website im Internet. Rechts finden Sie das Toolset mit allen Elementen, die Sie auf einer Webseite platzieren können. Oben links sehen Sie die Struktur aller Seiten Ihrer Website.

Darunter befinden sich die Eigenschaften. Hier ändern Sie die Eigenschaften jedes ausgewählten Elements. Angenommen, Sie möchten einer Seite ein Bild hinzufügen, dann wählen Sie die Bilddatei in den Eigenschaften aus und geben an, ob das Bild abgerundete oder scharfe Ecken usw. haben soll.

Ganz unten bestimmen Sie die Anzeigebreite. Standardmäßig ist dies die Desktop- Ansicht. Über das kleine Dropdown-Menü unten links können Sie auch eine Reihe beliebter Mobilgeräte wie iPhone, iPad, Samsung Galaxy, LG ... anzeigen. Wenn Sie hier nicht die gewünschte Breite finden Im Menü können Sie auch Benutzerdefiniert auswählen und mithilfe eines Schiebereglers die Breite angeben, die auf dem Bildschirm angezeigt werden soll. Diese Breiteneinstellung ist wichtig für die Bestimmung der Haltepunkte, die wir später diskutieren.

Farben und Homepage

Beginnen wir mit der Homepage. In diesem Beispiel machen wir die Website einer ehrgeizigen Rockband. Anstatt mit einer Vorlage zu beginnen, wählen Sie Leere Seite . Der Abschnitt Eigenschaften wird an jedes ausgewählte Element angepasst. Klicken Sie beispielsweise auf den Hintergrund der ersten Seite, und wählen Sie bei BackgroundColor eine Hintergrundfarbe aus . Der Standardwert ist 000000, der HTML-Code für Weiß. Wenn Sie auf das Feld mit den drei Punkten klicken, wird der Farbwähler angezeigt. In den Eigenschaften geben Sie dieser Webseite einen Titel. Dies wird bald oben im Browserfenster angezeigt. Sie hinterlassen den Namen der Homepage unter index.html. Ein Browser sucht immer nach der Indexseite, die als Homepage angezeigt werden soll.

Darunter bestimmen Sie die Farben der vier Arten von Hyperlinks. LinkColor bestimmt die Farbe von Links, die noch nicht besucht wurden. LinkColorActive bezieht sich auf Links, die gerade von jemandem besucht werden. LinkColorHover ist die Farbe eines Links, auf den der Mauszeiger zeigt, und LinkColorVisited bezieht sich auf Links, die bereits jemand besucht hat.

Navigationsleiste und Intro-Bild

Um eine Navigationsleiste zu platzieren, wählen Sie im Toolset den Eintrag Navigationsmenü und klicken Sie dann auf den Arbeitsbereich. In dieser Navigationsleiste geben Sie die Menüelemente ein, für die Sie Webseiten erstellen möchten. Halten Sie die Namen dieser Elemente kurz. In unserem Beispiel sind dies die Band, Wer, Wo, Wann, Warum und Medien. Oben befinden sich die Schaltflächen zum Formatieren des Texts dieser Navigationselemente. Wenn Sie auf die Navigationsleiste selbst klicken, können Sie die Farbe und Form der Leiste in den Eigenschaften anpassen. Sie können wählen BackGroundMode für Farbe, Bildkomposition, Gradient und Styled Taste . In Verlauf bestimmen Sie die Farbtöne des Übergangs und in Gestalteter Schaltfläche erhält die Menüleiste ein konvexes Erscheinungsbild.

Wir möchten auch ein Banner oder ein Intro-Bild hinzufügen. Dazu platzieren Sie zunächst den Artikel Container . Klicken Sie in den Eigenschaften bei ImageName auf die drei Punkte, um das Bild auszuwählen, das Sie zuvor vorbereitet haben. Wenn es zu groß ist, fragt RocketCake, ob die Bildgröße geändert werden kann. Das ist erlaubt. Den Titel 'Mad Dog', den Sie auf dem Banner oben in diesem Artikel sehen, haben wir dem Bild selbst mit einem anderen Programm hinzugefügt. Grundsätzlich können Sie mit dem Element Floating Text auch Text über einem Bild platzieren. Leider führt dies auf Mobilgeräten zu einem unvorhersehbaren Ergebnis.

Wenn Sie zufrieden sind, speichern Sie die Arbeitsdatei irgendwo auf der Festplatte als .rcd-Datei.

Säulen

Unterhalb des Banners möchten Sie der Startseite Inhalte in einer, zwei oder drei Spalten bereitstellen. Wählen Sie dazu im Toolset das Element Container mit Spalten . RocketCake fragt, wie viele Spalten Sie möchten. Die Anwendung möchte auch wissen, wie breit eine Spalte mindestens ist. Wir haben uns für zwei Spalten und die Standardeinstellung 150 entschieden. Dies bedeutet, dass auf einem Breitbildschirm die Spalten sauber nebeneinander angezeigt werden können. Wenn eine Spalte auf einem kleinen Bildschirm kleiner als 150 Pixel wird, wird sie nicht mehr neben, sondern unter der vorherigen Spalte angezeigt.

In diesem Beispiel setzen wir die linke Spalte über die Eigenschaften auf MinWidth 500 . 500 ist der Haltepunkt für die linke Spalte. Wenn die Bildschirmbreite zu klein wird, liest der Besucher den Inhalt der rechten Spalte unter der linken Spalte. Zusätzlich haben wir das Banner auf MaxWidth 1000 gesetzt .

Um die rechte Spalte schmaler als die linke zu machen, klicken Sie zuerst auf die linke Spalte. Die Größe ist Standard bei 50%, automatisch . Ändern Sie dies beispielsweise in 70%, auto . Dadurch schwebt die zweite Spalte vorübergehend unter der ersten. Sie können dieses Problem lösen, indem Sie auf die zweite Spalte klicken und bei Größe 30% auto eingeben . Dies ergibt ein Verhältnis von 70/30. Dann füllen Sie die Spalten mit Text, den Sie auch wie mit einem Textverarbeitungsprogramm gestalten. In einer solchen Spalte können Sie auch Überschriften aus dem Toolset hinzufügen . Mit den Überschriften 1, 2, 3 sehen die Tassen gut aus.

Um ein Bild hinzuzufügen, platzieren Sie den Cursor im Text und klicken Sie im Toolset auf Bild . Navigieren Sie dann zu dem Ort, an dem das Bild wartet. Klicken Sie von Zeit zu Zeit auf die Schaltfläche Vorschau , um Ihre Arbeit in einem Browser anzuzeigen.

Wenn Sie eine solche Textspalte auf klicken, werden Sie in den Eigenschaften zu sehen , dass das Padding eingestellt auf 10, 10, 10, 10. Die Polsterung der Abstand vom Text in die Spalte Kante ist. Die erste Zahl bezieht sich auf die Oberseite, die zweite auf die Unterseite, die dritte auf die rechte und die vierte auf die linke Seite. Wenn Sie etwas mehr Abstand auf der rechten Seite eines Textfelds wünschen, müssen Sie den dritten Wert auf 20 setzen.

Polsterung ist der Abstand auf der Innenseite einer Box, Rand ist der Abstand auf der Außenseite. Wenn Sie etwas mehr Platz zwischen dem unteren Rand des Fotos und dem oberen Rand des Textes darunter wünschen, ändern Sie den Rand von 0, 0, 0, 0 in 0, 10, 0, 0.

Zusätzliche Seiten

Nachdem die Homepage fertig ist, möchten Sie natürlich weitere Seiten für Ihr Projekt erstellen. Dies erfolgt über die Schaltfläche Seite hinzufügen . Das Programm fragt, ob Sie eine komplett neue Seite oder eine Kopie einer vorhandenen Webseite erstellen möchten. In diesem Beispiel verwenden wir den Stil unserer Homepage: den schwarzen Hintergrund, die Schriftart, die Schriftgröße, die Breite des Containers ... Also entscheiden wir uns für die zweite Option. Dann entfernen wir das Banner und ändern den Inhalt des Textcontainers.

Wenn Sie eine Fußzeile am Ende jeder Seite wünschen, fügen Sie dort einen Container oder Container mit Spalten hinzu und geben Sie beispielsweise die Kontaktinformationen oder die Copyright-Informationen ein. Sonderzeichen wie das Copyright-Symbol können nicht direkt über die Tastatur eingegeben werden. In RocketCake wählen Sie solche Sonderzeichen aus dem Menü Einfügen, Textsymbol einfügen .

Links

Natürlich möchten Sie, dass die Schaltflächen im Navigationsmenü auf die richtigen Seiten verweisen. Wählen Sie dazu zuerst die Schaltfläche im Navigationsmenü und klicken Sie dann auf die Schaltfläche mit der Kette. Oder Sie drücken die rechte Maustaste und wählen Hyperlink einfügen . Dadurch wird ein Auswahlfenster geöffnet, in dem Sie zwischen der Verknüpfung mit einer externen Webseite, einer E-Mail-Adresse, einer Seite dieses Projekts oder einer bestimmten Datei wählen können. Wählen Sie im Projekt die Option Seite . Dann sehen Sie eine Liste der erstellten Webseiten, auf denen Sie die richtige auswählen.

Bei Target können Sie die Webseite in einem neuen Browserfenster oder im geöffneten Browserfenster öffnen. Die letztere Option ist üblich. Wenn Sie die linke Maustaste gedrückt halten, während Sie mit der Maus über eine Navigationsmenüschaltfläche fahren, fügen Sie Untermenüs hinzu, die Sie auf die gleiche Weise mit vorhandenen Webseiten verknüpfen.

Masterseiten

RocketCake funktioniert auch mit sogenannten Masterseiten. Wenn Sie eine Website mit vielen Seiten erstellen, beschleunigt diese Technik das Layout erheblich. Eine Masterseite ist ein formatierter Master, der als Vorlage für andere Seiten dient. Eine solche Masterseite ist daher keine reguläre Webseite. So erstellen Sie eine: Erstellen Sie eine neue Webseite, platzieren Sie das Dropdown-Menü, lassen Sie das Menü so funktionieren, wie es sollte, und formatieren Sie diese Seite ohne tatsächlichen Textinhalt. Anschließend fügen Sie einen Inhaltsplatzhalter aus dem Toolset hinzu . Ohne dieses Element funktioniert die Masterseite nicht. Geben Sie dieser speziellen Seite einen aussagekräftigen Namen, z. B. masterpage.html. Anschließend erstellen Sie eine oder mehrere Webseiten, die Sie nicht mit einem Layout versehen.

Sie geben Text ein, fügen optional ein Bild hinzu und speichern diese Seite. Für diese Seiten mit Inhalt sehen Sie unten in den Eigenschaften im Feld Masterseite . Dort aktivieren Sie die Option UseMasterPage . Wenn Sie das Kontrollkästchen aktiviert haben, wird ein neues Kontrollkästchen angezeigt, in dem Sie den Namen der beabsichtigten Masterseite auswählen. Sie können mehrere Masterseiten verwenden. Zu diesem Zeitpunkt wird noch nichts angezeigt. Wenn Sie jedoch auf die Schaltfläche Vorschau klicken, werden Sie feststellen, dass der Inhalt dieser Seite ordnungsgemäß im Inhaltsplatzhalter der ausgewählten Masterseite veröffentlicht wird.

Medien einlegen

Mit RocketCake fügen Sie YouTube-Videos hinzu, indem Sie das YouTube-Videoelement im Toolset auswählen. Geben Sie dann die Webadresse des Videos in die Eigenschaften ein. Es ist genauso einfach, eine Fotogalerie hinzuzufügen. Wählen Sie nach Auswahl von Bildergalerie aus dem Toolset die verschiedenen Fotos in den Feldern ImageFile1, ImageFile2 usw. aus. Es gibt verschiedene Möglichkeiten, die Fotos in der Galerie zu vergrößern. Sie können sie beispielsweise in einem neuen Fenster oder in einem Popup-Fenster öffnen. Am besten gefällt uns jedoch ein großes Bild auf einer separaten Ebene.

Veröffentlichen

Du bist fertig? Anschließend können Sie die Website im Internet oder auf einer lokalen Festplatte veröffentlichen. RocketCake ist mit einer FTP-Funktion ausgestattet, mit der Sie alles auf dem Server in dem Ordner ordnen können, den Ihr Provider dafür zur Verfügung stellt. Geben Sie die FTP-Adresse, den Benutzernamen und das Passwort ein. Verwenden Sie gegebenenfalls die Option Kennwort speichern , um das Kennwort zu speichern . Wenn Sie die Website auf Ihrer Festplatte veröffentlichen, können Sie die Homepage besuchen, indem Sie die Datei index.html mit Ihrem Internetprogramm öffnen.