Hintergrundbilder - Der User soll weniger Scrollen müssen.

[firecracker1177]

Hallo Forum

ich hoffe ich drücke mich richtig aus. Weiß die Fachbegriffe nicht.

Ich habe für meine Firma mit GoLive 9 meine Webpräsentation erstellt. Mir gefällt aber so manches noch nicht.

Ich habe auf anderen Seiten bemerkt, dass dort Hintergrund-Bilder verwendet werden, die bei unterschiedlichen Rechnern andere Größen zu haben scheinen. Ich muss komischerweise bei meinem Rechner im Büro, der eine viel höhere Auflösung hat bei machen Seiten nicht scrollen. Bei meinem Notebook aber bei derselben Seite auch nicht, obwohl es eine niedrigere Auflösung hat. Es scheint so, als ob sich das Hintergrundbild der HP an die Auflösung anpasst (an den Browser) und zwar so, das der User nie scrollen muss. Ich hoffe ihr wisst wie ich das meine. Ich habe auf meiner HP den Hintergrund in einer Ebene platziert die eine bestimmte Größe hat. Das hat zur Folge das ein User scrollen muss, ein anderer nicht. Dieser Hintergrund hat aber keinen Inhalt. Er könnte also eigentlich fehlen. Das sähe nur blöd aus, weil ich das nicht so gern weiß hätte. Was mir auch schon mal aufgefallen ist, das nur ein ganz schmaler Streifen angezeigt wird, wenn man sich die Hintergrundgrafik anzeigen lässt. Dieser wird dann wohl auf die gesamte Seite ausgedehnt. Hat das mit meinem Problem zu tun?

Eine weitere Frage: Wie und wo bringe ich Werbung unter, z.B. Adword-Anzeigen. Hierfür würde sich doch ein Hintergrund anbieten, oder? Wie baue ich Werbung in meine HP ein?

Gruß,
Timo

[UweB]

Hallo firecracker,

Was mir auch schon mal aufgefallen ist, das nur ein ganz schmaler Streifen angezeigt wird, wenn man sich die Hintergrundgrafik anzeigen lässt. Dieser wird dann wohl auf die gesamte Seite ausgedehnt.

Ausdehnen wäre möglich. Wahrscheinlicher ist aber, dass die Grafik wiederholt wird.
Um das genau zu sagen, müsstest du schon einen Link zu einem Beispiel bringen.

Ich habe auf meiner HP den Hintergrund in einer Ebene platziert die eine bestimmte Größe hat.

Warum? Du kannst für jede Seite, oder auch jede Ebene einen Hintergrund festlegen. Dies kann eine Grafik oder eine Farbe sein. Du musst also keine weitere Ebene als Hintergrund einfügen.

Ich habe auf anderen Seiten bemerkt, dass dort Hintergrund-Bilder verwendet werden, die bei unterschiedlichen Rechnern andere Größen zu haben scheinen. Ich muss komischerweise bei meinem Rechner im Büro, der eine viel höhere Auflösung hat bei machen Seiten nicht scrollen. Bei meinem Notebook aber bei derselben Seite auch nicht, obwohl es eine niedrigere Auflösung hat

Wenn du als Hintergrund eine Ebene anlegst, bestimmt die Größe der Ebene die Größe des scrollbaren Bereichs. Wenn die Ebene also größer als der Inhalt ist, wird die Seite trotzdem scrollbar, um bist an das Ende der Ebene zu kommen.
Wenn du dagegen den Hintergrund der Seite über CSS festlegst, wird eine zu große Grafik ggf. abgeschnitten, oder wiederholt. Die Hintergrundgrafik beeinflußt jedenfalls nicht die Größe der Seite.

Gruß
Uwe

[firecracker1177]

Hallo Uwe,

das ist es was ich meinte. Vielen Dank für diesen Hinweis.

Auf meiner Seite http://www.dygryn-musik.de siehst du mein Hintergrundbild. Es ist so wie du sagtest: Die Ebene dieses Bildes bestimmt den Scrollbereich. Kann man das Bild in GoLive auch so benutzen wie du es gerade beschrieben hast? Also so dass es abgeschnitten oder verlängert wird? Wie mache ich das in GoLive?

Was bestimmt dann den Scollbereich, wenn es nicht die Ebene eines Bildes ist?

Gruß,
Timo

[UweB]

Hallo Timo,
ich arbeite nicht mit GL9, daher kann ich dir nicht die genauen Schritte sagen.
In GL8 gab es einen CSS-Editor. Dort konntest du für jedes Element, in deinem Fall "Ebene 1", den Hintergrund festlegen. Du solltest das Bild vorher auf die Breite von einem Pixel zurecht schneiden. Dann fügst du den Link auf das Bild als Hintergund ein, und legst auch die weiteren Eigenschaften im CSS-Editor fest ( z.B. Wiederholen: horizontal ).
Wenn du dich mit CSS auskennst, kannst du die Eigenschaften von Ebene 1 natürlich auch im Quellcode bearbeiten.
Die Länge der Seite sollte dann von dem Element abhängen, dass am weitesten nach unten ragt. Derzeit ist das "Ebene 12", und hat somit mit dem Hintergrund gar nichts zu tun.
Ich würde die Ebenen insgesamt anders verschachteln, das setzt aber Grundkentnise ( HTML/CSS ) voraus. Ich vermute, die derzeitige Anordnung entsteht durch GL9.

Und ganz wichtig: Du solltest unbedingt eine Möglichkeit schaffen die Musik abzustellen, besser noch ganz darauf verzichten. Mir gefällt die Musik zwar, nur werde ich nicht gerne so überfallen. Manch einer wird vor Schreck ganz schnell den Browser schließen und die Seite nicht mehr betreten. Du kannst ja nicht wissen, wie laut die Besucher ihre Lautsprecher eingestellt haben. In einem Büro mit mehreren Arbeitsplätzen kann das wirklich unpassend sein.
Hörproben hast du ja an anderer Stelle eingebaut. Das sollte reichen.

Gruß
Uwe

[firecracker1177]

Das mit dem Sound habe ich noch gar nicht bedacht. Vielen Dank. Ich habe das geändert.

Ich habe nun das Bild für den Hintergrund geändert. Es hat die Größe von 1x700 Pixel. Ich habe auch im Inspektor die Größe 1x700 angegeben. Die Ebene 1 habe ich als Hintergrund im CSS Editor gewählt und bei den Einstellungen - Widerholen - Horizontal gewählt. Dann erhalte ich aber nur einen weißen Hintergrund. Sehen kannst du das unter http://www.dygryn-musik.de/impressum1.html

Gruß,
Timo

[firecracker1177]

Nochmal ich. Ich glaube ich habe es. Folge dem Link bitte nochmal: http://www.dygryn-musik.de/impressum1.html

Ist es so richtig?

[UweB]

Hallo Timo,
im Prinzip ist das richtig.
Nun gibt nicht mehr die Grafik, sondern die Ebene die Größe vor. Da die Ebene nun 650px hoch ist, wird die Grafik, die eigentlich 700px lang ist, abgeschnitten.
Die Größen deiner Ebenen solltest du alle noch mal kontrollieren, die Boxen sind zum Teil kleiner als ihr Inhalt. Wahrscheinlich kannst du auf die Höhenangaben verzichten.
Auch die negativen Werte in den top und left Werten deuten darauf hin, dass du Entwurfsfehler einfach an der falschen Stelle ausgleichst. Das kann sich später bei weiteren Änderungen rächen.
Die Ebene 1, die als Hintergrund dient, sollte für dein Beispiel z.B. top und left gleich 0 enthalten. Wenn sie dann nicht richtig liegt, stimmt ihre Größe nicht. ( Du könntest aber für Ebene 1 auch einmal "left: 50%;margin-left: -640px;" versuchen. Dann wird die Seite mittig ausgerichtet.)
Die Ebenen 5-8 liegen alle in Ebene 2. Wenn du die alle um 35px hochziehen musst, wäre es doch angebrachter, die Ebene 2 35px höher zu platzieren.
Die Ebenen 9-11 müssten dann natürlich 35 px tiefer rücken. Die Abhängigkeiten der Werte sind dann bei einer späteren Bearbeitung schneller zu durchschauen. Das spart Zeit und senkt die Fehleranfälligkeit.

Gruß
Uwe

[firecracker1177]

Ich überlege ob ich die Seite nochmal ganz neu baue. Alle Bilder habe ich ja, dürfte also kein Problem sein. Ich würde gern alles mittig haben.

Kannst du mir Tipps für die Größe der Seite geben? Ich hatte vor kurzem Windows 7 auf meinem Rechner installiert. Standardmäßig arbeitet Windows 7 mit viel höheren Auflösungen als XP. Meine HP wurde sehr klein angezeigt. Was wäre eine gute Größe für eine HP in der heutigen Zeit und beim heutigen Stand der Technik?

Gibt es Regeln die ich beachten sollte, wenn ich die HP neu aufbaue? Du hast ja von einigen Fehlern in meiner Seite geschrieben. (Die negativen Werte stammen übrigens von der allerersten Ebene die ich überhaupt jemals in diese Seite eingefügt habe. Ich habe mit dieser Ebene begonnen. Mich störte, dass bei Werten von "0" weiße Ränder um das Bild stehenblieben, daher "-1".) Kannst du mich vielleicht auf ein Tutorial oder so verweisen, wo beschrieben ist wie ich diese Fehler schon von beginn vermeide?

Ich habe für jeden Button auf der Seite eine eigene Ebene gewählt. Macht man das so? Falls Nein, wie kann man es besser lösen?

[firecracker1177]

Hallo Uwe,

bitte sieh dir noch mal diese Seite an http://www.musikmph.de/
Kann ich das mit dem Hintergrund mit der Methode, die du vorher beschrieben hast, so hinbekommen? Der eigentliche Inhalt ist ja nur in der Mitte zu finden. Wenn ich mein Fenster verkleinere erscheint erst dann ein Scrollbalken, wenn das Fenster des Browsers den Inhalt "berührt".

[UweB]

Der eigentliche Inhalt ist ja nur in der Mitte zu finden. Wenn ich mein Fenster verkleinere erscheint erst dann ein Scrollbalken, wenn das Fenster des Browsers den Inhalt "berührt".

Das ist bei deinen Seiten genauso, wobei der Inhalt bis zur untersten Kante des untersten Bildes geht. Wenn eine Ebene noch tiefer geht, zählt auch das zum Inhalt.

Ich überlege ob ich die Seite nochmal ganz neu baue. Alle Bilder habe ich ja, dürfte also kein Problem sein.

So verkehrt ist dein Aufbau gar nicht. Du solltest dir nur ein paar Grundkenntnisse in Sachen HTMl und vor allem CSS aneignen. Dann kannst du Änderungen direkt im Quellcode vornehmen. Deine Ebenen haben teilweise falsche Größen und werden dann durch die Inhalte ( Grafiken ) vergrößert.

Ich würde gern alles mittig haben.

Wie das geht hatte ich oben schon angedeutet.

Kannst du mir Tipps für die Größe der Seite geben? Ich hatte vor kurzem Windows 7 auf meinem Rechner installiert. Standardmäßig arbeitet Windows 7 mit viel höheren Auflösungen als XP

Win 7 benutzt, wie auch Win XP, zunächst die Standard Auflösung deines TFT-Monitors. Wahrscheinlich hast du die Auflösung unter Win XP verändert, so dass Win 7 nun auf dem selben PC eine andere benutzt.
Für eine Website darf das ohnehin keine Rolle spielen. Du weißt ja nicht, was deine Besucher für Systeme und Monitore haben. Wenn du ein möglichst großes Publikum ansprechen willst, solltest du weiterhin eine Breite von 960px benutzen. Natürlich haben die Meisten heute größere Auflösungen, nur benutzt kaum einer den Browser im Vollbild. Auch dürften durch die hohe Verbreitung von Netbooks und Subnotebooks tatsächlich wieder mehr Besucher mit kleinen Bildschirmen unterwegs sein.

Gibt es Regeln die ich beachten sollte, wenn ich die HP neu aufbaue?

Du solltest du mit HTML und CSS beschäftigen, und nicht die Automatismen von GoLive benutzen. Einen guten Einstieg findest du z.B. unter http://www.css4you.de/.

Mich störte, dass bei Werten von "0" weiße Ränder um das Bild stehenblieben, daher "-1".

Dann solltest du dem Element "HTML" 0 Abstände zuweisen. Das liegt noch oberhalb der ersten Ebene ( Der Begriff Ebene wird fast nur in GoLive benutzt, tatsächlich sind es DIV-Elemente oder Div-Boxen oder einfach Boxen ).
Oft setzt man auch mit " * { margin:0; padding: 0 }" erst einmal alle Abstände für alle Elemente auf Null. Dafür musst du dann aber auch für alles später auch neue Abstände festlegen, was aber durchaus Vorteile haben kann.

Ich habe für jeden Button auf der Seite eine eigene Ebene gewählt. Macht man das so? Falls Nein, wie kann man es besser lösen?

Wenn die Buttons ein Menü darstellen legt man das normalerweise als Liste an. Der Rest wirst dann wieder mit CSS gelöst. Suche mal nach "CSS Menü". Da müssten eigentlich ein paar Erklärungen kommen.

Ich habe nun etwas den Überblick verloren, hoffe aber auf alle Fragen eingegangen zu sein.

Gruß
Uwe

[firecracker1177]

Hallo nochmal. Habe mal ein bisschen rumprobiert. Ich habe es nun herausgefunden, wie das mit dem Hintergrund geht. Habe auch mein Bild (ich ändere die Größe noch auf 960 Pixel) eingefügt und zwar ohne Ebene. http://www.dygryn-musik.de/impressum1.html

Vorher habe ich erst eine Ebene eingefügt und dann in die Ebene das Bild. Muss das sein oder kann ich ein Bild in GoLive auch ohne Ebene einfügen? Was ist mit dem Menü? Muss ich hüerfür eine Ebene einfügen, oder kann das auch nur als Bild eingefügt werden?

[firecracker1177]

Hallo Uwe,

ich habe nun das Bild geändert und eingefügt. http://www.dygryn-musik.de/impressum1.htmlWenn man den Rahmen des Browsers anfasst und die Größe ändert, bewegt sich das Bild mit, das Menü bleibt aber starr. Wie kann ich das Menü nun so ändern, das es immer in der Mitte bleibt? So wie es auch beim Bild ist.

Ich kann Bilder, die ohne Ebene eingefügt sind nicht verschieben. Bei Ebenen kann ich die Ebene auswählen und ihr Koordinaten geben. Wie platziere ich dann die weiteren Bilder so dass sie immer in der Mitte bleiben und trotzdem alle richtig zueinander stehen? Ich hoffe du verstehst, wie ich das meine.

[firecracker1177]

Habe es hinbekommen, denke ich. Habe alles kompett umgebaut. Was hältst du davon? Kannst du irgendwelche Fehler entdecken?
Gruß,
Timo

Hier der Link:
http://www.dygryn-musik.de/

[UweB]

Hallo Timo,
das sieht doch gut aus.

Ob du die Hintergrundgrafik <body> oder einer den Inhalt einschließenden Box zuweist, hängt vom gewünschten Ergebnis ab. So, wie du es nun machst, ist es richtig, führt aber, wie du ja selber siehst, zu einem anderen Ergebnis, als Vorher.

Ich hätte die alles einschließende Box, die du ja vorher hattest, trotzdem weiter bestehen lassen. Der Vorteil wäre, dass du nur diese zentrieren muss. Nun zentrierst du drei Boxen und musst Änderungen ggf. auch dreimal ausführen.
Bei "Ebene 3" benutzt du selber diesen Vorteil: Du zentrierst "Ebene 3" und die "Ebenen 4-6" bleiben immer an der selben Position innerhalb von "Ebene 3".
Um den Quelltext besser lesen zu können, wäre gut andere Bezeichnungen für die Div-Box zu wählen. Ich weiß, die Bezeichnungen "Ebene X" werden von GoLive automatisch vorgegeben. Trotzdem sollte man das anpassen.

Ich würde es vielleicht so Lösen:

<body ...>
  <div id="center"">
    <div id="kopf">...</div>
    <div id="menue">...</div>
    <div id="inhalt">
      <div id"inhalt-links">...</div>
      <div id"inhalt-rechts">...</div>
    </div>
  </div>

Wie du die div-Boxen benennst, ist natürlich deine Sache, du sollst den Quellcode ja lesen können.

Die "Ebenen 4,6,7,8" sind meiner Meinung nach unnötig.
Die Ebenen 4,6,8 enthalten jeweils ein Bild. Du kannst die gewünschten Eigenschaften auch direkt diesen Bildern zuordnen.
Mit Ebene 7 gleichst du nur fehlende Angaben bei Ebene 5 aus.

Weiterhin benutzt du das font-Tag. Das liegt sicher an der Bedienung von GoLive.
Besser ist es, du definierst die Schriftarten, -Größen usw. für die einzelnen Boxen oder Tags.

Du benutzt in der "Ebene 5 " nur eine Formatierung, für die Schrift. Also reicht es auch diese Formatierung in dieser Ebene vorzunehmen.
Ausnahme: "Herzlich Willkommen bei der Dygryn Musikgruppe!"
Dies ist eine Überschrift. Also solltest du es auch als Überschrift anlegen.
Du musst dann nur noch der Überschrift <h1> eine Formatierung zuweisen, und schon stimmt es.
Gleiches gilt für die Schrift in der Tabelle.

Als nächstes solltest du dann die CSS Definitionen in eine extra Datei auslagern, damit du sie nicht in jeder Seite neu anlegen musst. Du kannst dann von allen Seiten auf die selbe Datei zugreifen. Eine Änderung in dieser Datei, würde gleichzeitig für alle Seiten gelten.

Bei den Ebenen 1 und 3 hast du "left" jeweils doppelt festgelegt.
Sicher sind da noch andere kleine Fehler.
Wenn du mit FireFox arbeitest, solltest du dir die Erweiterungen "Web Developer" und "FireBug" installieren. Die helfen dir den Aufbau deiner Seite zu verstehen, Fehler zu finden. "Web Developer" enthält u.a. Links zu verschiedenen Validatoren, die deinen Quellcode auf Fehler untersuchen. Von GoLive automatisch erstellter Quellcode kann in dieser Hinsicht allerdings niemals fehlerfrei sein. Du musst also bei jeder Meldung abwägen, ob "wichtig" oder nicht.

Gruß
Uwe

[firecracker1177]

Hallo Uwe.
Ich werde deine Tipps nach und nach beherzigen. Ich habe aber ein neues Problem entdeckt: Bitte öffne mal mit dem Internet-Explorer die Seite http://www.dygryn-musik.de/Komp_OST.html
Der Player den ich verwende geht, nach dem betätigen des "Play"-Buttons auf und sofort danach wieder zu. Woran liegt das? Habe bemerkt, dass der Player nur mit Firefox geöffnet bleibt. Bei Google Chrome, IE, Safari klappt es nicht. Habe den Player seit Wochen so eingerichtet und gar nicht bemerkt, dass der er Zicken macht, da ich nur Firefox benutze.

Gruß,
Timo