Der Rumpf. Titel Seite 3

Transkript

1 Grundzüge des Web-Designs Es gibt verschiedene Elemente der Darstellung, die im Design immer wieder vorkommen Diese sind z.b. Textblöcke, Bilder, Überschriften, Absätze etc. Titel Seite 1

2 Diese Elemente wurden identifiziert und als definierbare Tags umgesetzt. Darüber hinaus gibt es im Vergleich zu einer Zeitung auch noch die Möglichkeit interaktiver Benutzung einer HTML-Seite. z.b. Sprünge, animierte Bilder etc. Tags geben uns die Möglichkeit, sich auf das Design zu konzentrieren. Die Technische Umsetzung bleibt eine Problemstellung des Browsers. Titel Seite 2

3 Der Rumpf Titel Seite 3

4 Die grundlegende Vorder- und Hintergrundfarbe Titel Seite 4

5 Wie kommen Farben Zustande? Titel Seite 5

6 Was sind Hexadezimal Zahlen A FF 255 (der höchste Wert für ein Byte) F.FF FF.FF (der höchste Wert für zwei Byte) 00.FF.FF.FF (der höchste Wert für drei Byte) FF.FF.FF.FF (der höchste Wert für vier Byte) Titel Seite 6

7 Wenn alles 00 ist gibt dies die Farbe Schwarz an Titel Seite 7

8 Das Anlegen von Tabellen In Tabellen gibt es Zeile und Spalten Innerhalb der <td> od. <th> Tags kann man jedes Graphisches Element ablegen (z.b. Text Blöcke, Text, Bilder) Titel Seite 8

9 Im HTML Code sieht dies so aus Titel Seite 9

10 Was bedeutet diese Angabe: Titel Seite 10

11 Bilder einfügen wird von diesem Tag durchgeführt. Der Link zeigt auf eine Datei im File System. Wenn kein Pfad angegeben wird, sucht er dort wo die HTML Seite ist. Titel Seite 11

12 Durch die Angabe der Bild Punkte erhält das Bild ein gewünschte Größe Titel Seite 12

13 Bildpunkt e sind ein Píxel auf dem Bildschirm Titel Seite 13

14 Ein Bildpunkt Titel Seite 14

15 Wie können wir Fotos bearbeiten Titel Seite 15

16 Z.B. mit Paint kann man Photo Dateien öfnnen und jeden Punkt einzeln bearbeiten. Photo Dateien können verschiedene Formate haben Je nach Größe werden verschiedene Formate verwendet *.JPG, *.JPEG *.bmp *.gif *.tif Titel Seite 16

17 Bilder können als Graphik Elemente in Tabellen angegeben werden Hier eine Seite mit Überschrift und Bild (horizontel sortiert) Titel Seite 17

18 Links weisen den Browser an eine neue Seite zu laden Sprünge sind jedem bekannt. Schlagwort Serven Es wird hierbei von einer Seite auf eine andere Seite verwiesen erste.html zweite.html Verweis auf zweite.html Titel Seite 18

19 Der Befehl hierzu lautet Titel Seite 19

20 Wird der Link gedrück, wird die Seite 2_web.html geladen Hierzu muss natürlich die Seite 2 existieren Titel Seite 20

21 Links können auch direkt ins Internet erfolgen Titel Seite 21

22 Es gibt noch ein weiteres Verfahren Links einzubinden Titel Seite 22

23 So sieht die Anweisung bei der Ausführung im Browser aus. Es wird ein fest definiertes Standard-Layout für Buttons verwendet, welches das Betriebssystem festlegt Dies nennt man Look&Feel Titel Seite 23

24 Durch Kombination all dieser Elemente kann eine strukturierte Seite erstellt werden Titel Seite 24

25 Titel Seite 25

26 Darstellung der Seite Titel Seite 26

27 Beginn des Übungsteils: Titel Seite 27

28 Bitte legen Sie eine Datei an mit dem Namen web.html Diese bitte im Ordner c:\bwl anlegen Bitte sicherstellen, dass die Datei web.html heisst und nicht web.html.txt (Optionen Menü im Explorer) Folgenden Code eingeben, sichern und die Seite betrachten Titel Seite 28

29 Verändern Sie die Hintergrund- und Text-Farbe Verwenden sie dieses Tool im Internet um Farben zu berechnen Titel Seite 29

30 Bitte legen Sie eine neue Datei an mit dem Namen 2_web.html Geben Sie diesen html code ein. Speichern Sie diese Seite und betrachten sie Titel Seite 30

31 Erweitern Sie nun 2_web.html derart, dass die Tabelle 3 Zeilen und 3 Spalten hat. Titel Seite 31

32 Bitte legen Sie eine neue Datei an mit dem Namen 3_web.html Geben Sie diesen html code ein. Speichern Sie diese Seite und testen sie den Link zu Ihrer Tabellen Seite Titel Seite 32

33 Bitte legen Sie eine neue Datei an mit dem Namen 4_web.html Geben Sie diesen html code ein. Speichern Sie diese Seite und testen sie den Link zu Ihrer erste Link Seite Titel Seite 33

34 Bitte kopieren Sie jetzt diese Seite in eine zu erstellende Datei 1_web.html im Verzeichnis c:\bwl. Der Code befindet sich in unserem Verzeichnis unter 03_html_code_1_web.txt Speichern Sie die Seite und betrachten Sie diese mir dem Internet Explorer Kopieren Sie das Verzeichnis images in unserem Ordner in c:\bwl\images an Suchen Sie sich im Internet (z.b. unter Google) ein Bild (von sich) und speichern Sie es in dem Verzeichnis c:\bwl\images Ersetzen Sie im Code den Namen der Bild Datei durch Ihre neue Bild Datei. Statt Einstein sollten nun Sie auf der Seite erscheinen Titel Seite 34

35 Ändern Sie den Link zweite.html auf der Seite so, dass er auf 2_web.html springt. Ändern Sie den Link Meine Daten der auf Google geht so, dass er nun lautet: wobei IhrVorname+IhrNachname durch Ihren wirklichen Namen ersetzt werden sollen. Ändern Sie etwas am Text und lassen Sie beim ändern die Seite im Internet Explorer offen. Wenn Sie die Änderungen gespeichert haben drücken Sie auf Reload. Titel Seite 35

36 Bitte kopieren Sie den gesamten Ordner 03_myweb in das Verzeichnis c:\bwl Hier ist eine professionelle Internetseite angelegt. Bitte Öffnen Sie die Seite index.htm (es wird oft htm statt html verwendet, da manche Systeme drei Buchstaben in der Endung bevorzugen) mit Internet Explorer und einem Editor Versuchen Sie die Programmierung der Seite zu verstehen indem Sie die Seite so ändern, dass Sie ihre eigene Homepage ist. Achten Sie dabei auf die Erklärunge in den folgenden Folien Titel Seite 36

37 Dies ist eine Web Seite Titel Seite 37

38 Im Internet Explorer wird sie wie folgt dargestellt Titel Seite 38

39 Elemente werden immer in Tabellenform abgelegt. Elemente können Textblöcke (<p>), Bilder (<img= xxx >), Überschriften etc. sein TR TR TR TD TD TD Titel Seite 39

40 Im Internet Explorer wird sie wie folgt dargestellt Titel Seite 40

41 Titel Seite 41

42 Titel Seite 42

43 Abschluss der Seite Titel Seite 43