Nachtrag: Nested Tree im Beispiel. 7. Vorlesung. Usability - Test. Usability - Typische Elemente. Was ist zu formatieren?
|
|
|
- Krista Kuntz
- vor 6 Jahren
- Abrufe
Transkript
1 Nachtrag: Nested Tree im Beispiel 7. Vorlesung Usability, CSS EWA HTML JavaScript PHP Einführung Aufgaben einfach schwer Links CSS Syntax Beispiele Id Titel links rechts 100 EWA HTML JavaScript PHP 104 Einführung 105 Aufgaben 106 einfach 107 schwer 108 Links 109 CSS 110 Syntax 111 Beispiele 1 2 Usability - Typische Elemente Usability - Test Logo Zweit- Navigation Kurzbeschreibung Hauptnavigation Seitentitel Menue (textuell) Suche Hilfsmittel Mögliche Anordnung als Ergebnis der Analyse von Augenbewegungen und Erwartungshaltung. Zweck erklären, Ängste nehmen Auf Aufnahme hinweisen Fragen als Einstieg - Vertrauen/Lockerheit schaffen Dazu auffordern, alles zu kommentieren Seite starten, erster Eindruck? Was würden Sie zuerst klicken? Mögliche Aufgabe gemeinsam definieren und lösen lassen. Neue Aufgabe Mimik? Zögern? Jede Reaktion kommentieren lassen! Folgerung??? 3 4 Was ist zu formatieren? CSS: Beispiele CSS browserabhängige Darstellung Angeben, was formatiert werden sollen, z.b. die Hauptüberschrift: <h1>überschrift</h1> Formatierungsanweisungen, z.b. Schriftart: font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif; CSS-Anweisung: h1 {font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;} Oder z.b. Klasse wichtig zur Hervorhebung von Textstellen in rot: HTML: <span class="wichtig">bla</span> CSS (Punkt vor wichtig kennzeichnet eine Klasse):.wichtig {color:red;} z.b. Id news für zusätzliche Infos auf der rechten Seite HTML: <div id="news">...</div> CSS (Raute vor news kennzeichnet eine Id): #news {float:right; width:20%;} z.b. horizontale Navigation über ineinander geschachtelte Tags: HTML: <ul><li><a href="x">x</a></li>...</ul> CSS (Leerraum beachten): ul li {list-style: none;display:inline;} 5 6
2 Seitenlayout und Formatierung Früher Layout mit Frames, Tabellen Schriftgröße etc mit Attribut style Heute CSS für beides! CSS Versionen CSS 1: 1996 CSS 2: 1998 CSS 2.1: Neudefinition von CSS 2, voraussichtlich 2007 CSS 3.0: voraussichtlich Mehrspaltigkeit Formatierung von Hypertextverhalten (Popups, auf- und zuklappbare Listen, Fußnoten) Mathematische Formeln Neue Text- und Hintergrundeffekte 7 8 CSS in HTML einbinden CSS Maßeinheiten <head> auch: alternate... <link rel="stylesheet" type="text/css" href= basic.css" title= nicht_persistent media="mediatype" />... oder optional <style type="text/css"> p { text-align: center; font-weight: bold; } </style> </head> mediatype: screen, tty, tv, projection, handheld, print, braille, embossed,aural, all absolut cm mm in pt pc relativ em ex px % Praktisch: pt für Schriftgröße der Druckausgabe em Schriftgröße Screen px Positionierung 9 10 Fonts CSS Farben und Hintergrund font-family: Arial, Verdana, sans-serif; font-style: italic; font-weight: bold; text-decoration: underline; font-size: 1em; text-indent: 30px; text-align: right left center justify; letter-spacing: 6px; text-transform: capitalize uppercase lowercase none; color:#990000; oder auch color:red; background-color: #FFCC66; background-image: url("smily.gif"); background-repeat: no-repeat repeat repeat-x repeat-y background-attachment: fixed scroll; Farbwahl: Achtung rot/grün, immer Vorder- und Hintergrund definieren 11 12
3 CSS Formatierung von Verweisen a:link - Verweise noch nicht besuchter Seiten a:visited - Verweise besuchter Seiten a:hover - mit dem Mauszeiger drüber gefahren a:focus - hat den Fokus (z.b. durch Tab) a:active - gerade angeklickt Reihenfolge beachten: :link, :visited, :hover, :focus, :active Druckansicht Standard: media= print Hintergrundfarbe: entfernen, Fordergrundfarbe black Zeilenhöhe anpassen absolute Fontgröße wie pt sinnvoll Ränder beachten (margin) display:none für alles, das nicht gedruckt werden soll (Navigation,...) Speziell page-break-inside: avoid; Linkziel mit ausgeben: a:link:after, a:visited:after { content: " (" attr(href) ") "; } hover und focus funktionieren auch bei input-elementen Before und after sind in CSS 2.1 definiert, werden aber von IE6 nicht unterstützt! CSS: Kaskade CSS Verwendung geeigneter Selektoren - weniger divs/ids! Vererbungssystem von Regeln und Überschreiben kann zu Konflikten führen, diese werden nach der Kaskade (Wasserfall) aufgelöst: Benutzer-Stylesheet mit!important Autoren-Stylesheet mit!important Autoren-Stylesheet Benutzer-Stylesheet Browser-Stylesheet Id Klasse Element Reihenfolge des Auftretens Bsp Kaskade: p{color:blue} p#cascade{color:red} p.cascade{color:green} <p id="cascade" class="cascade">kaskade</p> Bedeutung 15 Selektor { Eigenschaft-A: Wert-A; Eigenschaft-B: Wert-B; } /* Kommentar "ISO "; * {line-height:1.3em;} body{line-height:1.3em;} p.hinweis { color: green; } p[lang= de ] { color: green; } li p { margin: 0; } h1+p {color: green; } * - alles E - Tags E E,F - abkürzend für E und F E.c - E der Klasse c.c - Tags der Klasse c #myid - mit ID myid E#myid - E mit ID myid. E F - F, Nachfahre von E E+F - Direkter Nachbar E > F - F, Kind von E E[foo=bar] - Element E, mitattribut foo=bar import muss ganz am Anfang stehen, auch die Blocks dürfen keine '@import'-regel beinhalten. 16 Beispielhafter Aufbau eines CSS Quiz 1/6 Layout Kopfteil Navigation Inhalt Verfeinerungen: alle anderen Angaben zur Seiteneinteilung Typografie Regeln für Universalselektoren Regeln für Tabellen Regeln für Listen Von welchem MIME-Type sind CSS-Dateien? 1) css/text 2) text/css. 3) html/css
4 Quiz 2/6 Welche CSS-Selektoren haben die höchste Spezifizität? 1) Mit dem Attribut style im Quelltext angebrachte Regeln. 2) Klassenselektoren. 3) Elemente Quiz 3/6 Angenommen, ein Stylesheet enthielte folgende Deklarationen für das Element p: p { color: red!important; font-weight: bold; } p { color: blue!important; } Wie würden Absätze demnach ausgegeben? 1) Blau und in Normaldruck. 2) Rot und in Fettdruck. 3) Blau und in Fettdruck Quiz 4/6 Wie werden Klassen- und ID-Selektoren im Stylesheet bezeichnet? 1) Ein '.' steht für Klassen-, ein '#' für ID-Selektoren. 2) Ein '#' steht für Klassen-, ein 'id' für ID-Selektoren. 3) Ein '*' steht für Klassen-, ein '@' für ID-Selektoren. Quiz 5/6 Welche Elemente werden durch die folgende Regel angesprochen? p > span {Eigenschaft: wert; } 1) Alle Elemente span, die direkt auf ein Element p folgen. 2) Alle Elemente p, die Ahnenelement eines span sind. 3) Alle Elemente span, die Kindelement eines Elementes p sind Quiz 6/6 Stellen Sie sich vor, Sie müssen die drei höchstrangigen Überschriften einer Website in rot ausgeben. Welche der drei Möglichkeiten ist die richtige? 1) h1 h2 h3 { color: red;}. 2) h1, h2, h3 { color: red;}. 3) h1 + h2 + h3 { color: red;}. Früher: Frames Pro/Kontra PRO Navigation kann einfach in eine Datei ausgelagert werden Navigation ist nur einmal zu laden übersichtlich, Navigation immer an gleicher Stelle Scrollen auf Inhalt reduzieren Frames lassen sich mit Inhalten verschiedener Anbieter füllen Framerahmen von Benutzern anpassbar KONTRA suchmaschinenunfreundlich, daher weningstens ausführliche Beschreibung in noframe-tag URL ändert sich nicht, damit keine Links von außen auf eine Unterseite keine Bookmarks Druckausgabe kleingeräteunkompatibel nur ein Titel für alle Seiten Formatierung der Elemente zusätzlich, Frames nur für Seitenlayout 28 30
5 Früher: Tabellen Pro/Kontra Heute: CSS Pro/Kontra PRO bzgl. Frames: suchmaschinen- freundlicher URL ändert sich, versch. Seitentitel beliebiges Layout lässt sich gut, relativ einfach und meist browserüber-greifend umsetzen war lange Zeit verbreitet, viele CMS und (ältere) Webwerkzeuge verwenden Tabellen KONTRA Tabellentags in jeder Seite, d.h. Layout/Navigation nicht cachebar immer ganze Seite mit allen Formatierungstags zu laden, Tricks für Suchmaschinen notwendig Seite wird erst aufgebaut, wenn sie vollständig geladen ist aufwändiges Layout schwer wartbar (Designänderungen), Code unübersichtlich Kein Unterschied zw. Datentabelle und Layouttabelle - BARRIERE Druckausgabe? Formatierung der Elemente zusätzlich, Tabellen nur für Seitenlayout PRO strikte und vollständige Trennung zw. Inhalt und Layout Verwendung von <div>/<span> (Division: Abteilung, Gruppe), leerer bedeutungsfreier Kontainer Ladezeiten um bis zu 50% schneller (ohne Optimierer) Style cach- und abschaltbar barrierefreies Design mögl. suchmaschinenfreundlich Druckausgabe einfach umzusetzen KONTRA neue Syntax/neue Sprache aufwändiges Design aufwändig umzusetzen verschiedene Browser zeigen Inhalte untersch. an Layout Boxmodell Denkmuster zur Erstellung eines eigenen Layouts Tabellen-/Boxendenken CSS-Möglichkeiten nutzen, siehe ZEN-Garden ( oder sehr schönes Buch Transcending CSS ( (Beispiele daraus: Multicolumn, Float, Absolute Positionierung) vorgegebenes CI muss umgesetzt werden margin -left border -left padding-left margin-top border-top padding-top Inhalt width padding-bottom height padding-right border-right margin -right border-bottom margin -bottom IE6: width inkl. Rand etc. margin darf auch negativ sein Boxmodell Wichtige Eigenschaften für Layouts Syntax: margin-left:auto; (zur Verfügung stehende Breite) width/height: auto (tatsächlich benötigte Breite!) Kurzschreibweise (margin/padding): margin:10px 20px; (10px oben und unten, 20px rechts und links) margin 10px 20px 30px (10 px oben, 20px rechts und links, 30px unten) margin 10px 20px 30px 40px (oben, rechts, unten, links) Zentrieren: margin: 0px auto; max-width/min-width (nicht im IE), width, height position: static - Default, normaler Textfluss absolute - Position bezieht sich auf Elternelement ggf. body; relative - zur eigentlichen Position; Textfluss bleibt wie bei static! fixed - wie absolut, scrollt aber nicht mit mit top, left zu kombinieren! z-index:tiefe, =Levels bei Überlappung; default:0; kann mit position kollidieren float / clear 35 36
6 Layout in Schritten auf Basis von float 1/5 1. Boxen (Container) erkennen und benennen Layout in Schritten auf Basis von float 2/5 Markup erstellen (Reihenfolge!) und validieren <div id="header">header...</div> <div id="navigation">navigation...<p> weiter</p></div> <div id="news">news...<p>weitere...</p><p>weiterere...</p></div> <div id="inhalt">inhalt...</div> <div id="footer">footer... </div> Hintergrundfarbe setzen <style type="text/css"> #header {background-color:green} #navigation {background-color:red;} #news {background-color:blue;} #inhalt {background-color:green;} #footer {background-color:green;} </style> Layout in Schritten auf Basis von float 3/5 float und width definieren Layout in Schritten auf Basis von float 4/5 margin setzen #header {background-color:green;margin-bottom:1%;} #navigation {float:left;width:19%;background-color:red;margin-bottom:1%;} #news {float:right;width:19%;background-color:blue;margin-bottom:1%;} #inhalt {margin-left:20%;margin-right:20%;background-color:green;marginbottom:1%;} #footer {clear:both; background-color:green;} float:left; width: 19%; clear:both; float:right; width: 19%; Layout in Schritten auf Basis von float 5/5 Inhalt: Überschriften + Blindtexte vermutlicher Länge hinzufügen Markup: Listen, Tabellen, Formulare,... hinzufügen und formatieren Druckstyles erstellen, evtl. weitere Mediatypen berücksichtigen Zusammenfassung Usability: früh testen! Formatierung, Layout: CSS Kaskade beachten Relative Maßeinheiten bevorzugen Farben passend wählen (Vorder- und Hintergrund), Farbenblindheit berücksichtigen Layout schrittweise erstellen Alle wesentlichen Tags formatieren Display:none; für Druckstyle Übersicht HTML/CSS/JavaScript/PHP:
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
CSS. Cascading Stylesheets
CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische
HTML und CSS. Eine kurze Einführung
HTML und CSS Eine kurze Einführung Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
Crashkurs HTML und CSS
Crashkurs HTML und CSS HTML und CSS Hinweis: Dieser Crashkurs liefert einen Überblick und Kriterien für die sachgerechte Verwendung von HTML und CSS. Zum Lernen, Nachschlagen und Ausprobieren verweise
TYPOlight-Usertreffen 2009. Barrierefreiheit?
Barrierefreiheit? Das ist doch nur für Blinde! Zu kompliziert. Zu teuer. Unsere Kunden sind nicht behindert. Müssen wir machen *seufz* sind verpflichtet Wir haben schon eine NurText-Version. Barrierefreiheit!
44 2CSS* Basistext. 2.1 Was ist CSS? *
44 2CSS* fohlen. Alle offiziellen Informationen zu CSS finden Sie auf der W3C-Website (http://www.w3.org) und der Cascading Style Sheets Home Page (http://www.w3.org/style/css) des W3C. 2.1 Was ist CSS?
HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F
HTML5, CSS3 und JavaScript 1.8 Isolde Kommer 1. Ausgabe, 2. Aktualisierung, Dezember 2013 Fortgeschrittene Entwicklung von Webseiten HTML5F 2 HTML5, CSS3 und JavaScript 1.8 - Fortgeschrittene Entwicklung
Seminar DWMX 2004. DW Session 004
Seminar DWMX 2004 DW Session 004 Eigene Site aufbauen Aufbau einer persönlichen Site: Auswahl einer bestimmten Dateiorganisation Statische HTML Site Vorlagenbasierte Site Framebasierte Site Erstellen der
Webdesign-Multimedia HTML und CSS
Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente
Cascading Style Sheets
CSS Cascading Style Sheets von Carsten Euwens CSS Vortragsgliederung Grundlagen Bedeutung Wie binde ich CSS überhaupt ein Wie weise ich Styles den einzelnen Elementen zu Was kann man damit machen Text
Aufgabenbereich 3: Layoutgestaltung mit CSS
Aufgabenbereich 3: Layoutgestaltung mit CSS Wichtige Begriffe und Zusammenhänge: Website: Gesamtheit eines Internet-Auftrittes (alle Webseiten, die dazu gehören) Webseite: Eine einzelne Seite, ein HTML-Dokument
Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003
![Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003](/thumbs/27/11014032.jpg "Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003")
Literatur [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011 [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 [7-3] Münz, Stefan: . Addison-Wesley, 2005 [7-4]
Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte
Vorlesungsinhalte Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 2005-05-13 Dipl.-Inf. (FH) T. Mättig Stylesheets (CSS) Das CSS Box-Modell Fotos, Bilder, Grafiken Tabellen 2005-05-13
Online-Publishing mit HTML und CSS für Einsteigerinnen
Online-Publishing mit HTML und CSS für Einsteigerinnen Dipl. Math. Eva Dyllong, Universität Duisburg Dipl. Math. Maria Oelinger, spirito GmbH IF MYT 07 2002 CSS-Einführung Vorschau CSS Was ist das? Einbinden
SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1
SASS für Einsteiger WordCamp Köln 2015 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 Wer bin ich? Bernhard Kau Wahlberliner PHP-Entwickler WordPress-Plugin Hobby-Entwickler CSS-Tüftler Organisator der
Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen)
Wichtige Grundlagen Cascading Style Sheets, gestaltet dynamisch die HTML-Elemente (Boxen),Mit legen Sie Schriften und Farben einheitlich fest,über das Box-Modell layouten Sie die Seite,Navigation und Effekte
CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG
CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH STRUKTUR UND ZIELE DES HEUTIGEN TAGES Repetition CSS Grundlagen CSS Eigenschaften Wie komme
IT- und Medientechnik
IT- und Medientechnik Vorlesung 4: 2.11.2015 Wintersemester 2015/2016 h_da, Lehrbeauftragter Teil 1: IT- und Medientechnik Themenübersicht der Vorlesung Hard- und Software Hardware: CPU, Speicher, Bus,
Die wichtigsten HyperTextMarkupLanguage tags 1(6)
Die wichtigsten HyperTextMarkupLanguage tags 1(6) HTML ist entgegen vielen Gerüchten keine Programmiersprache, sondern lediglich ein Hilfsmittel um Text und Bild zu formatieren, welche in einem Browser
Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}
Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung
Inhaltsverzeichnis. Einführung... 1. Kapitel 1 Die Bausteine einer Webseite... 13. Kapitel 2 Die Arbeit mit Webseitendateien... 39
Inhaltsverzeichnis Einführung....................................... 1 HTML und CSS im Überblick............................ 2 Browser........................................ 3 Webstandards und Webspezifikationen......................
CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS
CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner, Max Weller, Moritz Willig T-Doku, Werner-von-Siemens-Schule, Wetzlar 2010-2011 INHALT DIESES VORTRAGS 1. Kurze Einführung
Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt Hinweise
Klausur Übung 1 E-Business und WSE: HTML/XHTML SS 2007 Seite 1 von 4 Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt
Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck
Die eigene Website Zusatzkapitel CSS mobile Geräte & Ausdruck Im Folgenden finden Sie einige Zusatztipps zu Kapitel 6 des Buchs Die eigene Website. Mehr Infos zum Buch auf der Website zum Buch. CSS für
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP CHRISTIAN WENZ TOBIAS HAUSER KAPITEL 3 CSS anwenden jetzt lerne ich Style-Sheets sind heute
CSS-Tutorial. Grundlegende CSS-Kenntnisse
2008 CSS-Tutorial Grundlegende CSS-Kenntnisse Dieses Tutorial gibt Ihnen verschiedene CSS-Kenntnisse mit an die Hand, damit Sie Ihre Webseite ansprechend gestalten können. Webmasterparadies.de Vertraulich
Das TYPOlight CSS-Framework
Das TYPOlight CSS-Framework Aufgaben eines CSS-Frameworks CSS-Reset Vereinheitlichung der Darstellung in allen Browsern Zurücksetzen der proprietären Abstände und Formatierungen Cross-Browser-Formatierung
HTML5, CSS3 und JavaScript 1.8. Isolde Kommer. Fortgeschrittene Entwicklung von Webseiten. 1. Ausgabe, Februar 2013 HTML5F
Isolde Kommer 1. Ausgabe, Februar 2013 HTML5, CSS3 und JavaScript 1.8 Fortgeschrittene Entwicklung von Webseiten HTML5F Impressum Matchcode: HTML5F Autorin: Isolde Kommer Redaktion: Andreas Dittfurth,
Vortrag im Rahmen der Lehrveranstaltung: Spezialfragen der Informationstechnologie
Vortrag im Rahmen der Lehrveranstaltung: Spezialfragen der Informationstechnologie Gliederung: -XHTML Wiederholung -CSS Wiederholung -WCAG -Praxis Teil 1: Formatierung von Text, Bildern, Links, Tabellen
Responsive Webdesign
ebusiness Praxistag Thüringen 2014 Responsive Webdesign BASISWISSEN UND MÖGLICHKEITEN DER UMSETZUNG Maik Grunitz Geschäftsführer Forward Marketing GbR Inhalte 1. Warum Responsive Design? 2. Geschichte
Webdesign mit (X)HTML und CSS
Webdesign mit (X)HTML und CSS Das Praxisbuch zum Einsteigen, Auffrischen und Vertiefen Deutsche Ausgabe der 3. englischen Auflage Jennifer Niederst Robbins Übersetzung von Kathrin Lichtenberg O'REILLY*
HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1
1 / 6 Doing Web Apps HTML5 2 Autor: Rüdiger Marwein Letzte Änderung: 2014-10-24 Version: 1.1 Dieses Dokument darf mit Nennung des Autoren - frei vervielfältigt, verändert und weitergegeben werden. Der
HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze
HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze Hilfreiche Links und Bücher http://holdirbootstrap.de/ (deutsch) bzw. http://getbootstrap.com (englisch) https://www.youtube.com/playlist?list=pl41lfr-
Responsive Webdesign
Responsive Webdesign Anlass sind 2 Probleme: 1. Darstellung der HU-Homepage auf mobilen Geräten ist nicht optimal (Überprüfung der Anzeige mit Strg+Shift+M oder Simulatoren www.responsinator.com) 2. Summe
Inhaltsverzeichnis. Teil 1: CSS-Grundlagen. Die fehlenden Danksagungen... Einleitung...
Inhaltsverzeichnis Die fehlenden Danksagungen........................................... Einleitung................................................................... XI XV Teil 1: CSS-Grundlagen Kapitel
Web-Technologien. Fachbereich AI, Web-Technologien 1
Web-Technologien Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik mwilhelm@hs-harz.de http://www.miwilhelm.de Raum 2.202 Tel. 03943 / 659 338 Fachbereich AI,
Format- oder Stilvorlagen
Vorraussetzung Sie sollten Grundkenntnisse der HTML-Sprache besitzen, um die Ausbildungseinheit Formatvorlagen, auch Stilvorlagen genannt, ohne Probleme verstehen zu können. Ist dies nicht der Fall, empfehlen
HTML & Co. Ein kurzer Einblick
HTML & Co Ein kurzer Einblick 1 Was ist HTML? HTTP= Datenübertragungsprotokoll HTML (Hypertext Markup Language) = Formatiersystem für Textdokumente Entwickelt in Genf (CH) am CERN Befehle zur Formatierung,
Aufgaben der Klasse FTI33 HTML: 1. Durch welchen Befehl wird ein Hyperlink in einem Bestimmten Frame angezeigt?
Hinweis: Verstehen Sie folgende Aufgaben als mögliche Bestandteile für die anstehende Klausur. Betrachten Sie die Lösungen nicht von vorne herein als richtig, sondern beantworten Sie nochmals die Fragen
CAS Webdesign und Webpublishing
CAS Webdesign und Webpublishing Kurs 2: Fortgeschrittenes CSS Ausgabe 2014 Dozent Andi Keller andi@4eyes.ch 4eyes GmbH Falknerstrasse 52 4001 Basel +41 61 261 43 48 info@4eyes.ch CHE-112.759.842 MWST Seite
HTML / CSS. Hans Gell Schulungen & Dienstleistungen www.hans-gell.de. Übersicht der Schulungsinhalte
HTML / CSS Übersicht der Schulungsinhalte Grundlagen Einleitung HTML-Historie Java Script, XML, PHP, Flash Webstandards und Browser Werkzeuge und Tools UltraEdit und Dreamweaver TopStyle, Web Developer
11 Publizieren im Web
11 Publizieren im Web Für ein modernes Unternehmen ist es heute kaum vorstellbar, nicht im Internet vertreten zu sein. Laut Statistik Austria 7 haben 97 % aller österreichischen Unternehmen ab 10 Beschäftigten
Informatik und Programmiersprachen
Informatik und Programmiersprachen Einschub: HTML Wintersemester 2004/2005 Prof. Dr. Thomas Wieland HTML HTML = Hypertext Markup Language HTML beschreibt Inhalt, Struktur und Darstellung eines Dokumentes.
Inhalt. Einleitung... 13
Inhalt Einleitung... 13 1. Der Einstieg in CSS... 17 1.1 Die Grundlagen von (X)HTML... 18 Anatomie eines (X)HTML-Elements... 19 Der Unterschied zwischen XHTML und HTML... 19 1.2 Was ist CSS, und was kann
Inhalt. Installation. Funktionen
Inhalt Installation Funktionen Einstellungen Hintergrund Balken, Button Rabatt Fußzeile Kopfteil, linke Spalte Hauptnavigation Module Preiskategorien, Produkte Text Kontakt 3 4 5 5 6 7 8 9 10 11 12 13
Einführungskurs HTML-CSS ohne Buch Von Norbert Willimsky Stand: 01.11.2015
Einführungskurs HTML-CSS ohne Buch Von Stand: 01.11.2015 Inhalt Grundlegendes... 2 Einführung in HTML... 4 Übung1: HTML und einfaches CSS anwenden... 5 Einführung in CSS... 6 Übung2: CSS anwenden... 8
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
Farb-, Text- und Schriftgestaltung mit CSS3
CT» LPE 05» 03 Textgestaltung» Hintergrundgestaltung Farb-, Text- und Schriftgestaltung mit CSS3 Eine HTML5-Datei ist reine Textdatei. In dieser Datei wird lediglich der Inhalt und die Stuktur einer Webseite
Publizieren im Internet
Publizieren im Internet Eine eigene Homepage erstellen Teil 2 Margarita Esponda esponda@inf.fu-berlin.de Ein Bild als Hintergrund Webseite mit einen Bild als Hintergrund
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq Konzept für die e Learning Fortbildung wertyuiopasdfghjklzxcvbnmqwertyui
Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung
Informatik - Text / HTML 1 Textverarbeitung 1 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Leistungsmerkmale Textverarbeitung ist Standardsoftware - nutzerorientiert,
Praxiskurs HTML5 & CSS3
Elizabeth Castro Bruce Hyslop Praxiskurs HTML5 & CSS3 Professionelle Webseiten von Anfang an 3., aktualisierte und erweiterte Auflage Hi l dpunkt.verlag Einführung 1 HTML und CSS im Überblick 2 Browser
Information und ihre Darstellung: XHTML & CSS
Information und ihre Darstellung: XHTML & CSS IFB Speyer Daniel Jonietz 2009 XHTML Extensible Hypertext Markup Language Unter besonderer Berücksichtigung von XHTML 1.1. 1 Was ist XHTML? Textbasierte Auszeichnungssprache
Responsive Web Design
Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI
Seiten und Inhalte verlinken
Seiten und Inhalte verlinken 70 Seiten verlinken Erstellen Sie zwei HTML-Seiten und speichern Sie sie unter den Namen seite.html und seite.html. Fügen Sie in seite.html ein -tag ein, um auf Seite zu
Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model
Andreas Heß Inhalt Hintergrund HTML CSS JavaScript und das Document Object Model Netz-Protokolle Schichtenmodell OSI DoD Beispiele 7 Anwendung 6 Darstellung 5 Sitzung Anwendungen HTTP, HTTPS, SMTP,
HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus
HTML Teil 2 So kann man HTML-Seiten mit und CSS gestalten So sehen einfache Formulare aus Wie könnte ein komplexer Internetauftritt aussehen? Trennung Inhaltsbereich und Navigationsbereich 2 Beispiel:
Eine wirklich große Hilfe war die Typo3-Dokumentation der Firma Mittwald: https://www.mittwald.de/fileadmin/pdf/dokus/typo3-dokumentation.
Die neue Internetseite mit Typo3 (Stand vom 25.12.2015) Ein Anfang Also, ich habe längst nicht alles verstanden, einige Befehlsketten einfach rein kopiert und deshalb sicher auch sinnlose Programmteile
Webdesign 1. PCC-Seminar Einheit 1 Di., 21.3.2006
Webdesign 1 PCC-Seminar Einheit 1 Di., 21.3.2006 Projekt Website Wir wollen eine Website gestalten und umsetzen! Aber wie fangen wir an? Grundsätzliches: Internet Print ein anderes Medium verlangt andere
Internet und Webseiten-Gestaltung
Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 12. Mai 2004 Dipl.-Inf. T. Mättig 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:
FULLSCREEN. ShoPWArE VollBIlD-PluGIn. handbuch
FULLSCREEN ShoPWArE VollBIlD-PluGIn handbuch FULLSCREEN ShoPWArE PluGIn Inhaltsverzeichnis Bildgröße für Vollbildansicht konfigurieren 04 Variante 1: Thumbnail in der Shopware Medienverwaltung anlegen
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
Webseitenverwaltung. Mit HTML, CSS und ein klein wenig PHP. Steffen Schwientek http://schlaukopp.org
Webseitenverwaltung Mit HTML, CSS und ein klein wenig PHP Ziel: Einheitliches Layout Banner für alle Seiten des Webauftritts div id="navi" Seite 1 Seite2 Seite
Einführung in die Webentwicklung
Einführung in die Webentwicklung Mit HTML5 und CSS3 auf dem Weg zur eigenen Website Kerstin Blumenstein EXPOSEE Dieses Script beinhaltet alle in dem Kurs durchgenommenen - Teile mit Erklärungen von Tag
1. Bilder aus img Ordner importieren
Oxid Eshop Design - Modifikation Promoslider / Slideshow "Anythingslider" vom Azure Template integrieren im Basic Template: 1. Bilder aus img Ordner importieren 2. Slider Code in der _header.tpl einbinden
Erstellen eines HTML-Templates mit externer CSS-Datei
Erstellen eines HTML-Templates mit externer CSS-Datei Eigenschaften der Lösung Menü mit 2 Ebenen ohne Bilder, Menü besteht aus Text (Links) Durch CSS kann das Menü aber auch die Seite angepasst werden
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) CSS sind eine unmittelbare Ergänzung zu HTML. Es handelt sich um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Es ist eine Sprache zur Formatierung
Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax
Projektarbeit Multimedia-Technologien Erstellung eines E-Learnings zum Online-Tool WireWax 5.11.2015 bis 21.01.2016 Carolin Schneider (Matrikelnummer: 40127) Inhaltsverzeichnis Ziel des Projekts... 3 Projektverlauf...
Start. HTML Crash-Kurs. HTML Crashkurs Bernd Blümel Christian Metzger
Start HTML Crash-Kurs Basics HyperText Markup Language logische Auszeichnungssprache Einfache Syntax Sehr einfach zu erlernen Dateiendungen und Startseite Dateiendungen.htm.html Startseite: index default
Björn Seibert Manuela Hoffmann. Professionelles Webdesign I mit (X)HTML und CSS [
Björn Seibert Manuela Hoffmann Professionelles Webdesign I mit (X)HTML und CSS [ Inhalt Vorwort 11 Über das Buch 11 Über die Autoren 12 Teil I Bevor es losgeht... 15 1 Einfach moderne Websites 19 1.1 Auf
Leseprobe. »CSS kennenlernenselektoren, Einheiten und Farben in CSSDas Box-ModellOrdnung halten und aufräumen« Inhaltsverzeichnis. Index.
Wissen, wie s geht. Leseprobe In seinem Buch erklärt Ihnen Peter Müller unterhaltsam und kurzweilig die Grundlagen und Raffinessen von CSS. In dieser Leseprobe legen Sie die Basis für ein umfangreiches
Webbasierte Programmierung
Webbasierte Programmierung Eine Einführung mit anschaulichen Beispielen aus der HTML5-Welt apl. Prof. Dr. Achim Ebert Inhalt Kapitel 4: CSS (Cascading Style Sheets) Einbindung von CSS CSS-Grammatik Boxmodell
Einführungskurs HTML-CSS mit Buch
Einführungskurs HTML-CSS mit Buch Von Stand: 01.11.2013 Arbeitsblätter Blatt1: Grundlegendes, Software einrichten Blatt2: Link-Arten Blatt3: Wichtige HTML-Elemente Blatt4: Einführung CSS Blatt5: Wichtige
Hypertext Markup Language HTML. Stefan Szalowski Internet-Technologien HTML
Hypertext Markup Language HTML Hypertext Markup Language HTML Cascading Style Sheets CSS Zwei Sprachen, mit denen Webseiten erstellt werden HTML: Strukturieren von Inhalten durch Elemente Überschriften,
Interface-Optimierung bei mobilen Endgeräten
Interface-Optimierung bei mobilen Endgeräten Darauf sollte man achten Darstellung über CSS anpassen Durch optimierte Breiten kann man sehr einfach für Mobiltelefon oder ipad optimierte Seiten ausliefern.
Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.
Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5
HTML-Grundlagen (X)HTML:
HTML-Grundlagen (X)HTML: < > beginnender HTML Tag schließender HTML Tag < /> leere HTML Elemente Attribute und Werte &.; Sonderzeichen, HTML Entities Aufbau einer Datei Ein
Kanton St.Gallen Design Guidelines Web-Auftritt des Kantons St.Gallen
Design Guidelines Web-Auftritt des Kantons St.Gallen Version 8.0 - CQ5-Redesign Juli 2011 Inhalt 1. Geltung und Reichweite der Guidelines 2. Visual Design Basics 3. Style Guide Internet «sg.ch» 4. Style
Der transparente Look. Die Struktur, die oben angegeben wurde, ist im Anwendungsdesigner, wie in der nächsten Grafik ersichtlich, abgebildet.
Intrapact Layout Allgemeines Das Layout einer Firma wird im Intrapact Manager, und dort im Layout Designer erstellt. Alle Eingaben im Layout Designer dienen dazu um die CSS/ASP Dateien zu generieren, die
Elizabeth Castro, Bruce Hyslop. HTML5 und CSS3. Der Meisterkurs. Aus dem Englischen von Jürgen Dubau. Markt+Technik
Elizabeth Castro, Bruce Hyslop HTML5 und CSS3 Der Meisterkurs Aus dem Englischen von Jürgen Dubau Markt+Technik Einführung HTML und CSS im Überblick Progressive Verbesserung als vorbildliche Praxis Ist
Responsive Webdesign. IHK-Arbeitskreis Software. Prof. Dr. Manfred Wojciechowski 18.02.2014
IHK-Arbeitskreis Software Prof. Dr. Manfred Wojciechowski 18.02.2014 Aufbau Vorstellung Responsive Webdesign Motivation Technologien Frameworks 2 Vorstellung Zur Person 1991 1996: Studium Informatik an
Digitale Medien. Übung
Digitale Medien Übung HTML Heute Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines Dokuments und teilweise die Darstellung. ich bin eine Überschrift
Hochschule Darmstadt Fachbereich Informatik
Hochschule Darmstadt Fachbereich Informatik Entwicklung webbasierter Anwendungen 1 Entwicklung webbasierter Anwendungen, WS2015/2016, Christopher Dörge / David Müller 03.11.2015 Hochschule Darmstadt Fachbereich
Stichpunkte zum Aufbau einer HTML-Website
Stichpunkte zum Aufbau einer HTML-Website Aufbau eines HTML-Dokumentes: HTML = Hyper Text Markup Language Texteditor zur Befehlseingabe oder im Browser (MIE) Ansicht Quellcode Tags = HTML-Befehle - immer
Barrierefreies Web. Web-Sites so gestalten, dass jeder sie nutzen und lesen kann. Zielkonflikte: barrierefreies Web für kommerzielle Anbieter
Barrierefreies Web Web-Sites so gestalten, dass jeder sie nutzen und lesen kann Zielkonflikte: barrierefreies Web für kommerzielle Anbieter Dr. Armin Schulz Inhalte Was habe ich davon? Mythen Vorteile
Um CSS-Formatierungen in einem HTML-Dokument einzubinden gibt es 3 Möglichkeiten.
CSS-SCHULUNG TEIL A: ALLGEMEINE EINFÜHRUNG IN CSS TEIL B: CSS IM LOKALEN INFORMATIONS-SYSTEM Dozentin: Dipl. Ing.(FH) Nicole Hartmann Rhoen-Saale.net GmbH Oktober 2009 TEIL A: ALLGEMEINE EINFÜHRUNG IN
Newsletter mit TYPO3. TYPO3 Usergroup Bodensee #3tsee 13. Dezember 2012 - Singen (D) Lars Messmer - comsolit AG
Newsletter mit TYPO3 TYPO3 Usergroup Bodensee #3tsee 13. Dezember 2012 - Singen (D) Lars Messmer - comsolit AG www.comsolit.com Newsletter Version: 1 Seite 1 / 20 Inhalt 1. Sinnvoller Einsatz eines Newsletters
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
Marek Kubica kubica@in.tum.de, Michael Kerscher kerschem@in.tum.de Rechnernetze und Verteilte Systeme Übungsblatt 10 Gruppe G
Punkteverteilung: 27 28 29 Σ Aufgabe (27) (a) Anfrage GET / HTTP /1.0 Antwort HTTP /1.1 200 OK Date : Wed, 07 Jul 2010 22:18:57 GMT Server : Apache /2.2.9 ( Debian ) mod_auth_kerb /5.3 DAV /2 PHP /5.2.6-1+
CSS zur Gestaltung von HTML-Seiten nutzen
CSS zur Gestaltung von HTML-Seiten nutzen Handbuch und Literatur Handbuch des RRZNs: CSS Cascading Style Sheet; Level 2 Charles Wyke-Smith: Stylin with CSS; Addison-Wesley Tommy Olsson & Paul O'Brien:
Erstellung einer Homepage mit dem KompoZer. und. Filezilla
Erstellung einer Homepage mit dem KompoZer und Filezilla Thomas Gaier, 2007 Inhalt 1 Gliederung einer Webseite...1 2 Der KompoZer...2 3 Aufbau...2 4 Farben...2 5 Erstellung des Layouts...3 6 Navigation...4
VideoPlus. Shopware Video-Plugin. Handbuch
VideoPlus Shopware Video-Plugin Handbuch VideoPLUS SHOPWARE PlugIn Inhaltsverzeichnis Wo erhalte ich den Code des von mir gewünschten Videos 04 Youtube MyVideo vimeo Sevenload Yahoo! Screen Netzr Allg.
Seiten für das WWW selber gestalten. html. Kopf. Körper. Beispiel
Seiten für das WWW selber gestalten Eine Seite im WWW ist in einer Programmiersprache geschrieben. Wir werden nicht die Details einer Programmierung anschauen. Es wird uns nützlich sein, zu wissen, wie
http://www.therealgang.de/
http://www.therealgang.de/ Titel : Author : Kategorie : Vorlesung HTML und XML (Einführung) Dr. Pascal Rheinert Sonstige-Programmierung Vorlesung HTML / XML: Grundlegende Informationen zu HTML a.) Allgemeines:
Suchmaschinenoptimierung - 16 Tuning-Tipps wie Sie Ihre Website selber auf Platz 1 in allen Suchmaschinen katapultieren
Suchmaschinenoptimierung - 16 Tuning-Tipps wie Sie Ihre Website selber auf Platz 1 in allen Suchmaschinen katapultieren Sie möchten die Positionierung Ihrer Internetseiten verbessern? Dann sollten Sie
Workshop Website "Snowball"
Workshop Website "Snowball" Dieses Layout wollen wir erstellen: Startseite: Folgeseite: Vorbeitungen Als erstes erstellen wir in Dreamweaver eine neue Web-Site: Dreamweaver-Website Erweitert Site-Name
INDEXHIBIT 1. Voraussetzung: Serverunterstützung: Linux/Apache server* PHP4+ MySQL 3.23+
INDEXHIBIT 1 Download: www.bgames.ch/hibit.zip Voraussetzung: Serverunterstützung: Linux/Apache server* PHP4+ MySQL 3.23+ Datenbank einrichten: Anleitung zum einrichten einer Datenbank sollten sich auf