Im Allgemeinen wurden die Elemente vollständig (bis auf wenige Ausnahmen) aus HTML4 übernommen. Dazu zählen unter anderem:
|
|
|
- Dorothea Günther
- vor 8 Jahren
- Abrufe
Transkript
1
2 Inhalt HTML 5 CSS 3 Allgemeines 3 Unterscheide zu vorherigen Standards 3 Geänderte und umdefinierte Elemente Diese Elemente sollen mehr ihrer ursprünglichen Bedeutung entsprechen Dokumententypenangabe Neue Elemente Elemente die Bereiche kennzeichnen / Strukturelemente Semantische Elemente Formularelemente Multimediaelemente Welcher Browser unterstützt welchen Video-Codec? Welcher Browser unterstützt welchen Audio-Codec? Application Programming Interface (API) 11 Neue CSS3 Selektoren Möglichkeit HTML-Elemente anzusprechen Attribut-Selektoren Strukturelle Pseudo-Klassen Negations-Pseudo-Klassen Pseudo-Elemente :target-pseudoklasse Pseudoklassen für UI-Element-Zustände Generelle Geschwister-Kombinatoren Media Query Eigenschaften (allgemein) Auswahl von Eigenschaften mit kurzer Erläuterung Wo wird es benutzt? Funktionelle Notationen 16 CSS3 Eigenschaften Border Background Color Texteffekte User-Interface Mehrspaltiges Layout Webfonts Transformation 3D Transformation Transition und Keyframe Animationen Transition Keyframe-Animation CSS3 im mobilen Internet 28 Quellen
3 HTML 5 Allgemeines HTML5 tritt die Nachfolge von HTML4 an. Die Dokumentbeschreibungsstandards HTML4.01, XHTML1.0 und DOM HTML Level 2 werden ersetzt und neue Funktionalitäten werden intrigiert. Im Mai 2011 erhielt HTML5 beim W3C den Last Call. Der Status Last Call bedeutet dass HTML5 faktisch bereits einen fertigen Zustand angenommen hat. Was mit einem RC (Release Candidate) vergleichbar ist. Die meisten Browser haben es bereits, wenn auch unvollständig, implementiert. Unterschiede zu vorherigen Standards Im Allgemeinen wurden die Elemente vollständig (bis auf wenige Ausnahmen) aus HTML4 übernommen. Dazu zählen unter anderem: <frameset> ist veraltet und entspricht nicht mehr dem Standard Tags zum Gestalten, wie <font>, <big>, <center>, <s>, - alle Formatierungen sollen über CSS erfolgen Tags, deren Bedeutung durch andere Elemente gegeben ist, wie <acronym>, <applet>, <dir> Geänderte und umdefinierte Elemente Diese Elemente sollen mehr ihrer ursprünglichen Bedeutung entsprechen <i> <b> <em> <hr> <small> <strong> Text der in der Regel kursiv geschrieben wird, wie Gedanken, veränderte Stimmung,... Text der stilistisch hervorgehoben werden soll aber keine höhere Wichtigkeit hat wie der umgebende Text Textbetonung wird verstärkt durch die Verschachtelung des em- Elements Thematischer Umbruch zwischen Absätzen in einem Text Kennzeichnung von Kleingedrucktem, wie Rechtshinweise oder zusätzliche Preisauszeichnungen Auszeichnung eines Textes mit sehr hoher Bedeutung Haase & Martin GmbH, 11/2011 3
4 Dokumententypenangabe: <!DOCTYPE html> - sehr vereinfacht - Groß- und Kleinschreibung spielen keine Rolle HTML5 ist abwärtskompatibel und somit bleibt das Dokument valide, da es jeder Browser verstehen kann. Neue Elemente Die neuen Elemente werden von älteren Browsern (z.b. Internet Explorer 6) nicht erkannt. Um diese Elemente zu erkennen und darzustellen wird JavaScript benötigt. Welche Browser diese Elemente unterstützen, kann unter oder nachgelesen werden. Eine umfangreiche Zusammenfassung, was mobile Browser derzeit leisten können, ist unter zu finden. Diese tabellarische Übersicht wurde von Maximiliano Firtman zusammengetragen. Elemente die Bereiche kennzeichnen / Strukturelemente Standardstruktur die auf fast jeder Webseite verwendet wird. Deswegen wurden viele dieser IDs als Elemente übernommen. Haase & Martin GmbH, 11/2011 4
5 <article> <aside> <footer> Zeichnet einen inhaltlich eigenständigen Teil einer Seite aus. Inhalt sollte auch außerhalb der Seite einen Sinn ergeben, wie z.b. ein Forum-Post, ein Magazin- oder Zeitungsartikel, ein Blogeintrag oder ein Leserkommentar. Erläuternde oder weiterführende Inhalte, die die Hauptinhalte ergänzen. innerhalb eines <article>-elements: ein Block, der nicht mit dem Inhalt in Beziehung steht, aber nicht Teil des Artikels sein muss, z.b. Infobox außerhalb des <article>-elements: ein Block, der inhaltlich mit der Webseite in Beziehung steht, z:b. Sidebar Fußbereich einer Seite, es sind auch mehrere <footer> pro Seite möglich (kann auch Element eines Artikels sein, z.b. Datum der Veröffentlichung). Er beinhaltet Informationen z.b. über Autor, urheberrechtliche Daten,. <article> Inhalt der Arikels <footer> Infos zum Artikel (Autor, Veröffentlichungsdatum,...) </footer> </article> <footer> Infos zur Webseite (haftungsausschluss, Sitemap, Kontakt, ) </footer <header> Definiert den Kopfbereich einer Webseite oder eines Sektionselements. Gruppe von einführenden oder navigatorischen Hilfen, z.b. Logo, Inhaltsangabe, Kopf eines Abschnitts mit <h1>-<h6> Elementen oder <hgroup> <header> Header mit Logo, Inhaltsangabe, </header> <articel> <header> <hgroup> <h1>titel des Artikels </h1> <h2>untertitel</h2> </hgroup> <header> <p>. </p> <article> Haase & Martin GmbH, 11/2011 5
6 <hgroup> <nav> <section> <figure> Gruppe einer <h1>-<h6> Elementenreihe, wie Titel & Untertitel. Einheit mit wesentlichen Navigationspunkten, entweder Links zu anderen Seiten oder Sprunganker innerhalb der selben Seite. Gruppe von Elementen mit thematischer Zusammengehörigkeit, z.b. einzelne Register oder einzelne Bereiche einer Webseite, wie Einleitung, Newsbereich oder Kontaktinformationen. Kein semantisch leeres, bedeutungsloses Element es ist kein Container, um Elemente fürs Styling zusammenzufassen, dazu sollte weiterhin div verwendet werden. Eine geschlossene Einheit von Inhalten, die mit dem Artikel in Verbindung steht aber vom Artikel entfernt werden kann, ohne ihn inhaltlich zu beeinträchtigen, z.b. Diagramme, Illustrationen, Tabelle <figure> <img src= /macaque.jpg alt= Schneeaffe > <figcaption> Bildunterschrift </figcaption> </figure> <figcaption> Bildunterschrift, Legende, Untertitel, etc. für das <figure>-element Einige Elemente (<section>, <nav>, <article>, <aside>) bringen eine Funktion in der Kombination mit den Überschriftenelementen <h1> bis <h6> mit. Die Überschriftenhierarchie wird nicht anhand der Überschriftenelemente bestimmt, sondern auch anhand der Position innerhalb der neuen Elemente. Semantische Elemente <details> <mark> <meter> Wird zusammen mit <summary>-element genutzt, beschreibt Details und ist standardmäßig nicht sichtbar. Markiert eine Textstelle, um den Leser darauf aufmerksam zu machen (kann per CSS individuell gestaltet werden). Einsetzbar für Messewerte und nummerische Angaben, z.b Festplattennutzung, Relevanz eines Suchergebnisses, etc. Nicht verwendbar für beliebige Angaben, die nicht in Bereiche eingeordnet werden können. Haase & Martin GmbH, 11/2011 6
7 <p> Your score is: <meter> 2 out of 10 </meter></p> <meter> 80% </meter> <meter> 3 /4 </meter> <p> </p> Christmast is in <meter value= 30 min= 1 max= 366 title= days > 30 days! </meter> <progress> <summary> Markiert einen Fortschritt einer Aufgabe. Bei eim unbestimmten Fortschritt ist unklar wie viel Arbeit noch besteht, bevor eine Aufgabe beendet werden kann, z.b. des Programm wartet auf eine Antwort vom Server. Ein bestimmter Fortschritt ist ein nummerischer Wert zwischen 0 und einem gegebenen Maximum. Kopfbereich für das <details>-element <details> <summery>html 5 </summery> This document teaches you everything you have to learn abbout HTML 5. </details> <time> Wird für die Angabe von Uhrzeit und/oder Datum verwendet. Die eingetragene Zeit wird vom Browser in unterschiedlichen Zeitzonen automatisch umgerechnet. Das Eröffungsspiel ist am <time datetime= >26.Juni</time>. Wir öffnen um <time>10:00</time> jeden Tag. <time datetime= T020:00+09:00 > 20:00Uhr, Morgen, Tokyoer Zeit </time> Veröffentlicht am: <time atetime= pubdate> 20. Juli </time> <ruby> <rt> <rp> Ruby Annotation (chinesische Zeichen): wird in Ostasien verwendet, um die Aussprache an zu zeigen. Wird immer mit <rt>- oder <rp>-element verwendet. eigentliche Information Kennzeichnet was angezeigt werden soll, wenn der Browser das Zeichen nicht kennt. Haase & Martin GmbH, 11/2011 7
8 Formularelemente <command> Ist ein Radiobutton, eine Checkbox oder eine Standard Schaltfläche und muss sich innerhalb des Menü-Items befinden. <menu> <command= command > Click Me! </command> </menu> <detailist> Ermöglicht es Vervollständigungsvorschläge anzugeben und wird immer im Zusammenhang mit dem <input>-element benutzt. <input list= Obst /> <deailist id= Obst > <option value= Apfel > <option value= Birne > <option value= Pflaume > <option value= Kirsche > <detailist> <keygen> Zur Erstellung von Identifikations- Schlüsselpaaren. Verschiedene Einstellungen können über Attribute vorgenommen werden: autofocus - Der Focus zum automatischen Laden kann auf enable oder disable gestellt werden. challenge - Mit dem Parameter challenge wird die Nutzung der Schlüssel vorgeschrieben, wenn der öffentliche Schlüssel übertragen wurde. disabled = Der Parameter disabled deaktiviert die Schreibrechte des Nutzers für das Formularfeld mit dem öffentlichen Schlüssel. form = Das Feld mit dem Schlüssel wird mit diesem Parameter dem angegebenen Formular hinzugefügt. keytype = Hier wird der Verschlüsselungstyp rsa als Parameter für die Erstellung eines RSA Schlüssels angegeben. name = Der Feldname des Schlüsselfelds wird als Parameter angegeben. Außerdem kommen Universalattribute, wie class, lang, tabindex, etc. oder Eventattribute, wie onabort, onchange, etc verwendet werden. <form action=" <keygen keytype="rsa" name="securekey" challenge="challenge"> <input name="securekey" value="schlüssel" /> </form> <output> Gegenstück zum <input>-element, z.b. für Ausgabe, Ergebnis einer Rechnung Haase & Martin GmbH, 11/2011 8
9 Multimediaelemente <audio> Einbinden von Musik und/oder Audio-Streams autoplay controls loop preload src Startet Player, wenn vollständig geladen Kontrollelemente ein- bzw. ausblenden immer wieder abspielen Startet das Laden, wenn Webseite geladen ist Quellpfad, Quelldatei <audio controls="controls"> <source src="horse.ogg" type="audio/ogg" /> <source src="horse.mp3" type="audio/mp3" /> Your browser does not support the audio element. </audio> <canvas> Leinwand (Container/freie Fläche), um Bitmaps per JavaScript hinein zu zeichnen height width Definiert Höhe des <canvas>-elements Definiert Breite des <canvas>-elements <canvas id="mycanvas"></canvas> <script type="text/javascript"> var canvas=document.getelementbyid('mycanvas'); var ctx=canvas.getcontext('2d'); ctx.fillstyle='#ff0000'; ctx.fillrect(0,0,80,100); </script> Eine ausführliche Beschreibung gibt es vom Webdesigner, Frontendentwickler und Buchautor Peter Kröner unter: <embed> <source> Ein allgemeiner Behälter zum Einfügen externer Inhalte, der nicht mit dem audio-, img- oder video-element realisiert werden kann. Zur Darstellung dieser Inhalte wird normalerweise ein Browser-Plugin erforderlich sein. Verwendet wird es beispielsweise für Flashmovies oder Quicktime Movies. Quellen für Medien-Elemente, wie <audio> und <video> Haase & Martin GmbH, 11/2011 9
10 <video> Element zum Einbinden von Filmen und/oder Video-Streams. audio autoplay controls height loop poster preload src width Default-Zustand Startet Player, wenn vollständig geladen Kontrollelemente ein- bzw. ausblenden Definiert Höhe immer wieder abspielen Anzeige eines Bild, bevor Play gedrückt wurde Startet Laden, wenn Webseite geladen Quellpfad, Quelldatei Definiert Breite Welcher Browser unterstützt welchen Video-Codec? BS Win Mac Browser Firefox Safari Internet Explorer Chrome Opera Firefox Safari Opera Version ogg/theora 70% H % WebM 31% Quelle: Stand: Welcher Browser unterstützt welchen Audio-Codec? BS Win Mac Browser Firefox Safari Internet Explorer Chrome Opera Firefox Safari Opera Versinon ogg/vorbis 71% mp3 38% wav 69% aac 38% Quelle: Stand: Eine Auflistung aller HTML5 Tags findet sich unter: Haase & Martin GmbH, 11/
11 Application Programming Interface (API) APIs sind nicht wirklich Teil der HTML5-Spezifikation. Sie werden aber mit HTML5 in Zusammenhang gebracht. Offline Storage Local Storage Daten einer Webseite können auf dem Computer oder Smartphone lokal gespeichert werden. Diese Seite kann auch offline genutzt werden. Lokales Abspeichern von Schlüssel- und Wertepaaren. Ermöglicht das Ablegen von wesentlich größeren Datenmengen als bei Cookies. Webapps können Daten vorab in den lokalen Speicher laden (z.b. blitzschnelles Anzeigen beim Wechsel auf die nächste Seite.) Geolocation App Caching Forms Zugriff auf Positionsdaten über GPS oder mittels WiFi und IP Auswertungen über einen Google Service. Legt fest daß der Browser die Daten, einer Webseite, solange nicht neu herunterlädt, bis sich der Inhalt geändert hat. Somit wird der Start der mobilen Webanwendung beschleunigt. Gib die Möglichkeit einer lokalen Validierung der eingegebenen Daten an ohne daß sie an den Server übermittelt werden. weitere APIs: Drag&Drop History Inline Editing Messaging Selectors Server Events Web Sockets Web Workers Ausführliche Informationen und Codebeispiele in Safari Developer Center (kostenlose Anmeldung ist notwendig). Haase & Martin GmbH, 11/
12 CSS 3 Neue CSS3 Selektoren Möglichkeit HTML-Elemente anzusprechen Attribut-Selektoren a[href^= ] img[src$=.gif ] a[title*= wikipedia ] Diese Definition trifft beispielsweise für alle <a>-elemente zu, bei denen das href-attribut mit beginnt. Diese Definition trifft beispielsweise für alle <img>-elemente zu, bei denen die Zeichenkette mit.gif endet. Diese Definition trifft beispielsweise für alle <a>-elemente zu, bei denen die Zeichenkette wikipedia enthält. Strukturelle Pseudo-Klassen :root tr:nth-child / tr:nth-child(even) tr:nth-last-child (-n+2) img:nth-of-type(2n) li:last-child Trifft auf Hauptelement zu. Trifft auf alle <tr>-elemente zu, die das 2. Kind ihres Elternelements sind. Bezieht sich in diesem Beispiel auf gerade und ungerade Tabellenzeilen: tr:nth-cild(2n+1) / tr:nth-child(odd). Trifft auf die zwei letzten Zeilen einer Tabelle zu. Trifft auf jedes zweite <img>-element zu. Trifft auf das letzte <li>-element einer Liste zu. Negations-Pseudo-Klassen video:not([autoplay]) *:not(.error) html *:not (:link):not(:visitde) Alle Videos, die nicht das Attribut autoplay besitzen. Trifft auf alle <div>-elemente zu, deren Klasse nicht error lautet. Trifft auf alle HTML-Elemente zu, außer auf Links. Haase & Martin GmbH, 11/
13 Pseudo-Elemente p:first-line p.newchaper::firstletter.note:: bevore{content: Beachte: ::after Trifft auf die erste Zeile eines Absatzes zu. Trifft auf den ersten Buchstaben eines Absatzes der Klasse new- Chaper zu. Trifft auf alle Elemente der Klasse Note zu und fügt deren Inhalt ein Beachte: hinzu. Trifft auf Elemente nach dem Inhalt zu. :target-pseudoklasse Manche URLs beziehen sich auf eine bestimmte Stelle auf der Seite, z.b..../index.html'section2. Dieser Teil kann mit der :target-pseudoklasse angesprochen werden. p:target{color:red Trifft auf alle <p>-elemente, die ein Zielelement eines Aufrufs sind zu. Pseudoklassen für UI-Element-Zustände input:enabled input:disabled input:checked Trifft auf alle <input>-elemente zu, die nicht deaktiviert sind. Trifft auf alle <input>-elemente zu, die deaktiviert sind. Trifft auf angehakte Radiobuttons zu. Generelle Geschwister-Kombinatoren H1 ~ p Zwei Elemente die das selbe Elternelement haben. Trifft auf das zweite Element zu, welches dem ersten Element nicht unmittelbar voran gehen muss. z.b. Alle <p>-elemente, denen ein <h1>-element auf selber Ebene voran geht. <h1> Titel </h1> <div> </div> <p> Absatz </p> Haase & Martin GmbH, 11/
14 Media Query Besteht aus einem Medium-Typ und mindestens einem weiteren Ausdruck, der den Geltungsbereich einschränkt. z.b.: media= only screen and (color) - Diese Bestimmung trifft nur für Farbbildschirme zu. Ermöglicht die Anzeige von Inhalten entsprechend der Beschaffenheit der Ausgabegeräte, ohne daß der Inhalt verändert wird. Eigenschaften (allgemein): - width - height - device-height - device-width - orientation - aspect-ratio - device-aspect-ratio - color - color-index - monochrome - resolution - scan - grid Auswahl von Eigenschaften mit kurzer Erläuterung: width orientation device-aspect-ratio print and (min-width: screen and (min-width: 400px) and (max-width: handheld and (min-width: 20em), screen and (min-width: 20em) Die Ausrichtung ist portrait, wenn Höhe größer oder gleich der Breite ist, sonst ist sie all an all an (orientation:landscape) screen and (device-aspect-ratio: screen and (device-aspect-ratio: screen and (device-aspect-ratio: 1280/720) print and (min-resolution: print and (min-resolution: 118dpcm) Haase & Martin GmbH, 11/
15 Wo wird es benutzt? <link rel= stylesheet media= screen and (color), projection and (color) rel= stylesheet href= example.css > <?xml-stylesheet media= screen and (color), projection and (color) rel= stylesheet href= url(example.css) screen and (color), projection ans screen and (color), projection and (color) { Haase & Martin GmbH, 11/
16 Funktionelle Notationen attr() Zugriff auf einen Wert innerhalb eines Attributs. <stock> <wood length= 12 /> <wood length= 5 /> <metal length= 19 /> <wood length= 4 /> </stock> stock::before {... stock > * { display: block; width: attr(length, em); /* degault 0 */ height: 1em;... counter() Benennung einer Variablen, welche durch counter-increment erhöht werden kann und durch counter-reset zurückgesetzt werden kann. So können beispielsweise Kapitel durchnummeriert werden. p{ counter-increment: par-num h1 { counter-reset: par-num p:before { content: counter(par-num, upper-roman). calc() Diese Funktion calc() dient z.b. zur Spaltenberechnung, mit Abstand zwischen den Spalten. div.spalten { float: left; margin: 1em; width: calc(100%/3-2*1em); Haase & Martin GmbH, 11/
17 CSS3 Eigenschaften Das CSS3 befindet sich noch in der Entwicklung, doch die Browser implementieren bereits die CSS-Eigenschaften. Um kenntlich zu machen daß diese Eigenschaften noch nicht standardisiert sind setzten die Browser ihren Präfix davor. -khtml- -webkit- -moz- -o- -ms- KHTML: Konqueror WebKit: Safari, Chrome, Arora, Mobile Safari, etc. Gecko: Firefox, Mozilla, SeaMonkey, etc. Presto: Opera Trident: Microsoft Internet Explorer Border border-radius Definition von Abgerundeten Ecken. border-raduis: 5px; Jede Ecke kann individuell abgerundet werden. border-top-left-radius linke obere Ecke border-top-right-radius rechte obere Ecke border-bottom-left-radius linke untere Ecke border-bottom-right-radius rechte untere Ecke border-colors Es ist jetzt möglich mehrere Farben zu vergeben, somit kann ein Verlauf erzeugt werden. border: 8px solid #00; boder-coloers: #ff6633 #ff7141 #ff7c50 #ff865e #ff916c #ff9b7a #ffa689 #ffb197; Die border-colors-eigenschaft kann auch auf verschiedene Seiten angewendet werden. Haase & Martin GmbH, 11/
18 border-image Diese Eigenschaft definiert als Rahmen ein Bild. border-image: border-top-image border-right-image border-bottom-image border-left-image border-corner-image: border-top-left-image border-top-right-image border-bottom-right-image border-bottom-left-image Des weiteren ist es möglich ein Bild als Rahmen zu zerschneiden, dabei gibt es folgende Optionen: stretch, repeat und round. repeat Das Bild wird einfach wiederholt. stretch Die Kantenstücke werden auf die volle Breite bzw. Höhe gestreckt. round die Kantenstücke werden etwas verzogen damit nichts vom dem Bild abgeschnitten werden muss. shadow Legt einen Schatten für ein HTML-Element fest. box-schadow: x-verschiebung y-verschiebung Weichzeichengrad Farbe; box-shadow: 10px 10px 5px black; Haase & Martin GmbH, 11/
19 Background background Mit CSS3 können mehrere Hintergrundbilder für ein Element verwendet werden. Diese werden durch Komma getrennt. background: url(body-top.gif) top left no-repeat, url(banner.gif) top 11px no-repeat; Dadurch entstehen kleinere Datenmengen und somit eine schnellere Downloadrate. background-size Ermöglicht das Skalieren eines Hintergrundbildes. background-size: 412px 320px; background-origin Definiert den Ursprung für background-position. background-origin: border-box; Ursprung im Rahmen. background-origin: padding-box; Ursprung an der Innenseite des Rahmen. background-origin: content-box; Ursprung an der oberen linken Ecke des Inhaltsbereichs. Haase & Martin GmbH, 11/
20 background-clip Legt einen Hintergrundbereich fest. background-clip:border-box; Darstellungsbereich ab Randaußenseite. background-clip:padding-box; Darstellungsbereich ab Randinnenseite. background-clip:content-box; Darstellungsbereich ab Inhaltsbereich. Haase & Martin GmbH, 11/
21 Color In CSS3 kann die Farbdefinition nicht nur über den Hexadezimalwert erfolgen, sondern auch über die RBG-Werte und die HSL-Werte. Des weiteren ist es möglich den Alphawert der Farbe mit anzugeben. alte Definitionsmöglichkeit # neue Definitionsmöglichkeiten rgb(128,0,128) hsl(300,100,25) opacity Bestimmt die Dreckkraft eines Elementes (1 = 100% und 0 = 0%). opactiy: 0.8; gradient Definiert Farbverläufe, wobei zwischen linearen und radialen Farbverläufen unterschieden wird. div{ background: linear-gradient(red, blue); Mit verschiedenen Parametern kann, z.b. ein Startpunkt definiert werden. div{ div{ background: radial-gradient(bottom, red, blue); background: linear-gradient(-45deg, red, blue); Haase & Martin GmbH, 11/
22 Texteffekte text-shadow Diese Eigenschaft definiert einen Textschatten, die Funktionalität ist gleich der box-shadow-eigenschaft. text-shadow: x-verschiebung y-verschiebung Weichzeichengrad Farbe; text-shadow: 6px 4px 10px black ; text-overflow Text der durch overflow: hidden; nicht angezeigt wird, kann jetzt durch diese Eigenschaft gekennzeichnet werden und fügt Auslassungspunkte an das Textende. Werte: clip schneidet überstehenden Text ab ellipsis fügt Auslassungspunkt an, Punkte werden hinter letzten in die Zeile passenden Buchstaben gesetzt ellipsis-word fügt Auslassungspunkte an, Punkte werden hinter das letzte in die Zeile passende Wort gesetzt text-overflow-mode für clip ellipsis elliosis-word text-overflow-ellipsis hat standardmäßig den String (... ) möglich ist auch url() word-wrap Lange Zeichenfolgen, wie eine lange URL, können in die nächste Zeile umgebrochen werden. Werte: break-word bricht das Wort um normal das Word wird nicht umgebrochen Haase & Martin GmbH, 11/
23 User-Interface box-sizing resize Definiert den Bezugspunkt der Breite einer Box. Werte: border-box Breite bezieht sich auf die gesamte Box (mit Rahmen und Abständen) content-box Breite bezieht sich nur auf den Inhalt inherit - Breite hat gleichen Bezugspunkt wie das Elternelement Gibt dem Nutzer die Möglichkeit einzelne Elemente, wie Textareas zu vergrößern oder zu verkleinern. Um die Skalierbarkeit einzuschränken sollte min-width, maxwidth und min-height, max-height verwendet werden. Werte: both Elemente in beide Richtungen zu verändern horzontal Veränderung nur in horizontaler Richtung vertical Veränderung nur in vertikaler Richtung outline Wird verwendet um Aufmerksamkeit auf ein Element zu gelenken. Die Eigenschaft verschiebt nicht die Struktur, es überlagert alle anderen Elemente und steht somit an erster Stelle. outline: 2px solid blue; outline-offset: 12px; (definiert den Abstand zum Element) Haase & Martin GmbH, 11/
24 Mehrspaltiges Layout column-width column-gap column-rule column-count column-span Definiert die Breite einer Spalte. Definiert den Abstand zwischen den Spalten. Definiert eine Trennlinie zwischen den Spalten (Bestimmung wie die Eigenschaft border, Farbe, Art und Breite kann bestimmt werden). Definiert die Anzahl der Spalten. Definiert ein Element das sich über alle Spalten hinweg erstreckt. Webfonts Besondere Schriftarten mussten in älteren CSS-Versionen immer als Bild eingebunden werden. Mit CSS3 ist es möglich die Schriftart selbst mit font-famly: Bezeichnung; src: url font-family: MyHelvetica; src: local ( Helvetica Neue Bold ), local ( HelveticaNeue-Bold ), /* local Überprüft ob Schrift auf Rechner vorhanden ist*/ url (MgOpenModernaBold.ttf); font-weight: bold; Haase & Martin GmbH, 11/
25 Vorteile: Skalierbarkeit: bei Vergrößerung keine Verschlechterung der Qualität schnellerer Download (Mobiles Web): Schriftdatei meist kleiner als ein Bild Barrierefrei: Lesbar von Screenreadern Suchmaschinenoptimiert: ist von Suchmaschinen lesbar Transformation Elemente können verschoben (translate), skaliert (scale), gedreht (rotate) und gekrümmt (skew) werden. Diese Eigenschaft kann auf alle Elemente angewendet werden. div{ transform: skew (30deg, -10deg) rotate (30deg) translate (100px, 20px) scale(0.8); Der Transformationsursprung liegt standardmäßig im Mittelpunkt der Objektes, kann aber mit der Eigenschaft transform-origin selbst definiert werden. 3D Transformation Besitzt die selben Eigenschaften wie transform, es muss lediglich hinter jeder Eigenschaft 3d ergänzt und die dritte Koordinate (z) hinzugefügt werden. translate3d(tx,ty,tz) scale3d(sx,sy,sz) roate3d(ax,ay,az) transform-origin: x y z; perspective (wert); persective-origin (Perspektive des 3D-Elements) (Ursprung der Perspektive) Weitere Eigenschaften und visuelle Beispiele unter: Haase & Martin GmbH, 11/
26 Transition und Keyframe Animationen Animationen helfen dem User die Zusammenhänge und das Verhalten des Systems besser zu erfassen. Wenn beispielsweise ein blinkender Cursor stehen bleibt, weiß der Nutzer daß das System noch nicht bereit ist. Zudem Verbessern bewusst gewählte Animationen das Aussehen einer Webseite und mit CSS3 sind diese leicht und mit wenig Programmieraufwand zu realisieren. Transition transition-properties transition-duration transition-timingfunction transition-delay Bestimmt welche CSS Eigenschaft animiert werden soll. Bestimmt die Dauer der Animation. Bestimmt die Art der Animation (linear, ease-in, ease-out, ease-in-out). Bestimmt die Verzögerung vor dem Start. Folgende Eigenschaften können animiert werden: Transform Schrift-Eigenschaften (font size, line, letter/word spacing,...) Farben Schatten Durchsichtigkeit... Keyframe-Animation Kommen zum Einsatz wenn die Animation, nicht wie bei Transition nur einen Anfangs- und Endzustand, sondern auch einzelne Zwischenzustände name { animation-name: name animation-duration Anlegen eines Keyframes Verwenden der Animation Dauer der Animation Haase & Martin GmbH, 11/
27 animation-direkiton animation-interaktion-count animation-timingfunktion Anzahl der Animationsdurchläufe Umkehren der Animation Art der Animation (linear, ease-in, ease-out, ease-in-out) Beispiel: Button-Animation Button in Normalgröße, verkleinert sich, wird größer und geht wieder in Normalgröße über.sessionlist.newfavorite{ -webkit-animation-name: favorite; -webkit-animation-duration: 0.3s; -webkit-animation-interation-count: favorite{ from { -webkit-transform: scale(1); 25%{ -webkit-transform: scale(0.8); animation-timing-function: ease-out; 50%{ -webkit-transform: scale(1.2); animation-timing-function: ease-in; to{ -webkit-transform: scale(1); animation-timing-function: ease-out; Haase & Martin GmbH, 11/
28 CSS3 im mobilen Internet CSS3 bringt für das Mobile Web einige Vorteile. Durch die Einführung von Webfonts, Transformationen, 3D, Schatten, etc. können die Ladezeiten für Webseiten sehr verkürzt werden. Außerdem verringert sich der Programmieraufwand durch die CSS3 Animationen sehr. Die Spezialisierung für mobile Webseiten ist WebKit denn sowohl iphone als auch Android basieren darauf. Marktanteile der Mobile- und Tablet-Browser Microsoft Internet Explorer 0,42% Opera Mobile 0,45% Proprietary or Undetectable 0,72% BlackBerry 2,34% Symbian 2,80% Opera Mini 16,80% Android Brow ser 17,45% Safari 58,39% 0,00% 10,00% 20,00% 30,00% 40,00% 50,00% 60,00% Quelle: Mobile/Tablet Browser Market Share (Calendar Q4, 2011), qprid=0&qpcustomd=1&qpct=2&qpmr=75&qptimeframe=q Haase & Martin GmbH, 11/
29 box-reflect Definiert eine Spiegelung unter einem HTML-Element. -webkit-box-reflect: Richtung Abstand mask-box-image; Richtung: above, below, left, right Was angezeigt werden soll definiert mask-box-image. Wenn es nicht angegeben wird, wird das Element 1:1 gespiegelt. -webkit-box-reflect:below 1px -webkit-gradient (linear,left top, 0 100%, form(transparent), to(rgba(0,0,0,0.8))); Lauftexte Besonders für die keinen Displays der mobilen Endgeräte geeignet. overflow-x: -webkit-marquee; Wie der Lauftext sich bewegen soll, wird angegeben mit: -webkit-marquee-direction: backwards; ahead / up von unten nach oben reverse / down von oben nach unten brackwards / left von rechts nach links forwards / right von links nach rechts auto Voreinstellung Haase & Martin GmbH, 11/
30 Wie oft sich der Lauftext bewegen soll, wird angegeben mit: -webkit-marquee-style: alternate; alternate Schiebt den Text hin und her none Keine Bewegung scroll Wiederholt die vorgegebene Richtung slide Stoppt wenn der gesamte Text zu lesen ist oder die gegenüberliegen Seite erreicht ist Wie schnell sich der Lauftext bewegen soll, wird angegeben mit: -webkit-marquee-speet: fast; fast normal slow Distanz / Zeit Wie oft das Marquee ausgeführt werden soll, wird angegeben mit: -webkit-marquee.increment: infinite; Zahl infinite - unendlich Masken Sind Elemente die über Objekte gelegt werden können, egal ob Text, Bild oder Video. Eigenschaften sind analog zu Background: -webkit-mask background -webkit-mask-attachment background-attachment -webkit-mask-clip background-clip..... Arten von Masken: url(image) -webkit-gradient() -webkit-canvase() Haase & Martin GmbH, 11/2011
robotron*e count robotron*e sales robotron*e collect Anmeldung Webkomponente Anwenderdokumentation Version: 2.0 Stand: 28.05.2014
robotron*e count robotron*e sales robotron*e collect Anwenderdokumentation Version: 2.0 Stand: 28.05.2014 Seite 2 von 5 Alle Rechte dieser Dokumentation unterliegen dem deutschen Urheberrecht. Die Vervielfältigung,
Webseiten und Web-Apps grafisch gestalten mit HTML5 Canvas ohne Flash und sonstige Tools
Webseiten und Web-Apps grafisch gestalten mit HTML5 Canvas ohne Flash und sonstige Tools 1 Kurze HTML-Geschichte Die HTML4-Spezifikation wurde im Dezember 1997 vorgelegt. Seitdem Stagnation! Das W3C arbeitete
Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.
Seite erstellen Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken. Es öffnet sich die Eingabe Seite um eine neue Seite zu erstellen. Seiten Titel festlegen Den neuen
Informationen zu den regionalen Startseiten
Informationen zu den regionalen Startseiten Inhaltsverzeichnis Informationen zu den regionalen Startseiten 1 1. Grundlegende Regeln 2 1.1. Was wird angezeigt? 2 1.2. Generelle Anzeigeregeln 2 2. Anpassbare
Universal Dashboard auf ewon Alarmübersicht auf ewon eigener HTML Seite.
ewon - Technical Note Nr. 003 Version 1.2 Universal Dashboard auf ewon Alarmübersicht auf ewon eigener HTML Seite. Übersicht 1. Thema 2. Benötigte Komponenten 3. Downloaden der Seiten und aufspielen auf
Anwendungsbeispiele. Neuerungen in den E-Mails. Webling ist ein Produkt der Firma:
Anwendungsbeispiele Neuerungen in den E-Mails Webling ist ein Produkt der Firma: Inhaltsverzeichnis 1 Neuerungen in den E- Mails 2 Was gibt es neues? 3 E- Mail Designs 4 Bilder in E- Mails einfügen 1 Neuerungen
Web2Lead. Konfiguration
Web2Lead Konfiguration 1. Was ist Web2Lead?... 3 2. Erstellen Sie ein individuelles Kontaktformular... 3 2.1 Optionen...4 2.2 Benachrichtigungen...4 2.3 Verkaufschance...4 2.4 Formular Felder...4 Copyright
Diese Ansicht erhalten Sie nach der erfolgreichen Anmeldung bei Wordpress.
Anmeldung http://www.ihredomain.de/wp-admin Dashboard Diese Ansicht erhalten Sie nach der erfolgreichen Anmeldung bei Wordpress. Das Dashboard gibt Ihnen eine kurze Übersicht, z.b. Anzahl der Beiträge,
Outlook Web App 2010 Kurzanleitung
Seite 1 von 6 Outlook Web App 2010 Einleitung Der Zugriff über Outlook Web App ist von jedem Computer der weltweit mit dem Internet verbunden ist möglich. Die Benutzeroberfläche ist ähnlich zum Microsoft
Barrierefreie Webseiten erstellen mit TYPO3
Barrierefreie Webseiten erstellen mit TYPO3 Alternativtexte Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für Bilder. In der Liste der HTML 4-Attribute
Meine erste Homepage - Beispiele
Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir
Anleitung für die Registrierung und das Einstellen von Angeboten
Anleitung für die Registrierung und das Einstellen von Angeboten Das FRROOTS Logo zeigt Ihnen in den Abbildungen die wichtigsten Tipps und Klicks. 1. Aufrufen der Seite Rufen Sie zunächst in Ihrem Browser
Webalizer HOWTO. Stand: 18.06.2012
Webalizer HOWTO Stand: 18.06.2012 Copyright 2003 by manitu. Alle Rechte vorbehalten. Alle verwendeten Bezeichnungen dienen lediglich der Kennzeichnung und können z.t. eingetragene Warenzeichen sein, ohne
HTML5. Wie funktioniert HTML5? Tags: Attribute:
HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,
Outlook Erstellen einer E-Mail aus einer HTML - Vorlage INHALT
Outlook Erstellen einer E-Mail aus einer HTML - Vorlage INHALT LADEN DER VORLAGE 2 Öffnen Sie Outlook 2 Klicken Sie auf EXTRAS >> OPTIONEN 2 Im Optionenfeld von Outlook folgend Sie den Schritten 2 Fenster
Mobile Umfragen Responsive Design (Smartphone & Tablet)
Mobile Umfragen Responsive Design ( & Tablet) Umfragen und Umfragedesign für mobile Endgräte mit der Umfragesoftware von easyfeedback. Inhaltsübersicht Account anlegen... 3 Mobile Umfragen (Responsive
Registrierung am Elterninformationssysytem: ClaXss Infoline
elektronisches ElternInformationsSystem (EIS) Klicken Sie auf das Logo oder geben Sie in Ihrem Browser folgende Adresse ein: https://kommunalersprien.schule-eltern.info/infoline/claxss Diese Anleitung
Sich einen eigenen Blog anzulegen, ist gar nicht so schwer. Es gibt verschiedene Anbieter. www.blogger.com ist einer davon.
www.blogger.com Sich einen eigenen Blog anzulegen, ist gar nicht so schwer. Es gibt verschiedene Anbieter. www.blogger.com ist einer davon. Sie müssen sich dort nur ein Konto anlegen. Dafür gehen Sie auf
Java Script für die Nutzung unseres Online-Bestellsystems
Es erreichen uns immer wieder Anfragen bzgl. Java Script in Bezug auf unser Online-Bestell-System und unser Homepage. Mit dieser Anleitung möchten wir Ihnen einige Informationen, und Erklärungen geben,
Da die Bedienung des Editors viele Möglichkeiten aufweist, aber auch etwas Übung voraussetzt, haben wir ihm ein eigenes Unterkapitel gewidmet.
5.6. Der HTML-Editor Da die Bedienung des Editors viele Möglichkeiten aufweist, aber auch etwas Übung voraussetzt, haben wir ihm ein eigenes Unterkapitel gewidmet. Bild 33: Der Editor 5.6.1. Allgemeine
Einbindung von Videos im ZMS
Einbindung von Videos im ZMS Videos können auf Ihrer ZMS-Website auf vier verschiedene Arten eingebunden werden: - Video-Link (z.b. You Tube) - Real Media Stream - Video-Datei - Flash-Datei Um ein Video
Allgemeiner Leitfaden zum Einfügen suchmaschinenoptimierter Texte
Allgemeiner Leitfaden zum Einfügen suchmaschinenoptimierter Texte Wir von Textprovider, Anbieter von produktbeschreibung.eu möchten Ihnen mit diesem Infoblatt Basisinformationen an die Hand geben, wie
Wo steht HTML5 Überblick, Möglichkeiten, Zukunft (ohne Anspruch auf Vollständigkeit)
1 Wo steht HTML5 Überblick, Möglichkeiten, Zukunft (ohne Anspruch auf Vollständigkeit) Sven Brencher 2 Wie ich zu Webentwicklung stehe Yeah Flexbox! Entwickler vs. Unternehmer ROI? 3 Wie kann man HTML5
Bilder zum Upload verkleinern
Seite 1 von 9 Bilder zum Upload verkleinern Teil 1: Maße der Bilder verändern Um Bilder in ihren Abmessungen zu verkleinern benutze ich die Freeware Irfan View. Die Software biete zwar noch einiges mehr
Dokumentation für Popup (lightbox)
Dokumentation für Popup (lightbox) Für das Popup muss eine kleine Anpassung im wpshopgermany Plugin vorgenommen werden und zwar in der Datei../wp-content/plugins/wpshopgermany/controllers/WarenkorbController.class.php
Seite 1 von 14. Cookie-Einstellungen verschiedener Browser
Seite 1 von 14 Cookie-Einstellungen verschiedener Browser Cookie-Einstellungen verschiedener Browser, 7. Dezember 2015 Inhaltsverzeichnis 1.Aktivierung von Cookies... 3 2.Cookies... 3 2.1.Wofu r braucht
Wollen Sie einen mühelosen Direkteinstieg zum Online Shop der ÖAG? Sie sind nur einen Klick davon entfernt!
Wollen Sie einen mühelosen Direkteinstieg zum Online Shop der ÖAG? Sie sind nur einen Klick davon entfernt! Sehr geehrte(r) Geschäftspartner(in), Um Ihre Transaktionen schneller durchzuführen, bieten wir
Hilfe bei Adobe Reader. Internet Explorer 8 und 9
Hilfe bei Adobe Reader Internet Explorer 8 und 9 1. Öffnen Sie Internet Explorer und wählen Sie Extras > Add-Ons verwalten. 2. Wählen Sie unter Add-On-Typen die Option Symbolleisten und Erweiterungen aus.
Textgestaltung mit dem Editor TinyMCE Schritt für Schritt
Textgestaltung mit dem Editor TinyMCE Schritt für Schritt Folgender Artikel soll veröffentlicht und mit dem Editor TinyMCE gestaltet werden: Eine große Überschrift Ein Foto Hier kommt viel Text. Hier kommt
HTML Programmierung. Aufgaben
HTML Programmierung Dr. Leander Brandl BRG Keplerstraße - A-8020 Graz Universität Graz - Institut für Experimentalphysik Fachdidaktik der Physik http://w4.brgkepler.asn-graz.ac.at 1. Die erste Web-Seite
Benutzerhandbuch MedHQ-App
Benutzerhandbuch MedHQ-App T h o r D y n a m i c s G m b H A m B ü c h e n b e r g s k a m p 2 2 2 1 0 3 9 B ö r n s e n V e r s i o n 1. 0 S t a n d : 0 4 / 2 0 1 5 z u r M e d H Q - A p p - V e r s i
Computeria Solothurn
Computeria Solothurn Seniorinnen und Senioren entdecken den Computer und das Internet Sich mit «TeamViewer» von einem Supporter helfen lassen Diese Anleitung und die Illustrationen wurden unter Mac OS
Virtueller Seminarordner Anleitung für die Dozentinnen und Dozenten
Virtueller Seminarordner Anleitung für die Dozentinnen und Dozenten In dem Virtuellen Seminarordner werden für die Teilnehmerinnen und Teilnehmer des Seminars alle für das Seminar wichtigen Informationen,
16. Schriftart formatieren
16. Schriftart formatieren 16.1 Überblick Das Aussehen verbessern Bis jetzt haben Sie gesehen, dass das Dokument, welches Sie erstellt haben schlicht und simpel war. Sie können das Aussehen Ihres Dokuments
Standard-Kontaktformular
Online-Tutorials Referat VI.5 Internetdienste Standard-Kontaktformular Legen Sie ein neues Dokument an Klicken Sie die Datei an, unter der Sie das Kontaktformular anlegen möchten Legen Sie über Datei >
Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015
Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Agenda 1. Einführung Was ist Responive Webdesign, Media Queries und CSS preprocessing 2. Frameworks Bootstrap,
Schiller-Gymnasium Hof 20.12.2004
Erstellen eines HTML-Dokumentes Zum Erstellen einer Homepage benötigen wir lediglich einen Editor. Zum Ansehen der fertigen Site benötigen wir wir natürlich auch einen Browser, z.b. Firefox oder Netscape
TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch. Joomla Templates Kursunterlagen
TIMERATE AG Tel 044 422 65 15 Falkenstrasse 26 timerate@timerate.ch 8008 Zürich www.timerate.ch Joomla Templates Kursunterlagen Ordnerstruktur in Joomla Inhaltsverzeichnis Ordnerstruktur in Joomla... 3
Suche schlecht beschriftete Bilder mit Eigenen Abfragen
Suche schlecht beschriftete Bilder mit Eigenen Abfragen Ist die Bilderdatenbank über einen längeren Zeitraum in Benutzung, so steigt die Wahrscheinlichkeit für schlecht beschriftete Bilder 1. Insbesondere
Handbuch für Redakteure
Handbuch für Redakteure Erste Schritte... 1 Artikel erstellen... 2 Artikelinhalt bearbeiten... 3 Artikel bearbeiten... 3 Trennen der Druck- und der Online-Version.. 4 Grunddaten ändern... 5 Weitere Artikel-eigenschaften...
Zahlen auf einen Blick
Zahlen auf einen Blick Nicht ohne Grund heißt es: Ein Bild sagt mehr als 1000 Worte. Die meisten Menschen nehmen Informationen schneller auf und behalten diese eher, wenn sie als Schaubild dargeboten werden.
Inhalt. 1 Einleitung AUTOMATISCHE DATENSICHERUNG AUF EINEN CLOUDSPEICHER
AUTOMATISCHE DATENSICHERUNG AUF EINEN CLOUDSPEICHER Inhalt 1 Einleitung... 1 2 Einrichtung der Aufgabe für die automatische Sicherung... 2 2.1 Die Aufgabenplanung... 2 2.2 Der erste Testlauf... 9 3 Problembehebung...
teischl.com Software Design & Services e.u. office@teischl.com www.teischl.com/booknkeep www.facebook.com/booknkeep
teischl.com Software Design & Services e.u. office@teischl.com www.teischl.com/booknkeep www.facebook.com/booknkeep 1. Erstellen Sie ein neues Rechnungsformular Mit book n keep können Sie nun Ihre eigenen
Informationen zum neuen Studmail häufige Fragen
1 Stand: 15.01.2013 Informationen zum neuen Studmail häufige Fragen (Dokument wird bei Bedarf laufend erweitert) Problem: Einloggen funktioniert, aber der Browser lädt dann ewig und zeigt nichts an Lösung:
Klausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg.
Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 Klausurteilnehmer Name: Matrikelnummer: Wichtige Hinweise Es sind keinerlei Hilfsmittel zugelassen auch keine Taschenrechner! Die Klausur dauert
KURZANLEITUNG CLOUD OBJECT STORAGE
KURZANLEITUNG CLOUD OBJECT STORAGE Version 1.12 01.07.2014 SEITE _ 2 INHALTSVERZEICHNIS 1. Einleitung... Seite 03 2. Anmelden am Cloud&Heat Dashboard... Seite 04 3. Anlegen eines Containers... Seite 05
TECHNISCHE INFORMATION LESSOR LOHN/GEHALT BEITRAGSNACHWEIS-AUSGLEICH BUCH.-BLATT MICROSOFT DYNAMICS NAV
MICROSOFT DYNAMICS NAV Inhaltsverzeichnis TECHNISCHE INFORMATION: Einleitung... 3 LESSOR LOHN/GEHALT Beschreibung... 3 Prüfung der Ausgleichszeilen... 9 Zurücksetzen der Ausgleichsroutine... 12 Vorgehensweise
Ihr CMS für die eigene Facebook Page - 1
Ihr CMS für die eigene Facebook Page Installation und Einrichten eines CMS für die Betreuung einer oder mehrer zusätzlichen Seiten auf Ihrer Facebook Page. Anpassen der "index.php" Installieren Sie das
Anleitung zum Anlegen und Bearbeiten einer News in TYPO3 für www.fk-havelland-mitte.de
WEBandIT.net - Anleitung zum Anlegen und Bearbeiten einer News in TYPO3 für www.fk-havelland-mitte.de Die Internet-Seite wird intern durch das Programm TYPO3 verwaltet. Eine Anmeldung ist nur durch Zugangsdaten
Dokumentation IBIS Monitor
Dokumentation IBIS Monitor Seite 1 von 16 11.01.06 Inhaltsverzeichnis 1. Allgemein 2. Installation und Programm starten 3. Programmkonfiguration 4. Aufzeichnung 4.1 Aufzeichnung mitschneiden 4.1.1 Inhalt
Abamsoft Finos im Zusammenspiel mit shop to date von DATA BECKER
Abamsoft Finos im Zusammenspiel mit shop to date von DATA BECKER Abamsoft Finos in Verbindung mit der Webshopanbindung wurde speziell auf die Shop-Software shop to date von DATA BECKER abgestimmt. Mit
Design anpassen eine kurze Einführung
Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können
Berechtigungen im Kalender Anleitung für die Rechtevergabe im Outlook Kalender 2010. FHNW, Services, ICT
Berechtigungen im Kalender Anleitung für die Rechtevergabe im Outlook Kalender 2010 FHNW, Services, ICT Windisch, März 2013 Berechtigungen im Kalender 1 1 Gruppen 3 1.1 Die Gruppe/der Benutzer Standard
Abschnitte. Abschnittswechsel einfügen
Abschnitte Word 2010 Advanced Ein Abschnitt ist eine Einheit innerhalb eines Dokuments, der sich durch sein Layout vom Rest des Dokuments unterscheidet. Standardmäßig besteht das Dokument aus einem Abschnitt.
Einfügen von Bildern innerhalb eines Beitrages
Version 1.2 Einfügen von Bildern innerhalb eines Beitrages Um eigene Bilder ins Forum einzufügen, gibt es zwei Möglichkeiten. 1.) Ein Bild vom eigenem PC wird auf den Webspace von Baue-die-Bismarck.de
Datensicherung. Beschreibung der Datensicherung
Datensicherung Mit dem Datensicherungsprogramm können Sie Ihre persönlichen Daten problemlos Sichern. Es ist möglich eine komplette Datensicherung durchzuführen, aber auch nur die neuen und geänderten
Handbuch für Redakteure
Handbuch für Redakteure Erste Schritte... 1 Artikel erstellen... 2 Artikelinhalt bearbeiten... 3 Artikel bearbeiten... 3 Grunddaten ändern... 5 Weitere Artikeleigenschaften... 5 Der WYSIWYG-Editor... 6
Individuelle Formulare
Individuelle Formulare Die Vorlagen ermöglichen die Definition von Schnellerfassungen für die Kontenanlage sowie für den Im- und Export von Stammdaten. Dabei kann frei entschieden werden, welche Felder
GeoPilot (Android) die App
GeoPilot (Android) die App Mit der neuen Rademacher GeoPilot App machen Sie Ihr Android Smartphone zum Sensor und steuern beliebige Szenen über den HomePilot. Die App beinhaltet zwei Funktionen, zum einen
Webseiten sind keine Gemälde. Webstandards für ein besseres Web. Webstandards für ein besseres Web
Webseiten sind keine Gemälde Webkrauts Die Initiative für die Webkrauts ging von einem Blogeintrag im August 2005 aus. Nach dem Aufruf fanden sich innerhalb von etwa drei Tagen über 60 Interessierte zusammen.
Einführung Responsive Webdesign
Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout
4 Aufzählungen und Listen erstellen
4 4 Aufzählungen und Listen erstellen Beim Strukturieren von Dokumenten und Inhalten stellen Listen und Aufzählungen wichtige Werkzeuge dar. Mit ihnen lässt sich so ziemlich alles sortieren, was auf einer
Die Dateiablage Der Weg zur Dateiablage
Die Dateiablage In Ihrem Privatbereich haben Sie die Möglichkeit, Dateien verschiedener Formate abzulegen, zu sortieren, zu archivieren und in andere Dateiablagen der Plattform zu kopieren. In den Gruppen
Im Folgenden wird Ihnen an einem Beispiel erklärt, wie Sie Excel-Anlagen und Excel-Vorlagen erstellen können.
Excel-Schnittstelle Im Folgenden wird Ihnen an einem Beispiel erklärt, wie Sie Excel-Anlagen und Excel-Vorlagen erstellen können. Voraussetzung: Microsoft Office Excel ab Version 2000 Zum verwendeten Beispiel:
Leichte-Sprache-Bilder
Leichte-Sprache-Bilder Reinhild Kassing Information - So geht es 1. Bilder gucken 2. anmelden für Probe-Bilder 3. Bilder bestellen 4. Rechnung bezahlen 5. Bilder runterladen 6. neue Bilder vorschlagen
Logics App-Designer V3.1 Schnellstart
Logics App-Designer V3.1 Schnellstart Stand 2012-09-07 Logics Software GmbH Tel: +49/89/552404-0 Schwanthalerstraße 9 http://www.logics.de/apps D-80336 München mailto:apps@logics.de Inhalt Ihr Logics Zugang...
Bedienung des Web-Portales der Sportbergbetriebe
Bedienung des Web-Portales der Sportbergbetriebe Allgemein Über dieses Web-Portal, können sich Tourismusbetriebe via Internet präsentieren, wobei jeder Betrieb seine Daten zu 100% selbst warten kann. Anfragen
PAUL App. Anleitung für Studierende und Lehrende
PAUL App Anleitung für Studierende und Lehrende Stand: 9. Dezember 2014 1 Liebe Studierende, liebe Lehrende, mit der Einführung der PAUL App können verschiedene Funktionalitäten der PAUL Webseite einfacher
Content Management System (CMS) Manual
Content Management System (CMS) Manual Thema Seite Aufrufen des Content Management Systems (CMS) 2 Funktionen des CMS 3 Die Seitenverwaltung 4 Seite ändern/ Seite löschen Seiten hinzufügen 5 Seiten-Editor
Viele Bilder auf der FA-Homepage
Viele Bilder auf der FA-Homepage Standardmäßig lassen sich auf einer FA-Homepage nur 2 Bilder mit zugehörigem Text unterbringen. Sollen es mehr Bilder sein, muss man diese als von einer im Internet
Eine Anleitung von Holger Bein. Holger Bein 2005
Holger Bein 2005 Eine Anleitung von Holger Bein Bildergalerie erstellen mit dem Web Album Generator Was wir brauchen: 1. Speicherplatz (z.b. bei freenet.de) 2. das Programm Web Album Generator 3. einen
Text Formatierung in Excel
Text Formatierung in Excel Das Aussehen des Textes einer oder mehrerer Zellen kann in Excel über verschiedene Knöpfe beeinflusst werden. Dazu zuerst die betroffenen Zelle(n) anwählen und danach den entsprechenden
Novell Client. Anleitung. zur Verfügung gestellt durch: ZID Dezentrale Systeme. Februar 2015. ZID Dezentrale Systeme
Novell Client Anleitung zur Verfügung gestellt durch: ZID Dezentrale Systeme Februar 2015 Seite 2 von 8 Mit der Einführung von Windows 7 hat sich die Novell-Anmeldung sehr stark verändert. Der Novell Client
BSV Software Support Mobile Portal (SMP) Stand 1.0 20.03.2015
1 BSV Software Support Mobile Portal (SMP) Stand 1.0 20.03.2015 Installation Um den Support der BSV zu nutzen benötigen Sie die SMP-Software. Diese können Sie direkt unter der URL http://62.153.93.110/smp/smp.publish.html
Bedienungsanleitung: Onlineverifizierung von qualifiziert signierten PDF-Dateien
Sie haben von der VR DISKONTBANK GmbH ein signiertes PDF-Dokument (i.d.r. eine Zentralregulierungsliste mit dem Status einer offiziellen Rechnung) erhalten und möchten nun die Signatur verifizieren, um
Fusszeile mit Datumsfeld und Dateiname
Fusszeile mit Datumsfeld und Dateiname Für innerbetriebliche Rundschreiben kann es nützlich sein, in der Fusszeile den Namen der Autorin bzw. des Autors und das Datum mit der Uhrzeit als Feld einzufügen.
Checkliste zur Planung einer Webseite
Checkliste zur Planung einer Webseite Eine neue Webseite ist immer ein spannendes Unterfangen. Egal, ob es Ihre erste oder zehnte Webseite ist. Das Gefühl, wenn die Webseite endlich fertig und live im
Webseiten erstellen für Einsteiger
Daniel Mies Webseiten erstellen für Einsteiger Schritt für Schritt zur eigenen Website Galileo Press Vorbemerkungen 15 1 Vordem Start 21 1.1 Wie kommt die Seite aus dem Internet auf meinen Computer? 21
Anleitung für Berichte in Word Press, auf der neuen Homepage des DAV Koblenz
Anleitung für Berichte in Word Press, auf der neuen Homepage des DAV Koblenz Diese Anleitung soll als Kurzreferenz und Schnellanleitung dienen um einfach und schnell Berichte auf der Homepage www.dav-koblenz.de
Installation älterer Programmversionen unter Windows 7
Installation älterer Programmversionen unter Windows 7 Obwohl nicht explizit gekennzeichnet, sind alle MAGIX Produkte mit einer 15 im Namen, sowie MAGIX Video Pro X 1.5, Filme auf DVD 8 und Fotos auf CD
PowerPoint: Text. Text
PowerPoint: Anders als in einem verarbeitungsprogramm steht in PowerPoint der Cursor nicht automatisch links oben auf einem Blatt in der ersten Zeile und wartet auf eingabe. kann hier vielmehr frei über
Eigenen Farbverlauf erstellen
Diese Serie ist an totale Neulinge gerichtet. Neu bei PhotoLine, evtl. sogar komplett neu, was Bildbearbeitung betrifft. So versuche ich, hier alles einfach zu halten. Ich habe sogar PhotoLine ein zweites
Matrix42. Use Case - Sicherung und Rücksicherung persönlicher Einstellungen über Personal Backup. Version 1.0.0. 23. September 2015 - 1 -
Matrix42 Use Case - Sicherung und Rücksicherung persönlicher Version 1.0.0 23. September 2015-1 - Inhaltsverzeichnis 1 Einleitung 3 1.1 Beschreibung 3 1.2 Vorbereitung 3 1.3 Ziel 3 2 Use Case 4-2 - 1 Einleitung
Fotostammtisch-Schaumburg
Der Anfang zur Benutzung der Web Seite! Alles ums Anmelden und Registrieren 1. Startseite 2. Registrieren 2.1 Registrieren als Mitglied unser Stammtischseite Wie im Bild markiert jetzt auf das Rote Register
FEHLER! TEXTMARKE NICHT DEFINIERT.
Inhaltsverzeichnis 1 ALLGEMEINE INFORMATIONEN 2 2 SYNCHRONISATION MIT DEM GOOGLE KALENDER FEHLER! TEXTMARKE NICHT DEFINIERT. 3 OPTIONALE EINSTELLUNGEN 5 1. Allgemeine Informationen Was ist neu? Ab sofort
In dem unterem Feld können Sie Ihre E-Mail eintragen, wenn sie im System hinterlegt wurde. Dann wird Ihnen Ihr Passwort noch einmal zugeschickt.
Wyhdata Hilfe Login: www.n-21online.de (Login Formular) Ihr Login-Name: Hier tragen Sie Redak1 bis Redak6 ein, der Chefredakteur bekommt ein eigenes Login. Ihr Passwort: Eine Zahlenkombination, die vom
Dokumentation von Ük Modul 302
Dokumentation von Ük Modul 302 Von Nicolas Kull Seite 1/ Inhaltsverzeichnis Dokumentation von Ük Modul 302... 1 Inhaltsverzeichnis... 2 Abbildungsverzeichnis... 3 Typographie (Layout)... 4 Schrift... 4
In diesem Tutorial lernen Sie, wie Sie einen Termin erfassen und verschiedene Einstellungen zu einem Termin vornehmen können.
Tutorial: Wie erfasse ich einen Termin? In diesem Tutorial lernen Sie, wie Sie einen Termin erfassen und verschiedene Einstellungen zu einem Termin vornehmen können. Neben den allgemeinen Angaben zu einem
Installationsanweisung Gruppenzertifikat
Stand: November 2015 Inhalt 1. Allgemeine Hinweise... 1 2. Vor der Installation... 1 3. Installation des Gruppenzertifikats für Internet Explorer... 2 3.1. Überprüfung im Browser... 7 3.2. Zertifikatsbestätigung
Diese Anleitung zeigt dir, wie du eine Einladung mit Microsoft Word gestalten kannst.
Diese Anleitung zeigt dir, wie du eine Einladung mit Microsoft Word gestalten kannst. Bevor es losgeht Wenn du mal etwas falsch machst ist das in Word eigentlich kein Problem! Den Rückgängig-Pfeil (siehe
Schritt 1: Starten Sie Hidemyass, wählen Sie "IP: Port Proxies"
Gesperrtes YouTube Video Der Frust surft mit: Wir sorgen dafür, dass Sie den Bildschirm "Dieses Video ist in deinem Land nicht verfügbar" nie wieder sehen müssen. Wir zeigen Ihnen, wie Sie händisch einen
Anleitungen für User der Seite TSV AustriAlpin Fulpmes. So erstellen Sie einen Bericht (Beitrag) auf der TSV-AustriAlpin Fulpmes Homepage.
So erstellen Sie einen Bericht (Beitrag) auf der TSV-AustriAlpin Fulpmes Homepage. Seite 1 Walter Mayerhofer 2012 1.) ANMELDUNG Melden Sie sich mit Ihrem Benutzernamen und Passwort an. Als allererstes
Der Kalender im ipad
Der Kalender im ipad Wir haben im ipad, dem ipod Touch und dem iphone, sowie auf dem PC in der Cloud einen Kalender. Die App ist voreingestellt, man braucht sie nicht laden. So macht es das ipad leicht,
tentoinfinity Apps 1.0 EINFÜHRUNG
tentoinfinity Apps Una Hilfe Inhalt Copyright 2013-2015 von tentoinfinity Apps. Alle Rechte vorbehalten. Inhalt der online-hilfe wurde zuletzt aktualisiert am August 6, 2015. Zusätzlicher Support Ressourcen
Facebook I-Frame Tabs mit Papoo Plugin erstellen und verwalten
Facebook I-Frame Tabs mit Papoo Plugin erstellen und verwalten Seit Anfang Juni 2012 hat Facebook die Static FBML Reiter deaktiviert, so wird es relativ schwierig für Firmenseiten eigene Impressumsreiter
Excel Pivot-Tabellen 2010 effektiv
7.2 Berechnete Felder Falls in der Datenquelle die Zahlen nicht in der Form vorliegen wie Sie diese benötigen, können Sie die gewünschten Ergebnisse mit Formeln berechnen. Dazu erzeugen Sie ein berechnetes
.htaccess HOWTO. zum Schutz von Dateien und Verzeichnissen mittels Passwortabfrage
.htaccess HOWTO zum Schutz von Dateien und Verzeichnissen mittels Passwortabfrage Stand: 21.06.2015 Inhaltsverzeichnis 1. Vorwort...3 2. Verwendung...4 2.1 Allgemeines...4 2.1 Das Aussehen der.htaccess
GEONET Anleitung für Web-Autoren
GEONET Anleitung für Web-Autoren Alfred Wassermann Universität Bayreuth Alfred.Wassermann@uni-bayreuth.de 5. Mai 1999 Inhaltsverzeichnis 1 Technische Voraussetzungen 1 2 JAVA-Programme in HTML-Seiten verwenden
Handbuch für Redakteure
Handbuch für Redakteure Erste Schritte... 1 Artikel erstellen... 2 Artikelinhalt bearbeiten... 3 Artikel bearbeiten... 3 Grunddaten ändern... 5 Weitere Artikeleigenschaften... 5 Der WYSIWYG-Editor... 6
Wählen Sie bitte START EINSTELLUNGEN SYSTEMSTEUERUNG VERWALTUNG und Sie erhalten unter Windows 2000 die folgende Darstellung:
Installation Bevor Sie mit der Installation von MOVIDO 1.0 beginnen, sollten Sie sich vergewissern, dass der Internet Information Server (IIS) von Microsoft installiert ist. Um dies festzustellen, führen