| 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"; |
|
| weitere Hinweise dazu siehe: | http://www.treemenu.org |
| | |
| |
| 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: | |
| http://www.treemenu.org | |
| |
zurück