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 [13.10.2015 (22:10)] 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+===== Pfade II =====
  
-  * Absolute Pfade: immer vom root-Verzeichnis aus, z.B. \\ ''<a href=%%"%%<wrap em>/</wrap>material/biologie/%%"%%></a>'' +Zwei grundsätzliche Möglichkeiten für die Gestaltung von Pfaden
-  * 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>''+
  
 +  * **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 136: Zeile 137:
 ===== Absolute ⟷ Relative Pfade ===== ===== Absolute ⟷ Relative Pfade =====
  
-**Absolute Pfade** +  * **Absolute Pfade** 
- +    * ➕ sind überschaubarer 
-  * ➕ sind überschaubarer +    * ➕ erzeugen saubere URLs (Webadressen) 
-  * ➕ erzeugen saubere URLs (Webadressen) +    * ➕ lassen sich einheitlicher verwenden 
-  * ➕ lassen sich einheitlicher verwenden +    * ➖ brauchen für das lokale Arbeiten eine Serversoftware 
-  * ➖ brauchen für das lokale Arbeiten eine Serversoftware +  **Relative Pfade** 
- +    * ➕ lassen sich ohne Serversoftware lokal testen 
-**Relative Pfade** +    * ➖ sind schwieriger in Handhabung und v.a. Pflege (Veränderungen in der Sitestruktur) 
- +    * ➖ sehen für jede Datei anders aus
-  * ➕ lassen sich ohne Serversoftware lokal testen +
-  * ➖ sind schwieriger in Handhabung und v.a. Pflege (Veränderungen in der Sitestruktur) +
-  * ➖ sehen für jede Datei anders aus+
  
 ===== 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 165: 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.1444767000.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki