Melanie: Benötige Hilfe bei der optischen Gestaltung

SELF-Forum

Benötige Hilfe bei der optischen Gestaltung

Melanie
– Informationen zu den Bewertungsregeln

Brauche Anregungen

Hi,

Ich möchte ein Bild als Vorschaubild auf meiner Homepage darstellen, klickt man auf dieses Bild öffnet sich eine neue Seite und das Bild wird größer gezeigt. Einfach nur eine Tabelle und da das Bild rein gefallt mir nicht. Deshalb habe ich ein wenig mit css experimentiert. Nun komme ich aber nicht weiter. Hier mal mein Code:

<html>
<head>

<style type="text/css">

.vorschaubild {
  background-color: #F7F7F7;
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  }

.grossbild {
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  }

.aussenrahmne {
  background-color: #F7F7F7;
  padding: 5px;
  border-width: 1px;
  border-style: dotted;
  border-color: #000000;
  }

</style>

</head>
<body>

Vorschaubild:
<p></p>
<table class="vorschaubild" border="0" cellspacing="0" cellpadding="0"><tr><td><img border="0" src="bildklein.jpg" width="100" height="75"></td></tr></table>

<p></p>

Bild Groß:
<p></p>
<table class="aussenrahmne" border="0" cellspacing="0" cellpadding="0"><tr><td>

<table class="grossbild" border="0" cellspacing="0" cellpadding="0"><tr><td><img border="0" src="bildgross.jpg" width="316" height="237"></td></tr></table>

</td></tr></table>

</body>
</html>

Irgendwie fehlt hier noch was? Da ich Anfänger bin und ich noch nicht so die Ahnung habe wie man super Effekte hinbekommt bitte ich um Vorschläge wie man so etwas optisch super hervorbringt bzw. welche Effektmöglichkeiten es gibt.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Benötige Hilfe bei der optischen Gestaltung

    Timo L.
    – Informationen zu den Bewertungsregeln

    Hallo Melanie,

    ....klickt man auf dieses Bild öffnet sich eine neue Seite und das Bild wird größer gezeigt...

    Willst du den Benutzer wirklich auf einen neue Seite leiten um ihm ein Bild zu zeigen?
    Möchtest du das Bild nicht eher Transformieren? (Laut deinem Html Code sieht das eher danach aus)

    ... super Effekte.... optisch super hervorbringt .. Effektmöglichkeiten

    Dazu benötigst du schon etwas mehr als nur Html und Css. Ich glaube kaum das man ohne Javascript oder Flash so "super Effekte" zustande bringt. (Unter Effekten verstehe ich nun mal leider Animationen :-) )

    Um mir nicht unnötige Arbeit zu machen, verwende ich für solche Sachen meistens fertige Scripts:
    Speziell im Zusammenhang mit "Bild vergrössern" gefällt mir  Highslide ganz gut.

    Im Zusammenhang mit "Effekte selber machen" kann ich Jquery.animate()  empfehlen.

    Gruss Timo

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Benötige Hilfe bei der optischen Gestaltung

    Matze
    – Informationen zu den Bewertungsregeln

    Hallo Melanie,

    Ich möchte ein Bild als Vorschaubild auf meiner Homepage darstellen, klickt man auf dieses Bild öffnet sich eine neue Seite und das Bild wird größer gezeigt. Einfach nur eine Tabelle und da das Bild rein gefallt mir nicht. Deshalb habe ich ein wenig mit css experimentiert. Nun komme ich aber nicht weiter. Hier mal mein Code:

    <html>
    <head>

    <style type="text/css">

    .vorschaubild {
      background-color: #F7F7F7;
      padding: 5px;
      border-width: 1px;
      border-style: solid;
      border-color: #000000;
      }

    .grossbild {
      padding: 5px;
      border-width: 1px;
      border-style: solid;
      border-color: #000000;
      }

    .aussenrahmne {
      background-color: #F7F7F7;
      padding: 5px;
      border-width: 1px;
      border-style: dotted;
      border-color: #000000;
      }

    </style>

    </head>
    <body>

    Vorschaubild:
    <p></p>

    Sollte der Text nicht eher in den Absatz?
    Ich hoffe nämlich nicht, dass der Absatz nur für den Zeilenumbruch da ist.
    Layoutsachen gehören ins CSS.

    <table class="vorschaubild" border="0" cellspacing="0" cellpadding="0"><tr><td><img border="0" src="bildklein.jpg" width="100" height="75"></td></tr></table>
    .vorschaubild {
      background-color: #F7F7F7;
      padding: 5px;
      border-width: 1px;
      border-style: solid;
      border-color: #000000;
      }

    Es ist absoluter Unsinn ein einzelnes Bild in eine Tabelle zu packen.
    Für Bilder eignen sich z.B. Definitions-Listen mit 1 Eintrag + optionaler Definition (Bildbeschreibung):

      
<dl>  
  <dt><img src="urlaub2009.jpg" alt="" /></dt>  
  <dd>Urlaub 2009 - Blick übers Meer</dd>  
</dl>

    Diese Liste kannst du wunderbar mit CSS formatieren.
    Im Idealfall verzichtest du bei dem Thumbnail auf eine Größenangabe,
    sondern hälst es in der gewünschten Größe auf dem Server vorrätig.
    Ansonsten wirst du unschöne Verzerrungs-/Verpixelungs-Effekte bekommen.
    Ein Browser ist nunmal kein Bildbearbeitungsprogramm.

    Von einer größeren Darstellung auf einer extra-Seite würde ich auch abraten oder das Bild nur direkt (in der großen Version) verlinken.
    Alternativ bietet sich z.B. auch eine Lightbox an. (mit JS Lightbox, ohne JS direkter Link)

    <p></p>
    Bild Groß:
    <p></p>

    Siehe oben.

    Irgendwie fehlt hier noch was? Da ich Anfänger bin und ich noch nicht so die Ahnung habe wie man super Effekte hinbekommt bitte ich um Vorschläge wie man so etwas optisch super hervorbringt bzw. welche Effektmöglichkeiten es gibt.

    Was verstehst du unter "super Effekte"?
    Wie schon gesagt wurde, kriegst du Animationen nur mit JS, Flash, animierten Gifs o.ä.
    Wenn es dir nur um Farbverläufe, Schatten o.ä. geht, darfst du dich in einem Bildbearbeitungsprogramm deiner Wahl austoben und z.B. Hintergrundgrafiken erstellen und per CSS auf die Listen-Elemente verteilen.
    Mit CSS 3 kannst du auch Grafiken für Rahmen festlegen.

    Grüße, Matze

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln