Artikel » Allgemeines » Einfügen oder Ändern der Kopfgrafik bzw. des Logos der Website Artikel-Infos
   

  Einfügen oder Ändern der Kopfgrafik bzw. des Logos der Website
17.10.2009 von PGersöne

Das PHPKIT Web CMS stellt Ihnen eine umfassende Designbearbeitung, zur individuellen Anpassung an Ihr gewünschtes Design zur Verfügung. In diesem Artikel werden wir Ihnen beschreiben, wie Sie eine Kopfgrafik in PHPKIT einbinden und ausrichten können. Besondere Kenntnisse sind dazu nicht erforderlich. Sie sollten nur wissen, wo sich Ihre einzubindende Grafikdatei befindet.

Schritt 1 - Öffnen der Designauswahl zu Bearbeitung


Screenshot der Hauptnavigation mit geöffnetem Menüpunkt Sonstiges Design

Nachdem Sie den Administrationsbereich Ihrer Installation des PHPKIT Web CMS betreten haben, öffnen SIe zunächst den Menüpunkt Sonstiges in der linken Navigation und wählen Designs als Unterpunkt aus.



Schritt 2 - Öffnen der Designbearbeitung


Screenshot des Administrationsbereichs von PHPKIT mit der Designauswahl zur Bearbeitung

Wählen Sie das Design aus, in welchem Sie Ihre Kopfgrafik anzeigen lassen möchten. Sie können dazu auf den Titel des Desings mit der Maus klicken. Das momentan aktive Design können Sie daran erkennen, dass der Titel im Fettdruck angezeigt wird.



Schritt 3 - Pfad zum Verzeichnis für Grafikdateien angeben


Screenshot der Designbearbeitung mit Hervorhebung des Eingabefeldes für den Grafikdateipfad

Sie müssen zunächst PHPKIT mitteilen wo sich Ihr Grafikverzeichnis befindet. Tragen Sie in diesem Eingabefeld den Pfad zu diesem Verzeichnis für Ihre Grafiken der Website ein.


Anmerkung:
Es ist ratsam die Empfehlung für den Grafikpfad zu verwenden. Dabei sollten Ihr eigenes Verzeichnis kurz und eindeutig benennen. Verzichten Sie auf Klammern, Umlaute, Leerzeichen und verwenden Sie Kleinschreibung im Namen des Verzeichnisses. In diesem Beispiel nennen wir es fx/meindesign/



Schritt 4 - Die schnelle Navigation in der Designverwaltung


Screenshot der Bearbeitungsmaske für das Design in PHPKIT

Sobald Sie Bearbeitungsmaske des gewünschten Designs betreten haben, wählen Sie aus der oberen Navigation der Bearbeitungsmaske Kopf- und Logobereich aus. Sie gelangen damit zum Ankerpunkt des Kopf- und Logobereichs und brauchen nicht mit manuell zu scrollen.



Schritt 5 - Die Einstellungen zum Kopf- und Logobereich


Screenshot der Bearbeitungsmaske zum Kopf- und Logobereich

Ihnen stehen verschiedene Optionen offen, mit denen Sie den Bereich des Seitenkopfes zusammen mit dem Websitelogo anpassen können. Zunächst möchten wir eine neue Grafik einbinden. Zunächst muss die einzubindende Grafikdatei entsprechend hochgeladen worden sein.


Anmerkung:
In diesem Beispiel haben wir bereits eine Grafikdatei namens himmel.png zuvor mit einem FTP-Programm in das Verzeichnis: pk/fx/meindesign hochgeladen. Der komplette Pfad zur Grafik lautet ausgehend vom PHPKIT-Rootverzeichnis fx/meindesign/himmel.jpg



Schritt 6 - Feststellen der Eigenschaften der Grafik


Screenshot der Eigenschaften der einzubindenden Kopfgrafik

Rufen Sie die Grafik zunächst einmal in einem neuen Tab oder neuem Fenster des Webbrowsers auf, indem Sie den kompletten Pfad in der Adresszeile des Webbrowsers eingeben und den Aufruf bestätigen. Danach klicken Sie mit einem Rechtsklick in die Grafik und wählen Eigenschaften aus. Sehen Sie sich dort die Abmessungen dabei genau an.

Screenshot der Eigenschaften der einzubindenden Kopfgrafik



Schritt 7 - Eintragen der Daten zum Einbinden der Grafik


Screenshot der Optionen des Kopf- und Logobereichs in der Administration

Nun kommt der kniffligste Teil aber anhand der nun bekannten Bildeigenschaften, können die rot eingerahmten Optionen korrekt vervollständigt werden. Für die Höhe des Kopf- und Logobereiches geben wir eine Höhe von200 Pixeln an, damit er hoch genug für die Grafik ist.

Bei Logo-Grafik wird der Name der einzubindenden Grafikdatei, in diesem Fall himmel.jpg, eingetragen.

Die Positionierung des Logos gibt an, ob die Grafik entweder linksbündig,zentiert oderrechtsbündig ausgerichtet werden soll. Welcher Wert ausgewählt wird, ist von der Grafik individuell abhängig. In unserem Fall des Himmels soll dieser zentiert werden.

Die Angabe die bei Vertikale bzw. die Horizontale Positionskorrektur eingetragen werden soll, passt sich ebenfalls an der Höhe des Logobereichs sowie auch an der Höhe der Grafik an. In unserem Fall wird die Grafik ohne Lücke eingefügt, deswegen haben wir dort den Wert 0 eingetragen.

In unserem Beispiel möchten wir die Farbe Weiß für die Hintergrundfarbe und Hintergrundfarbe der Werbe- und Bannereinblendungen verwenden. Dazu geben wir den Wert FFFFFF zweimal als Hexwert ein.

Bei Bedarf kann auch eine Hintergrundgrafik angegeben werden. Diese verwenden wir in unserem Beispiel nicht. Genau sowie wir die Angabe der Wiederholung der Hintergrundgrafik unverändert lassen.

Wenn Sie Ihre Eingaben beendet haben, so klicken Sie auf das Dreieck, was nach unten zeigt, in der oberen, rechten Ecke des Formulars. Damit gelangen Sie am schnellsten zum Speicherbutton damit Sie Ihre gemachten Angaben Speichern können.



Abschießende Tipps


Es bleibt nicht aus, dass man mit den zuvor beschriebenen Einstellungen zunächst experimentieren und etwas herum probieren muss, damit die eingebundene Grafik auch gut in den Kopf der Website passt.

Eventuell ist es manchmal ratsam die Höhe des Kopf- und Logobereichs im Verhältnis zur Grafik etwas zu vergrößern. Dann lässt sich die Grafik mit etwas mehr Platz optisch besser ausrichten. Lücken zwischen Grafik und dem Rand der Website lockern zudem das Gesamtbild etwas auf.

Ein sehr sinnvolles und zudem noch webbasiertes Tool zur Konfiguration von Farbschemen nennt sich
Color Scheme Desinger. Damit kann man eine gute Hintergrundfarbe zu einer Grafik auswählen.



Druckansicht   druckbare Version anzeigen
Seite empfehlen   Seite empfehlen
0 Kommentar(e)   kommentieren
Wertung ø 7,00
3 Stimme(n)
Seitenanfang nach oben