Installation/Anpassung

Alle für dieses Design benötigten Dateien wurden in einer zip-Datei zusammengefasst, die zum Download bereitgestellt wird. Nach dem Download muss diese Datei natürlich entpackt werden. Wenn man dann im Explorer auf eine der vier HTML-Dateien klickt, öffnet sich der Standardbrowser und man kann in den Testdateien navigieren.

Ich empfehle, die HTML-, CSS- und Textdateien mit einem Texteditor zu öffnen. Die Dateien enthalten umfangreiche Kommentare, die das Verständnis erleichtern.

Inhalt der zip-Datei

• Vier Testdateien, jeweils mit der Endung .html. Diese Dateien sind ausschlißlich zum Ansehen und Experimentieren auf dem PC gedacht, nicht zum Hochlanden in den HTML-Speicher von NPage.
• Die Dateien spongebob_pseudoframe01_header.txt und spongebob_pseudoframe01_footer.txt. Diese beiden Dateien verdeutlichen, welche Teile des Designs in den Design-Style-Header und in den Design-Style-Footer kommen.
• Die Dateien spongebob_pseudoframe01_pc.css und spongebob_pseudoframe01_npage.css. Diese Dateien enthalten alle Stil- und Formatangaben. Beide Dateien sind im Wesentlichen identisch. _pc wird für die Darstellung der Testseiten genutzt, _npage ist zum Hochladen gedacht. Die CSS-Dateien sind für das Funktionieren unverzeichtbar.
• Die Grafikdateien spongebobpseudo01body03.gif, spongebobpseudo01hand01c.gif, spongebobpseudo01kopf02b.gif und spongebobpseudo01linkhover.gif. Diese Dateien sind natürlich ebenfalls sehr wichtig. Der Grundaufbau des Designs funktioniert jedoch grundsätzlich auch ohne Grafiken.

Download

Hier können alle für dieses Design erforderlichen Dateien -zusammengepackt in einem Archiv- heruntergeladen werden.

Zum Download des SpongeBob-Designs

Schrittfolge

Im Folgenden wird davon ausgegangen, dass keine Veränderungen am Design vorgenommen. Es sind allerdings dennoch einige Anpassungen erforderlich. Dazu jetzt schrittweise:

Bilder hochladen

Die vier Grafikdateien werden in den Grafikspeicher von NPage hochgeladen. Das automatische Komprimieren dazu bitte deaktivieren.

CSS Datei

Die CSS-Datei spongebob_pseudoframe01_npage.css enthält vier Bildverweise, die etwa so aussehen:

background-image:url('https://file1.hpage.com/001581/42/
bilder/spongebobpseudo01hand01c.gif')

Die Ziffern (fett) müssen angepasst werden. Dazu klickt man auf eine der zuvor hochgeladenen Grafik-Dateien. Dann wird unter dem Bild die Adresse angezeigt.

Danach kann die Datei spongebob_pseudoframe01_npage.css in HTML-Bereich bei NPage hochgeladen werden.

Style Header und Footer

Zunächst wird die Datei spongebob_pseudoframe01_header.txt mit einem Texteditor geöffnet. Dort findet man den folgenden Codeabschnitt (ohne Zeilenumbrüche)

<link rel="stylesheet" 
type="text/css" 
href="https://file1.hpage.com/001581/42/html/spongebob_pseudoframe01_npage.css">

Auch hier ist die fett geschriebene Ziffernfolge zu ersetzen. Sie ist mit der zu den Bildern ermittelten identisch.

Dann wird in den NPage-Design-Einstellungen für das Eigene Design ein Style angelegt (wenn dies nicht schon getan wurde) und der Inhalt der Datei spongebob_pseudoframe01_header.txt komiplett dort in den Header  hineinkopiert.

Der Inhalt der Datei spongebob_pseudoframe01_footer.txt kann ohne Veränderungen in den Footer des Design-Styles kopiert werden.

Jetzt kann man für einen ersten Test eine Textseite anlegen und dieser den zuvor erstellten und ausgefüllten Design-Style zuordnen.

Navigationslinks

Nachdem man in NPage alle geplanten Textdateienangelegt hat, müssen die Menülinks bearbeitet werde. Der Menüabschnitt ist in der Datei spongebob_pseudoframe01_footer.txt enthalten. In der mitgelieferten Datei sieht er so aus:

<!--Beginn der Menülinks-->
<!--Die Links zu den Textseiten bei Npage, zum Gästebuch etc. 
müssen natürlich angepasst werden-->
<div id="menu">
<a title="Zur Startseite" 
href="spongebob_pseudoframe01_start_.html">Start</a>
<a title="Beschreibung des Designaufbaus" 
href="spongebob_pseudoframe01_aufbau.html">Aufbau</a>
...
...
href="#1">Kontakt</a>
<a title="Toter Link, nur zur Füllung" 
href="#1">Impressum</a>
</div>
<!--Ende der Menülinks-->

In diesem Abschnitt müssen natürlich alle Linkangaben ersetzt werden. Die geschieht wiederum am besten wiederum am PC mit einem Texteditor. Anschließend wird dann der Inhalt in den Design-Style-Header kopiert.

Damit ist die Installation abgeschlossen.