From e5a2a01cad5d19b667c9f7e74ee0873f5151a22b Mon Sep 17 00:00:00 2001 From: Tobias Struckmeier Date: Sun, 2 Mar 2014 20:28:23 +0100 Subject: [PATCH 01/11] Updated config to german --- _config.yml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/_config.yml b/_config.yml index 34a3b2a..1db3a45 100644 --- a/_config.yml +++ b/_config.yml @@ -10,18 +10,18 @@ map: - title: Core caption: The 'mandatory' workshop content subpages: - - title: The template structure + - title: Die Template Struktur path: /core/structure.html - caption: From white page to a 'Hello World' - - title: Your first styled Hello World! + caption: Von der weißen Seite zum 'Hallo Welt' + - title: Erstelle Dein erstes formatiertes 'Hallo Welt' path: /core/style.html - caption: Understanding CSS. What is class, Id and selector - - title: Create your personal Portfolio - Part 1 + caption: CSS Verstehen. Was ist sind Klasse, Id und Selector + - title: Erstelle Dein persönliches Portfolio - Teil 1 path: /core/portfolio.html - caption: HTML5 elements, float, box model and text style - - title: Create your personal Portfolio - Part 2 + caption: HTML5 elemente, float, box model und text style + - title: Erstelle Dein persönliches Portfolio - Teil 2 path: /core/portfolio-2.html - caption: Positioning, anchors and form elements + caption: Positionierung, Anker and Formelemente - title: Extras caption: Interesting or useful extras subpages: From ca0bbec27df9acd24b1fe97eb228a801bfea995b Mon Sep 17 00:00:00 2001 From: Tobias Struckmeier Date: Thu, 27 Mar 2014 19:26:36 +0100 Subject: [PATCH 02/11] Added portfolio 3 (created by carsten) --- core/portfolio-3.md | 247 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 core/portfolio-3.md diff --git a/core/portfolio-3.md b/core/portfolio-3.md new file mode 100644 index 0000000..8ca7da8 --- /dev/null +++ b/core/portfolio-3.md @@ -0,0 +1,247 @@ +--- + +layout: ots +title: Erweitere dein persönliches Portfolio + +--- + + +Um den Umfang der Seite noch zu erweitern und einen echten Lebenslauf zu erstellen bieten sich verschiedene Wege an. Im folgenden Abschnitt gehen wir auf die Gestaltung eines Lebenslaufs und einer simplen Tabelle zur übersichtlichen Darstellung von Fertigkeiten ein. + +## Euer Ausbildungsweg als übersichtliche Liste + +**Das Ziel** + +Euer Lebenslauf sollte die folgenden Abschnitte enthalten: + +* Personendaten (Name, Wohnort, etc.) +* Schullaufbahn (chronologisch) +* weitere, freie Angaben wie z.B. Ausbildungsweg oder aber Interessen + +Euer Lebenslauf sollte übersichtlich sein und ansprechend wirken. Mit Hilfe der bereits erlernten Design-Elemente bauen wir eine simple Auflistung der oben genannten Punkte auf. + +Erstelle eine neue Datei und beschreibe die Grundstruktur und gebt der Seite einen Titel. Erstellt im **body**-Tag eures Dokuments folgenden **div**-Tag: + +
+
+ +Innerhalb dieses Containers legen wir den Lebenslauf fest und erstellen ein einmaliges Design speziell für euren Lebenslauf über die ID "vita". + +Um eurem Lebenslauf eine feste Breite und Abstände zu den anderen Inhalten der Seite zu geben, sowie eine Schriftart und -Größe festzulegen weisen wir der ID "vita" noch folgende Eigenschaften in der bereits erstellten CSS-Datei zu: + + #vita { + width: 800px; + margin: 50px auto 50px; + font: 14px Helvetica, Sans-Serif; + } + +Anschließend beginnen wir mit der Überschrift eures Lebenslaufs: Eurem Namen. + +

Vorname Nachname

+ +Da euer Name die größte Überschrift im Dokument sein sollte, könnt ihr diese über das **

**-Tag durch CSS im Design ändern. + + #vita h1 { + margin: 0 0 16px 0; + padding: 0 0 16px 0; + font-size: 40px; + font-weight: bold; + letter-spacing: -2px; + border-bottom: 2px solid #999; + } + +Das Attribut "letter-spacing" ist hierbei der Abstand zwischen den Buchstaben, der durch den Wert um 2 Pixel reduziert wird. + +Der nächste Punkt im Lebenslauf sollten eure Kontaktdaten sein, die ihr wie folgt in einem Paragraphen auflistet und eure E-Mail-Adresse direkt als Link einfügt: + +

+ Telefon: 0231-9876555
+ E-Mail: my@mail.com +

+ +Die Links in eurem Lebenslauf können ebenfalls anders gestaltet werden und statt blau z.B. grau dargestellt werden. Ebenfalls kann durch die Zustandsangabe "hover" die Linkfarbe verändert werden, wenn ihr mit der Maus auf diesen zeigt. + + #vita a { + color: #999; + text-decoration: none; + border-bottom: 1px dotted #999; + } + + #vita a:hover { + border-bottom-style: solid; + color: black; + } + +Diese Eigenschaften beziehen sich durch die vorangestellte ID lediglich auf die Links in eurem Lebenslauf. Eine kurze Beschreibung zu eurer Person könnt ihr unter euren Kontaktdaten einfügen: + +

+ Hier könnt ihr eine kurze Beschreibung von euch einfügen. +

+ +Über die angegebene ID legen wir den Stil des Textes fest. + + #introduction { + width: 500px; + float: left; + font-family: Georgia, Serif; + font-style: italic; + color: #666; + } + +Der längste Abschnitt eures Lebenslaufs wird durch Beschreibungslisten **
** umgesetzt. Eine Beschreibungsliste wird mit dem **
**-Tag umschlossen und kann folgendes beinhalten: + +* **
**: Beschreibungsname (in unserem Fall der Abschnitt des Lebenslaufs) +* **
**: Inhalt der Auflistung (in unserem Fall die Informationen zum jeweiligen Lebensabschnitt) + +Beginnen wir mit der Schullaufbahn: + +
+
Schulbildung
+
+

Name der Schule

+

+ Zeitraum: August 2000 - Juli 2008
+ Abschluss: Euer erreichter Abschluss +

+
+
+ +Unserer Auflistung geben wir nun noch ein passendes Design für die beiden verschiedenen Elemente mit. + + dt { + font-style: italic; + font-weight: bold; + font-size: 18px; + text-align: right; + padding: 0 25px 0 0; + width: 150px; + float: left; + height: 100px; + border-right: 1px solid #999; + } + + dd { + width: 600px; + float: right; + margin: 0; + padding: 0; + } + +Damit der Name der Schule noch hervorgehoben wird, definieren wir noch einen neuen Stil für die Überschrift **

**: + + #vita h2 { + font-size: 20px; + margin: 0 0 6px 0; + position: relative; + } + +Da wir den Elementfluss durch float ändern, damit die Elemente auf einer horizontalen Ebene dargestellt werden, müssen wir diesen nach dem jeweiligen **
**-Element wieder zurücksetzen. Hierfür haben wir eine Klasse angelegt, mit deren Hilfe ein leeres **
**-Element erzeugt wird, um den Elementfluss zurückzusetzen. + +
+ +Der dazu gehörige CSS-Code sieht wie folgt aus: + + dd.clear { + clear: both; + float: none; + margin: 0; + height: 15px; + } + +Durch die Höhenangabe wird zudem ein Abstand zum nachfolgenden Element hergestellt. + + +Zusätzlich zu eurer Schullaufbahn könnt ihr noch euren Ausbildungsweg, eure Interessen oder Sprachkenntnisse durch weitere Einträge (**
** und **
**-Elemente) hinzufügen. Orientiert euch hierfür einfach an der obigen Anleitung. + +Passt anschließend das Design durch Verändern der Werte oder das Erweitern der CSS-Datei euren Vorstellungen an. Selbstverständlich könnt ihr auch gezielt neue Klassen für das Design einführen - speziell falls ihr neue Elemente in der HTML-Datei einfügt und diese erweitert. Probiert es aus! + + +## Ergänzend: Eure Kenntnisse, Schwerpunktbereiche oder Sprachen als Tabelle + +Als Erweiterung zu eurer Laufbahn, euren Abschlüssen und Interessen bieten sich noch Fertigkeiten, z.B. in Programmiersprachen oder mit gängiger Software an. Als sehr einfache Methode zur Darstellung zeigen wir euch, wie ihr Tabellen erstellt. + +Erstellt zuerst einn **
**-Container unterhalb eures Lebenslaufs. + +
+
+ +Innerhalb dieses Containers erstellen wir die Tabelle und definieren im Stylesheet das Aussehen/Verhalten der Tabelle, die wir aufbauen. + +Eine Tabelle wird mittels des ****-Tags geöffnet und wie gewohnt wieder geschlossen. Innerhalb der Tabelle sollten die Beschriftungszeilen/-Spalten und die einzelnen Inhaltszellen definiert werden. + +
+ + + + + + + +
BereichErfahrungKenntnisse
+ +Das Tag **** steht für den Kopf-Bereich der Tabelle. Innerhalb des Kopfbereichs, welcher so noch keine Zellen beinhaltet wird eine Zeile der Tabelle mit **** erstellt. Die Zeile muss anschließend mit einzelnen Zellen gefüllt werden. **** steht hierbei für eine Zelle, die speziell als Kopf-Zelle gedacht ist. Wir erstellen in der ersten Zeile 3 Zellen und arbeiten somit mit 3 Spalten, die nach und nach gefüllt werden sollen. + +Jede Tabellenzeile muss einzeln erstellt werden und in jeder Zeile sollten genau so viele Zellen enthalten sein, wie es Spalten gibt. Hier sollten somit immer 3 Zellen pro Zeile erstellt werden. + +Um die Tabelle nach dem Tabellenkopf mit Inhalt zu füllen, erstellen wir hinter dem geschlossenen (!) Kopfbereich (****) den Body ("Körper") der Tabelle: + + + + Tabellenkalkulation + Sehr gut + Komplexe Tabellen, Szenarien, Formeln + + + +Wie bereits erwähnt sollen es drei Zellen pro Zeile sein. Ergänzt bitte noch weitere Zeilen, wie z.B. eure Kenntnisse zur Textverarbeitung, Datenbanken oder vollkommen anderen Bereichen. Wie im eigentlichen Header können hier zur Zeilenbeschreibung auch ****-Tags verwendet werden. + +Kommen wir zum Aussehen der Tabelle. Zuerst sorgen wir für die zum Lebenslauf passende Ausrichtung. + + + #skills table { + margin: 50px auto 50px; + } + + +Wenn ihr die Seite neu ladet werdet ihr feststellen, dass die Tabelle noch immer sehr gedrungen und dadurch nicht übersichtlich wirkt. Fügt den Zellen (Inhalt, als auch den Kopfzellen) einen Innenabstand hinzu: + + + #skills table td, table th { + padding: 5px; + } + + +Um die Beschriftungen der Zellen hervorzuheben und den Text der Zeilenbeschriftungen rechtsbündig zu machen, setzen wir noch Hintergrundfarben und die Textausrichtung. + + #skills table thead th { + background-color: #4488FF; + } + + #skills table tbody th { + text-align: right; + background-color: #0066AA; + } + +Wie immer könnt ihr gerne die Darstellung nach eurem Geschmack anpassen. + + +## Mein Lebenslauf sieht gut aus - was ist, wenn er gedruckt wird? + +Auch wenn Webseiten-Ausdrucken ein unnötiger Volkssport ist, kann es besonders bei Lebensläufen natürlich vorkommen, dass diese ausgedruckt werden. + + +**Farbenfrohe Webseite? Kein Problem!** + +Für den Fall, dass ihr euren Lebenslauf in einer anderen Darstellung auch ansehnlich druckbar machen wollt - ihr aber eure Darstellung auf der Webseite nicht speziell auf den Druck auslegen wollt, könnt ihr in eurem HTML-Dokument einfach auf eine andere CSS-Datei verweisen, die mit einem bestimmten Schlüsselwort speziell für Druckausgaben verwendet wird. + +Erstellt eine Kopie eurer CSS-Datei im gleichen Ordner und benennt diese in "print.css" um. Den Inhalt könnt ihr später nach und nach anpassen. + +Bindet nun in eurem HTML-Dokument die neu erstellte CSS-Datei im ****-Bereich mit folgender Zeile ein: + + + +Durch die Medienangabe "print" wird festgelegt, dass dieses Stylesheet speziell zum Druck verwendet wird. + +Entfernt für einen einfachen Test einmal die Farbangaben der Tabellenhintergründe oder ändert diese in eine andere Farbe (z.B. Grau) ab. In der Druckvorschau eures Browsers ist diese Tabelle nun nicht mehr so farbenfroh wie vorher. + + \ No newline at end of file From ece81324e616a3f59df24ee8f91ff35999ded78a Mon Sep 17 00:00:00 2001 From: Tobias Struckmeier Date: Thu, 27 Mar 2014 19:26:50 +0100 Subject: [PATCH 03/11] Added intermediate version of effects and forms --- core/effekte.md | 102 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 core/effekte.md diff --git a/core/effekte.md b/core/effekte.md new file mode 100644 index 0000000..7fd135d --- /dev/null +++ b/core/effekte.md @@ -0,0 +1,102 @@ +--- + +layout: ots +title: Effekte und Formulare + +--- + +Viele Grundelemente haben wir bereits kennengelernt. Mit CSS kann man jedoch noch einiges mehr erreichen. +Einen kleinen Ausblick darauf soll dieser Abschnitt bieten. + +## Effekte + +**Das Ziel** + +* Die Seite mit ein paar visuellen Effekten aufpeppen. +* Das Menü wird aufgepeppt um die Seite interessanter zu machen + +### Schatten + +Eine Seite kann hübscher aussehen wenn sie raffinierter gestaltet wird. Wichtig ist es mit Effekten nicht zu +übertreiben und zu versuchen einzelne wichtige Elemente herauszustellen. + +Nehmen wir uns als erstes vor die Überschriften auf der Seite noch deutlicher sichtbar zu machen. +Dazu werden wir die Texte mit einem Schatten versehen. Sparsam verwendet kann der Einsatz eines +Textschattens die z.b. die Übersicht über die Seite verbessern oder etwas auflockern. + +Der Schatten wird in CSS über die Eigenschaft "text-shadow" definiert. Der Wert setzt sich zusammen aus dem +horizontalem und vertikalem Versatz, einer Unschärfe und eines Farbwertes zusammen. + + text-shadow: horizontal vertikal unschärfe farbwert; + +Möchten wir also einen dunkelgrauen Schatten der 2 Pixel nach rechts und nach unten versetzt ist erzielen müssen wir +dies so definieren. Um keinen harten Schatten zu haben setzen wir auch eine Unschärfe von 3 Pixeln. + + text-shadow: 2px 2px 3px #777777; + +Wende diesen Effekt auf alle Überschriften (h1) an und überprüfe das Ergebnis im Browser. + +Ist es geglückt dann probiere mit den Einstellungen ein wenig herum. Durch ändern der Farben und Werte +lassen sich auch andere spannende Effekte erzielen. Selbst mehrere Schatten auf einem Elemente sind möglich. + +Hier noch eine kleine [Effektsammlung](http://www.onlinecasinodemar.com/webdesign/xhtml-css/beeindruckende-effekte-mit-der-css-eigenschaft-text-shadow/) +zur Inspiration und zum weiterspielen. Versuche doch mal den ein oder anderen Effekt nachzubauen der besonders gut +zu Deiner Seite und Dir passt. + +### Runde Ecken + +Wenn Du auf Deiner Seite einen Absatz oder ein anderes Element hast das besonders wichtig ist, kannst Du dies +z.b. mit Farben und einem Rahmen hervorheben. Da wir bisher aber nur eckige Boxen erzielt haben, möchten wir +diese etwas schöner gestalten indem wir die Ecken rund machen. + +Angenommen wir haben ein Element mit der Klasse *info-box* auf der Seite. Können wir diese z.b. Orange einfärben. +Die Runden Ecken erreichen wir mit der Eigenschaft "border-radius". Der angegebene Wert entspricht dabei der Intensität +der Rundung. + + .info-box { + background-color: orange; + border-radius: 10px; + } + +Hierduch kann es passieren das Inhalte innerhalb der Box durch die Rundung "abgeschnitten" werden. Um dem entgegenzuwirken +muss man ggf. mit einem padding dafür sorgen das der Abstand zum Rand ausreichend ist. + +Um nur einzelne Ecken abzurunden kann für jede Ecke ein eigener Wert angegebn werden. + + .info-box { + background-color: orange; + border-radius: 30px 0 30px 0; + } + +Dieses Beispiel rundet z.b. nur die obere linke und untere rechte Ecke ab. Verändere die Werte ein wenig um eine +interessante Form zu bilden. Zusammen mit der Bordereigenschaft kann man auf diese Weise Elemente gut herausarbeiten. + +### Hovereffekte + +Das nächste Ziel soll sein das Menü interaktiver zu machen. Bewegt der Besucher die Maus über die Menüpunkte, +so soll der Menüpunkt hervorgehoben werden. Dazu bietet sich der sogenannte Pseudoselektor ":hover" an. +"Hover" zu deutsch "schweben" wird immer dann auf Element angewendet, wenn die Maus sich gerade über dem Element +befindet. + +In der Webseite setzen wir dazu einen Effekt auf die
  • Elemente des Menü: + + nav li:hover { + border: 1px solid green; + color: green; + background-color: lime; + } + +Hier wird ein grüner Rand und Textfarbe gesetzt und die Hintergrundfarbe auf einen helleren Grünton verändert. +Speichere die Änderung am CSS ab und prüfe das Ergebnis im Browser. + +Jede CSS Eigenschaft kann beim "hovern" verändert werden z.b. Textgrößen oder Schatten. +Der Fantasie sind dabei kaum Grenzen gesetzt. + +### Formulare + +Das Internet ist nicht nur Konsummedium. Es bietet auch Möglichkeiten die Inhalte zu bearbeiten (z.b. Wikipedia), +Kommunikation über Emails (z.b. googlemail) oder Nachrichten z.b. in Foren. +All das ist auch über Webseiten realisierbar. Um diese Eingaben möglich zu machen, verwendet man Formulare. + +Formular bestehen aus verschiedenen Feldern. + From 35c2ba7605231b53dafe878618109225c52979bf Mon Sep 17 00:00:00 2001 From: Tobias Struckmeier Date: Thu, 27 Mar 2014 19:26:59 +0100 Subject: [PATCH 04/11] Added pages to index --- _config.yml | 8 +++++++- index.md | 4 ++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index 1db3a45..bb7fc5c 100644 --- a/_config.yml +++ b/_config.yml @@ -22,7 +22,13 @@ map: - title: Erstelle Dein persönliches Portfolio - Teil 2 path: /core/portfolio-2.html caption: Positionierung, Anker and Formelemente - - title: Extras + - title: Erstelle Dein persönliches Portfolio - Teil 2 + path: /core/portfolio-2.html + caption: Positionierung, Anker and Formelemente + - title: Effekte und Formulare + path: /core/effekte.html + caption: Schatten, Runde ecken, Hover, Formulare +- title: Extras caption: Interesting or useful extras subpages: - title: Browser Developer Tools diff --git a/index.md b/index.md index 04d24f0..f839509 100644 --- a/index.md +++ b/index.md @@ -63,6 +63,10 @@ dir diese Resourcen dabei helfen. HTML5-Elemente, float, Box Modell und Schrift-Gestaltung. * [Create your personal Portfolio - Part 2.](core/portfolio-2.html) - Positionierung, Web-Links und Formular-Elemente. +* [Create your personal Portfolio - Part 3.](core/portfolio-3.html) - + Tabellen und Listen +* [Effekte und Formular](core/effects.html) - + Effekte und Formulare ## Cheat Sheet From 61210f0ad090ee9c8966d97d0c823e3c737e904a Mon Sep 17 00:00:00 2001 From: mindjam Date: Thu, 27 Mar 2014 21:32:38 +0100 Subject: [PATCH 05/11] Fixed formatting mistakes & added a link Fixed some formatting mistakes and added a link to the next part of the workshop (effects.html) --- core/portfolio-3.md | 43 ++++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/core/portfolio-3.md b/core/portfolio-3.md index 8ca7da8..2414078 100644 --- a/core/portfolio-3.md +++ b/core/portfolio-3.md @@ -20,10 +20,10 @@ Euer Lebenslauf sollte die folgenden Abschnitte enthalten: Euer Lebenslauf sollte übersichtlich sein und ansprechend wirken. Mit Hilfe der bereits erlernten Design-Elemente bauen wir eine simple Auflistung der oben genannten Punkte auf. -Erstelle eine neue Datei und beschreibe die Grundstruktur und gebt der Seite einen Titel. Erstellt im **body**-Tag eures Dokuments folgenden **div**-Tag: +Erstelle eine neue Datei und beschreibe die Grundstruktur und gebt der Seite einen Titel. Erstellt im ``-Tag eures Dokuments für einen neuen Abschnitt folgendes `
    `-Tag: -
    -
    +
    +
    Innerhalb dieses Containers legen wir den Lebenslauf fest und erstellen ein einmaliges Design speziell für euren Lebenslauf über die ID "vita". @@ -39,7 +39,7 @@ Anschließend beginnen wir mit der Überschrift eures Lebenslaufs: Eurem Namen.

    Vorname Nachname

    -Da euer Name die größte Überschrift im Dokument sein sollte, könnt ihr diese über das **

    **-Tag durch CSS im Design ändern. +Da euer Name die größte Überschrift im Dokument sein sollte, könnt ihr diese über das `

    `-Tag durch CSS im Design ändern. #vita h1 { margin: 0 0 16px 0; @@ -88,10 +88,10 @@ Diese Eigenschaften beziehen sich durch die vorangestellte ID lediglich auf die color: #666; } -Der längste Abschnitt eures Lebenslaufs wird durch Beschreibungslisten **
    ** umgesetzt. Eine Beschreibungsliste wird mit dem **
    **-Tag umschlossen und kann folgendes beinhalten: +Der längste Abschnitt eures Lebenslaufs wird durch Beschreibungslisten umgesetzt. Eine Beschreibungsliste wird mit dem `
    `-Tag umschlossen und kann folgendes beinhalten: -* **
    **: Beschreibungsname (in unserem Fall der Abschnitt des Lebenslaufs) -* **
    **: Inhalt der Auflistung (in unserem Fall die Informationen zum jeweiligen Lebensabschnitt) +* `
    `: Beschreibungsname (in unserem Fall der Abschnitt des Lebenslaufs) +* `
    `: Inhalt der Auflistung (in unserem Fall die Informationen zum jeweiligen Lebensabschnitt) Beginnen wir mit der Schullaufbahn: @@ -127,7 +127,7 @@ Unserer Auflistung geben wir nun noch ein passendes Design für die beiden versc padding: 0; } -Damit der Name der Schule noch hervorgehoben wird, definieren wir noch einen neuen Stil für die Überschrift **

    **: +Damit der Name der Schule noch hervorgehoben wird, definieren wir noch einen neuen Stil für die Überschrift `

    `: #vita h2 { font-size: 20px; @@ -135,7 +135,7 @@ Damit der Name der Schule noch hervorgehoben wird, definieren wir noch einen neu position: relative; } -Da wir den Elementfluss durch float ändern, damit die Elemente auf einer horizontalen Ebene dargestellt werden, müssen wir diesen nach dem jeweiligen **
    **-Element wieder zurücksetzen. Hierfür haben wir eine Klasse angelegt, mit deren Hilfe ein leeres **
    **-Element erzeugt wird, um den Elementfluss zurückzusetzen. +Da wir den Elementfluss durch float ändern, damit die Elemente auf einer horizontalen Ebene dargestellt werden, müssen wir diesen nach dem jeweiligen `
    `-Element wieder zurücksetzen. Hierfür haben wir eine Klasse angelegt, mit deren Hilfe ein leeres `
    `-Element erzeugt wird, um den Elementfluss zurückzusetzen.
    @@ -151,7 +151,7 @@ Der dazu gehörige CSS-Code sieht wie folgt aus: Durch die Höhenangabe wird zudem ein Abstand zum nachfolgenden Element hergestellt. -Zusätzlich zu eurer Schullaufbahn könnt ihr noch euren Ausbildungsweg, eure Interessen oder Sprachkenntnisse durch weitere Einträge (**
    ** und **
    **-Elemente) hinzufügen. Orientiert euch hierfür einfach an der obigen Anleitung. +Zusätzlich zu eurer Schullaufbahn könnt ihr noch euren Ausbildungsweg, eure Interessen oder Sprachkenntnisse durch weitere Einträge (`
    ` und `
    `-Elemente) hinzufügen. Orientiert euch hierfür einfach an der obigen Anleitung. Passt anschließend das Design durch Verändern der Werte oder das Erweitern der CSS-Datei euren Vorstellungen an. Selbstverständlich könnt ihr auch gezielt neue Klassen für das Design einführen - speziell falls ihr neue Elemente in der HTML-Datei einfügt und diese erweitert. Probiert es aus! @@ -160,14 +160,14 @@ Passt anschließend das Design durch Verändern der Werte oder das Erweitern der Als Erweiterung zu eurer Laufbahn, euren Abschlüssen und Interessen bieten sich noch Fertigkeiten, z.B. in Programmiersprachen oder mit gängiger Software an. Als sehr einfache Methode zur Darstellung zeigen wir euch, wie ihr Tabellen erstellt. -Erstellt zuerst einn **
    **-Container unterhalb eures Lebenslaufs. +Erstellt zuerst einen `
    `-Container unterhalb eures Lebenslaufs. -
    -
    +
    +
    Innerhalb dieses Containers erstellen wir die Tabelle und definieren im Stylesheet das Aussehen/Verhalten der Tabelle, die wir aufbauen. -Eine Tabelle wird mittels des ****-Tags geöffnet und wie gewohnt wieder geschlossen. Innerhalb der Tabelle sollten die Beschriftungszeilen/-Spalten und die einzelnen Inhaltszellen definiert werden. +Eine Tabelle wird mittels des `
    `-Tags geöffnet und wie gewohnt wieder geschlossen. Innerhalb der Tabelle sollten die Beschriftungszeilen/-Spalten und die einzelnen Inhaltszellen definiert werden.
    @@ -179,11 +179,11 @@ Eine Tabelle wird mittels des **
    **-Tags geöffnet und wie gewohnt wieder
    -Das Tag **** steht für den Kopf-Bereich der Tabelle. Innerhalb des Kopfbereichs, welcher so noch keine Zellen beinhaltet wird eine Zeile der Tabelle mit **** erstellt. Die Zeile muss anschließend mit einzelnen Zellen gefüllt werden. **** steht hierbei für eine Zelle, die speziell als Kopf-Zelle gedacht ist. Wir erstellen in der ersten Zeile 3 Zellen und arbeiten somit mit 3 Spalten, die nach und nach gefüllt werden sollen. +Das Tag `` steht für den Kopf-Bereich der Tabelle. Innerhalb des Kopfbereichs, welcher so noch keine Zellen beinhaltet wird eine Zeile der Tabelle mit `` erstellt. Die Zeile muss anschließend mit einzelnen Zellen gefüllt werden. `` steht hierbei für eine Zelle, die speziell als Kopf-Zelle gedacht ist. Wir erstellen in der ersten Zeile 3 Zellen und arbeiten somit mit 3 Spalten, die nach und nach gefüllt werden sollen. Jede Tabellenzeile muss einzeln erstellt werden und in jeder Zeile sollten genau so viele Zellen enthalten sein, wie es Spalten gibt. Hier sollten somit immer 3 Zellen pro Zeile erstellt werden. -Um die Tabelle nach dem Tabellenkopf mit Inhalt zu füllen, erstellen wir hinter dem geschlossenen (!) Kopfbereich (****) den Body ("Körper") der Tabelle: +Um die Tabelle nach dem Tabellenkopf mit Inhalt zu füllen, erstellen wir hinter dem geschlossenen (!) Kopfbereich (``) den Body ("Körper") der Tabelle: @@ -193,7 +193,7 @@ Um die Tabelle nach dem Tabellenkopf mit Inhalt zu füllen, erstellen wir hinter -Wie bereits erwähnt sollen es drei Zellen pro Zeile sein. Ergänzt bitte noch weitere Zeilen, wie z.B. eure Kenntnisse zur Textverarbeitung, Datenbanken oder vollkommen anderen Bereichen. Wie im eigentlichen Header können hier zur Zeilenbeschreibung auch ****-Tags verwendet werden. +Wie bereits erwähnt sollen es drei Zellen pro Zeile sein. Ergänzt bitte noch weitere Zeilen, wie z.B. eure Kenntnisse zur Textverarbeitung, Datenbanken oder vollkommen anderen Bereichen. Wie im eigentlichen Header können hier zur Zeilenbeschreibung auch ``-Tags verwendet werden. Kommen wir zum Aussehen der Tabelle. Zuerst sorgen wir für die zum Lebenslauf passende Ausrichtung. @@ -227,7 +227,7 @@ Wie immer könnt ihr gerne die Darstellung nach eurem Geschmack anpassen. ## Mein Lebenslauf sieht gut aus - was ist, wenn er gedruckt wird? -Auch wenn Webseiten-Ausdrucken ein unnötiger Volkssport ist, kann es besonders bei Lebensläufen natürlich vorkommen, dass diese ausgedruckt werden. +Auch wenn Webseiten-Ausdrucken meist ein unnötiger Zeitvertreib ist, kann es besonders bei Lebensläufen natürlich vorkommen, dass diese ausgedruckt werden. **Farbenfrohe Webseite? Kein Problem!** @@ -236,12 +236,13 @@ Für den Fall, dass ihr euren Lebenslauf in einer anderen Darstellung auch anseh Erstellt eine Kopie eurer CSS-Datei im gleichen Ordner und benennt diese in "print.css" um. Den Inhalt könnt ihr später nach und nach anpassen. -Bindet nun in eurem HTML-Dokument die neu erstellte CSS-Datei im ****-Bereich mit folgender Zeile ein: +Bindet nun in eurem HTML-Dokument die neu erstellte CSS-Datei im ``-Bereich mit folgender Zeile ein: Durch die Medienangabe "print" wird festgelegt, dass dieses Stylesheet speziell zum Druck verwendet wird. Entfernt für einen einfachen Test einmal die Farbangaben der Tabellenhintergründe oder ändert diese in eine andere Farbe (z.B. Grau) ab. In der Druckvorschau eures Browsers ist diese Tabelle nun nicht mehr so farbenfroh wie vorher. - - \ No newline at end of file + + +Im letzten Abschnitt, [Effekte mit CSS](effects.html), könnt ihr euer Werk noch im Detail verändern. From 2e45ebb565c0eb33dd258804c558cbfb3d434d59 Mon Sep 17 00:00:00 2001 From: mindjam Date: Thu, 27 Mar 2014 21:41:59 +0100 Subject: [PATCH 06/11] added two links to German Cheat Sheets --- index.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.md b/index.md index f839509..ffb70f3 100644 --- a/index.md +++ b/index.md @@ -76,12 +76,17 @@ während du dich mit dem Workshop beschäfftigst und insbesondere darüber hinau * HTML5 - Benutze diesen Cheat Sheet um neue HTML-Elemente auszuprobieren. +* + HTML5 in Kurzform (DE) - Benutze diesen Cheat Sheet um eine kurze Übersicht der wichtigsten Elemente zu erhalten. * CSS3 - Benutze diesen Cheat Sheet um neue CSS-Selektoren kennen zu lernen. +* + CSS (DE) - Eine kurze Übersicht der wichtigsten Selektoren. * CSS LINT - Diese Seite prüft deinen CSS Code und zeigt eventuelle Fehler auf. + ## Referenz-Materialien Das Mozilla Developer Network (MDN), von den Leuten, die den Firefox Browser From 98fef871b917ab53c288a4c5eb0cc0e931ce9eb1 Mon Sep 17 00:00:00 2001 From: Tobias Struckmeier Date: Thu, 27 Mar 2014 21:44:23 +0100 Subject: [PATCH 07/11] Added form and fixed a text --- core/effekte.md | 42 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/core/effekte.md b/core/effekte.md index 7fd135d..2ecd674 100644 --- a/core/effekte.md +++ b/core/effekte.md @@ -27,6 +27,8 @@ Textschattens die z.b. die Übersicht über die Seite verbessern oder etwas aufl Der Schatten wird in CSS über die Eigenschaft "text-shadow" definiert. Der Wert setzt sich zusammen aus dem horizontalem und vertikalem Versatz, einer Unschärfe und eines Farbwertes zusammen. +Die Werte werden also folgendermaßen gelesen: + text-shadow: horizontal vertikal unschärfe farbwert; Möchten wir also einen dunkelgrauen Schatten der 2 Pixel nach rechts und nach unten versetzt ist erzielen müssen wir @@ -34,7 +36,7 @@ dies so definieren. Um keinen harten Schatten zu haben setzen wir auch eine Unsc text-shadow: 2px 2px 3px #777777; -Wende diesen Effekt auf alle Überschriften (h1) an und überprüfe das Ergebnis im Browser. +Wende diesen Effekt auf alle Überschriften **`

    `** an und überprüfe das Ergebnis im Browser. Ist es geglückt dann probiere mit den Einstellungen ein wenig herum. Durch ändern der Farben und Werte lassen sich auch andere spannende Effekte erzielen. Selbst mehrere Schatten auf einem Elemente sind möglich. @@ -98,5 +100,41 @@ Das Internet ist nicht nur Konsummedium. Es bietet auch Möglichkeiten die Inhal Kommunikation über Emails (z.b. googlemail) oder Nachrichten z.b. in Foren. All das ist auch über Webseiten realisierbar. Um diese Eingaben möglich zu machen, verwendet man Formulare. -Formular bestehen aus verschiedenen Feldern. +Formulare müssen mit einem **`
    `** Tag umgeben sein. Dieser sorgt dafür, das der Browser später alle Daten aus den Formularelementen nimmt und mittels eines Senden Buttons **submit** verschickt. Innerhalb des Form Elements können aber jegliche anderen HTML Elemente auftauchen. Nur ineinander verschachtelte Forms sind zu vermeiden. + + +
    + +Das Form ist definiert aber leider noch leer. Das Attribut **action** definiert wohin das Formular geschickt werden soll. Hier wird entweder eine URL angeben oder wie in unserem Fall mit **mailto:** eine Emailadresse. Da die meisten Browser nicht in der Lage sind direkt selbst Emails zu versenden, wird beim klick auf die **submit** Schaltfläche daher das Emailprogramm des Besuchers geöffnet und die Zieladresse sowie die Feldinhalte entsprechend vorausgefüllt. + +Beginne also jetzt ein Betreffeld mit einer Beschriftung innerhalb des **`
    `** hinzuzufügen. + + + + +Hierdurch wird die Beschriftung "Betreff" und ein Texteingabefeld hinzugefügt. Wichtig sind hier vor allem der Name des Feldes *subject* und der Typ des Felds. Das **for** Attribut am **`