Diese Leistung besteht aus der Bereitstellung von Internet-Konnektivität, also dem Transfer von IP-Paketen in und aus dem Internet. Ohne diese Leistung kann man das Internet nicht benutzen. Die Verbindung kann mit Funktechnik, Wählleitungen, Standleitungen oder Breitbandleitungen umgesetzt werden.
Manche dieser Provider betreiben nur globale Internetleitungen (Backbones), andere betreiben überregionale Leitungen und wieder andere nur lokale. Die kleinen Anbieter mieten sich Leistungskapazitäten bei den großen.
Der Weg ins Internet geht immer über den Provider. Jede Anforderung einer Website, jede Email usw. geht durch die Server des Providers. Die angeforderte Website geht auf dem Weg zum Client auch über den Provider. Nur er kann sie auf den Computer des Clients leiten (normale Computer sind ja über das Internet nicht direkt erreichbar).
Der Provider weiß alles
Die Provider (Internetprovider, Telefonprovider) wissen daher sehr viel über ihre KundInnen und Firmen würden diese Daten gerne haben, um zu sehen, was Menschen interessiert, und um sie dann bewerben zu können. Aber auch Polizei und Gerichte haben Interesse an diesen Daten. Ob Polizei und Gerichte auf diese Daten zugreifen dürfen, wird gesetzlich geregelt.
Vorratsdatenspeicher-Gesetz
Das Vorratsdatenspeicher-Gesetz, das in Österreich vor einigen Jahren gültig war, verpflichtete die Provider, alle Verkehrsdaten/Verbindungsdaten (wer wann, wie lange im Internet was macht, z. B. die besuchten Websites, die geschickten Emails, aber ohne die Inhalte) aller ihrer KundInnen zu speichern und 6 Monate aufzuheben (Vorrat), und sie bei Anforderung der Polizei auszuliefern.
Die Polizei erhoffte sich damit, Verbrechen besser bekämpfen zu können. Das Gesetz wurde bald wieder aufgehoben, weil es ein unberechtigter Eingriff in die Privatsphäre der unbescholtenen Menschen war.
Anlassbezogene Datenspeichernung
Ein mögliches neues Gesetz sieht vor, nur die Verkehrsdaten/Verbindungsdaten der Menschen zu speichern und auszuliefern, gegen die der Verdacht besteht, dass sie ein schweres Verbrechen planen oder begangen haben. Über die Auslieferung der Daten muss ein Gericht entscheiden.
Im letzten Teil zu WordPress gestaltest Du eine komplett eigene Website zu einem Thema mit eigenen Inhalten. Die ersten Schritte und die Planung geschehen noch zu Hause, die weiteren Schrittte in der Schule ab 3. Juni.
Überlege Dir, zu welchem Thema und für wen (Zielgruppe) Du eine kleine Website gestalten möchtest. Mindestanforderungen: 3 Seiten 2 Beiträge (News)
Lege eine neue Site an: Wie das geht, zeige ich Dir in diesem Video
Du hast ein Konto bei WordPress, kannst aber mehrere unabhängige Sites anlegen (mit anderen Themes, anderer Adresse).
Schicke mir die Adresse der neuen Site und den Plan (Punkt 4) per Mail bis 3. Juni.
Suche ein Theme, das zu Deinem Thema passt
Plane Deine Site im Detail: Titel der 3 Seiten Inhalte der 3 Seiten Fotos für die 3 Seiten ebenso die 2 News-Beiträge
Schreibe Deinen Plan ins Worddokument, das Du hier runterladen kannst. Achte strikt darauf, eigenen Text zu schreiben und eigene Fotos zu verwenden oder solche, die frei verwendbar sind (dann schreibe die Quelle dazu!).
Lege die Seiten und Beiträge an und fülle sie mit den vorbereiteten Inhalten.
Richte das Menü ein (wie man Beiträge mit Kategorien ins Menü bekommt, kannst Du herausfinden oder es wird in der Schule geklärt).
Kümmere Dich um Titel und Untertitel der Website.
Ev. kannst Du ein Logo verwenden.
Ev. kannst Du Farben und Sonstiges Anpassen.
Was soll auf der Startseite zu sehen sein? – Eine der 3 Seiten? Die 2 Newsbeiträge? – Stelle es ein.
WordPress – Teil 04: Erkunden
Du kennst bereits die allerwichtigsten Funktionen von WordPress: Beiträge verfassen, Kategorien (Kategorien-Widget), Seiten verfassen, Menüs, Fotos einfügen, Theme installieren …
Die Woche 08 dient dazu, WordPress selber weiter zu erkunden. (Anregung auf ai1920.wordpress.com)
Lege eine neue leere Seite an mit dem Titel: “Blöcke”
Probiere einige (wenigstens 4) Blöcke aus, z. B. Instagram, indem Du sie einfügst, ausfüllst …
Bringe die Seite Blöcke ins Menü, und zwar als Untermenüpunkt der Startseite (Neu anordnen …, es ist selbsterklärend!)
Wenn Du das erledigst hast, gib mir per Mail Bescheid. Ich mache die Kontrolle und gib Dir Bescheid. Erst dann mache mit dem Punkt 4 weiter.
Und wichtig: Immer nur Inhalte veröffentlichen, für die Du das Recht hast (also am besten eigene Fotos und Texte).
Schau Dir einige Themes an, indem Du sie installierst. Wenn Du eines hast, das Dir gefällt, richte (falls notwendig) das Menü ein, ebenso das Kategorien-Widget. Schau was Du sonst ändern kannst (z. B. Farben). Probiere einfach ein wenig herum. Bis Montag 25. 05.
WordPress – Teil 03
Stand
Das Theme TwentyTwenty ist installiert.
Unter Design / Anpassen (Customizer) / Website-Identität wurden ein Website-Titel (eigener Name) und ein Untertitel eingetragen.
Drei Beiträge mit Beitragsbildern und Inhalten wurden angelegt. Im Beitrags-Überblick schaut das so aus:
Überblicksseite der Beiträge
Im Fussbereich wurde ein Widget für die Kategorien eingefügt. Das sieht so aus:
TwentyTwenty mit Widget für Kategorien im Fußbereich
Die Seiten wurden bis auf die Startseite gelöscht. Die Inhalte der Startseite können bei den Installationen unterschiedlich sein.
Hinweis: Ich habe von mehreren KollegInnen den Hinweis bekommen, dass WordPress (Backend) mit dem veralteten Internet-Explorer Probleme macht (z. B. Einfügen von Text in einen Block). Bitte einen anderen Webbrowser verwenden (Firefox, Chrome …).
Seiten und Menüs
Neben Beiträgen kann man in WordPress Seiten verwenden. Die beiden unterscheiden sich in einigen Dingen. Beiträge werden durch Kategorien verfügbar gemacht, Seiten durch Menüs. Menüs brauchen etwas mehr Handarbeit. Häufig werden Seiten für Inhalte verwendet, die längere Zeit online bleiben, Beiträge für aktuelle Neuigkeiten, die laufend ergänzt werden (s. die Schulwebsite: die generellen Informationen über die HLW sind in Seiten, die Berichte über Aktivitäten in Beiträgen).
Die sogenannte “Homepage” (Startseite) kann in WordPress eine bestimmte Seite mit Inhalt sein (häufig eine Art Visitenkarte, mit der sich eine Firma kurz auf einer Seite vorstellt) oder zeigt automatisch die letzten Beiträge, die geschrieben worden sind (eine Mischung ist auch möglich).
Navigiere zu /Seiten und vergewissere Dich, dass Du alle Seiten bis auf die Startseite gelöscht hast. (Diese kann nicht gelöscht werden.)
Seiten gelöscht
Navigiere zu /Beiträge und vergewissere Dich, dass du alle Beiträge gelöscht hast.
Beiträge gelöscht
Navigiere zu /Design /Themes und vergewissere Dich, dass das Theme TwentyTwenty aktiv ist.
Twenty Twenty aktiv
Bereite 6 Fotos vor: Breite: ca. 1000 px, möglichst kleine Dateigröße! (Achtung: Du musst UrheberIn der Fotos sein oder sie dürfen ausdrücklich vewendet werden. Die Inhalte (Text, Fotos, …) sind nach dem Veröffentlichen eines Beitrags öffentlich und müssen daher rechtlich in Ordnung sein.)
Wechsle wieder zu /Beiträge und erstelle einen neuen Beitrag (drei Buttons zur Auswahl!). Gib ihm den Titel Obstbau. Speichere und veröffentliche den Beitrag durch zweimaliges Klicken des Buttons Veröffentlichen rechts oben.
Beitrag erstellen
Der Inhalt eines Beitrags besteht aus einzelnen Blöcken. Es gibt Blöcke für Überschriften (1-6), für Absatztext, für ein Bild, für eine Bildergalerie, für Listen, Zitate, Tabellen u. v. m. Wenn man das kleine + anklickt, geht eine Liste aller möglichen Blöcke auf, geordnet nach Gruppen. Wann immer man die Eingabetaste betätigt, wird ein neuer Block der Art Absatz angelegt.
Rechts befinden sich Einstellmöglichkeiten, getrennt für das Dokument (= der Beitrag) und für einen einzelnen Block. Für das Dokument sind die Kategorien besonders wichtig, da damit Beiträge geordnet werden und so leichter gefunden werden. Die Website eines Gartenfreundes könnte z. B. die Kategorien “Blumen”, “Gemüse”, “Sträucher” usw. verwenden, um die Beiträge einzuteilen.
Anlegen von Kategorien: Klicke rechts auf Kategorien (Du siehst, dass bereits eine Kategorie “Allgemein” angelegt ist). Wähle Neue Kategorie erstellen und trage unter Neuer Kategorienname Gartenbau ein und bestätige mit Neue Kategorie erstellen. Weise dem Beitrag Gartenbau die Kategorie Gartenbau durch Setzen des Hakens zu, die Kategorie Allgemein wähle ab.
Lege auf die gleiche Weise die Kategorie Obst an, stelle aber als Übergeordnete Kategorie Gartenbau ein. Mache es gleich mit der Kategorie Sträucher.
Hierarchische Kategorien
Die Kategorien sind jetzt hierarchisch geordnet. Das ist wichtig, wenn es sehr viele Beiträge gibt, und die Liste der Kategorien noch weiter ginge: Forstwirtschaft mit den Unterkategorien Mischwald, Nadelwald, Laubwald usw. Für diese Übung sind hierarchische Kategorien nicht notwendig.
Unter Beitragsbild kann einem Beitrag ein Bild zugewiesen werden. Wo es angezeigt wird, hängt vom Theme ab (häufig über dem Titel).
Im Folgenden werden drei Beiträge erstellt, ihnen Kategorien zugeordnet und Inhalte eingefügt. Lade Dir dazu inhalt.txt herunter.
Melde Dich in Deinem WP-Konto an und wechsle mit dem Button Meine Website links oben in Dein Backend.
Linker Bereich des Backends mit dem Menü
Da wir die nächsten Schritte in WP gemeinsam zwecks kennenlernen gehen werden, ist es gut, das gleiche Theme installiert zu haben.
Themes sichten, auswählen und installieren: Das Theme “TwentyTwenty” wird installiert.
Das Theme TwentyTwenty installieren
Ein erster Überblick über die Site: Kopfbereich mit Website-Titel, Navigation und Suchfunktion; Inhalte der Startseite, Fussbereich.
WordPress – ein erster Überblick
Site-Titel ändern: Wechsle wieder zum Backend mit der Navigation links, indem Du links oben auf das “W” klickst. Wähle Design / Anpassen und der Customizer wird geladen. Das ist das Programm, um Änderungen am Layout vorzunehmen. Welche Änderungen auf diese Weise gemacht werden können, hängt vom jeweiligen Theme ab. Gehe zu Website-Identität und trage bei Titel Deinen Namen ein, bei Untertitel “Angewandtes Informationsmanagment”. Anschließend gehe auf “Änderungen speichern” (oben). Verlasse mit dem X links oben den Customizer.
Inhalte löschen: Gehe im Menü zu Seiten und lösche alle Seiten ausgenommen die Startseite über das Dreipunkt-Menü (Papierkorb). Lösche ebenso die drei Beiträge.
WordPress – Erste Schritte
Nachdem Du Dein Konto eingerichtet hast und die erste Website automatisch angelegt ist, bist Du im Backend.
Das Backend von WordPress
➜ Links oben siehst Du die Adresse für Deine Website, hier ai1920.wordpress.com
➜ Darunter das Menü
➜ Mitte und rechts: verschiedene Hinweise, wenn Seiten oder Beiträge bearbeitet werden, deren Inhalt.
➜ Deine Website ist noch nicht veröffentlicht (s. Hinweis bei der Checkliste in der Mitte). Sie kann somit von keiner Suchmaschine gefunden werden, nur wer angemeldet ist, also Du, kann sie sehen.
Rufe Deine Website auf, indem Du Deine Adresse im Webbrowser eingibst. Sofern Du noch angemeldet bist, siehtst Du Deine Website.
Wechsle wieder zum Backend (Tipp: halte Backend und Frontend zugleich offen). Veröffentliche Deine Website. Du wirst wieder auf bessere Adressen hingewiesen, die aber nicht gratis sind. Wähle daher Kauf überspringen. Auf der folgenden Seite: Weiter mit deiner kostenlosen Website Jetzt ist sie veröffentlicht, jeder/jede, der/die die Adresse kennt, kann sie sehen, oder mit einer Suchmaschine finden.
Profil vervollständigen: Wähle rechts oben das Profilsymbol.
Trage auf der folgenden Seite Deinen richtigen Namen ein, den öffentlich angezeigten Namen (sollte auch richtiger Name sein) und füge ein Profilbild von Dir hinzu. Vergiß nicht zu speichern.
Wähle links Datenschutz. Wenn Du willst kannst Du “Teile Informationen …” deaktivieren.
Wähle jetzt links Benachrichtigungen. Hier kannst Du einstellen, wann Du Benachrichtigungen bekommen möchtest. Unter der Glocke: Benachrichtigungen im System, also wenn Du in WordPress angemeldet bist Email: per Email eben
Melde Dich jetzt links ziemlich oben von WordPress ab.
Melde Dich wieder an: gehe auf die Seite de.wordpress.com und wähle rechts oben Anmelden
Jetzt bist Du im Reader (ein einfaches Netzwerk). Hier kannst Du andere WP-Sites abonnieren und sieht neue Beiträge dieser.
Wähle links ganz oben Meine Website und Du bist in Deinem nun schon etwas vertrauterem Backend.
Sende mir per Email die Adresse Deiner Website. (Das dient als Kontrolle Deiner Arbeit.)
Frontend von einer WordPress-Seite
➜ Deine Seite kann ev. anders aussehen, weil bei der Installation automatisch ein anderes Theme gewählt worden ist.
➜ Es handelt sich um eine Startseite (entspricht einer index.html, Homepage) mit Titel, Menü, Kopfbild mit Text und den 3 neuesten Beiträgen.
Websites mit WordPress
Vorbemerkungen zum Verständnis
WordPress war ursprünglich eine Blogsoftware, die auf einem Webserver installiert ist und über einen Webbrowser bedient wird. Inzwischen ist WordPress so weiterentwickelt und um Funktionen ergänzt worden, dass Websites für jeden Zweck erstellt werden können, denen man den Tagebuchcharakter nicht ansieht.
Bei WordPress werden im sogenannten Backend die Inhalte erstellt. Um ins Backend zu gelangen, muss man sich anmelden.
Das Frontend ist die Seite, wie sie die BesucherInnen sehen.
Das Backend kann man sich als Formular vorstellen, das man ausfüllt (also mit vorgegebenen Feldern).
Das Layout (Groblayout, Feinlayout) der Seiten wird durch das Theme bestimmt. Ein Theme kann man mit wenigen Mausklicks installieren; es gibt tausende davon, viele sind gratis. Ein Theme kann ohne Programmierkenntnisse ein wenig angepasst werden.
Die Seiten werden nicht als einzelne fertige Seiten gespeichert (index.html …), sonder die Inhalte sind in einer Datenbank. Beim Aufruf einer Seite werden die dazugehörigen Daten aus der Datenbank gelesen und gesteuert durch das Theme am Bildschirm dargestellt. Man nennt die Seiten daher dynamisch (im Gegensatz zu fertig abgespeicherten statischen Seiten).
Widgets sind hinzufügbare Bereiche auf einer Seite, die etwas anzeigen, z. B. die letzten verfassten Beiträge.
Plugins erweitern die Funktion von WordPress, z. B. um die Möglichkeit, dass BesucherInnen etwas hochladen können (wie auf dieser Site die Abgabemöglichkeit), oder indem sie eine Verbindung zu sozialen Medien herstellen.
Die Software WordPress ist gratis und mehrere 100 Millionen Mal im Einsatz. Man kann sie bei vielen Webspace-Anbietern mit wenigen Mausklicks installieren (der Webspace selber ist nicht gratis). Wenn dieses Service der einfachen Installation nicht angeboten wird, braucht man etwas mehr Kenntnisse.
Die einfachste und komplett kostenlose Variante ist, WordPress auf den Servern von Automatic (der Firma, die WordPress programmiert) zu benutzen. Da gibt es dann einige Einschränkungen. Gegen Bezahlung fallen diese Einschränkungen weg.
Für Übungszwecke ist die kostenlose Variante völlig ausreichen und wird werden sie daher benutzen. Als ersten muss ein Konto auf de.wordpress.com eingerichtet werden. Mit diesem einen Konto kann man mehrere Websites anlegen und betreuen.
Eine letzte Bemerkung: Die Firma hinter WordPress ist eine seriöse Firma, man kann getrost ein Konto einrichten und WordPress benutzen.
Ein Konto auf de.wordpress.com einrichten
Die Adresse für die Einrichtung: de.wordpress.com
Was Du brauchst: – eine gültige Email-Adresse – einen Benutzernamen (vergibst Du selber) – ein Passwort (vergibst Du selber) – eine Subdomain (vergibst Du selber): mein Beispiel im Video unten: ai1920.wordpress.com Die Domain wordpress.com ist vorgegeben (und im Besitz von WordPress). Die vorangestellte Subdomain ai1920 habe ich selber ausgewählt (geht aber nur, wenn sie sonst noch niemand benutzt). – Die Möglichkeit, Emails zu lesen.
Anleitungsvideo mit meinem Konto
Ü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)
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” Site / Neue Site / …
Erstelle die Seite index.html und das Stylesheet style.css erstellen Datei Neu Typ HTML, Datei neu Typ CSS, jeweils gleich speichern
Füge das Stylesheet an die Seite index.html anfügen
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
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
Füge box2 ein: stelle den Auszeiger vorher unbedingt rechts ausserhalb von box1 und füge dann box2 ein: Einfügen / Layoutobjekte …
Verfahre ebenso bei box3
Das Ergebnis schaut so aus:
index.html mit drei Boxen, Abstand zwischen den Boxen
Boxen horizontal am Bildschirm zentrieren
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:
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:
Ü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
