Design einbauen

siehe auch: https://www.hpage.com/forum/html-css/28506-templates-einfuegen.html

Viele Websites im Internet bieten Designvorlagen zum kostenlosen Download an. Solche Designvorlagen kann man in den meisten Fällen auch problemlos bei NPage einbauen. Ich erkläre hier, wie es geht.

Benötigte Programme

Spezielle Programme benötigt man nicht. Alle notwendigen Anpassungen kann man mit dem Windows-Standard-Editor Notepad/Editor vornehmen. Bitte nie Word verwenden!

Inhalt des Downloadpaketes

In den meisten Fällen lädt man eine zip-Datei, die man auf der Festplatte entpackt. Enthalten sind in der Regel

Vorgehensweise

Grafikdateien hochladen

Alle Grafikdateien sind bei Npage hochzuladen. Achtung! Bitte sicherheitshalber den Haken bei Hochgeladene Bilder automatisch komprimieren rausnehmen, da sonst möglicherweise die Bildgröße verändert wird.

CSS-Datei mit Notepad anpassen und hochladen

Wenn zum Design Grafiken gehören, sind diese in den meisten Fällen mit Hilfe der CSS-Datei in das Design eingebunden. Das geschieht dann meist als sogenanntes Hintergrundbild und kann in der CSS-Datei so aussehen:

background: #ff0000 url(images/hintergrundbild.gif) fixed repeat-y;

oder

background-image: url(images/hintergrundbild.gif);

Typisch ist das Auftauchen der Endung einer Grafikdatei (GIF, JPG, PNG -egal ob groß- oder kleingeschrieben) .

Die CSS-Datei muss mit notepad geöffnet und nach den genannten Mustern durchsucht werden. Jede URL-Angabe ist mit der Adresse des hochgeladenen Bildes zu ersetzen. Aus

url(images/hintergrundbild.gif)

wird

url(https://file1.hpage.com/00xxxx/yy/bilder/hintergrundbild.gif)

Die genaue Adresse eines hochgeladenen Bildes erhältst du, wenn du über

Dateien >> Verzeichnisse >> Bilder auf ein Bild klickst. Die Adresse wird unterhalb des Bildes angezeigt. Der oben rot markierte Teil ist übrigens immer gleich. Die Zahlenfolgen xxxxyy sind identisch mit der User-ID-Nummer (zu sehen unter Einstellungen >> Meine Daten).

Nachdem diese Anpassungen erfolgt sind, kann die CSS-Datei bei NPage hochgeladen werden.

HTML-Datei mit Notepad anpassen und hochladen

CSS-Verweis

Die HTML-Datei enthält einen Verweis auf die CSS-Datei. Der sieht etwa so aus

<link rel="stylesheet" type="text/css" href="style.css">

 Die HTML-Datei wird mit dem Editor geöffnet und

href="style.css"
wird geändert auf:
href="https://file1.hpage.com/00xxxx/yy/html/style.css"

Die genaue Adresse der CSS-Datei erhält man, wenn man über Dateien >> Verzeichnisse >> HTML-Dateien mit der rechten Maustaste auf die CSS-Datei klickt und dann Linkadresse kopieren wählt.

Navigation

Die HTML-Datei enthält auch den Abschnitt, der für die Anzeige der Navigationsleiste mit den einzelnen Links verantwortlich ist. In manchen Designs erkennt man diesen Abschnitt oft an einem Kommentar. In einem Design auf der Website homepage-vorlagen-webdesign.de habe ich z.B. den folgenden Code gefunden:

<!-- Beginn der oberen Navigationstabelle -->
<div id="navi-oben">
<table cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="index.htm">Home</a></td>
    <td><a href="#">Galerie</a></td>
    <td><a href="#">&Uuml;ber uns</a></td>
    <td><a href="#">G&auml;stebuch</a></td>
    <td><a href="#">E-Mail</a></td>
    <td><a href="#">Impressum</a></td>
  </tr>
</table>
</div>

Hier ist die Navigation gut zu erkennen. Typisch für einen Navigationsbereich ist auf jeden Fall die dichte Aufeinanderfolge von vielen Links. Der eigentlich Linkcode setzt sich so zusammen:

<a href="Adresse der Seite in Kurz-/Langform" title="ein Tooltiptext muss nicht sein">Anzeigetext</a>

Der Anzeigetext sollte aussagekräftig sein, bei vielen Designvorlagen darf er nicht zu lang sein, damit er ins Design passt. Dann hilft auf jeden fall ein zusätzlicher Tooltiptext hinter title.

Bei den Adressen gibt es eine Kurzform und eine Langform. Die Langform ist nur bei Links von einer Website zu einer anderen erforderlich. Die Langform muss immer mit http:// beginnen.

Da innerhalb der Navigation im Normalfall zu anderen Seiten der gleichen Website verlinkt wird reicht die Kurzform, die nur den Dateinamen enthält. Die Namen der einzelnen Seiten bekommt man, in dem man Seiten >> Textseiten >> Alle Textseiten URLs ansehen klickt. Die dort angezeigte Langform sieht so aus

http://eigenes-design.npage.de/design_einbauen_25594465.html

Die Kurzform so

design_einbauen_25594465.html

Ein anpasster Link kann dann so aussehen:

<a href="design_einbauen_25594465.html" title="Wie man ein Design einbaut">Design einbauen</a>

In der NPage-Übersicht zu den Textseiten-URLs auch die Namen einiger spezieller NPage-Seiten (Gästebuch, Linkliste, Galerien usw.) enthalten. Sie lauten immer:

Achtung: Manche Design-Vorlagen enthalten mehrere Abschnitte mit Links. Um sicher zu gehen, dass man alles Links gefunden hat, sollte man die Datei in notepad noch einmal nach dem Begriff href durchsuchen.

Grafiken

In manchen Fällen enthalten sind auch in der HTML-Datei Links zu Grafiken enthalten. Die Verweise auf diese Grafiken müssen dann genauso angepasst werden, wie weiter oben zum Thema CSS-Datei beschrieben.

Quellen

Abschließend ist noch die Frage zu klären, woher man solche Designvorlagen bekommt. Wie immer hilft hier zuerst Google. Gib dort z.B. website vorlagen ein und du gelangst zu solchen Webseiten wie on-mouseover.de.

Bereits für den Einbau bei Npage als Eigenes Design vorbereitete Vorlagen findet man auf http://skywalk-webdesign.de/design-vorlagen