Datensicherungskonzepte

Die Modalitäten der Datensicherung (wie, wie oft, wann … eine Sicherung durchzuführen ist) werden von verschiedenen Einflussfaktoren bestimmt.

Modalitäten:
  • Art der Datensicherung,
  • Häufigkeit und Zeitpunkt der Datensicherung,
  • Anzahl der Generationen,
  • Vorgehensweise und Speichermedium,
  • Verantwortlichkeit für die Datensicherung,
  • Aufbewahrungsort,
  • Anforderungen an das Datensicherungsarchiv,
  • Transportmodalitäten und
  • Aufbewahrungsmodalität.
Einflussfaktoren:
  • Spezifikation der Daten: welcher Art sind die Daten (Software, Anwenderdaten wie Dokumente, Kundendatenbanken, Zugangsdaten)
  • Verfügbarkeitsanforderungen: wie lange dürfen Daten maximal nicht verfügbar sein (z. B. Dateien zum Schriftverkehr max. 1 Woche, Kundendaten max. 1 Tag)
  • Rekonstruktionsaufwand der Daten ohne Datensicherung: können zerstörte und nicht gesicherte Daten rekonstruiert werden, wie hoch ist der Aufwand, wie hoch sind die Kosten? – Daten, die auch in Papierform vorliegen, können z. B. rekonstruiert werden.
  • Datenvolumen: entscheidet über die Sicherungsdatenträger
  • Änderungsvolumen: wie viele Daten ändern sich z. B. pro Tag, vieviele kommen neu dazu? – Das bestimmt die Häufigkeit der Datensicherung und das Sicherungsverfahren (inkrementell, differentiell).
  • Änderungszeitpunkt der Daten: Ändern sich zu einem bestimmten Zeitpunkt regelmäßig Daten (z. B. Monatsende), sollte danach eine Datensicherung erfolgen.
  • Fristen: Müssen Daten eine bestimmte Zeit aufbewahrt werden (Aufbewahrungsfristen) oder müssen Daten zu einer bestimmten Frist gelöscht werden (Löschfristen)?
  • Vertraulichkeitsbedarf von Daten: Bei der Sicherung von Daten mit einer bestimmten Vertraulichkeitsanforderung muß diese Anforderung auch am Sicherungsmedium erfüllt sein.
  • Integritätsbedarf: Die gesicherten Daten dürfen am Sicherungsmedium nicht verändert werden können. Bei Software ist dieser Bedarf z. B. hoch, bei Daten des Schriftverkehrs mittel.
  • Fähigkeiten der IT-Benutzer: Diese entscheiden darüber, wer Datensicherungen durchführt (z. B. IT-AdministratorInnen oder einzelne BenutzerInnen).

Es sind zwei Dinge zu unterscheiden: Synchronisierung und Datensicherung. Die Synchronisierung ist keine Datensicherung, da sie nicht vor Gefährdungen schützt.

Synchronisierung/Datenspiegelung

Bei der Datenspiegelung werden die Daten redundant und zeitgleich auf einem oder mehrern Sicherungs-Datenträgern gespeichert. Da so der Ausfall eines dieser Speicher ohne Zeitverlust überbrückt werden kann, steigert Datenspiegelung die Verfügbarkeit. Es ersetzt allerdings keine Datensicherung, da es nicht gegen Gefährdungen wie Diebstahl, Brand oder unbeabsichtigte Datenlöschung hilft.

Datensicherung

  • Volldatensicherung: bei der Volldatensicherung werden sämtliche zu sichernden Dateien zu einem bestimmten Zeitpunkt auf einen zusätzlichen Datenträger gespeichert. Es wird dabei nicht berücksichtigt, ob die Dateien sich seit der letzten Datensicherung geändert haben oder nicht. Daher benötigt eine Volldatensicherung einen hohen Speicherbedarf. Der Vorteil ist, dass die Daten vollständig für den Sicherungszeitpunkt vorliegen und die Restaurierung von Dateien einfach und schnell möglich ist, da nur die betroffenen Dateien aus der letzten Volldatensicherung extrahiert werden müssen. Werden Volldatensicherungen selten durchgeführt, so kann sich durch umfangreiche nachträgliche Änderungen innerhalb einer Datei ein hoher Nacherfassungsaufwand ergeben.
  • Inkrementelle Datensicherung: bei der inkrementellen Datensicherung werden im Gegensatz zur Volldatensicherung nur die Dateien gesichert, die sich gegenüber der letzten Datensicherung (Volldatensicherung oder inkrementelle Sicherung) geändert haben. Dies spart Speicherplatz und verkürzt die erforderliche Zeit für die Datensicherung. Für die Restaurierung der Daten ergibt sich i. allg. ein höherer Zeitbedarf, da die Dateien aus Datensicherungen verschiedener Zeitpunkte extrahiert werden müssen. Die inkrementelle Datensicherung basiert immer auf einer Volldatensicherung. In periodischen Zeitabständen werden Volldatensicherungen erzeugt, in der Zeit dazwischen werden eine oder mehrere inkrementelle Datensicherungen vollzogen. Bei der Restaurierung wird die letzte Volldatensicherung als Grundlage genommen, die um die in der Zwischenzeit geänderten Dateien aus den inkrementellen Sicherungen ergänzt wird.
  • Differentielle Datensicherung: bei der differentiellen Datensicherung werden nur die Dateien gesichert, die sich gegenüber der letzten Volldatensicherung geändert haben. Eine differentielle Datensicherung benötigt mehr Speicherplatz als eine inkrementelle, Dateien lassen sich aber einfacher und schneller restaurieren. Für die Restaurierung der Daten reicht die letzte Volldatensicherung sowie die aktuellste differentielle, nicht wie bei der inkrementellen, wo unter Umständen mehrere Datensicherungen nacheinander eingelesen werden müssen.

Medien zur Datensicherung/Synchronisation

  • Externe Festplatte: im privaten Bereich und in kleinsten Firmen sinnvoll und kostengünstig; die Festplatte wird nur zur Datensicherung an den Computer angeschlossen, damit sie vor Schädlingsprogrammen möglichst sicher ist.
  • Cloud-Speicher: Man braucht sich nicht um die Hardware zu kümmern, gibt allerdings seine Daten im fremde Hände und hat nicht unter Kontrolle, wie sicher die Daten vor unbefugtem Zugriff sind. In der EU sind die Datenschutzbestimmungen viel strenger als in den USA.
  • NAS (Network Attached Storage, Netzwerk-Festplatte)
  • Sicherungsserver



Adobe Dreamweaver

Adobe Dreamweaver Codeansicht
Adobe Dreamweaver in der Codeansicht

Links oben gibt es Schaltflächen für Code, Teilen, Entwurf und Live-Ansicht. Für Standardaktionen ist es nicht notwendig, Code selber zu schreiben. Im Eigenschaftsfenster unten können z. B. die Schriftformate Absatz (p) und die Überschriften (h1, h2, h3, h4, h5, h6) unter Format eingestellt werden.

Dateienfenster

Rechts unten ist das Dateienfenster angedockt. Wenn die Sitedefinition (Site / Neue Site / Site-Namen vergeben, Site-Ordner einstellen) gemacht wurde, werden im Dateienfenster nur die zur Website gehörenden Dateien (HTML, CSS, Fotos) angezeigt. Die Dateien sollen auch hier durch Doppelklick geöffnet werden. Muss eine Datei gelöscht oder umbenannt werden, soll das auch hier gemacht werden. DW kann dann Links, die zu einer umbenannten Datei führen, automatisch korrigieren.




HTML-Elemente (Tags)

HTML-Elemente zur Text-Strukturierung: Näheres siehe auf http://de.selfhtml.org/html/text/index.htm

Normalerweise braucht nicht in der Code-Ansicht von Dreamweaver gearbeitet werden und man braucht die TAGs nicht selber schreiben. Die Überschriften (h1, h2, h3, h4, h5, h6) und der Absatz (p) werden z. B. im Eigenschaftsfenster unten unter Formate zugewiesen.

  • <h> (h1 – h6)
    Überschriften auf 6 Ebenen
    Jede Überschrift ist eine eigener Absatz, es braucht daher davor und danach kein eigener Absatz eingefügt werden.
  • <p>
    Textabsatz
    Ein Absatz ist ein Textabschnitt, der einen Abstand davor und danach hat.
  • <br>
    erzwungener Zeilenumbruch
    Ein bloßer Zeilenumbruch erzeugt keinen Abstand wie ein Absatz.
  • <em>
    zeichnet einen Text als betont aus
  • <strong>
    zeichnet einen Text als stark betont aus
  • <b>
    zeichnet einen Text als fett aus
  • <i>
    zeichnet einen Text als kursiv aus
  • <u>
    zeichnet einen Text als unterstrichen aus
  • <sup>
    zeichnet einen Text als hochgestellt aus
  • <sub>
    zeichnet einen Text als tiefergestellt aus
  • <div>
    damit wird ein Block (Box) erzeugt

Eine umfassende Liste aller HTML-Tags findest Du auf https://wiki.selfhtml.org/wiki/Referenz:HTML




Zusammenspiel von HTML und CSS

HTML

  • HTML bedeutet Hypertext Markup Language. Es handelt sich dabei um die im World Wide Web verwendete Seitenbeschreibungssprache.
  • HTML-Dokumente enthalten den Inhalt der Seiten.
  • HTML-Dokumente sind reine Textfiles (plain-text) und können daher mit jedem beliebigen Texteditor (z. B. der Editor von Windows) erzeugt werden.
  • Mit HTML kann der Inhalt strukturiert werden, z. B. durch Überschriften unterschiedlicher Ordnung (1-6), Aufzählungen …
  • Zum Betrachten der HTML-Seiten wird ein sogenannter Browser (=Client), wie z. B. MS Internetexplorer, Firefox, Maxthon benötigt.
  • Die HTML-Seite muss aber zuvor entweder von einem WWW-Server bereitgestellt werden (z.B. https://unterricht.leo-ertl.space) oder lokal auf einer Festplatte vorliegen (z. B. file:///E:/schule/ai/uebung01/index.html).
  • HTML-Dokumente bestehen aus einzelnen Elementen, die stets in spitzen Klammern (TAGs) <…> eingeschlossen sind und überwiegend paarweise auftreten. Die Wirkung eines Elementes erstreckt sich nur auf den Text oder die Grafik zwischen den Einzelelementen der paarweise auftretenden Elemente.
    <h1>Unsere Schule</h1>

Häufig verwendete TAGs: Hier

Ein HTML-Dokument wird grundsätzlich mit dem Kommando <HTML> begonnen und mit dem Kommando </HTML> abgeschlossen.
Im Prinzip besteht ein HTML-Dokument aus zwei Teilen. Im Header (umschlossen von <HEADER> … </HEADER>) wird das Dokument selbst beschrieben und im Body (umschlossen von <BODY> … </BODY>) sein Inhalt.
Der HEADER enthält den Titel des Dokuments, der in der Titelleiste des Webbrowsers angezeigt wird, und einige Festlegungen, z. B. zur Zeichencodierung.

Seitenaufbau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HLW Hollabrunn</title>
</head>

<body>
<h1>Die fünfjährige Höhere Lehranstalt </h1>
<p/>Die fünfjährige Lehranstalt für wirtschaftliche Berufe führt zur Matura. … </p>

<h1>Die dreijährige Fachschule</h1>
<p>Die dreijährige Form mündet in die Abschlussprüfung. … </p> 
</body>
</html>

Ergibt:

CSS (Cascading Stylesheet)

Mit HTML werden Inhalte strukturiert. Mit CSS wird der strukturierte Inhalt formatiert.

CSS ist eine Stilsprache, die das Aussehen von HTML-Dokumenten (Layout) definiert. Man kann zwei Bereiche unterscheiden:

Feinlayout: CSS kann man z. B. zum festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern, für fortgeschrittener Positionierung und viele andere Sachen benutzen. Kurz: Mit CSS wird der Inhalt einer Seite formatiert.

Groblayout: Ferner wird mit CSS das Groblayout (Anordnung der einzelnen Elemente) einer Seite festgelegt.

Grob- und Feinlayout einer Webseite

Groblayout: Boxen (kopf, navigation, inhalt, news, fuss)

Feinlayout: Titel “Die Bienen” (Myriad Pro, 58 pt, Blau), Zwischenüberschriften: Allgemein (Myriad Pro, 26 pt, Schwarz), Absatztext (Myriad Pro, 26 pt, Schwarz, normal) …

Strukturierung: durch Zwischenüberschriften (in HTML)

CSS war eine Revolution im Webdesign. Es brachte viele Vorteile:

  • Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus; das Layout und die Formate werden in die Style-Sheet-Datei geschrieben; die einzelnen HTML-Seiten bekommen einen Verweis auf die Style-Sheet-Datei (<link rel=”stylesheet” type=”text/css” href=”style/style.css” />)
  • präzisere Kontrolle über das Layout;
  • verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige, Druck, Smartphone, IPad etc.);
  • eine Vielzahl von fortgeschrittenen und anspruchsvolle Techniken.
Prinzip CSS
Prinzip CSS

Die Syntax von CSS ist immer die gleiche (hier: die Schriftfarbe für Überschrift 1 wird auf rot eingestellt):

Syntax CSS
Syntax

Selektor {Eigenschaft: Wert;}

h1 {
   color: #FF0000;}



Beschneiden und Freistellen mit Photoshop – Auswahl- und Freisellwerkzeug

Beschneiden mit dem Auswahlrechteck

Es gibt drei Arten, das Auswahlrechteck zu verwenden

  • Normal: ein Bereich des Bildes kann ohne Einschränkungen ausgewählt werden
  • Festes Seitenverhältnis: z. B. 3 : 2
  • Feste Größe: z. B. 800 x 600 px, nur der Bereich, der gewünscht wird, kann ausgewählt werden
Vorgehensweise
  • Gewünschte Art des Auswahlrechteck-Werkzeugs festlegen
  • Mit gehaltener linker Maustaste Rahmen aufziehen und so den Bereich festlegen, der ausgewählt werden soll
  • Auswahlrahmen ev. verschieben oder Auswahl ganz aufheben (Strg + D, oder neben den Rahmen Klicken) und neu aufziehen
  • Menü: Bild/Freistellen
Beispiele
  • beliebigen Ausschnitt auswählen, Freistellen
  • Ausschnitt mit 6 : 4 freistellen
  • Ausschnitt 400 X 300 px freistellen

Die Bildgröße wird bei allen drei Beispielen (und immer) verringert (Pixelmaße), die Auflösung (ppi) bleibt unangetastet.

Direktor

Mit dem Auswahlrechteck kann dem Bild eine weiche Kante gegeben werden

Vorgangsweise
  • Rahmen wie gewünscht aufziehen
  • In der Einstellungsleiste zum Rechteckauswahl-Werkzeug weiche Kante auf gewünschte Stärke eintragen, z. B. 12 px
  • Menü: Bild/Freistellen
  • Menü: Auswahl/Auswahl umkehren
  • Im Ebenenfenster: Doppelklick auf Hintergrund (dadurch wird derHintergrund wird in eine Ebene umgewandelt)
    (Sollte das Ebenen-Fenster geschlossen sein: Menü: Fenster/Ebenen)
  • Entfernen-Taste
Weiche Kante

Ein rundes Bild

Ein Bild ist immer rechteckig oder quadratisch. Um dennoch quasi ein rundes oder ovales Bild zu erhalten, wird es mit der Auswahlellipse beschnitten:

Vorgangsweise
  • In der Werkzeugleiste durch Gedrückthalten der linken Maustaste auf das Auswahlrechteck-Werkzeug das Auswahlellipsen-Werkzeug auswählen
  • die Art (Normal, festes Seitenverhältnis, feste Größe) auswählen
    Normal: für Ellipse, mit gehaltener Umschalt-Taste für Kreis
    festes Seitenverhältnis: 1 : 1 ergibt auch einen Kreis, 2 : 1 eine Ellipse
    feste Größe: erlaubt wieder Kreis und Ellipse
  • Rahmen aufziehen
  • Hintergrund in eine Ebene umwandeln
  • Auswahl umkehren
  • Entfernen-Taste
Elliptisches Bild

Die karierte Fläche, die auch schon beim Bild mit dem weichen Rand zu sehen war, zeigt transparente (durchsichtige) Bildbereiche an. Diese Bereiche sind zwar nicht sichtbar, gehören aber weiterhin zum Bild, sodass es rechteckig bleibt.

Freistellen mit dem Freistellungswerkzeug

Mit dem Freistellungswerkzeug können in einem Schritt

  • die Auswahl eines Bildbereiches
  • die Auflösung
  • die Bildgröße

geändert werden. Es ist daher meist das bessere Werkzeug.

Vorgehensweise
  • Freistellungswerkzeug aktivieren
  • Breite, Höhe und ev. Auflösung festlegen (bei Bildern für das Web braucht die Auflösung nicht eingestellt zu werden, da der Monitor das Bild immer in seiner Auflösung darstellt)
  • Rahmen wie gewünscht aufziehen
  • mit Eingabetaste/Doppelklick Bild beschneiden
Beispiel:
  • Bildbreite: 333 px, Höhe: 500 px
Freistellen falsch

Achtung!
Es muss darauf geachtet werden, dass der Bildausschnitt, der gewählt wird, nicht vergrößert wird (Bildqualität).




Das digitale Bild 1

Pixelbilder

Blume

In der EDV werden Pixelbilder und Vektorgrafiken verwendet. Pixelbilder sind digitalisierte Bilder, die von einer auswärtigen Quelle in den Computer übertragen werden. Vektorgrafiken werden im Computer selbst erzeugt.

Pixel sind die kleinste Einheit eines Bildes. Das Wort Pixel setzt sich aus “Picture” und “element” zusammen. Die unterschiedlich gefärbten Pixel erzeugen die Objekte eines Bildes. Die einzelnen Pixel sind so klein und eng zusammen, dass das menschliche Auge die einzelnen Pixel und das Aliasing nicht erkennen kann (Aliasing: der Treppeneffekt, der bei der Aneinanderreihung von Pixeln entsteht).

Das einzelne Pixel enthält die benötigten Informationen bezüglich seiner Farbe und Position innerhalb des Bildes. Jedes Pixel beansprucht einen bestimmten Speicherplatz, der von der Anzahl der möglichen Farben eines Bildes abhängt. Ein Pixel in einem Schwarz-Weiß-Bild benötigt nur ein Bit Speicher, während ein Pixel in einem Graustufen-Bild mit 256 Grautönen bereits 8 Bit benötigt.

Speicherbedarf:

Größe des Bildes 1600×1200 Pixel  
Farbtiefe 24 Bit  
Speicherbedarf 1200x1600x24 = 4608000 Bit (= 5,5 MB)

Die quadratischen Pixel sind befinden sich in einem rechteckigen Gitternetz (Bitmap, Raster). Jedes Pixel hat eine bestimmte Stelle im Raster und einen bestimmten Farbwert.

pixelraster

Bildgröße (Pixelmaß)

bildgroesse

Pixelbilder bestehen aus einer großen Anzahl einzelner Bildpunkte (Pixel). Das Pixelmaß eines Bildes gibt an, wieviele Pixel in einer Zeile und wieviele Pixel in einer Spalte vorhanden sind.

Ein Bild ist z. B. 800 Pixel (px) breit und 600 px hoch.

Pixelanzahl einer Zeile mal Pixelanzahl einer Spalte ergibt die Gesamtanzahl der Pixel eines Bildes.
800 px mal 600 px = 480.000 px

Dokumentgröße

Die Dokumentgröße gibt die Größe in Zentimetern (Millimetern, …) eines Bildes bei einer bestimmten Auflösung an. Sie entspricht der Druckgröße.

Auflösung

rasterbild_schema

Die Auflösung gibt an, wieviele Pixel per inch (ppi) vorhanden sind. Bei einer Auflösung von 150 ppi sind auf einem inch 150 px waagrecht und 150 px senkrecht dargestellt. Auf einem Quadratinch sind es somit 22.500 px:
150 px mal 150 px
Je höher die Auflösung eines Bildes ist, umso genauer und detailreicher wird das Original wiedergegeben.

Typische Verwendungsszenarien für Fotos:
Verwendung Größe Auflösung Geeignete Speicherformate
Professioneller Druck in Zentimetern, z. B. 15 x 18 cm 300 ppi TIF
Internet, Bildschirm in Pixeln, z. B. 800 x 600 px (72 ppi; braucht nicht eingestellt zu werden, da ein Monitor immer seine Auflösung verwendet, s. u.) JPG, PNG, GIF
Home-Drucker (Tintenstrahl-, Laserdrucker)  in Zentimetern, z. B. 17 x 13 cm 150 ppi oder 200 ppi TIF, JPG, GIF

Das Monitor-/Fernsehbild

Auch das Bild am Monitor setzt sich aus einzelnen Pixeln zusammen. Die Auflösung und die Pixelmaße sind aber durch die Hardware fix vorgegeben.

Typische Monitore/Fernseher/Smartphones
  Pixelmaße Auflösung (hängt von der Größe des Gerätes ab, angegeben wird die Bilddiagonale in Zoll)
Älterer Monitor 1256 x 1024 px  bei 15,6 Zoll Diagonale 95 ppi
HD Monitor/HD Fernseher 1920 x 1080 px bei 15,6 Zoll Diagonale 141 ppi Pixeldichte
bei 24 Zoll Diagonale 91 ppi Pixeldichte
4K (neueste Fernseher) 3840 x 2160 px  
Älteres/billigeres Smartphone 360 x 640 px  
Mittleres Smartphone  800 x 480 px  
Hochauflösendes Smartphone (z. B. Samsung Note 4) 2560 x 1440 bei 5,7 Zoll Diagonale 518 ppi Pixeldichte
Hochauflösendes Smartphone (z. B. Samsung Note 9) 2960 x 1440 bei 6,4 Zoll Diagonale 514 ppi Pixeldichte

Zum Pixeldichte-Rechner




Lehrplan mit Lehrstoff und Kompetenzen

4. Jahrgang: 7. und 8. Semester (Kompetenzmodul 7 und 8)

Bereich Inhalte Kompetenzen Bemerkungen
Desktop-Publishing

 

 

  einfache Publikationen mit druckfähigen Grafiken erstellen;

 

Texte durch visuelle Maßnahmen verstärken;

können umfangreiche mehrseitige Publikationen mit Grafiken für den professionellen Druck erstellen;

 
Online Publishing-Publishing

 

 

  können die Grundstruktur einer Webseite erklären;

 

können Grundfunktionen von HTML und CSS anwenden;

kennen Usability-Richtlinien für Online-Auftritte;

können in einem Content Management-System redaktionell arbeiten;

kennen unterschiedliche Soziale Netzwerke und deren Einsatzbereiche;

wissen um die Notwendigkeit der regelmäßigen Betreuung eines betrieblichen Online-Auftritts Bescheid;

kennen die wirtschaftliche und gesellschaftliche Bedeutung von Sozialen Netzwerken;

 

 
Ausgegliederte IT-Infrastruktur (z. B. Cloud Computing)

 

 

  kennen unterschiedliche Anbieter von Cloud-Services;

 

kennen Möglichkeiten einer ausgegliederten IT-Infrasturktur /z. B. Cloud-Dienste) und deren Nutzen und Risiken;

 
Informationsethik

 

 

  können neue It-Technologien und deren Folgen im gesellschaftlichen Zusammenhang kritisch hinterfragen;

 

sind sich der gesellschaftlichen und sozialen Auswirkungen von neuen Medien bewusst;

 
Datenschutz und Datensicherheit

 

 

  können die datenschutzrechtlichen Bestimmungen anwenden;

 

kennen unterschiedliche Datensicherungskonzepte für den betrieblichen Bereich;

 
E-Government, Digitale Signatur, Verschlüsselung

 

 

  kennen die Methoden der Verschlüsselung;

 

sind sich der Notwendigkeit des Einsatzes von Verschlüsselung bewusst;

können Online-Services des öffentlichen Bereiches mit Bürgerkartenfunktion nutzen;

kennen die Bedeutung der digitalen Signatur einschließlich der gesetzlichen Basis;

 
Neue Medien und Technologien

 

 

  kennen die aktuellen IT-Technologien und entsprechende Anwendungsszenarien;  
       



Leistungsvereinbarung

Im Fach Angewandte Informatik werden folgende Leistungen gefordert: Grin

  • Die Teilnahme am Unterricht hat regelmäßig zu erfolgen.
  • Die nötigen Arbeitsmaterialien und Unterlagen sind in den Unterricht mitzubringen (Buch, Heft/Mappe, Schreibzeug, ev. USB-Stick).
  • Die Mitarbeit im Unterricht hat ständig zu erfolgen. Sie besteht aus folgenden Komponenten:
    im aufmerksamen Verfolgen des Unterrichts
    im Mitmachen der Übungen
    im „Experimentieren“ bei Übungen (eigenständiges Ausprobieren weiterer Möglichkeiten der verwendeten Programme)
    in der Führung einer Mitschrift
    in der eigenständigen Durchführung von Übungen
    in der Teilnahme an Maßnahmen zur Sicherung des Unterrichtsertrages (Stundenwiederholung, schriftliche Wiederholung)
    im Erlernen theoretischer Inhalte
    in der Teilnahme an Schularbeitenim
  • Nachholen versäumter Unterrichtsstunden (Übungen …) vor der nächsten Stunde

Ausdrücklich verboten sind: Sad

  • das Surfen im Web (außer zu Unterrichtszwecken)
  • die Verwendung anderer Internetdienste (Chat, SMS, SN etc.)



Selektorenarten

Syntax von Selektoren || (1) Universal-Selektoren || (2) Typ-Selektoren || (3) Class-Selektoren (Klassen) || (4) ID-Selektoren

Syntax (Schreibweise)

Selektoren stellen die Verbindung zwischen den zentralen Formaten im Head-Bereich oder der externen Datei und den Elementen innerhalb der Seite dar, die formatiert werden sollen. Der Aufbau ist immer gleich: Selektor, geschweifte Klammer auf, Eigenschaft, Wert, geschweifte Klammer zu:

Selektor {Eigenschaft:Wert;}

Selektor{
   Eigenschaft1: Wert;
   Eigenschaft2: Wert;

   ...

}

1. Universal-Selektoren

Universal-Selektoren verknüpfen jedes vorhandene Element mit Stylesheetangaben. Wird z. B. die Schrift durch einen Universal-Selektor auf 18 px festgelegt, so ist die Schrift jedes Elementes mit 18 px formatiert.

* {
   font-size:14px;
   color:#ff0000;
}

2. Typ-Selektoren

Typ-Selektoren verknüpfen einen Elementtyp, also ein HTML-Tag mit einer Formatierung.

h1 {
   font-size:14px;
   font-style:italic;
}

p {
   color:#ff0000;
}

3. Class-Selektoren (Klassen)

Klassen sind Selektoren mit beliebigen Namen.

h1.gerahmt {
   border:1px solid #aaaaaa;
}

In diesem Beispiel wir zunächst H1 definiert; dann wird die Klasse h1.gerahmt festgelegt (Rahmen). Wird Sie angewandt, bekommt H1 zusätzlich einen Rahmen: Diese Klasse funktioniert nur in einem H1-Tag.

.gerahmt {
   border:1px solid #aaaaaa;
}

.einfachertext {
   font-size:14px;
}

Diese zwei Klassen in jedem Tag, weil vor dem Punkt (.) kein Tag angegeben ist.

4. ID-Selektoren

ID-Selektoren verknüpfen Elemente über das ID-Attribut mit einer Formatierung. ID-Selektoren beginnen mit einer # (Raute).

div#kopfbereich {
   position:absolute;
   top:100px; left:100px;
   width:120px; height:80px;
   background-color:#000;
}

div#inhaltsbereich {
   position:absolute;
   top:150px; left:300px;
   width:120px; height:80px;
   border: 6px red solid;
}

Damit werden zwei Bereiche (Boxen) erzeugt, die mit Inhalten gefüllt werden können. Ihre Eigenschaften sind:

  • position (die Art wie ihre Position am Bildschirm festgelegt wird)
  • top (Abstand vom oberen Bildschirmrand)
  • left (Abstand vom linken Bildschirmrand)
  • width (Breite der Box)
  • height (Höhe der Box)
  • background-color (Hintergrundfarbe)
  • border (Rahmen um die Box)



Eine Website programmieren – Schritte

Vorgaben || Layout programmieren (CSS) || Erste Seite anlegen || Fotos vorbereiten || Kopfbild einfügen und Seite vervielfältigen || Seiten verlinken || Die Inhalte der Seiten einfügen || Hyperlinks formatieren || Fotos in die Inhaltsboxen einfügen || Fotos per Klasse ausrichten || Schriftformatierungen

Vorgaben

Website programmieren

Ziel

Ziel ist, eine Website mit drei einzelnen Seiten nach obigem Muster zu programmieren. Die einzelnen Seiten und ihre Inhalte:

Seite Fotos Text
index.html (Homepage) kopf.jpg affen.jpg AffenDie Größe der Affen schwankt zwischen dem Zwergseidenäffchen, das rund 100 Gramm erreicht, und den Gorillas, die stehend bis zu 1,75 Meter hoch werden und ein Gewicht von 200 Kilogramm erreichen können, und den Menschen mit einer Körpergröße von durchschnittlich 1,60 bis 1,80 und maximal etwa 2,00 Metern. Einige Arten haben einen ausgeprägten Geschlechtsdimorphismus, wobei die Männchen mancher Arten doppelt so schwer wie die Weibchen sein können und sich auch in der Fellfarbe unterscheiden können. Ihr Körper ist meist mit Fell bedeckt, dessen Färbung von schwarz über verschiedene Braun- und Grautöne bis zu weiß variieren kann. Die Handflächen und Fußsohlen sind meistens unbehaart, manchmal auch das Gesicht. Die Augen sind groß und nach vorn gerichtet, womit ein guter Gesichtssinn einhergeht. Als Trockennasenprimaten ist ihr Geruchssinn hingegen unterentwickelt.
gorillas.html kopf.jpg gorillas.jpg GorillasDie Gorillas (Gorilla) sind eine Primatengattung aus der Familie der Menschenaffen (Hominidae). Sie sind die größten lebenden Primaten und die ausgeprägtesten Blätterfresser unter den Menschenaffen. Sie sind durch ihr schwarzgraues Fell und den stämmigen Körperbau charakterisiert und leben in den mittleren Teilen Afrikas. Wurden früher alle Tiere zu einer Art zusammengefasst, so unterscheiden jüngere Systematiken zwei Arten mit jeweils zwei Unterarten: den Westlichen Gorilla (G. gorilla), der in den Westlichen Flachlandgorilla (G. g. gorilla) und den Cross-River-Gorilla (G. g. diehli) aufgeteilt wird, und den Östlichen Gorilla (G. beringei), bei dem zwischen dem Östlichen Flachlandgorilla (G. b. graueri) und dem Berggorilla (G. b. beringei) unterschieden wird.
paviane.html kopf.jpg paviane.jpg PavianeDie Paviane (Papio) sind eine Primatengattung aus der Familie der Meerkatzenverwandten (Cercopithecidae). Der Name Pavian taucht im deutschen Sprachraum im 15. Jh. zunächst als bavian auf und ist dem niederländischen baviaan entlehnt. Er leitet sich wohl vom altfranzösischen babine ab, was Lippe oder Lefze bedeutet und auf die vorspringende Schnauze der Tiere anspielt; andere Quellen sehen seinen Ursprung im französischen babouin für Dummkopf oder kleines groteskes Tier.[1] Über die Zahl der Arten herrscht Uneinigkeit; einige Autoren fassen alle Tiere in einer einzigen Art zusammen, während sie von anderen in sechs eigenständige Arten eingeteilt werden.

Fotodownload

 

Das Layout programmieren (CSS)

Layout

  • Den Stammordner für die Website anlegen: affen
  • Im Ordner affen den Unterordner fotos anlegen
  • Auf gleicher Ebene wie affen einen Ordner für Materialien anlegen: affen_materialien (für unvorbereitete Fotos, Texte)
  • In Dreamweaver eine Site definieren: Site / Neue Site / Site-Name: Affen / Lokaler Site-Ordner: den Ordner affen auswählen
  • Neue Datei vom Seitentyp CSS anlegen und als style.css speichern
  • Die 3 Boxen kopf, navigation und inhalt definieren
@charset "utf-8";
/* CSS Document */

/* Boxen */

div#kopf{
	position:relative;
	width:800px; height:300px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
}

div#navigation{
	position:relative;
	width:796px; height:26px;
	border:2px #F90 solid;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
}

div#inhalt{
	position:relative;
	width:796px; height:600px;
	border:2px #F90 solid;
	background-color:#FFC;
	margin-left:auto;
	margin-right:auto;
}
  • Zeile 4: ist ein Kommentar (kann genützt werden, um Überschriften oder Bemerkungen einzufügen)
  • Zeile 6: erzeugt die Box
  • Zeile 7: Positionierungsart (gibt an, wie man die Position der einzelnen Boxen am Bildschirm festlegt); relative (die Boxen werden der Reihe nach eingefügt, von oben nach unten; die genauere Positon wird mit margin-left, margin-right, margin-top, margin-bottom, float usw. bestimmt)
  • Zeile 9: bewirkt, dass die Box navigation von kopf um 10 px abrückt
  • Zeilen 10 und 11: zentriert die Box horizontal am Bildschirm
  • Zeile 16: Der Rahmen von 2 px vergrößert die Box auf 804 x 34 px; damit sie die endgültige Größe von 800 x 30 px erhält, müssen diese 4 px von der Breite und Höhe abgezogen werden (800 – 2 – 2 = 796) (30 – 2 – 2 = 26) Vgl. auch https://unterricht.ertl.today/layout-mit-dem-boxmodell/

Erste Seite (HTML) anlegen

  • In Dreamweaver eine neue Seite vom Typ HTML anlegen und als index.html speichern
  • Oben den Titel für diese Seite eintragen: Affenarten (wird im Webbrowser im Registerblatt oder in der Titelleiste angezeigt)
  • Im Eigenschaftsfenster rechts das Stylesheet anfügen
  • Über das Menü Einfügen / Layoutobjekte / Div-Tag / ID die Box Kopf einfügen
  • Den Mauszeiger rechts von der Kopfbox stellen
  • Die Box navigation einfügen
  • Den Mauszeiger rechts von der Box navigation stellen
  • Die Box inhalt einfügen
  • In der Box kopf den Mustertext restlos löschen
  • Speichern (Strg + S)

Die Fotos vorbereiten

Für die Box kopf: 800 x 300 px Die Auflösung des Bildes kann unverändert bleiben (spielt am Bildschirm keine Rolle). Wenn es sich, wie hier, um ein Foto handelt, wird es im JPG- oder PNG-Format im Foto-Ordner gespeichert. Die Dateigröße soll so klein wie möglich sein. Für die Box inhalt: 400 x 300 px

Kopfbild einfügen und die Seite vervielfältigen

  • Das Foto kopf.jpg aus dem Dateienfenster rechts in die Box kopf ziehen, dabei einen Alternativtext eingeben
  • Die Seite in einem Webbrowser (Internet-Explorer, Firefox, Chrome) öffen und prüfen, ob sie korrekt angezeigt wird
  • Die Seite vervielfältigen: Menü Datei / Speichern unter / gorillas.html Menü Datei /Speichern unter / paviane.html
  • Speichern

Die drei Seiten verlinken

  • In der Seite index.html den Mustertext aus der Box navigation löschen und ersetzen durch : Affen // Gorillas // Paviane
  • Das Wort Affen markieren und im Eigenschaftsfenster unten mit dem Symbol “Auf Datei zeigen” ins Dateienfenster ziehen zu5 index.html
  • Im Eigenschaftsfenster unter Ziel _self auswählen
  • Ebenso mit Gorillas und Paviane verfahren (Gorillas -> gorillas.html; Paviane -> paviane.html)
  • Speichern
  • Die gesamte Navigation kopieren (Markieren und Strg + C) und auf den zwei weiteren Seiten einfügen (Strg + V)
  • Im Webbrowser die Links testen

Die Inhalte der drei Seiten einfügen

  • Den Text für die index.html kopieren (hier von der Webseite, oben), in Dreamweaver über das Menü Bearberiten / Inhalte einfügen / Nur Text einfügen
  • Die Absätze, die beim Einfügen verloren gegangen sind, einfügen und „Affen“ als Überschrift 1 formatieren
  • Speichern
  • Bei den weiteren zwei Seiten ebenso verfahren
  • Bei gorillas.htm noch den Seitentitel „Gorillas“ eintragen, bei paviane.html „Paviane“

Hyperlinks formatieren

Hyperlinks können vier verschiedene Zustände haben, die jeweils anders formatiert werden können:

  • Ursprünglicher Link (a)
  • besuchter Link (a:visited)
  • Hover-Effekt (a:hover)
  • Aktiver Hyperlink (a:active)

Beim ursprünglichen Hyperlink (wenn eine Seite erstmals geöffnet wird) werden alle gewünschten Eigenschaften formatiert. Bei den weiteren Zuständen wird nur formatiert, was anders werden soll (typischerweise die Farbe).

/* Hyperlinks formatieren */

a{
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:16px;
	color:#900;
	margin-left:10px;
	text-decoration:none;}
	
a:visited{
	color:#9C0;}
	
a:hover{
	color:#C06;}

Fotos in die Inhalts-Boxen einfügen

Die Fotos affen.jpg, gorillas.jpg und paviane.jpg sind schon vorbereitet worden (s. o.) und liegen bereits im Fotoordner.

  • Gehe zur Seite index.html
  • Ziehe das Foto affen.jpg aus dem Dateienfenster rechts an den Beginn des Textes.
  • Trage einen passenden Alternativtext ein.
  • Verfahre ebenso auf den zwei weiteren Seiten

Fotos per Klasse ausrichten

Eine Klasse ist CSS-Code, der bei Bedarf angewandt werden kann, z. B. um ein Foto links auszurichten. Die Klassen beginnt mit einem Punkt (.), gefolgt vom frei zu wählenden Klassennamen und den Eigenschaften mit den gewünschten Werten. Das Stylesheet wird um folgenden Code erweitert:

/* Klasse zum Ausrichten von Fotos */

.bild_links{
	float:left;
	margin-right:10px;
	margin-top:4px;
	margin-bottom:6px;
}
  • Die Eigenschaft float schiebt das Fotos nach links und lässt den Text rechts vorbeifließen.
  • Die margins halten einen Abstand zwischen Foto und Text.

Die Klasse den Fotos zuweisen:

  • Jetzt muss die Klassen noch den drei Fotos zugeweisen werden.
  • Dazu wird das erste Foto (index.html) angeklickt und unten im Eigenschaftsfenster die Klasse .bild_links zugewiesen.
  • Ebenso wird auf den zwei weiteren Fotos verfahren.

Weitere Schriftformatierungen

/* Schriftformate */

h1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:32px;
	color:#009;
	margin-left:10px; margin-right:10px;}
	
p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#033;
	margin-left:10px; margin-right:10px;}
  • h1 ist die größte Überschrift (h1 bis h6 sind möglich). p ist die normale Absatztext.
  • margin-left und margin-right bewirkt, dass der Text vom Rand der Box abrückt.

Kommentare hier