Benutzer-Werkzeuge

Webseiten-Werkzeuge


fortbildungen:webdesign-lernen:ueberblick-erste-schritte

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
fortbildungen:webdesign-lernen:ueberblick-erste-schritte [14.10.2015 (13:30)] – [Pfade] retemirabilefortbildungen:webdesign-lernen:ueberblick-erste-schritte [06.08.2020 (11:28)] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 109: Zeile 109:
 ===== Bilder einfügen ===== ===== Bilder einfügen =====
  
-  * Bilder einfügen: ''<img src=%%"/pfad/zum/bild1.jpg"%%>''+  * Bilder einfügen: ''<img src="/pfad/zum/bild1.jpg">''
   * ''img'' hat immer das Attribut ''src'': Angabe, wo das Bild gespeichert ist (''src'' von //source// = Quelle)   * ''img'' hat immer das Attribut ''src'': Angabe, wo das Bild gespeichert ist (''src'' von //source// = Quelle)
   * Das ''img''-Element besteht nur aus einem einzelnen Tag, kein Schlusstag   * Das ''img''-Element besteht nur aus einem einzelnen Tag, kein Schlusstag
-  * Das Attribut ''alt'' sollte immer vorhanden sein: kurze Beschreibung des Bildinhalts +  * Das Attribut ''alt'' sollte immer vorhanden sein: Kurze Beschreibung des Bildinhalts 
-  * ''<img src=%%"/pfad/bild.jpg"%% alt=%%"Urlaub 2004, Strand"%%>''+  * ''<img src="/pfad/bild.jpg" alt="Urlaub 2004, Strand">''
  
-===== Pfade =====+===== Pfade =====
  
   * Pfade geben an, wo ein bestimmtes Material (eine Datei oder ein Bild etc.) in der Ordnerstruktur des Servers gespeichert ist.    * Pfade geben an, wo ein bestimmtes Material (eine Datei oder ein Bild etc.) in der Ordnerstruktur des Servers gespeichert ist. 
   * Das oberste Verzeichnis, die Dateien der Website liegen, heißt ''root'' (engl.: Wurzel).    * Das oberste Verzeichnis, die Dateien der Website liegen, heißt ''root'' (engl.: Wurzel). 
-  * Zwei grundsätzliche Möglichkeiten für die Gestaltung von Pfaden 
-    * **Absolute Pfade:** immer vom root-Verzeichnis aus, z.B. \\ ''<a href="<wrap em>/</wrap>material/biologie/"></a>'' 
-    * **Relative Pfade:** von der jeweils vorliegenden Datei aus, z.B. \\ ''<a href="biologie/index.html"></a>'' oder\\ ''<a href="<wrap em>..</wrap>/englisch/index.html"></a>'' 
  
 +===== Pfade II =====
 +
 +Zwei grundsätzliche Möglichkeiten für die Gestaltung von Pfaden
 +
 +  * **Absolute Pfade:** Immer vom root-Verzeichnis aus, z.B. \\ ''<a href="<wrap em>/</wrap>material/biologie/"></a>'' \\ Der erste Schrägstrich steht für das root-Verzeichnis. Alle absoluten Pfade beginnen damit. \\ \\ 
 +  * **Relative Pfade:** Von der jeweils vorliegenden Datei aus, z.B. \\ ''<a href="biologie/index.html"></a>'' oder\\ ''<a href="<wrap em>..</wrap>/englisch/index.html"></a>''\\ Die beiden Punkte bedeuten: „gehe eine Ordnerebene höher“.
  
 ===== Absolute Pfade ===== ===== Absolute Pfade =====
Zeile 146: Zeile 149:
 ===== Pfade auch ins Netz ===== ===== Pfade auch ins Netz =====
  
-  * Prinzip der Ordner auch bei Pfaden ins Netz: ''http://www.herr-kalt.de/fotos/'' verweist auf den Unterordner ''fotos'', der auf dem Rechner dieser Website liegt+  * Prinzip der Ordner auch bei Pfaden ins Netz: ''%%http://www.herr-kalt.de/fotos/%%'' verweist auf den Unterordner ''fotos'', der auf dem Rechner dieser Website liegt
   * In moderner Website-Software oft keine echten Ordner mehr, sondern „simulierte Ordner“ (virtuelle Ordner).   * In moderner Website-Software oft keine echten Ordner mehr, sondern „simulierte Ordner“ (virtuelle Ordner).
  
Zeile 160: Zeile 163:
   * Eine Web<wrap em>site</wrap> ist eine Sammlung von Webseiten, die inhaltlich und optisch zusammengehören   * Eine Web<wrap em>site</wrap> ist eine Sammlung von Webseiten, die inhaltlich und optisch zusammengehören
   * Die einzelnen Seiten haben gestalterische Elemente, die sich wiederholen, z.B. Kopfbereich //(Header)//, Fußbereich //(Footer)//, Navigation, Inhalt   * Die einzelnen Seiten haben gestalterische Elemente, die sich wiederholen, z.B. Kopfbereich //(Header)//, Fußbereich //(Footer)//, Navigation, Inhalt
 +
 +===== Digitale Abbildungen: Grafikformate =====
 +
 +  * Vektorgrafiken: Bilddarstellung durch mathematische Beschreibung der Formen und 
 +
 +  * Rastergrafiken: Bilddarstellung durch Bildpunkte (Pixel)
 +    * ''.gif'': 256 Farben, eine davon transparent möglich, verlustfreie Komprimierung → für einfache Grafiken
 +    * ''.jpg'': über 16 Mio. Farben, keine Transparenz, Komprimierung einstellbar, je höher, desto mehr Qualitätsverluste → meist für Fotos
 +    * ''.png'': Mio. Farben, verlustfreie Komprimierung, Transparenz möglich → für Grafiken/Fotos, im Einzelfall Dateigröße vergleichen
 +
 +===== Digitale Abbildungen: Rastergrafiken =====
 +**Darstellungsprinzip**
 +
 +{{:arbeitsmethoden:290px-aufloesung_erklaert.svg.png?nolink|}} {{:arbeitsmethoden:foto-bildgroesse-feine-aufloesung.jpg?nolink|}}
 +
 +===== Digitale Abbildungen: Bildgrößen =====
 +
 +**Typische Bildgrößen verschiedener Geräte und eines Fotos (Stand 2013)**
 +
 +Details: [[arbeitsmethoden:digitale-abb|]]
 +
 +{{:arbeitsmethoden:notebook-bildgroesse.jpg?nolink&300|}} {{:arbeitsmethoden:iphone-bildgroesse.jpg?nolink&200|}} {{:arbeitsmethoden:nexus-one-bildgroesse.jpg?nolink&200|}} {{:arbeitsmethoden:bildgroesse-digifoto.jpg?nolink&300|}}
 +
 +===== Digitale Abbildungen: Dateigröße =====
 +
 +|{{:arbeitsmethoden:foto-bildgroesse-grobe-aufloesung.jpg?nolink&200|}} {{:arbeitsmethoden:gaensebluemchen-pixel-grob.png?nolink&200|}}|{{:arbeitsmethoden:foto-bildgroesse-feine-aufloesung.jpg?nolink&200|}} {{:arbeitsmethoden:gaensebluemchen-pixel-fein.png?nolink&200|}}|
 +|6 x 6 = 36 Pixel|12 x 12 = 244 Pixel|
fortbildungen/webdesign-lernen/ueberblick-erste-schritte.1444822204.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki