• Startseite
• Inhalt
• Index
• Quellen

Responsive Webseite - Bilder neu

Was ist eine responsive Website?

"Responsive" ist nur ein schönes Wort für "Anpassung an die Bildschirmgröße". Da Menschen Websites mit unterschiedlichen Geräten betrachten – Handys, Tablets, PCs, Notebooks – ist es sehr wichtig geworden, dass eine Website auf allen verschiedenen Bildschirmgrößen gut lesbar ist: Eine responsive Website funktioniert automatisch gut auf dem winzigen 320x600-Bildschirm eines kleinen Smartphone, und auch auf einem 2048x1024 Vollbild-Browser eines Desktop-PCs. Dies geschieht beispielsweise durch Anpassen der Schriftgrößen, Neuanordnen und Ausblenden von Elementen und einfaches Scrollen auf Handys. All dies ist mit RocketCake leicht machbar.


Schritt 1: RocketCake downloaden und installieren

Wenn Sie es noch nicht getan haben, dann sollten sie jetzt RocketCake downloaden und installieren. Es ist ein kostenloser responsive website editor. Man kann ihn hier downloaden.


Eine neue leere Website erstellen

Nachdem Sie das RocketCake-Programm gestartet haben, werden Sie aufgefordert, eine neue Website aus einer Vorlage zu erstellen. Wählen Sie den ersten Eintrag 'Leere Seite', um mit einer neuen, leeren Website zu beginnen. Der Editor sieht jetzt so aus:

Schauen Sie sich das Fenster "Eigenschaften" auf der linken Seite an. Hier können Sie schnell das Aussehen der Seite (oder des aktuell ausgewählten Elements) ändern. Hier können Sie einen Titel für Ihre Seite eingeben (dies ist der Text, der normalerweise beispielsweise in Google angezeigt wird, wenn Ihre Seite als Suchergebnis angezeigt wird) oder die Standardfarben für Ihre Links. Sie können auch eine Hintergrundfarbe, einen Farbverlauf oder ein Bild festlegen, wenn Sie möchten.


Eine responsive Webseite erstellen

Fügen Sie der Seite zunächst ein Navigationsmenü hinzu. Wählen Sie im Toolset rechts das Element Navigationsmenü aus und klicken Sie in die Seite. Dadurch entsteht ein Menüelement:

Sie können darauf klicken und direkt Text eingeben, um einige Menüpunkte zu erstellen. Tun Sie dies und erstellen Sie die Menüpunkte mit den Namen zum Beispiel "Company" und "About". Wenn Sie möchten, können Sie auch die Hintergrundfarbe ändern, um Ihre Website ansprechender aussehen zu lassen. Standardmäßig hat das Menü eine Breite von 100 % und erstreckt sich über die gesamte Breite der Seite. Dies ist sehr nützlich, da es sich dann automatisch an unterschiedliche Bildschirmgrößen anpasst.

Probieren Sie es aus: Sehen Sie den horizontalen Schieberegler unten auf der Seite? Verschieben Sie es nach links und wieder zurück: Damit können Sie eine Vorschau anzeigen, wie die Seite auf Geräten mit unterschiedlichen Bildschirmbreiten aussehen wird.

Schieben Sie den Schieberegler wieder nach rechts, und wir passen das Layout des Menüs ein wenig an: Zuerst stellen wir das Menü auf eine maximale Breite von 800 ein. So sieht die Website bei großen Auflösungen schöner aus.

Suchen Sie bei ausgewähltem Menü im Eigenschaftsfenster links nach dem Eintrag "MaxWidth" und ändern Sie ihn auf "800", damit er nicht breiter als 800 Pixel wird:

Außerdem möchten wir, dass das Menü im Container zentriert ist, klicken Sie also auf die Schaltfläche "Text zentrieren", während das Menü noch ausgewählt ist:

Ein Logo der Seite hinzufügen

Groß! Als nächstes wollen wir ein Bild direkt unter dem Menü. Wir könnten dafür das "Bild"-Element verwenden, aber da wir später etwas Text über dem Bild hinzufügen möchten, verwenden wir stattdessen einen Container und verwenden einfach seine Hintergrund-Bild-Eigenschaft. So:

• Wählen Sie im Toolset rechts das Element "Container" aus und klicken Sie irgendwo unterhalb des von Ihnen erstellten Menüs auf die Seite.

• Ziehen Sie das weiße Quadrat am unteren Rand etwas nach unten, um es zu vergrößern.

• Suchen Sie dann im Eigenschaftsfenster links den Eintrag "Hintergrundmodus" und stellen Sie ihn auf "Image".

• Es erscheint ein neuer Eintrag "Hintergrundbild", in dem Sie eine Bilddatei von Ihrer Festplatte auswählen können.

• Suchen Sie wie im Menü nach dem Eintrag "MaxWidth" und ändern Sie ihn auf "800".

• Klicken Sie außerdem auf die Schaltfläche "Text zentrieren“, während der Container ausgewählt ist.

Das Ergebnis sollte wie folgt aussehen (je nach ausgewähltem Bild):

Einen body für die Website hinzufügen

Jetzt haben wir ein Menü, ein gut aussehendes Bild als Logo, aber wir müssen noch einige echte Inhalte hinzufügen, z. B. Text, der Ihre Website beschreibt. Dazu fügen wir wieder einen Container hinzu:

• Wählen Sie im Toolset rechts das Element "Container" aus und klicken Sie auf die Seite, irgendwo unter das Bild, das Sie beim letzten Mal hinzugefügt haben.

• Damit es genauso groß aussieht wie das oben hinzugefügte Menü, machen Sie dasselbe wie beim Menü: Während der neue Container noch ausgewählt ist, suchen Sie im Eigenschaftsfenster links nach dem Eintrag "MaxWidth", und ändern Sie es auf "800", damit es nicht breiter als 800 Pixel wird.

• Klicken Sie außerdem auf die Schaltfläche „Text zentrieren“, während der Container ausgewählt ist.

• Klicken Sie dann in die Mitte des Containers und beginnen Sie mit der Eingabe von Text. Sie können den Text beliebig formatieren:

Ein Bild hinzufügen

Um den Text der Website ansprechender aussehen zu lassen, können Sie ganz einfach ein Bild in den Text einfügen:

• Wählen Sie das Bildelement im Toolset aus und klicken Sie in den Text, wo das Bild erscheinen soll.

• Passen Sie die Größe des Bildes an Ihre Bedürfnisse an.

• Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie im Menü "Text Float -> Left", um den Text um das Bild herum schweben zu lassen.

• Wenn das Bild ausgewählt ist, suchen Sie im Eigenschaftsfenster den Eintrag "Margin" und ändern Sie ihn von "0,0,0,0" in "10, 10, 10, 10". Dadurch entsteht ein kleiner Rand des Textes um das Bild herum, der dann viel schöner aussieht.

Das Ergebnis wird wie folgt aussehen:

Genauso wie Sie das Bild in den Text eingefügt haben, können Sie auch einen Container direkt in den Text einfügen, um beispielsweise eine Box für Nachrichten und ähnliches zu erstellen.

Ihre Website ist bereits responsive. Sie können es in jedem Browser oder in RocketCake selbst in der Vorschau anzeigen und dort die Größe ändern und sehen, wie es sich automatisch anpasst.



Andere Seiten hinzufügen

Wenn Sie mit dieser Seite Ihrer Website fertig sind, möchten Sie vielleicht eine zweite Seite erstellen. Werfen Sie einen Blick auf das Fenster „Dokumente“ oben links, in dem Ihre einzige, ursprünglich benannte Seite „index.html“ angezeigt wird. Klicken Sie einfach mit der rechten Maustaste auf das Root-Element (wahrscheinlich mit dem Namen "nicht gespeicherte Website", wenn Sie es noch nicht gespeichert haben) und wählen Sie "Seite hinzufügen". Alternativ können Sie auch den Menübefehl 'Einfügen -> Seite hinzufügen' verwenden.

Es öffnet sich eine neue Seite, die Sie wieder mit Inhalten füllen können. Sie können seinen Namen im Fenster 'Eigenschaften' bearbeiten.



Hyperlinks hinzufügen

Um Links zwischen Ihren Seiten oder zu anderen Websites im Internet hinzuzufügen, können Sie Hyperlinks erstellen. Markieren Sie dazu den Textteil, der als Hyperlink verwendet werden soll, klicken Sie mit der rechten Maustaste darauf und wählen Sie 'Link einfügen...'.

Alternativ können Sie auch das Hyperlink-Symbol in der Symbolleiste des Editors verwenden. Dies funktioniert auch für Bilder und gestaltete Schaltflächen.

Nun öffnet sich ein Dialog, in dem Sie die URL des Hyperlinks eingeben können. Sie können als Linktyp auch 'Seite in diesem Projekt' auswählen und dann eine andere Seite dieser Website auswählen.

Wenn Sie einen Textlink erstellen, wird in diesem Dialogfeld auch ein Abschnitt „Stil“ angezeigt. Hier können Sie globale benannte Stile für Ihre Links definieren und wiederverwenden, wenn Sie mehr als einen oder einige spezielle Stile wünschen. Hier können Sie verschiedene Hover-Farben definieren, unterstrichene Links deaktivieren und mehr.



Tips um die Website zu verbessern

Natürlich ist die Website noch nicht fertig. Hier sind einige Tipps, wie Sie es verbessern können:

• Wenn Sie dem Logo-Bild etwas Text hinzufügen möchten, wählen Sie das Element "Schwebender Text" aus und klicken Sie auf das Bild. Das ist es schon.

• Auf kleinen Bildschirmen wird das Menü automatisch zu einem kleineren "mobilen" Menü, das Sie auch im Editor ändern können, wenn Sie die Bildschirmgröße mit dem Schieberegler unten etwas verkleinern. Dieses Verhalten kann im Eigenschaftsfenster beeinflusst werden.

• Um ein Element dynamisch basierend auf einer kleineren Bildschirmbreite anzupassen, klicken Sie einfach mit der rechten Maustaste auf dieses Element und wählen Sie "Breakpoints bearbeiten". Dadurch wird der Breakpoint-Editor geöffnet, in dem Sie ganz einfach Regeln angeben können, um Elemente basierend auf der Bildschirmgröße in der Größe zu ändern, auszublenden oder anzupassen.

Website abspeichern und Vorschau

Um Ihre Website zu speichern, verwenden Sie den Menübefehl 'Datei -> Speichern', damit Sie Ihre Arbeit später auf dieser Seite fortsetzen können. Sie können Ihre Website auch in Ihrem Browser anzeigen, indem Sie auf „Veröffentlichen -> Vorschau“ klicken oder einfach die Tastenkombination F5 drücken.



Die Website veröffentlichen

Wenn Sie mit Ihrer Website fertig sind, möchten Sie sie vielleicht auf einem Webserver veröffentlichen, damit andere Leute sie lesen können. Dazu können Sie einfach den Befehl "Veröffentlichen -> Im Internet veröffentlichen" verwenden und den Benutzernamen Ihres FTP-Servers eingeben, auf den Sie die Seite hochladen möchten.

Alternativ können Sie den Befehl "Veröffentlichen -> Auf lokalem Datenträger veröffentlichen" verwenden. Es erscheint ein Dialog zur Auswahl eines Zielverzeichnisses. Wenn Sie auf OK klicken, werden alle HTML- und Bilddateien auf Ihrer Festplatte in dem von Ihnen ausgewählten Verzeichnis generiert. Diese müssen Sie nun nur noch auf Ihren Webserver oder FTP-Server hochladen. Dazu können Sie ein beliebiges FTP-Programm verwenden. Ambiera empfiehlt den kostenlosen FTP-Client 'Filezilla' (http://filezilla-project.org/) oder WinSCP (http://winscp.net/).