<< FH Düsseldorf

FACE >>
Geschichte >>
Projekte >>
Neue Projektideen >>
Projektgruppe >>
Artikel >>
Weblog >>

Übersicht >>
Inhalt >>
Gestaltung >>
Redaktion >>
Technik >>
Barrierefreiheit >>
Glossar >>
Entwürfe>>

HTML & CSS >>
Webcontainer System >>

Alle Versionen >>


	Fachhochschule Düsseldorf

HTML & CSS Version 3.0

Variante mit einer grossen HTML Tabelle, relativen Größen und Abständen sowie multipel kombinierbaren Style-Klassen.

Alle Versionen >>

Grundsätzliches

Erläuterungen >>

Aufbau und Struktur >>
CSS-Zuweisung >>
Besonderheiten >>

HTML

Erläuterungen >>

HEAD & BODY >>
Kopf-Navigation >>
Kopf-Container >>
Content-Container >>
Mehrzeilige Content-Container >>
Fuß-Navigation >>
Trenner >>

CSS

Erläuterungen >>

Globaldefinitionen >>
Globaldefinition Tabelle >>
Containertypen >>
Containerfarbe >>
Containerabstand links >>
Containerabstand oben >>
Spezialzeile >>
Edit-Container >>
Blockelemente (Content) >>
Listen (Content) >>
Inlineelemente (Content) >>
Textfarben (Content) >>
Globaldef. Links (Content) >>
Linkfarben (Content) >>


	Beispielseite [HTML] >> Beispielseite mit sichtbaren Platzhalter (blank.gif) [HTML] >> Beispielseite für spezielle Statuszeilen [HTML] >> Beispielseite für Editcontainer [HTML] >> CSS-Datei 3.0 [CSS] >> CSS-Datei 3.0 [TXT] >>


	HTML-Bausteine

HEAD & BODY

Doctype ist HMTL 4.01 Strict.

Im Head stehen die Metatags, der generierte Seitentitel sowie die Verknüpfung mit dem Stylesheet.

Im Body stehen nur die Tabelle mit den verschiedenen Containern für Navigation, Logo, Inhalten und zuletzt dem Seitenabschluss, wobei diese verschiedenen Elemente jeweils durch eine eigene Tabellenzeile <tr> erzeugt und dargestellt werden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head lang="de">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<title>Seitentitel</title>
<link href="fhd_3_0.css" rel="stylesheet" type="text/css">
</head>
<body lang="de" class="bggrau">
<table border="0" cellpadding="0" cellspacing="0">


	<!-- HIER KOPFNAVI-TABELLENZEILE (TR) EINFÜGEN -->
	<!-- HIER SPEZIAL-TRENNER24-TABELLENZEILE (TR) EINFÜGEN -->
	<!-- HIER KOPFCONTAINER-TABELLENZEILE (TR) EINFÜGEN -->
	<!-- HIER TRENNER8-TABELLENZEILE (TR) EINFÜGEN -->

	<!-- HIER EINEN ODER MEHRERE CONTENT-CONTAINER EINFÜGEN -->
	(ggf. weitere Trenner zu benutzen)

	<!-- HIER TRENNER8-TABELLENZEILE (TR) EINFÜGEN -->
	<!-- HIER FUSSNAVIGATION-TABELLENZEILE (TR) EINFÜGEN -->


</table>
</body>
</html>

Seitenanfang ^^

Linklink >>
Linklink >>

Linklink >>
Linklink >>

Linklink >>
Link in einem Navigationscontainer, der über zwei Spalten geht >>

Kopf-Navigation

Die Kopfnavigation ist im Prinzip eine Tabellenzeile <tr> in die die entsprechende Anzahl Spalten (max. 4) als <td> integriert werden. Geht eine Link-Spalte wie in diesem Beispiel über zwei Spalten, ist das entsprechende colspan-tag zu nutzen...

<tr>

<td class="
	transparentcolor
	standardleftspace
	navigationcontainer
	">

	<p>
	<a href="#" class="nav">Linklink&nbsp;&gt;&gt;&nbsp;</a><br>
	<a href="#" class="navcurrent">Linklink&nbsp;&gt;&gt;&nbsp;</a><br>
	</p>
</td>


<td class="
	transparentcolor
	standardleftspace
	navigationcontainer
	">

	<p>
	<a href="#" class="nav">Linklink&nbsp;&gt;&gt;&nbsp;</a><br>
	<a href="#" class="navcurrent">Linklink&nbsp;&gt;&gt;&nbsp;</a><br>
	</p>
</td>


<td class="
	transparentcolor
	standardleftspace
	navigationcontainer
	"
	colspan="2"
	>

	<p>
	<a href="#" class="nav">Linklink&nbsp;&gt;&gt;&nbsp;</a><br>
	<a href="#" class="navcurrent">Link in einem Navigationscontainer,
	der über zwei Spalten geht&nbsp;&gt;&gt;&nbsp;</a><br>
	</p>
</td>

</tr>

Seitenanfang ^^


	Fachhochschule Düsseldorf University of Applied Sciences


	Fachbereich Design

Kopf-Container

Der Kopfcontainer ist im HTML- und CSS-Code ein normaler Container mit zweispaltiger Breite (376px).

In der ersten Spalte ist grundsätzlich das FHD-Logo mit der Unterzeile "Fachhochschule Düsseldorf..." platziert.

Die zweite Spalte ist für die Bezeichnung der jeweiligen Einrichtung reserviert. Insofern es sich bei der Seite um die DVZ, einen Fachbereich, die Hochschulbibliothek, das MKI, das Rektorat oder den Senat handelt, wird in der zweiten Spalte analog zur ersten das Signet der Einrichtung platziert.

<tr>

<td class="
	headcolor
	standardleftspace
	textcontainer
	">

	<p>
	<img src="http://www.fh-duesseldorf.de/ico/fhd.png"
	width="74"
	height="26"
	alt="FH D">
	<br>
	Fachhochschule D&uuml;sseldorf<br>
	University of Applied Sciences</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
</td>

<td class="
	headcolor
	combinedheadleftspace
	textcontainer
	">

	<p>
	<img src="http://www.fh-duesseldorf.de/ico/mki.png"
	width="80"
	height="26"
	alt="FB Design">
	<br>
	Fachbereich Design</p>
	</td>

</tr>

Seitenanfang ^^

Content-Container

Im Folgenden werden verschiedene Kombinationsmöglichkeiten von Text-Content-Containern in einer Tabellenzeile dargestellt. Werden statt Text-Containern hier andere Containertypen eingefügt, so ist eine entsprechende andere CSS-Klasse als die Klasse "textcontainer" zu verwenden. Ein Beispiel hierzu findet sich unten bei der Erläuterung von Content-Containern über mehrere Zeilen.

Content-Container

Breite: vierspaltig
Container: 1x760


	<tr> <td class=" standardleftspace standardcolor textcontainerindent" colspan="4" > <!-- Hier Block-Elemente und Content einfügen --> </td> </tr>

Seitenanfang ^^

Content-Container

Breite: vierspaltig
Container: 2x376

<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	colspan="2"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	colspan="2"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>


</tr>

Seitenanfang ^^

Content-Container

Breite: vierspaltig
Container: 4x184

<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

</tr>

Seitenanfang ^^

Content-Container

Breite: vierspaltig
Container: 568+184

<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	colspan="3"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>


</tr>

Seitenanfang ^^

Content-Container

Breite: vierspaltig
Container: 184+568

<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	colspan="3"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

</tr>

Seitenanfang ^^

Content-Container

Breite: vierspaltig
Container: 184+376+184

<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	colspan="2"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

</tr>

Seitenanfang ^^

Content-Container

Breite: vierspaltig
Container: 184+184+376

<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	colspan="2"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

</tr>

Seitenanfang ^^

Content-Container

Breite: vierspaltig
Container: 376+184+184

<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	colspan="2"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

</tr>

Seitenanfang ^^

Content-Container

Breite: dreispaltig
Container: 1x568


	<tr> <td class=" standardleftspace standardcolor textcontainer" colspan="3" > <!-- Hier Block-Elemente und Content einfügen --> </td> </tr>

Seitenanfang ^^

Content-Container

Breite: dreispaltig
Container: 3x184

<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

</tr>

Seitenanfang ^^

Content-Container

Breite: dreispaltig
Container: 376+184

<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	colspan="2"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

</tr>

Seitenanfang ^^

Content-Container

Breite: dreispaltig
Container: 184+376

<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	colspan="2"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

</tr>

Seitenanfang ^^

Content-Container

Breite: zweispaltig
Container: 1x376


	<tr> <td class=" standardleftspace standardcolor textcontainer" colspan="2" > <!-- Hier Block-Elemente und Content einfügen --> </td> </tr>

Seitenanfang ^^

Content-Container

Breite: zweispaltig
Container: 2x184

<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainer"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

</tr>

Seitenanfang ^^

Content-Container

Breite: einspaltig
Container: 1x184


	<tr> <td class=" standardleftspace standardcolor textcontainer" > <!-- Hier Block-Elemente und Content einfügen --> </td> </tr>

Seitenanfang ^^

Content-Container über mehrere Zeilen

Ein Container soll, wie im Beispiel das Bild, über mehrere Zeilen gehen.

<!-- linker container und rechter container, erste tr-->
<tr>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	colspan="2"
	rowspan="3"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

<td class="
	standardleftspace
	standardcolor
	textcontainerindent"
	colspan="2"
	>
	<!-- Hier Block-Elemente und Content einfügen -->
</td>

</tr>



<!-- Trenner 8 zwischen den beiden rechten Container, zweite tr-->
<tr>
<td class="
	standardtopspace"
	colspan="2"
	>
	<img src="ico_3_0/blank.gif" width="376" height="1" alt="">
</td>
</tr>



<!-- rechter, unterer Container, dritte tr -->
<tr>
<td class="
	standardleftspace
	standardcolor
	imagecontainer"
	colspan="2"
	>
	<!-- Hier wäre das Bild -->
</td>
</tr>

Seitenanfang ^^

FH D FB 2
24.12.2003

Seitenanfang ^^
Sitemap >>
Suche >>
Impressum >>

english >>
français >>
español >>

Fuß-Navigation

Die Fuß-Navigation wird immer am Ende einer Seite eingefügt. Sie benutzt ähnlich der Kopfnavigation ebenfalls eine Spezialeinlage, die oben und rechts auf Abstände verzichtet und ohne Farbe auskommt. Bitte darauf achten, daß zwischen Fussnavigation und dem letzten Content-Container immer ein 8er-Trenner-Container dazwischengefügt ist.

<tr>

<td class="
	transparentcolor
	standardleftspace
	navigationcontainer
	">

	<p> FH D - FB 2<br>
	24.12.2003 </p>
</td>

<td class="
	transparentcolor
	standardleftspace
	navigationcontainer
	">

	<p>
	<a href="seitenanfang" class="nav">Seitenanfang&nbsp;^^&nbsp;</a><br>
	<a href="#" class="nav">Sitemap&nbsp;&gt;&gt;&nbsp;</a><br>
	<a href="#" class="nav">Suche&nbsp;&gt;&gt;&nbsp;</a><br>
	<a href="#" class="nav">Impressum&nbsp;&gt;&gt;&nbsp;</a><br>
	<br>
	<a href="#" class="nav">english&nbsp;&gt;&gt;&nbsp;</a><br>
	<a href="#" class="nav">français&nbsp;&gt;&gt;&nbsp;</a><br>
	<a href="#" class="nav">español&nbsp;&gt;&gt;&nbsp;</a>
	</p>

</td>

</tr>

Seitenanfang ^^

Trenner 8

Höhe: 8px

Standardtrenner, der die 8px vertikalen Abstand zwischen den Containern erzeugt. Diese Trennerzeile kann auch - wie in der Beispielseite - mehrere Spalten analog den darunterstehenden Containern haben.


	<tr> <td class="standardtopspace" colspan="4"> <img src="ico_3_0/blank.gif" width="760" height="1" alt=""> </td> </tr>

Seitenanfang ^^

Trenner 24

Höhe: 24px

Dieser größere Trenner wird benutzt, wenn auf einer Seite Sinnabschnitte die an sich schon aus Containern mit Trennern bestehen getrennt werden sollen. Diese Trennerzeile kann auch - wie in der Beispielseite - mehrere Spalten analog den darunterstehenden Containern haben.


	<tr> <td class="specialtopspace" colspan="4"> <img src="ico_3_0/blank.gif" width="760" height="1" alt=""> </td> </tr>

FH D
02.01.2007

Seitenanfang ^^