Menü in einer CSS-Seite
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arbeit
arbeitsaufwand
ausprobieren
befehl
code
dank
datei
erfahrung
erstellen
header
http
inhalt
kette
struktur
teil
test
text
unterseite
url
workshop
-
Also ich habe noch ein Projekt vor bei dem ich diese seite hier Klick mich (das ist meine alte Seite) von HTML in CSS umbauen möchte. Wie ihr seht habe ich damals Frames verwendet und jetzt möchte ich die Seite aber in ähnlicher Weise in CSS nachbauen. Also Oben quer das Banner, dann links das Menü und der größte Teil vom Screen der Content.
Auf der neu gestalteten Seite, soll jetzt das Menü auch dauerhaft sichbar bleiben. So wie ich (x)html und css kenne, muß dann quasi auf jeder Unterseite die Liste mit den gleichen Links gesetzt werden. Jetzt meine Frage: Wie kann ich mir da ein bisschen Arbeit ersparen?
Hat da jemand einen tipp für mich? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Arbeit ersparen kannst Du dir, indem Du und die Seite in einzelne Blöcke (Menü, Header, Footer, etc) aufteilst. Die ändern sich ja selten.
Dann bindest Du entweder mit include() diese Seitenelemente ein, oder machst es umgekehrt, indem Du ein zentrales Skript nutzt, in dem die unterschiedlichen Inhalte includet werden.
Dazu gab es hier vor Kurzem noch einen recht ausführlichen Thread. ;)
FF
Beitrag zuletzt geändert: 20.7.2009 17:22:57 von fatfreddy -
erstmal danke Freddy.
Ich hab jetzt ein wenig nach include gegoogelt, muß aber zugeben, daß ich mich in PHP nicht wirklich auskenne. Der Include-Befehl muß jetzt in jede Seite rein, wo das Menü/der Footer/der Header rein soll.
Ohje, jetzt tun sich da noch weitere Fragen auf: Ich möchte die Seite ja immer noch größtenteils in XHTML Und CSS scripten. Wo im HTML Grundgerüst muß dieser Befehl rein? IN den Header oder in den BODY? Muß ich die Seiten, dann in einem anderen Format speichern beispielsweise php oder ähnlich, damit dieser Befehl auf dem Server ausgeführt wird? Oder müssen die anderen Dateien beispielsweise das Menü oder der Header andere Dateiendungen besitzen?
Mir geht es mehr oder weniger darum, später einfach und ohne viele Änderungen an jeder Seite neuen INhalt in die Seite zu bringen.
Beitrag zuletzt geändert: 20.7.2009 17:37:45 von kalinawalsjakoff -
Bsp:
- header.php
<html> <head> </head> <body> <section> <header> <h1>Titel</h1> </head> <?php include('sidebar.php') ?>
-sidebar.php
<aside> <nav> <ul> <li><a href="">Text</a></li> </ul> </nav> </aside>
-footer.php
</section> </body> </html>
Jede andere Seite z.B index.php:
<?php include('header.php') ?> <h2>Überschrift</h2> <p>Paragraph</p> <?php include('footer.php') ?>
Das sollte einiges erklären, ansonsten mal ausprobieren
-
Erklärung im Telegrammstil (weiteres im Forum php&SQL):
Endung aller Dateien -> php
Inhalt: weiterhin HTML & CSS
Header.php enthält z.B. den <head>-Bereichder ehemaligen html-Seite und vom Body den Teil mit dem Header.
Menü.php enthält den Html-Code der Navigation
usw.
Das Gerüst einer Contentseite würde dann so aussehen:
<php include("Header.php"); include("Menue.php"); ?> Hier kommt ganz normales HTML mit dem ganzen Content <?php include("Footer.php"); ?>
Viel php lernen mußt Du dafür also nicht. ;)
FF
Beitrag zuletzt geändert: 20.7.2009 17:43:52 von fatfreddy -
Ich danke dir ersteinmal für deine schnellen Antworten Freddy. Das hilft mir schon um einiges weiter.
Was PHP angeht: Ich werde mich wohl demnächst hinsetzen und mich damit beschäftigen.
Was das ganz normale HTML und CSS mit dem Content angeht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <meta name="editor" content="html-editor phase 5"> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> </body> </html>
Ich nehme an, daß der hier gepostete Code, also das Grundgerüst der Seiten mit dort rein muß, wo das beschrieben hast. Und ich gehe auch davon aus, daß das im Header und im Menü mit rein muß, nicht nur auf den Seiten mit dem Inhalt.
werktags schrieb: Bsp:
- header.php
<html> <head> </head> <body> <section> <header> <h1>Titel</h1> </head> <?php include('sidebar.php') ?>
-sidebar.php
<aside> <nav> <ul> <li><a href="">Text</a></li> </ul> </nav> </aside>
-footer.php
</section> </body> </html>
Jede andere Seite z.B index.php:
<?php include('header.php') ?> <h2>Überschrift</h2> <p>Paragraph</p> <?php include('footer.php') ?>
Das sollte einiges erklären, ansonsten mal ausprobieren
Ich hab deins schlichtweg überlesen werktags. Ich danke dir natürlich auch
Beitrag zuletzt geändert: 20.7.2009 18:01:33 von kalinawalsjakoff -
kalinawalsjakoff schrieb:
Ich nehme an, daß der hier gepostete Code, also das Grundgerüst der Seiten mit dort rein muß, wo das beschrieben hast. Und ich gehe auch davon aus, daß das im Header und im Menü mit rein muß, nicht nur auf den Seiten mit dem Inhalt.
Fast. ;) Stell dir einfach vor, Du zerschneidest deinen HTML-Code in einzelne Stücke. Da muß dann nichts doppelt auftauchen.
Dieser Teil käme in die Header.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <meta name="editor" content="html-editor phase 5"> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
Das wäre der minimale Inhalt der Footer.php
</body> </html>
FF -
Ah okay jetzt versteh ich auch besser, warum einige Tags in Werktags code nur "zerschnitten" aufgetaucht sind. Und in die Datei mit dem Menü kann beispielsweise nur folgender code:
<ul> <li><a haref="Link zur Seite">Kurze Beschreibung</a></li> <li><a haref="Link zur Seite">Kurze Beschreibung</a></li> </ul>
und mehr nicht.
Beitrag zuletzt geändert: 20.7.2009 18:17:14 von kalinawalsjakoff -
Wenn Du kein php nutzen willst, dann geht das auch
(mit mehr Arbeitsaufwand, aber weniger Hackerfreundlich (bei PHP muss man gerade mit Includes gut aufpassen, da habe ich schon weniger gute Erfahrungen gemacht))
mit mehrspaltigem CSS, unter anderem in
http://barrierefrei.e-workers.de gibt es gute Workshops dazu.
LG -
ketten schrieb: Wenn Du kein php nutzen willst, dann geht das auch
(mit mehr Arbeitsaufwand, aber weniger Hackerfreundlich (bei PHP muss man gerade mit Includes gut aufpassen, da habe ich schon weniger gute Erfahrungen gemacht))
mit mehrspaltigem CSS, unter anderem in
http://barrierefrei.e-workers.de gibt es gute Workshops dazu.
LG
Die Seite ist fertig das Thema kann geclosed werden. Aber bei 16 Unterseiten macht das einbinde vo neuen Seiten ziemlich viel Arbeit wenn man auf include verzichtet. auch die wartung wird dadurch aufwändger. -
ketten schrieb: Ja, das stimmt schon, es kommt tatsächlich darauf an, warum man nur css orientiert arbeitet. Ich habe das z.B. (also diese css-Struktur) genutzt, um Templates für joomla zu erstellen. Dann wird es sinnvoll und spannend.
LG
Nun meine Alte Seite war mit Frames aufgebaut, die nicht sonderlich Userfreundlich sind aber auch wenig Suchmaschinenfreundlich. Schau mal nebenher auf Meine Seite. Da wirst du im Menü ca 16 Einträge finden. Das ganze bloß auf CSS aufzubauen heißt zum beispiel, daß ich auf jede der Seiten (ja jeder Unterpunkt ist eine Seite) also 16 mal das Menü einzubauen. Bei Änderungen, also wenn neue Seiten dazukommen oder eine Seite wegfällt, muß dann jede seite erneut geändert werden, was einen ziemlichen Zeit und Arbeitsaufwand bedeutet.
Mit Hilfe von PHP brauche ich beispielsweise beim hinzufügen von Seiten nur die Datei mit dem Menü zu ändern. -
Ja, das stimmt natürlich. Ich hatte das eben auch mal gemacht bei einer Seite (also mit PHP), und da hatte ich eben das große Pech (naja, eigentlich eben unwissen, da man ja besser programmieren könnte, aber ich hatte keine Zeit, mich um das alles zu kümmern), dass eben durch diese Includes, bei bestimmten Konstellationen (ich glaube es war ein Formular) ws ganz einfach war, sich einzuhacken - und das geschah dann auch))
Und Du hast recht, es ist echt aufwändig, eine solche Seite wie Deine ohne CMS und nur mit CSS zu warten....
LG, viel Freude weiterhin
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
