Anzeige
Tutorialbeschreibung

Webseite mit XHTML und CSS

Webseite mit XHTML und CSS

Dieses Tutorial soll bei der Umsetzung einer Webseite mit XHTML und CSS als Beispiel bzw Vorlage dienen.

Im Tutorial wird nicht auf die Technik des Slicen bzw. den Export von fertigen HTML - Dateien aus Photoshop bzw. IR eingegangen, sondern XHTML und CSS- Angaben für die Erstellung der Seite verwendet.

Bei diesem Tutorial wird nicht versucht den einfachsten Weg zur fertigen Webseite zu gehen! (Frontpage oder Dreamweaver).
Das bedeutet das die Seite komplett selbst, also per Hand erstellt wird.
Durch die Erstellung per Hand, bekommt man einen genaueren Eindruck über den Aufbau einer Webseite.  

Im Tutorial wird ein zentriertes Seitenlayout mit einer festen Breite von 780 Pixeln verwendet, da diese Form für Anfänger oft leichter zu Handhaben ist, als ein Layout das sich in der Größe dem Browserfenster anpasst. 



Schritt 1:

Zuerst erstellt man einen Entwurf für das Design bzw. Layout der Seite z.B. in Photoshop.

Hierbei ist zu beachten je komplexer das Design wird, desto umfangreicher wird der Aufwand bei der späteren Formatierung über CSS.
Auch auf die Menge bzw. Form des Seiteninhalts sollte bei der
Erstellung des Design geachtet werden.


Hier ein Bild des im Tutorial verwendeten Designs:

Bilder


Schritt 2:

Nun kommt die große Frage „Wie kann man das Layout nun als Webseite umsetzen ?“
Um den Aufbau des Layout zu erklären eine Skizze:


Bilder




Grafische Elemente:

Logo bzw. Header:


 
Bilder



Navigation:


Bilder
Bilder
Bilder
Bilder
Bilder



Layout/Inhalt:

Bilder



Footer:

Bilder


Bilder



Schritt 4:

Erstellung des eigentlichen Code der Seite unter Verwendung eines Text-Editors unter Windows: 
Zubehör-> Editor.

weitere Editoren sind z.B. Scite oder Notepad ++.

(X)HTML- Gerüst:

 

<!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">

<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />


</head>

<body>

</body>

</html>

Bitte diese Angaben in den Editor kopieren und die Datei unter dem Namen „index.htm“ (Dateinamen ohne Anführungszeichen) abspeichern.
Am sinnvollsten ist es einen Ordner für die Webseite zu erstellen in den alle Dateien also auch die Bilder, css und htm Dateien kommen.
Wenn man die Datei erstellt und gespeichert hat, sollte der Seite zuerst ein Name bzw. Titel gegeben werden dies geschieht im  <title></title> Bereich
also einfach zwischen <title> und </title> den Seitentitel eintragen.
Beispiel:
<title>Webdesign mit (x)html und css</title>

 

Im <body></body> Bereich wird ein Div-Container angelegt und ihm die id=“layout“ zugewiesen anhand dieser ID wird er später per CSS formatiert.

<div id="layout"></div>


Beispiel:

<body>

<div id="layout">

</div>

</body>

Schritt 5:

Alle weiteren Angaben werden innerhalb des <div id="layout">...</div> gemacht !

nun erstellen wir den Header der Seite.

<h1><span></span>Webdesign mit xhtml und css</h1>

<h1></h1> wird zur Auszeichnung von Überschriften in HTML verwendet, da das Logo bzw. der Header meist auch Schrift enthält macht eine Auszeichnung als Überschrift also durchaus Sinn.
Der <span></span> Bereich dient später als Platzhalter für die Hintergrundbild die per css Eingebungen wird über <span>-Befehl lassen sich z.B. in Texten einzelne Wörter oder auch Textpassagen anders formatieren. In unserem Fall bleibt der span leer, was eigentlich wann immer möglich, vermieden werden sollte.
Also Bitte nicht zu viele leere Elemente auf einer Seite verwenden.

 

Schritt 6:

Nun wird die Navigation in Form einer HTML-Liste eingefügt, und ihr über id=“navigation“ eine ID für die spätere Formatierung zugewiesen.

<ul></ul> einleiten einer HTML-Liste, <li></li> Einträge in einer Liste.

über den class Befehl lassen sich weitere CSS Formatierungen definieren, über class="Farbe" werden später die verschiedenen Farben der Buttons zugewiesen.


<div id="navigation">

<ul>

<li class="blau"><a href="">Startseite</a></li>

<li class="grau"><a href="">Kontakt</a></li>

<li class="gruen"><a href="">Gallerie</a></li>

<li class="orange"><a href="">Impressum</a></li>

</ul>

</div>


Über <a href=““></a> werden Links also die Verweise auf andere Seiten definiert href=“ziel“ also z.b. <a href=“http://www.google.de“>Link zu google.de</a> für eine externe Seite oder ein Link auf einen Bereich der eigenen Seite z.B. <a href=“kontakt.htm“></a>.

 

Schritt 7:

Nun kommt noch der Bereich für den Inhalt hinzu, auch wider mit einer id für die Formatierung id=“inhalt“.

<div id="inhalt">

<h2>Überschrift</h2>

<p>

Text, Bilder usw.

</p>


</div>

Die Angabe <h2></h2> dient als Auszeichnung der Überschriften, ähnlich <h1> aber eben untergeordnet deshalb <h2>.

Der Text wird zwischen <p></p> notiert, da diese Angabe den Text in einem Absatz formatiert.
 

Schritt 8:
Der Inhalt ist der letzte Bereich vor dem Footer, da der Footer möglichst immer am unteren Ende der Seite angezeigt werden soll.
Deshalb wird der Layout Container auch mit einem </div> vor dem beginn des Footer geschlossen.
Dem Layout div wird später per CSS eine Höhe von 100% zugewiesen, dadurch wird das Browserfenster in der Höhe immer ausgefüllt.


Schritt 9:

Zum Schluss kommt unter den Layout div noch der Footer, dazu werden folgende angaben gemacht:

Der Footer muss unter den Layout div also hinter </div>


<div id="footer">

<p>

<span>xhtml & css</span>

</p>

</div>

Auch hier wird wieder eine ID vergeben, der Absatz <p></p> wird dazu genutzt das zweite Bild im Footer zu platzieren und der <span></span> ist für den Text der im Footer z.B. Copyrighthinweis oder Name des Erstellers bzw. Kontaktdaten.

Mit dem Footer ist der Grundaufbau (Skizze oben) der Seite abgeschlossen.


Damit nichts vergessen wird, hier nochmal der gesamte Code der Seite:

<!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">

<head>

<title>Webdesign mit (x)html und css</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />


</head>


<body>

<div id="layout">

<h1><span></span>Webdesing mit xhtml und css</h1>


<div id="navigation">

<ul>

<li class="blau"><a href="">Startseite</a></li>

<li class="grau"><a href="">Kontakt</a></li>

<li class="gruen"><a href="">Gallerie</a></li>

<li class="orange"><a href="">Impressum</a></li>

</ul>

</div>


<div id="inhalt">

<h2>Überschrift</h2>

<p>

Text

</p>

</div>


</div>


<div id="footer">

<p>

<span>xhtml und css</span>

</p>

</div>


</body>

</html>

 


Nachdem alle Angaben in der Datei index.htm stehen, die Datei abspeichern.
Anschließend kann man sich das Ergebnis, durch öffnen der Datei im Browser (Internet Explorer, Firefox, Opera uvm.) anschauen.
Es sollte sich in etwa folgendes Bild ergeben:

Bilder




CSS
So nun kommt der eigentliche Teil bei dem das Design der Seite umgesetzt wird, dies wird per CSS realisiert. Hier wird nicht auf jede CSS-Angabe genau eingegangen, alle CSS-Angaben sind auf Selfhtml zu finden und genau erklärt.
Um eine bessere Trennung von Inhalt und Design bzw. Formatierung zu erreichen, sollten die CSS-Angaben nach Möglichkeit in eine separate Datei geschrieben werden, in unserem Fall ist das die Datei "style.css".
Zum erstellen der Datei einfach im Editor ein neues Dokument erstellen und dieses als style.css im selben Ordner in dem sich auch die index.htm sowie die Bilder befinden abspeichern.  
In dieser Datei werden alle CSS-Formatierungen nach folgendem Schema geschrieben:


#id, .class, html-tag { Anweisung;  Anweisung2; } 

 


Schritt 1:

Zu Beginn werden erstmal alle Angaben für den body gemacht also z.B. Hintergrundfarbe, Schriftgröße bzw. Schriftart sowie Seitenhöhe usw. gemacht.


html,body {

height:100%;

margin:0;

padding:0;

font-size:100.01%;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-align:center;

background:#ccc;

}


Zusätzliche Angaben für den Internet Explorer 5,5/6:


* html #layout {

height: 100%;

}


 

Mit CSS ist es möglich jedem HTML-Element eine Formatierung zu geben also auch h1-h6, p ,div, span usw.

die Angabe height:100%; gibt an das unser body- bzw. html- Bereich eine Höhe von 100% annehmen soll.

margin:0; und padding:0; geben den Ausen bzw. Innen Abstand zum Rand des Browserfensters an also 0, alle elemente werden genau am Rand angeordnet.
 

Mögliche Angaben:
margin bzw. padding: top (oben) right(rechts) bottom(unten) left(links);
margin bzw. padding: 0 10px 0 10px (von oben 0 rechts 10px unten 0 links 10px)
Für jede Richtung eine Abstandsangabe.

padding = Innenabstand,  margin = Außenabstand.
 

font-size:100.01% bezieht sich auf die Schriftgröße, 100.01% dient dazu fehler in früheren Versionen von Opera bzw. des IE beim vergrößern bzw. verkleinern von Schriftgrößen auszugleichen.

font-family: Verdana, Arial, Helvetica, sans-serif; gibt die Schriftarten an die zur anzeige der Seite verwendet werden sollen.

text-align:center; mit dieser Angabe wird das Layout für den IE 5.5 zentriert.
Über text-align:left/center/right lässt sich die Ausrichtung der Schrift definieren.

Über background: kann man z.B. die Hingergrundfarbe, das Hintergrundbild sowie dessen Wiederhohlung auf der x- bzw. y-Achse,  die Position der Hintergundgrafik sowie das verhalten beim Scrollen beeinflussen.


list-style-type:none; gibt an das keine Aufzählungs- bzw. Listensymbole angezeigt werden sollen.

 

 

Schritt 2:

Danach folgt die Formatierung für den Layout Bereich:


#layout {

margin:0 auto;

width:780px;

text-align:left;

min-height:100%;

height:auto;

border-left:1px solid #000;

border-right:1px solid #000;

background:#fff url(bilder/inhalt_bg.png) repeat-y;

}

 

Über margin:0 auto; erreicht man das der Layout-Bereich immer in der Mitte des Browsers ist also zentriert die 0 ist der Abstand vom oberen bzw. unteren Browserrand. Das auto, gibt ab das der Abstand zum linken bzw. rechten Rand automatisch bestimmt werden soll. Deshalb ist die Seite dann zentriert.

widht: 780px; gibt an das der Layout Bereich in der Breite 780px breite haben soll.

text-align:left; dadurch wird der Text im Layout div linksbündig da im body auf center zur Zentrierung im IE 5.5.

min-height:100%; Mindesthöhe der Seite, also 100%.

border-left:1px solid #000; border-right:1px solid #000;
Rand links und rechts, 1px Breit und als durchgezogene Linie (solid) mit der Farbe schwarz (#000) darzustellen.

Auch Angaben für border-bottom oder border-top sind möglich.

 

Schritt 3:

Dem Header h1, wird mit einer so genannten „Image Replacement Methode“ ein Hintergrundbild zugewiesen. dabei wird der Text der in der Überschrift steht durch eine Grafik ausgetauscht, der Text ist aber auch bei deaktivierter Bild anzeige immer noch zu lesen.

Übersicht der Image Replacement Mothoden:

http://www.mezzoblue.com/tests/revised-image-replacement/

 

h1 {

width: 100%;

height: 167px;

position: relative;

padding:0;

margin:0;

background:#fff;

}

 

h1 span {

background: url(bilder/header.png) no-repeat;

position: absolute;

width: 100%;

height: 100%;

}

 

Überschrift im Inhalt:

h2 {
font-size:120%;
font-weight:normal;
border-bottom:1px solid #999;
margin:0 2em 0 0;
}
 

Schritt 4:

Formatierung der Navigation:


#navigation{
    display:block;
    height:25px;
    font-size:0.9em;
    background:#000 url(bilder/navi_bg.png) repeat-x;
    border-bottom:2px solid #fff;
}

#navigation ul{
    margin:0 auto;
    padding:0;
    list-style-type:none;
    width:37em;
}


#navigation ul li{
    display:block;
    float:left;
    margin:0;
}

#navigation ul li a{
    display:block;
    float:left;
    color:#fff;
    text-decoration:none;
    padding:0 3.5em 0 1em;
    line-height:25px;
}


#navigation ul li a:hover {
    color:#000;
}


.blau {
    background: url(bilder/navi_blau.png) repeat-x;
    border-left:1px solid #fff;
}

.grau {
    background: url(bilder/navi_grau.png) repeat-x;
    border-left:1px solid #fff;
}

.gruen {
    background: url(bilder/navi_gruen.png) repeat-x;
   
    border-left:1px solid #fff;
}

.orange {
    background: url(bilder/navi_orange.png) repeat-x;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
}

 

Schritt 5:

Formatieren des Inhalts:


#inhalt {

padding:4em 200px 8em 150px;

font-size:0.85em;

color:#666;

line-height:1.4em;

}

 

Schritt 6:

Formatieren des Footers:


#footer {

background:url(bilder/footer_bg.png) repeat-x left bottom;

width:780px;

height:196px;

margin:-196px auto;

text-align:center;

font-size:0.7em;

color:#666;

}

 

 

#footer p {

padding:0;

margin:0;

height:196px;

background:url(bilder/footer.png) no-repeat right bottom;

}

 

#footer span {

position:relative;

top:160px;

}

 

Nun sind alle Formatierungen vorgenommen, nachdem speichern der style.css muss diese noch in die index.htm eingebunden werden. Dazu wird im <head>-Bereich (<head>...</head>)der index.htm ein


<style type="text/css">

@import "style.css";

</style>


hinzufügen und abgespeichert. Danach kann die Datei index.htm im Browser geöffnet werden und es sollte das Design zu erkennen sein.
Es kann zu Abweichungen bei der Darstellung in den unterschiedlichen Browsern bzw. Browserversionen kommen.

Online Version: css.blogsite.org/xhtml/
Alle verwendeten Dateien des Tutorial als Zip-Archiv: css.blogsite.org/xhtml/xhtml.zip


weitere Informationen über xhtml und css:
de.selfhtml.org/
www.css4you.de/
jendryschik.de/wsdev/einfuehrung/
barrierefrei.e-workers.de/p_workshops.php



Hinweis:

Das von mir erstellte Design darf frei genutzt und auch erweitert bzw. verändert werden, die verwendeten Bilder stammen aus der Bilddatenbank www.aboutpixel.de und dürfen unter Nennung der Ersteller bzw. der Quellenangabe genutzt werden.

Links zu den verwendeten Bildern bzw. Quellangaben:

http://aboutpixel.de/index.php4?toppage=imagedetails&image_id=38616

http://aboutpixel.de/index.php4?toppage=imagedetails&image_id=17939

 

Viel Erfolg.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von mommi
  • 19.06.2014 - 19:00

Super erklärt! Für (fast) Anfänger optimal! Vielen Dank!

Portrait von ifi

ifi

  • 31.08.2012 - 07:24

Das Tutorial ist super. Auch für mich als Anfänger sehr verständlich und leicht nachzumachen. Als Einstieg absolut ideal!

Portrait von Melly_maus
  • 18.03.2012 - 10:16

Vielen Dank. Sehr informativ. Alles sehr verständlich erklärt.

Portrait von Ai_relav
  • 05.05.2011 - 01:35

Sehr schön die Webseite :) steckt viel Mühe drin wie man sehen kann. Und gut erklärt :)

Portrait von Kloppy
  • 26.02.2011 - 23:35

Sehr gut für den Anfang einer Homepage.
Vielen Dank!

Portrait von artesmaracay
  • 24.11.2010 - 21:44

Prima! Sehr anschaulich erklaert. Dankesehr!

Portrait von Juli68
  • 04.10.2010 - 15:59

Daumen hoch! Ein sehr gut erklärtes Tut!

Portrait von Peko05
  • 02.09.2010 - 22:57

Gut und verständlich erklärt, danke und weiter so.

Portrait von Iflis
  • 02.09.2010 - 18:23

gut erklärt**werd´s mal in Angriff nehmen** Danke für die Mühe

Portrait von ZippiXRay
  • 22.07.2010 - 11:36

Sehr gut für den Anfang einer Homepage.
Vielen Dank!

Portrait von UltimateX
  • 20.06.2010 - 14:02

Sehr schönes Tutorial, gut erklärt Danke

Portrait von 455

455

  • 06.06.2010 - 13:18

sehr schön erklärt.Danke.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 27.05.2010 - 09:24

Schönes Tutorial gleich mal drann setzen...

Portrait von fischmaul
  • 14.03.2010 - 10:45

Super tut, gut erklärt und vool funktionstüchtig. Weiter so. freue mich schon auf das nächste.

Portrait von michundich
  • 12.03.2010 - 19:01

nice work, das war das erste tutorial. jetzt zieh ich mir noch 4999 andere rein und dann kann ich hoffe ich mal meien eigene seite erstellen ;)

Portrait von mohnhaupt
  • 24.12.2009 - 09:51

Sehr gut und einfach erklärt, kenne ich aber schon.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 28.10.2009 - 13:34

Sehr gut gemacht. Besonders schön ist, dass die CSS angaben auf allen browsern gut funtkionieren. Wohl die Beste möglichkeit den Style zu definieren. Dank dir hat alles geklappt :D(und der zufall, ich wollte so ein ähnliches design weswegen ich es gut als beispiel nutzen kann^^)

MFG
MEmnarch

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 08.09.2009 - 10:13

danke dafür wirklich gut beschrieben werds gleich mal testen

Portrait von ivadesign
  • 11.08.2009 - 13:23

Echt viel , aber man schaft es. Danke, werde ich es probieren. Das ist echt nicht einfach.

Portrait von Schlafmonster
  • 09.07.2009 - 16:16

gut beschrieben... für anfänger eine gute hilfe ;)

x
×
×