CSS Einführung & CSS Frameworks
|
|
|
- Richard Richter
- vor 6 Jahren
- Abrufe
Transkript
1 CSS Einführung & CSS Frameworks Leif Singer Seminar Aktuelle Software-Engineering-Praktiken für das World Wide Web
2 Frage Anfragen von Kommilitonen: mit reinsetzen Ihr entscheidet: Gasthörer erwünscht / nicht erwünscht? 2
3 Übersicht Grundlagen Selektoren Einbindung Positionierung Probleme Basis-Stylesheets Domänenspezifische Sprachen für CSS 3
4 GRUNDLAGEN 4
5 Grundlagen HTML strukturiert Inhalte sehr allgemeine Tags, wenig Darstellung ableitbar ( Tabelle, Liste ) CSS sorgt für Darstellung Farben, Schriften, Hintergründe Rahmen, Abstände Positionierung CSS hat folgende Form: selector { declarations* 5
6 Grundlagen ein Selektor sucht HTML-Elemente aus Deklarationen ändern die Eigenschaften der selektieren Elemente Schriftfarbe für alle Überschriften vom Typ h1 auf weiß* setzen: selector { declarations* h1 { color: #fff; * hexadezimal FFFFFF, abgekürzt FFF 6
7 Grundlagen ein Selektor sucht HTML-Elemente aus Deklarationen ändern die Eigenschaften der selektieren Elemente alle Links mit einer schwarzen, gestrichelten Linie mit einem Pixel Breite umranden, aber nur oben: selector { declarations* a { border-top: 1px solid #000; 7
8 Grundlagen mehrere Tags selektieren alle Überschriften in einer serifenlosen Schrift darstellen: h1, h2, h3, h4, h5, h6 { font-family: sans-serif; 8
9 Grundlagen Verschachtelung berücksichtigen alle Bilder, die sich in Absätzen befinden, sollen den Text rechts* um sich herumfliessen lassen: p img { float: left; * das Bild schwebt links vom Text 9
10 Grundlagen Verschachtelung 2: nur direkte Nachfahren alle Links, die sich direkt in einer Tabellenzelle befinden, grün einfärben: td > a { color: #0c0; passt auf... <td> <a href= # >Color me green!</a> </td> 10
11 Grundlagen Verschachtelung 2: nur direkte Nachfahren alle Links, die sich direkt in einer Tabellenzelle befinden, grün einfärben: td > a { color: #0c0; passt nicht auf... <td> <p> <a href= # >Can I haz green?</a> </p> </td> 11
12 Grundlagen Pseudo-Klassen alle Links grün einfärben, wenn sich die Maus über ihnen befindet sonst rot: a:link { color: red; a:visited { /* breits besucht */ color: red; a:hover { /* Maus darüber */ color: green; a:active { /* beim Klicken */ color: red; 12
13 Grundlagen weitere Pseudo-Klassen sind... :first-child /* das erste Kind vom angegeben Typ */ p:first-child i /* i-elemente in den ersten p-elementen */ p i:first-child /* die ersten i-elemente in allen p-elementen */ :focus /* Elemente, die Tastatur-Fokus haben */ :lang /* Elemente, die einer bestimmten Sprache zugeordnet sind */ 13
14 Grundlagen Definition und Verwendung von Klassen alle Tabellenzellen der Klasse number sollen ihren Inhalt rechtsbündig ausrichten: td.number { text-align: right; HTML dazu: <td class= number > 23 </td> <td> Glas Milch </td> 14
15 Grundlagen Definition und Verwendung von eindeutigen IDs die Links in der Liste mit der ID navigation sollen nicht unterstrichen sein: ul#navigation a { text-decoration: none; HTML dazu: <ul id= navigation > <li><a href= index.html >Startseite</a></li> <li><a href= imprint.html >Impressum</a></li> </ul> 15
16 EINBINDUNG 16
17 Einbindung von CSS inline : <p style= text-align: right; > Lorem ipsum dolor sit amet,... </p>... wenig sinnvoll: wird schnell unübersichtlich. 17
18 Einbindung von CSS per <style> im <head>: <head> <style type="text/css"> a { text-decoration: none; </style> </head> ebenfalls nicht so sinnvoll: wird mit jeder Seite neu geladen. 18
19 Einbindung von CSS per <link> im <head>: <head> <link rel="stylesheet" type="text/css" href="style-print.css" media= print /> </head> Super: wird nur einmal vom Browser geladen, liegt dann im Cache. 19
20 Einbindung von CSS per immer zu Beginn eines url( style.css ); 20
21 Einbindung von CSS sinnvolle Auslagerung und Aufteilung möglich Organisation von Stylesheets... für verschiedene Medien (screen, handheld, print,...) neu: CSS Media Queries... media="only screen and (max-device width:480px)" allgemeine CI bis seitenspezifische Styles thematisch unterteilt für verschiedene Browser Ladezeiten importierte oder per <link> geladene Stylesheets müssen nur einmal geladen werden, sind dann im Cache verfügbar Achtung MSIE: maximal 31 Stylesheets je Datei laden 21
22 POSITIONIERUNG 22
23 CSS Positionierung es gibt zwei Arten von Elementen: block und inline inline-elemente... nehmen sich so viel Platz wie sie brauchen block-elemente... nehmen horizontal die ganze Breite (des Elternelements) ein forcieren einen Zeilenumbruch interessant für Layouts: block-elemente Position und Dimensionen per CSS frei bestimmbar Standard-Element für Positionierung: div (division Unterteilung, Sektor) 23
24 CSS Box Model Margin Padding Breite einer Box: linke innere Seite des Rahmens bis rechts innere Seite des Rahmens Inhalt Rahmen ("border")... verschiedene Browser interpretieren das natürlich verschieden. 24
25 CSS Positionierung Elemente können per float: left und float: right bestimmen, dass sie an folgenden Elementen kleben Bild und Text, ohne floating 25
26 CSS Positionierung Elemente können per float: left und float: right bestimmen, dass sie an folgenden Elementen kleben Bild mit float: left klebt links am Text folgende Elemente, die nicht kleben möchten, sagen clear: left right both 26
27 CSS Positionierung relative Positionierung Position nur relativ zur natürlichen Position verrücken drücken weiterhin andere Elemente weg... {position: relative; left: -20px; absolute Positionierung Elemente nehmen relativ zu anderen keinen Platz mehr ein schlecht für Layouts, die eben dieses Verhalten benötigen... {position: absolute; top: 10px; right: 20px; 27
28 CSS Positionierung das Box Model ist zwar mächtig, aber nicht intuitiv floating beeinflusst alle folgenden Elemente Zentrierung über Trick mit dem Rand (margin) vertikale Zentrierung noch umständlicher Kästen, die eine Mindesthöhe haben, aber dennoch bei mehr Inhalt mitwachsen ebenfalls sehr umständlich (bspw. Sidebars ) nicht zu vergessen: Unterschiede zwischen Browsern viel einfacheres Denkmodell: Zeilen und Spalten passt sehr gut für sehr viele Fälle in den 90ern mit Tabellen umgesetzt aber dafür sind sie nicht da 28
29 PROBLEME MIT CSS 29
30 Probleme mit CSS keine Verschachtelung Lesbarkeit leidet ul#menu {... ul#menu li {... ul#menu li a {... ul#menu li a:hover {... ul#menu li a#active {... ul#menu li a#active:hover {... viele überflüssige Zeichen... 30
31 Probleme mit CSS keine Variablen oder zumindest Konstanten Farben einheitlich ändern body { background-color: #cc9900; div#content { background-color: #ffcc00; hier soll der Hintergrund der Seite etwas dunkler sein als der Hintergrund des Inhalts Änderungen an der einen Farbe bedingen Änderungen an der anderen das sollte einfacher gehen: etwas dunkler kann man auch in Code ausdrücken!... aber nicht in CSS. 31
32 Probleme mit CSS Positionierung umständlich Box Model & Browserunterschiede man löst immer wieder dieselben Probleme... Wieso das nicht einmal browserunabhängig für 99% der Anwendungsfälle lösen?... zwei Lösungsansätze: Basis-Stylesheets Positionierung, aber auch Browserunterschiede, Typographie, Druckansicht DSLs für CSS Lesbarkeit, Variablen, Redundanzen entfernen und viele Projekte... 32
33
34 BASIS-STYLESHEETS 34
35 Basis-Stylesheets Hilfe bei Positionierung durch fertige Gitter CSS Resets professionelle Typographie konsistente Formulare vernünftige Voreinstellungen für den Druck 960 Grid System, Blueprint, Baseline,... 35
36 DEMO: BASELINE 36
37 DOMÄNENSPEZIFISCHE SPRACHEN FÜR CSS 37
38 Domänenspezifische Sprachen für CSS Sass kompiliert von einer CSS-artigen Sprache nach CSS Verschachtelung, Variablen, Arithmetik, wird durch Kompilierung aufgelöst Anzahl der Dateien egal Compass verwendet Sass, unterstützt Basis-Stylesheets bpsw. Blueprint Plugins für diverse serverseitige Frameworks Ruby on Rails, Wordpress, oder einfach beim Entwickeln immer kompilieren lassen 38
39 Domänenspezifische Sprachen für CSS Verschachtelung von Selektoren ul#menu { list-style: none; ul#menu li { display: inline; ul#menu li a { text-decoration: none; 39
40 Domänenspezifische Sprachen für CSS Verschachtelung von Selektoren 40
41 Domänenspezifische Sprachen für CSS Verschachtelung von Eigenschaften div { border-top: 1px #000 solid; border-bottom: 1px #000 solid; border-left: 2px #f00 solid; border-right: 2px #f00 solid; 41
42 Domänenspezifische Sprachen für CSS Verschachtelung von Eigenschaften 42
43 Domänenspezifische Sprachen für CSS Variablen a { color: #c198f2;.... ul#menu { border-color: #c198f2; 43
44 Domänenspezifische Sprachen für CSS Variablen 44
45 Domänenspezifische Sprachen für CSS Arithmetik bspw. mit Farben a { color: #c198f2; ul#menu { border-color: #8f66c0; /* etwas dunkler als die Links */ 45
46 Domänenspezifische Sprachen für CSS Arithmetik bspw. mit Farben 46
47 Domänenspezifische Sprachen für CSS Mixins #sidebar { border: 1px black solid; display: inline; float: left; #content img { background-color: #fafafe; display: inline; float: left; 47
48 Domänenspezifische Sprachen für CSS Mixins 48
49 Domänenspezifische Sprachen für CSS Mixins mit Parametern #header h1 { text-indent: -9999em; overflow: hidden; background-image: image_url(/images/logo.png); background-repeat: no-repeat; background-position: 50% 50%; li#overview { text-indent: -9999em; overflow: hidden; background-image: image_url(/images/overview.png); background-repeat: no-repeat; background-position: 20% 50%; 49
50 Domänenspezifische Sprachen für CSS Mixins mit Parametern 50
51 DEMO: COMPASS BASIS-STYLESHEETS KOMBINIERT MIT SASS 51
52 ZUSAMMENFASSUNG 52
53 Zusammenfassung CSS Frameworks sind Abstraktionen auf CSS... stellen fertige Lösungen bereit Typographie, Formularelemente,... stellen fertige Patterns bereit insbesondere für Positionierung gleichen Schwächen der Sprache aus verbesserte Lesbarkeit durch Verschachtelung leichtere Änderungen durch Variablen und Farben-Arithmetik Modularisierung durch Mixins 53
54 Zusammenfassung Ist der Mehraufwand gerechtfertigt? Für welche Aufgaben? Welche Ergänzungen sind sinnvoll? Welche nicht? Wer würde etwas davon selbst verwenden wollen? 54
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
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
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
CSS Cascading Style Sheets
XML light CSS Cascading Style Sheets Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Wieso Cascading Style Sheets? HTML und CSS XML und CSS Ausblick XML light CSS Cascading Style Sheets 2/24 Probleme,
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
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
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
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
Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel
Selektoren in CSS 1. Beispiel: Kinder und Enkel universal Selektor body { font family: sans serif; color : #666; div { border:
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
Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012
Übung zur Vorlesung Digitale Medien Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL:
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
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
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
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
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
Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.
1. Stunde Mitschrift HTML Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Verstehen des Unterschiedes
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
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
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
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,
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
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
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
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]
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
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
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
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
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!
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:
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
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
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
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
Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger
Grundlagen zu HTML Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger Folie: 1 Gliederung Folie: 2 Was ist HTML Die Sprache HTML Aufbau von HTML-Tags Das HTML-Grundgerüst Hintergrundformatierungen
AdOps Technische Spezifikationen
AdOps Technische Spezifikationen HTML5-Werbemittel (Desktop) Bei der Verwendung von Redirects müssen diese Spezifikationen nicht beachtet werden. Physische Anlieferung von HTML5-Werbemitteln + Trackings.
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
Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5
Inhaltsverzeichnis Einleitung 1 Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5 Über mich 7 Kapitel 1 Konzeption und Planung der Website 11 1.1 Grundüberlegungen 12
Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen
Seitengestaltung mit HTML und CSS Stefan Rothe, Thomas Jampen 2013 09 12 Rechtliche Hinweise Dieses Werk von Stefan Rothe steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License. Zudem verzichtet
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,
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,
SharePoint Designer Datenansichten. Michael Greth
SharePoint Designer Datenansichten Michael Greth Agenda SharePoint Designer 2007 Überblick No-Code-Lösungen Datenquellen und Datenansichten Demo Listen zusammenfassen Demo Datenvisualisierung Demo SharePointLive
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
Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker
Tutorium Einführung in HTML Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Grundlagen von HTML Objekte, Elemente, Tags Grundaufbau eines HTML-Dokuments
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
Flexibles HTML. christian.cueni@bfh.ch
Flexibles HTML christian.cueni@bfh.ch Inhalt Desktop & Mobile Strategien Responsive Design HTML5 Feature Detektion mit Modernizr Desktop & Mobile Strategien Wie bringe ich mobile Nutzer zum (UI) optimierten
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
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
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!doctype html> <html lang="de"> <head>
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes
WEBSITE ERSTELLEN mit DREAMWEAVER MX
WEBSITE ERSTELLEN mit DREAMWEAVER MX Inhalt: WEBSITE ERSTELLEN mit DREAMWEAVER MX... 1 Neue Site anlegen... 2 Neue HTML-Seite erstellen... 2 Seiteneigenschaften... 2 Webseite speichern... 2 CSS (Cascading
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*
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq
qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcvbnmq Konzept für die e Learning Fortbildung wertyuiopasdfghjklzxcvbnmqwertyui
HTML5 / CSS3. 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH
HTML5 / CSS3 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH Seite / 68 COMSOLIT GmbH Fullservice Agentur die erfolgreich professionelle Gesamtlösungen umsetzt. Zu den Kernkompetenzen zählen:
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
Cascading Style Sheets II (CSS)
Cascading Style Sheets II (CSS) CSS ist ein Befehlssystem, das die Erscheinungsform von HTML-Elementen regelt. Bei modernen Websites ist der Inhalt der Site unabhängig vom Layout. HTML übernimmt den Inhalt,
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.
Inhaltsübersicht. I Die Einleitung 25. VI Nützliche Werkzeuge 363. readme.txt zur zweiten Auflage 21. 1 Das Web st nicht aus Papier 27
Inhaltsübersicht readme.txt zur zweiten Auflage 21 I Die Einleitung 25 1 Das Web st nicht aus Papier 27 il HTML-Kästchen erstellen 39 2 So funktioniert HTML 41 3 Wichtige HTML-Elemente (1) 57 4 Wichtige
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,
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...
E-Mail Editor Vorlagen Programmier-Richtlinien
E-Mail Editor Vorlagen Programmier-Richtlinien 1 Inhaltsverzeichnis 1. Einleitung... 3 2. Code erstellen für Vorlagen... 4 3. Code für mobile Vorlagen (Responsive Design)... 5 4. Editor Klassen (Tags)
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-
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
Manuela Hoffmann. Modernes Webdesign. Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press
Manuela Hoffmann Modernes Webdesign Gestaltungsprinzipien, Webstandards, Praxis Galileo Press Einleitung 11 TEIL I: Das Design 1 Webdesign und Webstandards 17 1.1 Webdesign, was ist das eigentlich? 17
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
Yoko-Theme Dokumentation
Yoko-Theme Dokumentation 1. Theme Features und Voraussetzungen für die Nutzung WordPress-Theme für WordPress 3.1+ (ältere WP-Version werden nicht unterstützt) Responsive Layout mit CSS3 Media Queries:
Dokumentation: Erstellung einer Blog App für Windows 8
Dokumentation: Erstellung einer Blog App für Windows 8 Kentaro Wakayama, medialesson GmbH 2.4.2013 Table of Contents 1. Einführung... 2 2. Voraussetzung... 2 2.1 Allgemeine Informationen... 2 2.2 Wordpress...
Internet und Webseiten-Gestaltung
Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 5. Mai 2004 Dipl.-Inf. T. Mättig 2004-04-28 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:
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
Internetseiten selbst erstellt
Internetseiten selbst erstellt Vorüberlegungen: Übersichtsplan aller geplanten Seiten zeichnen und bereits logische Dateinamen überlegen. Inhalt der Seite Willkommen/Was gibt es zu sehen und was will ich
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
Cascading Stylesheets (CSS)
Cascading Stylesheets (CSS) Cascading Stylesheets trennen Webdesign vom eigentlichen Inhalt. Die Vererbung, sprich Kaskadierung, von festgelegten Stilen wird allerdings erst bei fortgeschrittenen Programmierkenntnissen
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
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,
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
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
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
KEN, DTP, 07/ Produktion
KEN, DTP, 07/08 32 Produktion Siteverwaltung «Online» Siteverwaltung «Lokal» Sitestruktur Sämtliche Dateien einer (html, jpg, css), die am Ende der Produktion ins Internet gestellt werden, müssen in einem
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,
JavaScript und das Document Object Model 30.05.07
JavaScript und das Document Object Model Dynamische Seiten Bestreben von Netscape und Microsoft, HTML-Seiten dynamisch zu gestalten Schlagwort DHTML Netscape/Sun: JavaScript Microsoft: JScript Problem
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
Dokumentation Kapitel 1. Dokumentation Kapitel 2
Dokumentation Kapitel 1 Das Web ist nicht aus Papier. Wenn man eine Webseite gestalten will an man das Papierdenken anwendet kommt man nicht weit oder es wird nicht so wie man es sich Vorgestellt hatte.
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?
Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache
Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie
Teil I: Das Design. 1 Webdesign und Webstandards... 17. 2 Gestaltung und Layout... 51. 3 Typografie... 105. 4 Farbe 129. 5 Medien...
Teil I: Das Design 1 Webdesign und Webstandards... 17 2 Gestaltung und Layout... 51 3 Typografie... 105 4 Farbe 129 5 Medien... 145 AUF EINEN BLICK 6 Werkzeugkasten... 159 Teil II: Die Technik 7 (X)HTML
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.
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
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
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
Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK
Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Responsive Webdesign vertraut. Es wird
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
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......................
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
EWS, WS 2016/17, Pfahler
Vorlesung und Übung Universität Paderborn Wintersemester 2016/2017 Dr. Peter Pfahler HTML und CSS F-1 HTML: Ein kurzer Überblick HTML steht für Hypertext Markup Language: eine Auszeichnungssprache, in