Inital commit
This commit is contained in:
Tilman
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Freie Universität Berlin - Institut für Publizistik und Kommunikationswissenschaft</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
|
||||
<link rel="stylesheet" type="text/css" media="print" href="print.css">
|
||||
<link rel="stylesheet" type="text/css" media="braille, embossed, tty, handheld" href="none">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="menu-skip"><a href="#content">Menü überspringen</a><br></div>
|
||||
<div id="top-bar"></div>
|
||||
<div id="top-bar-right"></div>
|
||||
<a href="http://www.kommwiss.fu-berlin.de"><img class="logo" src="logo.jpg" border="0" alt="Freie Universität Berlin"></a>
|
||||
<a href="http://www.kommwiss.fu-berlin.de"><img class="top-bar-left" src="top-bar-left.jpg" border="0" alt="Institut für Publizistik- und Kommunikationswissenschaft"></a>
|
||||
|
||||
<div id="service">
|
||||
<form action=post method=post>
|
||||
<img class="bullet" src="bullet.jpg" alt=""> <a href="">KONTAKT</a> |
|
||||
<img class="bullet" src="bullet.jpg" alt=""> <a href="">ENGLISH</a> |
|
||||
<img class="bullet" src="bullet.jpg" alt=""> <a href="http://www.fu-berlin.de">FU-BERLIN</a> |
|
||||
<div id="search-label"><label for="search">Suchen:</label></div>
|
||||
<input type="text" size="12" name="search" id="search" class="search">
|
||||
<input type="submit" value="Suchen" name="submitSearch" class="search">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="menu">
|
||||
<p>
|
||||
<a class="h1" href="akt">Aktuelles</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Einrichtungen</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Studium</a> <img class="bullet" src="bullet.jpg" alt=""><br>
|
||||
<a class="h2" href="akt">KVV</a><br>
|
||||
<a class="h2" href="akt">Sprechstunden</a><br>
|
||||
<a class="h2" href="akt">Fachschaftsinitiative</a><br> <!-- auch letzter Unterpunkt muss einen Break haben! (IE) -->
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Forschung</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Lehre</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="path">
|
||||
<a href="">Start</a> >
|
||||
<a href="">Studium</a> >
|
||||
<a href="">Layout</a>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<a name="content"></a>
|
||||
|
||||
<!-- INHALT __________________________________________________________________________ -->
|
||||
|
||||
<h1>Überschrift 1</h1>
|
||||
Normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<h2>Überschrift 2</h2>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<h3>Überschrift 3</h3>
|
||||
Normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<ul>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
</ul>
|
||||
|
||||
<!-- Letzte Änderung, Name und eMail des Autors _________________ -->
|
||||
|
||||
<div id="signature">
|
||||
<hr>
|
||||
<p>
|
||||
Erstellt von <a href="mailto:twalther@gmx.net">Tilman Walther</a><br>
|
||||
Letzte Änderung: 2002-12-30
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ENDE INHALT _____________________________________________________________________ -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 B |
Binary file not shown.
|
After Width: | Height: | Size: 288 B |
Binary file not shown.
|
After Width: | Height: | Size: 98 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 275 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 487 B |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 319 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,598 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Seminar "Einführung eines Content Management Systems"</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
|
||||
|
||||
<style type="text/css" media="print">
|
||||
<!--
|
||||
body { font-family: Verdana,Tahoma,Arial,sans-serif; font-size: 70%; background-color:#FFFFFF;}
|
||||
h1 { font-size: 110%; margin-top: 12pt; margin-bottom: 6pt; }
|
||||
h2 { font-size: 100%; margin-top: 12pt; margin-bottom: 6pt; }
|
||||
h3 { font-size: 80%; margin-top: 10pt; margin-bottom: 4pt; }
|
||||
|
||||
a:link { color:#0000DD; text-decoration: underline; }
|
||||
a:visited { color:#0000DD; text-decoration: underline; }
|
||||
a:hover { color:#0000DD; text-decoration: underline; letter-spacing: 1px; }
|
||||
|
||||
#abbildung { margin: 5px; text-align: center; border: 0px; font-size: 75%; font-weight: bold; }
|
||||
img { border: 0px; margin: 2px; }
|
||||
#comment { color:#000077; font-style: italic; font-family: Verdana,Tahoma,Arial,sans-serif; font-size: 80%; }
|
||||
#marker { border: 0px; border-left: 2px solid #000077; padding-left: 5px; }
|
||||
#HTMLcomment { font-style: italic; }
|
||||
|
||||
#bilder { text-align: center; background-color:#FFFFFF; font-size: 80%; }
|
||||
#bilder img { border: 1px solid #557799; padding: 2px; }
|
||||
|
||||
hr { color:#557799; }
|
||||
|
||||
#gliederung { margin-left: 20px; }
|
||||
#gliederung a { color:#000000; letter-spacing: 0px; font-weight: bold; }
|
||||
-->
|
||||
</style>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
<!--
|
||||
body { font-family: Verdana,Tahoma,Arial,sans-serif; font-size: 90%; background-color:#EEEEEE; color:#000000;}
|
||||
h1 { font-size: 130%; margin-top: 12pt; margin-bottom: 6pt; }
|
||||
h2 { font-size: 120%; margin-top: 12pt; margin-bottom: 6pt; }
|
||||
h3 { font-size: 100%; margin-top: 10pt; margin-bottom: 4pt; }
|
||||
|
||||
a:link { color:#0000DD; text-decoration: underline; }
|
||||
a:visited { color:#0000DD; text-decoration: underline; }
|
||||
a:hover { color:#0000DD; text-decoration: underline; letter-spacing: 1px; }
|
||||
|
||||
#abbildung { margin: 5px; text-align: center; border: 0px; font-size: 75%; font-weight: bold; }
|
||||
img { border: 0px; margin: 2px; }
|
||||
#comment { color:#000077; font-style: italic; font-family: Verdana,Tahoma,Arial,sans-serif; font-size: 80%; }
|
||||
#marker { border: 0px; border-left: 2px solid #000077; padding-left: 5px; }
|
||||
#HTMLcomment { font-style: italic; }
|
||||
|
||||
#bilder { text-align: center; background-color:#EEEEEE; font-size: 80%; }
|
||||
#bilder img { border: 1px solid #557799; padding: 2px; }
|
||||
|
||||
hr { color:#557799; }
|
||||
|
||||
#gliederung { margin-left: 20px; }
|
||||
#gliederung a { color:#000000; letter-spacing: 0px; font-weight: bold; }
|
||||
-->
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div style="font-size: 80%; background-color:#FFFFFF; border: 1px dotted black; padding: 5px;">
|
||||
<b>Download</b><br>
|
||||
<a href="download/ag_layout_dokumentation.zip">Artikel als HTML mit unkomprimierten Bildern (277 KB, gezipt)</a><br>
|
||||
<a href="download/ag_layout_ergebnis.zip">Layout mit allen JPEGs und Quellen (19 KB, gezipt)</a><br>
|
||||
</div>
|
||||
|
||||
<h3>Seminar "Einführung eines Content Management Systems" - WS 2002/03</h3>
|
||||
<h3>Bettina Selig, Tilman Walther</h3>
|
||||
<h2>AG Layout-Überarbeitung</h2>
|
||||
<h1>Abschlussbericht</h1>
|
||||
|
||||
<hr>
|
||||
<div id="gliederung">
|
||||
<a href="#ausgangssituation">1 Ausgangssituation</a><br>
|
||||
<a href="#vorgaben">2 Vorgaben</a><br>
|
||||
<a href="#ablauf">3 Ablauf</a><br>
|
||||
<a href="#ergebnisse">4 Ergebnisse</a><br>
|
||||
<a href="#aufteilung">4.1 Aufteilung des Layouts</a><br>
|
||||
<a href="#quellen">4.2 Kommentierte Quelltexte</a><br>
|
||||
<a href="#beispiel">4.2.1 beispiel.html</a><br>
|
||||
<a href="#styles">4.2.2 styles.css</a><br>
|
||||
<a href="#print">4.2.3 print.css</a><br>
|
||||
<a href="#netscape">4.2.4 netscape.html</a><br>
|
||||
<a href="#netscapecss">4.2.5 netscape.css</a><br>
|
||||
<a href="#print">4.3 Bilddateien</a><br>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<a name="ausgangssituation"></a>
|
||||
<h2>1 Ausgangssituation</h2>
|
||||
Die AG baute auf den Ergebnissen der AG Layout vom Seminar Internet-Redaktion im WS 2001/02 auf. Es lag ein fertiger Entwurf vor, der verschiedenen Anforderungen entsprechend angepasst werden musste.
|
||||
|
||||
<div id="abbildung">
|
||||
<a href="screens/entwurf.png">
|
||||
<img src="screens/entwurf.jpg"><br>
|
||||
Abb. 1 - Der (tabellenorientierte) Layoutentwurf aus dem WS 01/02
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a name="vorgaben"></a>
|
||||
<h2>2 Vorgaben</h2>
|
||||
Der Entwurf musste nach der Überarbeitung folgenden Vorgaben genügen:
|
||||
<ol>
|
||||
<li>Das Layout muss in der HTML/CSS-Struktur den derzeit gültigen Standards entsprechen, um eine möglichst hohe Kompatibilität mit den verschiedenen Web-Browsern zu gewährleisten. Neuere Standards sollen so in das Layout eingebunden werden, dass der Zugang zu den Inhalten auch mit veralteten Webbrowsern möglich ist.</li>
|
||||
<li>Das Layout sollte klein sein, um die durch die dynamische Seitengenerierung entstehende Serverlast so gering wie möglich zu halten.</li>
|
||||
<li>Um den Zugang zu den Inhalten jedem zu ermöglichen, muss der Internetauftritt des Instituts weitesgehend barrierefrei sein und den Vorgaben durch das Bundesgleichstellungsgesetz und die WAI entsprechen.</li>
|
||||
<li>Ausdrucke sollen ohne die Bedienelemente der Webseite erfolgen.</li>
|
||||
</ol>
|
||||
<a name="ablauf"></a>
|
||||
<h2>3 Ablauf</h2>
|
||||
Das ursprünglich mit blinden Tabellen implementierte Layout wurde zunächst mit HTML/CSS neu erstellt. Bei den anschließenden Kompatibilitätstests mit verschiedenen Browsern zeigte sich, dass es wohl nicht möglich sein würde, den Entwurf so umzusetzen, dass er sowohl mit den fehlerbehafteten Netscape 4.x-Versionen, als auch mit den restlichen Browsern funktionieren würde, weshalb auf eine duale Lösung umgestellt wurde: Eine voll valide CSS-basierte Version als Standard, für Netscape 4.x-Nutzer eine speziell angepasste Version.<br>
|
||||
Die Standard-Version musste auf Kompatibilität mit den verschiedenen Web-Browsern getestet und mehrfach angepasst werden, da nicht alle verabschiedeten Standards auch von den Browsern interpretiert werden, so dass z.B. nicht sämtliche Elemente der CSS2-Spezifikation genutzt werden konnten, was zum Teil deutliche Einschränkungen bei der Umsetzung des angestrebten Layouts mit sich brachte.<br>
|
||||
<a name="ergebnisse"></a>
|
||||
<h2>4 Ergebnisse</h2>
|
||||
<a name="aufteilung"></a>
|
||||
<h3>4.1 Aufteilung des Layouts</h3>
|
||||
|
||||
<div id="abbildung">
|
||||
<a href="screens/ergebnis.png">
|
||||
<img src="screens/ergebnis.jpg"><br>
|
||||
Abb. 2 - Das Layout in der Standard-Version
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Das Layout besteht aus drei Teilen:
|
||||
<ol>
|
||||
<li>Dem HTML-Framework, in das das Content Management System die Inhalte einfügt,</li>
|
||||
<li>dem Style-Sheet, das das Layout implementiert und dem Style-Sheet für den Druck</li>
|
||||
<li>und den Bilddateien der verschiedenen Layout-Elemente</li>
|
||||
</ol>
|
||||
Das HTML-Framework ist logisch gegliedert, was den Zugriff mit nicht CSS-fähigen Browsern erleichtert. Durch die strenge Trennung von Inhalt und Layout ist eine Nutzung der Webseiten selbst mit Browsern der ersten Generation und rein textorientierten Browsern wie Lynx noch problemlos möglich. Es wurde der Befehlssatz von HTML 4.01 verwendet, auf XHTML wurde mangels breiter Unterstützung durch die existenten Browser verzichtet. Das Framework ist validiert nach den Regeln des World Wide Web Consortiums und auf die gültigen Richtlinien zur Barrierefreiheit hin überprüft. Es entspricht den "Section 508 Guidelines" der US-Regierung, die für US-amerikanische Behörden verbindliche Richtlinie zur Barrierefreiheit ihrer Webseiten.<br>
|
||||
Die beiden Style Sheets sind ebenfalls nach den Regeln des World Wide Web Consortiums validiert. Ausgaben auf Drucker werden, sofern der Browser CSS interpretiert, mit einem angepassten Style Sheet formatiert, was unter anderem bewirkt, dass die Navigationselemente und Schmuckleisten im Druck weggelassen werden.<br>
|
||||
Die Bilddateien konnten gegenüber dem ursprünglichen Entwurf hinsichtlich Größe (ursprünglich insgesamt 44,2 Kilobyte) und Qualität deutlich optimiert werden. So beträgt die Gesamtgröße aller im Framework verankerten Bilder ca. 13 Kilobyte, die Größe des gesamten Layouts mit allen Dateien etwa 22 Kilobyte.
|
||||
|
||||
<h3>Besonderheiten im Netscape 4x Layout</h3>
|
||||
Da der Netscape Navigator in der Version 4 bei der Interpretation von CSS gravierende Fehler macht, dieser Browser jedoch nach wie vor verbreitet ist, wurde eine gesonderte Version erstellt, auf die Typo3 sämtliche Netscape-4x-Browser verweist. Anstatt der CSS-basierten Unterteilung in logische Abschnitte durch <div>-Tags wurde die Netscape-eigene Layer-Technik verwendet, mit der sich eine annährend identische Ausgabe erreichen lässt.<br><br>
|
||||
|
||||
|
||||
<!-- ################################################################################################################### -->
|
||||
|
||||
|
||||
<hr>
|
||||
<a name="quellen"></a>
|
||||
<h2>4.2 Kommentierte Quelltexte</h2>
|
||||
<a name="beispiel"></a>
|
||||
<h3>4.2.1 Beispiel.html</h3>
|
||||
Das HTML-Framework, in das Typo3 die Inhalte einfügt.
|
||||
<pre>
|
||||
<div id="marker"><span id="comment">Dokumententyp-Angabe</span>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></div>
|
||||
<html>
|
||||
<head>
|
||||
<title>Freie Universität Berlin - Institut für Publizistik und Kommunikationswissenschaft</title>
|
||||
<div id="marker"><span id="comment">Angabe des Zeichensatzes - so können deutsche Umlaute direkt ohne HTML-Codierung im Quelltext verwendet werden</span>
|
||||
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"></div>
|
||||
<div id="marker"><span id="comment">Verweis auf die Style Sheets für verschiedene Ausgabemedien</span>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
|
||||
<link rel="stylesheet" type="text/css" media="print" href="print.css">
|
||||
<link rel="stylesheet" type="text/css" media="braille, embossed, tty, handheld" href="none"></div> </head>
|
||||
|
||||
<body>
|
||||
<div id="marker"><span id="comment">Dieser Link wird nur angezeigt, wenn CSS ignoriert wird und dient zum Überspringen der Navigation. Wichtig z.B. für Screen Reader.</span>
|
||||
<div id="menu-skip"><a href="#content">Menü überspringen</a><br></div></div>
|
||||
<div id="marker"><span id="comment">Die Schmuckleiste mit dem Instituts-Schriftzug wir hier eingebunden. Da sämtliche Bilder als Hintergrund im Style Sheet verankert sind, wird die</span>
|
||||
<span id="comment">Leiste nicht angezeigt, wenn CSS ignoriert wird. Das Logo (oben links) ist direkt im HTML eingebunden, da es auch in der Textversion angezeigt werden soll.</span>
|
||||
<div id="top-bar"></div>
|
||||
<div id="top-bar-right"></div>
|
||||
<a href="http://www.kommwiss.fu-berlin.de"><img class="logo" src="logo.jpg" border="0" alt="Freie Universität Berlin"></a>
|
||||
<a href="http://www.kommwiss.fu-berlin.de"><img class="top-bar-left" src="top-bar-left.jpg" border="0" alt="Institut für Publizistik- und Kommunikationswissenschaft"></a></div>
|
||||
<div id="marker"><span id="comment">Das Service-Menü mit dem Suchformular. Das Formular in diesem Entwurf ist ein Dummy, der später</span>
|
||||
<span id="comment">durch Typo3 ersetzt wird - je nachdem, ob die Typo3-Suchengine oder eine externe Lösung verwendet wird.</span>
|
||||
<div id="service">
|
||||
<form action=post method=post>
|
||||
<img class="bullet" src="bullet.jpg" alt=""> <a href="">KONTAKT</a> |
|
||||
<img class="bullet" src="bullet.jpg" alt=""> <a href="">ENGLISH</a> |
|
||||
<img class="bullet" src="bullet.jpg" alt=""> <a href="http://www.fu-berlin.de">FU-BERLIN</a> |
|
||||
<div id="search-label"><label for="search">Suchen:</label></div>
|
||||
<input type="text" size="12" name="search" id="search" class="search">
|
||||
<input type="submit" value="Suchen" name="submitSearch" class="search">
|
||||
</form>
|
||||
</div></div>
|
||||
<div id="marker"><span id="comment">Das Hauptmenü. Die Einträge werden später durch Typo3 dynamisch generiert.</span>
|
||||
<div id="menu">
|
||||
<p>
|
||||
<a class="h1" href="akt">Aktuelles</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Einrichtungen</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Studium</a> <img class="bullet" src="bullet.jpg" alt=""><br>
|
||||
<a class="h2" href="akt">KVV</a><br>
|
||||
<a class="h2" href="akt">Sprechstunden</a><br>
|
||||
<a class="h2" href="akt">Fachschaftsinitiative</a><br> <span id="HTMLcomment"><!-- auch letzter Unterpunkt muss einen Break haben! (IE) --></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Forschung</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Lehre</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="path">
|
||||
<a href="">Start</a> >
|
||||
<a href="">Studium</a> >
|
||||
<a href="">Layout</a>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<a name="content"></a></div>
|
||||
<div id="marker" style="border-left: 2px solid #880000;"><span id="comment" style="color:#880000;">Ab hier beginnt der Inhalt der jeweiligen Seite, der von Typo3 eingefügt wird.</span>
|
||||
<span id="HTMLcomment"><!-- INHALT __________________________________________________________________________ --></span>
|
||||
|
||||
<h1>Überschrift 1</h1>
|
||||
Normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<h2>Überschrift 2</h2>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<h3>Überschrift 3</h3>
|
||||
Normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<ul>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
</ul>
|
||||
|
||||
<div id="marker" style="border-left: 2px solid #880000;"><span id="comment" style="color:#880000;">Die Fußzeile mit dem Datum der letzten Änderung und einem Mail-Link zum Autor wir ebenfalls dynamisch in das Framework eingefügt.</span>
|
||||
<span id="HTMLcomment"><!-- Letzte Änderung, Name und eMail des Autors _________________ --></span>
|
||||
<div id="signature">
|
||||
<hr>
|
||||
<p>
|
||||
Erstellt von <a href="mailto:twalther@gmx.net">Tilman Walther</a><br>
|
||||
Letzte Änderung: 2002-12-30
|
||||
</p>
|
||||
</div>
|
||||
</div></div>
|
||||
<span id="HTMLcomment"><!-- ENDE INHALT _____________________________________________________________________ --></span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</pre>
|
||||
|
||||
|
||||
<!-- ################################################################################################################### -->
|
||||
|
||||
|
||||
<hr>
|
||||
<a name="styles"></a>
|
||||
<h3>4.2.2 styles.css</h3>
|
||||
Mit diesem Style-Sheet werden die Ausgaben auf einen Standard-Browser formatiert.
|
||||
<pre>
|
||||
body { margin: 0px; padding: 0px; background-color:#FFFFFF; font-family: Helvetica, Arial, sans-serif;
|
||||
background-image:url(blue-bar.jpg); background-repeat: repeat-y; }
|
||||
|
||||
#top-bar { position: absolute; top: 42px; background-image:url(top-bar-background.jpg); width: 100%; height: 49px; }
|
||||
.logo { position: absolute; top: 0px; left: 0px; border: 0px; }
|
||||
.top-bar-left { position: absolute; top: 42px; left:136px; }
|
||||
#top-bar-right { position: absolute; top: 42px; right:0px; height: 49px; width: 293px;
|
||||
background-image:url(top-bar-right.jpg); background-repeat: no-repeat; }
|
||||
|
||||
#service { position: absolute; top: 0px; right: 0px; width: 100%; padding: 10px; color:#000099; text-align: right; }
|
||||
#service a { text-decoration: none; color:#000099; background-color:#FFFFFF; }
|
||||
#service a:hover { text-decoration: underline; }
|
||||
#service .bullet { height: 1.6ex; width: 0.6ex; margin-bottom: -0.1ex; }
|
||||
|
||||
.search { font-size: 75%; }
|
||||
|
||||
#path { position: absolute; top: 92px; left: 140px; padding: 4px; font-size: 78%; color:#000099; }
|
||||
#path a { color:#0000FF; text-decoration: underline; }
|
||||
|
||||
#menu { position: absolute; top: 120px; left: 2px; text-align: right; width: 134px; color:#FFFFFF;
|
||||
white-space: nowrap; overflow: hidden; }
|
||||
#menu a { text-decoration: none; }
|
||||
#menu a:hover { text-decoration: underline; }
|
||||
#menu p { margin-top: 10px; } <span id="HTMLcomment">/* engere Version: margin-bottom: 0px; */</span>
|
||||
#menu .h1 { color:#FFFFFF; font-size: 80%; font-weight: bold; }
|
||||
#menu .h2 { color:#FFFFFF; font-size: 70%; margin-right: 1.6ex; }
|
||||
#menu .bullet { height: 1.8ex; width: 0.6ex; margin-bottom: -0.2ex; }
|
||||
|
||||
#content { position: absolute; top: 120px; left: 136px; padding: 2ex; color:#000000; line-height: 120%; }
|
||||
#content a { color:#0000FF; text-decoration: underline; }
|
||||
#content h1 { font-size: 160%; line-height: 100%; }
|
||||
#content h2 { font-size: 130%; line-height: 80%; }
|
||||
#content h3 { font-size: 110%; line-height: 80%; }
|
||||
#content h4 { font-size: 100%; line-height: 80%; }
|
||||
#content h5 { font-size: 80%; line-height: 80%; }
|
||||
#content h6 { font-size: 60%; line-height: 80%; }
|
||||
#content img { margin: 5px; border: 0px; }
|
||||
|
||||
#signature { font-size: 75%; margin-top: 10px; }
|
||||
#signature a { color:#0000FF; text-decoration: underline; }
|
||||
|
||||
<span id="HTMLcomment">/* Barrierefreiheit */</span>
|
||||
#menu-skip { display: none; }
|
||||
#search-label { display: none; }
|
||||
</pre>
|
||||
|
||||
|
||||
<!-- ################################################################################################################### -->
|
||||
|
||||
|
||||
<hr>
|
||||
<a name="print"></a>
|
||||
<h3>4.2.3 print.css</h3>
|
||||
Mit diesem Style Sheet werden Ausgaben auf Drucker formatiert. Das Style Sheet wird sowohl in der Standard- als auch in der Netscape-4x-Version verwendet.
|
||||
|
||||
<pre>
|
||||
body { background-color:#FFFFFF; font-family: Helvetica, Arial, sans-serif; }
|
||||
|
||||
#top-bar { display: none; }
|
||||
.logo { display: none; }
|
||||
.top-bar-left { display: none; }
|
||||
#top-bar-right { display: none; }
|
||||
|
||||
#service { display: none; }
|
||||
|
||||
#path { display: none; }
|
||||
|
||||
#menu { display: none; }
|
||||
|
||||
#content { color:#000000; line-height: 120%; }
|
||||
#content a { color:#0000FF; text-decoration: underline; }
|
||||
#content h1 { font-size: 160%; line-height: 100%; }
|
||||
#content h2 { font-size: 130%; line-height: 80%; }
|
||||
#content h3 { font-size: 110%; line-height: 80%; }
|
||||
#content h4 { font-size: 100%; line-height: 80%; }
|
||||
#content h5 { font-size: 80%; line-height: 80%; }
|
||||
#content h6 { font-size: 60%; line-height: 80%; }
|
||||
#content img { margin: 5px; border: 0px; }
|
||||
|
||||
#signature { font-size: 75%; margin-top: 10px; }
|
||||
#signature a { color:#0000FF; text-decoration: underline; }
|
||||
|
||||
<span id="HTMLcomment">/* Barrierefreiheit */</span>
|
||||
#menu-skip { display: none; }
|
||||
#search-label { display: none; }
|
||||
|
||||
<span id="HTMLcomment">/* Netscape 4.x */</span>
|
||||
#ns4print { display: none }
|
||||
</pre>
|
||||
|
||||
|
||||
<!-- ################################################################################################################### -->
|
||||
<hr>
|
||||
<a name="netscape"></a>
|
||||
<h3>4.2.4 netscape.html</h3>
|
||||
Das HTML-Framework für Netscape 4x mit Layer-Technik.
|
||||
|
||||
<pre>
|
||||
<html>
|
||||
<head>
|
||||
<title>Freie Universität Berlin - Institut für Publizistik und Kommunikationswissenschaft</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
|
||||
<meta name="DC.Language" content="de">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="netscape.css">
|
||||
<link rel="stylesheet" type="text/css" media="print" href="print.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<span id="HTMLcomment"><!-- Logo --></span>
|
||||
<layer left=0px top=0px z-index=1 class="logo">
|
||||
<a href="http://www.fu-berlin.de"><img src="logo.jpg" border=0px></a>
|
||||
</layer>
|
||||
|
||||
|
||||
<span id="HTMLcomment"><!-- Menü links unter Logo --></span>
|
||||
<layer left=0px top=112px width=136px>
|
||||
<div id="menu">
|
||||
<a href="">Aktuelles</a> <span id="green"> </span>
|
||||
</div>
|
||||
<div id="menu">
|
||||
<a href="">Einrichtungen</a> <span id="green"> </span>
|
||||
</div>
|
||||
<div id="menu">
|
||||
<a href="">Studium</a> <span id="green"> </span>
|
||||
<div id="sub-menu">
|
||||
<a href="">KVV</a><br>
|
||||
<a href="">Sprechstunden</a><br>
|
||||
<a href="">Fachschaftsinitiative</a><br>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu">
|
||||
<a href="">Forschung</a> <span id="green"> </span>
|
||||
</div>
|
||||
<div id="menu">
|
||||
<a href="">Lehre</a> <span id="green"> </span>
|
||||
</div>
|
||||
</layer>
|
||||
|
||||
|
||||
<span id="HTMLcomment"><!-- Service-Menü --></span>
|
||||
<layer id="service" left=0px top=0px height=42px width=100%>
|
||||
<form action=post method=post>
|
||||
<img src="bullet.jpg" height="10" width="4"> <a href="">KONTAKT</a> |
|
||||
<img src="bullet.jpg" height="10" width="4"> <a href="">ENGLISH</a> |
|
||||
<img src="bullet.jpg" height="10" width="4"> <a href="">FU-BERLIN</a> |
|
||||
<input type=text size=6 name=search class="search">
|
||||
<input type=submit value=Suchen name=submitSearch class="search">
|
||||
</form>
|
||||
</layer>
|
||||
|
||||
|
||||
<span id="HTMLcomment"><!-- Streifen --></span>
|
||||
<layer id="ns4print" left=0px top=42px height=49px width=100% z-index=0>
|
||||
<layer background="top-bar-background.jpg">
|
||||
<a href="http://www.kommwiss.fu-berlin.de"><img src="top-bar-left.jpg" alt="" align=left height=49px hspace=136px border=0px></a>
|
||||
<img src="top-bar-right.jpg" alt="" align=right height=49px hspace=0px>
|
||||
</layer>
|
||||
</layer>
|
||||
|
||||
|
||||
<span id="HTMLcomment"><!-- Path --></span>
|
||||
<layer id="path" left=136px top=90px>
|
||||
<a href="">Start</a> >
|
||||
<a href="">Studium</a> >
|
||||
<a href="">Layout</a>
|
||||
</layer>
|
||||
|
||||
|
||||
<layer id="content" left=136px; top=112;>
|
||||
|
||||
<span id="HTMLcomment"><!-- INHALT __________________________________________________________________________ --></span>
|
||||
|
||||
<h1>Überschrift 1</h1>
|
||||
Normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<h2>Überschrift 2</h2>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<h3>Überschrift 3</h3>
|
||||
Normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<ul>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<span id="HTMLcomment"><!-- Letzte Änderung, Name und eMail des Autors _________________ --></span>
|
||||
|
||||
<layer id="signature">
|
||||
<hr>
|
||||
<p>
|
||||
Erstellt von <a href="mailto:kes@gmx.net">Bettina Selig</a><br>
|
||||
Letzte Änderung: 2003-02-11
|
||||
</p>
|
||||
</layer>
|
||||
|
||||
<span id="HTMLcomment"><!-- ENDE INHALT _____________________________________________________________________ --></span>
|
||||
|
||||
</layer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</pre>
|
||||
|
||||
|
||||
<!-- ################################################################################################################### -->
|
||||
<hr>
|
||||
<a name="netscapecss"></a>
|
||||
<h3>4.2.5 netscape.css</h3>
|
||||
Das Style Sheet für Netscape 4x.
|
||||
|
||||
<pre>
|
||||
body { margin: 0px; padding: 0px; font-family:Helvetica,Arial,sans-serif;
|
||||
background-color: #FFFFFF; background-image: url(blue-bar.jpg); background-repeat: repeat-y; }
|
||||
|
||||
#menu { margin-top: 1.2em; text-align: right; font-size: 80%; font-weight: bold; color: #FFFFFF; }
|
||||
#menu a { text-decoration: none; color: #FFFFFF;}
|
||||
#sub-menu { margin-right: 0.6em; font-size: 75%; font-weight: normal; }
|
||||
#green { background-color: #99CC00 }
|
||||
|
||||
#service { margin: 10px; margin-right: 20px; text-align: right; font-size: 85%; color: #000099; }
|
||||
#service a { text-decoration: none; color: #000099; background-color:#FFFFFF; }
|
||||
|
||||
.search { font-size: 75%; }
|
||||
|
||||
#path { margin: 0.3em; font-size: 70%; font-weight: normal; color: #000099; }
|
||||
#path a { text-decoration: underline; color: #0000FF; }
|
||||
|
||||
#content { margin: 0.5em; padding: 0.5em; }
|
||||
#content a { color: #0000FF; text-decoration: underline; }
|
||||
#content h1 { font-size: 160%; line-height: 100%; }
|
||||
#content h2 { font-size: 130%; line-height: 80%; }
|
||||
#content h3 { font-size: 110%; line-height: 80%; }
|
||||
#content h4 { font-size: 100%; line-height: 80%; }
|
||||
#content h5 { font-size: 80%; line-height: 80%; }
|
||||
#content h6 { font-size: 60%; line-height: 80%; }
|
||||
#content img { margin: 5px; border: 0px; }
|
||||
#content ul { margin-top: 1em; }
|
||||
#content ol { margin-top: 1em; }
|
||||
|
||||
#signature { margin-top: 10px; font-size: 70%; }
|
||||
#signature a { text-decoration: underline; color: #0000FF; }
|
||||
</pre>
|
||||
|
||||
<!-- ################################################################################################################### -->
|
||||
|
||||
|
||||
<hr>
|
||||
<a name="bilder"></a>
|
||||
<h3>4.3 Bilddateien</h3>
|
||||
Die JPEG-Dateien sind die im Layout verwendeten. Die verlustfrei komprimierten PNG-Dateien können zur weiteren Bearbeitung benutzt werden.<br><br>
|
||||
<div id="bilder">
|
||||
<table border="0" cellspacing="5" cellpadding="10" width="100%">
|
||||
<tr>
|
||||
<td rowspan="2" align="center" valign="middle" height="150" width="297"><img src="images/logo.jpg"><br> Logo oben links</td>
|
||||
<td align="left" valign="bottom" width="90%"><a href="images/logo.jpg">JPEG-Format (4,33 KB)</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" valign="top"><a href="images/logo.png">PNG-Format (15,5 KB)</a></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="2" align="center" valign="middle" height="150"><img src="images/blue-bar.jpg"><br> Menü-Hintergrund</td>
|
||||
<td align="left" valign="bottom"><a href="images/blue-bar.jpg">JPEG-Format (1,07 KB)</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" valign="top"><a href="images/blue-bar.png">PNG-Format (0,14 KB)</a></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="2" align="center" valign="middle" height="150"><img src="images/bullet.jpg"><br> Bullet für Menüpunkte (wird skaliert)</td>
|
||||
<td align="left" valign="bottom"><a href="images/bullet.jpg">JPEG-Format (0,28 KB)</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" valign="top"><a href="images/bullet.png">PNG-Format (0,02 KB)</a></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="2" align="center" valign="middle" height="150"><img src="images/top-bar-background.jpg"><br> Hintergrund für Schmuckleiste oben</td>
|
||||
<td align="left" valign="bottom"><a href="images/top-bar-background.jpg">JPEG-Format (0,31 KB)</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" valign="top"><a href="images/top-bar-background.png">PNG-Format (0,11 KB)</a></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="2" align="center" valign="middle" height="150"><img src="images/top-bar-left.jpg"><br> Instituts-Schriftzug für die Schmuckleiste</td>
|
||||
<td align="left" valign="bottom"><a href="images/top-bar-left.jpg">JPEG-Format (5,45 KB)</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" valign="top"><a href="images/top-bar-left.png">PNG-Format (4,60 KB)</a></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="2" align="center" valign="middle" height="150"><img src="images/top-bar-right.jpg"><br> rechter Abschluß für die Schmuckleiste</td>
|
||||
<td align="left" valign="bottom"><a href="images/top-bar-right.jpg">JPEG-Format (2,44 KB)</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" valign="top"><a href="images/top-bar-right.png">PNG-Format (14,20 KB)</a></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="4" align="center" valign="middle" height="150"><img src="images/favicon.jpg"><br> Icon für die Favoriten</td>
|
||||
<td align="left" valign="bottom"><a href="images/favicon.ico">ICO-Format mit weißem Hintergrund (1,05 KB)</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" valign="middle"><a href="images/favicon2.ico">ICO-Format mit transparentem Hintergrund (1,05 KB)</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" valign="middle"><a href="images/favicon16.png">16x16 Pixel, weißer Hintergrund, PNG-Format (0,27 KB)</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" valign="top"><a href="images/favicon32.png">32x32 Pixel, weißer Hintergrund, PNG-Format (0,48 KB)</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 288 B |
@@ -0,0 +1,10 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Umleitung</title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
Die Seite hat eine neue Adresse:<br>
|
||||
<a href="http://www.tilman.de/container/puk/index.html">http://www.tilman.de/container/puk/index.html</a>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Freie Universität Berlin - Institut für Publizistik und Kommunikationswissenschaft</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
|
||||
<link rel="stylesheet" type="text/css" media="print" href="print.css">
|
||||
<link rel="stylesheet" type="text/css" media="braille, embossed, tty, handheld" href="none">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="menu-skip"><a href="#content">Menü überspringen</a><br></div>
|
||||
<div id="top-bar"></div>
|
||||
<div id="top-bar-right"></div>
|
||||
<a href="http://www.kommwiss.fu-berlin.de"><img class="logo" src="logo.jpg" border="0" alt="Freie Universität Berlin"></a>
|
||||
<a href="http://www.kommwiss.fu-berlin.de"><img class="top-bar-left" src="top-bar-left.jpg" border="0" alt="Institut für Publizistik- und Kommunikationswissenschaft"></a>
|
||||
|
||||
<div id="service">
|
||||
<form action=post method=post>
|
||||
<img class="bullet" src="bullet.jpg" alt=""> <a href="">KONTAKT</a> |
|
||||
<img class="bullet" src="bullet.jpg" alt=""> <a href="">ENGLISH</a> |
|
||||
<img class="bullet" src="bullet.jpg" alt=""> <a href="http://www.fu-berlin.de">FU-BERLIN</a> |
|
||||
<div id="search-label"><label for="search">Suchen:</label></div>
|
||||
<input type="text" size="12" name="search" id="search" class="search">
|
||||
<input type="submit" value="Suchen" name="submitSearch" class="search">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="menu">
|
||||
<p>
|
||||
<a class="h1" href="akt">Aktuelles</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Einrichtungen</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Studium</a> <img class="bullet" src="bullet.jpg" alt=""><br>
|
||||
<a class="h2" href="akt">KVV</a><br>
|
||||
<a class="h2" href="akt">Sprechstunden</a><br>
|
||||
<a class="h2" href="akt">Fachschaftsinitiative</a><br> <!-- auch letzter Unterpunkt muss einen Break haben! (IE) -->
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Forschung</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a class="h1" href="akt">Lehre</a> <img class="bullet" src="bullet.jpg" alt="">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="path">
|
||||
<a href="">Start</a> >
|
||||
<a href="">Studium</a> >
|
||||
<a href="">Layout</a>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<a name="content"></a>
|
||||
|
||||
<!-- INHALT __________________________________________________________________________ -->
|
||||
<p><span style="font-size: 70%; font-weight: bold;">Version: 1.5 vom 12. Februar 2003</span></p>
|
||||
|
||||
Hallo da draußen!<br>
|
||||
|
||||
<h1>Das PuK-Layout ist fertig</h1>
|
||||
Nachdem die Preview schon in der AG diskutiert wurde, nun das Layout in der neuen Version.<br>
|
||||
Inzwischen ist alles erprobt und validiert (sowohl <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tilman.de%2Fcontainer%2Fpuk%2Fbeispiel.html">HTML</a> als auch <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.tilman.de%2Fcontainer%2Fpuk%2Fstyles.css&warning=1&profile=css2">CSS</a>), außerdem kann auf eine zusätzliche Textversion verzichtet werden (s. <a href="http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.tilman.de%2Fcontainer%2Fpuk%2Fbeispiel.html">Lynxview</a>).<br>
|
||||
Das ganze ist bereits getestet unter Netscape 6 & 7, Internet Explorer 6, Opera 6 & 7 und Lynx.<br>
|
||||
Für Netscape 4x gibt es eine <a href="netscape.html">Extra-Version</a>.<br>
|
||||
<br>
|
||||
Zum herunterladen:
|
||||
<ul>
|
||||
<li><a href="bericht/index.html">Unser Abschlussbericht</a></li>
|
||||
<li><a href="beispiel.html">Beispiel-HTML</a>, Standard-Version</li>
|
||||
<li><a href="styles.css">Style Sheet</a>, Standard-Version</li>
|
||||
<li><a href="netscape.html">Beispiel-HTML</a>, Netscape-Version</li>
|
||||
<li><a href="netscape.css">Style Sheet</a>, Netscape-Version</li>
|
||||
</ul>
|
||||
|
||||
<h2>Mängel und Abweichungen in der Standard-Version</h2>
|
||||
<ul>
|
||||
<li>Der Internet Explorer bricht das Menü bei sehr großer Schrift etwas unschön um</li>
|
||||
<li>Opera legt das Service-Menü ein bißchen tiefer und will das Suchfeld nicht verkleinern</li>
|
||||
<li>Netscape und Opera beginnen mit dem Inhalt etwas tiefer, wenn mit einer Überschrift begonnen wird</li>
|
||||
</ul>
|
||||
|
||||
<h2>Sonstiges</h2>
|
||||
Auf einen grafischen "Suchen"-Button haben wir mangels Skalierbarkeit und zugunsten der Nutzer-Wiedererkennung verzichtet.
|
||||
|
||||
<h2>Version History</h2>
|
||||
1.2 - Druck-CSS eingefügt, kleine Änderungen am CSS<br>
|
||||
1.3 - Die Bilder wurden überarbeitet und optimiert<br>
|
||||
1.4 - Break nach Menu-Skip, Label für Formular, kleine Änderungen am CSS<br>
|
||||
1.5 - Menüeinträge verkleinert, Menü-Hintergrund jetzt mit 'interlace striping'<br>
|
||||
|
||||
<p>
|
||||
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tilman.de%2Fcontainer%2Fpuk%2Fbeispiel.html"><img src="valid-html401"></a>
|
||||
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.tilman.de%2Fcontainer%2Fpuk%2Fbeispiel.html&warning=1&profile=css2"><img src="vcss"></a>
|
||||
<a href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww.tilman.de%2Fcontainer%2Fpuk%2Fbeispiel.html&output=Submit&gl=sec508&test=l"><img src="approved_508.gif"></a>
|
||||
<a href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww.tilman.de%2Fcontainer%2Fpuk%2Fbeispiel.html&output=Submit&gl=wcag1-aaa&test="><img src="approved_aa.gif"></a>
|
||||
<a href="http://dejavu.org/cgi-bin/get.cgi?ver=93&url=http://www.tilman.de/container/puk/beispiel.html"><img src="mosaic.jpg"></a> <!-- http://dejavu.org/1993win.htm -->
|
||||
</p>
|
||||
<!-- Letzte Änderung, Name und eMail des Autors _________________ -->
|
||||
|
||||
<div id="signature">
|
||||
<hr>
|
||||
<p>
|
||||
Erstellt von <a href="mailto:twalther@gmx.net">Tilman Walther</a><br>
|
||||
Letzte Änderung: 2003-2-12
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ENDE INHALT _____________________________________________________________________ -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,30 @@
|
||||
body { margin: 0px; padding: 0px; font-family:Helvetica,Arial,sans-serif;
|
||||
background-color: #FFFFFF; background-image: url(blue-bar.jpg); background-repeat: repeat-y; }
|
||||
|
||||
#menu { margin-top: 1.2em; text-align: right; font-size: 80%; font-weight: bold; color: #FFFFFF; }
|
||||
#menu a { text-decoration: none; color: #FFFFFF;}
|
||||
#sub-menu { margin-right: 0.6em; font-size: 75%; font-weight: normal; }
|
||||
#green { background-color: #99CC00 }
|
||||
|
||||
#service { margin: 10px; margin-right: 20px; text-align: right; font-size: 85%; color: #000099; }
|
||||
#service a { text-decoration: none; color: #000099; background-color:#FFFFFF; }
|
||||
|
||||
.search { font-size: 75%; }
|
||||
|
||||
#path { margin: 0.3em; font-size: 70%; font-weight: normal; color: #000099; }
|
||||
#path a { text-decoration: underline; color: #0000FF; }
|
||||
|
||||
#content { margin: 0.5em; padding: 0.5em; }
|
||||
#content a { color: #0000FF; text-decoration: underline; }
|
||||
#content h1 { font-size: 160%; line-height: 100%; }
|
||||
#content h2 { font-size: 130%; line-height: 80%; }
|
||||
#content h3 { font-size: 110%; line-height: 80%; }
|
||||
#content h4 { font-size: 100%; line-height: 80%; }
|
||||
#content h5 { font-size: 80%; line-height: 80%; }
|
||||
#content h6 { font-size: 60%; line-height: 80%; }
|
||||
#content img { margin: 5px; border: 0px; }
|
||||
#content ul { margin-top: 1em; }
|
||||
#content ol { margin-top: 1em; }
|
||||
|
||||
#signature { margin-top: 10px; font-size: 70%; }
|
||||
#signature a { text-decoration: underline; color: #0000FF; }
|
||||
@@ -0,0 +1,115 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Freie Universität Berlin - Institut für Publizistik und Kommunikationswissenschaft</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
|
||||
<meta name="DC.Language" content="de">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="netscape.css">
|
||||
<link rel="stylesheet" type="text/css" media="print" href="print.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Logo -->
|
||||
<layer left=0px top=0px z-index=1 class="logo">
|
||||
<a href="http://www.fu-berlin.de"><img src="logo.jpg" border=0px></a>
|
||||
</layer>
|
||||
|
||||
|
||||
<!-- Menü links unter Logo -->
|
||||
<layer left=0px top=112px width=136px>
|
||||
<div id="menu">
|
||||
<a href="">Aktuelles</a> <span id="green"> </span>
|
||||
</div>
|
||||
<div id="menu">
|
||||
<a href="">Einrichtungen</a> <span id="green"> </span>
|
||||
</div>
|
||||
<div id="menu">
|
||||
<a href="">Studium</a> <span id="green"> </span>
|
||||
<div id="sub-menu">
|
||||
<a href="">KVV</a><br>
|
||||
<a href="">Sprechstunden</a><br>
|
||||
<a href="">Fachschaftsinitiative</a><br>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu">
|
||||
<a href="">Forschung</a> <span id="green"> </span>
|
||||
</div>
|
||||
<div id="menu">
|
||||
<a href="">Lehre</a> <span id="green"> </span>
|
||||
</div>
|
||||
</layer>
|
||||
|
||||
|
||||
<!-- Service-Menü -->
|
||||
<layer id="service" left=0px top=0px height=42px width=100%>
|
||||
<form action=post method=post>
|
||||
<img src="bullet.jpg" height="10" width="4"> <a href="">KONTAKT</a> |
|
||||
<img src="bullet.jpg" height="10" width="4"> <a href="">ENGLISH</a> |
|
||||
<img src="bullet.jpg" height="10" width="4"> <a href="">FU-BERLIN</a> |
|
||||
<input type=text size=6 name=search class="search">
|
||||
<input type=submit value=Suchen name=submitSearch class="search">
|
||||
</form>
|
||||
</layer>
|
||||
|
||||
|
||||
<!-- Streifen -->
|
||||
<layer id="ns4print" left=0px top=42px height=49px width=100% z-index=0>
|
||||
<layer background="top-bar-background.jpg">
|
||||
<a href="http://www.kommwiss.fu-berlin.de"><img src="top-bar-left.jpg" alt="" align=left height=49px hspace=136px border=0px></a>
|
||||
<img src="top-bar-right.jpg" alt="" align=right height=49px hspace=0px>
|
||||
</layer>
|
||||
</layer>
|
||||
|
||||
|
||||
<!-- Path -->
|
||||
<layer id="path" left=136px top=90px>
|
||||
<a href="">Start</a> >
|
||||
<a href="">Studium</a> >
|
||||
<a href="">Layout</a>
|
||||
</layer>
|
||||
|
||||
|
||||
<layer id="content" left=136px; top=112;>
|
||||
|
||||
<!-- INHALT __________________________________________________________________________ -->
|
||||
|
||||
<h1>Überschrift 1</h1>
|
||||
Normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<h2>Überschrift 2</h2>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<h3>Überschrift 3</h3>
|
||||
Normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
normaler Text normaler Text<br>
|
||||
normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text normaler Text<br>
|
||||
|
||||
<ul>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
<li>Aufzählung</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- Letzte Änderung, Name und eMail des Autors _________________ -->
|
||||
|
||||
<layer id="signature">
|
||||
<hr>
|
||||
<p>
|
||||
Erstellt von <a href="mailto:kes@gmx.net">Bettina Selig</a><br>
|
||||
Letzte Änderung: 2003-02-11
|
||||
</p>
|
||||
</layer>
|
||||
|
||||
<!-- ENDE INHALT _____________________________________________________________________ -->
|
||||
|
||||
</layer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
/* just a dummy */
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,75 @@
|
||||
BODY {
|
||||
MARGIN: 0px; COLOR: black; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: white
|
||||
}
|
||||
DD {
|
||||
MARGIN-BOTTOM: 0.5em; MARGIN-LEFT: 1em
|
||||
}
|
||||
DL {
|
||||
FONT-SIZE: 9pt
|
||||
}
|
||||
FORM {
|
||||
MARGIN: 0.5em
|
||||
}
|
||||
IMG {
|
||||
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
|
||||
}
|
||||
.kaestchenGruen {
|
||||
HEIGHT: 0.8em; BACKGROUND-COLOR: #99cc00
|
||||
}
|
||||
.spalteRechtsUnten {
|
||||
VERTICAL-ALIGN: top
|
||||
}
|
||||
.zeileTopBarOben {
|
||||
VERTICAL-ALIGN: bottom; HEIGHT: 42px
|
||||
}
|
||||
.zeileTopBarMitte {
|
||||
HEIGHT: 49px
|
||||
}
|
||||
.zeileTopBarUnten {
|
||||
VERTICAL-ALIGN: top; HEIGHT: 22px
|
||||
}
|
||||
.balkenLinksUnten {
|
||||
BACKGROUND-POSITION: left bottom; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(haus_l.jpg); BACKGROUND-REPEAT: no-repeat
|
||||
}
|
||||
.zelleContent {
|
||||
PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; VERTICAL-ALIGN: top; PADDING-TOP: 1em
|
||||
}
|
||||
.zelleGruen {
|
||||
BACKGROUND-COLOR: #99cc00
|
||||
}
|
||||
.zelleServiceLinks {
|
||||
PADDING-RIGHT: 0.5em; VERTICAL-ALIGN: middle
|
||||
}
|
||||
A.serviceLink:link {
|
||||
COLOR: blue; TEXT-DECORATION: none
|
||||
}
|
||||
A.serviceLink:hover {
|
||||
COLOR: blue; TEXT-DECORATION: underline
|
||||
}
|
||||
A.serviceLink:visited {
|
||||
COLOR: purple; TEXT-DECORATION: none
|
||||
}
|
||||
.zelleSteifen {
|
||||
BACKGROUND-IMAGE: url(streifen.jpg); BACKGROUND-REPEAT: repeat-x
|
||||
}
|
||||
.zelleTextHauptnavigation {
|
||||
PADDING-RIGHT: 0.3em; FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #1f4977; TEXT-ALIGN: right
|
||||
}
|
||||
A.navLink:link {
|
||||
COLOR: white; TEXT-DECORATION: none
|
||||
}
|
||||
A.navLink:hover {
|
||||
TEXT-DECORATION: underline
|
||||
}
|
||||
A.navLink:visited {
|
||||
COLOR: silver; TEXT-DECORATION: none
|
||||
}
|
||||
.zelleTextSubnavigation {
|
||||
FONT-SIZE: 12px; COLOR: white; BACKGROUND-COLOR: #1f4977; TEXT-ALIGN: right
|
||||
}
|
||||
.zelleTopNav {
|
||||
PADDING-LEFT: 1em; FONT-SIZE: 9pt; VERTICAL-ALIGN: middle
|
||||
}
|
||||
.zelleTextBox {
|
||||
BACKGROUND-COLOR: #e6e6fa
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
||||
<!-- saved from url=(0056)http://www.kommwiss.fu-berlin.de/~relaunch/html-entwurf/ -->
|
||||
<HTML><HEAD><TITLE>Home - Institut für Publizistik- und Kommunikationswissenschaft - FU Berlin</TITLE>
|
||||
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK
|
||||
href="Entwurf-Dateien/kommwiss.css" rel=stylesheet>
|
||||
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
|
||||
<BODY leftMargin=0 topMargin=0 rightMargin=0 marginwidth="0" marginheight="0">
|
||||
<TABLE style="HEIGHT: 100%" cellSpacing=0 cellPadding=0 width="100%" summary=""
|
||||
border=0>
|
||||
<TBODY>
|
||||
<TR class=zeileTopBarOben>
|
||||
<TD><A title="Zur Startseite"
|
||||
href="http://kommwiss.fu-berlin.de/index.htm"><IMG height=42 alt=""
|
||||
src="Entwurf-Dateien/logo_oben.jpg" width=136 border=0></A></TD>
|
||||
<TD class=zelleServiceLinks title=Servicelinks align=right colSpan=4><IMG
|
||||
class=kaestchenGruen alt="" src="Entwurf-Dateien/kaestchen_gruen.jpg"
|
||||
width=7> <A class=serviceLink
|
||||
title="Impressum, Kontaktadressen Institut und WWW-Redaktion"
|
||||
href="http://www.kommwiss.fu-berlin.de/~relaunch/html-entwurf/kontakt/">KONTAKT</A>
|
||||
| <IMG class=kaestchenGruen alt=""
|
||||
src="Entwurf-Dateien/kaestchen_gruen.jpg" width=7> <A class=serviceLink
|
||||
title="This page in English"
|
||||
href="http://www.kommwiss.fu-berlin.de/~relaunch/html-entwurf/kontakt/">ENGLISH</A>
|
||||
<IMG class=kaestchenGruen alt=""
|
||||
src="Entwurf-Dateien/kaestchen_gruen.jpg" width=7> <A class=serviceLink
|
||||
title="Homepage der Freien Universität Berlin"
|
||||
href="http://www.fu-berlin.de/">FU-BERLIN</A> </TD></TR>
|
||||
<TR class=zeileTopBarMitte>
|
||||
<TD><A title="Zur Startseite"
|
||||
href="http://kommwiss.fu-berlin.de/index.htm"><IMG height=49 alt=""
|
||||
src="Entwurf-Dateien/logo_mitte.jpg" width=136 border=0></A></TD>
|
||||
<TD><A title="Zur Startseite"
|
||||
href="http://kommwiss.fu-berlin.de/index.htm"><IMG height=49
|
||||
alt="Institut für Publizistik- Und Kommunikationswissenschaft"
|
||||
src="Entwurf-Dateien/institut.jpg" width=218 border=0></A></TD>
|
||||
<TD class=zelleStreifen width="100%" background=Entwurf-Dateien/streifen.jpg
|
||||
height=49> </TD>
|
||||
<TD colSpan=2><IMG height=49 alt=""
|
||||
src="Entwurf-Dateien/zeitungen_rechts.jpg" width=293></TD></TR>
|
||||
<TR class=zeileTopBarUnten>
|
||||
<TD bgColor=#1f4977><IMG height=22 alt=""
|
||||
src="Entwurf-Dateien/logo_unten.jpg" width=136></TD>
|
||||
<TD class=zelleTopNav title="Wo bin ich?" colSpan=3 height=22><A
|
||||
href="http://www.kommwiss.fu-berlin.de/">Home</A> > <A
|
||||
href="http://www.kommwiss.fu-berlin.de/aktuelles/">Aktuelles</A> > <A
|
||||
href="http://www.kommwiss.fu-berlin.de/aktuelles/presse/">Presse</A></TD>
|
||||
<TD class=spalteRechtsUnten align=right rowSpan=2>
|
||||
<TABLE cellSpacing=0 cellPadding=0 width=157
|
||||
summary="News, Suche, kontextsensive Boxen" border=0>
|
||||
<TBODY>
|
||||
<TR>
|
||||
<TD colSpan=2><IMG height=203 alt="" src="Entwurf-Dateien/foto.jpg"
|
||||
width=157></TD></TR>
|
||||
<TR>
|
||||
<TD width=151> </TD>
|
||||
<TD width=8> </TD></TR>
|
||||
<TR>
|
||||
<TD class=zelleTextHauptnavigation width=151><A class=navLink
|
||||
href="http://www.kommwiss.fu-berlin.de/suche/">Suche</A></TD>
|
||||
<TD class=zelleGruen width=8> </TD></TR>
|
||||
<TR vAlign=center>
|
||||
<TD class=zelleTextBox vAlign=center colSpan=2>
|
||||
<FORM action=POST method=post><INPUT size=10 name=search> <INPUT type=submit value=OK name=Button> </FORM></TD></TR>
|
||||
<TR>
|
||||
<TD colSpan=2> </TD></TR>
|
||||
<TR>
|
||||
<TD class=zelleTextHauptnavigation width=151><A class=navLink
|
||||
href="http://www.kommwiss.fu-berlin.de/news/">News</A></TD>
|
||||
<TD class=zelleGruen width=8> </TD></TR>
|
||||
<TR>
|
||||
<TD class=zelleTextBox colSpan=2>
|
||||
<DL>
|
||||
<DT>1.12.2002
|
||||
<DD><A href="http://www.kommwiss.fu-berlin.de/kvv/">KVV für
|
||||
WS2002/03 online</A>
|
||||
<DT>20.8.2002
|
||||
<DD><A
|
||||
href="http://www.kommwiss.fu-berlin.de/news/2002-08-20-relaunch.html">Neue
|
||||
Website online</A> </DD></DL>
|
||||
<P style="FONT-SIZE: 9pt; MARGIN-RIGHT: 0.5em; TEXT-ALIGN: right"><A
|
||||
href="http://www.kommwiss.fu-berlin.de/news/">Newsarchiv</A></P></TD></TR></TBODY></TABLE></TD></TR>
|
||||
<TR height="100%">
|
||||
<TD class=balkenLinksUnten vAlign=top bgColor=#1f4977 height="100%">
|
||||
<TABLE cellSpacing=0 cellPadding=0 width="100%" summary=Hauptnavigation
|
||||
border=0>
|
||||
<TBODY>
|
||||
<TR>
|
||||
<TD class=zelleTextHauptnavigation align=right width=124><A
|
||||
class=navLink
|
||||
href="http://www.kommwiss.fu-berlin.de/aktuelles/">Aktuelles</A></TD>
|
||||
<TD width=8 bgColor=#99cc00> </TD></TR>
|
||||
<TR>
|
||||
<TD align=right width=124> </TD>
|
||||
<TD width=8> </TD></TR>
|
||||
<TR>
|
||||
<TD class=zelleTextHauptnavigation width=124><A class=navLink
|
||||
href="http://www.kommwiss.fu-berlin.de/aktuelles/">Einrichtungen</A></TD>
|
||||
<TD width=8 bgColor=#99cc00> </TD></TR>
|
||||
<TR>
|
||||
<TD align=right width=124> </TD>
|
||||
<TD width=8> </TD></TR>
|
||||
<TR>
|
||||
<TD class=zelleTextHauptnavigation align=right width=124><A
|
||||
class=navLink title="Demo schon besuchter Link"
|
||||
href="http://kommwiss.fu-berlin.de/~relaunch/html-entwurf/index.html">Studium</A></TD>
|
||||
<TD width=8 bgColor=#99cc00> </TD></TR>
|
||||
<TR>
|
||||
<TD class=zelleTextSubnavigation width=124><A class=navLink
|
||||
href="http://www.kommwiss.fu-berlin.de/studium/kvv/">KVV</A>, <A
|
||||
class=navLink
|
||||
href="http://www.kommwiss.fu-berlin.de/studium/sprechstunden/">Sprechstunden</A>,
|
||||
<A class=navLink
|
||||
href="http://www.kommwiss.fu-berlin.de/ini/">Fachschafts-Initiative</A>
|
||||
</TD>
|
||||
<TD width=8 bgColor=#1f4977> </TD></TR>
|
||||
<TR>
|
||||
<TD align=right width=124> </TD>
|
||||
<TD width=8> </TD></TR>
|
||||
<TR>
|
||||
<TD class=zelleTextHauptnavigation align=right width=124><A
|
||||
class=navLink
|
||||
href="http://www.kommwiss.fu-berlin.de/aktuelles/">Forschung</A></TD>
|
||||
<TD width=8 bgColor=#99cc00> </TD></TR>
|
||||
<TR>
|
||||
<TD align=right width=124> </TD>
|
||||
<TD width=8> </TD></TR>
|
||||
<TR>
|
||||
<TD class=zelleTextHauptnavigation align=right width=124><A
|
||||
class=navLink
|
||||
href="http://www.kommwiss.fu-berlin.de/aktuelles/">Lehre</A></TD>
|
||||
<TD width=8 bgColor=#99cc00> </TD></TR>
|
||||
<TR>
|
||||
<TD align=right width=124> </TD>
|
||||
<TD width=8> </TD></TR>
|
||||
<TR>
|
||||
<TD align=right width=124> </TD>
|
||||
<TD width=8 bgColor=#99cc00> </TD></TR></TBODY></TABLE></TD>
|
||||
<TD class=zelleContent colSpan=2 height="100%">
|
||||
<H1 title="<h1>">Lorem ipsum</H1>
|
||||
<P>dolor sit amet, consectetuer adipiscing elit, <A
|
||||
href="http://www.cornerstonemag.com/sed/">sed</A> diam nonummy nibh
|
||||
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
|
||||
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
|
||||
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
|
||||
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
|
||||
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
|
||||
odio dignissim qui blandit praesent luptatum zzril delenit augue duis
|
||||
dolore te feugait nulla facilisi.</P>
|
||||
<H2 title="<h2>">Lorem ipsum</H2>
|
||||
<P>dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
|
||||
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
|
||||
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
|
||||
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
|
||||
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
|
||||
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
|
||||
odio dignissim qui blandit praesent luptatum zzril delenit augue duis
|
||||
dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer
|
||||
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
|
||||
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
|
||||
exerci tation ullamcorper </P></TD>
|
||||
<TD vAlign=top height="100%"> </TD></TR></TBODY></TABLE></BODY></HTML>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>:: ::</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
|
||||
<style type="text/css" media="all">
|
||||
<!--
|
||||
body { font-family: Verdana,Tahoma,Arial,sans-serif; font-size: 90%; background-color:#EEEEEE;}
|
||||
a:link { color:#0000DD; text-decoration: underline; }
|
||||
a:visited { color:#0000DD; text-decoration: underline; }
|
||||
a:hover { color:#0000DD; text-decoration: underline; letter-spacing: 1px; }
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol>
|
||||
<li>
|
||||
<a href="Entwurf.htm">Entwurf aus dem WS 2001/02</a>
|
||||
</li>
|
||||
<li>
|
||||
Ergebnis WS 2002/03
|
||||
<ul>
|
||||
<li><a href="http://www.tilman.de/container/puk/index.html">normale Ansicht</a> (Validierung, Accessibility)</li>
|
||||
<li><a href="http://dejavu.org/cgi-bin/get.cgi?ver=93&url=http://www.tilman.de/container/puk/beispiel.html">Ansicht ohne CSS</a></li>
|
||||
<li>Druckansicht</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.tilman.de/container/puk/bericht/index.html">Abschlussbericht</a>
|
||||
</li>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
/* letzte Änderung: 5. Jan. 2003 */
|
||||
|
||||
body { background-color:#FFFFFF; font-family: Helvetica, Arial, sans-serif; }
|
||||
|
||||
#top-bar { display: none; }
|
||||
.logo { display: none; }
|
||||
.top-bar-left { display: none; }
|
||||
#top-bar-right { display: none; }
|
||||
|
||||
#service { display: none; }
|
||||
|
||||
#path { display: none; }
|
||||
|
||||
#menu { display: none; }
|
||||
|
||||
#content { color:#000000; line-height: 120%; }
|
||||
#content a { color:#0000FF; text-decoration: underline; }
|
||||
#content h1 { font-size: 160%; line-height: 100%; }
|
||||
#content h2 { font-size: 130%; line-height: 80%; }
|
||||
#content h3 { font-size: 110%; line-height: 80%; }
|
||||
#content h4 { font-size: 100%; line-height: 80%; }
|
||||
#content h5 { font-size: 80%; line-height: 80%; }
|
||||
#content h6 { font-size: 60%; line-height: 80%; }
|
||||
#content img { margin: 5px; border: 0px; }
|
||||
|
||||
#signature { font-size: 75%; margin-top: 10px; }
|
||||
#signature a { color:#0000FF; text-decoration: underline; }
|
||||
|
||||
/* Barrierefreiheit */
|
||||
#menu-skip { display: none; }
|
||||
#search-label { display: none; }
|
||||
|
||||
/* Netscape 4.x */
|
||||
#ns4print { display: none }
|
||||
@@ -0,0 +1,46 @@
|
||||
/* letzte Änderung: 5. Jan. 2003 */
|
||||
|
||||
body { margin: 0px; padding: 0px; background-color:#FFFFFF; font-family: Helvetica, Arial, sans-serif;
|
||||
background-image:url(blue-bar.jpg); background-repeat: repeat-y; }
|
||||
|
||||
#top-bar { position: absolute; top: 42px; background-image:url(top-bar-background.jpg); width: 100%; height: 49px; }
|
||||
.logo { position: absolute; top: 0px; left: 0px; border: 0px; }
|
||||
.top-bar-left { position: absolute; top: 42px; left:136px; }
|
||||
#top-bar-right { position: absolute; top: 42px; right:0px; height: 49px; width: 293px;
|
||||
background-image:url(top-bar-right.jpg); background-repeat: no-repeat; }
|
||||
|
||||
#service { position: absolute; top: 0px; right: 0px; width: 100%; padding: 10px; color:#000099; text-align: right; }
|
||||
#service a { text-decoration: none; color:#000099; background-color:#FFFFFF; }
|
||||
#service a:hover { text-decoration: underline; }
|
||||
#service .bullet { height: 1.6ex; width: 0.6ex; margin-bottom: -0.1ex; }
|
||||
|
||||
.search { font-size: 75%; }
|
||||
|
||||
#path { position: absolute; top: 92px; left: 140px; padding: 4px; font-size: 78%; color:#000099; }
|
||||
#path a { color:#0000FF; text-decoration: underline; }
|
||||
|
||||
#menu { position: absolute; top: 120px; left: 2px; text-align: right; width: 134px; color:#FFFFFF;
|
||||
white-space: nowrap; overflow: hidden; }
|
||||
#menu a { text-decoration: none; }
|
||||
#menu a:hover { text-decoration: underline; }
|
||||
#menu p { margin-top: 10px; } /* engere Version: margin-bottom: 0px; */
|
||||
#menu .h1 { color:#FFFFFF; font-size: 80%; font-weight: bold; }
|
||||
#menu .h2 { color:#FFFFFF; font-size: 70%; margin-right: 1.6ex; }
|
||||
#menu .bullet { height: 1.8ex; width: 0.6ex; margin-bottom: -0.2ex; }
|
||||
|
||||
#content { position: absolute; top: 120px; left: 136px; padding: 2ex; color:#000000; line-height: 120%; }
|
||||
#content a { color:#0000FF; text-decoration: underline; }
|
||||
#content h1 { font-size: 160%; line-height: 100%; }
|
||||
#content h2 { font-size: 130%; line-height: 80%; }
|
||||
#content h3 { font-size: 110%; line-height: 80%; }
|
||||
#content h4 { font-size: 100%; line-height: 80%; }
|
||||
#content h5 { font-size: 80%; line-height: 80%; }
|
||||
#content h6 { font-size: 60%; line-height: 80%; }
|
||||
#content img { margin: 5px; border: 0px; }
|
||||
|
||||
#signature { font-size: 75%; margin-top: 10px; }
|
||||
#signature a { color:#0000FF; text-decoration: underline; }
|
||||
|
||||
/* Barrierefreiheit */
|
||||
#menu-skip { display: none; }
|
||||
#search-label { display: none; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 319 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Reference in New Issue
Block a user