back


Einführung HTML/CSS eigenes Template

Template Portfolio


› download template.zip

› download aufbau.pdf


Ordnerstruktur der Vorlage:


HTML-Files:

index.html -> Liste Aktuelles

projekte.html -> Projektliste

info.html -> Lebenslauf, Ausstellungen etc.

kontakt.html -> Kontaktadresse

projekt1 -> Beispiel Detailansicht Projekt


CSS-Files:

css/reset.css -> globaler reset, wichtig für Browserkompatibilität

css/style.css -> globale CSS Stile für Inhalte von Template


Image-Files:

images/aktuell -> Bilder für Liste Aktuelles

images/projekte/preview -> Vorschaubilder Projektliste

images/projekte/big -> Bilder groß für Detailansicht Projekt


Aufbau Template


Visueller Aufbau Container “header”:


header


HTML Struktur Container “header”:


<!-- header -->
<div id="header">

	<!-- logo -->
	<div id="logo">
		<h1>Keinstar</h1>
	</div>

	<!-- navigation -->
	<div id="navigation">
		<!-- menüpunkte als unordered list -->
		<h2>
		<ul>
			<li><a href="index.html" title="Aktuell" class="activePage">Aktuell</a></li>
			<li><a href="projekte.html" title="Projekte">Projekte</a></li>
			<li><a href="info.html" title="Info">Info</a></li>
			<li><a href="kontakt.html" title="Info">Kontakt</a></li>
		</ul>
		</h2>
	</div>

</div


Im “Header” befindet sich das Logo und die Navigation. Die Navigation baut auf “vorlage_02″ auf. Zusätzlich wird für den aktiven Punkt im Menü die Klasse “activePage” verwendet welche in “style.css” definiert ist.


#navigation a.activePage {
    color: #000000;
}


Wichtig:

IDs (z.B. für “header” Container) werden im HTML Dokument nur einmalig verwendet. Klassen können jedoch mehrmals eingesetzt werden.


Eine gute Beschreibung dazu ist hier zu finden:

http://css-tutorial.1keydata.com/de/class-id.php


Visueller Aufbau Container “content” (am Beispiel “index.html”):


content


HTML Struktur Container “content”:


<!-- inhalt -->
<div id="content">

	<!-- item -->
	<div class="item">
		<!-- header -->
		<h3>Titel, Datum</h3>
		<!-- media -->
		<div class="media">
			<!-- z.B. Bilder -->
		</div>
		<!-- description -->
		<div class="description">
			<!-- Textbeschreibung -->
		</div>
	</div>

	<!-- item -->
	<div class="item">
		<!-- header -->
		<h3>Titel, Datum</h3>
		<!-- media -->
		<div class="media">
			<!-- z.B. Bilder -->
		</div>
		<!-- description -->
		<div class="description">
			<!-- Textbeschreibung -->
		</div>
	</div>

	<!-- item -->
	<div class="item">
		<!-- header -->
		<h3>Titel, Datum</h3>
		<!-- media -->
		<div class="media">
			<!-- z.B. Bilder -->
		</div>
		<!-- description -->
		<div class="description">
			<!-- Textbeschreibung -->
		</div>
	</div>

	<!-- footer -->
	<div id="footer">
		<p>Keinstar, &copy; 2009</p>
	</div>

</div>


Hier befindet sich der restliche Inhalt (Bilder, Texte etc.) des Templates. Im PDF ›  aufbau.pdf wird die HTML Struktur im “content” Container nochmal für die einzelnen Seiten im Detail beschrieben.


CSS-Stile Container “content”:


/* content */
#content {
    position: absolute;
    top: 160px;
    left: 64px;
    width: 580px;
}
.item {
    padding-bottom: 40px;
}
.media {
    padding-top: 16px;
    padding-bottom: 16px;
}
.description {
   
}
a.readMore {
    color: #ffffff;
    background-color: #666666;
    text-decoration: none;
    padding: 2px 4px 2px 4px;
}
a.readMore:hover {
    background-color: #000000;
}


Anmerkung:

Über die CSS Eigentschaft “padding” kann der Innenabstand zwischen Elementinhalt und den vier Elementgrenzen oben, rechts, unten und links bestimmt werden. Eine gute Erklärung zur Verwendung und möglichen Schreibweisen ist hier zu finden:


http://de.selfhtml.org/css/eigenschaften/innenabstand.htm