Kai: Startseite als eine Grafik möglich?

Hallo,

ich möchte für einen Freund eine kleine Homepage machen mit 4 Menüpunkten.
Nun wollte ich mich aber nicht eines CMS bedienen sondern wollte gerne etwas individueller sein.
Ich würde deswegen gerne ein JPEG Bild als Startseite hinterlegen bei dem ich einzelne Bereiche (Notizzettel) verlinken möchte, sodass ich darüber in die Untermenüs springen kann.

Ich habe also mit Gimp eine Grafik gemacht und sie auf den Webspace hochgeladen.

www.ln-holzbau.lima-city.de

Macht es Sinn so vorzugehen oder ist es sinnvoller einen generellen Hintergrund zu machen und die Grafiken alle einzeln darüber zu lagern?
Oder macht beides keinen Sinn und es gibt eine noch bessere Lösung?

ich wäre sehr dankbar für Hilfe.

Gruß

Kai

  1. Hello,

    ich möchte für einen Freund eine kleine Homepage machen mit 4 Menüpunkten.
    Nun wollte ich mich aber nicht eines CMS bedienen sondern wollte gerne etwas individueller sein.
    Ich würde deswegen gerne ein JPEG Bild als Startseite hinterlegen bei dem ich einzelne Bereiche (Notizzettel) verlinken möchte, sodass ich darüber in die Untermenüs springen kann.

    Ich habe also mit Gimp eine Grafik gemacht und sie auf den Webspace hochgeladen.

    www.ln-holzbau.lima-city.de

    Macht es Sinn so vorzugehen oder ist es sinnvoller einen generellen Hintergrund zu machen und die Grafiken alle einzeln darüber zu lagern?
    Oder macht beides keinen Sinn und es gibt eine noch bessere Lösung?

    Wirklich sinnvoll sind große Grafiken und Bilder nicht, wenn man als User keine Wahl hat, sie auch ausgeblendet zu lassen. Sie kosten schließlich eine Menge Datenübertragung.

    Besser wäre es dann aber mMn, das Holzmuster in den Hintergrund zu legen, sodass es jeden Viewport voll ausfüllt, unabhängig von der Größe und Auflösung. Die Bilder und Schriftzüge kannst Du dann darüber legen, was dann wenigstens den Vorteil hat, dass sie jeweils noch ein alt-Attribut erhalten (für Behinderte und Suchmaschinen) und leichter austauschbar sind.

    Liebe Grüße aus dem schönen Oberharz

    Tom vom Berg

    --
     ☻_
    /▌
    / \ Nur selber lernen macht schlau
    http://bergpost.annerschbarrich.de
    1. Ok, aufgrund des Tipps wollte ich das nun verändern.
      Dafür habe ich aus dem Holzhintergrund eine eigene .jpg Datei gemacht und sie unter bilder/hintergrund.jpg abgelegt.

      Dann habe ich von einer anderen Seite folgenden Code in eine .css Datei reinkopiert:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" >  
      <html>  
      <head>  
      <style type="text/css">  
      </head>  
      <body>  
      {  
      background-image: url (bilder/hintergrund.jpg);  
      border:2px solid black;  
      }  
      </style>  
      </body>  
      </html>
      

      leider scheint der Code fehlerhaft zu sein, da mir weiterhin ein weisser Hintergrund angezeigt wird. Kann mir jemand sagen wo der Fehler liegt?

      1. So sieht's mit css innerhalb von HTML aus:

        DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" >  
        <html>  
        <head>  
        <style type="text/css">  
        body {  
         background-image: url (bilder/hintergrund.jpg);  
         border:2px solid black;  
        }  
        </style>  
        </head>  
        <body>  
        Text/Inhalt  
        </body>  
        </html>
        

        Paul

        1. Vielen Dank,

          ich habe es lösen können. Da hat sich ein leerzeichen eingeschlichen im Quelltext. Kaum habe ich es entfernt, funktioniert es.

          Vielen Dank für die Hilfe hier und bis sehr bald.

          Kai

          1. Hello,

            Vielen Dank für die Hilfe hier und bis sehr bald.

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            <html>
            <head lang="de-DE">
              <meta http-equiv="X-UA-Compatible" content="IE=8" />
              <link rel="stylesheet" type="text/css" href="formate.css">
            </head>
            <body>
            <center>
            <img src="bilder/schriftzug4.gif" width="55%" alt="banner"/>
            </center>
            <img src="bilder/notiz.gif"width="10%"alt="Notiz"/>
            </body>
            </html>

            Ich würde ins alt-Attribut nicht "banner" schreiben, sondern "Litschel Naturholzbau" oder "Firmenschriftzug Litschel Naturholzbau", oder so ähnlich. Dann kann die Suchmaschine auch etwas damit anfangen...

            Und die Zettel würde ich dann als GIFs mit transparentem Hintergrund bauen, dann können sie auch schräg hängen, oder rund sein, oder eine abgeisssene Ecke haben, usw.

            Im alt-Attribut dann wieder den Text, den sie als Bild tragen.

            Liebe Grüße aus dem schönen Oberharz

            Tom vom Berg

            --
             ☻_
            /▌
            / \ Nur selber lernen macht schlau
            http://bergpost.annerschbarrich.de
            1. Hello,

              ich hätte noch ein bisschen anderes Brett für Dich:

              Kannst Du auch größer haben:

              Und dann im Loch das Menu als "Film" laufen lassen von unten nach oben, wie ein Abspann.

              :-)

              Liebe Grüße aus dem schönen Oberharz

              Tom vom Berg

              --
               ☻_
              /▌
              / \ Nur selber lernen macht schlau
              http://bergpost.annerschbarrich.de
              1. Also das Brett ist sehr schön, ist es lizenzfrei?

                das mit dem Slider im Hintergrund ist natürlich eine geniale und schöne Idee, übersteigt aber glaube ich meine Fähigkeiten um ein Vielfaches.

                Obwohl es für die Slider ja fertige Skripts gibt, aber wie soll das Brett denn dann den Slider überlagern?
                Oje, ich glaube das sprengt wirklich den Rahmen.

                Auf der anderen Seite habe ich natürlich auch Interesse sowas zu lernen.
                Was muss ich dafür können?

                Danke für die Idee und die Hilfe.

                Kai

                1. Hello,

                  Also das Brett ist sehr schön, ist es lizenzfrei?

                  Du darfst das Brettfoto gerne verwenden. Ich habe es selber aufgenommen und das Brett existiert hier auch noch irgendwo, falls jemand meinen sollte, er hätte bessere Rechte daran :-)

                  das mit dem Slider im Hintergrund ist natürlich eine geniale und schöne Idee, übersteigt aber glaube ich meine Fähigkeiten um ein Vielfaches.

                  Dazu hat Felix ein paar nette Sachen gemacht.

                  Obwohl es für die Slider ja fertige Skripts gibt, aber wie soll das Brett denn dann den Slider überlagern?

                  Du könntest das Loch freistellen (transparent). Dann könntest Du den Text drunterlegen mit einem anderen z-index.

                  Liebe Grüße aus dem schönen Oberharz

                  Tom vom Berg

                  --
                   ☻_
                  /▌
                  / \ Nur selber lernen macht schlau
                  http://bergpost.annerschbarrich.de
                  1. Hallo,

                    Wer ist denn Felix und wo kann ich das denn dann nachlesen?

                    Du könntest das Loch freistellen (transparent). Dann könntest Du den Text drunterlegen mit einem anderen z-index.

                    Das Brett habe ich bereits freigestellt und mache mich später daran einen Slider darunter zu packen, dazu suche ich gerade noch ein skript.
                    Vielen Dank dafür, sieht echt gut aus : - )

                    1. Om nah hoo pez nyeetz, kai!

                      Wer ist denn Felix und wo kann ich das denn dann nachlesen?

                      Felix ist Felix Riesterer, der Lehrgang zum vernünftigen Schreiben eines JavaScripts befindet sich im Wiki.

                      Matthias

                      --
                      1/z ist kein Blatt Papier.

                      1. Hallo,

                        Ok, ich habe gerade auf das Wiki draufgeschaut und ich denke dass ich das mal von Grund auf lernen muss, da ich davon nichts verstehe.
                        Kurzfristig habe ich mich jetzt eines fertigen Skripts bedient.
                        Das funktioniert soweit auch ganz gut, allerdings muss die Positition natürlich angepasst werden.

                        Dafür wollte ich das so machen:

                        in der CSS Datei eine Klasse für die Slideshow definieren

                        #slideshow

                        {  
                          
                        position:absolute;  
                          
                        width:550px;  
                          
                        height:280px;  
                          
                        overflow:hidden;  
                          
                        }
                        

                        (die Positionsdaten sind nur beispielhaft)

                        und dann in der .html Datei das Java Skript in ein folgende tags einbinden:

                        <div id="SlideShow">hier das komplette javaskript als Inhalt
                        </div>

                        geht das so, oder wie kann man die Position eines Javaskriptes bestimmen?

                        Vielen Dank.

                    2. Om nah hoo pez nyeetz, kai!

                      Wer ist denn Felix und wo kann ich das denn dann nachlesen?

                      Felix ist Felix Riesterer und den Lehrgang zum vernünftigen Schreiben eines Javascripts gibts im Wiki

                      Matthias

                      --
                      1/z ist kein Blatt Papier.

                    3. Hello,

                      Das Brett habe ich bereits freigestellt und mache mich später daran einen Slider darunter zu packen, dazu suche ich gerade noch ein skript.

                      Denk auch an die ganzen Laptops, die meistens Breitmaulfrösche sind (16 zu 9), und daher also oft nur noch 768 Pixel Bildschirmhöhe gesamt haben. Dazu sollte das Motiv etwas kleiner sein, damit man nicht zuviel Scrollen muss.

                      Liebe Grüße aus dem schönen Oberharz

                      Tom vom Berg

                      --
                       ☻_
                      /▌
                      / \ Nur selber lernen macht schlau
                      http://bergpost.annerschbarrich.de
      2. Also jetzt habe ich nochmal nach css etwas gegoogelt und habe gesehen, dass das Beispiel ja völlig daneben zu sein scheint.

        ich würde die formate.css so schreiben:

        body  
        {  
        background-image: url (bilder/hintergrund.jpg);  
        border:2px solid black;  
        }
        

        Das sollte ja dann reichen, oder?

        funktioniert aber trotdem leider nicht.

        1. مرحبا

          body

          {
          background-image: url (bilder/hintergrund.jpg);
          border:2px solid black;
          }

          
          > Das sollte ja dann reichen, oder?  
            
          Eigentlich ja.  
            
          
          > funktioniert aber trotdem leider nicht.  
            
          Liegt das Bild wirklich im Ordner "bilder" und wo liegt dieser Ordner vom aufrufenden Pfad ausgehend?  
          Evtl. ist es auch nur dein Browser-Cache.  
            
          mfg
          
          -- 
          Die neuen 4 Jahreszeiten: Frühling, ARSCHLOCH, Herbst und Winter!
          
          1. das Bild liegt wirklich im Ordner "bilder" und der Ordner liegt auf der gleichen Ebene wie die css Datei.

            Am Cache lag es leider nicht.

            www.ln-holzbau.lima-city.de

            مرحبا

            body

            {
            background-image: url (bilder/hintergrund.jpg);
            border:2px solid black;
            }

            
            > > Das sollte ja dann reichen, oder?  
            >   
            > Eigentlich ja.  
            >   
            > > funktioniert aber trotdem leider nicht.  
            >   
            > Liegt das Bild wirklich im Ordner "bilder" und wo liegt dieser Ordner vom aufrufenden Pfad ausgehend?  
            > Evtl. ist es auch nur dein Browser-Cache.  
            >   
            > mfg