Im ersten Punkt findet ihr eine Tabelle mit allen Styles, die weitgehend frei kombinierbar sind. Ich habe in dieser Tabelle absichtlich die Styles rausgelassen, die nur in Modulen, also in einer Kombination von bestimmten Tags vorkommen dürfen. Diese sind im dritten Punkt 'Module' nochmal aufgelistet. Die korrekte Verwendung von Bildern wird in Punkt Zwei erläutert. Wenns Probleme gibt: fragt mich!
Timo Meisel
timo.meisel@glizz.net
Tel. 0178/7854168
zuhause 040/41929663
Die Tabelle solltet ihr am besten im Querformat auf dem Farblaser ausdrucken. Fühlt euch frei, vor allem den Text umzuschreiben und zu ergänzen, um Verständnisprobleme rauszukriegen.
Ganz vorweg: Bilder im Hauptserver liegen immer im Ordner images/content-images, Bilder in den Seminarwebseiten liegen immer im Ordner images! Auf dem Audioserver gibt es zwei Möglichkeiten mit verschiedenen Varianten, um Bilder einzubinden. Damit sind wir dann auch ganz schnell bei den Modulen. Eine Möglichkeit ist, ein relativ großes Bild mittig in einen Fließtext zu platzieren, so dass der Textfluss unterbrochen wird. Das sieht so aus:
Bildunterschrift
Das Bild ist in diesem Fall 400 Pixel breit und hat die Klasse content. Man unterbricht den Textfluss, indem man den Paragrafen schließt und fügt folgenden Code ein, bei dem dann die Quelle und sonstige Daten entsprechend angepasst werden:
<img class="center" src="x" alt="Textbeschreibung des Bildes" />
<p class="unterbild">Bildunterschrift</p>
Die zweite Möglichkeit ist, dass der Text rechts um ein Bild herumfließt. Das ist zum Beispiel beim Ansprechpartner so, oder bei der Liste mit Bildern auf der Audiolab Seite, oder auf der Workshop-Archiv Seite. Mehr zu diesen Sachen bei den konkreten Modulen. Das Bild hat hier die Klasse content und kann eine beliebige (sinvolle!) Breite und Höhe haben. Es wird in den entsprechenden Paragrafen eingeschlossen. Man kann sowohl den Standardparagrafen p für Fließtext als auch den kleineren Paragrafen p class="kleiner" benutzen. Der Code:
<p><img class="content" src="x" alt="Textbeschreibung des Bildes" />Text</p>
Ganz wichtig: Wenn der der Text nicht lang genug ist, um das gesamte Bild zu umfliessen, muss unbedingt folgender Tag hinter den geschlossenen Paragrafen gehängt werden: <br style="clear: both;" /> Dieser Tag sorgt dafür, dass nach dem Bild auf jeden Fall umgebrochen wird. Wenn er nicht benutzt wird, kann es sein, dass selbst Überschriften rechts am Bild vorbeifließen, dass die Abstände nicht mehr stimmen und ähnliche fiese Sachen!
Dr. Rolf. Großmann
grossmann@uni-lueneburg.de
Tel. 78-1231
Raum 7.207
<h3>Ansprechpartner</h3>
<p class="ansprechpartner">
<img class="content" src="/images/content-images/portrait-xyz.jpg" alt="Name des Ansprechpartners" />
<span class="partner">Dr. Rolf. Großmann</span><br />
<a href="mailto:grossmann@uni-lueneburg.de">grossmann@uni-lueneburg.de</a><br />
Tel. 78-1231<br />
Raum 7.207
</p>
Steinberg Cubase SX 2 (Windows XP / Mac OS X),
Emagic Logic Platinum 6 (Mac OS X),
Ableton Live 3 (Windows XP und Mac OS X)
<h3>Listenpunktüberschrift</h3>
<p class="kleiner">
<a href="images/content-images/x-big.jpg"><img class="content" src="images/content-images/x.jpg" alt="Textbeschreibung des Bildes" /></a>Beschreibungstext
</p>
<br style="clear:both;" />
Beschreibung.
<h3>Seminartitel</h3>
<div class="unterzeile">Seminardaten</div>
<p class="kleiner">Beschreibung.</p>
<p class="www"><a href="link" title="Ziel" onclick="window.open(this.href,'_blank');return false;"> ggf. Link zur Seminarwebseite</a></p>
Beschreibung.
<h3>Titel Künstlerische Arbeit</h3>
<div class="unterzeile">Arbeit von Produzent</div>
<p class="kleiner">Beschreibung.</p>
<p class="www"><a href="link" title="Ziel" onclick="window.open(this.href,'_blank');return false;"> Dokumentations-Website</a></p>
Beschreibungstext.
RealAudio | MP3 [41 MB] | Ogg Vorbis [49.4 MB] | WMA [56.4 MB]
<h3>Autor: Track</h3>
<p class="kleiner">Beschreibungstext.</p>
<p class="audio"><a href="/audio1/autor_track.ram" title="vorhören">RealAudio</a><a href="/audio1/autor_track.mp3" title="runterladen"> | MP3 [41 MB]</a> <a href="/audio1/autor_track.ogg" title="runterladen"> | Ogg Vorbis [49.4 MB]</a><a href="/audio1/autor_track" title="runterladen"> | WMA [56.4 MB]</a></p>
Beschreibung.
<h3>Text: Titel</h3>
<div class="unterzeile">Magisterarbeit/Hausarbeit/Essay von Autor</div>
<p class="kleiner">Beschreibung.</p>
<p class="text"><a href="link" title="Ziel" onclick="window.open(this.href,'_blank');return false;"> Textformat</a></p>
Beschreibung.
<h3>Titel Künstlerische Arbeit</h3>
<div class="unterzeile">Arbeit von Produzent</div>
<p class="kleiner">Beschreibung.</p>
<p class="www"><a href="link" title="Ziel" onclick="window.open(this.href,'_blank');return false;"> Dokumentations-Website</a></p>
Die klangästhetische Gestaltung der Lebenswelt - Sounddesign und -branding
64509 Grossmann/ Grote | WS 05/06
S | 5-9 | B1 | Di 16.30-18.00 | 7.215 UC
Quelle: http://audio.uni-lueneburg.de/seminarwebseiten/sounddesign/styleguide.php, 23.11.2024