• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Liste zentral für alle HTML-Dateien speichern und aufrufen

S

Schlachtvieh

Neues Mitglied
Hallo ihr Cracks,

habe mich jetzt relativ frisch in HTML und CSS eingearbeitet, stehe jetzt aber bei einem kleinen Homepageprojekt vor unüberwindbaren Problemen.

Hier findet ihr den Rohentwurf der Seite: Startseite Jugend trainiert für Olympia, Bezirk Dessau (ist erstmal nur die vorläufige Domain).

Was mich jetzt zum verzeifeln bringt ist folgendes:
Ich möchte gern die Listen auf der linken Seite in einer zentralen Datei speichern und die dann in den entsprechenden HTML-Dateien aufrufen. Das hätte den Vorteil, dass man nicht bei jeder Seite die Liste ändern müsste, wenn es Korrekturen gibt, sondern nur einmal in der zentralen Datei.
Ich weiß allerdings nicht wie ich das machen kann.

Vielleicht hilft euch der Code der Datei bisher:
index.html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  


  
  <title>Startseite Jugend trainiert f&uuml;r Olympia, Bezirk Dessau</title>
  <meta name="keywords" content="Jugend, trainiert, f&uuml;r, Olympia, Sport, Schulsport, Schule" />


  
  <meta name="description" content="Seite des Bezirks Dessau f&uuml;r den Wettbewerb " jugend="" trainiert="" für="" olympia="" />


  
  <link href="default.css" rel="stylesheet" type="text/css" />
</head>


<body style="">


<div id="wrapper">
<div id="header">
<div id="logo"><span style="text-decoration: underline;"><span style="font-weight: bold;"><img style="height: 151px; width: 210px;" alt="Jugend trainiert f&uuml;r Olympia" src="http://www.html.de/images/logo.png" /></span></span><br />


</div>


<br />


<div id="menu">
<ul>


  <li class="active"><a href="#">Startseite</a></li>


  <li><a href="#">Terminplan</a></li>


  <li><a href="ausschreibungen.html">Ausschreibungen</a></li>


  <li><a href="#">Kontakt</a></li>


</ul>


</div>


<br />


</div>


<br />


<br />


<div id="page">
<div id="page-bgtop">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Jugend
trainiert f&uuml;r Olympia - Bezirk Dessau</a></h2>


<br />


<br />


<div class="entry">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. </p>


</div>


</div>


<br />


</div>


<div id="sidebar"> <br />


<br />


<br />


<br />


<ul>


  <li>
    
    <h2>flei&szlig;ige Spender und&nbsp;</h2>


  </li>


  <li>
    
    <h2>Helfer</h2>


    
    <ul>


      <li><a href="index.html#">hier k&ouml;nnte
ihr Name stehen</a></li>


      <li><a href="index.html#">hier k&ouml;nnte
ihr Name stehen</a></li>


      <li><a href="index.html#">hier k&ouml;nnte
ihr Name stehen</a></li>


      <li><a href="index.html#">hier k&ouml;nnte
ihr Name stehen</a></li>


    
    </ul>


  </li>


  <li>
    
    <h2>zuletzt aktualisiert</h2>


    
    <ul>


      <li><a href="#">Bereich am (Datum)</a></li>


      <li><a href="index.html#">Bereich am (Datum)</a></li>


      <li><a href="index.html#">Bereich am (Datum)</a></li>


      <li><a href="index.html#">Bereich am (Datum)</a></li>


    
    </ul>


  </li>


</ul>


</div>


<br />


</div>


</div>


<br />


</div>


<br />

</body>
</html>
default.css
Code: 
  * { margin: 0pt;
    padding: 0pt;
    }

  body { background: rgb(255, 255, 255) none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    margin-top: 40px;
    text-align: justify;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    color: rgb(117, 126, 130);
    padding-left: 10%;
    padding-right: 10%;
    }

  h1, h2, h3 { color: rgb(170, 40, 8);
    }

  h1 {  }

  h2 {  }

  h3 {  }

  p, blockquote, ul, ol { margin-bottom: 20px;
    line-height: 2em;
    }

  p {  }

  blockquote {  }

  ul, ol, li { margin: 0px;
    padding: 0px;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    }

  a { text-decoration: underline;
    color: rgb(239, 129, 22);
    }

  a:hover { text-decoration: none;
    color: rgb(239, 129, 22);
    }

  #wrapper {  }

  #header { margin: 0pt auto;
    width: 892px;
    height: 91px;
    }

  #logo { margin: 0px;
    padding: 15px 0px 0px 30px;
    float: left;
    height: 76px;
    width: 270px;
    }

  #logo h1 { margin: 0pt;
    padding: 0pt;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;
    }

  #logo h2 { margin: -2px 0pt 0pt;
    padding: 0pt;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10px;
    font-weight: bold;
    color: rgb(68, 68, 68);
    }

  #logo h2 a { color: rgb(154, 169, 177);
    }

  #logo a { text-decoration: none;
    color: rgb(60, 132, 179);
    }

  #menu { background: transparent url(images/img01.jpg) no-repeat scroll left top;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    float: right;
    height: 54px;
    margin-top: 10px;
    width: 592px;
    }

  #menu ul { margin: 0pt 0pt 0pt 10px;
    padding: 0px 0pt 0pt 20px;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    line-height: normal;
    }

  #menu li { display: inline;
    text-align: center;
    }

  #menu a { padding: 18px 15px 0px 16px;
    display: block;
    float: left;
    height: 36px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: rgb(70, 78, 83);
    }

  #menu a:hover, #menu .active a { background: rgb(239, 129, 22) none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    color: rgb(255, 255, 255);
    }

  #search { padding: 0px 0px 40px;
    height: 45px;
    }

  #search form { margin: 0pt;
    padding: 12px 0px 0pt 0pt;
    }

  #search fieldset { border: medium none ;
    margin: 0pt;
    padding: 0pt;
    }

  #search input { float: left;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;
    }

  #search-text { border: 1px solid rgb(0, 0, 0);
    padding: 3px 0pt 0pt 5px;
    width: 120px;
    height: 18px;
    color: rgb(0, 0, 0);
    }

  #search-submit { border: medium none ;
    padding: 0px 2px;
    background: rgb(0, 0, 0) none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    height: 21px;
    margin-left: 10px;
    color: rgb(255, 255, 255);
    }

  #page { margin: 0pt auto;
    width: 892px;
    }

  #page-bgtop { padding: 0px 30px;
    }

  #content { float: right;
    width: 564px;
    padding-top: 30px;
    }

  .post { margin: 0px 0px 30px;
    }

  .post .title { margin: 0px;
    padding: 0px 0px 5px;
    color: rgb(35, 47, 1);
    }

  .post .title a { padding: 4px 35px 4px 33px;
    background: rgb(239, 129, 22) none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    text-decoration: none;
    font-weight: normal;
    color: rgb(255, 255, 255);
    }

  .post .entry {  }

  .post img { padding: 15px 0px;
    float: left;
    }

  .post .meta { border-bottom: 1px solid rgb(229, 229, 229);
    text-align: right;
    padding-top: 20px;
    font-weight: bold;
    color: rgb(32, 32, 32);
    }

  .post .byline { float: right;
    margin-top: -30px;
    font-size: 12px;
    color: rgb(94, 94, 94);
    }

  #sidebar { float: left;
    width: 208px;
    padding-top: 30px;
    }

  #sidebar ul { margin: 0pt;
    padding: 0pt;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    line-height: normal;
    }

  #sidebar li { margin-bottom: 1px;
    }

  #sidebar li ul { margin: 0px;
    padding: 0px 0px 40px;
    }

  #sidebar li li { border: medium none ;
    margin: 0pt;
    padding: 9px 0px;
    background: transparent url(images/img07.jpg) repeat-x scroll left bottom;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    }

  #sidebar h2 { border-bottom: 2px solid rgb(235, 235, 235);
    margin: 0px;
    padding: 0px;
    font-size: 160%;
    font-weight: normal;
    color: rgb(69, 78, 85);
    }

  #sidebar h3 { font-size: 77%;
    color: rgb(69, 78, 85);
    }

  #sidebar p { margin: 0pt;
    line-height: normal;
    color: rgb(212, 199, 146);
    }

  #sidebar a { border: medium none ;
    text-decoration: none;
    }

  #sidebar a:hover { text-decoration: underline;
    }

  #submenu {  }

  #news {  }

  #news a { font-size: 85%;
    }

  #footer { border-top: 1px solid rgb(229, 229, 229);
    margin: 0pt auto;
    padding: 20px 0pt;
    width: 892px;
    height: 50px;
    color: rgb(117, 126, 130);
    }

  #footer p { margin: 0pt;
    text-align: center;
    font-size: 77%;
    }

  #footer a { text-decoration: underline;
    color: rgb(117, 126, 130);
    }

  #footer a:hover { text-decoration: none;
    }
 
Werbung:
Schlachtvieh schrieb:
Hallo ihr Cracks
Zum Vergrößern anklicken....
Hallo Schlachtvieh.

Solche Auslagerungen macht man mit PHP oder einer anderen serverseitigen Sprache. Die Seite wird dann bei Abfrage auf dem Server "zusammengesetzt" und als ganzes zum Benutzer gesendet. Dazu muss dein Server PHP unterstützen (bplaced tut das).
Zum Einbinden einer externen Datei gibt es die Funktion include().

PHP: 
<?php
include("navigation.php");
?>

lg
kruschimappel

P.S.: Willkommen im Forum ;)
 
Alternativ könnte man einen Editor verwenden, der mit mehreren Seiten mit "suchen - ersetzen" arbeiten kann ....... oder iFrame.
 
Werbung:
@Suizo
Was für ein Editor könntest du da eventuell vorschlagen?

@krischimappel
Muss dann die ganze Seite in PHP geschrieben werden oder muss nur der Befehl, sowie die navigation.php in PHP geschrieben werden?

Wenn zweiteres, an welcher Stelle meiner Datei müsste ich dann den include-Befehl einfügen?

Edit: Danke für die Hilfe!
 
Hallo.

Es muss nur dieser eine Befehl in PHP geschrieben werden.
Die Seite in der der Befehl steht muss dann von seite.html zu seite.php umbenannt werden.
Die Navigation kann weiterhin in html geschreiben werden.

Den include Befehl setzt du da ein wo du deine Navigation haben möchtest.

Gruss
Elroy
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben