2. Aufgabe ( CSS ) Cascading Style Sheets

W3C: "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents".

Das Layout einer Seite ist das sichtbare Ergebnis des Rendern, d.h. der Umwandlung von strukturierten Informationen ( Bilder, SVG, XHTML, usw ) in die nativ-Pixel des Bildschirm-Speichers. Diese Aufgabe beschäftigt sich mit CSS und beinhaltet:

Die Erstellung von CSS-Klassen:
a) Style für Inline-Überschriften erstellen, b) Text mit Schatten versehen, Style für "Quasi-Grafik" mit runden Ecken erstellen
Erstellung von CSS-Menü's:
a) Weblinks mit "Button-Style", b) Menü mit "float-Grid", c) Select-Box als Menü, d) Menü am Rand andocken
"Pflichtliste meiner Aktivitäten" nicht vergessen und dort
a) bitte Vor- und Nachteile von Media Queries fachlich-kurz diskutieren, b) bitte die Grenzen von CSS fachlich-kurz diskutieren.

Zu 1a: a-Tag mit Button-Style a-Tag-interer Style

Weblinks können mit CSS-Pseudo-Klassen designed werden.

<style type="text/css" media="screen">
a.button { text-decoration: none; 
           background-color:#fff; color:#229; border:3px outset #ccc; }
a.button:link    { color:#229; background-color:#fff; }
a.button:visited { color:#229; background-color:#fff; }
a.button:hover   { color:#fff; background-color:#229; border:3px  inset #ccc;}
a.button:active  { color:#229; background-color:#fff; border:3px outset #ccc;}
</style>

Bitte legen sie ein a-Tag an, das zu Übungszwecken nur a-Tag-interne Styles ( keine CSS-Klassen ) verwendet und etwa wie folgt aussieht.

Hier bitte

Zu 1b: Text mit Schatten versehen CSS-Klassen erstellen

Mit möglichst wenigen, einfachen CSS-Klassen sollen optische Text-Heraushebungen gemacht werden können, etwa so, wie es das folgende Beispiel zeigt ( Advanced CSS Text Formatting ). Das Beispiel verwendet neben Text und einem pre-Tag lediglich die CSS-Klassen border und center.

Zu 2a: Weblink mit "Button-Style" Menü mit a-Tags

Es gebe Weblinks als a-Tags. Nun soll mit Hilfe von CSS daraus eine "Drop-Down-Menü-Leiste" entstehen. Wie sieht der Style aus?

<div class="css_menu"> Personen
  <a target="_blank" href="http://people.opera.com/howcome/"> Håkon_Wium_Lie</a> 
  <a target="_blank" href="http://www.w3.org/People/Bos/"> Bert Bos</a>
  <a target="_blank" href="http://crockford.com/"> crockford.com</a>
</div>

<div class="css_menu"> Suchmaschinen
  <a target="_blank" href="http://www.bing.com/">        Bing</a>
  <a target="_blank" href="http://de.search.yahoo.com/"> yahoo</a>
</div>

Bitte testen:

Personen Håkon_Wium_Lie Bert Bos crockford.com

Suchmaschinen Bing yahoo

Zu 2b: Float a-Tag-Liste als Menü Beispiel

Ein Tabellenlayouts verwendet feste Pixelwerte, die sich meist erst nach dem Rendern ergeben. HTML-Fließtext ( z.B. mit float:left ) macht eine grafische Anpassung der Darstellung.

Die geräteabhängige Fensterbreite und die festen Kachelgrößen haben zur Folge, daß die erzeugten Quelltexte geräteabhängig werden. Hier kommt eine einfache Form von Web-Links. Es wird ein "dynamisches CSS-float-left" verwendet. Dadurch ergibt sich eine größere Geräteunabhängigkeit mit "a liquid layout".

Die verwendeten Style-Klassen sind:

<style type="text/css" media="screen">
a.width0 {
  float :left !important; display:inline !important; overflow: hidden;
  margin:3px 2px 3px 2px; padding:3px;border:3px outset #ccc; 
}
a.width0:hover {
  border:3px inset #999; cursor:pointer; 
}
.width0 { 
 width:170px; 
}
.float_clear_left { 
 clear:left !important;
}
</style>

Dieses Menü besteht lediglich aus a-Tags, wie etwa

<a class="width0" target="_blank"
   href="http://www.w3.org/People/Berners-Lee/">
   Tim Berners-Lee
</a>

Bitte dieses Menü experimetell testen. Bitte auch die Fensterbreite ändern.

Tim Berners-Lee Håkon Wium Lie Bert Bos Brendan Eich Douglas_Crockford crockford.com

Zu 2c: Select-Box als Menü ARIA?

Ein Select-Tag mit
<select class="menu_select" tabindex="0" size="1" onchange="select_auswahl(this);">...<select> braucht eine kleine Screen-Fläche und kann aufgeklappt und ein <option>...-Item ausgewählt werden. Mit dem this des select-Tags können select- und option-Attribute gelesen/gesetzt werde. Es einen select-Tag ist ein ARIA-taugliches Menü zu entwickeln. Die Funktion select_auswahl(this) ist zu schreiben.

Beachten sie bitte die Hinweise zu Select-Box als Menü

Zu 2d: Menü am Rand andocken CSS-Menü erstellen

Es ist ein CSS-Menü zu erstellen und zu testen eines
Der HTML-Quelltext für das Menü sieht etwa so aus:

<div class="menu_right">
<h3> MMK-Weblinks </h3>
<ul><li><a href="...">Tim Berners Lee</a>
</li><li><a href="...">Håkon Wium Lie</a> 
</li><li><a href="....">Bert Bos</a>
</li><li><a href="...">Brendan Eich</a>
</li></ul> 
</div>

Das Menü soll am rechten Seitenrand ( mittlere Höhe ) positioniert werd, kein ECMAScript benötigen. Beim Überfahren mit der Maus ( hover ) soll das Menü "aufklappten". Als CSS-Styles kann verwenden werden:

div.menu_right mit position: fixed; top:50%; ...
div.menu_right a { color:#fff;width:100%;}
div.menu_right li

Hier ist eine live-demo

Zu 3: Pflichtliste meinen Aktivitäten ist zu aktualisieren!

Für welche Fenstergröße sollte eine Web-Seiten geschrieben werden? Für welches grafische Anzeigegerät sollte eine Web-Seiten geschrieben werden? Welcher Vollbildmodus ( Bildschirmauflösung ) ist "am besten"? Wie kann sich das Layout einer Seite "automatisch" an Bildschirmgröße, Bildschirmauflösung, Fenstergröße anpassen?

Der verwendete Browsers-Bildschirmausschnitt ( window-Objekt-Device-Context ) entspricht der Größe des umschließenden Fensters ( User-Vorlieben ). Media Queries können Geräteabhängigkeiten berücksichtigen und haben Vor- und Nachteile. Nennen sie solche! Welche Unterschiede gibt es zwischen Media Queries und ECMAScript-Zugriffen auf die ( Browser-Screen- und andere ) Elemente?

a) Bitte Vor- und Nachteile von Media Queries fachlich und kurz diskutieren.

b) Bitte fachlich-kurz die Grenzen vom CSS-Rendern diskutieren.

Beachten sie bitte die Hinweise zu Geräteabhängigkeiten

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr