Computergrundkurs

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”:

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”):

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