Website mit Include Befehl erstellen

Artikel aus dem Blog

Website mit Include Befehl erstellen

Geschrieben von: Jan H. Samstag, den 13. August 2011 um 06:23 Uhr

Kleines Tutorial für die Erstellung von Websites mit dem PHP include Befehl.

Kleine Internetprojekte ohne ein CMS (Content Management System) können ganz schnell mühselig werden, vorallem wenn sich Texte oder das Design hin und wieder ändern sollen.

Ein gutes Beispiel dafür ist ein Landingpage-Projekt, eine Firmenwebsite oder Produktpräsentation mit 5, 10 oder gar noch mehr Unterseiten. Da es zum einen eine Kosten- und zum anderen eine Performance-Frage ist, lohnt es sich oftmals nicht bei diesen Projekten ein CMS zu installieren.

Vor ein paar Jahren nutzte der Webdesigner dazu Framesets, um den Kopfbereich, die Navigation auf der linken Seite und den unteren Bereich, den Footer, voneinander getrennt zu bearbeiten. Vor allem konnte man so auf einfache Art und Weise den Inhalt vom Layout trennen.

Leider ist diese Technik mittlerweile überholt und wird von Suchmaschinen nicht gern gesehen, was an sich schade ist, da das Bearbeiten eines Projekts mit Frames sehr schnell geht.
Aus diesem Grund möchten wir Ihnen hier eine gute und modernere Alternative vorstellen.

Mit dem Include Befehl

<!--? include ("datei.php"); ?>

kann man im Prinzip ganz einfach mehrere Dateien in einer Seite einbinden und somit eine Art Frameset erzeugen.

Anhand dieses kleinen Projekts, was Sie sich hier natürlich kostenlos herunterladen können, wird die Vorgehensweise genauer erklärt und macht diese einfacher nachvollziehbar.

Projektübersicht

In der Abbildung 1 sehen Sie das gesamte Projekt.

Um zu verdeutlichen wie ein Webprojekt aufgebaut sein kann, zeigen wir Ihnen anhand des Quellcodes den Zusammenhang der einzelnen Dateien. Beginnen möchten wir mit der index.php (es könnte ebenso die kontakt.php oder ueber_uns.php sein), da Sie so auf den ersten Blick die Unterschiede zu einem Frameset erkennen können.

Bitte kopieren Sie nicht den Quelltext aus diesem Beitrag. Sie können das gesamte Beispielprojekt hier herunterladen.

Quellcode der index.php:




 Herzlich willkommen! </h1>
 Wir hoffen Ihnen gefällt dieses kleine Tutorial 
 dieser Inhalt wird in der index.php geändert.

Wie Sie sehen können setzt sich die index.php aus den Dateien header.php, left.php und footer.php zusammen.

In dieser Datei werden die Bilder und Texte, die Sie Ihren Besuchern zeigen möchten hinterlegt.

Als nächste Datei können Sie die header.php sehen, in der die Meta-Angaben, die Verknüpfung zur Stylesheet-Datei (css.css) und das Design für den Kopfbereich verankert ist.

Quellcode der header.php:




Website mit include Befehl



 


 
 Inhalt für   class "head_head"

 Der Inhalt wird in der header php geändert.

Weiter geht es mit der left.php. In dieser Datei wird in unserem Beispielprojekt die Navigation festgelegt.

Der Quellcode der left.php sieht so aus:

 Hauptmenü</h3>
 <a href="/index php" mce_href="/index php">Startseite</a>
 <a href="/kontakt php" mce_href="/kontakt php">Kontakt</a>
 <a href="/ueber_uns php" mce_href="/ueber_uns php">über Uns</a>

Am Ende der Seite brauchen wir noch den Footer, der wie folgt aussieht:

Quellcode footer.php:

 
 
 
Inhalt für   class "footer_f"

 Hier kann z.B. die Telefonnummer oder und Emailadresse stehen.  

 Dieser Inhalt wird in der footer php geändert.

Der komplette Ausgabecode sieht dann wie folgt aus:

  <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Website mit include Befehl<!--title> <link href="/<a href="view-source:http:/localhost/Lampendelux/css.css" mce_href="/view-source:http:/localhost/Lampendelux/css.css">css.css</a>" rel="stylesheet" type="text/css" /> <!--head>  <body>   class="head_head">    align="center">
    
Inhalt für   class "head_head"

    Der Inhalt wird in der header.php geändert. <!--p>
  <!--div>
<!--div>

  class="left">
  <h3>Hauptmenü<!--h3>
  
<a href="/<a href="view-source:http:/localhost/Lampendelux/index.php" mce_href="/view-source:http:/localhost/Lampendelux/index.php">index.php</a>">Startseite<!--a><!--p>
  
<a href="/<a href="view-source:http:/localhost/Lampendelux/kontakt.php" mce_href="/view-source:http:/localhost/Lampendelux/kontakt.php">kontakt.php</a>">Kontakt<!--a><!--p>
  
<a href="/<a href="view-source:http:/localhost/Lampendelux/ueber_uns.php" mce_href="/view-source:http:/localhost/Lampendelux/ueber_uns.php">ueber_uns.php</a>">über Uns<!--a> <!--p>
<!--div>

 class="content">
  <h1>Herzlich willkommen! <!--h1>
  
Wir hoffen Ihnen gefällt dieses kleine Tutorial <!--p>
  
dieser Inhalt wird in der index.php geändert. <!--p>
<!--div>
 class="footer_f">
   align="center">
    
Inhalt für   class "footer_f"

    Hier kann z.B. die Telefonnummer oder und Emailadresse stehen.  

    Dieser Inhalt wird in der footer.php geändert. <!--p>
  <!--div>
<!--div>
<!--body>
<!--html>

In der Stylesheet-Datei, in unserem Beispiel die css.css legen Sie alle Werte zu den Überschriften, Boxgrößen, Abstände und Schriftarten fest.

Der Quelltext unsere Stylesheet-Datei sieht so aus:

body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}

h1 {
font-size: 16px;
color: #FF6600;
}
h2 {
font-size: 14px;
color: #0099FF;
}
h3 {
font-size: 14px;
color: #FF6600;
}
h4 {
font-size: 9px;
color: #999999;
}

a {
font-size: 11px;
color: #0099FF;
}
a:visited {
color: #999999;
}
a:hover {
color: #0066FF;
}
a:active {
color: #FF6600;
}
.head_head {
background-image: url(images/headlogo.jpg);
height: 390px;
width: 950px;
clear: left;
margin-left: 20px;
}
.footer_f {
background-color: #5096B8;
height: 100px;
width: 950px;
margin-left: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
padding-top: 40px;
clear: left;
}
.left {
width: 250px;
float: left;
margin-left: 20px;
}
.text {
float: left;
width: 700px;
}

.content {
background-color: #FFFFFF;
width: 700px;
float: left;
border-left-width: thin;
border-left-style: dotted;
border-left-color: #999999;
padding-left: 10px;
}

So sieht aus
Übersicht des fertigen Beispielprojektes

Sie können das gesamte Beispielprojekt hier herunterladen.

-->

< Zurück		Weiter >