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 ich zu meiner eigenen Website?
REPETITION DES ERSTEN TAGES Feedback Grundlagen des Webs Werkzeuge HTML-Basics Diskussion evtl. Schwierigkeiten
CSS GRUNDLAGEN
WAS IST CSS? HTML: Struktur und Inhalt CSS: Definiert Layout & Design Trennung von Struktur und Design Textdatei.css
body { color: red; WIE SIEHT CSS AUS?
WIE KOMMT DAS CSS AUF MEINE SEITE? <head> <link rel="stylesheet" type="text/css" href="basic.css" /> </head>
ÜBUNG: EINBINDUNG VON CSS Lege eine neue Datei an HTML - basic.html Lege eine neue Datei an Cascading Style Sheet - basic.css Binde die Styles-Datei im head-tag ein <link rel="stylesheet" type="text/css" href="basic.css"> Folgende Zeile in die CSS-Datei body { color: red Testen
LÖSUNG: EINBINDUNG VON CSS HTML-Datei <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="basic.css" /> <meta charset="utf-8"> </head> <body> <div>todo write content</div> </body> </html> CSS-Datei body { color: red; Demo
WIE NUTZE ICH CSS?
HTML-TAGS MIT CSS ANSPRECHEN Unterschiedliche Eigenschaften für unterschiedliche Tags
BEISPIELE: HTML-TAGS MIT CSS body { color: red; h1 { color: blue; h2 { color: green; p { color: black;
ÜBUNG: HTML-TAGS MIT CSS Bearbeite basic.html Je ein <h1>, <h2> und ein <p> Tag Bearbeite basic.css h1 { color: blue h2 { color: green p { color: black Testen
LÖSUNG: HTML-TAGS MIT CSS HTML-Datei <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="tags.css" /> <meta charset="utf-8"> </head> <body> <h1>überschrift 1</h1> <h2>überschrift 2</h2> <p>absatz</p> </body> </html>
LÖSUNG: HTML-TAGS MIT CSS CSS-Datei body { color: red; h1 { color: blue; h2 { color: green; p { color: black; Demo
SCHRIFTFORMATIERUNG Serifen und nicht-serifen Bild von w3schools.com
SCHRIFTFORMATIERUNG Beschränkte Auswahl Verdana, Arial, Times Angabe mehrerer möglich Grösse "Gewicht" bzw. Art
SCHRIFTFORMATIERUNG MIT CSS Schriftart: font-family Grösse: font-size Gewicht: font-weight
BEISPIEL: SCHRIFTFORMATIERUNG MIT CSS h1 { font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; h2 { font-family: "Times New Roman", serif; font-size: 20px; font-weight: normal; p { font-size: 12px; Demo
ÜBUNG: SCHRIFTFORMATIERUNG MIT CSS Definiere im basic.css für <h1>, <h2> und <p> je font-family font-size font-weight Testen
LÖSUNG: SCHRIFTFORMATIERUNG MIT CSS h1 { font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; h2 { font-family: "Times New Roman", serif; font-size: 20px; font-weight: normal; p { font-size: 12px; Demo
CSS-VERERBUNG Schriftformatierung Zeitersparnis Flexibilität
BEISPIEL: CSS-VERERBUNG SCHRIFTART body { font-family: Arial, sans-serif; font-size: 12px; font-weight: normal; h1 { font-size: 24px; font-weight: bold; h2 { font-family: "Times New Roman"; font-size: 20px; p {
ÜBUNG: CSS-VERERBUNG Bearbeite die CSS-Datei Schreibe die allgemeinen Eigenschaften in "body { " Testen
LÖSUNG: CSS-VERERBUNG body { font-family: Arial, sans-serif; font-size: 12px; font-weight: normal; h1 { font-size: 24px; font-weight: bold; h2 { font-family: "Times New Roman"; font-size: 20px; p {
FARBEN MIT CSS Bildschirmfarben basieren auf Rot-Grün-Blau (RGB) Farben können in CSS auf drei Arten geschrieben werden
FARBEN MIT CSS Als Name, bspw. "red", "blue" Als RGB-Werte, bspw. rgb(255,0,0) Als HEX-Werte, bspw. "#ff0000", "#0000ff" Werte kommen aus Vorlagen oder mit Color-Picker
FARBEN MIT CSS Schriftfarben werden in CSS mit "color" bezeichnet
body { color: #000000; h1 { color: red; h2 { color: #13daec; BEISPIEL: FARBEN MIT CSS
ÜBUNG: FARBEN MIT CSS Bearbeite die CSS-Datei Gib eine allgemeine Schriftfarbe an Nutze den Color-Picker Gib <h1> und <h2> je eine andere Farbe
LÖSUNG: FARBEN MIT CSS body { color: #000000; h1 { color: red; h2 { color: #13daec;
ÜBUNG: STYLING MEINER SEITE Erstelle eine Datei styles.css Binde die Datei in all Ihren Seiten ein <link rel="stylesheet" type="text/css" href="styles.css" /> Gestalte die Website Schriften font-family, font-size, font-weight Farben color Nutze die basic.css zum "spicken"
CSS KLASSEN Unterschiedliche Darstellung gleicher Tags bspw. unterschiedlich formatierte Absätze Attribut class="klassenname" Ansprechen im css mit.klassenname
BEISPIELE: CSS KLASSEN HTML-Datei <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="classes.css" /> </head> <body> <p>erster Absatz</p> <p class="highlight">hervorgehobener Absatz</p> <p>dritter Absatz</p> </body> </html>
BEISPIELE: CSS KLASSEN CSS-Datei body { font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; p { color: blue;.highlight { color: red; Demo
ÜBUNG: CSS KLASSEN Erweitere basic.html um weitere Tags Vergib einzelnen Elementen Klassen bspw. class="highlight" Erweitere basic.css um die Klassen bspw..highlight { color: red; Testen
LÖSUNG: CSS KLASSEN <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="classes.css" /> </head> <body> <p>erster Absatz</p> <p class="highlight">hervorgehobener Absatz</p> <p>dritter Absatz</p> </body> </html> body { font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; p { color: blue;.highlight { color: red;
FARB-HINTERGRÜNDE Farb-Hintergründe werden in CSS mit "background-color" bezeichnet.betont { background-color: #eeeeee; Demo
ÜBUNG: FARBHINTERGRÜNDE Erweitere basic.html um einen Absatz Vergib dem Absatz eine neue Klasse bspw. class="betont" Erweitere basic.css um die Klasse bspw. ".betont { background-color: #eeeeee; " Testen
LÖSUNG: FARBHINTERGRÜNDE.betont { background-color: #eeeeee; Demo
HINTERGRUNDBILDER Nicht nur Farben sondern auch Bilder bspw. Verläufe
BEISPIEL: HINTERGRUNDBILDER body { background-image: url('../images/hintergrundbild.jpg'); Demo
ÜBUNG: HINTERGRUNDBILDER Kopiere das Bild "hintergrund.jpg" Vom Laufwerk X in Ihr Projekt unter Bilder Hintergrundbild in der CSS-Datei bei body body { background-image: url('bilder/hintergrund.jpg'); Testen
LÖSUNG: HINTERGRUNDBILDER body { background-image: url('../images/hintergrundbild.jpg'); Demo
TEXTAUSRICHTUNG Textausrichtung wie in Office Eigenschaft: text-align left: linksbündig right: rechtsbündig center: zentriert justify: blocksatz
ÜBUNG: TEXTAUSRICHTUNG Erstelle drei neue Absätze Gib den Absätzen je eine Klasse right, center, justify Erweitere basic.css um die neuen Klassen Testen.right { text-align: right etc.
LÖSUNG: TEXTAUSRICHTUNG Demo.right { text-align: right;.center { text-align: center;.justify { text-align: justify; <!DOCTYPE html> <html> <head> <meta charset= "utf-8"> <link rel= "stylesheet" type="text/css" href="textalign.css" /> </head> <body> <p>absatz normal</p> <p class="right">absatz rechtsbündig</p> < p class="center">absatz zentriert</p> < p class="justify">lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
LISTEN Auflistungszeichen Aufzählungszeichen Kein Zeichen
LISTEN - MÖGLICHKEITEN Eigenschaft: list-style-type Werte für Listen: circle, disc, square Werte für Aufzählungen: upper-roman, lower-latin Wert für kein Aufzählungszeichen: none
LISTEN - BEISPIEL Demo <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="lists.css" /> </head> <body> <ul class="one"> <li>erstes Element</li> <li>zweites Element</li> </ul> </body> </html> <ol class="two"> <li>erstes Element</li> <li>zweites Element</li> </ol> ul { list-style-type: circle; ol { list-style-type: lower-roman;.one { list-style-type: hiragana;
ÜBUNG: LISTEN Leg mehrere Listen an Definiere die Listenformatierung list-style-type Teste verschiedene Werte upper-roman, lower-latin, circle, disc, square, hiragana, lower-greek, none
LÖSUNG: LISTEN / MENUS ul { list-style-type: circle; ol { list-style-type: lower-roman;.one { list-style-type: hiragana; Demo
LINKS Styling wie normale Tags Spezielle Zustände Besucht - a:visited Hover Effekt - a:hover
BEISPIEL: LINKS STYLEN <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="links.css" /> </head> <body> <a href="http://www.4eyes.ch/abc">nicht besuchter Link</a> <a href="http://www.4eyes.ch">besuchter Link</a> </body> </html> a { color: green; text-decoration: none; a:visited { color: red; a:hover { text-decoration: underline; Demo
ÜBUNG: LINKS STYLEN Leg einige Links an Definiere die Link-Formatierung text-decoration Nutze den "besucht" und "hover"-status a:hover bzw. a:visited Testen
LÖSUNG: LINKS STYLEN a { color: green; text-decoration: none; a:visited { color: red; a:hover { text-decoration: underline; Demo
ÜBUNG: STYLING MEINER SEITE - TEIL 2 Nutze das Gelernte um eine Seite zu gestalten Klassen Farbhintergründe Bild-Hintergründe Textausrichtung Listen-Formatierung - Auch für die Menus Link-Formatierung Nutze die basic.css zum "spicken" Ziel
AKTIV-ZUSTAND DES MENUS Zeig dem Benutzer auf welcher Seite er ist Nutzung von Klassen Auf jeder Seite einzeln
BEISPIEL: AKTIV-ZUSTAND DES MENUS <ul> <li><a href="index.html">home</a></li> <li class="active"><a href="angebot.html">angebot</a></li> </ul>.active a { background-color: aqua; Demo
ÜBUNG: AKTIV-ZUSTAND DES MENUS Bearbeite deine Websites Gib auf jeder Seite dem aktiven Menu-Punkt die Klasse bspw. class="active" Gestalte den Aktiv-Status nach Wunsch Testen
LÖSUNG: AKTIV-ZUSTAND DES MENUS <ul> <li><a href="index.html">home</a></li> <li class="active"><a href="angebot.html">angebot</a></li> </ul>.active a { background-color: aqua; Demo
WIE KOMME ICH ZU MEINER EIGENEN WEBSITE?
HOSTING Tausende von Anbieter In- oder Ausland? Preise Funktionsumfang Speicherplatz E-Mail-Adressen Verfügbare Programme Support
HOSTING - ANFORDERUNGEN Kein eigener Server - Shared Hosting Benötigte Funktionen für CAS-Kurs-Website PHP-Unterstüzung MySQL-Datenbank Achtung: E-Mail extern? Empfehlung: Metanet
DOMAIN-NAME.ch-Domains, ausprobieren bei www.nic.ch Domains, ausprobieren bspw. bei www.godaddy.com
VERWALTUNGSOBERFLÄCHE Beispiel "Plesk"
VERWALTUNG VON E-MAILS Beispiel "Plesk"
AUSBLICK Weitere HTML-Tags Tabellen, Formulare und Multimedia
HAUSAUFGABE: MEINE SEITE 1. Richte die Tools ein inkl. Synchronisierung 2. Erstelle eine neue Website auf mindestens 5 Seiten mit Inhalt 3. Thema: Bspw. Firma, Abteilung, Hobby 4. Seiten bspw. Willkommen, Angebot, Referenzen, Über uns, Fotos etc. 5. Mindestens eine Seite soll über ein Untermenu verfügen: Team / Anreise 6. Nutze CSS um die Seite zu gestalten. 7. Im nächsten Kursteil kannst Du deine Lösung präsentieren