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>