Aufgaben Aufgabe 2: Meine Website - "Highlights" des Campus der JKU Linz

kristina.foedermayr.uni-linz, 5. Mai 2011, 10:15

Der Inhalt

Die Aufgabenstellung lautete eine eigene Website zu erstellen rund um ein Thema aus dem studentischen Umfeld. Nach langem Überlegen habe ich mich dazu entschieden "Highlights" des Linzer Universitätscampus darzustellen. Genauer gesagt habe ich mich für folgenden Aufbau entschieden:

  • Vorwort
  • Inhaltsverzeichnis
  • Allgemeiner Überblick der JKU
  • Der Science Park
  • Das Schloss Auhof
  • Die universitären Parkanlagen und der Teich

Im Vorwort stellte ich kurz vor worum es bei dieser Aufgabe ging und im Rahmen welches Kurses diese Aufgabe gegeben wurde. Anschließend habe ich ein kurzes Inhaltsverzeichnis erstellt. Wobei jede Überschrift verlinkt wurde zu der passenden Stelle auf der Website. Sowie ein Link zu meinem Blog wurde angelegt.

Als nächstes gab ich einen kurzen allgemeinen Überblick über die JKU. Die Gründung, der Namensgeber, Anzahl der StudentInnen heute, die angebotenen Studiengänge, etc. An dieser Stelle fügte ich auch das JavaScript ein, das wie folgt aussieht:

 

<script type="text/javascript"><!--
{
today = new Date()
msPerDay = 24 * 60 * 60 * 1000
gebDat = new Date("December 27, 1571")
daysOld = (today.getTime() - gebDat.getTime()) / msPerDay;
daysOld = Math.round(daysOld)
daystr = "Tage alt";
document.write("Johannes Kepler wäre heute: " + daysOld + daystr);
}
//--> </script>

 

Sinn war es das heutige Alter des Namensgebers der JKU, Johannes Kepler in Tagen anzugeben bzw. wie alt er zum heutigen Tag wäre. Dafür habe ich sein Geburtsdatum, den 27 Dezember 1571 eingegeben und dann ausrechnen lassen wie alt er heute wäre.

Weiters fügte ich noch einen Link zur Website der JKU hinzu.

Als nächstes ging ich auf den Science Park, das Schloss Auhof und die universitären Parkanlagen und den Teich ein. Zusätzlich fügte ich zu jedem dieser Gebäude 3 selbst geschossene Fotos hinzu.

 

Der Style

 

Aufgabe war es den Inhalt und den Style strikt von einander zu trennen. Dementsprechend nutzte ich ein Stylesheet um die Vorlage individuell abzuändern. Ich bin dabei wie folgt vorgegangen:

Als Erstes habe ich das Absatzformat der Überschriften verändert: der oberste Titel de Website wurde zu h1, die Unterüberschriften zu h2, etc. Wobei ich sowohl für h1 als auch h2 eine eigene Styleregel anlegte um sie individuell gestalten zu können.Ich entschied mich dabei für einen Blauton, der gut zum ausgewählten Hintergrund passte.

Als nächstes legte ich die Styleregel "body" an um den allgemeinen Text sowie den Hintergrund verändern zu können. Ich habe mich dabei für einen hellblauen Hintergrund, blaue Überschriften und einen schwarzen Text entschieden. Weiters wählte ich Blocksatz um ein einheitlicheres Schriftbild zu erzeugen. Weiters veränderte ich auch die Formatierung der verwendeten Links um so ein stimmiges Gesamtbild zu erhalten.

Schlussendlich veränderte ich noch den Titel des Dokumentes von "Mein Dokument" auf "Kristina's Website"!

 

Meine Website findet ihr hier!

 

Verwendete Quellen:

1 comment :: Kommentieren

Perfekte Lösung!

reinhard.joechtl.Uni-Linz, 9. Mai 2011, 16:42

Deine Lösung hat mich zur Gänze überzeugt! Die Fotos aus der Digicam würde man für eine Website direkt in verkleinerter Form abspeichern (um die Ladezeit so gering wie möglich zu halten), aber in diesem Fall ist das sicher kein Problem. :)

Verlinken :: Kommentieren