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 [06.10.2015 (17:39)] – [Aufbau eines HTML-Dokuments (III)] retemirabilefortbildungen:webdesign-lernen:ueberblick-erste-schritte [06.08.2020 (11:28)] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 112: Zeile 112:
   * ''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 I ===== 
 + 
 +  * 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).  
 + 
 +===== 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 ===== 
 + 
 +{{:fortbildungen:webdesign-lernen:pfade-absolut.gif?nolink|}} 
 + 
 +===== Relative Pfade ===== 
 + 
 +{{:fortbildungen:webdesign-lernen:pfade-relativ.gif?nolink|}} 
 + 
 +===== Absolute ⟷ Relative Pfade ===== 
 + 
 +  * **Absolute Pfade** 
 +    * ➕ sind überschaubarer 
 +    * ➕ erzeugen saubere URLs (Webadressen) 
 +    * ➕ lassen sich einheitlicher verwenden 
 +    * ➖ brauchen für das lokale Arbeiten eine Serversoftware 
 +  * **Relative Pfade** 
 +    * ➕ 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 ===== 
 + 
 +  * 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). 
 + 
 +===== Webseite oder Website? ===== 
 + 
 +Eine Website besteht aus Webseiten.  
 + 
 +{{:fortbildungen:webdesign-lernen:webseiten-website.gif?nolink|}} 
 + 
 +===== Website ===== 
 + 
 +  * Eine Web<wrap em>seite</wrap> ist ein einzelnes HTML-Dokument 
 +  * 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 
 + 
 +===== 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.1444145974.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki