Lektion 15 - Die Fotogalerie

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

Lektion 15 - Die Fotogalerie

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

Für deine Webseite hast du bestimmt viel Bildmaterial, das du den Besuchern deine Homepage zeigen möchtest. Ob nun Fotos von deinem Hobby oder Kunstwerke die du mit einem Bildbearbeitungsprogramm gestaltet hast, Avatare, Wallpaper oder Signaturen.

Für solch ein Vorhaben eignet sich am besten eine Galerie. Es gibt einige Programme, mit denen du eine Galerie generieren kannst. Es gibt sogar Online-Dienste für diese Zwecke. Solche Programme eignen sich am Besten für große Bildersammlungen, denn das Einbinden hunderter Fotos kannst du besser vollautomatisch über eine Datenbank und PHP.

Nun, für eine kleine Bildersammlung, die hin und wieder aktualisiert wird, reicht auch eine selbst gemachte Galerie. Die Bilder lädst du in deinen Ordner grafiken, oder legst einen extra Ordner für diese Bilder an. Erstelle zu jedem deiner Bilder ein Thumbnail. Ein Thumbnail sollte maximal 120px mal 120px groß sein.

[anmerk]Bild|Achtung!
Möchtest du Bilder veröffentlichen, musst du das Kunsturheberrecht beachten![/anmerk]

Übung

Öffne deine galerie.html und ändere den Titel über Menü Format - Seitentitel und Einstellungen.

Füge eine Überschrift für deine Galerie ein und definiere sie als Überschrift 2

Möchtest du Galerien zu mehreren Themengebieten deines Hobbys veröffentlichen, fügst du zu jedem Thema eine weitere Überschrift ein, die du als Überschrift 3 definierst.

[col]Beginne nach der Überschrift eine unsortierte Liste.
  • Achte darauf, dass deine Absatzeinstellung auf Absatz steht.
  • Füge ein Thumbnail ein. Halte die Schift-Taste gedrückt und drücke die Enter-Taste.
  • Schreibe unter das Bild eine Bildbeschreibung, Bildtitel oder Größe des Bildes ohne einen neuen Listenpunkt zu generieren.
    Weiche Zeilenschalten = Shift + Enter
  • Drücke anschließend die Enter-Taste um einen neuen Absatz einzufügen.
  • Füge in diesem Absatz das nächste Thumbnail ein. Fahre so fort, bis alle Bilder zu einem Themengebiet in einer Liste sind.
  • Markiere deine gesamte Liste und definiere sie als unsortierte Liste.
  • Fügst du einen leeren Listenpunkt ein. Fülle ihn mit einer weichen Zeilenschaltung oder mit einem Leerzeichen.
Schreibe die Überschrift zum nächsten Themengebiet und definiere sie als Überschrift 3.

Erstelle die zweite Galerie wie die Erste. Hast du noch einen Themenbereich? - Dann erstelle auch eine 3. Galerie.

Verlinke jedes Thumbnail mit dem großen Bild.|Die Liste sollte nun so aussehen:

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

Das sieht noch nicht wirklich nach Galerie aus oder? Gut, dann fangen wir an sie hübsch zu machen. Lege eine neue Klasse an .galerie. Diese Klasse wird die unsortierte Liste formatieren. Stelle also im Register Listen den Listentyp auf "keine".

Weise die Klasse jeder ul zu. - Die Punkte vor den Bildern sollten verschwunden sein. Lege eine weitere Klasse für die Listeneinträge an. .galerie li. Das sind nun die Bereiche, in denen die Thumbnails abgelegt sind.

Stelle den Puffer auf links, sodass die Thumbnails nebeneinander angezeigt werden. Vergib eine Breite und eine Höhe. Wenn du unterschiedlich große Thumbnails hast, weil du auch Hochkant-Bilder dabei hast, musst du darauf achten, wie hoch das höchste deiner Thumbnails ist. Dann brauchst du natürlich auch noch Platz für den Text unter dem Bild.

[col]Stelle noch einen Außenabstand ein, sodass die Bilder nicht dicht aneinander kleben.
Naja, besonders schön ist das immer noch nicht. Die Galerien scheinen quer durcheinander zu liegen. Das liegt daran, dass die du einen Puffer Links für die Listenpunkte gesetzt hast. Das soll jedoch nur innerhalb einer Liste passieren. Also ...|So, jetzt sieht dein Bild ein bisschen durcheinander aus. Ungefähr so:

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


[col]Legen wir eine weitere Klasse an: .galerie li:last-child.
Die einzige Formatierung die diese Klasse bekommt findest du in den Boxeigenschaften. Stelle die Option bei Aufheben auf links, sodass der Puffer Links ausgeschaltet ist.

Die Pseudoklasse last-child wirkt nur auf den letzten Listenpunkt und muss nicht zugewiesen werden. Der letzte Listenpunkt wird als Listenpunkt unter den Bildern angezeigt. Dadurch entsteht eine etwas große Lücke, da dieser Listenpunkt die gleiche Höhe hat, wie die anderen Listenpunkte. Stelle die Höhe auf eine geringere Höhe ein, zum Beispiel 10px. Zum Schluss rundest du deine Galerie mit ein bisschen Feinarbeit ab.

Stelle in der Klasse .galerie die Anzeige auf Tabelle, sodass der Inhalt auch bis an den Footer reicht. Stelle in der Klasse .galerie li die Textausrichtung auf zentriert und formatiere die Schrift.

Fertig ist deine Galerie.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Hier findest du meine Lösung: Lösung

Viel Spaß beim Nachbasteln!

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

Re: Lektion 15 - Die Fotogalerie

Beitrag von kp2709 » Fr 29. Aug 2014, 20:46

hallo zusammen,
hier meine galerie zum anschauen.
http://reikuma27.reikuma.bplaced.de/web/index.html

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

camouflage1984
Beiträge: 255
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 15 - Die Fotogalerie

Beitrag von camouflage1984 » Fr 29. Aug 2014, 21:59

Hallo Kurt

Du musst nochmal ran an die Galerie. ;)

Nur die Unsortierte Liste ul braucht die klasse galerie,

Code: Alles auswählen

<ul class="galerie">
  <li class="galerie">
nicht die Listenpunkte. Bitte entferne alle klassen aus den Listenpunkten.

Du hast diese Anweisung

Code: Alles auswählen

.galerie li:last-child {
}
leer gelassen, bitte ändere das nach Anweisung von oben ab.

Bitte erstelle in jeder ul einen letzten Listenpunkt ohne Bild
trage dort ein geschütztes Zeichen wie z.B. ein Leerzeichen ein, damit Kompozer den Listenpunkt nicht löscht.

Bitte Lösche in deiner css diese leere

Code: Alles auswählen

.galerie ul {
}
klasse.

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

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

Re: Lektion 15 - Die Fotogalerie

Beitrag von kp2709 » So 31. Aug 2014, 06:50

hallo, einen schönen sonntag für alle :D , glaube ich hab es jetzt :) .
schaut bitte mal

danke
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 15 - Die Fotogalerie

Beitrag von anke » So 31. Aug 2014, 08:18

Hallo Kurt

sieht super aus :)

Ich habe in deiner CSS allerdings noch eine leere Klasse .em entdeckt. Bitte lösche sie noch.

Weiter gehts ;)

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

Re: Lektion 15 - Die Fotogalerie

Beitrag von eibauoma » Fr 19. Sep 2014, 17:58

Die Galerie hat noch Hindernisse, auf der Kompozer-Seite sind je eine h2 und h3- Überschrift etwas nach rechts verschoben, im Internet sieht es noch kurioser aus. Keine Ahnung, was ich falsch gemacht habe. :oops:

Bis bald
Zuletzt geändert von eibauoma am Fr 19. Sep 2014, 21:43, insgesamt 1-mal geändert.
[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 15 - Die Fotogalerie

Beitrag von anke » Fr 19. Sep 2014, 20:40

Hallo eibauoma

du hast display: table auf die Klasse .galerie li eingestellt. Stelle sie auf .galerie ul ein. Dann sollte es funktionieren ;)

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

Re: Lektion 15 - Die Fotogalerie

Beitrag von eibauoma » Fr 19. Sep 2014, 21:48

Kleine Ursache - große Wirkung
Danke, dann kann es demnächst mit der Galerie weitergehen.
Bis bald
[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]

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 15 - Die Fotogalerie

Beitrag von Hellriders » Sa 29. Aug 2015, 06:28

meine kleine galerie :)

galerie.html

camouflage1984
Beiträge: 255
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 15 - Die Fotogalerie

Beitrag von camouflage1984 » Sa 29. Aug 2015, 12:13

Hallo Micha

Sieht gut aus.
Bei den letzten zwei Bildern fehlen die alt"" (Alternativen Text) angaben.

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten