Webseite mit Verzeichnisbaum erstellen

Webseite mit Verzeichnisbaum erstellen via Frameset
Dazu benötigt man:
Code für den Frame (hält linkes und rechtes Fenster) Index.html
Code für linkes Fenster (der Baum !) Left.html
Code für rechtes Fenster Right.html
Code für leere Seite, falls JavaScript nicht unterstützt wird Empty.html
JavaScript für den Verzeichnisbaum Tree.js
   
Index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title> Titel </title>
</head>
<frameset cols="25%,75%">
<frameset frameborder="1" framespacing="0" border="1" cols="*" rows="0,*">
<frame src="left.html" name="code" scrolling="auto" frameborder="0">
<frame src="empty.html" name="menu" scrolling="auto" frameborder="0">
</frameset>
<frame src="right.html" name="text" scrolling="auto" frameborder="0">
</frameset>
<noframes>
</noframes>
</html>
Hinweise:
<title> Der Standardtitel der Webseite.
<frameset cols... Breite des linken und rechten Fensters.
<frame src... Name und Quelle des Fensters (name.html) und
die Codebezeichnung im JavaScript.
<noframes>... Für Browser, die keine Frames darstellen können.
Die leere Seite empty.html wird ebenfalls geladen und bleibt nur im Vordergrund, falls kein JavaScript auf dem Zielrechner unterstützt wird.
   
Empty.html:
<html>
<head>
</head>
<body>
<p>Your browser does not support JavaScript</p>
</body>
</html>
Kurz und schmerzlos: nur ein Hinweis, das die Webseite wohl nicht funktionieren wird...
   
Right.html:
Das ist eine beliebige Begrüßungsseite.
   
Tree.js:
Das JavaScript für den Verzeichnisbaum wird nicht näher erläutert. Es können nur wenige Parameter, z.B. für Textgröße und -farben, oder das Verzeichnis für die Images, geändert werden (der Hauptteil des Scripts sollte nicht verändert werden):
var TreeLinkedJSURL, TreeLinkedSS, TreeSSHREF, TreeLinkedInitFunction, TreeDOCTYPE, TreecontentType;
var TreeHeader, TreeFooter, TreerightClickMessage, TreeDefaultTarget, TreeTimeOut = 5;
var TreeuseScrollbarCSS = true, TreescrollbarBaseColor = "#9599C1", TreescrollbarFaceColor = "#9599C1";
var TreescrollbarHighlightColor = "#d5d7e6", TreescrollbarShadowColor = "#d5d7e6";
var Treescrollbar3dLightColor = "#d5d7e6", TreescrollbarArrowColor = "white";
var TreescrollbarTrackColor = "#D5D7E6", TreescrollbarDarkShadowColor = "gray";
var TreeUseCookies = false, TreeCookieName, TreeCookieDays, TreeTrackedCookieName;
var TreeCodeFrame = "code", TreeenuFrame = "menu";
var TreeTableWidth = "100%", TreeenuImageDirectory = "../images/";
var TreeUseToolTips = true, TreeEmulateWE, TreeAlwaysLinkIfWE = true, TreeSubsGetPlus = "Submenu";
var TreeSubsAutoClose = true;
var TreeBackground = "", TreeBGColor = "#b5b5b5", TreeTextColor = "#000000", TreeLinkColor = "black";
var TreeTrackColor = "#000000", TreeAhoverColor = "#990000", TreeSubExpandColor = "#666699";
var TreeSubClosedColor = "#666699", TreeSubTextColor = "#000000";
var TreeMenuText = "Site contents:", TreeRootIcon = "menu_new_root.gif", TreeRootColor = "#000066";
var TreeRootFont = TreeenuFont = "Arial, Helvetica, sans-serif";
var TreeRootCSSize = TreeenuCSSize = "75%";
var TreeRootFontSize = TreeenuFontSize = "-1";
   
Left.html:
Der Kopf des Scripts wird nur an der markierten Stelle geändert (anpassen des Pfades für das JavaScript tree.js):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head>
<script type="text/javascript">
var relocateURL = "/";
if(parent.frames.length == 0) {
if(document.images) {
location.replace(relocateURL);
} else {
location = relocateURL;
}
}
</script>
<script type="text/javascript" src="../css/tree.js">
</script>
<script type="text/javascript">
TREEDefaultTarget = "text";
var TREEIconList = null;
TREEIconList = new IconList();
TREEIconList.addIcon(new TREEIcon("menu_link_external.gif", "http://", "pre"));
TREEIconList.addIcon(new TREEIcon("menu_link_pdf.gif", ".pdf", "post"));
// Main menu.
var menu = null;
menu = new TREEmenu();
Zwischen Kopf und Ende wird der Verzeichnisbaum geschrieben...
Das Ende des Scripts ist stets einheitlich und wird nie geändert:
</script>
</head>
<body onload="TREEStartMenu(true)">
</body>
</html>
   
Verzeichnisbaum – einfaches Muster:
menu.addItem("Music");
var seite0815 = null;
seite0815 = new TREEmenu();
seite0815.addItem("Seite 1","priv/seite1.html");
seite0815.addItem("Seite 2","priv/seite2.html");
seite0815.addItem("Seite 3","priv/seite3.html");
menu.makeLastSubmenu(seite0815);
menu.addItem("Favoriten","prog/favoriten.html");
menu.addItem("Meine Seite privat","abc/index.html");
menu.addItem("Deine Seite privat","def/index.html");
menu.addItem("Hilfe","prog/css/pw.asp");
menu.addItem("Home page","http://www.meineHomepage.com/index.html","_top");
Hinweise:
menu.addItem("Music"); Beginn eines neuen Menüs mit Titel „Music“.
var seite0815 = null; Eine Variable erhält den Namen „seite0815“.
seite0815 = new TREEmenu(); Der Variablen wird ein Menü zugewiesen.
seite0815.addItem("Seite 1","priv/seite1.html"); Dem Menü wird eine html Seite zugewiesen.
... Weitere html Seiten werden zugewiesen...
menu.makeLastSubmenu(seite0815); Schließen des Menüs.
Bei den nachfolgenden „menu.addItem...“ handelt es sich jeweils um eigenständige Menüpunkte, die keine Untermenüs enthalten:
menu.addItem("Favoriten","./prog/favoriten.html");
menu.addItem("Meine Seite privat","../abc/index.html");
menu.addItem("Deine Seite privat","../def/index.html");
menu.addItem("Hilfe","../../prog/css/pw.asp");
menu.addItem("Home page","http://www.meineHomepage.com/index.html","_top");
- Es können auch asp-Seiten aufgerufen werden.
- Zur Umleitung auf andere Webseiten werden folgende Parameter verwendet:
_top Der Link wird im vollen Browserfenster geöffnet, damit werden
alle Frames vernichtet. Dieser Name ist äquivalent zu _self, falls
der Link sich in keinem Frame befindet.
_blank Der Browser öffnet den Link in einem neuen Fenster.
_self Der Link wird in dem Fenster geöffnet, in dem sich der Link befindet.
_parent Der Link wird im übergeordneten FRAMESET geladen. Dieser Name
ist äquivalent zu _self, falls der Link sich in keinem Frame befindet.
ohne Parameter Die gewünschte Seite wird im rechten Frame angezeigt.
Quelle:
www.treemenu.org (Webseite gibt es leider nicht mehr)

Mehr Tipps: Anzeige der letzten Änderung

Sponsoren und Investoren

Sponsoren und Investoren sind jederzeit herzlich willkommen!
Wenn Sie die Information(en) auf dieser Seite interessant fanden, freuen wir uns über eine kleine Spende. Empfehlen Sie uns bitte auch in Ihren Netzwerken (z. B. Twitter, Facebook oder Google+). Herzlichen Dank!

Nach oben Sitemap
Impressum & Kontakt