Lektion 14 - Hobby mit Bildern

Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Lektion 14 - Hobby mit Bildern

Beitrag von Admin » Di 19. Aug 2014, 11:19

Deine Hobby-Seite besteht bislang nur aus Text. Bestimmt ist es dir aufgefallen, dass es schwierig ist lange Texte zu lesen, egal wie gut den Text geschrieben und strukturiert ist. Das liegt daran, dass eine Seite auf dem Bildschirm endlos zu sein scheint. Der Leser braucht visuelle Orientierungspunkte, um die Stelle im Text nicht zu verlieren, die er gerade liest.

Als Orientierungspunkte setzt man Grafiken ein. Bilder und Fotos, die den Inhalt verdeutlichen. Solche Bilder werden in Klein-Formaten auf eine Webseite gesetzt. Möchtest du, dass ein Bild in großer Größe angezeigt wird, solltest du es über eine Miniaturanzeige verlinken. - Ups, wie geht so was?

Es gibt 3 Wege ein Bild einzufügen:
Du öffnest Menü Einfügen - Grafiken.

Der Assistent besitzt 4 Register.
Adresse

[col]
  • Grafik-Adresse:
    Hier gibst du den Pfad zu seiner Grafik ein. Über das kleine Ordnersymbol rechts neben dem Texteingabefeld kannst du deine Festplatte nach der Grafik durchsuchen.
    Die Adresse sollte immer relativ zur Seitenadresse sein. Diese Option ist im Fenster ausgeblendet, da noch kein Pfad ausgewählt ist.
    KompoZer kann nur einen relativen Pfad erstellen, wenn du deine Seite zuerst gespeichert hast.
  • Tooltip:
    Der Text, den du im Tooltip einfügst, wird angezeigt, wenn man mit der Maus über die Grafik fährt.
  • Alternativtext:
    Muss angegeben werden. Kann ein Browser das Bild nicht anzeigen, erscheint der Text, den du als Alternativtext angegeben hast.

    Du kannst diese Option deaktivieren. Bei HTML-Dateien, die nicht veröffentlicht werden, sondern zum Beispiel auf eine CD gebrannt werden, ist es nicht notwendig, einen Alternativtext zu schreiben.
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Größe
  • [col]In diesem Register zeigt KompoZer die Größe der Grafik an. Sie sollte auch nicht verändert werden.
    Bilder sollten immer zuvor in die Größe gebracht werden, in der sie angezeigt werden sollen. Nimmst du z.B. ein Bild frisch aus deiner Digitalkamera, hat dieses Bild unbearbeitet, je nach Auflösung eine Größe von 1,5 MB - 5 MB (nach oben gibt es keine Grenze).|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]


    [anmerk]Bild|Achtung!
    Fügst du dieses Bild nun in KompoZer ein und skalierst es über KompoZer, hat es nach wie vor eine Dateigröße von bis zu 5 MB. Nur die Anzeige wird verkleinert ... gezoomt.[/anmerk]
Erscheinungsbild
  • Bitte verwende dieses Register nicht. Alle Eintragungen werden als Inlinestyle, also Formatierung im html-Code eingetragen!
Link
  • [col]Du kannst ein Bild als Hyperlink verwenden. Das heißt, du kannst einen Link zu einem anderen Bild, einer anderen Seite oder einer E-Mail-Adresse setzen.
    Sobald du einen Link eingefügt hast, werden die anderen Optionen anklickbar. Denke daran eine E-Mail-Adresse als solche du auszuweisen.|#
    Klicke auf das Bild für die Darstellung in Originalgröße
    [/col]
[anmerk]Bild|Achtung!
Alle Inhalte einer Webseite - Texte, Grafiken und Code - sind urheberrechtlich geschützt. Durch eine Lizenz kann die weitere Verwendung unter bestimmten Bedingungen erlaubt oder nochmals ausdrücklich untersagt werden.[/anmerk]

[anmerk]Bild|Achtung!
Eine Veröffentlichung im Internet wird immer als kommerzielle Nutzung gewertet, unabhängig davon, ob du mit der Seite Geld verdienst oder nicht.[/anmerk]


Übung

Grafik einfügen und verlinken

Beginnen wir mit dem Einfügen von Bildern.

[col]Du hast einen Ordner in deinem Web angelegt: grafiken

Lade alle die Bilder, die du auf deiner Hobby-Seite anzeigen willst. Die Bilder sollten nicht größer als 400px mal 300px in sein, da sie sonst wieder sehr störend wirken können und den Lesefluss unterbrechen, anstatt ihn zu unterstützen. Wenn du größere Bilder hast, verkleinerst du sie mit einem Bildbearbeitungsprogramm oder erstellst ein Thumbnail, mit dem du auf das größere Bild verlinkst.
Öffne erneut deine Hobby-Seite und öffne in der Seitenverwaltung den Ordner grafiken.

Es werden dir nun in der Seitenverwaltung alle Grafiken angezeigt, die du dort hineinkopiert hast.

Setze den Cursor in die erste Zeile deines Absatzes, in den du die Grafik einfügen möchtest.|Führe einen Doppelklick auf das Bild in der Seitenverwaltung aus, das du in den Absatz einfügen möchtest:

#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


[col]Ich habe dafür das Logo vom Firefox verwendet.
Möchtest du nun einen Link auf das Bild einfügen, dann klicke das Bild doppelt an:

Es öffnet sich der Grafik-Eigenschaften-Assistent. Der Pfad zur Grafik wird angezeigt. Prüfe, ob die Option "Url relativ zur Seitenadresse" aktiviert ist und füge einen Alternativtext ein.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Wechsel in das Register Link und klicke auf den kleinen Ordner neben dem Texteingabefeld für den Link-Pfad. Es öffnet sich ein Dateimanager, mit dem du das Bild aus dem Ordern grafiken auswählst.

Die Grafiken werden jedoch nicht angezeigt. Klicke unten rechts auf das Drop-down-Menü, um dir alle Dateien oder Grafiken Dateien anzeigen zu lassen.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Wähle nun das große Bild, das über einen Klick auf das kleine Bild angezeigt werden soll. Achte auch hier auf die Option: "Url relativ zur Seitenadresse"
und bestätige den Assistenten mit OK.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

CSS für Grafiken
Die Grafik ist nun eingefügt, aber besonders schön sieht das nicht aus. Sie wird wie ein Buchstabe in die Zeile geschrieben und ragt nach oben aus der Zeile aus. Die Textzeile wird so hoch wie die Grafik.[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion14-1.png[/popup]
[col]Um das abzuschalten, legst du eine neue Klasse an: nenne sie .links.

Stelle in den Boxeigenschaften den Puffer auf links ein. Damit wird das Element, dem du diese Klasse zuweist, links ausgerichtet und lässt rechts den Text umfließen.

Jetzt stellst du noch einen Abstand ein, damit der Text nicht so an die Grafik gequetscht wird.

Innenabstand unten und Innenabstand rechts 10px.

Weise diese Klasse nun deiner Grafik zu, indem du auf die Grafik klickst und in der Statusleiste dem Element <img> die Klasse gibst.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Erstelle eine weitere Klasse .rechts
Füge auf deiner Hobby-Seite mehrere Grafiken (auch verlinkte Grafiken) ein. Weise den Grafiken die neuen Klassen zu.

Deine Lösung könnte so aussehen: Lösung

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Hobby</title>
<meta content="Anke Lange" name="author">
<link rel="stylesheet" href="styles.css" type="text/css">
</head><body>
 
<div id="seite">
<div id="kopf">
<h1>Überschrift 1<br>
</h1>
</div>
<div id="navi">
<ul>
  <li><a href="index.html">Startseite</a></li>
  <li>
    <a href="hobby.html">Hobby</a></li>
  <li>
    <a href="glossar.html">Glossar</a></li>
  <li>
    <a href="termine.html">Termine</a></li>
  <li>
    <a href="gaestebuch.html">Gästebuch</a></li>
  <li>
    <a href="wegbeschreibung.html">Wegbeschreibung</a></li>
  <li>
    <a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div id="inhalt">
<h2>Hobby<br>
</h2>
<p><a href="grafiken/firefox.png"><span><img class="links" style="border: 0px solid ; width: 80px; height: 80px;" alt="firefox" src="grafiken/firefox_th.png"></span></a>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
<h3>Überschrift 3<br>
 </h3>
<p><img class="rechts" alt="" src="grafiken/thunderbird.png" border="0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, <strong>totam</strong>
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit <acronym title="Gnu Image Manipulation - Programm Grafikprogramm für alle Betriebssysteme">GIMP</acronym> aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui <acronym title="Hyper-text-markup-language">HTML</acronym>
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem.</p>
 
<p><samp><a href="grafiken/lo.png"><img class="links" style="border: 0px solid ; width: 150px; height: 45px;" alt="libreoffice" src="grafiken/lo_th.png"></a>Beispieltext: Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?</samp></p>
<h4>Überschrift 4<br>
</h4>
<p><img class="rechts" alt="gimp" src="grafiken/gimp.png" border="0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
<em>ex ea commodo consequat</em>. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
<h3>Zitat<br>
 </h3>
<q><img class="links" alt="inkscape" src="grafiken/inkscape.png" border="0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. <cite><br>
von Wilhelm Busch</cite><br>
</q>
<p><img class="rechts" alt="scribus" src="grafiken/scribus.png" border="0">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
 
<p><a href="grafiken/audacity.png"><img class="links" style="border: 0px solid ; width: 80px; height: 80px;" alt="Audacity" src="grafiken/audacity_th.png"></a>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?</p>
</div>
<div id="footer"><a href="#kopf">nach oben </a>
</div>
</div>
</body></html>

Code: Alles auswählen

.links {
  float: left;
  padding-right: 10px;
  padding-bottom: 10px;
}
.rechts {
  float: right;
  padding-left: 10px;
  padding-bottom: 10px;
}
Zusatz

Häufig werde ich gefragt, "... wie kann ich meine Bilder vor Diebstahl schützen?" Es ist ja einfach auf einer Webseite die rechte Maustaste zu drücken - Grafik speichern unter zu wählen. - meins!

Also erst einmal kann man sich nicht davor schützen. Häufig geschieht dies auch aus Unwissenheit über das Urheberrecht. In Deutschland denken die meisten ... wo kein Copyright draufsteht, ist zur freien Verfügung zugelassen. Aber das ist nicht so.

Alle Grafiken, die irgendwo im Internet auf einer Webseite veröffentlicht sind, werden auch von Suchmaschinen gefunden.

Wenn du möchtest, dass deine Bilder nur schlecht gefunden werden, gib ihnen keine aussagekräftigen Namen. Es reicht ein bild1.jpg, bild2.jpg

Nennst du ein Bild tomate.jpg und schreibst auch im Alternativtext Tomate, wirst du mit größter Wahrscheinlichkeit deine Tomate irgendwo in der Googlebildersuche unter vielen anderen Tomaten wiederfinden.

Du kannst dein Bild auch mit einem Wasserzeichen, also einem Copyright-Stempel oder mit deinem Namen versehen.

Oder du legst ein leeres Bild über dein Bild ... wie geht das denn ... ?
  • Du fügst einen Absatz ein.
  • Diesem Absatz gibst du die Größe deines Bildes ein. Das kannst du ruhig über Inlinestyle machen. Füge das Bild als Hintergrundbild ein.
  • Jetzt erstellst du mit einem Grafikprogramm eine 1px große transparente Grafik. Speichere sie als diebstahlschutz.gif oder du-sollst-meine-bilder-nicht-klauen.png oder ... wähle einen Namen, der einem vermeintlichem Dieb klar macht, dass er da etwas tut, was nicht in Ordnung ist.
  • Dann fügst du die transparente Grafik in den Absatz ein. Stelle die Größe auf 100% des Fensters - Fertig.
  • Jetzt versuche mal den Wilber unten per Rechtsklick auf deinen Rechner zu speichern. Alles was du speichern kannst, ist die transparente 1px Grafik.

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 14 - Hobby mit Bildern

Beitrag von kp2709 » Do 28. Aug 2014, 21:29

hallo,
an den der heute dran ist meine arbeit durchzusehen :D
hier die arbeit
http://reikuma27.reikuma.bplaced.de/web/index.html

lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 14 - Hobby mit Bildern

Beitrag von anke » Fr 29. Aug 2014, 05:35

Hallo Kurt

die Klassen für die Bilder haben super geklappt. Leider ist dir aber wieder ein Inlinestyle in die Seite geraten:

Code: Alles auswählen

<strong class="strong">Administratoren</strong> geboten.<span style="text-decoration: underline;"><span style="font-style: italic;"></span>
</span></p>

Gruß Anke

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 14 - Hobby mit Bildern

Beitrag von kp2709 » Fr 29. Aug 2014, 09:58

hallo anke,
schau mal bitte, ob ich jetzt richtig habe :?

danke
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 14 - Hobby mit Bildern

Beitrag von anke » Fr 29. Aug 2014, 13:30

Hallo Kurt

ja, fast ;)

ich habe jetzt diesen Code gefunden:

Code: Alles auswählen

<strong class="strong">Administratoren</strong> geboten.<span style="text-decoration: underline;"></span>
strong ist ein Element das automatisch fett formatiert. Wenn du in deiner CSS strong als Element formatierst, z. B.

Code: Alles auswählen

strong {
  text-decoration: underline;
  }
werden alle Textstellen, die mit strong markiert wurden fett und unterstrichen dargestellt.

Es ist aber nicht gut, eine Klasse oder eine ID genauso zu benennen wie ein Element.
Die leeren Elemente sind wohl beim Löschen des Textes zurück geblieben.

Gruß anke

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 14 - Hobby mit Bildern

Beitrag von kp2709 » Fr 29. Aug 2014, 14:30

jetzt glaube ich habe ich es geschnallt :) , hoffe ich ;),
bitte nochmal gucken :mrgreen:
danke
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 14 - Hobby mit Bildern

Beitrag von anke » Fr 29. Aug 2014, 14:32

Hallo Kurt

jetzt ist's super :)

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 14 - Hobby mit Bildern

Beitrag von eibauoma » Sa 13. Sep 2014, 17:33

Eine PNG und eine Gif-Ani habe ich eingefügt und eben erst bemerkt, dass noch ein verlinktes Bild als Aufgabe wartet. :roll:
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 14 - Hobby mit Bildern

Beitrag von anke » Sa 13. Sep 2014, 17:55

ja, dann mal fix dabei ;)

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 14 - Hobby mit Bildern

Beitrag von eibauoma » Sa 13. Sep 2014, 21:23

so fix ging das gar nicht :mrgreen:
Hatte mir versehentlich von den oberen Absätzen einen Teil gelöscht - keine Ahnung warum - naja - Übung macht den Meister :lol:
http://gimpfreak.bplaced.net/hobby.html
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

Antworten