Ruprecht Karls Universitńt Heidelberg

EDV:WebSeitenEditieren

From KIP Wiki
Jump to: navigation, search

KIP-Webseiten

Achtung.svg Hier wird eine veraltete Methode beschrieben, die nur noch f├╝r alte Webseiten unterst├╝tzt wird.

Neue Webseiten sollten mit dem KIP-CMS aufgebaut werden!

KIP-Webseiten editieren

Neben der hier erkl├Ąrten Methode der Erstellung von Webseiten gibt es zum Thema Webseiten noch folgende Informationen im Wiki:

M├Âchte man ├╝ber die hier beschriebene Basis hinaus, gibt es noch

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 Sprachwahl-Link rechts oben kann die Sprache auch explizit gew├Ąhlt werden.

Komplexere Einstellungen

├ťber 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.



Folgende Variablen k├Ânnen Sie ver├Ąndern; die hier angezeigten Werte sind die default-Werte.

$bodyload="";
$imagedir="/design/images";
$cssurl="/design/css";
$addtocss="";
$addtoprintcss="";
$addtoheader="";
$charset="iso-8859-15";

Zeichensatz

Als Standard-Wert wird der Zeichensatz 'iso8859-15' verwendet. Wenn Sie einen anderen Zeichensatz in der Datei verwenden, k├Ânnen Sie den Zeichensatz, der dem Browser mitgeteilt wird, mit der Variablen $charset ├Ąndern. Diese Variable sollten Sie vor dem include(header.php.inc) oder in der Datei 'localsettings.php.inc' setzen.

M├Âgliche Werte sind : utf-8, iso-8859-*

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 schon erw├Ąhnte Variable $mainpath bezieht sich auf keyword.

Man kann auch nur einen Teil der Struktur ├Ąndern, etwa einen zus├Ątzlichen Men├╝punkt:

$struktur['keyword10'] = array (
             'name'  => "┬░gZehnter Hauptmen├╝punkt┬░eTenth Main Menu Entry┬░n",
             'index' => '10',
             'path'  => 'LinkZumZehntnenHauptmenuePunkt',
            );

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!

Der Link beim Bild sollte -- wenn er den erzeugt werden soll -- mit angegeben werden:

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

Wenn Sie einfach nur zus├Ątzlich zum KIP-Logo eine weiteres Logo (darunter) hinzuf├╝gen m├Âchten:

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

Bitte beachten Sie, dass das Logo 204 Pixel breit sein sollte.

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;

Zus├Ątzliche css-Dateien einlesen

Wenn man eine eigene css-Datei zus├Ątzlich zu den System-css-Dateien eingelesen haben m├Âchte, dann geht das durch definieren der Variablen $addtocss :

$addtocss="@import url(mystyle.css);";

Achtung : diese Variable kann nur in 'localsettings.php.inc' gesetzt werden.

Eigene Header-Tags hinzuf├╝gen

Mit $addtoheader k├Ânnen zus├Ątzlich Tags dem Header hinzugef├╝gt werden. Man kann aber auch kleine css-Einstellungen hier vornehmen, z.B.:

$addtoheader="<style type=\"text/css\">
#content li {
	background: none;
	padding-left: 3px;
}
</style>";
(In diesem Beispiel wird das Quadrat bei den li-tags abgeschaltet)

Achtung : diese Variable kann nur in 'localsettings.php.inc' gesetzt werden.

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.="<a href='/user/weis/'><img src='/user/weis/demo/meinlogo┬░g┬░e_en┬░n.gif' border=0 alt='Mein Logo'></a>";
 $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://www.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>";

Die eigene Homepage im Web erstellen

Um seine eigene Homepage unter http://www.kip.uni-heidelberg.de/user/<userid> zu erstellen muss man in seinem Homeverzeichnis (im AFS) das Verzeichnis public_html anlegen und dem Webserver (host_web) Leserechte geben:

cd    # ins homeverzeichnis wechseln
mkdir public_html
fs setacl -dir .           -acl host_web l
fs setacl -dir public_html -acl host_web read

Nun kann man nach Belieben eine index.php wie oben beschrieben anlegen und bearbeiten.

Links

Roh Templates der Universitaet http://www.uni-heidelberg.de/relaunch/index.html

Personal tools