EDV:WebSeitenEditieren: Difference between revisions

From KIP Wiki
⧼kip-jumptonavigation⧽⧼kip-jumptosearch⧽
Line 9: Line 9:
Damit Sie nicht bei jeder Webseite über die Details des Layouts
Damit Sie nicht bei jeder Webseite über die Details des Layouts
nachdenken müssen und - vor allem - bei Layout-Änderungen
nachdenken müssen und - vor allem - bei Layout-Änderungen
nicht alle Webseiten anpassen müssen brauchen wir eine
nicht alle Webseiten anpassen müssen, brauchen wir eine
Trennung von Layout und Inhalt.
Trennung von Layout und Inhalt.
Wir erreichen dies mit Hilfe von [[w:de:PHP|PHP]].
Wir erreichen dies mit Hilfe von [[w:de:PHP|PHP]].

Revision as of 10:28, 22 May 2007

KIP-Webseiten editieren

Die Basis - Für einfache Webseiten

Die Sprache

Damit Sie nicht bei jeder Webseite über die Details des Layouts nachdenken müssen und - vor allem - bei Layout-Änderungen nicht alle Webseiten anpassen müssen, brauchen wir eine Trennung von Layout und Inhalt. Wir erreichen dies mit Hilfe von PHP. Wenn Sie bisher die Seiten nur in html geschrieben haben: Keine Panik, Sie müssen nicht PHP lernen. Mit PHP wird vor allem das Design, bzw. das Layout gesetzt. Sie müssen nur am Dateianfang und am Dateiende einen PHP-Befehl einfügen.

Die Dateiendung für PHP-Dateien lautet .php. Das heisst, Sie nennen Ihre Dateien index.php oder neues.php usw. In einer PHP-Datei können Sie ganz normal den Text in HTML schreiben.

Die eingebundenen Dateien haben alle die Endung .php.inc. Vor allem damit sie nicht direkt heruntergeladen werden können, selbst wenn sie in einem Ordner liegen, der im Web sichtbar ist. Versucht man es doch, dann bekommt man eine Meldung 'Zugriff verweigert'.

Das Layout

Das Layout mit dem Rahmen ist in einen header und in einen footer getrennt. Diese werden mit

include("header.php.inc");

bzw.

include("footer.php.inc");

eingebunden. Dazwischen wird der Inhalt plaziert.


Damit sieht eine typische PHP-Webseite im Quelltext so aus:

<?php
 
include("header.php.inc");

?>
<h1>Überschrift</h1>
Text...
<?php

include("footer.php.inc");

?>

Wichtig ist, dass die Datei gleich mit <? anfängt und nichts davor steht - auch keine Leerzeile!

Bearbeiter / Kontakt-Email

Am Fuss der Seite wird ggfs. ein Bearbeiter genannt. Um diese Angabe zusammen mit der E-Mail-Adresse und dem Seitentitel anzupassen ändern wir den Dateikopf in

<?php
 
  include("header.php.inc");

  $contact="Robert Weis";
  $contactemail="weis@kip.uni-heidelberg.de";

  $title="Seitentitel";

?>

Wichtig ist, dass diese Variablen nach dem include("header") plaziert werden.

Mehrsprachigkeit

ist eigentlich Zweisprachigkeit. Es geht darum, dass wir eigentlich die Webseiten auf deutsch und auf englisch anbieten möchten. Wir möchten aber nicht zwei Dateien betreuen. Als Lösung hilft hier wieder PHP. Deutsche und englische Texte werden jetzt nebeneinander eingeben:

Die Syntax ist

°gdeutscher Text°eenglish text°n

also immer in der Kombination

°g°e°n

Zwischen °g und °e steht der deutsche Text und zwischen °e und °n der englische Text.

In unserem Beispiel sieht das so aus:

<?php
 
  include("header.php.inc");

  $contact="Robert Weis";
  $contactemail="weis@kip.uni-heidelberg.de";

  $title="°gSeitentitel°epage title°n";

?>
<h1>°gÜberschrift°eCaption°n</h1>
°gdeutscher Text°eenglish text°n...
<?php

include("footer.php.inc");

?>

Die Übersetzung des Layout-Rahmens geschieht automatisch.

Die anzuzeigende Sprache wird über die Eigenschaften des Browser ermittelt. Wenn der Client englisch eingestellt hat erscheint die englische Variante, sonst die deutsche.

Über den Sprachwähl-Link rechts oben kann die Sprache auch explizit gewählt werden.

Komplexere Einstellungen

Übder diese Basis-Funktionalität hinaus gibt es noch einige Methoden Navigation, Pfadangabe usw. zu beinflussen. Die Art und Weise wie das geschieht ist zur Zeit noch etwas im Fluss.

Die Navigation ist der Bereich links mit Hauptpunkten und unter jedem Hauptpunkt ist (üblicherweise) ein Untermenu.

Der Pfad steht ganz oben im Inhaltsbereich und zeigt, wo man sich im Web-Baum befindet. Jeder Teilast sollte ein Link zu dem dortigen Bereich sein.

Punkte in der Navigation hervorheben

Die Navigation ist der Bereich links mit Hauptpunkten und unter jedem Hauptpunkt ein Untermenu. Normalerweise wird über den URL ermittelt, welcher Hauptpunkt geöffnet ist. Wenn das aus dem URL nicht ermittelt werden kann bzw. wenn man einfach die Öffnung eines Hauptpunktes erzwingen möchte, kann man mit $mainpath="[hauptpunkt]"; VOR dem include('header.php.inc') einen Hauptpunkt öffnen. Im header wird das Menu aufgebaut, daher muss diese Variable VOR dem header stehen.

Beispiel:

<?
$mainpath="people";
include('header.php.inc')

Ähnlich verhält es sich mit den Unterpunkten. Die zugehörige Variable heisst $subpath und sollte den Schlüsselwert des Untermenüpunktes enthalten. Das ist am besten bei dem Beispiel ganz unten zu erkennen.

Eigene Navigation definieren

Die Navigation ist über ein Array names $struktur definiert. Die Arrayelemente sind wieder Arrays mit den Feldern 'name', 'index', 'path' und optional 'submenu'.

Das sieht in etwa so aus:

$struktur = array(
   'keyword' => array(
             'name'  => "°gErster Hauptmenüpunkt°eFirst Main Menu Entry°n",
             'index' => '1',
             'path'  => 'LinkZumErstenHauptmenuePunkt',
             'submenu' => array(
                         'linkErsterUnterpunkt'   =>  '°gName Erster Unterpunkt°eName of First Submenu Entry°n',
                         'linkZweiterUnterpunkt'  =>  '°gName Zweiter Unterpunkt°eName of Second Submenu Entry°n',
                        ),
            )
   'keyword2' => array(
             'name'  => "°gZweiter Hauptmenüpunkt°eSecond Main Menu Entry°n",
             'index' => '2',
             'path'  => 'LinkZumZweitenHauptmenuePunkt',
            )
);

Die weiter unten erwähnte Variable $mainpath bezieht sich auf keyword

Das Logo ist das Bild direkt über der Navigation. Typischerweise ist das ein Bild mit einer Breite von 204 Pixeln, Über die Variable $instlogo kann das Logo ersetzt werden.

Beispiel

<?
$instlogo="<img src=pfadzumeinemlogo.gif border=0 alt='Mein Logo'>";

wieder VOR dem header!

Den Pfad verändern

Der Pfad steht ganz oben im Inhaltsbereich und zeigt, wo man sich im Web-Baum befindet. Jeder Teilast sollte ein Link zu dem dortigen Bereich sein. Normalerweise muss man nur etwas (am rechten Ende) 'anhängen'. Das geht mit der Variablen $addtopathway :

<?
$addtopathway = " <a href='neu.php'>°gNeu°eNew°n</a>";
include("header.php.inc");
?>

Die guidelinks verändern oder ersetzen

Die guidelinks sind die Links rechts oben, bei denen zum Beispiel auf Englisch/Deutsch ungeschaltet werden kann. Hier kann es zum Beispiel sein, dass man noch einen weiteren Link hinzufügen möchte. Oder aber man möchte die guidlinks ersetzen. Die hierfür verantwortliche Variable heisst $guidelinks .

Bitte beachten Sie, dass diese Variable nur über die Datei localsettings.php.inc geändert werden kann!

Diese Variable ist standardmässig so definiert:

$guidelinks = "<a href='/overview/'>°gWegweiser°eguide°n</a>
	   | <a href='http://lsf.uni-heidelberg.de/'>LSF</a>
	   | <a href='/contact/index.php'>°gKontakt°econtact°n</a>
	   | <a href='$SCRIPT_NAME?lang=°gen°ede°n'>°gEnglish°eDeutsch°n</a>";

Man kann diese $guidelinks komplett durch eine eigene Definition ersetzen oder auch zum Beispiel am linke Ende einen Link hinzufügen:

$guidelinks = " <a href='/user/weis/demo/'>°gMeine Seiten°eMy Pages°n</a> | " . $guidelinks;

Einstellungen für ein Verzeichnis

Alle Einstellungen können Sie auch 'lokal' für ein Verzeichnis allen dortigen php-Dateien über die Include-Datei 'localsettings.php.inc' definieren. Sie brauchen sich dann auch keine Gedanken mehr darüber machen, ob eine Variable vor oder nach dem Header definiert werden muss. Hier kann man auch den vollständigen Pfad (Variable $pathway) überschreiben.

In dem folgenden Beispiel wurden möglichst viele Veränderungen umgesetzt. Sie müssen aber nicht alles ändern. Setzen Sie nur die Variablen, die Sie verändern wollen.

Beispiel:

 <?
 // localsettings.php.inc
 $contact="Robert Weis";
 $contactemail="weis@kip.uni-heidelberg.de";
 
 $instlogo="<img src=/user/weis/demo/meinlogo°g°e_en°n.gif border=0 alt='Mein Logo'>";
 $title = "KIP - Robert Weis - °gMeine Seiten°eMy Pages°n
 $pathway = "<a href='/'>KIP</a>";
 $pathway .= " > <a href='/user/weis/'>Robert Weis</a>";
 $pathway .= " > <a href='/user/weis/demo/'>Demo</a>";
 $guidelinks = " <a href='/user/weis/demo/'>°gMeine Seiten°eMy Pages°n</a> | " . $guidelinks;
 $struktur = array(
   "KIP" => array (
      "name" => "°gKirchhoff-Institut für Physik°eKirchhoff Institute for Physics°n",
      "index" => "1",
      "path" => "/",
      ),
   "/user/weis/demo/" => array (
      "name" => "°gMeine Seiten°eMy Pages°n",
      "index" => "2",
      "path" => "/user/weis/demo/",
      "submenu" = array (
            "/user/weis/demo/mathematica/" => "°gMathematica Einführung°eIntroduction to Mathematica°n",
            "/user/weis/demo/latex/" => "L<sup>A</sup>T<sub>E</sub>X - Links",
          ),
      ),
   "/user/weis/demo/extlinks/" => array (
      "name" => "°gExterne Links°eExternal Links°n",
      "index" => "3",
      "path" => "/user/weis/demo/extlinks",
      "submenu" = array (
            "http://www.uni-heidelberg.de" => "°gUniversität Heidelberg°eUniversity of Heidelberg°n",
            "http://www.physik.uni-heidelberg.de" => "°gFakultät für Physik und Astronomie°eDepartment of Physics and Astronomy°n",
            "http://google.de" => "Google",
          ),
      ),
 );

Beispiel

Die oben beschriebene localsettings.php.inc habe ich unter der URL http://newdesign.kip.uni-heidelberg.de/user/weis/demo/ zu einem vollständigen Beispiel ausgebaut.

Zunächst die Hauptseite demo/index.php :

<?
  include("header.php.inc");
?>
 
 <h1>°gMeine Seiten°eMy pages°n</h1>

<?
  include("footer.php.inc");

demo/mathematica/localsettings.php.inc :

<?
include("../localsettings.php.inc");
$subpath  = "/user/weis/demo/mathematica/";
$pathway .= " > <a href='/user/weis/demo/mathematica/'>°gMathematica Einführung°eIntroduction to Mathematica°n</a>";
$title="KIP - Robert Weis - °gMathematica Einführung°eIntroduction to Mathematica°n";

demo/latex/localsettings.php.inc :

<?
include("../localsettings.php.inc");
$subpath  = "/user/weis/demo/latex/";
$pathway .= " > <a href='/user/weis/demo/latex/'>L<sup>A</sup>T<sub>E</sub>X</a>";

demo/extlinks/index.php :

<?
  include("header.php.inc");
?>
 
 <h1>°gMeine Seiten°eMy pages°n - °gExterne Links°eExternal Links°n</h1>

<?
  show_subindex("");
  include("footer.php.inc");

demo/extlinks/localsettings.php.inc :

<?
include("../localsettings.php.inc");

$mainpath="extlinks";
$pathway .= " > <a href='/user/weis/demo/extlinks/'>°gExterne Links°eExternal Links°n</a>";