TNG-Modifikationen (3) Template 4

Klick: zurück zu der Seite, von der Sie gekommen sind  zurück Klick: zurück zu Startseite Startseite  weiter Klick: zur nächsten Seite
ausdrucken : Strg-P

Die gezeigten Screenshots basieren auf dem TNG-Template 4. Die anderen Templates zeigen ähnliche Darstellungen.
Die Bildschirmausgabe ist für den Browser Internet Explorer, Version 7, Textgröße "Mittel" sowie einen 19-Zoll-Bildschirm optimiert.



> >  Inhaltsverzeichnis

Sie sind hier:
zu Deutsch etwa:
TNG - The Next Generation Of Genealogy Sitebuilding
Die nächste Generation der genealogischen Seitenerstellung

Es wird der Umgang mit der
Modifikation von Bildschirmansichten (3)   - Template 4
erläutert.
Zweckmäßigerweise druckt man sich die nachfolgende Anweisung aus und legt sie sich neben die Tastatur, um alles in Ruhe abzuarbeiten.


1. Lokaler Server    (auf dem Heimcomputer)
1.1 Allgemeines
In diesem Beitrag wird erläutert, wie man der TNG-Anwendung eine neue Oberfläche (und zwar Template 4) "verpaßt".
Die nachfolgend durchgeführten Änderungen beziehen sich auf die TNG Version 6.2.0 .
Ob diese Änderungen bereits in die neue TNG Version 7.0 eingearbeitet wurden, konnte nicht überprüft werden.

Von den Änderungen sind folgende TNG-Dateien betroffen:
index.php
topmenu.php

1.2 Template 4 kopieren
1.2.1 Die Dateien für Template 4 werden in das TNG-Verzeichnis kopiert, wie unter Menü-Punkt "Templates", "40 Bildschirmansicht 1" beschrieben.
1.2.2 Wenn nun die TNG-Anwendung gestartet wird, zeigt sich die TNG-Startseite wie folgt:


1.2.3 Die TNG-Oberfläche ist nun in englischer Sprache dargestellt.
Außerdem sind die einzelnen Menü-Punkte und der Text "Main Feature" zentriert.
Um dies zu ändern, klickt man links im Menü auf "Change Language".
In dem sich öffnenden Fenster wählt man bei "Language" die deutsche Sprache aus und klickt auf die Schaltfläche "Save Changes".
Schon zeigt sich das Menü in deutscher Sprache.
(Voraussetzung ist natürlich, dass die deutschen Sprachdateien hinzugefügt wurden).
Die Menü-Punkte und der Text sind aber immer noch zentriert.
1.2.5 Wenn man nun einen der Menü-Punkte anklickt - z.B. "Dokumente", dann zeigen sich die Menü-Punkte wieder in englischer Sprache; der Text der Teilseite "Dokumente" ist allerdings in Deutsch.
Dies ist unbefriedigend.
Um dies zu ändern, schaltet man in die Verwaltungsansicht (Administration).
Dort klickt man auf die Schaltfläche "Einstellung und Konfiguration".
Dort klickt man auf die Schaltfläche "Allgemeine Einstellungen".
Dort klickt man auf das Kreuzchen neben "Website-Design und allgemeine Angaben".
In dem Eingabefeld bei "Persönliche Kopfzeilen" ändert man den Eintrag "topmenu.html" in "topmenu.php" und klickt unten auf die Schaltfläche "Speichern".
Nun zeigen sich die Menü-Punkte in der jeweils eingestellten Sprache - egal, welchen Menü-Punkt man anklickt.
1.2.6 Nun werden Änderungen am Menü vorgenommen:
a) Menü-Punkte im Startmenü links ausrichten.
Es wird die Datei "index.php" in einen HTML-Editor geladen.
Man geht zur Zeile 15.
Dort ändert man den Eintrag "center" in "left".
Dies bewirkt, dass die Menü-Punkte links ausgerichtet werden - aber nur im Menü auf der Startseite.
Um den Text unter "Main Feature" als Block auszurichten, geht man zur Zeile 84.
Dort ersetzt man den Eintrag class="normal" durch den Eintrag align="justify" .
Dies bewirkt, dass der Text als Block dargestellt wird.
Man kann zudem hier auch die Überschrift "Main Feature" sowie den Text durch eigenen Text ersetzen.
Um die Startseite auf die gesamte Breite des Bildschirms auszurichten, geht man zur Zeile 16.
Dort fügt man hinter dem Eintrag bgcolor="#FFFFFF" den Eintrag width="100%" ein.
Um den Kopf, das Photo und den Text der Startseite besser auf die Startseite auszurichten, geht man zur Zeile 71.
Dort fügt man hinter dem Eintrag cellpadding="0" den Eintrag width="90%" ein.


Um die Menü-Punkte auch in den Menüs der aufgerufenen Unterseiten links auszurichten, geht man wie folgt vor:
b) Menü-Punkte in allen Unter-Seiten links ausrichten.
Es wird die Datei "topmenu.php" in einen HTML-Editor geladen.
Dort geht man zur Zeile 4.
Dort ändert man den Eintrag "center" in "left".
Dies bewirkt, dass die Menü-Punkte der Menüs und auch die Texte aller Unter-Seiten links ausgerichtet werden.
Im Vergleich zur Startseite ist auf allen Unter-Seiten der Abstand zwischen den Menü-Punkten "Nachnamen" und "Abmelden" eine Zeile größer.
Um diesen Abstand demjenigen der Startseite anzugleichen, lädt man die Datei "topmenu.php" in einen HTML-Editor.
Dort geht man zur Zeile 21 und entfernt dort einen der beiden Einträge <br> .
Und speichern.
Nun zeigt sich das Menü auf allen TNG-Seiten gleich.

1.2.7 Änderung folgender Ansichten :
a) Titelbild


Der Titel des Templates 4 ist als gif-Bild-Datei gespeichert.
Man kann diesen Titel nun gemäß den eigenen Vorstellungen anpassen.
Dazu gibt es zwei Möglichkeiten:
aa) ein eigenes gif-Bild entwerfen;
bb) einen Schriftzug direkt einfügen.
Zu aa):
Wie man so etwas realisiert, ist hier beschrieben :
Schriftzug als gif-Bild erstellen
Dort unter Ziffer 1.2.8 in Verbindung mit 1.2.16 .
Zu bb):
Wie man den Schriftzug direkt in die Datei index.php einfügt, ist hier beschrieben: Schriftzug erstellen
Dort unter Ziffer 1.2.9 .

Das Titelbild bzw. der Titel-Schriftzug könnte z.B. so aussehen:



b) Kleines Foto


Im TNG-Ordner (TNG-Vers. 6.2 ; Template 4) ist dieses Photo unter dem Namen smallphoto.jpg gespeichert.
Man kann nun selbst ein eigenes Foto erstellen und ebenfalls im vorgenannten Ordner speichern.
Dann wird von smallphoto.jpg eine Kopie angefertigt bzw. smallphoto.jpg wird umbenannt in smallphoto_alt.jpg.
Dann wird das eigene Foto in smallphoto.jpg umbenannt.
Dies bewirkt, dass künftig das eigene Foto oben im Kopf des Template 4 erscheint - z.B.
c) Search Foto


Dieser Schriftzug findet sich oben im Menüteil jeder TNG-Seite des Template 4.
Auch, wenn man zu einer anderen Sprache umschaltet (Deutsch, Französisch oder Spanisch usw.), bleibt dieser Schriftzug in Englisch.
Man kann das ändern, indem man ein neues gif-Bild erzeugt - mit deutschsprachigem Schriftzug - also "Suche"  oder  "Suchen".
Bevor man sich an die "Umgestaltung" macht, soll darauf hingewiesen werden, dass dieser "deutschsprachige" Schriftzug allerdings auch bei der Umschaltung zu einer anderen Sprache bestehen bleibt.
  oder  
Wenn man damit "leben" kann, weil man ohnehin nur deutsche Besucher auf seiner Seite erwartet, geht man wie folgt vor:
a) Schriftzug als Bild-Datei erstellen.
Man erstellt mit einem Grafik-Programm das Bild "Suche" (wie unter c) Search Foto).
b) Schriftzug als Text erstellen.
Dazu lädt man die Datei index.php in einen HTML-Editor.
Dort geht man zu Zeile 21 und kommentiert folgenden Eintrag aus:

<!--
<a href="searchform.php"> <img src="search4.gif" alt="<?php echo $text[mnusearchfornames]; ?>" width="109" height="35" vspace="0" border="0">
-->

Damit ist der Schriftzug "Search" oben in den Menüs nicht mehr zu sehen.
Vor der Zeile 21 fügt man nun folgenden Code ein:

<font size="+3"><font face="Times New Roman"><font color="#FFFFC6"><b>Suche</font></font></font>

Die gleiche Prozedur, wie vor beschrieben, muß auch in der Datei "topmenu.php" durchgeführt werden, da anderenfalls in den Unterseiten der TNG-Anwendung nach wie vor der Schriftzug "Search" erscheint.
Zu diesem Zweck lädt man die Datei in einen HTML-Editor und geht dort zur Zeile 10.
Dort kommentiert man wieder folgenden Eintrag aus:

<!--
<a href="searchform.php"> <img src="search4.gif" alt="<?php echo $text[mnusearchfornames]; ?>" width="109" height="35" vspace="0" border="0">
-->

Nach Zeile 9 wird sodann folgender Code eingefügt:

<font size="+3"><font face="Times New Roman"><font color="#FFFFC6"><b>Suche</font></font></font>

Dies bewirkt, dass künftig der Schriftzug "Suche" oben in den Menüs aller TNG-Seiten zu sehen sein wird.
1.2.8 Kopfleiste auf den Unterseiten der TNG-Anwendung
Auf den Unterseiten der TNG-Anwendung 6.2.0, mit Template 4, findet sich die Kopfleiste wie unter Punkt 1.2.7 zu a) zu sehen.
Auch diese Kopfleiste kann man ändern.

Dazu lädt man die Datei "topmenu.php" in einen HTML-Editor.
Dort geht man zur Zeile 69 und kommentiert den dortigen Eintrag aus:

<!--
<img src="title.gif" alt="Our Family Genealogy Pages" width="468" height="100" vspace="5" border="0" align="left">
-->

Nach Zeile 70 fügt man dann folgenden Code ein:

<font size="+4"><font face="Comic Sans MS"><font color="#800000">Familiengeschichte <font color="#808000">Mustermann</font></font></font></font>

1.2.9 Startseiten-Foto ändern
Auf der TNG-Startseite ist unter der Kopfzeile ein Foto mit einer Straßenansicht zu sehen.
Unterschrift unter diesem Foto:


           Mt. Pleasant, Utah, about 1915

Man kann hier ein eigenes Foto platzieren.
Das wird wie folgt realisiert:

Man erstellt ein eigenes Foto (z.B. Elternhaus; Straßenansicht; Arbeitsplatz; Beruf) in der Größe 300 mal 172 Pixel und speichert es im TNG-Ordner.
z.B.

           Elternhaus Mustermann

Dann wird das Ursprungsfoto "bigphoto.jpg" umbenannt in "bigphoto_alt.jpg".
Dann wird das eigene Foto in "bigphoto.jpg" umbenannt und gespeichert.
Statt des Textes unter dem Foto "Mt. Pleasant, Utah, about 1915" fügt man seinen eigenen kurzen Text ein.
Hierzu lädt man die Datei "index.php" in einen HTML-Editor, geht zur Zeile 93 und gibt dort den eigenen Text für die Bildunterschrift ein.



2. Webserver    (beim Provider)
Auf dem Webserver läuft es ähnlich ab, wie auf dem Lokalserver.

Alle Schritte werden so durchgeführt, wie unter Ziffer 1. beschrieben.




Klick: zurück zu der Seite, von der Sie gekommen sind  zurück Klick: zurück zu Startseite Startseite  weiter Klick: zur nächsten Seite