Web Engineering 1/CSS

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
__NOTOC__
{{Ziele|
* Struktur per HTML, Layout per CSS
* CSS ist eine Formatierungssprache
* Durch Selektoren werden Strukturelemente angesprochen
* Markierung von HTML Elementen mittels Klassen und IDs
* Klares Verständnis der Trennung von Inhalt und Gestaltung
|
* Gestaltung von Formularen
* Klar strukturierte Verwendung von Klassen und IDs
* Umgang mit den Strukturierungselementen <tt>div</tt> und <tt>span</tt>
* Verwendung von Selektoren verschiedenster Art
* Intuitiver Umgang mit der CSS Syntax
|
* Auslagerung der Styles in eine CSS Datei
* Entwurf der Spieloberfläche auf einer neuen HTML-Seite
* Klassifizierung der Oberflächenelemente (Analyse der möglichen Zustände eines Zahlenfelds)
* Style-Definition für die verschiedenen Klassen
}}
==Allgemein==
Wie bereits bekannt, erlaubt das <tt>style</tt> Attribut eines HTML Elements erweiterte Formatierungen. Die Syntax des dort definierten Texts entspricht bereits der CSS Syntax. Aber es ist natürlich umständlich und vor allem schlechter Programmierstil, jedem HTML Element seine eigene Formatierung explizit mitzugeben. Die Formatierung sollte generell von der Strukturierung getrennt werden. Eine erste Möglichkeit besteht darin innerhalb eines <tt>style</tt> Tags im <tt>head</tt> Bereich des HTML Dokuments die Formatierungen anzugeben. Die noch bessere Alternative ist einen eigenständige <tt>.css</tt> Datei. Diese kann im <tt>head</tt> Bereich des HTML Dokuments einfach eingebunden werden. Innerhalb geschweifter Klammern werden die Definitionem einem HTML Element zugeordnet.
{|
|style="width: 23em"|<code id="5876a05d3a6d6" readonly>
<head>
  <style>
   body { background-color:orange; }
  </style>
  <link rel="stylesheet" href="style.css">
</head>
</code>
|style="vertical-align:top;padding-left:1em;"|
* ''Erzeugen Sie die Datei <tt>style.css</tt> und übernehmen Sie den <tt>head</tt> Bereich in ein HTML Dokument''
* ''Übernehmen Sie die lokale <tt>style</tt> Definition in die CSS Datei und ändern Sie dort die Farbe''
* ''Überlegen Sie welche der Definitionen wohl bevorzugt wird und finden Sie heraus warum''
* ''Verschieben Sie Ihre CSS Datei in einen Unterordner und passen Sie den <tt>link</tt> entsprechend an''
|}

==Boxmodel==
Mit <tt>margin</tt> werden die Abstände vom äußeren Rand zu den umgebenden Elementen festgelegt. Der <tt>border</tt> eines Elements gehört in seiner vollen Breite zum jeweiligen Element dazu. Die <tt>padding</tt> Einstellungen beschreiben den Abstand vom inneren Rand zu den enthaltenen Elementen.
{|
|style="width: 20em;vertical-align:top;"|<html>
<iframe width="320" height="270" src="//jsfiddle.net/pw_we1/ojo7o3c3/embedded/css,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Experimentieren Sie mit den Breiten der jeweiligen Elemente um deren Einfluss zu sehen''
* ''Legen Sie <tt>margin</tt> und <tt>padding</tt> nur für bestimmte Seiten fest''
* ''Definieren Sie einen <tt>border</tt> mit abgerundeten Ecken''
* ''Finden Sie heraus welche Möglichkeien bestehen um mit <tt>border</tt> einen 3D-Effekt zu erzeugen''
* ''Versuchen Sie negative Werte für die verschiedenen Breiten zu definieren und machen Sie sich die Bedeutung des Effekts klar''
|}

==Selektoren==
Die im vorherigen Beispiel gezeigten CSS Definitionen wurden dort bestimmten HTML Elementtypen zugeordnet. Dies passierte einfach indem der Tag-Name vor die geschweiften Klammern geschrieben wurde. Da aber natürlich zumeist nicht alle Elemente des gleichen Typs auch gleich formatiert werden sollen, gibt es hier noch sehr viele weitere Möglichkeiten für solche Selektoren. Die verbreitetste Art beruht auf den Definitionen von <tt>id</tt> und <tt>class</tt>. Jedem HTML Element kann zur eindeutigen Identifikation ein beliebiger <tt>id</tt>-Attributwert gegeben werden. Zur Gruppierung von Elementen kann das Attribut <tt>class</tt> verwendet werden. Soll ein Element mehreren Klassen angehören, so können auch mehrere Klassennamen durch Leerzeichen getrennt dem Attribut zugeordnet werden.

Um in CSS ein Element mit einer bestimmten ID zu selektieren, wird anstelle des Typnamen nun der ID-Bezeichner mit vorangestelltem "#" verwendet. Analog können durch vorangestellten "." Klassen selektiert werden. Selektoren können kombiniert werden indem sie durch "," getrennt hintereinander geschrieben werden. Auch diverse Kombinationen hinsichtlich der HTML Struktur sind möglich.

{|
|style="width: 20em;vertical-align:top;"|<html>
<iframe width="350" height="200" src="//jsfiddle.net/pw_we1/f0twgkd9/embedded/html,css,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Recherchieren Sie die Funktion des Leerzeichens bei der Kombination von Selektoren''
* ''Worin liegt der Unterschied zur Kombination mit ">"? Demonstrieren Sie!''
* ''Warum ist "Element 3" blau? Experimentieren Sie!''
* ''Definieren Sie für "Element 2" und "Element 3" eine andere Schriftart''
* ''Machen Sie sich die Bedeutung von Pseudoselektoren klar''
* ''Fügen Sie einen Link hinzu und nutzen Sie Pseudoselektoren um diesen verschiedenartig zu formatieren''
|}
==Projekt und weitere Übungen==
{{Projekt|
Mit dem neu erlangten Wissen, können Sie nun alle lokalen Formatierungen aus der Sudoku-Dokumentation entfernen und diese in eine eigene CSS Datei auslagern. Auch die SVG Formatierungen können ausgelagert werden. Die formatierenden Attribute eines Zeichenobjekts können dabei direkt in der CSS Datei verwendet werden.

Erzeugen Sie eine neue HTML Datei und definieren Sie dort die Sudoku-Spieloberfläche. Es bieten sich <tt>input</tt> Elemente an. Überlegen Sie sich geeignete IDs und Klassen damit Sie die Elemente später gut ansprechen können. Bedenken Sie, dass ein Feld verschiedene Zustände haben kann (wie "Vorgabefeld", "aktuelles Feld" und "Feld über dem sich die Maus befindet") und entsprechend unterschiedlich formatiert sein muss.
Beispiellösung <document>WE1-P3.zip</document>}}

Mit E-Mails erreicht man sehr viele Kunden. Untersuchungen zeigen, dass der E-Mail-Versand deutlich effektiver ist als Facebook und Twitter zusammen. Deshalb ist die Attraktivität dieses Marketing-Tools wichtig. Anstatt reinen Text zu versenden, erwartet den Kunden ein ansprechendes Design, wobei es keine Rolle spielt, auf welchem Gerät (Handy, Tablet, Laptop) die E-Mails angezeigt werden. Um dies zu erreichen, verwendet man HTML-EMail-Templates. Diese bestehen aus einer Untermenge von HTML und CSS. Javascript oder irgendwelche Frameworks kommen nicht zum Einsatz. 
# Informieren Sie sich zur Herstellung von HTML-Email-Templates mit folgenden Beiträgen: [http://www.zensations.at/blog/3-schritten-zum-responsive-e-mail-template Nr. 1] und [https://webdesign.tutsplus.com/de/articles/creating-a-simple-responsive-html-email--webdesign-12978 Nr. 2].
# Mit dem [https://web1.hszg.de/cwagenknecht-lehre/WE1/Vorlesungen-WE1/CSS/mail/ Interface für HTML-Emails] (Dr. M. Hielscher) können Sie sich selbst HTML-Emails zusenden. Hierfür kopieren Sie Ihren entwickelten HTML-Code in das Textfeld und senden das Formular an Ihre eigene Emailadresse. Sie können ein lokal auf Ihrem Laptop gespeichertes Bild auswählen und verwenden, wie es auf der Interface-Seite angegeben ist. Zur schnellen Orientierung finden Sie im Folgenden zwei vollständige Beispiel-HTML-Emails: [https://web1.hszg.de/cwagenknecht-lehre/WE1/Vorlesungen-WE1/CSS/mail/sample1.php Beispiel 1] und [https://web1.hszg.de/cwagenknecht-lehre/WE1/Vorlesungen-WE1/CSS/mail/sample2.php Beispiel 2] (einfach Email-Adresse oben eintragen und abschicken).
# Entwerfen Sie selbst ein einfaches Template, setzen Sie rudimentäres HTML und CSS ein und integrieren Sie ein Bild. Senden Sie sich das Ergebnis zu.
# Zusatzaufgabe: Erschließen Sie unterschiedliche Anzeigeformate und Displaygrößen (Media-Queries).