Webseiten Layout erstellen - das Coding

Verfasst von Alice am 29.05.2008 - wurde schon 34659 mal gelesen

Kategorie: Html/Css

Bewertung:

30x bewertet

Schwierigkeit: mittel
Kommentare: [ 19 ]

Tag - Schlagwort Tutorial Coding HTML Layout Template CSS

Webseiten Layout erstellen - das Coding - Tutorial

Fortsetzung von Webseiten Layout mit Photoshop erstellen ...

Ziel dieses Tutorials ist es nun, aus unserem mit Photoshop erstellten Layout,
eine valide(XHTML 1.0 Transitional) Website, CSS(Cascading Style Sheets),
die in den gaenigen Browsern korrekt dargestellt wird, zu erstellen.

Also oeffnen wir die von Photoshop generierte index.html mit einem Editor(HTML-Editor) unserer Wahl, ich nutze sehr gerne Waverslave, da die Zip Variante noch nicht einmal installiert werden muss.

Mit der generierten index.html koennen wir nun aber nicht wirklich viel anfangen,
denn Photoshop steckt unsere Bildschnippsel, von Haus aus, in eine Tabelle.

Tabellen sind aber nicht zum Layouten da, sondern nur um Daten tabellarisch darzustellen!

Das Grundgeruest

Wir benoetigen eigentlich nur das Grundgeruest,
deshalb entfernen wir ALLES was zwischen <body> und </body> steht.

Jeh nach PS Version und Einstellung enthaelt der Body-Tag <body> voellig unnoetige Attribute enthalten. Ein Attribut waere z.B. bgcolor="#FFFFFF"

Unser Body-Tag <body> benoetigt aber keinerlei Attribute, sollten diese vorhanden sein, dann einfach aus dem Body-Tag <body> herausloeschen, so dass nur noch <body> bleibt.

Unser Grundgeruest sollte also nun so aussehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hier kommt der Seitentitel hin</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

</body>
</html>

In Zeile 1 wird der Doctype definiert.
Wenn kein Doctype angegeben wird, dann verfaellt der IE automatisch in den Quirks-Modus, was zur folge haette, dass dieser die Darstellungs-Fehler(Bugs) aelterer Versionen wieder hervorkramt.

Im Head-Bereich (alles was zwischen <head> und </head> steht) wird der Titel unserer Webseite mit dem <title> Tag definiert.

Der Meta-Tag <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> bestimmt den verwendeten Zeichensatz unserer Website.

Wir wollen die Website ja nun mittels CSS gestalten, deshalb binden wir unterhalb dieses Metatags schonmal unser externes Stylesheet mit folgendem Link-Tag <link> ein

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

Das Attribut rel="stylesheet" gibt an, dass es sich hierbei um ein Stylesheet handelt.
Mit dem Attribut href="style.css" bestimmen wir den Pfad zu unserer CSS Datei, das Attribut type="text/css" sagt aus dass es sich um CSS-Angabe handelt und das Attribut media="screen" gibt an, dass das Stylesheet fuer die Monitorausgabe bestimmt ist.

Aber wir haben ja doch noch gar keine externe CSS-Datei...

Die CSS-Datei

Kein Problem, wir oeffnen einfach ein neues Dokument, in unserem Editor, und speichern dieses unter der Bezeichnung style.css in unserem Ordner ab, in dem sich auch schon die index.html sowie der images Ordner befinden.

In der style.css definieren wir nun die Formatierung unseres Body-Bereiches
(alles was zwischen <body> und </body> steht)

body{
	background: #ECEBD9 url('images/background.jpg') repeat-x;  		/* Hintergrundbild das senkrecht wiederholt wird */
	color: #686864;														/* Schriftfarbe */
	font: 0.9em 'Trebuchet MS', Geneva, Arial, Helvetica, sans-serif;	/* Schriftgroesse und Schriftart */
	margin: 0px;														/* Aussenabstand */
}

Mit background: #ECEBD9 url(images/background.jpg) repeat-x; definieren wir unseren Hintergrund,
zuerst wird die Hintergrundfarbe definiert,
danach folgt die Hintergrundgrafik und zum Schluss wird mit repeat-x angegeben,
dass die Hintergrundgrafik sich auf der X-Achse wiederholen soll.

Und darunter kommt die Formatierung fuer <p> Tags und <pre> Tags

p, pre{ 
	padding: 5px 10px; 	/* Innenabstand */
	margin: 0px; 		/* Aussenanbstand */
	color: #2E2E3A;		/* Schriftfarbe */
}

Mit padding: 5px 10px; wird der Innenabstand des <p> bzw. <pre> Tags(beides sind Blockelemente) definiert,
also der innere Abstand fuer die Elemente die sich im Blockelement befinden.

padding: 5px 10px; ist die zusammengefasste/gekuerzte Form von:

padding-top: 5px;  		/* Innenabstand oben */
padding-right: 10px;	/* Innenabstand rechts */
padding-bottom: 5px; 	/* Innenabstand unten */
padding-left: 10px;		/* Innenabstand links */

Bei der zusammengefassten Variante muss auf die richtige Reihenfolge geachtet werden.
Die erste Angabe steht immer fuer padding-top,
die zweite Angabe immer fuer padding-right,
die dritte Angabe immer fuer padding-bottom und
die letze Angabe immer fuer padding-left

Wenn die Angaben fuer top - right - bottom - left gleich sind,
dann reicht es aus eine Angabe zu schreiben, diese wird dann fuer alle uebernommen.

Genauso verhaelt es sich wenn nur die Angabe fuer padding-top und padding-right gemacht wurde, padding-bottom uebernimmt dann die Angabe von padding-top und padding-left uebernimmt die Angabe fuer padding-right.

Mit margin: 0px; wird der Aussenanbstand, der Abstand des Elements zu anderen Elementen, definiert.

Genau wie bei padding wird auch hier die gekuerzte Form verwendet, auch hier muss auch die richtige Reihenfolge geachtet werden.

Die erste Angabe steht immer fuer margin-top,
die zweite Angabe immer fuer margin-right,
die dritte Angabe immer fuer margin-bottom und
die letze Angabe immer fuer magrin-left

Wenn die Angaben fuer top - right - bottom - left gleich sind,
dann reicht es aus eine Angabe zu schreiben, diese wird dann fuer alle uebernommen.
Genauso verhaelt es sich wenn nur die Angabe fuer margin-top und margin-right gemacht wurde, margin-bottom uebernimmt dann die Angabe von margin-top und margin-left uebernimmt die Angabe fuer margin-right.

Die Zentrierung

In den Body-Bereich (alles was zwischen <body> und </body> steht) packen wir uns jetzt einen Container(Div-Element), der mit <div> eingeleitet und mit </div> geschlossen wird.

Damit dieses Div-Element mit CSS gestylt(formatiert) werden kann,
weisen wir unserem <div> das Attribut id="ram", zur eindeutigen Identifikation, zu.

In der style.css machen wir die Angaben fuer diesen Container wie folgt:

#ram { 	
	background: url('images/mitte.jpg') repeat-y;		/* Hintergrundbild das senkrecht wiederholt wird */
	width: 716px;										/* Bereit des Div-Elements */
	margin: 0px auto;									/* Aussenabstand - durch auto = mittige Ausrichtung */
}

Mit background: url('images/mitte.jpg') repeat-y; wird der Hintergrund fuer unser Div-Element bestimmt, repeat-y gibt an, dass die Hintergrundgrafik sich senkrecht wiederholen soll.
Mit width: 716px; wird angegeben, dass das Div-Element 716px breit sein soll, hier muss natuerlich jeder die Breite seiner eigenen Grafik mitte.jpg angeben!
Mit margin: 0px auto; bestimmen wir den Aussenabstand, die auto Angabe richtet unser Div-Element immer mittig aus, so dass die Website sich spaeter immer in der Mitte des Browserfensters aufhalten wird.

Der Header

In den Container 'ram' packen wir noch einen Container, der fuer den Header der Website zustendig ist, dieser bekommt auch wieder eine id zugewiesen.

<div id="ram">
	<div id="header"></div>
</div>

In der CSS-Datei definieren wir diesen Container folgendermassen:

#header {
	background: url('images/header.jpg') repeat-y;	/* Hintergrundbild das senkrecht wiederholt wird */
	width: 716px;									/* Bereit des Div-Elements */
	height: 142px;									/* Hoehe des Div-Elements */
}

Mit background: url('images/header.jpg') repeat-y; wird der Hintergrund fuer unser Div-Element bestimmt,
repeat-y gibt an, dass die Hintergrundgrafik sich senkrecht wiederholen soll.
Mit width: 716px; wird angegeben, dass das Div-Element 716px breit sein soll, die Breite ergibt sich aus der Breite der Grafik header.jpg!
Mit height: 142px; wird angegeben, dass das Div-Element 142px hoch sein soll, die Hoehe ergibt sich aus der Hoehe der Grafik header.jpg!

Der Content

In den Container 'ram' packen wir noch einen Container,
dieser muss sich unterhalb des Countainers 'heade' befinden
und ist fuer unseren Content zustaendig, auch er bekommt auch wieder eine id zugewiesen.

<div id="ram">
	<div id="header"></div>
	
	<div id="content"></div>
</div>

Und wieder auf zur CSS-Datei...

#content {		
	width: 490px;										/* Bereit des Div-Elements */
	padding: 10px 15px 15px 35px;						/* Innenabstand */
	float: left;										/* Elemente umflieen lassen */
}

Mit width: 490px; wird angegeben, dass unser Content 490px breit sein soll.

Wie Breit der Content sein soll kann jeder fuer sich selbst entscheiden.
Die Breite der Navigation und des Contents darf zusammen nicht mehr betragen wie die Breite des Containers 'ram'!

padding: 10px 15px 15px 35px; bestimmt wieder die Innenabstaende fuer unseren Div-Containers.

Und float: left; gibt an, dass alles was nun nach unserem Div-Container kommt, auf der Linken Seite des Containders vorbei fliessen soll.

Die Navigation

Fuer die Navigation benoetigen wir einen weiteren Div-Containder,
dieser wird unterhalb des Containders 'content' platziert und bekommt auch eine id zugewiesen.
Die Links stecken wir der Einfachheit halber in eine ungeordnete Liste,
so lassen sich die Links bei Bedarf prima formatieren.

<div id="ram">
	<div id="header"></div>
	
	<div id="content"></div>
	
	<div id="navi">
		<ul>
			<li><a href="link" title="Link Titel">Home</a></li>
			<li><a href="link" title="Link Titel">About me</a></li>
			<li><a href="link" title="Link Titel">Projekte</a></li>
			<li><a href="link" title="Link Titel">Referenzen</a></li>
			<li><a href="link" title="Link Titel">Kontakt</a></li>
			<li><a href="link" title="Link Titel">Impressum</a></li>
		</ul>
	</div>
</div>

In die CSS-Datei schreiben wir folgendes:

#navi{
	width: 140px;										/* Bereit des Div-Elements */
	margin: 0px 0px 0px 565px;							/* Aussenabstand */
	padding: 10px 0px 0px 0px;							/* Innenabstand */
}

* html #navi{	/* Angabe nur fuer den IE */										
	margin: 0px 0px 0px 555px;							/* Aussenabstand */
}

	#navi ul{
		list-style: square inside;						/* Liststyle => Quadrat */
		margin: 0px auto;								/* Aussenabstand */
		padding: 0px;									/* Innenabstand */
	}

Auch hier wird wieder die Breite des Div's bestimmt, sowie Aussen- und Innenabstand. Der Aussenabstand muss mindestns die Breite des Contents betragen, damit die Navigation auch auf der rechten Seite bleibt!
Da der Internet Explorer ein Problem mit dem sogennanten Boxmodell hat,
kommt hier ein CSS Hack(Stern-HTML-Hack) zum Einsatz,
dieser Bewirkt eine andere Darstellung des Aussenabstandes(dieser muss geringer sein) speziell nur fuer den Internet Explorer.
#navi ul beinhaltet die Formatierung fuer unsere ungeordnete Liste in der Navigation,
list-style: square inside; gibt an, dass jeder Listenpunkt mit einem Quadrat versehen wird.
Wuerden wir list-style nicht definieren, so wuerde automatisch ein Kreis als Symbol vor jedem Listenpunkt angezeigt werden.

Der Footer

Weiter geht es mit dem Footer unsere Seite, auch hier fuer benoetigen wir wieder einen Div-Container.

<div id="ram">
	<div id="header"></div>
	
	<div id="content"></div>
	
	<div id="navi">
		<ul>
			<li><a href="link" title="Link Titel">Home</a></li>
			<li><a href="link" title="Link Titel">About me</a></li>
			<li><a href="link" title="Link Titel">Projekte</a></li>
			<li><a href="link" title="Link Titel">Referenzen</a></li>
			<li><a href="link" title="Link Titel">Kontakt</a></li>
			<li><a href="link" title="Link Titel">Impressum</a></li>
		</ul>
	</div>
	
	<div id="footer"></div>
</div>

In die CSS-Datei packen wir folgendes:

#footer {
	background: #ECEBD9 url('images/footer.jpg') top no-repeat;	/* Hintergrundbild das nicht wiederholt wird */
	clear: left;										/* hebt float: left; wieder auf*/
	width: 716px;										/* Bereit des Div-Elements */
	height: 40px;										/* Hoehe des Div-Elements */
	margin: 0px auto;									/* Aussenabstand */
	padding: 25px 0px 0px;								/* Innenabstand */
	line-height: 36px;									/* Zeilenhoehe*/
	text-align: center;									/* Textausrichtung */
	color: #969789;										/* Textfarbe */
}

Mit background: #ECEBD9 url('images/footer.jpg') top no-repeat; geben wir an,
dass der Hintergrund unseres Footers die Farbe #ECEBD9 haben soll,
das Hintergrundbild sich am oberen Rand des Containers aufhalten soll und sich nicht wiederholen soll.
clear: left; hebt das umfliessen unseres Container 'content' wieder auf,
wuerden wir dies nicht machen, so wuerde der Footer u.U. nicht unter dem Content platziert werden.
Die Hoehe und Breite des Footer wird auch hier wieder definiert, die Breite ergibt sich wieder aus der Breite der Hintergrundgrafik footer.jpg.
Auch die Aussen- sowie die Innenabstaende wurden bestimmt.
Mit line-height: 36px; bestimmen wir die Zeilenhoehe des Footers.
text-align: center; richtet den Text im Footer immer mittig aus.
Und als letztes wird die Schriftfarbe mit color: #969789; angegeben.

Die Verweise

Eigentlich waeren wir nun fertig und koennten die Seite mit Inhalt fuellen,
allerdings passt die Formatierung der Links noch nicht wirklich zum Rest der Seite,
weshalb wir die Formatierung hierfuer auch noch schnell in der CSS-Datei definieren.

A {	/* generelle Formatierung eines Links */
	color: #A2B710; 									/* Textfarbe */
	text-decoration: none;								/* Definiert das der Link nicht unterstrichen ist */
}

A:visited { /* Besuchter Link */
	color: #494833;  									/* Textfarbe */
	text-decoration: underline;							/* Definiert dass der Link unterstrichen ist */
}

A:hover, A:active {	/* Aktiver Link & wenn man mit der Maus drueber faehrt */
	color: #686864;  									/* Textfarbe */
	text-decoration: underline;							/* Definiert dass der Link unterstrichen ist */
}

A ist fuer die generelle Formatierung der Links zustaendig,
A in Verbindung mit der Pseudoklasse :visited definiert hier einen schon besuchten Link und
A in Verbindung mit der Pseudoklasse :hover ist fuer das Ueberfahren mit der Maus eines Links zustaendig,
und A in Verbindung mit der Pseudoklasse :active fuer den gerade aktiven Link

Da A:hover sowie A:active die selbe Formatierung bekommen sollen,
kann man diese einfach zusammen fassen indem man sie durch ein Komma trennt,
dann bekommen beide die selben Formatierungen zugewiesen.

Die Ueberschriften

Und zu allerletzt definieren wir nun auch noch die Formatierung fuer die Ueberschriften in der CSS-Datei

h1{
	color: #A2B710;										/* Textfarbe */
	text-align: left; 									/* Textausrichtung */
	padding: 0 5px 5px 5px;								/* Innenabstand */
	font: normal 1.6em verdana, tahoma, sans-serif;		/* Schriftgroesse und Schriftart */
}


h2{
	color: #65666B;										/* Textfarbe */
	text-align: left;  									/* Textausrichtung */
	padding: 0 5px 0px 5px;								/* Innenabstand */
	font-size: 1.4em;									/* Schriftgroesse */
}

Ich habe hier jetzt nur 2 der 6 moeglichen Ueberschriften angegeben,
<h3> - <h6> muss dann, bei Bedarf, jeder selbst definieren.

Wichtig zu wissen!

Der Innenabstand sowie der Aussenabstand, bei den Div-Containdern,
muessen immer von der Hoehe/Breite des Div-Containders abgezogen werden.

D.h. wenn z.B. unser Container 'content' 500 Pixel breit sein soll,
und der Linke Innenabstand 15 Pixel betragen soll, dann duerfen wir in der CSS-Datei die Breite nur noch mit 485 Pixeln angeben!

Wenn der Containder 'footer' nun z.B. 600 Pixel breit sein soll, er einen Innenabstand von je 10px Pixeln auf der Linken und Rechten Seite aufweisen soll, dann darf der Container 'footer' in der CSS-Datei nur noch mit einer Breite von 580Pixeln angegeben werden!

Und noch ein Beispiel fuer die Hoehe,
wenn unser Containder 'header' nun 150Pixel hoch sein soll,
aber der Innenabstand von oben und unten 20Pixel betragen soll,
dann darf der Div-Container 'header' in der CSS nur noch eine Hoehe von 110 Pixeln haben!

Die falschen Darstellungen im Internet Explorer kommen daher,
dass der IE genau damit ein Problem hat!

Naeheres dazu, sowie nochmals eine genau Erklaerung zur Berechnung der korrekten Breiten- Hoehenangabe eines Elementes, gibt es auf SELFhtml nachzulesen ...

Und hier gibt es die komplette CSS-Datei im Ueberblick
=> style.css

Das waer es dann eigentlich im Grossen und Ganzen schon,
viel Spass beim Fuellen der Seite mit Inhalt ...

Kommentar schreibenHinterlasse einen Kommentar

Du musst angemeldet sein, um einen Kommentar zu hinterlassen...

Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...