Marco Reisner: Anpassung von Grafiken an verschiedene Auflösungen

Hallo,

ich habe vor kurzem begonnen, mich mit der Programmierung von HTML zu beschäftigen. Da ich aber ein ausgesprochener Newbee bin wäre ich Ihnen sehr dankbar, falls Sie mir bei diesem Problem helfen könnten. (Grobgerüst meiner Web-Site ist dieser Mail angefügt)

Problembeschreibung:

Ich möchte drei waagrechte Frames machen. Oben eine Überschrift, in der Mitte eine Grafik mit Links zu meinen Webseiten (sensitive Felder), unten einen Counter und nochmals Verknüpfungen zu meinen Web-Seiten. Die Überschrift (auch eine Grafik) und die Grafik in der Mitte sollen bei Auflösungen von 800*600 und 1024*768 gut zu sehen sein. Die Programmierung der Frames ist kein Problem; es geht nur um die Anpassung der beiden Grafiken bei verschiedenen Auflösungen.

Fragen:
Wie groß (in Pixel) ist der sichtbare Bereich für meine Webseite im Internet Explorer 4.0x und im Netscape Communicator damit ich die größe meiner Grafiken dementsprechend ändern kann?
Wie kann ich es erreichen, daß meine Grafiken sich automatisch in Höhe und Breite der Auflösung anpassen? Mit Tabellen kann ich angeblich nur die Breite ändern, indem ich diese in Prozent angebe; wie kann ich aber die Höhe anpassen?
Können Sie mir vielleicht eine URL einer Web-Site nennen, die ungefähr das gleiche Prinzip verwendet, wie ich es mir vorstelle, um mir den Quellcode einmal anzusehen?

Falls Jemand das Grobgerüst sehen will, soll er mich einfach anmailen.
            
Danke schon mal im voraus,

Marco Reisner

  1. Wie groß (in Pixel) ist der sichtbare Bereich für meine Webseite im Internet Explorer 4.0x und im Netscape Communicator damit ich die größe meiner Grafiken dementsprechend ändern kann?

    das ist unterschiedlich, je nachdem wie viele leisten im toolbar geoeffnet sind.

    Wie kann ich es erreichen, daß meine Grafiken sich automatisch in Höhe und Breite der Auflösung anpassen?

    automatische aenderung einer grafik hab ich noch nie gesehen, ich glaub nicht, dass das geht.
    du musst schon die grafiken so erstellen, dass sie auch bei kleinen aufloesungen super rueberkommen. am einfachsten ist es, wenn du dir von deinem browser einen screenshot machst und den in photoshop oder was du so hast laedst. dann kannst du immer sehen, wieviel
    platz du in etwa hast und wie das ganze nachher fertig aussehen wird.

    viel spass beim tuefteln,

    pam

  2. Hallo!

    Ich arbeite öfters so, das ich eine "umfassende" Tabelle um alles auf der Homepage lege. Die Tabelle lege ich auf 770 Rixel fest. In diese Tabelle lege ich alles rein und setze das nochmal mit Tabellen fest (Breite mit Pixel). Bei meinem letzten Umbau habe ich sogar nur mit 600 Pixel die Tabelle festgelegt. Ich finde, mit Pixel hat man die Homepage mehr unter Kontrolle. Aus ca. 10-15 Feedbacks/Tag ist mir bekannt, das viele user noch 640x480 nutzen. 800x600 ist immer noch ziemlich verbreitet. Die meisten nutzen  IE 4.0, 4.1.

    Bei der Breite kannst Du von fast 600/800/1024 ausgehen. Die Höhe würde ich minus 15-20 % annehmen.

    Grafiken kannst Du nach meinem Wissen nicht "dynamisch" machen. Letztens war hier einer im Forum, der hat <IMG SRC="xyz.gif/jpg" WIDTH=x% HEIGHT=y%> verwendet. Im IE wurde die Grafik in Prozenten dargestellt. In Netscape hat es nicht funktioniert. Wenn man das Höhen- und Breitenverhältnis nicht einhält, wird die Grafik dann irgendwie langgezogen aussehen.

    Die Grafik darf also nicht größer als 620 Pixel sein, sonst ensteht eine horizontale Scrollbar,
    bei einer Auflösung 640x480. dementsprechen kannst Du sie bei 800x600 größer machen. Denke aber an die User mit 640x480. Die Grafik muß natürlich kleiner werden, wenn Du noch Text daneben schreiben möchtest. Pass auf, das die Worter und Texte je nach Auflösung nicht untereinander stehen.

    mal ein Bsp.
    Ich würde die Grafik nicht zu groß machen. Ich sage mal 200x200, dann hast Du immer noch zu jeder Seite theoretisch 300 Pixel, was eine ganze Menge ist. Du bist also immer noch im 800x600-Bereich. Die Browser haben aber am Rand glaube einen Rand/freiraum von 8-10 Pixel den man nicht nutzen kann, also hast Du nur zu jeder Seite(rechts und links) 290 zu verfügung.
    In diesen 2x290 Pixel kann man dann etwas unterbringen. Text oder.....
    Die Texte/Schriften werden je nach Auflösung unterschiedlich dargestellt. Ich liege mit <FONT SIZE=2> am besten. Bei 1024 läßt es sich gut lesen, bei 800x600 ist es gerade richtig.

    Test Deine Homepage auf jeden Fall im IE und Netscape, die beiden Browser reagieren unterschiedlich auf einige Tags. Opera nutzen jetzt auch viele. Man kann sich bei Opera http://www.operasoftware.com/de (ca.1,4 MB, der ist nicht größer) eine Testversion (3Monate) runter laden. Opera ist noch etwas extremer, Formulare(Pullup-Menüs) sehen dort etwas extrem lang gezogen aus, textfelder etwas groß. Ich weis nicht ob man in den Grundeinstellungen etwas ändern kann.
    Gehe beim Erstellen der Homepage immer von den Grundeinstellungen aus. Also Netscape (Schrift mit variabler Breite=12) und IE ( Schriftarten=mittel). Die meisten User nutzen die Grundeinstellungen. <Font Size=...> sieht je nach Grundeinstellung größer oder kleiner aus.

    Konnte ich Deine eine Frage beantworten?  Ich glaube ich habe etwas weit ausgeholt.

    André

    PS: Vielleicht sollte ich hier mal im Forum ein Statistik presentieren? mmmmmhhhhhh...?

    1. Und nochmal!

      Grafiken kannst Du nach meinem Wissen nicht "dynamisch" machen. Letztens war hier einer im Forum, der hat <IMG SRC="xyz.gif/jpg" WIDTH=x% HEIGHT=y%> verwendet. Im IE wurde die Grafik in Prozenten dargestellt. In Netscape hat es nicht funktioniert. Wenn man das Höhen- und Breitenverhältnis nicht einhält, wird die Grafik dann irgendwie langgezogen aussehen.

      Da ist mir gerade was eingefallen, ich denke, <IMG SRC="xyz.gif/jpg" WIDTH=x% HEIGHT=y%> wird sich nicht prozentual an die Auflösung anpassen. Die Prozente beziehen sich auf die Orginalgröße (Pixel) des Bildes.

      André

    2. Hallo!

      PS: Vielleicht sollte ich hier mal im Forum ein Statistik presentieren? mmmmmhhhhhh...?

      Währe gar keine so schlechte Idee!
      Ich glaube es währe sehr interresant und hilfreich wenn man über die Browser, Bildschirmauflösungen usw. der Nutzer genauer bescheid wüßte?
      Hat jemand sowas oder hat jemand eine URL zu sowas?

      Danke im Voraus!

  3. Wie groß (in Pixel) ist der sichtbare Bereich für meine Webseite im Internet Explorer 4.0x und im Netscape Communicator damit ich die größe meiner Grafiken dementsprechend ändern kann?

    Der Sichtbare Bereich ist doch so groß, wie ich -als WEB-Surfer- es will. D.h. wenn ich mein Fenster in der Größe verändere, dann paßt irgendeine ursprüngliche Annahme nicht mehr!

    Wie kann ich es erreichen, daß meine Grafiken sich automatisch in Höhe und Breite der Auflösung

    Meines Erachtens nur über CGI-Scripts, denn dann kannst Du abfragen, welche Auflösung Dein "Gegenüber" verwendet und anderes mehr. Schätze mal, sowas geht auch mit Java, hab da aber keine Ahnung von. Jedenfalls würde ich in Abhängigkeit von der Bildschirmauflösung unterschiedliche Bilder mittels CGI schicken.

    Bei den wenigen Seiten, die ich gemacht habe, mute ich vorerst (kein CGI beim Provider möglich) den Leuten eine 15"-Scroll-Version zu und den 17"-Nutzern eine (gerade?) noch zumutbare Größe zu. Ein .jpg/.gif

    Bei der Seitengestaltung finde ich ein resize des Browser-Fensters übrigens sehr hilfreich. Es schützt Dich vor Größenannahmen, die garantiert nur für Dich selbst gelten (bezügl. des Fensters;-). So jedenfalls mein Vorgehen.