Sie sind hier: Startseite • Tutorial: Webseitenerstellung I

 

Tutorial Webseitenerstellung

Dieses Tutorial besteht aus drei Teilen:

I) Basiswissen: Wie erstelle ich ein Design für meine Webseite

II) Automatisierung und Vereinfachung der Handhabung winer Website mit PHP

III) Nutzung als Template für Content Management Systeme (CMS)

Teil II und III bauen auf das, in diesem Teil des Tutorials erstellte, Design auf. Wer diesen Teil des Tutorials verstanden hat, sollte aber in der Lage sein, die Schritte auch für andere Vorlagen nachzuvollziehen.

Genug der Vorrede, lasset die Spiele beginnen. ;)

I) Basiswissen: Wie erstelle ich ein Design für meine Webseite

 

Inhalt:
1. Einführung

2. Das HTML-Gerüst
2.1 Grundentwurf des Layouts
2.2 das head-Element

3. Gestaltung mittels CSS
3.1 Das Grundgerüst des Stylesheets
3.2 Positionierung unserer Seitenelemente
3.3 graphische Elemente
3.4 ...

4. Die einzelnen Blöcke der Webseite
4.1 Der header
4.2 das Menü
4.3 der Footer
4.4 die Sidebar
4.5 Inhalte

1. Einführung

Es gibt viele Wege, die zu einem eigenen Design für die persönliche Webseite führen. Dieses kleine Tutorial zeigt einen davon.

Ziel ist es, auch dem Anfänger zu ermöglichen, eine Webseite selbst zu gestalten, ohne auf fertige Vorlagen zurückgreifen oder teure Programme kaufen zu müssen.

Die Webseite soll in allen modernen Browsern annähernd gleich dargestellt werden.


Das, in diesem Tutorial erstellte Design kann auch als Template in Contentmanagementsystemen (CMS) und Blogs benutzt werden. Die dafür erforderlichen, zusätzlichen Schritte werden im zweiten Teil erläutert. Dort setzen wir das Template für Wordpress und Citus um.

Um die Webseite aus diesem Tutorial zu erstellen, werden nur folgende Programme benötigt:

- Ein Texteditor
- Ein Graphikprogramm

Im einfachsten Fall reichen die kleinen Helfer, die das Betriebssystem bereits beinhaltet.

Für Windowsnutzer empfehle ich aber Folgende:
Notepad++ als Texteditor,
Gimp als Graphikprogramm (ich persönlich verwende aber Photohop)

Den Editor weisen wir an, die von uns erstellte Datei im Format UTF-8 ohne BOM zu speichern.
(Bei Notepad++ : Format -> "Kodiere als UTF-8" und zusätzlich das Häkchen bei "Kodiere als UTF8 (ohne BOM)" setzen.

 

2. Das HTML-Gerüst


Damit ein Browser die Webseite richtig darstellen kann, gibt es grundlegende Bestandteile, die jede Webseite beinhalten muß.
Das Grundgerüst, auf dem wir aufbauen, sieht so aus:

<html>
    <head>
    </head>
    <body>
    </body>
</html>


Die gesamte Seite wird vom HTML-Tag umschlossen.
Darin befinden sich die Elemente <head> und <body>
Das body-Element enthält all das, was der Besucher später in seinem Browser sieht.
Das head-Element lassen wir vorerst außen vor.

2.1 Grundentwurf des Layouts

 

Layoutentwurf Webseite

Das Grundgerüst zeigt, im Browser aufgerufen, nur eine leere Seite ohne Inhalt.

Nehmen wir an, unsere Seite soll später ungefähr so aussehen, wie in der nebensthenden Skizze:

- Ein Seitenkopf mit Logo und Titel (rot)
- Eine Navigationsleiste (gelb)
- Den Contentbereich (blau)
- Eine Sidebar (grün)
- Eine Fußzeile (rosa)

der weiße Bereich umfasst die ganze Seite
der graue Rahmen begrenzt die Größe der Darstellungsfläche
der schwarze Bereich positioniert Content und Sidebar

 

Die dafür benötigten Elemente fügen wir in unser Grundgerüst innerhalb des Body-Elementes ein.

<html>
    <head>
    </head>
    <body>
        <div id="page">
            <div id="header">
                Header
            </div>
            <div id="menue">
                Menü
            </div>
            <div id="main">
                <div id="content">
                    Inhalt
                </div>
                <div id="sidebar">
                    Sidebar
                </div>
            </div>
            <div id="footer">
                Footer
            </div>
        </div>
    </body>
</html>


Das war hier schon alles, was wir tun müssen.
Dieses Gerüst speichern wir unter dem Namen index.html.

Im Browser aufgerufen, wirkt es noch nicht sonderlich spektakulär, aber wir sehen bereits erste Inhalte, nämlich die Texte, die wir innerhalb der div-Elemente platziert haben.

Es fällt auf, daß der Umlaut im Wort Menü nicht richtig dargestellt wird. Das beheben wir jetzt und wenden uns dazu dem head-Element zu.

2.2 das head-Element

Dieses Element, nicht zu verwechseln mit dem späteren Header der Webseite, beinhaltet zusätzliche Informationen, die der Browser zur Darstellung unserer Webseite benötigt.

Damit der Browser weiß, welchen Zeichensatz wir verwenden und unsere Texte richtig darstellen kann, geben wir ihm zusätzliche Informationen und erweitern das head-Element.

Um ihm auch noch mitzuteilen,an welche Standards wir uns halten, fügen wir noch eine Deklaration des Doctypes an den Anfang unseres Gerüstes und erweitern das html-Element um einige Parameter.

Jetzt sollte unsere Datei so aussehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-style-type" content="text/html" />
</head>
    <body>
        <div id="page">
            <div id="header">
                Header
            </div>
            <div id="menue">
                Menü
            </div>
            <div id="main">
                <div id="content">
                    Inhalt
                </div>
                <div id="sidebar">
                   Sidebar
                </div>
            </div>
            <div id="footer">
                Footer
            </div>
        </div>
    </body>
</html>


Im Browser sieht es jetzt eventuell so aus:
Header
Menü
Inhalt
Sidebar
Footer

Wenn der Umlaut nicht richtig dargestellt wird, liegt das daran, daß der Texteditor nicht richtig eingestellt ist!
Für eine einfache Webseite könnten wir auch ein anderes Charset verwenden, aber da wir das Template später auch für CMS und Blogs nutzen wollen, sollten wir uns auf UTF-8 einigen.

Ein letzter Zusatz im Quellcode bereitet uns auf Punkt 3 des Tutorials vor.
Wir fügen folgende Zeile in das head-Element ein:

    <link rel="stylesheet" type="text/css" href="stylesheet.css" />


Damit weisen wir den Browser an, eine zusätzliche Datei zu laden und bei der Darstellung der Webseite zu berücksichtigen.

Wie diese Datei aussieht, zeigt Punkt 3 des Turorial.


3. CSS

Wir wenden uns nun der Optik unserer zukünftigen Webseite zu. Dazu nutzen wir CSS (cascading stylesheets).
Um den Code unserer Seite übersichtlich zu halten, lagern wir diesen Teil in eine separate Datei aus.

3.1 Das Grundgerüst des Stylesheets

Wir erstellen also im Editor eine neue Datei und füllen sie mit folgendem Inhalt:

* {}
body {}
#page {}
#header {}
#menue {}
#main {}
#content {}
#sidebar {}
#footer {}


Diese Datei ist die Basis unseres Stylesheets. Wir speichern sie unter dem Namen stylesheet.css im gleichen Ordner wie unsere index.html.

Um eine definierte Basis zu haben und die unterschiedlichen Grundeinstellungen verschiedener Browser zu umschiffen, setzen wir zuerst einige Standardwerte für Randabstände, Schriftfarbe und -größe. Diese Werte werden dem Gesamtdokument (*) bzw. dem body-Element zugeordnet und an alle, darin eingeschlossenen Elemente vererbt. Dort, wo wir später andere Werte benötigen, werden diese explizit definiert.

* {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
body {
    font-size:100%;
    color: #000; /*schwarz*/
}

Für den Anfang verzichten wir auf graphische Elemente und beschäftigen uns zuerst mit der Größe der Seite und der Positionierung der einzelnen Seitenelemente.

Was die Größe der Seite, wie sie im Browser dargestellt wird, angeht, können wir es nicht jedem Nutzer recht machen. Zu vielfältig sind die Bildschirmauflösungen der Anwender.

Eine horizontale Auflösung von 1024 Pixeln steht aber jedem Nutzer, sofern er die Seite nicht mit einem mobilen Gerät besucht, in den meisten Fällen zur Verfügung. Daher nutzen wir diese Breite als Basis. Es wäre zwar durchaus möglich, die Seite so zu gestalten, daß sich ihre Breite dynamisch anpaßt, aber mit einer Vorgabe können wir mehr Einfluß auf die spätere Darstellung unserer Inhalte nehmen und die Planung wird einfacher.

Da das Browserfenster die Nutzfläche noch um Rahmen und Scrollbalken verringert, legen wir unsere Seitenbreite auf 980px fest und lassen die Seite horizontal zentriert anzeigen.

#page {
    width: 980px;
    margin: 0 auto;
}

Nun definieren wir in gleicher Weise die Breite der anderen Elemente, sowie festen Höhen für #header, #menue und #footer:

#main{
    width:100%,
    background: #cccccc;
    overflow: hidden;
}
#header {
    width: 100%;
    height: 150px;
    background: #ff3334;

}
#menue {
    width: 100%;
    heigth: 25px;
    background: #ffcc34;
}
#sidebar {
    float:right;
    width: 200px;
    background: #66ff66;

}
#content {
    float:left;
    width: 780px;
    background: #0167cc;
}
#footer {
    width: 100%;
    height:75px;
    background: #ff6861;
}

Im aktuellen CSS sind einige neue Definitionen zu sehen, über die bisher noch nicht gesprochen wurde.

3.2 Positionierung der Seitenelemente

float:left und float:right sorgen dafür, daß #content und #sidebar nebeneinander dargestellt werden.

overflow:auto ist dazu nötig, dem #main-Container mitzuteilen, seine Höhe an #content und #sidebar anzupassen.

Die Hintergrundfarben der einzelnen Container habe ich zur Veranschaulichung an die, im Entwurf verwendeten Farben angeglichen.
(Zugegeben, schön sind sie nicht, waren aber für einen ersten Eindruck hilfreich.)

Und so sieht es jetzt aus: Demo im neuen Fenster

Auffällig ist, das unterhalb der Sidebar ein Stück des #main-Containers (grau) sichtbar ist. Das wird dadurch verursacht, daß der Content ein paar zusätzliche Zeilen Text erhalten hat. Das liße sich verstecken, indem dem #main-Container einfach die Hintergrundfarbe der Sidebbar zugeordnet wird, aber was passiert, wenn die Sidebar höher wird als der Content? Richtig, dann schimmert es unter dem Content grün.

Abhilfe schafft hier nur ein Trick, nämlich der Einsatz von Graphiken.

3.3 graphische Elemente

Damit die unterschiedliche Höhe der beiden Container #sidebar und #content dem Besucher nicht auffällt, ersetzen wir den Hintergrund des containers #main durch eine Graphik, die farblich genau so gestaltet ist, wie die Hintergrundfarben von #content und #sidebar. Deren Hintergrundfarbe muß dann auch nicht mehr angegeben werden.

Die Graphik hat genau die Breite von #content + #sidebar, nämlich 980px. Als Höhe reicht ein Pixel, da wir die Graphik so oft wiederholen lassen, wie für die dargestellte Hintergrundfläche notwendig.

So sieht die Graphik aus (nichtproportional verkleinert): Bild 2: Hintergrund

Eingebunden wird sie in das Stylesheet wie folgt:

#main{
    width:100%;
    overflow: hidden;
    background: url(bg.png) repeat-y;
}

Und so sieht es unsere Webseite jetzt aus: Demo im neuen Fenster

Damit ist die grundlegende Arbeit eigentlich erledigt, aber die Webseite ist nicht sonderlich schön. Darum nutzen wir jetzt die Möglichkeit der Hintergrundbilder um das optische Ergebnis aufzuwerten.

 

Bild 3: Webseitenentwurf mit Graphiken

Für dieses Beispiel habe ich der Einfachheit halber ein älteres Template von mir gewählt, dessen Aufteilung unserem Entwurf in etwa  entspricht.

Auch dieses Layout nutzt den Trick mit dem Hintergrundbild für die beiden Spalten.

Im Ganzen besteht es aus 5 einzelnen Bildern:

  • Header
  • Menü
  • Content + Sidebar (!)
  • Footer
  • Seitenhintergrund

Den anderen Seitenelementen weisen wir nun in gleicher Art die Hintergrundgraphiken zu und entfernen die Hintergrundfarben, die ja nur zur Veranschaulichung gesetzt waren. Das CSS für das Seitengerüst sieht jetzt so aus:

#page {
  width: 980px;
  margin: 0 auto;
  background: url(Bilder/page-bg.png) repeat-x;
}

#main{
  width:100%
  background: url(Bilder/content-bg2.png) repeat-y;
}
#header {
  width: 100%;
  height: 175px;
  background: url(Bilder/header-bg.png) no-repeat;
}
#menue {
  width: 100%;
  heigth: 25px;
  background: url(Bilder/menu-bg.png) no-repeat;
}
#sidebar {
  float:right;
  width: 220px;
  margin:20px 10px 0 0;
  text-align:center;
}
#content {
  float:left;
  width: 730px;
}
#footer {
  width: 100%;
  height:100px;
  background: url(Bilder/footer-bg.png) no-repeat;
}

Zur bessern Erkennbarkeit auch hier wieder eine, bereits mit einigen Inhalten gefüllte Demo: *Klick*

4. Die einzelnen Blöcke der Webseite

Das Grundgerüst ist jetzt fertig.

Es fehlt jetzt noch an Inhalten und deren Formatierung sowie noch ein paar andere Kleinigkeiten.

Schauen wir uns die Abschnitte einzeln an.

Bevor wir uns den einzelenen Elementen widmen, definieren wir noch einige grundlegenden Styles (Farben, Schriftgrößen und Abstände) für wiederkehrende Tags, wie Überschriften, Absätzen und Links.

p{
	padding: 3px;
}
h1{
	padding: 5px;
	font-size: 2.0em;
}
h2{
	padding: 5px;
	font-size: 1.8em;
}
h3{
	padding: 5px;
	font-size: 1.6em;
}

Damit gewährleisten wir für die spätere Webseite ein einheitliches Erscheinungsbild.

Nun aber zu den einzelnen Blöcken unserer neuen Homepage.

4.1 Der Header

Hier soll der Name der Webseite und ein netter Slogan gezeigt werden. Beides sind nur Textelemente. Den Namen der Seite definieren wir als Überschrift und umschließen ihn mit dem passenden HTML-Tag "<h1>". Der Slogan steht als Text einfach darunter. Um beides an der richtigen Stelle zu positionieren, umschließen wir es noch mit einem DIV-Container und fügen es anschließen in den bestehenden Container "header" ein.

 

<div class="sidename">
	<h1>DeineDomain.De</h1>
	<p>Ein witziger Slogen für deine Homepage</p>
</div>

Im CSS verpassen wir dem Block jetzt noch die passende Größe und Positionierung (fester Abstand von oben und links):

.sidename{
	width: 450px;
	position:absolute;
	margin: 60px 0 0 60px; 
	text-align:center;
}
.sidename h1 {
color: #FFDD55; /*gelb*/
}
.sidename p {
	font-size: 1.2em;
	color: #000;
}

4.2 Das Menü

Ausgangspunkt für unsere Navigation ist eine einfache Liste, die wir im vorhandenen DIV mit der ID "menu" einfügen.
Für jeden Menüpunkt wird ein Link mit Beschreibung als Element der Liste definiert:
Der Platzhalter "#" in den Links wird später durch die aufzurufende Weite unserer Homepage ersetzt.

<ul>
	<li><a href="#">Menüpunkt 1</a></li>
	<li><a href="#">Menüpunkt 2</a></li>
	<li><a href="#">Menüpunkt 3</a></li>
	<li><a href="#">Menüpunkt 4</a></li>
	<li><a href="#">Menüpunkt 5</a></li>
</ul>

Du fragst dich jetzt vermutlich, warum das Menü als Liste definiert ist. Listenpunkte stehen doch im Normalfall immer untereinander.
Richtig! Dieses Verhalten können wir der Liste mit CSS aber austreiben und definieren sie als "inline" also als eine Zeile.
Dieses Vorgehen hat mehrere Gründe.
Zum einen ist es für uns praktisch, wenn wir später das Menü um weitere Ebenen zu einem Dropdownmenü erweitern wollen. Das läßt sich mit Listen am einfachsten gestalten.
Außerdem hat die Liste Vorteile für User, die z.B. die Seite mit einem Screenreader betrachten müssen. Ihnen wird die Navigation dann als zusammengehörige Liste von Links dargestellt, die sie schnell richtig zuordnen können.

Die CSS-Angaben für unsere Navigation sehen so aus:

#menue ul{
padding-left:25px;
}
#menue li{
	display:inline;
	text-align:center;
	padding: 0 5px 0 0;
}
#menue a{
	text-decoration:none;
	color: #990000;
}
#menue a:hover{
  background: url(Bilder/verlauf_h.png) repeat-x;
	color: #330000;
}

Neben den Listenelementen haben wir auch gleich unsere Links mit besonderer Auszeichnung versehen.

4.3 Der Contentbereich

Da wir bereits die Formate für Überschriften und Absätze definiert haben, bleibt hier nicht mehr viel zu tun. Wir setzen für die Inhalte nur noch einen Abstand nach oben und links. Dazu erweitern wir im Stylesheet die definition von #content um folgende Zeile.

padding: 20px 0 0 20px;

4.4 Die Sidebar

Der Platz für die Sidebar ist bereits in unserem Grundlayout definiert.  Die Inhalte der Sidebar sollen in einzelnen Boxen dargestellt werden. Dafür definieren wir einen Container "sbbox" und fügen ihn in den Bereich der Sidebar ein.

<div class="sbbox">
	<p>Inhalt der Box</p>
</div>

Die Sidebar kann beliebig viele Contentboxen aufnehmen. Dazu muß nur der sbbox-Container dupliziert und mit dem gewünschten Inhalt gefüllt werden.

Das Aussehen der Box bestimmt wieder das CSS, welches wir dem Container zuweisen.

Die Box soll 180px breit sein und mittig in der Sidebar erscheinen. Das erreichen wir mit width und margin.
Bei der Margin geben wir der Box gleich noch einen Abstand nach oben und unten mit auf den Weg, ein schmaler Rahmen hebt sie vom Hintergrund der Seite ab und am oberen Rand wird sie noch mit einem Bild hinterlegt, das eine Überschrift der Box optisch hervorhebt.  Text in der Box lassen wir zentriert erscheinen mit einem Abstand zum Rand von 3px.

.sbbox{
	width:180px;
	text-align:center;
	margin: 10px auto;
	border: 1px solid #000;
	padding:3px;
	background: #fff url(Bilder/menu-bg.png) no-repeat -20px -5px;
}

4.5 der Footer

Der Footer dient dazu, ein paar Informationen an den User zu geben, die auf jeder Seite sichtbar sein sollen.
Das können Links zu Impressum und Kontaktformular sein, oder aber die Anschrift und Telefonnummer des Seitenbetreibers (Sinnvoll bei einer Firmenhomepage).
Ebenso erscheint hier der Backlink zum Gestalter des Templates. Meine Bitte an euch: Wenn ihr kostenlose Templates einsetzt, respektiert den Wunsch der Designer und laßt diese Referenz stehen. Sie ist der einzige Lohn, den ein Gestalter freier Templates bekommt!

 

So, damit ist das erste Tutorial zur Webseitengestaltung beendet. Danke, daß ihr bis hier durchgehalten habt! *g*

Das hier erstellte Template könnt ihr mit allen dazugehörenden Graphiken und stylesheets hier herunterladen, damit experimentieren oder es für eure Webseite benutzen.

Für Fragen und Anregungen zum Tutorial ist ein eigener Bereich im Forum eingerichtet (Forum zu den Tutorials). Ich würde mich über eure Kommentare und Anregungen freuen.

Teil II (Template mit PHP nutzen) und III (Ein CSS-Template für ein CMS nutzen) folgen. Folgt mir bei Twitter, wenn ihr informiert werden möchtet.


zum Seitenanfang