EDV:WebSeitenEditieren: Difference between revisions
m (ââLinks) |
No edit summary  |
||
(11 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
= KIP-Webseiten = |
|||
{{Achtung|{{IconAchtung}} Hier wird eine veraltete Methode beschrieben, die nur noch fĂŒr alte Webseiten unterstĂŒtzt wird.}} |
|||
Neue Webseiten sollten mit dem [[EDV:KIP-CMS|KIP-CMS]] aufgebaut werden! |
|||
= KIP-Webseiten editieren = |
= KIP-Webseiten editieren = |
||
Neben der hier erklÀrten Methode der Erstellung von Webseiten gibt es |
|||
zum Thema Webseiten noch folgende Informationen im Wiki: |
|||
* [[EDV:WebSeitenEditieren/Zugriffskontrolle|Zugriff auf Webseiten einschrÀnken]] |
|||
Möchte man ĂŒber die hier beschriebene Basis hinaus, gibt es noch |
|||
* [[EDV:WebSeitenEditieren/Veroeffentlichungen|Veröffentlichungen aus der Datenbank abrufen]] |
|||
* [[EDV:WebSeitenEditieren/JobAngebote|Stellenangebote in den eigenen Seiten anzeigen lassen]] |
|||
* [[EDV:WebSeitenEditieren/Personen|Mitglieder der Arbeitsgruppe anzeigen]] |
|||
* [[EDV:WebSeitenEditieren/Dreispaltig|Dreispaltiges Layout]] |
|||
== Die Basis - FĂŒr einfache Webseiten == |
== Die Basis - FĂŒr einfache Webseiten == |
||
Line 111: | Line 128: | ||
sonst die deutsche. |
sonst die deutsche. |
||
Ăber den |
Ăber den Sprachwahl-Link rechts oben kann die Sprache auch explizit gewĂ€hlt werden. |
||
== Komplexere Einstellungen == |
== Komplexere Einstellungen == |
||
Line 122: | Line 139: | ||
Der Pfad steht ganz oben im Inhaltsbereich und zeigt, wo man sich im Web-Baum befindet. |
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. |
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 === |
=== Punkte in der Navigation hervorheben === |
||
Line 136: | Line 175: | ||
<? |
<? |
||
$mainpath="people"; |
$mainpath="people"; |
||
include('header.php.inc') |
include('header.php.inc'); |
||
Ăhnlich verhĂ€lt es sich mit den Unterpunkten. Die zugehörige Variable heisst $subpath und |
Ăhnlich verhĂ€lt es sich mit den Unterpunkten. Die zugehörige Variable heisst $subpath und |
||
Line 166: | Line 205: | ||
); |
); |
||
Die |
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: |
Man kann auch nur einen Teil der Struktur Ă€ndern, etwa einen zusĂ€tzlichen MenĂŒpunkt: |
||
$struktur |
$struktur['keyword10'] = array ( |
||
'name' => "°gZehnter HauptmenĂŒpunkt°eTenth Main Menu Entry°n", |
'name' => "°gZehnter HauptmenĂŒpunkt°eTenth Main Menu Entry°n", |
||
'index' => '10', |
'index' => '10', |
||
Line 352: | Line 391: | ||
$pathway .= " > <a href='/user/weis/demo/extlinks/'>°gExterne Links°eExternal Links°n</a>"; |
$pathway .= " > <a href='/user/weis/demo/extlinks/'>°gExterne Links°eExternal Links°n</a>"; |
||
</pre> |
</pre> |
||
== Die eigene Homepage im Web erstellen == |
== Die eigene Homepage im Web erstellen == |
||
Line 358: | Line 396: | ||
Um seine eigene Homepage unter '''<nowiki>http://www.kip.uni-heidelberg.de/user/<userid></nowiki>''' |
Um seine eigene Homepage unter '''<nowiki>http://www.kip.uni-heidelberg.de/user/<userid></nowiki>''' |
||
zu erstellen muss man in seinem Homeverzeichnis (im [[EDV:AFS|AFS]]) das Verzeichnis '''public_html''' |
zu erstellen muss man in seinem Homeverzeichnis (im [[EDV:AFS|AFS]]) das Verzeichnis '''public_html''' |
||
anlegen und dem Webserver Leserechte geben: |
anlegen und dem Webserver (host_web) Leserechte geben: |
||
cd ''# ins homeverzeichnis wechseln'' |
cd ''# ins homeverzeichnis wechseln'' |
||
mkdir '''public_html''' |
mkdir '''public_html''' |
||
fs setacl - |
fs setacl -dir . -acl '''host_web l''' |
||
fs setacl - |
fs setacl -dir public_html -acl '''host_web read''' |
||
Nun kann man nach Belieben eine index.php wie oben beschrieben anlegen und bearbeiten. |
Nun kann man nach Belieben eine index.php wie oben beschrieben anlegen und bearbeiten. |
||
== Links == |
== Links == |
||
Roh Templates der Universitaet |
Roh Templates der Universitaet http://www.uni-heidelberg.de/relaunch/index.html |
||
[[Category:EDV|WebSeitenEditieren]] |
[[Category:EDV|WebSeitenEditieren]] |
||
[[Category:EDV_HowTo|WebSeitenEditieren]] |
[[Category:EDV_HowTo|WebSeitenEditieren]] |
Latest revision as of 13:55, 1 October 2013
KIP-Webseiten
![]() |
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
- Veröffentlichungen aus der Datenbank abrufen
- Stellenangebote in den eigenen Seiten anzeigen lassen
- Mitglieder der Arbeitsgruppe anzeigen
- Dreispaltiges Layout
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-*
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.
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', );
Eigenes LOGO
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