Bereiche der Website sollen nicht neu geladen werden

sokie · 09.09.2009

AW: Bereiche der Website sollen nicht neu geladen werden

Das mit deinen 'Überblendungen verstehe ich nicht ganz. egal ob man das in flash macht, oder per JS, man braucht doch zum Überbelnden nur die Bilder (und für einen header mit relativ grossen 5 bildern (zB jpg) sollte man mit ca 200-300k(grosszügig gerechnet) eigentlich hinkommen.
Es machtkeinen Sinn,wegen übertriebenen (oder falsch angelegten) optischen Spielereien die Seite in der Benutzbarkeit (für zB User mit langsamen Verbindungen) einzuschränken.
Man verkauft übrigens auch nicht mehr, wenn sich im Header was bewegt.
lass dochmalden header sehen

skyflight1981 · 09.09.2009

AW: Bereiche der Website sollen nicht neu geladen werden

@Sokie Schon klar dass ich mit einem animierten Header
auch nicht mehr Kunden anziehe. Ich habe halt eine recht
schlichte Seite erstellt. Mir ist eine gute Übersicht weitaus
wichtiger. Die Zielgruppe ist halt eher 40+ und hat weniger
Erfahrung mit PC´s. Große Buttons und eine Navigation die
keine Rätsel aufgibt war die oberste Priorität. Damit die
Seite halt ein kleines Highlight hat, habe ich die Animation
eingebunden. SWF schien mir da am geeignetsten. Im
Umgang mit Fireworks bin ich noch nicht so geschult.
Von der Überlegung her müsste man ja die Standbilder ja
herauslöschen können. Ich habe ja 5Bilder pro Sekunde
und eben die fünf großen Bilder die jeweils 4 Sekunden
angezeigt werden. Das sind dann 80 Bilder die überflüssig
wären. Ich erstelle halt eine Bildfolge in Photoshop und
erstelle mit Fireworks die SWF. Ich denke dass man hier
sicherlich etwas verbessern kann. Besser wären auch
8 Zwischenbilder da die Übergänge jetzt recht ruppig
sind.

sokie · 09.09.2009

AW: Bereiche der Website sollen nicht neu geladen werden

die Zwischenbilder zu 'Erstellen' das ist die Sache,die deine Dateigrösse ausmacht. Wenn du auch flash zur Hand hast*, solltest du das per alpha tween machen (keine Zwischenbilder) und wenn nicht, dann ein Javascript benutzen. Wie sich das jetzt liest, brauchst du tatsächlich nur 300k an Bildmaterial.
ja, und swf ist geeignet - nur nicht mit der Vorgehensweise.

*wenn du flash hast gibts hier ein tut : und hier ein Beispiel für den Einsatz
wenn nicht, könnte ich mir auch vorstellen,die 5 Bilder grad zusammenzubacken, wenn du mir die adressen, Überblenddauer und standzeiten in die PN steckst.;-)

skyflight1981 · 10.09.2009

AW: Bereiche der Website sollen nicht neu geladen werden

@sokie Vielen Dank, für den Link zu Deinem Tutorial.
Mit der Hilfestellung brauche ich keine weitere Hilfe.
Ich habe FlashCS3, allerdings haben wir das während
des Studiums nur angekratzt. Mit dem Video sollte
ein neuer Header aber kein Problem sein. Ich muss
sowieso nochmal über die Bilderauswahl nachdenken.
Wenn das Projekt bald akut wird poste ich meine
Ergebnisse.

@Chriss1987

Ich habe jetzt mal die Code-Fragmente eingearbeitet und
aktualisiert. Leider habe ich noch Fehler bei der Ausgabe, ich
vermute dass es an der Abfrage liegt.

Ich bin noch nicht soweit dass ich die Hintergründe kenne warum
man nur bestimmte bei der Ausgabe zulässt. Kann man hier
manipulieren?

Kann man das Menü noch mit Mouseover-Effekten ergänzen?
Ich habe Glasbuttons die beim überfahren sich farblich ändern
sollen. Geht dass noch mit dem Ajax-Code?

Ich poste mal den Quellcode meiner Dateien, Screenshots folgen
die Tage mal.

Hier die index.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kathis Seite</title>
<link href="kathis_website01.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

  <body>
  <!-- hier wird das AJAX-Script eingebunden -->
  <script type="text/javascript" src="ajax.js"></script>
  <div id="hauptfenster">
                 <div id="karte"></div>
    <div id="header">
                  <script type="text/javascript">
   AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','682','height','165', 'title','Header4_swf','src','Bilder/Header4_am_kleinsten','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Bilder/Header4_am_kleinsten' ); //end AC code
  </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="682" height="165" title="Header4_swf">
          <param name="movie" value="Bilder/Header4_am_kleinsten.swf" />
          <param name="quality" value="high" />
   <embed src="Bilder/Header4_am_kleinsten.swf" quality="high" pluginspage= "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="682" height="165"></embed>
             </object>
                 </noscript>
                 </div>
                 <div id="navi">

            <div id="Button_Startseite"><img src="Bilder/Buttons_neu/Button_Startseite Kopie.png" alt="Startseite" onCl"sndReq('startseite.html')" /></div>
                 <div id="Button_Tierpsychologie"><img src="Bilder/Buttons_neu/Button_Tierpsychologie Kopie.png" alt="Tierpsychologie" onClick="sndReq('tierpsychologie.html')" /></div>
                  <div id="Button_Über_mich"><img src="Bilder/Buttons_neu/Button_Über_mich Kopie.png" alt="Über mich" onClick="sndReq('ueber_mich.html')" /></div>
                      <div id="Button_Arbeitsbereiche"><img src="Bilder/Buttons_neu/Button_Arbeitsbereiche Kopie.png" alt="Arbeitsbereiche" onClick="sndReq('arbeitsbereiche.html')" /></div>
                     <div id="Button_Ernährungsberatung"><img src="Bilder/Buttons_neu/Button_Ernährungsberatung Kopie.png" alt="Ernährungsberatung" onClick="sndReq('ernaehrungsberatung.html')" /></div>
                  <div id="Button_Bachblütentherapie"><img src="Bilder/Buttons_neu/Button_Bachblütentherapie Kopie.png" alt="Bachblütentherapie" onClick="sndReq('bachbluetentherapie.html')" /></div>
                  <div id="Button_Leistungen"><img src="Bilder/Buttons_neu/Button_Leistungen Kopie.png" alt="Leistungen" onClick="sndReq('leistungen.html')" /></div>
                  <div id="Button_Kontakt"><img src="Bilder/Buttons_neu/Button_Kontakt Kopie.png" alt="Kontakt" onClick="sndReq('kontakt.html')" /></div>
                  <div id="Button_Gästebuch"><img src="Bilder/Buttons_neu/Button_Gästebuch Kopie.png" alt="Gästebuch" onClick="sndReq('gaestebuch.html')" /></div>
                  <div id="Button_Impressum"><img src="Bilder/Buttons_neu/Button_Impressum Kopie.png" alt="Impressum" onClick="sndReq('impressum.html')" /></div></div>
        
          <div id="content">
    
      </div>
    </div>
</body>
</html>

Hier die stylesheet.css:

Code:

@charset "utf-8";
body {
    background-image: url(Bilder/Kathis_Website_Hintergrund.gif);
    background-repeat: repeat-x;
    margin: 0px;
    padding: 0px;
}
#hauptfenster {
    width: 1024px;
    float: none;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border: 0px none #000000;
}
#karte {
    float: left;
    height: 170px;
    width: 300px;
    margin-left: 12px;
    margin-top: 12px;
    background-image: url(Bilder/karte_hintergrund.png);
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
#header {
    float: left;
    height: 170px;
    width: 685px;
    margin-top: 12px;
    margin-left: 15px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: url(Bilder/Header_Hintergrund_mit_Bild%20Kopie.png);
}
#hauptfenster #navi {
    float: left;
    height: auto;
    width: 300px;
    margin-top: 15px;
    margin-left: 12px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
#content {
    float: left;
    height: auto;
    width: 685px;
    margin-top: 15px;
    margin-left: 15px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: url(Bilder/content_hintergrund.png);
    }
    
#content p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 10px;
}
#Button_Tierpsychologie {
    margin-top: 8px;
}
#Button_Über_mich img {
    margin-top: 8px;
}
#Button_Arbeitsbereiche img {
    margin-top: 8px;
}
#Button_Ernährungsberatung img {
    margin-top: 8px;
}
#Button_Bachblütentherapie img {
    margin-top: 8px;
}
#Button_Leistungen img {
    margin-top: 8px;
}
#Button_Kontakt img {
    margin-top: 8px;
}
#Button_Gästebuch img {
    margin-top: 8px;
}
#Button_Impressum img {
    margin-top: 8px;
}
#content div {
    background-color: #FFFFFF;
    background-image: url(Bilder/content_hintergrund.png);
    background-repeat: no-repeat;
}

Hier die ajax.js:

Code:

var http = null;

if (window.XMLHttpRequest)
    {
        http = new XMLHttpRequest();
    }
else if (window.ActiveXObject)
    {
        http = new ActiveXObject("Microsoft.XMLHTTP");
    }

function sndReq(url)
    {
        if (http != null)
            {
                // http.open("POST", "anfrage.php", true);
                http.open("POST", "ausgabe.php", true);
                http.onreadystatechange = ausgeben;
                http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                http.send("url="+url);
            }
    }


function ausgeben()
    {
        if (http.readyState == 4)
            {
                document.getElementById("content").innerHTML = http.responseText;
            }
        else
            {
                document.getElementById("content").innerHTML = "<img src=\"loading.gif\" width=\"50\" heigth=\"50\">";
            }
    }

Hier die ausgabe.php:

Code:

<?php

if (isset($_POST['url']))
    {
        $erlaubte_urls = array("startseite.html","tierpsychologie.html","ueber_mich.html","arbeitsbereiche.html","ernaehrungsberatung.html","bachbluetentherapie.html","leistungen.html","kontakt.html","gaestebuch.html","impressum.html", "seite2.php", "http://www.psd-tutorials.de/modules/Forum/images/seite3.gif");
        if (in_array($_POST['url'], $erlaubte_urls))
            {
                echo file_get_contents($_POST['url']);
            }
        else
            {
                echo "<h1>Zugriff verweigert!</h1>";
            }
    }
else
    {
        echo "Falscher Parameter!";
    }

?>

Und hier die startseite.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="content.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="inhalt">Startseite</div>
</body>
</html>

Eigentlich überflüssig:

content.css:

Code:

@charset "utf-8";
content {
    height: auto;
    width: 682px;
}

Gruß Marc-Henry

Chriss1987 · 10.09.2009

AW: Bereiche der Website sollen nicht neu geladen werden

Hallo skyflight1981,

welche Fehler bekommst du denn?
Ich hab die von dir geposteten Dateien mal Hochgeladen:

(das Script zum einbinden der SWF hab ich mal rausgeschmissen, der hat bei mir nen Fehler produziert)
Wenn du da auf Startseite klickst, erscheint unter den "Buttons" (werden ja nicht angezeigt, sind ja keine Bilder vorhanden, also nur Text) der Inhalt der "startseite.html" (alle anderen Links geben eine Fehlermeldung aus, weil die Dateien nicht vorhanden sind).
Wenn du php-Scripte mit einbinden möchtest (hast ja die "start2.php" mit drin, dann muss die "ausgabe.php" noch ein wenig anders aussehen, könnte dir den Code dann nachher mal posten).

Wie testest du denn die Homepage? Lokal auf deinem Rechner? Rufst du die Dateien einfach im Browser auf, oder hast du einen Server installiert?

Schöne Grüße aus dem Sauerland!
Chriss

Edit: Du hast bei der index.html noch einen Fehler: es muss heißen "onClick=", bei dir steht "onCl" ;-)

skyflight1981 · 10.09.2009

AW: Bereiche der Website sollen nicht neu geladen werden

Hi,
vielen Dank für die Mühe die Du Dir machst!!!

Wenn ich auf einen anderen Button als Startseite
klicke kommt:

Zugriff verweigert!"; } } else { echo "Falscher Parameter!"; } ?>

Hier mal eine Vorabversion der Site:

Momentan teste ich noch lokal durch Öffnen der Dateien.
Werde aber, nach dem ich meine Platte mal aufgeräumt
habe, XAMPP installieren.

Chriss1987 · 10.09.2009

AW: Bereiche der Website sollen nicht neu geladen werden

skyflight1981 schrieb:
Hi,
vielen Dank für die Mühe die Du Dir machst!!!

Wenn ich auf einen anderen Button als Startseite
klicke kommt:

Zugriff verweigert!"; } } else { echo "Falscher Parameter!"; } ?>

Hier mal eine Vorabversion der Site:

Momentan teste ich noch lokal durch Öffnen der Dateien.
Werde aber, nach dem ich meine Platte mal aufgeräumt
habe, XAMPP installieren.

Hi,
japp, hab ich mir schon fast denken können, es liegt daran, dass du versuchst das PHP-Script ohne Interpreter aufzurufen. Wenn du also XAMPP (oder noch einfacher http://www.easyphp.org/) verwendest, kommt diese Ausgabe nicht mehr und die angeforderte Seite wird angezeigt!;-)

Schöne Grüße aus dem Sauerland!
Chriss

Edit: hier noch die angepaste ausgabe.php (unterstützt jetzt auch .php-Dateien, diese werden einfach includet):

PHP:

<?php

if (isset($_POST['url']))
    {
        $erlaubte_urls = array("startseite.html","tierpsychologie.html","ueber_mich.html","arbeitsbereiche.html","ernaehrungsberatung.html","bachbluetentherapie.html","leistungen.html","kontakt.html","gaestebuch.html","impressum.html", "seite2.php", "http://www.psd-tutorials.de/modules/Forum/images/seite3.gif");
        if (in_array($_POST['url'], $erlaubte_urls))
            {
                $ext = explode(".", $_POST['url']);
                $index = count($ext) - 1;
                if (stripos($ext[$index], "php") !== false)
                    {
                        include $_POST['url'];
                    }
                else
                    {
                        echo file_get_contents($_POST['url']);
                    }
            }
        else
            {
                echo "<h1>Zugriff verweigert!</h1>";
            }
    }
else
    {
        echo "Falscher Parameter!";
    }

?>

skyflight1981 · 09.10.2009

AW: Bereiche der Website sollen nicht neu geladen werden

Ich habe das Design der Seite abgeändert. Um nicht einen eigenen Thread extra dafür aufzumachen müssen, werde ich hier im Laufe des Tages die grafischen Entwürfe posten.
Einen guten Hoster habe ich jetzt auch. Jetzt kann es als richtig losgehen.