Sende die Adresse Deiner Website per Email bis Montag 27. 4. 2020
Woche 05: 27. bis 30. 4.
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.
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.
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.
Gehe zum Beitrag WordPress – Teil 04 und arbeite die Punkte 1 – 4 ab. Beachte dort die Abgabehinweise.
Den Einstieg in diese neue Phase von Schule wolle wir sanft machen.
Mach ein Portraitfoto von Dir (Smartphone oder Fotoapparat).
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]
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.
Sende die Adresse Deiner Website per Email bis Montag 27. 4. 2020
Woche 05: 27. bis 30. 4.
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.
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.
Gehe zum Beitrag WordPress – Teil 03 und arbeite die Punkte 1 – 3 ab. Frist: Montag 18. 05. 2020
Den Einstieg in diese neue Phase von Schule wollen wir sanft machen:
Mach ein Portraitfoto von Dir (Smartphone oder Fotoapparat).
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]
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.
Sende die Adresse Deiner Website per Email bis Montag 27. 4. 2020
Woche 05: 27. bis 30. 4.
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.
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.
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.
Gehe zum Beitrag WordPress – Teil 04 und arbeite die Punkte 1 – 4 ab. Beachte dort die Abgabehinweise.
Den Einstieg in diese neue Phase von Schule wollen wir sanft machen:
Mach ein Portraitfoto von Dir (Smartphone oder Fotoapparat).
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]
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:
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:
Überlege, wie Du Breite und Höhe der Box anpassen musst, damit die Größe wieder passt, und mache diese Anpassung.
Wenn die drei Boxen richtig angezeigt werden (zentriert, padding, Rahmen, Zwischenabstände), zippe den Site-Ordner uebung04, Name des Zip-Files: uebung04_nachname.zip
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.
Sende die Adresse Deiner Website per Email bis Montag 27. 4. 2020
Woche 05: 27. bis 30. 4.
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.
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.
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.
Gehe zum Beitrag WordPress – Teil 04 und arbeite die Punkte 1 – 4 ab. Beachte dort die Abgabehinweise.
Den Einstieg in diese neue Phase von Schule wollen wir sanft machen:
Mache ein Portraitfoto von Dir (Smartphone oder Fotoapparat).
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]
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:
Such Dir ein beliebiges Bild und kopiere es in den Materialien-Ordner.
Beschneide das Foto in Photoshop oder einem anderen Bildbearbeitungsprogramm auf 860 px x 240 px (= Größe der box #kopf)
Speichere das Foto im Foto-Ordner. Achte dabei auf eine kleine Dateigröße.
Ziehe das Foto aus dem Foto-Ordner (Dateienfenster rechts) in die Kopfbox und gib einen Alternativtext ein (was am Bild zu sehen ist).
Gib #navigation, #inhalt und #fuss ein padding von 15 px
Überlege, wie Du Breite und Höhe der Boxen verkleinern musst, damit sie wieder passen, und führe das durch.
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)
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)
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.
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
Den lokalen Site-Ordner \uebung05 anlegen, ebenso darin den Foto-Ordner \fotos und den Materialien-Ordner \uebung05_materialien
die Sitedefinition einrichten: Sitename “Übung 05”, lokaler Site-Ordner “uebung05”
die index.html und das Stylesheet style.css erstellen
das Stylesheet an die Seite index.html anfügen
Einzelne Dinge können hier nachgelesen/gesehen werden.
Groblayout definieren
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.
margin-bottom (bei #kopf, #navigation, #inhalt) bewirkt, dass zwischen den Boxen ein Abstand ist.
Auf der ersten Seite (index.html) die Boxen einbinden
Einfügen / Layoutobjekte / DivTag /ID: container
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
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)
Jetzt kann die nächste Box (navigation) eingefügt werden
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
Wieder in die Entwurfsansicht schalten und schauen, ob die Boxen richtig dargestellt werden
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
Trage auf der index.html in der Navigationsbox ein:
HOME SEITE 2 SEITE 3
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
Verfahre ebenso mit SEITE 2 und SEITE 3
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
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).
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).
Gehe zur Seite index.html. Ziehe das Bild kopf.jpg aus dem Foto-Ordner im Dateienfenster in die Box #kopf, vergib einen Alternativtext.
Verfahre ebenso mit den zwei anderen Seiten.
Text (Dummy-Text) in die Seiten einfügen
Füge in die Inhaltsboxen der drei Seiten Dummy-Text ein. Hol ihn Dir von blindtextgenerator.com
Mach auf jeder Seite ein Überschrift und weise ihr das Format Überschrift 1 zu.
Fotos für den Inhaltsbereich vorbereiten und einfügen
Suche Dir weitere drei Fotos (am besten wieder eigene) und gibt sie in den Materialien-Ordner.
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).
Speichere die drei fertigen Fotos im Foto-Ordner, achte beim Speichern auf eine kleine Dateigröße.
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
Das Stylesheet wird um die Klasse .fotolinks ergänzt: selector{Eigenschaft:Wert; Eigenschaft:Wert; …}
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.
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.
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”).
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;
}
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:
Entferne bei den Hyperlinks die Unterstreichug: Ergänze daher bei a
a{
...
text-decoration:none;
}
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.
Ziehe das Foto aus dem Dateienfenster in die Box #fuss (falls noch Text in der Box ist, vorher löschen). Gib einen Alternativtext ein.
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.
Klicke das eingefügt Foto an und weise ihm (unten im Eigenschaftsfenster bei Klasse) .fussfoto_links zu.
Schreibe rechts vom Foto Deinen Namen und weise ihm Überschrift 2 zu.
Unter dem Namen schreibe HLW Hollabrunn und weise Überschrift 3 zu.
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
Übung 03 ist die erste Übung mit sinnvollem Inhalt, zum Thema Wintersport, und mit Fotos. Die Fotos und der Text können hier heruntergeladen werden: Materialien
Den lokalen Site-Ordner \uebung03 anlegen, ebenso den Foto-Ordner \fotos
Den Materialien_Ordner anlegen (uebung03_materialien) und die Materialien dowloaden und im Materialien-Ordner entpacken
Die Seite index.html erstellen
Die Seite alpin.html erstellen
Die Seite nordisch.thml erstellen
Bei allen drei Seiten passende Titel eintragen
Die Inhalte aus der Textdatei text_inhalt in die drei Seiten kopieren und die Formate zuweisen (sind in Klammern angegeben)
Unterhalb des Textes jeweils die Namen für die Links eintragen: Wintersport | Alpin | Nordisch
Die Verlinkung durchführen, Ziel ist jeweils _self
Die Fotos vorbereiten und einfügen
Die Fotos alpin.jpg, home.jpg und nordisch.jpg in Photoshop öffnen und ihre Größe reduzieren: Breite: 900 px
Die drei bearbeiteten Fotos im Ordner \fotos speichern
Zu DW wechseln und die index.html auswählen
Mauszeiger an den Anfang des ersten Absatzes stellen
Über Einfügen / Foto home.jpg einfügen, bei Alternativtext Wintersport eintragen
Speichern
Zu alpin.html wechseln und das Foto alpin.jpg einfügen
Zu nordisch.html wechseln und nordisch.jpg einfügen
Formatierungen
h1, h2 und p formatieren (nach eigenen Vorstellungen Schriftart, Größe und Farbe festlegen)
Die Hyperlinks formatieren: a a:visited a:hover
Übung 02
In der Übung 02 geht es um die Formatierung der Schriften (Feinlayout). Zum Verständnis der Methode ist der Artikel Zusammenspiel von HTML -und CSS heranzuziehen.
In Übersicht: Die Formatierung der Schriften (Feinlayout) geschieht in einer eigens anzulegenden Datei mit der Endung .css (z. B. kann sie style.css genannt werden). In diese werden die Formatierungen eingetragen, z. B. Überschrift 1 soll grün sein, Überschrift 2 soll rot sein usw.
An jede einzelne HTML-Seite muss das Stylesheet style.css angefügt werden.
Schritte zur Übung 02:
Anlegen der Seite index.html
Einfügen von Text: “Überschrift 1” (als Überschrift 1 formatieren) Einige Sätze Dummy-Text einfügen “Überschrift 2” einfügen (als Überschrift 2 formatieren)
Über Datei / Neu ein leeres Stylesheet anlegen
Mit dem Namen style.css speichern
Zur index.html wechseln
Rechts im Eigenschaftsfenster das Symbol für Stylesheet anfügen suchen und aktivieren
Durchsuchen wählen und style.css auwählen, OK und Speichern Die Seite und das Stylesheet sind jetzt verbunden, sobald im Stylesheet ein Format eingetragen wird, wirkt es auf der Seite.
Formatierungen für Überschrift 1 (h1), Absatztext (p) und Überschrift 2 (h2) vornehmen
Im Stylesheet folgenden Text eintragen, in dieser Formatierung mit den Zeilenschaltungen und Einzügen. Dabei unbedingt die Begriffe aus der Liste, die DW automatisch öffnet, mit Enter übernehmen:
Im Windows-Dateiexplorer den lokalen Stammordner für die Übung 01 anlegen: \uebung01
Im Ordner \uebung01 den Unterordner \fotos anlegen
Auf gleicher Ebene wie \uebung01 den Materialien-Ordner anlegen: \uebung01_materialien (Er dient dazu, Materialien für die Website zunächst zu sammeln, z. B. Fotos und Texte. Erst die vorbereiteten Fotos werden später im Ordner \fotos gespeichert.
Adobe Dreamweaver starten
Im Hauptmenü Site / Neue Site wählen
Unter Site-NameÜbung01 eintragen
Unter Lokaler Site-Ordner mit dem Symbol Ordner suchen den Ordner \uebung01 auswählen und bestätigen und Speichern. Jetzt speichert DW automatisch im Ordner \uebung01.
Im Startfenster von DW eine leere HTML-Seite erstellen
Mit Strg+S sofort speichern/Namen vergeben: index.html Es muss darauf geachtet werden, dass die Dateiendung .html auch dort steht.
Text eingeben bzw. kopieren: Willkommen! – Enter für neuen Absatz Ein paar Sätze Dummy-Text einfügen (von der Website blindtextgenerator.com kopieren) – Enter für neuen Absatz
Namen für die Hyperlinks eingeben: Home | Über mich | Kontakt
Willkommen! als Überschrift 1 formatieren: im Eigenschaftsfenster unten links unter Format Überschrift 1 auswählen
In der Symbolleiste unter Titel den Titel der Seite eintragen: Willkommen!
Speichern nicht vergessen.
Die Seite uebermich.html erstellen
Überschrift: eigener Name (als Überschrift 1 formatieren)
Einen Einleitungssatz zu den eigenen Hobbies schreiben
Eine Aufzählung mit einigen Hobbies machen: Im Eigenschaftsfenster unten Ungeordnete Liste wählen und schreiben
Am Ende der Liste mit zweimaligem Enter die Liste beenden und so zum nächsten Absatz gelangen
Ein paar Sätze Dummy-Text einfügen
Die Namen für die Navigation einfügen
Die Seite kontakt.html erstellen
Überschrift: Kontakt
Dann Kontaktdaten einfügen: Name, Strasse, PLZ Ort, Telefon, Email Zwischen Strasse und PLZ Ort kommt eine neue Zeile: Umschalt+Enter, ebenso zwischen Telefon und Email
Schließlich wieder die Namen für die Hyperlinks
Verlinkung der drei Seiten
Mit der Seite index.html beginnen
Das Wort Home exakt markieren
Im Eigenschaftsfenster mit dem Symbol Auf Datei zeigen (Spule) auf die Datei index.html rechts im Dateien-Fenster ziehen und loslassen
Im Eigenschaftsfenster bei Ziel _self einstellen
Über mich markieren und mit der Spule zu uebermich.html ziehen und als Ziel _self auswählen
Schließlich noch Kontakt
Speichern nicht vergessen
Das Gleiche ist mit den zwei weiteren Seiten uebermich.html und kontakt.html zu tun
Online-Publishing
Beim Desktop-Publishing handelt es sich um das Vorbereiten und Veröffentlichen von Inhalten in gedruckter Form. Beim Online-Publishing geht es um die Vorbereitung und Veröffentlichung von Inhalten im Internet (die nach der Veröffentlichung “online” sind). Veröffentlichen im Internet geschieht beim Posten von Inhalten in sozialen Netzwerken, von Kommentaren zu Artikeln, von Filmen auf Videoplattformen, und beim Gestalten von Websites, wenn sie auf Webservern veröffentlicht (hochgeladen) werden.
Begriffe
WEBSITE
(alle Inhalte, die meist auf einzelne Seiten aufgeteilt sind)
Homepage
index.html (default.html)
eine spezielle HTML-Seite, die aufgrund ihres Namens automatisch ausgeliefert wird, wenn die Adresse einer Website im Webbrowser eingegeben wird; meist als “Begrüßungsseite” gestaltet
HTML-Seite
schule.html
eine HTML-Seite (mit zusammengehörigem Inhalt)
HTML-Seite
freizeit.html
eine HTML-Seite (mit zusammengehörigem Inhalt)
(die einzelnen Seiten sind miteinander verlinkt)
Webserver
Ein Webserver ist ein Computer,
der ständig mit dem Internet verbunden ist (braucht eine leistungsfähig Anbindung, besonders auch eine hohe Uploadgeschwindigkeit),
der über das Internet erreichbar ist (öffentlich, durch öffentliche und statische (gleichbleibende) IP-Adresse; die IP-Adresse ist die eigentliche Adresse, mit der der Server gefunden wird; vgl. die Postadresse; jede IP-Adresse darf nur einmal weltweit verwendet werden),
der die Inhalte einer Website gespeichert hat (z. B. in Form von einzelnen HTML-Seiten)
und der diese auf Anforderung durch einen Benutzer/eine Benutzerin, auch Client genannt) ausliefert.
Der Client verwendet dafür einen Webbrowser, der die Anforderung nach der Website schickt und die ausgelieferten Inhalte am Bildschirm darstellt. Der Server braucht für dieses Handling auch spezielle Software (Apache-Webserver, MS Internet-Informatons-Server (IIS)).
Das Internet sehr vereinfacht
Der Client (z. B. du) startet auf seinem Laptop den Webbrowser Firefox und gibt in der Adresszeile ein: www.orf.at www.orf.at ist die Domain des ORF. Der Webserver des ORF wird aber mithilfe seiner IP-Adresse gefunden. (Die Domains wurden erfunden, weil man sie sich leichter merken kann als Nummern.)
Es wird als nächstes bei einem Dynamic-Name-Server (DNS-Server) angefragt, welche IP-Adresse der ORF-Server hat. Die DNS-Server kennen alle Domains mit den dazugehörigen IP-Adressen.
Erst jetzt kann die Anfrage nach www.orf.at zum Webserver des ORF geschickt werden. Mitgeschickt wird die eigene IP-Adresse.
Die angeforderte ORF-Seite wird zum Client (der aufgrund der IP-Adresse gefunden wird) geschickt und ist im Webbrowser zu sehen.
