einleitungold
Vorwort
Im World Wide Web existieren viele Tutorials, um Ihnen den Einstieg im Bereich Webdesign zu vereinfachen. Diese Tutorial-Reihe ist extra für den Homepage-Baukasten zugeschnitten und soll Ihnen Schritt für Schritt das Wichtigste erklären. Wir empfehlen Ihnen, alles auch einmal selber auszuprobieren, sofern dies möglich ist. „Learning by Doing“ ist der einfachste Weg, um sich Webdesign selbst beizubringen.
Planung
Sie sollten sich schon vor der Umsetzung Gedanken machen. Wie soll das Design aufgebaut sein? Welches Thema soll behandelt werden? Zu welchen Themen werde ich schreiben?
Umsetzung durch HTML und CSS
HTML (Hypertext Markup Language) und CSS (Cascading Style Sheets) sind zwei Sprachen, die die Grundlage fast aller Webseiten und die Wichtigsten für den Homepage-Baukasten sind. HTML dient zur Strukturierung, CSS sorgt für die Darstellung. Man kann es sich wie folgt vorstellen: Mit HTML wird ein Viereck und dessen Inhalt (zum Beispiel ein Text) erstellt und mit CSS wird zum Beispiel die Größe des Vierecks und die Farbe des Textes bestimmt.
Dieses schauen wir uns anhand eines Beispiels näher an. Dazu wechseln Sie im HTML-Editor (der Text-Editor) auf „Quellcode“ oder Sie deaktivieren den HTML-Editor unter Einstellungen dauerhaft ab. Dann fügen sie den folgenden HTML-Code ein:
Als Ausgabe erhalten wir nur „Dein Text!“. Wie Sie aber dem Code entnehmen können, haben wir dem Block-Element (div = division = Bereich) eine ID verpasst. Die ID so etwas wie ein Name, den wir dem Element geben. Durch den Namen können wir das Element ansprechen und frei gestalten. Dafür wird CSS verwendet. Wir entscheiden uns für einen weißen Text in einem hellgrauen Feld. Der Text soll mittig positioniert sein. Die Weite beträgt insgesamt 580 Pixel und die Höhe 20 Pixel. Dazu wird noch ein Innenabstand von 10 Pixel an allen vier Seiten eingeplant. Dies wird über die CSS definiert. Keine Panik, im nächsten Tutorial lernen Sie die wichtigsten CSS-Befehle kennen.
Den folgenden CSS-Code fügt man bspw. im Text-Editor am Anfang (ebenfalls unter Quellcode!) ein oder man nutzt ihn bei den Standartdesigns im Feld „Text über dem Design“ (Login - Design einstellen - Erweiterte Einstellungen). Wollen Sie die ID nur für eine Seite definieren, fügen Sie den CSS-Code nur auf der entsprechenden Seite unter Quellcode ein. Wollen Sie diese ID für alle Seiten definieren, fügen Sie den CSS-Code im Feld „Text über dem Design“ ihres Designs ein. Wenn Sie Nutzer des Designs „CSS - Ausschließlich für Profis geeignet“ sind, fügen Sie den CSS-Code ohne die Style-Tags im Feld „CSS-Code ohne Style Tags“ ein.
Wie Sie sehen, hat unser kleines Beispiel perfekt funktioniert. Mit HTML wird ein Bereich und dessen Inhalt festgelegt, mit CSS wird die Darstellung bestimmt. Als alternative Schreibweise könnte man den folgenden Code benutzen. Er erzielt das selbe Ergebnis und dazu noch ist kürzer. Dieser Code empfiehlt sich für die Strukturierungen innerhalb des Textfeldes, zum Beispiel wenn man eine zweispaltige Unterteilung innerhalb des Textfeldes erzielen möchte.
Tipps zur Gestaltung
Natürlich gibt es einige Dinge, auf die Sie bei der Gestaltung ihrer Internetpräsenz achten sollten, um nicht ihre Besuchern zu vertreiben. Wie sie merken werden, ist eine gewisse Professionalität notwendig.
- Ein ansprechendes Design, eine gute Farbwahl und einen guten Designaufbau
- Eine gute Übersicht, ihr Besucher soll sich schließlich zurechtfinden
- Ihr Internetauftritt sollte nur von einem Thema handeln
- Seriöses Auftreten: Gute Artikulation, keine Rechtschreibfehler und eine gute Grammatik
- Informative und verständliche Texte
- Verfügbarkeit: Keine täglichen/langfristigen Schließungen wegen Änderungen
- Wiederbesuchswert durch regelmäßige Updates