fortbildungen:webdesign-lernen:ueberblick-erste-schritte
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
fortbildungen:webdesign-lernen:ueberblick-erste-schritte [30.09.2015 (06:39)] – [HTML Markup Regeln] retemirabile | fortbildungen:webdesign-lernen:ueberblick-erste-schritte [06.08.2020 (11:28)] (aktuell) – Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 7: | Zeile 7: | ||
===== Websites machen | ===== Websites machen | ||
- | Was muss man wissen und können? | + | Was muss man wissen und können? |
{{: | {{: | ||
+ | |||
+ | < | ||
+ | <div class=" | ||
+ | </ | ||
+ | |||
+ | [[fortbildungen: | ||
+ | |||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
===== Browser – Zentrales Werkzeug ===== | ===== Browser – Zentrales Werkzeug ===== | ||
Zeile 80: | Zeile 91: | ||
{{: | {{: | ||
- | ===== Übung: Plaintext-Dokument auszeichnen | + | ===== Aufbau eines HTML-Dokuments (I) ===== |
- | Wende nun das Gelernte | + | {{: |
+ | |||
+ | ===== Aufbau eines HTML-Dokuments (II) ===== | ||
+ | Dokumententyp—DOCTYPE\\ | ||
+ | ''< | ||
+ | |||
+ | ''< | ||
+ | |||
+ | Kopf und Körper: ''< | ||
+ | |||
+ | ===== Aufbau eines HTML-Dokuments (III) ===== | ||
+ | |||
+ | * ''< | ||
+ | * ''< | ||
+ | Unsere Arbeit mit HTML-Dokumenten wird sich fast ausschließlich zwischen den ''< | ||
+ | ===== Bilder einfügen ===== | ||
+ | |||
+ | * Bilder einfügen: ''< | ||
+ | * '' | ||
+ | * Das '' | ||
+ | * Das Attribut '' | ||
+ | * ''< | ||
+ | |||
+ | ===== 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, | ||
+ | |||
+ | ===== Pfade II ===== | ||
+ | |||
+ | Zwei grundsätzliche Möglichkeiten für die Gestaltung von Pfaden | ||
+ | |||
+ | * **Absolute Pfade:** Immer vom root-Verzeichnis aus, z.B. \\ ''< | ||
+ | * **Relative Pfade:** Von der jeweils vorliegenden Datei aus, z.B. \\ ''< | ||
+ | |||
+ | ===== Absolute Pfade ===== | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Relative Pfade ===== | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== 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: '' | ||
+ | * In moderner Website-Software oft keine echten Ordner mehr, sondern „simulierte Ordner“ (virtuelle Ordner). | ||
+ | |||
+ | ===== Webseite oder Website? ===== | ||
+ | |||
+ | Eine Website besteht aus Webseiten. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Website ===== | ||
+ | |||
+ | * Eine Web<wrap em> | ||
+ | * Eine Web<wrap em> | ||
+ | * Die einzelnen Seiten haben gestalterische Elemente, die sich wiederholen, | ||
+ | |||
+ | ===== Digitale Abbildungen: | ||
+ | |||
+ | * Vektorgrafiken: | ||
+ | |||
+ | * Rastergrafiken: | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | ===== Digitale Abbildungen: | ||
+ | **Darstellungsprinzip** | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Digitale Abbildungen: | ||
- | < | + | **Typische Bildgrößen verschiedener Geräte |
- | - Speichere die Datei '' | + | |
- | - Formatiere den Inhalt der neuen HTML-Datei so, dass die Struktur und die Darstellung im Browser der Datei '' | + | |
- | - Öffne die Datei lokal im Browser, um das Ergebnis beständig zu überprüfen. Wenn Du Änderungen durchführst, | + | |
- | <hidden onHidden=" | + | Details: [[arbeitsmethoden:digitale-abb|]] |
- | </ | + | {{: |
- | Du kannst den **{{:fortbildungen: | + | ===== Digitale Abbildungen: Dateigröße ===== |
+ | |{{: | ||
+ | |6 x 6 = 36 Pixel|12 x 12 = 244 Pixel| |
fortbildungen/webdesign-lernen/ueberblick-erste-schritte.1443587989.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)