Tag 20

Wiederholung Formulare:

• method = post (Daten werden versand)  ist üblich
• Inline-Elemente können nebeneinander stehen
• Block-Elemente immer untereinander
• caniuse.com = kann ich schauen, welcher Befehl auf welchen Browser funktioniert
• Radiobuttom = normalerweise Name und id gleich, bei radiobuttom nicht!
• checkbox = "sowohl als auch"-Funktion
• readonly im HTML = schreibgeschützt!
• Textfeld im Formular nicht zum Verschieben machen: resize: none;
  es geht auch: resize:; /*both, vertical, horizontal, none*/
• Submit/reset = Buttons unten zum Abschicken
• cols = Zeilen Anzahl der Zeilen
• rows = Reihen Anzahl der Reihen
• selected="selected" Vorauswahl im Feld
• input-Elemente müssen nicht geschlossen werden
• Chrome = aktuellste und neuste Browser 
• Tipp: Wen die Webseite fertig ist, auf validator.w3.org checken

1.  <input type="Submit" name="" value="Bestellen">
2.  <input type="reset">
3.  <input type="button" value="Drucken" onClick="print( )"> kann man Daten zum Druck geben
   

 

Tag 19

Auflösungen der Monitore ist Standard 1024*768

Abfragebare Eigenschaften bei mediaqueries (Medienabfrage)  sind:

• width
• height
• min-width
• max-width
• min-height
• max-height
• device-width
• device-height
• device-min-width
• device-max-width
• device-min-height
• device-max-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

Eine für responsives Webdesign wesentliche Voraussetzung sind sogenannte Media Queries, ein CSS3-Konzept, welches unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften des Ausgabemediums erlaubt. Beispielsweise können folgende Eigenschaften als Kriterien herangezogen werden:

• Größe des Gerätes selbst
• Bildschirmauflösung
• Orientierung (Hoch- oder Querformat)
• Eingabemöglichkeiten (Tastatur, Fingergeste [Touch], Sprache)

Anmelden auf net-now.de und immer aktuelle Kurse ansehen um auf dem Laufenden zu bleiben
www.jgerman.de (Joomla-Version)

Weg 1: im HTML

Weg 2

Weg 3:

Weg 4:

Weg 5: alles in externen CSS-Dateien auslagern

Formulare: Das Form-Element

• ist obligatorisch bei Formularen
• mehrere Formularen auf einer Seite sind möglich
• Benennung ist sinnvoll (name, id)
• Wichtige Attribute
  • action = Pfad zu dem Programm/Script zur Weiterverarbeitung (Übergabe)
  • method = post (Daten werden versand) | get (Daten werden angefordert)
  • enctyp = Art der Daten (text/plain, multipart/form-data)
  • accept-charset = Zeichensatz
  
  

<form name="hans" id="hans" action="hans"  method=""> name/id sollten immer gleich sein

</form>

Das Label-Element

Das Inlineelement Label stellt eine Beziehung zum Formularfeld dar. Das Label ist anklickbar. Der Curser springt in das zugehörige Formularfeld.

HTML: 
<label for="Nachname">Name</label> label = springt die Maus in das Feld
placeholder="Vorname" steht im Feld, geht weg, sobald man drauf klickt

CSS: 
label {display: inline-block; width: 80px; cursor: pointer;  Curser wird zur Hand border-bottom: 1px dotted #333;}

input[type=Text] was im label passiert {font-family: Arial; border: 1px solid #FF9F00; background: #ddd; padding: 2px; margin: 2px 0 0 6px; width: 200px;}

input[type=Text]:focus {background: #fff;} wenn man draufklickt, wird es weiß

Fieldset - Feldgruppe (Blockelement)

• Mit Fieldsets im CSS optisch optimieren, geht besser als mit Tabellen

  <form name="hans" id="hans" action="hans"  method="">
   <fieldset><legend>Angaben zur Person</legend>
  </fieldset>
  </form>
  

  Kennwort oder Paßwort 

   type="Password"
  
  

   

  Radiobutton (entweder/oder)  ist immer rund  es gibt so Knöpfe
  <input type="Radio" name="Geschlecht" value="Mann" >
  <label for="Mann">Mann</label>
  
  
  

Tag 18

Content-Management-System 

Ein Content-Management-System (kurz: CMS, deutsch „Inhaltsverwaltungssystem“) ist eine Software zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation von Inhalten (Content) zumeist in Webseiten, aber auch in anderen Medienformen. Diese können aus Text- und Multimedia-Dokumenten bestehen. Ein Autor mit Zugriffsrechten kann ein solches System in vielen Fällen mit wenig Programmier- oder HTML-Kenntnissen bedienen, da die Mehrzahl der Systeme über eine grafische Benutzeroberfläche verfügen.
Besonderer Wert wird bei CMS auf eine medienneutrale Datenhaltung gelegt. So kann ein Inhalt auf Wunsch beispielsweise als PDF- oder als HTML-Dokument abrufbar sein; die Formate werden bei volldynamischen Systemen erst bei der Abfrage aus der Datenbank generiert.
Joomla, Drupal, TYPO3 und WordPress zählen zu den bekanntesten Open-Source-CMS.
WordPress und Joomla sind derzeit die meistverwendeten.Von zahlreichen Behörden der deutschen Bundesregierung (z. B. Bundesverwaltungsamt, Bundesamt für Verbraucherschutz und Lebensmittelsicherheit, Ministerien) wird der Government Site Builder (GSB) zur Pflege ihrer Onlineauftritte eingesetzt.

Zum Testen von Seiten 
 XAMMP = fertige Software-Lösung, lokale Oberfläche zum Testen
z. B. WordPress, Joomla

background-size: wird mit  / angefügt
background-attachment: scroll oder fixed
Floaten beenden: clear: both; 

Um die Regeln der Attributsbezogene Selektoren ect. noch mal ansehen:

www.jendryschik.de

Schöne Beispiele: www.mediaqueri.es
http://www.stpaulsschool.org.uk/about-st-pauls


Stylesheet zum Drucken aufbereiten:
Neues Stylesheet erstellen:
1) media="screen, projection" und 
2) media="print"


1. Möglichkeit: Die HTML-Methode zum Einbetten externer CSS-Dateien
<link rel="stylesheet" href="media01.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="druck01.css" type="text/css" media="print">



2a. Möglichkeit CSS-Dateien zum Einbetten externer CSS-Dateien über @import:
 <style type="text/css">
@import url(media01.css) screen;
@import url(druck01.css) print;
</style>

3. Möglichkeit:
CSS-Dateien mit spezieller Formatieren für den Druck @media screen/@media print einbinden:
type="text/css">
@media screen {h1 {color: red; font-family: Calibri;}}
@media print {h1 {color: black; font-family: "Palatino Linotype";}}
</style>

4. Externe CSS-Datei erstellen extern.css und in der HTML-Datei einbetten
 extern.css
@import url(media01.css) screen;
@import url(druck01.css) print;

 CSS-Datei im HTML-Dokument geladen
<link rel="stylesheet" href="extern.css" type="text/css">

h2 {page-break-before: always;}  erzwinge immer 
h1+h2 {page-break-before: avoid;} vermeide 

Medienspezifisches CSS

Die Technik medienspezifisches CSS einzubinden, erlaubt die Nutzung unterschiedlicher CSS-Dateien bezogen auf das Ausgabemedium.

• media="all" (Alle Medien)
• media="screen" (Bildschirm / Computermonitor)
• media="print" (Druckausgabe)
• media="projection" (Projektion / Beamer)
• media="handheld" (Mobilgeräte, PDA)
• media="speech" (Sprachausgabe)
• media="aural" (Sprachausgabe, Audioausgabe)
• media="braille" (Braille)
• media="embossed" (Blindenschriftdrucker)
• media="tv" (TV Gerät)
• media="tty" (Bildschirmlesegeräte)

Spezielle CSS Eigenschaften für den Druck

Seitenumbruch

• page-break-after: auto, always, avoid, left, right
• page-break-before: auto, always, avoid, left, right
• page-break-inside: avoid, auto

Witwen und Waisen

• orphans: Zahl | Schusterjungen (Waisen)
• widows: Zahl | Hurenkinder (Witwen)

orphans verhindert Schusterjungen, indem der komplette Absatz auf die nächste Seite geschoben wird.
widows verhindert Hurenkinder, indem der komplette Absatz auf die nächste Seite geschoben wird.

Umbrüche im Druck erzwingen

h2 {page-break-before: always;}  erzwinge immer
h1+h2 {page-break-before: avoid;} vermeide

Responsive Design

Mediaqueries | Medienabfrage
Immer bei den Meta-Angaben einsetzten
<meta name="viewport" content="width=device-width">wichtig, immer einsetzten für Responsiv Design!!!
Man kann eine gezielte Medienabfrage machen und konkret ansprechen

unter dem Style-Block einsetzen

<link rel="stylesheet" href="rot.css" type="text/css" media="only screen and (max-width: 640px)">

<link rel="stylesheet" href="gelb.css" type="text/css" media="only screen and (min-width: 641px)">


im Beispiel verändern sich die Farben, wenn man das Sichtfeld größer oder kleiner macht

Tag 17

Wiederholung:
Komma im CSS-Element: mehrfach mehrere Werte werden definiert z. B. ... transition: width 4s;}
Leerzeichen: dazu addieren z. B. ... border: 1px solid #fff}

Blockelemente:

• Füllen das Elternelement vollständig aus
• Blockelemente stehen untereinander
• Blockelemente können bemaßt werden

Inline-Elemente:

• stehen nebeneinander, z.B in einem Block
• Inline-Elemente können nicht bemaßt werden

Inline-Block-Elemente:

• können auch nebeneinander stehen
• sind so ein Zwischenelement
• <img> ist ein Inline-Block-Element

Befehl:

• display:block ändert die Grundeigenschaften der Elemente und kann aus einem Inline-Element auch ein Block-Element machen und umgekehrt

Hintergrund-Image ins CSS einfügen (Normalversion):
#wiese {
background-image: url(bilder/gras.png);
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0 0;
background-size: x y; } auto = Bildgröße bleibt gleich

 <body >
<div id="wiese">Muttischaf und Kind</div>
</body>

Die Reihenfolge der Bilder bestimmt die Ebenenfolge!!!

Hintergrund-Image ins CSS einfügen (Kurzversion):
background:
url(bilder/schaf2.png) no-repeat scroll 220px 150px/100px auto,                 Ebene 3 
url(bilder/schaf1.png) no-repeat scroll 80px 120px/auto auto,                   Ebene 2 
url(bilder/sonne200_frei.png) no-repeat scroll 600px -75px/auto,    Ebene 1 
url(bilder/gras.png) repeat-x  scroll l 0 0/auto auto;   
Hintergrundebene

height: 250px;
width: 750px;
margin: 5% auto;
border: 1px solid #333;
font-family: "Love Ya Like A Sister";
font-size: 28px;
color: #003F00;
padding: 40px 0 0 40px;
text-aling: center;}

Hintergrundbilder lassen sich nicht animieren!

Kindselektoren >

Kindselektoren bezeichnen unmittelbare Kindelemente. Kombination durch das Grösser-Zeichen

Mit dem Kindselektor (child selector) werden Elemente angesprochen, die direkte Nachfahren eines anderen Elements sind. Das Kennzeichen des Kindselektors ist die schließende spitze Klammer »>«.

div > a {color: #FF0000;}
p > a {color: green;}
div > p {font-family: Arial;}
div > p > a {text-decoration: none;}

Nachbarn- oder Geschwisterselektoren +

Geschwisterselektoren bezeichnen unmittelbar nachfolgende Selektoren, ist eine Folge!!

h1+h2 {color: red;}
p+h2 {color: green;}
p+p+p {color: orange;}

Folgeselektoren ~ Tilde

Es folgt (auch nicht unmittelbar)                    was hinten steht, wird formatiert

h2~p {color: magenta;}

Attributsbezogene Selektoren

Ein Element besitzt ein Attribut
 abbr[title] {border-bottom: 1px dotted #000;}

Ein Element besitzt ein Attribut mit exakt dem Wert x =

p[lang=de] {background: url(flags/deutsch_icon.jpg) no-repeat scroll 0 center;

Ein Element besitzt ein Attribut und das Attribut enthält Wert x *
a [href*="@"] {background: url(mail.gif) no-repeat scroll 0 center; padding: 0 0 0 16px;}

 Attribut beginnt mit Wert x ^
a [href^="http://de.wikipedia"]
{background: url(wiki.jpg) no-repeat scroll 0 center; padding: 0 0 0 24px;}
 
Attribut endet mit Wert x $
a [href$="http://de.wikipedia"]
{background: url(acrobat.gif) no-repeat scroll 0 center; padding: 0 0 0 24px;}


target="_blank" = Verlinkung öffnet sich in einem neuem Fenster (macht man aber nicht mehr, nicht barrierefrei, zu viele Fenster, History geht verlohren, bei PDF-Dateien sinnvoll)

 Mit der !important-Regel setzt man die Spezifität außer Kraft

#gruen {color: #005F00 !important;}

Tag 16

Wiederholung:
Navigation bauen, siehe  navi01.html
Wichtig für Klausur: Datei "Muster.pdf"
Typo im Netz ist standardmäßig 16 p

Im HTML wird immer die Grundlage gelegt, wenn dort schon ein Fehler ist, ganz schlecht!

Übungsaufgabe: position absolute/z-index: ... position: absolute; z-index: 1;}
Ebenen und Ebenenreihenfolge wird angezeigt

Transition | Übergang 
für schöne Effekte 

CSS transition ändert den Wert einer CSS-Eigenschaft über die Zeit. Dabei entstehen Animationen wie das Ein- und Ausblenden und Bewegen von HTML-Elementen ohne Javascript oder Flash.
CSS animiert seit langer Zeit HTML-Elemente mit :hover und :focus zuverlässig in allen Browsern. Aber die Animationen mit :hover oder :focus wirken wie ein Schalter: an, aus, an, aus.

transition-property: height; Eigenschaft
transition-duration: 3s;     Dauer
transition-time-function: ease-out;  linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier (n,n,n,n) 
transition-delay: 3px;  Zeitverzug (Delay)
transition: all 3s; Dann kommen alle Übergänge zum Einsatz
 
#eins:hover {height: 300px;} = Das passiert dann im Browser!


Hintergrundbild verschieben über position
<style type="text/css">
li {
float: left;
height: 388px;
width: 100px;
border: 1px solid #333;
margin-right: 3px;
color: transparent;
background-image: url(001_industriekultur.jpg)}

li:nth-child(2) {background-position: -100px 0;}
li:nth-child(3) {background-position: -200px 0;}
li:nth-child(4) {background-position: -300px 0;}
li:nth-child(5) {background-position: -400px 0;}
li:nth-child(6) {background-position: -500px 0;}
</style>
<body >
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<body >

Animation

... animation: horst  5s  infinite}  Loop, dauerhafte Animation

@keyframes horst {                   was gemacht werden soll

0% {background: #DF0000;}
50% {background: #FFDF00;}
100% {background: #DF0000;}
}                                                      Achtung, 2 geschweifte Klammern!

Tag 15

Display none

• wenn Sachen nicht erscheinen sollen:
  <style type="text/css">
  .wegdamit {display: none;}
  </style>
• gut für Stylesheets für den Druck
• es verschwinden Sachen

Übungsaufgabe:
eigene Navigation erstellen mit Hilfe von Listen
abhängige Selektoren bedenken, folgender Style-Block :

<style type="text/css">
* {margin: 0; padding: 0;}
 #navi {
position: absolute; Listenpunkte sind über dem Fließtext
width: 732px;} Feste Breite, im Fenster verschieben sich die Reiter nicht!

#navi, ul {
list-style: none; Listenicons verschwinden
font-family: Verdana;
font-size: 14px;}

#navi li ul {
display: none;} Listenunterpunkte werden unsichtbar
 
#navi li:hover ul {
display: block;} Listenunterpunkte erscheinen, wenn man mit der Maus drüber geht

#navi li {
float: left; oberer Navigation
width: 120px;
margin-right: 2px;}

#navi li a {
text-decoration: none; Keine Unterzeile bei den links
display: block; Kindelement wird Elternelement!
background: #FF7F00;
margin-right: 2px;
padding: 6px;
text-align: center;}

#navi li a:hover { mit Maus drüber gehen
color: #fff;
background: #FF0000;}


#navi li ul li {       abhänige Selektoren!!!
font-size: 12px;}   Listenunterpunkte werden kleiner
</style>

Absolutes Positionieren
... position: absolute;} =  Ebenen liegen übereinander, wie im Photoshop
... left: 50px; top: 50px;} = Ebenen kann man verschieben
... left: 0; top: 0;} = links oben
... right: 0px; top: 0px;} = rechts oben
 ... right: 0px; bottom: 0px;} = rechts unten
... left: 0px; bottom: 0px;}= links unten

Reihenfolge wird bestimmt

1. durch die Reihenfolge im HTML
2. oder durch z-index: 1;  z-index: 2; z-index: 3;
3. eine Ebene mit einem hohen z-Index liegt immer drüber
4.  z. B. z-index: 999; wenn eine Ebene über allem liegen soll
5.  z-index funktioniert nur, wenn position: absolute; vergeben wurde
6. z-index: -1% Ebene nach hinten legen, man kommt nicht mehr ran!!! Wie Wasserzeichen!
7.  position: relative; im Elternelement (also übergeordnet!) angeben, dann bezieht sich alles dann darauf
   
8.  es gibt eine x-, eine y- und eine z-Ebene
9. position: fixed; Position ist fest, beim Scrollen beleibt das Element stehen
   
10. Es gibt  position: absolute; | position: relative; | position: fixed;

overflow: auto;
es kommen Scrolling-Bars, wo sie notwendig sind (wenn zuviel Text im div ist)

overflow: scroll; es kommen überall Scrolling-Bars
overflow: hidden; verbirgt die Scrolling-Bars (z. B. overflow-y: hidden; )

 

Tag 14

Einbindung von Grafiken

• man setzt Grafiken mit mehrern Icons ein um weniger Speicherplatz zu benötigen
• Trick: man positioniert die Grafik, so das nur ein Icon sichtbar ist
  
   
• <style type="text/css">
  div {width:118px; height:38px; border: 1px solid #ccc;
  margin: 1em 0; background: url(social_media.png)}
  
  div:hover {background-image: url(social_media02.png)}
  
  .sprite01 {}
  .sprite02 {width: 39px;}
  .sprite03 {width: 39px; background-position: -40px 0;}
  .sprite04 {width: 39px; background-position: -80px 0;}
  </style>

Die Pseudoklassen

• Das Pseudo-Element :first-Letter
  p:first-letter {float: left; font-size: 24px;color: #7F0000;}
• Das Pseudo-Element: First-Line
  p:first-line {} braucht man nicht in der Praxis!
• Die Pseudoklassen :before und :after (siehe unten) Vor und danach
  h2:before {content:"Die Stadt"; color: red;}
  h2:after {content:url(smile.png);}
  a:after {content: " ("attr(href)")"; color:#000;} (für das Drucken Links wichtig, wird noch mal daneben geschrieben)

• Das Pseudo-Element :last-child und first-child gut für Listen, kann man den ersten und den letzen Punkt definieren  Erstes bzw. letztes Kindelement
• Das Pseudo-Element :nth-child (7n-1) kann man ausgewählte Punkt in der Liste/Tabelle definieren  ntes-Kindelement
  td:nth-child(3) {text-align:right;}bestimmt die Zeile
  td:nth-child(odd) {background: #ccc;} odd = Ungerade
  td:nth-child(even) {background: #FFBF00;} even =Gerade
  table {width: 640; border-collapse: collapse;}Zellen greifen ineinander
• Achtung: keine Leerzeichen zwischen den runden Klammern!
•  Das Pseudo-Element :lang unterschiedliche Sprachen Sprache

Das Clearfix-Problem
kann die Abstände zwischen den <div> -Bereich regulieren, bzw. ausweiten
Immer so: .clearfix:after {content: "."; clear: both; display: block; height: 0; visibility: hidden;}

Allgemeine Infos:
Bei einer Liste: ul {list-style: none;} Punkte weg!
display: block; aus einem Anker a wird ein Elternelement!
Runde Ecken im Uhrzeigersinn: border-radius: 6px 6px 0 0;

Abhängige Selektoren
z. B. in der id noch ein 2 Element einfügen
#gelb h2 {font-family: "Arial"; color: red;}
#rot h2 {font-family: "Palatino Linotype"; color: yellow;}