Info-Zippen

Zippen
Wähle den Ordner (oder wenn nur einzelne Dateien: einzelne Dateien mit Strg) aus
Zippen
Falls ein anderes Zip-Programm installiert ist, z. B. 7-Zip: analog verfahren
Zippen
Namen des Zip-Files wenn nötig ändern, mit Eingabe bestätigen


Hochladen-Info

Hochladen
Email und Passwort: vom Lehrer per Email erhalten (bzw. Passwort selber gemacht)
Hochladen
Hochladen
Mit gehaltener Strg-Taste können mehrere Dateien ausgewählt werden (in Informatik: die Websites werden gezippt und nicht jede einzelne Datei hochgeladen)
Hochladen
Hochladen


Übung 04 „Boxmodell“

Erste Schritte

In der Übung 04 lernst Du, wie Du mit dem „Boxmodell“ das Groblayout einer Seite gestalten kannst. Im Artikel Layout mit dem Boxmodell siehst Du oben die Skizze von einem Groblyout. Es sieht oben einen Kopf vor (z. B. für ein schmales Foto), links eine Navigation, in der Mitte den eigentlichen Inhalt und rechts einen Bereich für z. B. News. Unten schließlich eine Fußzeile (für z. B. das Impressum). Jeder einzelne Behälter (Box) kann Inhalte aufnehmen (Text, Fotos, …).

Eine Box hat verschiedene Eigenschaften, z. B. Breite, Höhe, Hintergrundfarbe usw., die im Stylesheet definiert werden.

Erste Schritte (wie bei jeder Website)

  1. Den lokalen Site-Ordner \uebung05 anlegen, ebenso darin den Foto-Ordner \fotos und den Materialien-Ordner \uebung05_materialien
  2. die Sitedefinition einrichten: Sitename “Übung 05”, lokaler Site-Ordner “uebung05”
    Site / Neue Site / …
  3. Erstelle die Seite index.html und das Stylesheet style.css erstellen
    Datei Neu Typ HTML, Datei neu Typ CSS, jeweils gleich speichern
  4. Füge das Stylesheet an die Seite index.html anfügen

Hilfe dazu kannst Du auch im Artikel Eine Website programmieren – Schritte finden.

Boxen im Stylesheet style.css definieren

Die Syntax ist die gleiche, wie Du sie schon kennengelernt hast: selector{Eigenschaft1:Wert; Eigenschaft2:Wert; …}
Der Selector in diesem Fall: div#name_der_box

  1. Beginne mit der ersten Box namens box1.
div#box1{
   position:relative;
   width:800px; height:240px;
   background-color:#666;
   margin-bottom:10px;
}

div# ➜ erzeugt die Box
position:relative ➜ gibt eine Methode an, wie man Boxen an eine bestimmte Stelle am Bildschirm hinbekommt (wir verwenden immer „relative“)
box1 ➜ ist der Boxname
width, height ➜ sind Breite und Höhe
background-color ➜ ist die Hintergrundfarbe
margin-bottom ➜ Aussenabstand unten, schiebt alles um 10 px weg, in diesem Fall die box2, die darunterkommen wird

  1. Definiere die box2.
div#box2{
   position:relative;
   width:800px; height:100px;
   background-color:#666;
   margin-bottom:10px;
}
  1. Definiere box3: Breite 800 px, Höhe 70 px

Boxen in die Seite index.html einfügen

  1. Gehe zur index.html
  2. Füge die box box1 so ein: Einfügen / Layoutobjekte / DivTag / ID / box1

    Hilfe findest Du im Artikel Eine Website programmieren – Schritte im Bereich „Erste Seite (HTML) anlegen im Film.

  1. Füge box2 ein: stelle den Auszeiger vorher unbedingt rechts ausserhalb von box1 und füge dann box2 ein: Einfügen / Layoutobjekte …
  2. Verfahre ebenso bei box3

Das Ergebnis schaut so aus:

index.html mit drei Boxen, Abstand zwischen den Boxen

Boxen horizontal am Bildschirm zentrieren

  1. Schöner wird das Layout, wenn die Boxen nicht links am Bildschirm picken und rechts die große freie Fläche bleibt. Eine Möglichkeit ist, jede einzelne Box zu zentrieren: Ergänze dafür im Stylesheet jede Box um folgende Zeile:
div#box1{
   ...
   margin-left:auto; margin-right:auto;
}

auto ➜ steht für automatisch: verteilt den freien Platz am Bildschirm links gleichmäßig auf links und rechts, egal wie groß ein Bildschirm ist

Das Ergebnis:



4EHLW-1

WordPress

Woche 04: 20. bis 24. 4.

  1. Lies auf Websites mit WordPress die Vorbemerkungen zum Verständnis von WordPress.
  2. Lege ein WordPress-Konto an: Punkte 1-3 mit Video-Anleitung
  3. Gehe zum Beitrag WordPress – Erste Schritte.
  4. Arbeite die Schritte 1-11 ab.
  5. Sende die Adresse Deiner Website per Email bis Montag 27. 4. 2020

Woche 05: 27. bis 30. 4.

  1. Gehe zum Beitrag WordPress – Teil 01 und arbeite die Schritte 1-5 bis Montag 4. 5. ab.
    (Wegen der verkürzten Woche und weil einige Gruppen nur 1 Stunde am Plan haben, ist das Programm klein.)

Woche 06: 4.5. bis 8.5.

  1. Gehe zum Beitrag WordPress – Teil 02 und arbeite die Schritte 1-9 bis Montag 11.5. ab.

ACHTE BITTE SORGFÄLTIG AUF DIE ANGABEN UND ANWEISUNGEN!

Woche 07: 11.05. bis 15.05.

  1. Gehe zum Beitrag WordPress – Teil 03 und arbeite die Punkte 1 – 3 ab. Frist: Montag 18. 05. 2020

Woche 08: 18.05. bis 22.05.

  1. Gehe zum Beitrag WordPress – Teil 04 und arbeite die Punkte 1 – 4 ab. Beachte dort die Abgabehinweise.

WordPress – eine eigene Website gestalten

Woche 09: 25.05. bis 29.05.

  1. Gehe zum Beitrag WordPress – Teil 05 und arbeite die Punkte 1-4 ab.

Woche 10: 03.06. bis 05.06.

  1. Ausführung der eigenen WP-Site

Woche 11: 08.06. bis 12.06.

  1. Ausführung der eigenen WP-Site

Woche 12: 15.06. bis 19.06.

  1. Ausführung der eigenen WP-Site

Woche 01: Dienstag 17. 3. 2020

Den Einstieg in diese neue Phase von Schule wollen wir sanft machen:

  1. Mach ein Portraitfoto von Dir (Smartphone oder Fotoapparat).
  2. Installiere Dreamweaver und Photoshop/oder XnView MP, mache ein Bildschirmfoto vom geöffneten Dreamweaver (findet heraus, wie man ein Bildschirmfoto machen und speichern kann).
    [Dowload der Programme unter https://unterricht.leo-ertl.space / AI Fernunterricht]
  3. Lade die 2 Fotos gleich noch heute auf https://unterricht.leo-ertl.space unter AI / Upload der Arbeiten hoch. (Dabei musst Du Dich anmelden, die Anmeldedaten (Email, Passwort) hast Du per Email bekommen).

Woche 01: Freitag 20. 3. 2020

Übung 03 „Wintersport“

Diese Übung sollte fertig sein, zur Abgabe ist es nicht mehr gekommen. Daher nur eine kleine Ergänzung und Abgabe.

  1. Prüfe, ob Deine Website in Ordnung ist (Verlinkung, Überschriften, Fotos rechts).
  2. Öffne ein Foto, auf dem Du drauf bist, in Photoshop oder einem anderen Bildprogramm (Paint von Windows reicht dafür auch) und stelle die Breite auf 400 px ein.
  3. Speichere das verkleinerte Foto im Foto-Ordner.
  4. Füge das Bild auf der index.html gegen Ende des Textes vor „Außer …“ ein. Vergiss nicht auf den Alternativtext.
  5. Ergänze das Stylesheet um die Klasse .fotolinks, die das Foto links ausrichtet, sodass der Text rechts am Foto vorbeifließt. Ein Muster für so eine Klasse hast Du ja schon, achte nur, wo ein margin angebracht werden muss.
  6. Wende die Klasse auf das Foto an: Foto markieren, unten bei Klasse .fotolinks auswählen.
  7. Zippe den Site-Ordner uebung03, nenne das Zip-File uebung03_nachname.zip und gibt es auf der Website ab, bis Montag 18.00 Uhr (sinnvoll), damit am Dienstag eine neue Übung begonnen werden kann.
    Viel Erfolg.

Übung 04 „Boxmodell“

Woche 02: Dienstag 24. 3. 2020 und Freitag 27. 3.

  • Gehe zum Artikel Übung 04 „Boxmodell“ und arbeite die Schritte 1-12 ab.
  • Zippe den Site-Ordner uebung04 (uebung04_name.zip) und lade ihn hoch: spätestens bis Montag 30. 3.

Übung 05

Woche 03: Dienstag 31. 3. und Freitag 3. 4. 2020

  • Gehe zum Artikel Übung 05 und arbeite die Schritte 1-12 ab.
    Empfehlung: Gib den Zwischenstand (Punkt 12) am Freitag ab, damit ich sehe wie es bei Dir geht.

Wie es nach Ostern weitergeht, wissen wir nicht, wenn wir aber die Medien ein wenig verfolgen, gehen wir eher nicht in die Schule.



4DHLW-1

WordPress

Woche 04: 20. bis 24. 4.

  1. Lies auf Websites mit WordPress die Vorbemerkungen zum Verständnis von WordPress.
  2. Lege ein WordPress-Konto an: Punkte 1-3 mit Video-Anleitung
  3. Gehe zum Beitrag WordPress – Erste Schritte.
  4. Arbeite die Schritte 1-11 ab.
  5. Sende die Adresse Deiner Website per Email bis Montag 27. 4. 2020

Woche 05: 27. bis 30. 4.

  1. Gehe zum Beitrag WordPress – Teil 01 und arbeite die Schritte 1-5 bis Montag 4. 5. ab.
    (Wegen der verkürzten Woche und weil einige Gruppen nur 1 Stunde am Plan haben, ist das Programm klein.)

Woche 06: 4.5. bis 8.5.

  1. Gehe zum Beitrag WordPress – Teil 02 und arbeite die Schritte 1-9 bis Montag 11.5. ab.

ACHTE BITTE SORGFÄLTIG AUF DIE ANGABEN UND ANWEISUNGEN!

Woche 07: 11.05. bis 15.05.

  1. Gehe zum Beitrag WordPress – Teil 03 und arbeite die Punkte 1 – 3 ab. Frist: Montag 18. 05. 2020

Woche 08: 18.05. bis 22.05.

  1. Gehe zum Beitrag WordPress – Teil 04 und arbeite die Punkte 1 – 4 ab. Beachte dort die Abgabehinweise.

WordPress – eine eigene Website gestalten

Woche 09: 25.05. bis 29.05.

  1. Gehe zum Beitrag WordPress – Teil 05 und arbeite die Punkte 1-4 ab.

Woche 10: 03.06. bis 05.06.

  1. Ausführung der eigenen WP-Site

Woche 11: 08.06. bis 12.06.

  1. Ausführung der eigenen WP-Site

Woche 12: 15.06. bis 19.06.

  1. Ausführung der eigenen WP-Site

Woche 01: Montag 16. 3. 2020

Den Einstieg in diese neue Phase von Schule wolle wir sanft machen.

  1. Mach ein Portraitfoto von Dir (Smartphone oder Fotoapparat).
  2. Installiere Dreamweaver und Photoshop/oder XnView MP, mache ein Bildschirmfoto vom geöffneten Dreamweaver (findet heraus, wie man ein Bildschirmfoto machen und speichern kann).
    [Dowload der Programme unter https://unterricht.leo-ertl.space / AI Fernunterricht]
  3. Lade die 2 Fotos auf https://unterricht.leo-ertl.space unter AI / Upload der Arbeiten hoch. (Dabei musst Du Dich anmelden, die Anmeldedaten (Email, Passwort) hast Du per Email bekommen).

Übung 05

Woche 01: Freitag 20. 3. 2020

Ausgangslage/Stand der Übung 05: Es gibt die Seiten index.html, seite2.html, seite3.html und das Stylesheet style.css
In der Navigationsleiste ist die Navigation eingefügt (HOME, SEITE2, SEITE 3) und schon fertig.
In der index.html ist das Bild kopf.jpg eingefügt. Es hat die Größe 860px x 240 px (wie die Box).

  • Gehe zum Artikel Übung 05 (Bereich ONLINEPUBLISHING) und arbeite die Punkte 17-26 ab.

Woche 02: Montag 23. 3. und Freitag 27. 3.

  • Gehe zum Artikel Übung 05 (Bereich ONLINEPUBLISHING) und arbeite die Punkte 27-36 ab.

Woche 03: Montag 30. 3. und Freitag 3. 4.

  • Gehe zum Artikel Übung 05 (Bereich ONLINEPUBLISHING) und arbeite die Punkte 37-44 ab. Damit ist die lange Übung beendet.
  • Gib die Arbeit bis Freitag 3. 4. ab (Grund siehe unten).

Wer in der vergangen Woche bis zum Punkt 36 gekommen ist (einige haben einen Zwischenstand abgegeben, und die Abgaben sind super), hat diese Woche nur mehr wenig zu tun.
Es wäre gut, wenn alle bis Freitag 3. 4. fertig werden und auch abgeben, um dann in den Osterferien wirklich eine Pause zu machen und diese zu genießen.

Wie es nach Ostern weitergeht, wissen wir nicht, wenn wir aber die Medien ein wenig verfolgen, gehen wir eher nicht in die Schule.

Bei Unklarheiten/Problemen schreibe beim Artikel Übung 05 einen Kommentar.



4CHLW-1

WordPress

Woche 04: 20. bis 24. 4.

  1. Lies auf Websites mit WordPress die Vorbemerkungen zum Verständnis von WordPress.
  2. Lege ein WordPress-Konto an: Punkte 1-3 mit Video-Anleitung
  3. Gehe zum Beitrag WordPress – Erste Schritte.
  4. Arbeite die Schritte 1-11 ab.
  5. Sende die Adresse Deiner Website per Email bis Montag 27. 4. 2020

Woche 05: 27. bis 30. 4.

  1. Gehe zum Beitrag WordPress – Teil 01 und arbeite die Schritte 1-5 bis Montag 4. 5. ab.
    (Wegen der verkürzten Woche und weil einige Gruppen nur 1 Stunde am Plan haben, ist das Programm klein.)

Woche 06: 4.5. bis 8.5.

  1. Gehe zum Beitrag WordPress – Teil 02 und arbeite die Schritte 1-9 bis Montag 11.5. ab.

ACHTE BITTE SORGFÄLTIG AUF DIE ANGABEN UND ANWEISUNGEN!

Woche 07: 11.05. bis 15.05.

  1. Gehe zum Beitrag WordPress – Teil 03 und arbeite die Punkte 1 – 3 ab. Frist: Montag 18. 05. 2020

Woche 08: 18.05. bis 22.05.

  1. Gehe zum Beitrag WordPress – Teil 04 und arbeite die Punkte 1 – 4 ab. Beachte dort die Abgabehinweise.

WordPress – eine eigene Website gestalten

Woche 09: 25.05. bis 29.05.

  1. Gehe zum Beitrag WordPress – Teil 05 und arbeite die Punkte 1-4 ab.

Woche 10: 03.06. bis 05.06.

  1. Ausführung der eigenen WP-Site

Woche 11: 08.06. bis 12.06.

  1. Ausführung der eigenen WP-Site

Woche 12: 15.06. bis 19.06.

  1. Ausführung der eigenen WP-Site

Woche 01: Montag 16. 3. 2020

Einrichten der Arbeitsumgebung

Den Einstieg in diese neue Phase von Schule wollen wir sanft machen:

  1. Mach ein Portraitfoto von Dir (Smartphone oder Fotoapparat).
  2. Installiere Dreamweaver und Photoshop/oder XnView MP, mache ein Bildschirmfoto vom geöffneten Dreamweaver (findet heraus, wie man ein Bildschirmfoto machen und speichern kann).
    [Dowload der Programme unter https://unterricht.leo-ertl.space / AI Fernunterricht]
  3. Lade die 2 Fotos auf https://unterricht.leo-ertl.space unter AI / Upload der Arbeiten hoch. (Dabei musst Du Dich anmelden, die Anmeldedaten (Email, Passwort) hast Du per Email bekommen).

Übung 05

Woche 01: Dienstag 17. 3. 2020

Der Stand der Übung 05: Im Stylesheet style.css sind die Boxen #container, #kopf, #navigation, #inhalt und #fuss definiert. Die Seite index.html ist angelegt und das Stylesheet angefügt. (Wer nicht auf diesem Stand ist: auf https://unterricht.leo-ertl.space/?p=13623 sind die Daten für die einzelnen Boxen, #container ist 860px breit und 1100px hoch.) Die nächsten Schritte:

  • Gehe zum Artikel Übung 05 (Bereich ONLINEPUBLISHING) und arbeite die Schritte 5 bis 11 ab.

Woche 02: Montag 23. 3. und Dienstag 24. 3. 2020

  • Gehe zum Artikel Übung 05 (Bereich ONLINEPUBLISHING) und arbeite die Schritte 12 bis 26 ab.

(Solltet Ihr bei den Boxen ein padding eingefügt haben, bitte löschen, damit alle meine Gruppen gleich arbeiten.)

Woche 03: Monatag 30. 3. und Dienstag 31. 3. 2020

  • Gehe zum Artikel Übung 05 (Bereich ONLINEPUBLISHING) und arbeite die Schritte 27 bis 44 ab.
  • Gib die Arbeit bis Freitag 3. 4. ab (Grund siehe unten).

Ich schätze, dass die Punkte 27-44 in 70 Minuten lösbar sind (27-29: 10 min; 30-33: 15 min; 34-37: 15 min; 38-44: 25 min).
Es wäre gut, wenn alle bis Freitag 3. 4. fertig werden und auch abgeben, um dann in den Osterferien wirklich eine Pause zu machen und diese zu genießen. Die Testversionen werden nach Ostern auch ablaufen.

Wie es nach Ostern weitergeht, wissen wir nicht, wenn wir aber die Medien ein wenig verfolgen, gehen wir eher nicht in die Schule.

Bei Problemen/Unklarheiten bitte einen Kommentar beim Artikel Übung 05 posten.



4BHLW-2

WordPress

Woche 04: 20. bis 24. 4.

  1. Lies auf Websites mit WordPress die Vorbemerkungen zum Verständnis von WordPress.
  2. Lege ein WordPress-Konto an: Punkte 1-3 mit Video-Anleitung
  3. Gehe zum Beitrag WordPress – Erste Schritte.
  4. Arbeite die Schritte 1-11 ab.
  5. Sende die Adresse Deiner Website per Email bis Montag 27. 4. 2020

Woche 05: 27. bis 30. 4.

  1. Gehe zum Beitrag WordPress – Teil 01 und arbeite die Schritte 1-5 bis Montag 4. 5. ab.
    (Wegen der verkürzten Woche und weil einige Gruppen nur 1 Stunde am Plan haben, ist das Programm klein.)

Woche 06: 4.5. bis 8.5.

  1. Gehe zum Beitrag WordPress – Teil 02 und arbeite die Schritte 1-9 bis Montag 11.5. ab.

ACHTE BITTE SORGFÄLTIG AUF DIE ANGABEN UND ANWEISUNGEN!

Woche 07: 11.05. bis 15.05.

  1. Gehe zum Beitrag WordPress – Teil 03 und arbeite die Punkte 1 – 3 ab. Frist: Montag 18. 05. 2020

Woche 08: 18.05. bis 22.05.

  1. Gehe zum Beitrag WordPress – Teil 04 und arbeite die Punkte 1 – 4 ab. Beachte dort die Abgabehinweise.

WordPress – eine eigene Website gestalten

Woche 09: 25.05. bis 29.05.

  1. Gehe zum Beitrag WordPress – Teil 05 und arbeite die Punkte 1-4 ab.

Woche 10: 03.06. bis 05.06.

  1. Ausführung der eigenen WP-Site

Woche 11: 08.06. bis 12.06.

  1. Ausführung der eigenen WP-Site

Woche 12: 15.06. bis 19.06.

  1. Ausführung der eigenen WP-Site

Woche 01: Montag 16. 3. 2020

Den Einstieg in diese neue Phase von Schule wollen wir sanft machen:

  1. Mach ein Portraitfoto von Dir (Smartphone oder Fotoapparat).
  2. Installiere Dreamweaver und Photoshop/oder XnView MP, mache ein Bildschirmfoto vom geöffneten Dreamweaver (findet heraus, wie man ein Bildschirmfoto machen und speichern kann).
    [Dowload der Programme unter https://unterricht.leo-ertl.space / AI Fernunterricht]
  3. Lade die 2 Fotos auf https://unterricht.leo-ertl.space unter AI / Upload der Arbeiten hoch. (Dabei musst Du Dich anmelden, die Anmeldedaten (Email, Passwort) hast Du per Email bekommen).

Übung 04

Woche 01: Freitag 20. 3. 2020

Stand: boxmodell.css mit drei Boxen definiert (box1, box2, box3); index.html mit drei Boxen eingefügt

Weitere Schritte:

  1. Die Boxen horizontal am Bildschirm zentrieren:
    Jede Box wird ergänzt um: margin-left:auto; margin-right:auto;
    margin-left:30px wird gelöscht;
    Für die box1 schaut das dann so aus:
div#box1{
	position:relative;
	width:760px; height:160px;
	background-color:#CC0;
	margin-left:auto; margin-right:auto;
	padding:20px;
}
  1. Gib der box2 ein padding von 10 px (padding = Innenabstand)
    Siehe den Artikel Layout mit dem Boxmodell https://unterricht.leo-ertl.space/?p=9324 mit der Graphik zur Box.
  2. Überlege, wie Du Breite und Höhe der Box anpassen musst, damit die Größe wieder passt, und mache diese Anpassung.
  3. Wenn die drei Boxen richtig angezeigt werden (zentriert, padding, Rahmen, Zwischenabstände), zippe den Site-Ordner uebung04, Name des Zip-Files: uebung04_nachname.zip
  4. Lade das Zip-File auf der Abgabeseite hoch. Wäre gut bis Montag, um am Montag mit einer neuen Übung beginnen zu können, und alle die Übung 04 davor geschafft haben.

Übung 05

Woche 02: Montag 23. 3. und Freitag 27. 3. 2020

  • Gehe zum Artikel Übung 05 (Bereich ONLINEPUBLISHING) und arbeite die Schritte 1 bis 12 ab.

Woche 03: Montag 30. 3. und Freitag 3. 4. 2020

  • Gehe zum Artikel Übung 05 (Bereich ONLINEPUBLISHING) und arbeite die Schritte 12 bis 29 ab.
  • Gib bis Freitag 3. 4. diesen Zwischenstand ab (Begründung siehe unten).

Wer in der vergangen Woche bis zum Punkt 12 gekommen ist (einige haben einen Zwischenstand abgegeben, und die Abgaben sind teilw. super), hat diese Woche nur mehr wenig zu tun (max. 60 Minuten).
Es wäre gut, wenn alle bis Freitag 3. 4. den Zwischenstand erreichen und auch abgeben, um dann in den Osterferien wirklich eine Pause zu machen und diese zu genießen.

Wie es nach Ostern weitergeht, wissen wir nicht, wenn wir aber die Medien ein wenig verfolgen, gehen wir eher nicht in die Schule.



4AHLW-1

WordPress

Woche 04: 20. bis 24. 4.

  1. Lies auf Websites mit WordPress die Vorbemerkungen zum Verständnis von WordPress.
  2. Lege ein WordPress-Konto an: Punkte 1-3 mit Video-Anleitung
  3. Gehe zum Beitrag WordPress – Erste Schritte.
  4. Arbeite die Schritte 1-11 ab.
  5. Sende die Adresse Deiner Website per Email bis Montag 27. 4. 2020

Woche 05: 27. bis 30. 4.

  1. Gehe zum Beitrag WordPress – Teil 01 und arbeite die Schritte 1-5 bis Montag 4. 5. ab.
    (Wegen der verkürzten Woche und weil einige Gruppen nur 1 Stunde am Plan haben, ist das Programm klein.)

Woche 06: 04.05. bis 08.05.

  1. Gehe zum Beitrag WordPress – Teil 02 und arbeite die Schritte 1-9 bis Montag 11.5. ab.

ACHTE BITTE SORGFÄLTIG AUF DIE ANGABEN UND ANWEISUNGEN!

Woche 07: 11.05. bis 15.05.

  1. Gehe zum Beitrag WordPress – Teil 03 und arbeite die Punkte 1 – 3 ab. Frist: Montag 18. 05. 2020

Woche 08: 18.05. bis 22.05.

  1. Gehe zum Beitrag WordPress – Teil 04 und arbeite die Punkte 1 – 4 ab. Beachte dort die Abgabehinweise.

WordPress – eine eigene Website gestalten

Woche 09: 25.05. bis 29.05.

  1. Gehe zum Beitrag WordPress – Teil 05 und arbeite die Punkte 1-4 ab.

Woche 10: 03.06. bis 05.06.

  1. Ausführung der eigenen WP-Site

Woche 11: 08.06. bis 12.06.

  1. Ausführung der eigenen WP-Site

Woche 12: 15.06. bis 19.06.

  1. Ausführung der eigenen WP-Site

Woche 01: Donnerstag 19. 3. 2020

Den Einstieg in diese neue Phase von Schule wollen wir sanft machen:

  1. Mache ein Portraitfoto von Dir (Smartphone oder Fotoapparat).
  2. Installiere Dreamweaver und Photoshop/oder XnView MP, mache ein Bildschirmfoto vom geöffneten Dreamweaver (findet heraus, wie man ein Bildschirmfoto machen und speichern kann).
    [Dowload der Programme unter https://unterricht.leo-ertl.space / AI Fernunterricht]
  3. Lade die 2 Fotos gleich noch heute auf https://unterricht.leo-ertl.space unter AI / Upload der Arbeiten hoch. (Dabei musst Du Dich anmelden, die Anmeldedaten (Email, Passwort) bekommst Du per Email).

Übung 05

Woche 01: Freitag 20. 3. 2020

Stand: style.css mit vier definierten Boxen und dem #container; index.html mit angefügtem Stylesheet und eingefügtem #container, in diesem vier eingefügten Boxen;
Das sieht in der Codeansicht der index.html so aus:

...
<body>
<div id="container">
   <div id="kopf">Raum für den Inhalt </div>
   <div id="navigation">Raum für den Inhalt</div>
   <div id="inhalt">Raum für den Inhalt </div>
   <div id="fuss">Raum für den Inhalt </div>
</div>
</body>
</html>

Weitere Schritte:

  1. Such Dir ein beliebiges Bild und kopiere es in den Materialien-Ordner.
  2. Beschneide das Foto in Photoshop oder einem anderen Bildbearbeitungsprogramm auf 860 px x 240 px (= Größe der box #kopf)
  3. Speichere das Foto im Foto-Ordner. Achte dabei auf eine kleine Dateigröße.
  4. Ziehe das Foto aus dem Foto-Ordner (Dateienfenster rechts) in die Kopfbox und gib einen Alternativtext ein (was am Bild zu sehen ist).
  5. Gib #navigation, #inhalt und #fuss ein padding von 15 px
  6. Überlege, wie Du Breite und Höhe der Boxen verkleinern musst, damit sie wieder passen, und führe das durch.
  7. Mach ein Bildschirmfoto vom Code im Stylesheet und lade das Bild hoch (Abgabe). Bis Mittwoch 25. 3.

Die Aufgabe ist kurz, damit bis Mittwoch alle diesen Stand erreichen (könnte ja sein, dass manche noch was nachzuholen haben).
Anfang der kommenden Woche gibt es das Programm für die Woche.

Woche 02: Donnerstag 26. 3. und Freitag 27. 3. 2020

Da die Anleitung für alle Gruppen jetzt im Artikel Übung 05 (Bereich ONINEPUBLISHING) ist und alle Gruppen einheitlich arbeiten, macht bitte folgende Änderung:
Löscht bei den Boxen #navigation, #inhalt und #fuss das padding von 15 px heraus.
Stellt die Breite der Boxen wieder auf 860 px und die Höhe auf 60, 480 und 160 px

  • Geht auf der Website zu Artikel Übung 05 (Bereich ONLINEPUBLISHING) und arbeitet die folgenden Punkte ab:
    12, 13 bis 16, 17 bis 20 (nur mehr für die seite2.html und seite3.html; alle drei Seiten haben das gleiche Kopfbild)
    21 bis 29

Woche 03: Donnerstag 2. 4. und Freitag 3. 4. 2020

  • Geht auf der Website zu Artikel Übung 05 (Bereich ONLINEPUBLISHING) und arbeitet die folgenden Punkte ab: 30 bis 44
  • Wenn Du noch vor den Osterferien alles erledigt haben willst, gib die Übung gleich am 3. 4. ab, sonst bis Freitag 17. 4.

Wie es nach Ostern weitergeht, wissen wir nicht, wenn wir aber die Politik und Medien ein wenig verfolgen, müssen wir zum Schluss kommen, dass wir eher nicht in die Schule gehen.



Fernunterricht-Software-Download Infos

Download und Installation von Dreamweaver CS6 30 Tage-Testversion (342 MB)

228759-666908-adobe-dreamweaver-cs6.zip

  • Lade die Testversion von Dreamweaver CS6 herunter
  • Entpacke die ZIP-Datei https://deutsch.eazel.com/adobe-dreamweaver-cs6-p228759
    rechte Maustaste auf die ZIP-Datei / Alle Extrahieren
  • Gehe in den so angelegten Ordner \adobe-dreamweaver-cs6-p228759 und suche die Datei
    Set-up.exe
  • Starte die Set-up.exe mit Doppelklick und folge den Anweisungen
  • Sollte beim ersten Start die Anmeldung an einem Adobe-Konto verlangt werden (und nicht umgangen werden können), lege eines an (ist kein Problem, weil seriöse Firma)
  • Viel Spaß!

Download und Installation von Phtoshop CS6 30 Tage-Testversion (1,5 GB)

228677-666736-adobe-photoshop-cs6.rar

  • Lade die Testversion von Photoshop CS6 ebenso herunter. Diese Datei hat die Endung .rar und sollte genauso extrahiert werden können. Wenn nicht:
  • Suche im Internet das Programm 7-Zip, lade es herunter und installiere es.
  • Dann ebenso rechte Maustaste auf die RAR-Datei und /7-Zip /Extract to … wählen, dann wieder Set-up.exe suchen und installieren …
  • Viel Spaß!

Photoshop-Alternative

Wer Photoshop mit seiner Größe von 1,5 GB nicht für 30 Tage Testen herunterladen will, kann als Alternative das kleine kostenlose Progrämmchen XnView MP herunterladen und installieren.

XnView MP

Das Programm reicht fürs Webdesign völlig aus. Man kann Fotos beschneiden (Symbol Zuschneiden) und verkleinern (Symbol Größe ändern).

Für das Verkleinern der Dateigröße muß man /Datei Exportieren wählen und kann so die Qualität verändern.

Mac Adobe-CS6_Master_Collection_Mac_OSX.zip Testversion (6,7 GB)

Adobe_CS6_Master_Collection_Mac_OSX.zip

Ziemlich unten auf der Seite, die aufgeht, auf diesen Button anklicken – dann weiter mit CLICK TO PROCEED

Beim Installieren auswählen, welche Programme installiert werden sollen!



Übung 05

Erste Schritte

  1. Den lokalen Site-Ordner \uebung05 anlegen, ebenso darin den Foto-Ordner \fotos und den Materialien-Ordner \uebung05_materialien
  2. die Sitedefinition einrichten: Sitename „Übung 05“, lokaler Site-Ordner „uebung05“
  3. die index.html und das Stylesheet style.css erstellen
  4. das Stylesheet an die Seite index.html anfügen

Einzelne Dinge können hier nachgelesen/gesehen werden.

Groblayout definieren

  1. Nacheinander die Boxen #container, #kopf, #navigation, #inhalt, #fuss laut Skizze programmieren. Den Boxen (ausser #container) eine Hintergrundfarbe geben (background-color:#…). Die Box #container wird horizontal zentriert (margin-left:auto; margin-right:auto;).
    In #container werden dann die anderen Boxen hineinkommen.
div#container{
     position:relative;
     width:860px; height:1080px;
     margin-left:auto; margin-right:auto;
}

div#kopf{
     position:relative;
     width:860px; height:240px;
     margin-bottom:10px;
     background-color:#0CF;
}

div#navigation{
    position:relative;
    width:860px; height:60px;
    background-color:#333;
    margin-bottom:10px;
    background-color:#0CF;
}

div#...

margin-bottom (bei #kopf, #navigation, #inhalt) bewirkt, dass zwischen den Boxen ein Abstand ist.

Auf der ersten Seite (index.html) die Boxen einbinden

  1. Einfügen / Layoutobjekte / DivTag /ID: container
  2. Nachdem die Box #container eingefügt ist, den Dummy-Text „Inhalt von …“ löschen, den Mauszeiger in die Box #container stellen und die Box #kopf einfügen
  3. Jetzt wird es nicht anders gehen, als in die Codeansicht zu wechseln, um den Mauszeiger nach der Box #kopf zu stellen, aber in #container (siehe Code-Zeile unten: der Mauszeiger kommt ans Ende dieser Zeile)
  4. Jetzt kann die nächste Box (navigation) eingefügt werden
  5. genauso mit den weiteren Boxen verfahren (Mauszeiger immer ans Ende der Code-Zeile stellen)
<div id="kopf">Raum für den Inhalt von id "kopf"</div>
Nachdem #container und #kopf eingefügt sind, am besten in die Code-Ansicht wechseln und den Mauszeiger ans Ende der Zeile, in der die Box Kopf eingebunden ist, stellen.

Der Code der Seite index.html sollte jetzt so aussehen:

...
<body>
<div id="container">
   <div id="kopf">Raum für den Inhalt von ...</div>
   <div id="navigation">Raum für den Inhalt ... </div>
   <div id="inhalt">Raum für den Inhalt ...</div>
   <div id="fuss">Raum für den Inhalt ... </div>
</div>
</body>
</html>
Zeile 3: container wird eröffnet – Zeile 8: container wird geschlossen – die 4 kleinen Boxen sind im container
  1. Wieder in die Entwurfsansicht schalten und schauen, ob die Boxen richtig dargestellt werden
  2. Wenn die index.html fertig ist (die Boxen richtig dargestellt werden), die weiteren zwei Seiten durch
    /Speichern unter „seite1.html“ und durch /Speichern unter „seite2.html“ anlegen. 
Häufige Fehlerquellen
- vergessene ;
- vergessene Einheit px
- falsche Werte (Zahlen)
- Farbcode: # vergessen
- Farbcode: 3 oder 6 stellig
- Verschachtelung bei der Einbindung der Boxen (die Boxen sind nicht wie oben nacheinander)

Jetzt gibt es drei Seiten und das Stylesheet.

Navigation (Hyperlinks) einfügen

  1. Trage auf der index.html in der Navigationsbox ein:

    HOME SEITE 2 SEITE 3

  2. Mache die Verlinkung:
    Markiere zuerst HOME und ziehe dann unten im Eigenschaftsfenster mit der Spule nach rechts zu index.html im Dateienfenster. Als Ziel stelle _self ein.
    Hilfe zum Verlinken: https://unterricht.leo-ertl.space/?p=12413 / Abschnitt DIE DREI SEITEN VERLINKEN
  3. Verfahre ebenso mit SEITE 2 und SEITE 3
  4. Wenn die drei Links angebracht sind, markiere die ganze Navigation (Strg + C), gehe zur Seite seite2.html und füge sie ein (Strg + V), ebenso auf seite3.html

Ein Kopfbild in #kopf einfügen

  1. Suche Dir ein beliebiges Bild (am besten ein eigenes Foto) und gib es in den Materialien-Ordner und beschneide es auf 860 x 240 px (= Größe der Box #kopf).
  2. Speichere es im Foto-Ordner mit dem Namen kopf.jpg

Wenn Du kein eigenes Foto vorbereiten kannst (nur), lade dieses runter und speichere es im Foto-Ordner (es ist schon vorbereitet).

  1. Gehe zur Seite index.html. Ziehe das Bild kopf.jpg aus dem Foto-Ordner im Dateienfenster in die Box #kopf, vergib einen Alternativtext.
  2. Verfahre ebenso mit den zwei anderen Seiten.

Text (Dummy-Text) in die Seiten einfügen

  1. Füge in die Inhaltsboxen der drei Seiten Dummy-Text ein. Hol ihn Dir von blindtextgenerator.com
  2. Mach auf jeder Seite ein Überschrift und weise ihr das Format Überschrift 1 zu.

Fotos für den Inhaltsbereich vorbereiten und einfügen

  1. Suche Dir weitere drei Fotos (am besten wieder eigene) und gibt sie in den Materialien-Ordner.
  2. Stelle die Breite der Fotos auf 400 px ein (das geht selbst mit dem Programm Paint, das bei Windows dabei ist, wer Photoshop hat, eben damit).
  3. Speichere die drei fertigen Fotos im Foto-Ordner, achte beim Speichern auf eine kleine Dateigröße.
  4. Ziehe die Fotos jeweils an den Beginn des Textes in den Inhaltsboxen der dei Seiten (vgl. Punkt 19).

Die Seiten sollten jetzt so aussehen (abgesehen von den Farben).

Ausrichen der drei Fotos nach links

  1. Das Stylesheet wird um die Klasse .fotolinks ergänzt: selector{Eigenschaft:Wert; Eigenschaft:Wert; …} 
.fotolinks{
   float:left; 
   margin-right:20px; 
   margin-bottom:5px;
}

float:left richtet das Foto links aus
margin-right rückt den Text rechts vom Bild ab
margin-bottom rückt den Text unten vom Bild ab

  1. Weise nun den drei Fotos die Klasse .fotolinks zu:
    Klicke das Foto der index.html in der Inhaltsbox an und wähle unten bei Klasse .fotolinks aus
  2. verfahre ebenso bei den weiteren zwei Seiten

Überschrift 1 und Absatz formatieren

  1. Überschrift 1 und Absatztext formatieren: ergänze das Stylesheet

    h1{font-family: …; font-size:…; color:#…;}
    Wähle selber geeignete Werte.

  2. Verfahre ebenso mit dem Absatztext (p):
    p{…}
  3. Nun sollte noch der Text vom Boxrand abrücken. Zu diesem Zweck bekommen h1 und p einen margin-left und margin-right: Ergänze also h1 und p jeweils so

    margin-left:15px; margin-right:15px;

Überschrift 1 könnte so aussehen:

h1{
   font-family:Arial, Helvetica, San-Serife;
   font-size:32px;
   color:#12F;
   margin-left:15px; margin-right:15px;
}

Eine vertikale Scrollkeiste bei der Inhaltsbox einfügen

Nun könnte es sein, dass der Text in der Inhaltsbox nicht Platz hat (überfließt). Das Problem kann mit einer vertikalen Scrollleiste gelöst werden.

  1. Ergänze bei der Box #inhalt:
overflow:auto;

overflow – der Text fließt über
auto: nur wenn der Text überfließt, wird die Scrollleiste angezeigt

Formatieren der Hyperlinks inkl. vertikaler Zentrierung

Hyperlinks können drei Zustände haben:
nicht besucht („normal“): a
besucht: a:visited
Hover-Effekt (Maus drüber-Effekt): a:hover

Ein Muster findest Du in Deiner Übung 03.

  1. Formatiere nach Deinem Geschmack die Hyperlinks, beachte aber, dass der Text lesbar ist und der besuchte Hyperlink einen helleren Farbton hat als der noch nicht besucht. (“normale”).
  2. Damit auch die Hyperlinks vom linken Boxrand abrücken, ergänze einen margin-left von 15px (margin-right ist nicht notwendig) bei a.
a{
   ...
   margin-left:15px;
}
  1. Damit die Navigation vertikal zentriert wird, ergänze folgendes bei a.
a{
   line-height:60px; 
   vertical-align:middle;
}

line-height: Zeilenhöhe, der Wert 60px ist die Höhe der Box; die Buchstaben werden innerhalb der Zeilenhöhe zentriert;
middle: Zentrierung

Die Seiten sollten jetzt so aussehen:

Scrren 02
  1. Entferne bei den Hyperlinks die Unterstreichug: Ergänze daher bei a
a{
   ...
   text-decoration:none;
}
  1. Füge im Fußbereich ein Foto von Dir ein (nur auf index.html). Bereite es so vor, dass es die Höhe der Box #fuss hat: 160px
    Öffne das Foto in Photoshop oder in einem anderen Bildprogramm, stelle die Höhe auf 160 px ein (Breit ergibt sich automatisch) und speichere es im Foto-Ordner.
  2. Ziehe das Foto aus dem Dateienfenster in die Box #fuss (falls noch Text in der Box ist, vorher löschen).
    Gib einen Alternativtext ein.
  3. Programmiere im Stylesheet eine eigene Klasse, um dieses Foto nach links auszurichten, sodass rechts davon Text stehen kann: .fussfoto_links
.fussfoto_links{
   float:left;
   margin-right:25px;
}
margin-right  ➜  rückt den Text rechts vom Foto ab
Auf den anderen Seiten darf kein margin sein, damit das Foto bis zum Rand reicht.
  1. Klicke das eingefügt Foto an und weise ihm (unten im Eigenschaftsfenster bei Klasse) .fussfoto_links zu.
  2. Schreibe rechts vom Foto Deinen Namen und weise ihm Überschrift 2 zu.
  3. Unter dem Namen schreibe HLW Hollabrunn und weise Überschrift 3 zu.
  4. Formatiere jetzt noch h2 und h3 im Stylesheet nach Deinem Geschmack.
    Wenn Du willst, dass Dein Name vom oberen Boxrand abrückt, gib keinen margin-top ein (führt zu Unerwünschtem), sondern: eine line-height (Zeilenhöhe), die deutlich größer ist als die Schriftgröße.
    Sollte die Fussbox weiter von #inhalt wegrücken (Unerwünschtes), ergänze bei h2 einen margin-top mit 0 px
h2{
   font-family: ...
   font-size: ...
   color:#...
   line-heigt:42px;
   margin-top:0px;
}