Umstellung der Website auf CSS und php

[FlashMan]

Was hältst Du davon, wenn Du die FlashPlayer-Datei einfach auslagerst in die CSS-Datei.

Über den Sinn und Zweck von Musikdateien auf Webseiten läßt sich übrigens trefflich streiten. Lange Ladezeit - die meisten Nutzer wollen keine Musikbox sondern eben pure Informationen. Das vergißt man oft allzu schnell.....

Auslagern in CSS geht? Das wusste ich nicht! Vielleicht kannst Du es mir ja ganz kurz erklären.

Ich weiß, dass Musik nicht bei allen ankommt. Aber ich kann mich noch nicht so richtig davon trennen.  :'( Vielleicht gehe ich ja doch irgendwann mal den Schritt. Anfangs war meine HP voll von Flash. Daher auch die Webadresse. Mittlerweile ist eigentlich nur noch der Player übriggeblieben.

Ein anderes Problem sind mein Forum und die Fotogalerie. In der jetzigen Form könnte ich sie wahrscheinlich auch nur über IFRAMES einbinden. Doch da kämpfe ich noch mit dem Design.

PS: Vielleicht sollte mal jemand den Tread teilen. Wir schweifen ja mittlerweile vom eigentlichen Thema ab.  ;)

[woelfi]

Auslagern in CSS geht? Das wusste ich nicht! Vielleicht kannst Du es mir ja ganz kurz erklären.

Ja sicher. In der CSS-Datei kannst Du sämtliche Arten von Dateien auslagern, Bilddateien und sicher auch Flash-Dateien. Sieh Dir einfach mal den Quellcode der Globetrottersite an:

/

Die CSS-Datei findest Du da ganz oben im head-Bereich:

Code Auswählen Erweitern

<link rel="stylesheet" href="style/globetrotter.css" type="text/css" />

Das ist die ausgelagerte Datei. In ihr sind z. B. alle häufig wiederkehrenden Bilder der Auswahlseiten gespeichert. Vorteil: die Bilder werden nur einmal aus der CSS-Datei auf den Rechner des Surfers geladen und dann bei jedem neuen Seitenaufruf vom Rechner des Surfers angefordert und nicht aus dem Internet (schnellerer Seitenaufbau).

Hier ein Auszug des Quellcodes aus der CSS:

Code Auswählen Erweitern

/*-----Bilder--------------*/
.imgmaur {
       background-image: url(../Images/icon/wsss_1989_04_049.gif);
       text-decoration: none;
       background-repeat: no-repeat;
       position: static;
       width: 49px;
       height: 33px;
       float: right;
       background-position: left center;
}
.imgsey {
       text-decoration: none;
       background-image: url(../Images/icon/wsss_1989_11_121.gif);
       background-repeat: no-repeat;
       height: 30px;
       width: 50px;
       float: right;
       background-position: left center;
}
.imgsuf {
       background-image: url(../Images/icon/wsss_1993_12_012.gif);
       background-repeat: no-repeat;
       text-decoration: none;
       height: 44px;
       width: 50px;
       background-position: left center;
}

[woelfi]

Das Problem mit dem Forum bleibt natürlich. Entweder Du bindest es per iframe ein oder Du machst es so, wie auf der Globetrotter-Site per Link-Einbindung.

Das hätte natürlich auch den großen Vorteil, daß Dein Forum besser bei den Suchmaschinen erfaßt wird. Frames werden von den SUMAS ja nicht erkannt, deshalb wird der Content aus den Frames auch nicht indiziert.

Gleiches gilt für die Fotogalerie.

Bei der Einbindung per Link kann man den Style der Fotogalerie und des Forums ja an die eigene Webite anpassen.

[FlashMan]

Wieder einmal vielen Dank für Deine Hinweise.

Das Prinzip von CSS ist mir schon klar. Ich nutze es ja auch auf meiner HP. Ich habe auf meiner HP ja schon alles mögliche in der CSS-Datei definiert (Schriftfarben, -größen, etc.). Ich bin aber noch nicht auf die Idee gekommen, dort Bilder oder andere Dateien auszulagern. Das werde ich mir auf jedenfall mal genauer anschauen.

Bei meinem Forum und der Galerie hab ich auch schon daran gedacht, die Variante der Link-Einbindung zu nutzen. Ich werde mich doch nochmal daransetzen und alles überdenken.

Anfänge der Umstellung der HP befinden sich ja noch auf meiner Festplatte 

Ich denke, wenn im Oktober der neue Reisebericht kommt, ist es sicher eine gute Gelegenheit den Relaunch der HP in CSS zu starten.

Wenn ich Fragen habe, werde ich sicher wieder auf Dich zukommen. 

[woelfi]

Ich habe da noch einen Link für Dich über CSS, kann sehr hilfreich sein:

http://www.css4you.de/

[FlashMan]

Den kenn ich schon. Der hat mir bei meinen bisherigen Versuchen schon viel geholfen.

Aber trotzdem vielen Dank.

[FlashMan]

HI,

ich habe mich jetzt entschlossen meine HP komplett auf CSS ohne Frames umzustellen.

Das Problem mit meinem Musik-Player bleibt jedoch. Soweit ich bis jetzt nachgelesen habe, kann ich swf-Dateien nicht in eine css-Datei auslagern. D.h. ich müsste die SWF-Datei des Players (in dem die Musik gespeichert ist) in jede HTML-Datei einbinden. Dieses bedeutet wiederum, dass bei jeden neuen Seitenaufruf der Player neu geladen wird und die Musik von vorn beginnt. Das ist natürlich NICHTS! 

Kennt jemand von Euch eine andere Möglichkeit Musik steuerbar einzubinden???

Geht es irgendwie mit Streams?

Ich möchte gern meinen Besuchern die Möglichkeit geben, die Musik selbst zu stoppen und wieder zu starten. Dabei soll aber das abgespielte Lied bei einem Wechsel der Unterseiten weiterlaufen.

Danke schon mal.

Gruß.

Christian

PS: In 5 Wochen bin ich auf dem Weg zum Kilimanjaro!    

[woelfi]

Hallo Christian,

hab mir gerade Deine Website noch einmal angesehen, das sieht schon fast perfekt aus.

Ich würde aber noch versuchen, die Umstellung der Tabellen weitgehend auf div-Tags (der Quellcode ist dadurch nicht mehr so aufgebläht) vorzunehmen.

von z.B:

Code Auswählen Erweitern

<div id="box2">
    <div id="menue"> <img src="images/menue.gif" alt="" >
      <div style="position:absolute; width:158px; height:314px; z-index:1; left: 18px; top: 88px;">
        <table border="0" cellpadding="0" cellspacing="0" class="menuetext">
          <tr>
            <td width="13" class="menuetext" height="13" >&raquo;</td>
            <td width="127" height="13"><a href="home.htm" title="Home" class="menuetext">HOME</a></td>
          </tr>
          <tr>
            <td height="8" class="menuetext">&nbsp;</td>

            <td height="9" class="menuetext">&nbsp;</td>
          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="amerika-domrep001.htm" title="ominikanische Republik 1998" class="menuetext">OMINIKANISCHE
              REPUBLIK 1998</a></td>
          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="amerika-kuba001.htm" title="Kuba 1999" class="menuetext">KUBA
              1999</a></td>

          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="amerika-usa2000_001.htm" title="USA 2000" class="menuetext">USA
              2000</a></td>
          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="australien001.htm" title="Australien 2002" class="menuetext">AUSTRALIEN
              2002</a></td>
          </tr>

          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="asien-sri001.htm" title="Sri Lanka &amp; Malediven 2003" class="menuetext">SRI
              LANKA &amp;<br >
              MALEDIVEN 2003</a></td>
          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="amerika-usa2004_001.htm" title="USA 2004" class="menuetext">USA
              2004</a></td>

          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="afrika-tans001.htm" title="Tansania &amp; Sansibar 2006" class="menuetext">TANSANIA&amp;<br >
              SANSIBAR 2006</a></td>
          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="afrika-kenia001.htm" title="Kenia 2007" class="menuetext">KENIA
              2007</a></td>

          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="afrika-kili001.htm" title="Kilimanjaro &amp; Sansibar 2008" class="menuetext">KILIMANJARO
              &amp;<br >
              SANSIBAR 2008</a></td>
          </tr>
          <tr>
            <td height="8" class="menuetext">&nbsp;</td>
            <td height="8" class="menuetext">&nbsp;</td>

          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="guestbook.htm" title="G&auml;stebuch" class="menuetext">G&Auml;STEBUCH</a></td>
          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="forum.htm" title="Forum" class="menuetext">FORUM</a></td>

          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="fotogalerie.htm" title="Fotogalerie" class="menuetext">FOTOGALERIE</a></td>
          </tr>
          <tr>
            <td height="8" class="menuetext">&nbsp;</td>
            <td height="8" class="menuetext">&nbsp;</td>
          </tr>

          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="links.htm" title="Links" class="menuetext">LINKS</a></td>
          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="historie.htm" title="Historie" class="menuetext">HISTORIE</a></td>
          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>

            <td height="13" class="menuetext"><a href="sitemap.htm" title="Historie" class="menuetext">SITEMAP</a></td>
          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="rssinfo.htm" title="RSS-Feed" class="menuetext">RSS-FEED</a></td>
          </tr>
          <tr>
            <td height="8" class="menuetext">&nbsp;</td>
            <td height="8" class="menuetext">&nbsp;</td>

          </tr>
          <tr>
            <td height="13" class="menuetext">&raquo;</td>
            <td height="13" class="menuetext"><a href="impressum.htm" title="Impressum" class="menuetext">IMPRESSUM</a></td>
          </tr>
        </table>
      </div>
    </div>


in z.B.:

Code Auswählen Erweitern

<div class="box2">

               <div class="menue">
<a href="amerika-domrep001.php">OMINIKANISCHE REPUBLIK 1998</a><br />
<a href="amerika-kuba001.php">KUBA 1999</a><br />
               </div>

    </div>


Du siehst, der Code ist um ein Vielfaches einfacher und kürzer. Dabei kannst Du natürlich den Stil, Farben der Links etc. in der CSS-Datei Deinen Erfordernissen entsprechend anpassen.

In der gleichen Weise kannst Du mit den Links auf Deiner Weltkarte verfahren.

[FlashMan]

Hallo Woelfi,

vielen Dank für Deine Tipps.

Ich werden in der nächsten Zeit noch daran arbeiten. Mal schauen, in wieweit ich den Quellcode noch weiter optimieren kann.

Gruß.

Christian