Was sind denn Links??
Links sind Teile des Textes, die einem einen anderen Teil der Seite oder sogar eine komplett neue anzeigt, wenn man auf sie klickt.
Sie werden definiert durch das Element a (anchor).
in link in einer xhtml Datei sieht in etwa so aus:
<a href="site.htm" title="Click here to go to another site" accesskey="G">
<u>G</u>oto another site
</a>
- href ist das Ziel, wenn auf den Link geklickt werden sollte.
- title ist die Beschreibung für den link.
- accesskey ist ein "Hotkey". Drückt der Benutzer ALT+den Accesskey markiert er den Link.
Wir basteln uns eine Navigation
Erstelle jetzt eine Seite "Site.htm" mit folgendem Inhalt:
<!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" lang="de" xml:lang="de">
<head>
<title>Meine zweite Seite</title>
</head>
<body>
<div id="header"></div>
<div id="navigation">
<h2>navigation</h2>
<ul>
<li>
<a href="index.htm" title="Meine erste Webseite" accesskey="1">Seite 1</a>
</li>
<li>
<a href="site.htm" title="Meine zweite Webseite" accesskey="2">Seite 2</a>
</li>
</ul>
</div>
<div id="content">
<h1>Meine zweite Seite</h1>
<div>
<h2>Das ist schon meine zweite Seite!</h2>
<p>
Ich produziere Seiten schon fast in Serie!!!
</p>
</div>
</div>
</body>
</html>
Öffne außerdem deine erste XHTML Seite (index.htm) und füge die fett gedruckten Zeilen ein:
<!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" lang="de" xml:lang="de">
<head>
<title>Meine erste Seite</title>
</head>
<body>
<div id="header"></div>
<div id="navigation">
<h2>navigation</h2>
<ul>
<li>
<a href="index.htm" title="Meine erste Webseite" accesskey="1">Seite 1</a>
</li>
<li>
<a href="site.htm" title="Meine zweite Webseite" accesskey="2">Seite 2</a>
</li>
</ul>
</div>
<div id="content">
<h1>Meine erste Seite</h1>
<div>
<h2>Dicker Text</h2>
<p>
Der folgende Text ist dick: <b>Dicker Text</b>
</p>
</div>
<div>
<h2>Kursiver Text</h2>
<p>
Der folgende Text ist kursiv: <i>Kursiver Text</i>
</p>
</div>
HALLO WELT!!!
</div>
</body>
</html>
Was ist da passiert?
Zum einen habe ich unsere Seite in Einheiten unterteilt - es gibt jetzt drei div's, in denen der Inhalt liegt. Ihre Id beschreibt auch schon ihre Eigenschaft.
- header: Der Kopf der Seite
- navigation: Die Navigation
- content: Der Inhalt
Die Navigation besteht aus dem Element ul - eine unordered list.
Durch die Verwendung dieses Elementes optimieren wir unsere Seite bereits für Suchmaschinen - diese sehen die Seiten als Aufzählung.
Aber schön sieht das ganze jetzt leider nicht aus... Wir müssen Anpassungen im Stylesheet vornehmen.
Zuerst nehmen wir das globale div weg. Wir wollen, dass nur divs, die unter dem div mit der id content sind diesen Style bekommen. Das machen wir, indem wir vor das Element div noch die id content schreiben. Außerdem legen wir noch die Schriftfarbe als Schwarz fest.
Das sieht dann so aus:
#content div
{
background-color: white;
width: 200px;
padding: 5px;
marging: 10px;
color: black;
}
Damit haben wir wieder unsere div's so wie vorher.
Jetzt wollen wir, dass die Schrift ansonsten global weiß sein soll.
Bei body setzen wir also color:white;
Außerdem schauen die links so nicht schön aus. Wir wollen sie auch weiß haben, nicht unterstrichen und wenn die Maus drüber ist soll die Schrift orange werden.
Das klingt jetzt nach viel arbeit - ist es aber dank css nicht. Ich zeige zuerst das Ergebnis, und dann erkläre ich wie wir dazu kommen.
a
{
text-decoration: none;
color: white;
}
a:hover
{
color: orange;
}
Füge das zu deinem StyleSheet dazu, speichere es und öffne deine Seite im Browser. Die links sind jetzt weiß. Wenn du über einen Link gehts ändert er seine Farbe und wird orange!
Wie du feststellen wirst sind die Änderungen, die du in dem StyleSheet vorgenommen hast bereits auf beiden Seiten sichtbar. Du sparst dir durch die Verwendung eines StyleSheets also auch die Arbeit deine Änderungen auf jeder Seite einzeln vorzunehmen.
Die Liste mag ja vielleicht gut sein, aber sie ist nicht schön. Die Punkte vor der Navigation wollen wir nicht, außerdem wäre es gut wenn der Inhalt der Seite neben und nicht unter der Navigation wäre.
Zuerst bearbeiten wir die Liste. Wir wollen anstelle der Punkte, dass jeder Eintrag einen weißen Rahmen hat, und wenn man mit der Maus drüber geht soll rechts der Rahmen orange werden um mit dem Link zusammenzupassen.
Die Eigenschaft für den Rahmen heißt border, und setzt sich aus der Breite des Rahmens, der Art und der Farbe zusammen.
Das Thema mit dem Punkt können wir über die Eigenschaft list-style abhandeln - setzen wir sie auf none, und keines wird verwendet.
Außerdem stellen wir noch padding und margin so ein, dass es uns gefällt.
Die Höhe und Breite des Containers (navigation) setzen wir auch. Der Grund dafür folgt später.
Ansprechen tun wir die Liste über ihr Element.
ul
{
padding-left: 0px;
margin-left: 0px;
}
li
{
border: 1px solid white;
width: 140px;
list-style: none;
padding-left: 0px;
margin-left: 0px;
text-align: center;
}
li:hover
{
border-right: 5px solid orange;
}
#navigation
{
height: 120px;
width: 150px;
}
Speicher das StyleSheet und öffne die Website im Browser. Die Liste sieht komplett anders aus, und wenn du mit dem Mauszeiger drüber fährst kommt rechts ein Orangener Balken.
Jetzt kommt der schwierige Teil: Wir wollen den content Block neben der Navigation haben.
Dafür verwenden wir margin, und zwar mit negativen Werten.
Wir erinnern uns: margin ist der Abstand zum Rand. margin-left:0 ist also ein Abstand von 0 vom Rand. margin-left:50 ist ein Abstand vom linken Rand nach rechts von 50. Und margin-left:-50 ist ein Abstand vom linken Rand nach links von 50.
Dasselbe können wir auch nach oben, unten oder rechts machen.
Wir machens nach oben.
Erstelle also ein im StyleSheet für #content einen Eintrag, der soweit nach oben geht wie Navigation nach unten und so weit (oder weiter) nach link wie die Navigation breit ist.
Um das so einfach wie möglich zu machen, haben wir vorher bei #navigation die breite und höhe eingestellt.
Außerdem fügen wir bei #content noch ein padding dazu und einen Rahmen links ums ein bissi zu verziehren.
Das sollte im StyleSheet dann in etwa so aussehen:
a
{
margin-top: -120px;
margin-left: 170px;
padding-left: 20px;
border-left: 1px dashed white;
}
Speichere dein StyleSheet und öffne das XHTML File im Browser. Das Ergebnis sollte ungefähr so aussehen, wenn der Mauszeiger über "Seite 2" ist:
Gratuliere!!
Deine erste eigene Website ist fertig! Du kannst jetzt mehrere Seiten hinzufügen, das Design ändern oder Inhalt hinzufügen.