N00b Frage zum Thema: Frames

Cruizer23

Hi,

habe mir vor ein paar min meinen 1. Webspace organized
Da ich noch nie mit html gearbeitet habe, habe ich mir ne vorlage gesaugt!

Nu meine Frage:

Ich habe eine index seite die aus 3 Teilen besteht: Top.html; Menu.html & Main.html.

Ich möchte nun, das sobald der User auf einen Link im Menü klickt, auf der Indexseite anstatt main.html -> bla.html geladen wird und zwar auch als frame von index.

Kann mir wer helfen?

Foulfang

Als erstes musst du jedem Frame einen Namen geben:

Code

<frame src="main.html" name="main">

Danach musst du dem Link im Menü nur noch das Ziel angeben:

Code

<a href="bla.html" target="main"

Die "bla.html" wird dann im Frame "main" geladen.

Hoffe du hast es verstanden, vielleicht kann es jemand noch besser erklären.

Cruizer23

Einfach nur Wunnevoll !!!!!!!!!!!!!!!!

Danke
!!!!!!!!!!!!

Cruizer23

Ok, noch ne Frame-Frage:

Habe ja wie beschrieben 3 frames. Nu ergibt es sich, das das bild, das im top-frame gezeigt wird, von meinem menu-frame überschnitten wird.

Wie kann ich entweder: Das menu-frame an das top-frame anpassen?
oder: das menu-frame weiter nach unten setzen?

Beatz

Hmmm ... ich schätze zwar, dass ich in etwa weiß, was Du meinst, würde es mir aber vorher gerne mal ansehen. Kann man Dein bisheriges Ergebnis irgendwo im Netz sehen???

Cruizer23

jepp, ->hier<- und bitte nich lachen

Beatz

Lachen??? Warum denn lachen, es ist zwar noch nicht viel zu sehen, aber die Grafik oben sieht doch echt Klasse aus. Wenn Du sie selbst gemacht haben solltest: ALLE ACHTUNG!!!

So, nun aber zu Deinem Problem:
Du musst die Grafik aufteilen, in mehrere. Einmal schneidest Du die oberen 123 auf voller Breite ab und speicherst sie beispielsweise als top1_2.jpg ab. Anschließend schneidest Du aus der kompletten Grafik unten links ein Rechteck mit 202x57 Pixeln zu und speicherst sie beispielsweise als top1_2.jpb ab. Viele gute Grafikprogramme bieten dafür sogar bequeme Tools.
Falls Du es nicht hinbekommst, schicke ich sie Dir auch gerne per Mail zu.

Deine erste Grafik machst Du wie gehabt in den ersten Frame und die zweite Hälfte schiebst Du in das zweite Frame. Das Problem bei Frames ist nur, dass es komisch aussieht, sobald sie das Frame mit dem Menü scrollen läßt. Unter anderem ein Grund, warum ich jedem von Frames abrate.

Cruizer23

Ne, is "nur" ne Vorlage! Find sie auch super!

Begriffen habe ichs, werde es auch gleich mal ausprobieren!

Du rätst also von Frames ab, so so...
Warum? Was rätst du denn statt dessen?

Beatz

Das ganze mit Tabellen zu machen

Frames haben zahlreiche Nachteile, sie fangen bei Deinem Problem an, also nur beim Scrollen, dann drück mal auf einer Unterseite F5 bzw. Neuladen und gehen immer weiter. Man könnte sich seitenweise darüber auslassen, was die Frametechnik an Nachteilen bringt. Sie sind wirklich nur in den seltensten Fällen ratsam.

Cruizer23

Tabellen? Hmm......

Ich schließe daraus das Tabellen einfach mit neuem Inhalt zu bestücken sind. Werde mir das mal anschauen. Ne Ahnung, wo ich entweder:
a) ne brauchbare (und kostenlose!) Vorlage bekomme, oder
b) wo es ein brauchbares Tut gibt ???

Üb. Danke das du mir hilfst

Beatz

Naja, das ganze wäre dann schon etwas anders. Es ist nicht mehr so, wie bei den Frames, dass Du nur noch den Inhalt einer bestimmten Tabellenzelle neu laden musst, wie bei den Frames. Aber dafür gibt es ja recht vernünftige Editoren auch als Freeware. Siehe beispielsweise folgendes Thema:
::] https://www.forum-hilfe.de/viewtopic.php?t=1980

Vorlagen zu Tabellen gibt es vielleicht, aber das sollte man sowieso seinen Bedürfnissen anpassen, ist auch gar nicht so schwer. Tutorials gibt es haufenweise bei "Google". (Okay, okay, nicht bei Google, aber man findet sie darüber ) Ansonsten kann ich Dir nur SELFHTML empfehlen:
::] http://selfhtml.teamone.de

Cruizer23

Hab nen Teil angepasst >HIER> wie bekomme ich es nun hin, das es aussieht wie >HIER<?

Beatz

Soetwas in der Art??? Vielleicht kannst Du damit ja weiter arbeiten?

Code

<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="de">


<SCRIPT LANGUAGE = "JavaScript">


<!-- hide


browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
browser = "NotOk";


// Detect if Netscape or MSIE version is ok


if (browserName == "Netscape" && browserVer >= 3) { browser = "ok"}
if (browserName == "Microsoft Internet Explorer" && browserVer >= 4) { browser = "ok"}


// Initialize your images


if (browser == "ok") {


Link1= new Image(); Link1.src = "Pics/Home.jpg";
Link1on = new Image(); Link1on.src = "Pics/Home2.jpg";


Link2= new Image(); Link2.src = "Pics/Link02.jpg";
Link2on = new Image(); Link2on.src = "Pics/Link02-2.jpg";


Link3= new Image(); Link3.src = "Pics/Link03.jpg";
Link3on = new Image(); Link3on.src = "Pics/Link03-2.jpg";


Link4= new Image(); Link4.src = "Pics/Link04.jpg";
Link4on = new Image(); Link4on.src = "Pics/Link04-2.jpg";


Link5= new Image(); Link5.src = "Pics/Link05.jpg";
Link5on = new Image(); Link5on.src = "Pics/Link05-2.jpg";


Link6= new Image(); Link6.src = "Pics/button.jpg";
Link6on = new Image(); Link6on.src = "Pics/button2.jpg";


Link7= new Image(); Link7.src = "Pics/button.jpg";
Link7on = new Image(); Link7on.src = "Pics/button2.jpg";


Link8= new Image(); Link8.src = "Pics/button.jpg";
Link8on = new Image(); Link8on.src = "Pics/button2.jpg";


Link9= new Image(); Link9.src = "Pics/button.jpg";
Link9on = new Image(); Link9on.src = "Pics/button2.jpg";


Link10= new Image(); Link10.src = "Pics/button.jpg";
Link10on = new Image(); Link10on.src = "Pics/button2.jpg";


Link11= new Image(); Link11.src = "Pics/button.jpg";
Link11on = new Image(); Link11on.src = "Pics/button2.jpg";


Link12= new Image(); Link12.src = "Pics/button.jpg";
Link12on = new Image(); Link12on.src = "Pics/button2.jpg";


Link13= new Image(); Link13.src = "Pics/Links.jpg";
Link13on = new Image(); Link13on.src = "Pics/Links2.jpg";
}




function swap(imgName,select)


{ if (browser == "ok") {imgOn = eval(select+ ".src");
document.images[imgName].src = imgOn; }}


// --> </SCRIPT >


  <TITLE>Cruizer`s Site</TITLE>
</HEAD>
<BODY bgcolor="#000000" background="Pics/menubg.jpg" text="#800000">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="1042" height="48">
<tr>
  <td width="1037" height="26" colspan="3">[img]Pics/top1.jpg[/img]</td>
</tr>
<tr>
  <td width="100%">
    <table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td>
            <table cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td width="42" height="22">
                <a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink1','Link1on')" onmouseout= "swap('imgLink1','Link1')">
                <img name ="imgLink1" src= "Pics/Home.jpg" border = 0 alt = "Button" width="240" height="25">
                </a>
              </td>
            </tr>
            <tr>
              <td width="42" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink2','Link2on')" onmouseout="swap('imgLink2','Link2')">
                <img name ="imgLink2" src= "Pics/Link02.jpg" border = 0 alt = "Button" width="240" height="30">
                </a>
              </td>
            </tr>
            <tr>
              <td width="42" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink3','Link3on')" onmouseout="swap('imgLink3','Link3')">
                <img name ="imgLink3" src= "Pics/Link03.jpg" border = 0 alt = "Button" width="240" height="30">
                </a>
              </td>
            </tr>
            <tr>
              <td width="42" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink4','Link4on')" onmouseout="swap('imgLink4','Link4')">
                <img name ="imgLink4" src= "Pics/Link04.jpg" border = 0 alt = "Button" width="240" height="30">
                </a>
              </td>
            </tr>
            <tr>
              <td width="42" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink5','Link5on')" onmouseout="swap('imgLink5','Link5')">
                <img name ="imgLink5" src= "Pics/Link05.jpg" border = 0 alt = "Button" width="240" height="25">
                </a>
              </td>
            </tr>
            <tr>
              <td width="42" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink6','Link6on')" onmouseout="swap('imgLink6','Link6')">
                <img name ="imgLink6" src= "Pics/button.jpg" border = 0 alt = "Button" hspace="15" vspace="3" width="181" height="30">
                </a>
              </td>
            </tr>
            <tr>
              <td width="238" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink7','Link7on')" onmouseout="swap('imgLink7','Link7')">
                <img name ="imgLink7" src= "Pics/button.jpg" border = 0 alt = "Button" hspace="15" vspace="2" width="181" height="30">
                </a>
              </td>
            </tr>
            <tr>
              <td width="238" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink8','Link8on')" onmouseout="swap('imgLink8','Link8')">
                <img name ="imgLink8" src= "Pics/button.jpg" border = 0 alt = "Button" hspace="15" vspace="2" width="181" height="30">
                </a>
              </td>
            </tr>
            <tr>
              <td width="238" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink9','Link9on')" onmouseout="swap('imgLink9','Link9')">
                <img name ="imgLink9" src= "Pics/button.jpg" border = 0 alt = "Button" hspace="15" vspace="2" width="181" height="30">
                </a>
              </td>
            </tr>
            <tr>
              <td width="238" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink10','Link10on')" onmouseout="swap('imgLink10','Link10')">
                <img name ="imgLink10" src= "Pics/button.jpg" border = 0 alt = "Button" hspace="15" vspace="2" width="181" height="30">
                </a>
              </td>
            </tr>
            <tr>
              <td width="238" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink11','Link11on')" onmouseout="swap('imgLink11','Link11')">
                <img name ="imgLink11" src= "Pics/button.jpg" border = 0 alt = "Button" hspace="15" vspace="2" width="181" height="30">
                </a>
              </td>
            </tr>
            <tr>
              <td width="238" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink12','Link12on')" onmouseout="swap('imgLink12','Link12')">
                <img name ="imgLink12" src= "Pics/button.jpg" border = 0 alt = "Button" hspace="15" vspace="2" width="181" height="30">
                </a>
              </td>
            </tr>
            <tr>
              <td width="238" height="22"><a href="index3.html?PHPSESSID=15eb8ba3bb26a074e6cb5f991b5df020" onmouseover="swap('imgLink13','Link13on')" onmouseout="swap('imgLink13','Link13')">
                <img name ="imgLink13" src= "Pics/Links.jpg" border = 0 alt = "Button" hspace="15" vspace="2" width="181" height="30">
                </a>
              </td>
            </tr>
            </table>
          </td>
          <td width="100%" align="center">
            <table width="90%" cellspacing="0" cellpadding="0" border="1">
            <tr>
              <td></td>
              <td class="top">Main Page</td>
            </tr>
            <tr>
              <td class="topk"></td>
              <td valign="top" class="content">
                <center>[img]Pics\InConstrucktion.gif[/img]</center>
              </td>
            </tr>
            </table>
          </td>
        </tr>
        </table>
      </td>
    </tr>
    </table>
  </td>
</tr>
</table>
</BODY>
</HTML>

Alles anzeigen

Cruizer23

Hi,
erstmal nen herzlichen Dank für deine (eure) Mühe!
Das Problem:

Die Tabelle hätt ich auch hinbekommen,
nur wie mache ich es, das der Inhalt der
Tabelle "auf Knopfdruck" aktualliesiert
wird, bzw. sich halt der angegebene Inhalt
in der Tabelle läd!

Weißt du (wisst ihr) dazu vieleicht was ???
Bin für jeden Vorschlag offen !!!

Beatz

Naja, ich bin mir nicht so ganz sicher, ob ich weiß, was Du meinst. Aber ich versuche mal mein Glück. Für jeden Inhalt musst Du einzelne Dateien machen, jeweils mit dem Menü eingebaut. Also praktisch, diese Datei kopieren und den Inhalt bearbeiten.

Wenn Du später das Menü bearbeitest gibt es einen kleinen Trick, mit dem Du nur eine Datei bearbeiten brauchst und dann alle Dateien aktualisiert. Schau dazu mal hier:
::] https://www.forum-hilfe.de/viewtopic.php?…ghlight=include

Ich hoffe, das war das, was Du meintest???

jaaam

wirklich ein bisschen schwierig zu folgen.

also grundstruktur ist die, das du eine haupt-html-seite hast. die nennt sich i.a. index.html.

in dieser befinden sich (einfach gesehen) links, verschachtelt in einer tabelle. stinoteil..

<table><tr><td>
inhalt navi
</td>
<td>
inhalt text
</td></tr></table>

nun, in einem link (<a href="">) verweist du auf eine unterseite. zb. hallo.html. also ist ein link in deiner index.html <a href="hallo.html">.. draufgedrückt läd eine komplett neue seite.. nämlich die hallo.html.

ist es das, was du mit aktualisiertem inhalt meinst?

ansonsten gibts nat. auch die mglk. mit iframes zu arbeiten.. offenbaren dir aber (ähnlich wie bei frames auch) teilweise probleme. iframes sind dynamischer einzubinden und lassen sich genauso gut per target steuern.

ich hab da noch fragen..

angegebender inhalt: was heißt das? lagerst du den aus? dann wäre iframe das, was du meinst.. (bzw. frame) ansonsten ist dieses link-to-link-prinzip das, was ich glaube zu verstehen.

Cruizer23

Glaube du hast mich verstanden, nur ob ichs auch hab...

Das heißt, ich mach nu kopien meiner index.html, benenne diese um und passe den inhalt an. Auf klick wird dann die neue seite geladen. Richtig?

Gibts nich ne Möglichkeit (vieleicht mit einer DB), das ich "nur" den inhalt der Tabelle neu lade?

jaaam

ne - und ja. aber das wäre zu weit für dieses (glaube ich in deinem fall) simple problem..

du musst einfach nur die struktur und die fktweise des stinohtml verstehen.

du machst mal folgendes. (um zu sehen, ob wir beide das gleiche meinen.. )

lege 3 html dateien an.
die benennst du wie folgt:

index.html (ist ja muss!!)
hallo.html
forum.html

du erstellst einen ordner names "xyz".. packst alles da rein..

1.) index.html
du legst eine 2-spaltige tabelle an..

Code

<table><tr>
<td>
NAVIGATION
</td>
<td>
BEGRÜßUNG
</td>
</tr></table>

im ersten <td> - bereich "NAVIGATION legst du deine navi an..
wir machen mal text-links.

also:

Code

<table><tr>
<td>
[url='index.html']home[/url]


[url='hallo.html']hallo[/url]


[url='forum.html']forum[/url]
</td>
<td>
BEGRÜßUNG
</td>
</tr></table>

Alles anzeigen

wenn du jetzt alles zusammen hast müsstest du, wenn du die seite nun öffnest, links die navi und rechts "BEGRÜßUNG" sehen. klickst du nun auf (zb) "hallo" kommst du auf die hallo.html.. (die ja noch leer ist, weil wir die zwar angelgt haben, aber noch nix drin steht.
in der machst du das gleiche, wie in der index.html - wobei der inhalt "BEGRÜßUNG" natürlich ausgetauscht werden muss.. ist ja ne andere seite.. also inhalt = "HALLO".. und das gleiche wieder mit der forum.html

jetzt hast du 3 html - dateien miteinander verknüpft und kannst wahllos auf diese zugreifen..

meinst du das?

jaaam

ach und nochmal zur frage, ob du den inhalt nur in der tabelle aktualisieren kannst.. das geht.. zb. mit iframes.

Cruizer23

Ich glaub, ich schau mich mal zum Thema iFrames um...

Tags