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 [29.09.2015 (22:22)] – [Browser – Zentrales Werkzeug] retemirabile | fortbildungen:webdesign-lernen:ueberblick-erste-schritte [06.08.2020 (11:28)] (aktuell) – Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | ====== Webdesign ====== | + | ====== Webdesign |
- | + | ||
- | Grundlagen, Erste Schritte, Techniken | + | |
von Andreas Kalt | von Andreas Kalt | ||
Zeile 7: | Zeile 5: | ||
~~SLIDESHOW~~ | ~~SLIDESHOW~~ | ||
- | ===== Websites machen | + | ===== Websites machen |
- | {{: | + | Was muss man wissen und können? |
+ | {{: | ||
+ | |||
+ | < | ||
+ | <div class=" | ||
+ | </ | ||
[[fortbildungen: | [[fortbildungen: | ||
+ | |||
+ | < | ||
+ | </ | ||
+ | </ | ||
===== Browser – Zentrales Werkzeug ===== | ===== Browser – Zentrales Werkzeug ===== | ||
- | {{: | + | |{{ : |
- | {{: | + | | Firefox |
- | {{: | + | |
- | {{: | + | |
+ | < | ||
+ | <div class=" | ||
+ | Der Browser ist das zentrale Werkzeug zum Testen der selbst gemachten Website. Daher braucht man aktuelle Versionen aller gängigen Browser auf dem eigenen Rechner. Auch wichtige ältere Versionen, die bei Internetnutzern noch weit verbreitet sind, muss man evtl. installiert haben. | ||
+ | </ | ||
+ | </ | ||
===== HTML – Die Web-Sprache ===== | ===== HTML – Die Web-Sprache ===== | ||
Zeile 33: | Zeile 43: | ||
{{: | {{: | ||
+ | ===== Markup? ===== | ||
+ | {{: | ||
+ | |||
+ | ===== Markup: Auszeichnung ===== | ||
+ | |||
+ | Prinzip erkannt? | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== HTML Markup Regeln ===== | ||
+ | * HTML benutzt so genannten Elemente, um Text eine Funktion zu geben z.B. ''< | ||
+ | * Ein Element besteht aus zwei Teilen: **Anfangstag und Schlusstag** ''< | ||
+ | * Tags können auch **verschachtelt** sein, z.B. {{: | ||
+ | |||
+ | ===== Wie wird Text zu Hypertext? ===== | ||
+ | Durch (Hyper)-Links. | ||
+ | |||
+ | * Das HTML-Element ''< | ||
+ | * Bsp: In diesem Satz [[ist dies ein Link]] | ||
+ | * Das Markup dazu: | ||
+ | * Ein Hyperlink braucht neben dem einfachen Tag noch eine weitere Angabe: Das **Ziel** des Links | ||
+ | |||
+ | ===== Aufbau eines HTML-Elements ===== | ||
+ | * Das eigentliche Tag mit Anfang und Schluss: z.B. ''< | ||
+ | * Dazu manchmal: Attribute und deren Werte {{: | ||
+ | |||
+ | ===== Wichtige HTML-Elemente (Teil 1) ===== | ||
+ | |||
+ | Text wird mit HTML-Tags markiert, beides zusammen heißt „Markup“ | ||
+ | |||
+ | * Überschriften: | ||
+ | * Textabsätze: | ||
+ | * deutlich hervorgehoben: | ||
+ | * betont: ''< | ||
+ | |||
+ | |||
+ | ===== Wichtige HTML-Elemente (Teil 2) ===== | ||
+ | |||
+ | * Listen: „ungeordnet“ ''< | ||
+ | * ''< | ||
+ | |||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Aufbau eines HTML-Dokuments (I) ===== | ||
+ | {{: | ||
+ | |||
+ | ===== 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 und eines Fotos (Stand 2013)** | ||
+ | |||
+ | Details: [[arbeitsmethoden: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Digitale Abbildungen: | ||
+ | |||
+ | |{{: | ||
+ | |6 x 6 = 36 Pixel|12 x 12 = 244 Pixel| |
fortbildungen/webdesign-lernen/ueberblick-erste-schritte.1443558169.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)