TUTORIAL Wie binde ich ein eigenes Design bei npage ein! Und wie verwalte ich es! (Ausgabe eins) von
Inhalt: E. No. Einheit Name Seite 1. Einführung 2 2. Eigenes Design 3 2.1 Design Überblick 3 2.2 Design Einbau 3 2.2.1 > Schritt 1 3 2.2.2 > Schritt 2 4 2.2.3 > Schritt 3 4 2.2.4 > Schritt 4 5 2.2.5 > Schritt 5 6 2.2.6 > Schritt 6 6 3 Verwaltung 7 3.1 Links 7 3.1.1 > Links in einem Menü 7 3.1.1.1 Das npage Untermenü 9 3.2 npage Gimmicks 12 3.2.1 > Shoutbox 12 3.2.2 > Umfrage 12 3.2.3 > News System 13 3.2.4 > Login Bereich 13 3.3 Bilder einfügen 14 4. Schluss Wort 14 1
1.Einführung Hallo, ich bin musawiz und nutzer des Service von www.npage.de! Ich habe einige Erfahrung auf dem gebiet des Homepage (im weiteren Text HP) bauen und habe schon ein paar Designs selbst entworfen, die meisten für mich selbst, aber auch für dritte und auch andere npage Benutzer. Dabei habe ich festgestellt das immer ein paar Fragen in Sachen HP einbauen bei npage anfallen. Also habe ich mich entschlossen ein Tutorial zu machen in dem ich die grundlegenden dinge erkläre, wie Link einbauen, Bild einbauen, und andere Sachen die für das erfolgreiche einbauen eines eigenen Designs wichtig sind! Um bei npage ein eigenes Design einfügen zu können sind zwei Dinge von großer Wichtigkeit, zum einen man muss ein npage Account (Konto) haben und zum anderen braucht man ein eigenes Design. Den npage Account kann man über diesen Link bekommen http://www.npage.de/werben_musawiz.html, oder direkt bei npage.de! Und das eigene Design, nun ja, das kann man auf drei Arten bekommen. Die erste wäre sich selbst eines machen, die zweite Möglichkeit ist eins von Jemand anderem anfertigen zu lasen. Zum Beispiel von Jemandem im npage Forum, da sind immer freundliche mit User die hilfsbereit sind. Und die Möglichkeit Nummer drei ist sich ein Design im Internet kostenlos zu downloaden, auf diesem gebiet gibt es genug Anbieter. Hier ein Bild des Login Bereich von npage, von wo man die meisten seiner Aktionen die beschrieben werden startet: Und darunter ist das Hauptmenü, auf diese Leiste wird hingewiesen wen es später heißt im Login Bereich von npage oder nur im Login Bereich. Bild 1 Bild 2 2
2. Eigenes Design 2.1 Design Überblick Wenn man ein Design hat sollte man sich einen kleinen überblick verschaffen was man da eigentlich hat, das heißt man sollte diese Fragen sich selbst beantworten. Was bzw. Wo ist der Header? Wo ist das Navi? Wo ist der Textbereich? Wo ist der Footer? Das sind die vier wichtigsten Komponenten die ein Design haben sollte, alles weitere ist Schmuck! Diese Fragen müssen beantwortet sein damit man später auch das Design bei npage einbauen kann! Am besten ist es mit Hilfe dieses HTML Codes (<!--Beschreibung! -->) sich die einzelnen Bereiche zu markieren damit man naher im npage Design Verwaltung Bereich nicht den überblick verliert! Beispiel: HTML code <HTML> <head> <!- -Titel meiner HP--> <title> Mein HP Titel </title> <!- -Ende des Titels- -> </head> Die farbigen codes werden naher im Explorer/Browser nicht angezeigt! 2.2 Design Einbau Hat man sich den Überblick über das Design verschafft folgt der Einbau. In meinem Tutorial werde ich den Einbau eines einfachen Designs erklären, dass mit Hilfe einer Tabellen Struktur gemacht wurde. 2.2.1 Schritt I Man geht in den Login Bereich dort klickt man auf DESIGN und sieht das ( ) und dann auf den Link Anderes Design auswählen Bild 3a 3
Hat man das getan erscheint das hier ( ) Bild 4 Und man wählt wie auf dem Bild angezeigt das Eigene Design aus, und klickt dann auf den Knopf *Weiter*. 2.2.2 Schritt II Auf dem Bild 3b sieht man den Link Styles verwalten einfach drauf klicken. So, jetzt erscheint das ( ) Bild 3b Bild 5 Ein Beispiel Style ist hier schon drin, aber den kann man Löschen, man hat ja einen eigenen. Also klicken wir jetzt auf den Link Neuen Style erstellen! Und es öffnen sich die im Schritt III erklärten Eingabe Felder! 2.2.3 Schritt III Gleich oben hat man ein Eingabe Feld für den Namen des Designs/Styles. Ich nehme den Bild 6 schönen Namen style_1 4
Unter diesem Feld befindet sich der Header unseres Styles (nicht zu verwechseln mit dem Header im eigentlichen Design) ( ). Jetzt ist es gut das wir uns einen überblick auf unser Design verschafft haben, den wir müssen jetzt wissen wo unser Textbereich anfängt und ob unsere Navi Links oder rechts vom Textbereich ist. Bei mir ist es Links, also kommt der code für die Navi mit in den Header. Bild 7 Jetzt zum Footer ( ). Der Teil unter dem Textbereich im Design kommt in den Footer vom Style. Warum!? Bei npage kann man beliebig viele Textseiten Bild 8 machen die im eigenen Design zu sehen sein sollen, also ist der code der zwischen den Header und den Footer kommt der, der Textseiten. Wenn man keine Elemente/Daten rechts oder unter dem Textbereich hat (und ein Tabellen Struktur Design hat) reichen im Footer schon diese code Endungen aus </td></tr></tbody></table></body></html>. Dan klickt man auf den Knopf *Erstellen* 2.2.4 Schritt IV Für diesen schritt müssen im Voraus Textseiten gemacht worden sein. Im npage Seiten Bereich sind aber zwei Seiten automatisch drin, die Willkommen Seite und die Impressum Seite, mit diesen zwei werde ich jetzt weiter erklären. Also,...! Wir sind wieder im Design Bereich angekommen (Bild 3b). Hier klicken wir nun auf den Link Style zuordnen. Und kommen zu diesem Bereich( ). Bild 9 5
Heckchen vor die Name der Seiten die wir unserem Design zuordnen wollen, dann mit der Maus das Auswahlfeld Folgendem style zuordnen aktivieren und style_1 aussuchen und auf den Knopf *Los* klicken. Dasselbe mit den Sonderseiten (Gästebuch, Pinnwand,...)! Wenn das getan ist, auf den Link Zurück klicken. 2.2.5 Schritt V Jetzt klicken wir auf den link Frame Set wählen (Bild 3b) und kommen zu diesem Bereich: Bild 10 Bei diesem Beispiel ist das zu wählende Frame Set das erste, eigentlich heißt das, dass man kein Frame Set braucht, aber diesen schritt muss man machen weil das npage Sytem so halt funktioniert! Nun klickt man auf den Knopf *Übernehmen* und wir kommen noch mal in den Design Bereich zurück (Bild 3b). 2.2.6 Schritt VI Bei diesem Schritt geht es um die letzte Einstellung die benötigt wird um das eigene Design online zu bringen. Wenn man alle Schritte so gemacht habt wie ich, sieht man, wen man auf den Link Einstellungen klickt, diesen Bereich vor sich ( ). Bild 11 Im Auswahlfeld Startseite wählt man die Seite, die als erstes aufgemacht werden soll wen man die Internet Adresse seiner HP in einen Browser/Explorer eingibt. Nun klickt man auf den Knopf *Übernehmen*. Und fertig ist der Einbau eines eigenen Designs. Ich weiß das mein Weg nicht der einzige ist, vor allem wenn es um die Frame Sets geht, aber für die meisten ist das die richtige Art um Ihr Design einzubauen. Ein weiterer Grund warum ich nicht mehr schreibe ist dass ich kein Buch sondern eine einfache Anleitung schreibe! 6
3.Verwaltung Diese Einheit in meinem Tutorial ist für die meisten das was eigentlich zählt! Wie binde ich Textseiten ein, wie stelle ich einen Hyperlink oder wie füge ich ein Bild in mein Design? Dass sind alles Sachen die auf einen zu kommen wenn der Web Designer nicht mehr an unserer Seite steht um uns einzuweisen. 3.1 Links Um einen Link einzubinden muss man wissen wie ein Link aussieht, also die Syntax 1 eines Links ist folgende: HTML code <a href= URL >Link</a> Die URL 2 kann Relativ zum Link Standort geschrieben werden oder Absolut. Das heißt befindet sich der Link auf dem gleichen Server und in dem gleichen Order wo sich auch das Ziel des Links befindet ist es genug den Namen des zu öffnenden Ziels einzugeben. Ist das Link Ziel nicht im gleichen Order oder sogar nicht auf dem gleichen Server so sollte man eine Absolute URL verwenden, diese Form eines Links wird oft auch als Hyperlink bezeichnet. HTML code <a href= link1.xyz >Link<a> <!- - Relativ Link - -><!- - xyz=eine beliebige Extension - -> <a href= http://www.beispiel.npage.de/xyz/000/link1.xyz >Link</a> <!--Absolute Link--> 3.1.1 Links in einem Menü Es gibt viele Arten ein Menü zu machen, die drei heufigsten stelle ich vor. Zum einen wäre da das einfache Menü wo jede neue Zeile einen neuen Menü Punkt (Link) darstellt. <p><b>menu</b></p> <p><a href= link1.html >Link 1</a></p> <p><a href= link2.html >Link 2</a></p> Beispiel 1 Aussehen im Browser: Menu Link 1 Link 2 1 In der allgemeinen Zeichentheorie (Semiotik) bedeutet Syntax die formale Ordnung (die Kombinatorik, den rein formalen Zusammenhang, die Beziehungen) der Zeichen bzw. Zeichenformen eines Zeichensystems bzw. die Lehre/Theorie dazu. 2 Als Uniform Resource Locator (URL, dt. einheitlicher Quellenanzeiger ) bezeichnet man eine Unterart von Uniform Resource Identifiern (URIs). URLs identifizieren und lokalisieren eine Ressource über das verwendete Netzwerkprotokoll (beispielsweise http oder ftp) und den Ort (engl. location) der Ressource in Computernetzwerken. 7
Um hier einen weiteren Link einzufügen kopiert man ein beliebiges Link Zeile und ändert die URL und den Link Namen passend zum neuen Ziel. Die zweite Art die ich erklären werde ist ein Menü in Tabellen Form, so ein Menü sieht etwa so aus: <table style= border: 1px solid; > <tr><td><b>menu<b></td></tr> <tr><td><a href= link1.html >Link 1</a></td></tr> <!- - Eine Zelle mit Link - -> <tr><td><a href= link2.html >Link 2</a></td></tr> <!- - Eine Zelle mit Link - -> </table> Beispiel 2 Aussehen im Browser: Menu Link 1 Link 2 Diese Tabelle wird im Browser als solche wahr genommen weil man den style der Tabelle so geändert hat das man den Rahmen sieht mit den Attributen style und border in Kombination, tut man das nicht sieht das Menü genau so aus wie in Beispiel 1. Die dritte Art ist ein Menü mit Bilder zu machen, dabei gibt es zwei Möglichkeiten, aber bei beiden würde ich ein Tabellen Form Menü empfehlen. Die erste Möglichkeit ist ein Bild zu nehmen wo der Text schon im Bild abgedruckt ist, und die zweite ist ein Bild als Hintergrund zu benutzen für jede Zelle in der Tabelle und den Text normal in die Zelle zu schreiben. Für die erste Möglichkeit ist der HTML code wie folgt. <table> <tr><td><img src= menu_bild.gif ></td></tr> <!- - Eine Zelle mit Link- -> <tr><td><a href= link1.html ><img src= bild1.jpg ></a></td></tr> <!- - Eine Zelle mit Link- -> <tr><td><a href= link2.html ><img src= bild2.jpg ></a></td></tr> </table> Beispiel 3 Aussehen im Browser: Die zweite Möglichkeit würde im vergleich fast genau so aussehen wie die erste, aber der HTML code ist anders und zwar so 8
<table> Beispiel 4 <tr><td style= background: url (menu_bild.gif); ><b>menu<b></td></tr> <!- - Eine Zelle mit Link- -> <tr><td style= background-image: url (bild1.jpg); ><a href= link1.html >Link 1</a></td></tr> <!- - Eine Zelle mit Link- -> <tr><td style= background-image: url (bild2.jpg); ><a href= link2.html >Link 2</a></td></tr> </table> Bei diesen drei Tabellen Menüs kann man einen neuen Link so einsetzen in dem man eine ganze Zelle (mit Link) kopiert und dort hin setzt wo man sie haben will, aber es darf nicht außerhalb der Tabelle sein, das bedeutet es muss zwischen diese zwei codes kopiert werden <table> und </table>! Dann ändert man noch die URL und den Namen des Links bzw. man setzt die URL des neuen Bilds ein. 3.1.1.1 Das npage Untermenü! Ein weitere Möglichkeit bei npage sind die Untermenüs so etwas kann man auch in sein eigenes Design einbinden. Einen Untermenü HTML code kann man sich selber machen oder man macht es auf die Art wie ich es jetzt erklären werde. Im Login Bereich klickt man auf Navi, dann auf den Link Neues Navigationselement hinzufügen Es öffnet sich das hier ( ) Bild 12 Hier wählt man Untermenü aus und klickt auf den Knopf *Weiter*. Bild 13 Bild 14 Und nun erscheint dieser Screen, wie im Bild 14 angegeben. Man gibt seinem Untermenü einen schicken Namen und drückt dann auf den Knopf *Übernehmen*. Nun kommen wir in den Navi Bereich Zurück. 9
Bild 15 Hier können wir eine Textseite in unser Untermenü verschieben, es ist egal welche den naher brauchen wir den npage Editor nicht um unser Untermenü zu ändern. Also wählen wir zum Beispiel die Textseite Impressum, dann aktivieren wir Verschieben nach /Untermenü/ und drücken den Knopf *Los*. Jetzt müssen wie unser eigenes Design für eine kurze weile mit einem Design von npage tauschen, am besten ist es ein Anpassbares Design hierfür zu verwenden. Um unser Design zu tauschen gehen wir so vor wie in Schritt I beschrieben nur wählen wir jetzt die zweite Möglichkeit (siehe Bild 4) aus, nämlich Anpassbares Design. Nun aktiviert man das Design Standard 1 auswählen und dann auf den Knopf *Dieses Design wählen*. Jetzt öffnet man seine Seite im Browser und unter dem Navi klickt man mit der rechten Maus Taste und wählt die Funktion Quellcode anzeigen (jeder Browser hat eine eigene Art wie man diese Funktion aktiviert). Man findet schnell den Navi bereich der so aussieht wenn sie alle schritte des Tutorial mit gemacht haben: <font size="1" face="arial"> <a target="mf" href="willkommen_31140325.html">willkommen</a><br> <a target="mf" href="guestbook.html">gästebuch</a><br> <a target="mf" href="kontakt.html">kontakt</a><br> <a target="mf" href="linkliste.html">linkliste</a><br> <a target="_self" href="javascript:untermenu('2670834');">untermenü</a><div id="2670834" style="display: none">» <a href="impressum_83381231.html" target="mf" class="menu">impressum</a></div><br> </font> (Bedenkt dass man den Quellcode des Frames für die Navi aufrufen muss!) 10
Aber egal wie das Navi aussieht man muss diesen rot markierten code finden und ihn sich kopieren. Den bereich zwischen den codes <div> und </div> kopiert man so oft wie viele Seiten man halt im Untermenü braucht, nun muss man nur noch die URL im (href=? ) ändern und den Namen seines Links eingeben. Den Untermenü Namen kann man auch ändern. Wenn man nun das Untermenü in unser Beispiel 2 einfügt sieht das so aus: Beispiel 5 <!- - Menu mit Untermenu Links - -> <table style= border: 1px solid; > <tr><td><b>menu<b></td></tr> <!- - Eine Zelle mit Link - -> <tr><td><a href= link1.html >Link 1</a></td></tr> <!- - Eine Zelle mit Link - -> <tr><td><a href= link2.html >Link 2</a></td></tr> <!- - Eine Zelle mit Untermenü- -> <tr><td><a target="_self" href="javascript:untermenu('2670834');">untermenü</a> <!- - Erster Untermenü Link- -> <div id="2670834" style="display: none"> >; <a href="unter_link1.html" target="mf" class="menu">untermenü Link1</a></div> <!- - Zweiter Untermenü Link- -> <div id="2670834" style="display: none"> >; <a href="unter_link2.html" target="mf" class="menu"> Untermenü Link 2</a></div> <!- - Dritter Untermenü Link- -> <div id="2670834" style="display: none"> >; <a href="unter_link3.html" target="mf" class="menu"> Untermenü Link 3</a></div><td></tr> </table> <!- - Ende des Menu - -> Aussehen im Browser: Menu Link 1 Link 2 Untermenü Klick auf Untermenü Menu Link 1 Link 2 Untermenü >Untermenü Link1 >Untermenü Link2 >Untermenü Link3 Wenn man ein weiteres Untermenü will muss man den Vorgang wiederholen für das neue Untermenü. Jetzt kann man im Design Bereich wieder auf seinen eigenen style zurück wechseln 11
3.2 npage Gimmicks Bei npage kann man neben Links, im eigenen Design, in die Navi auch ein Umfrage, das News System, den Login Bereich und noch viel mehr einsetzten die HTML codes die man dafür braucht werde ich jetzt angeben, dabei gehe ich davon aus dass Ihr ein Tabellen Menü benutzt den die codes die jetzt folgen werden zwischen die codes einer Zelle gesetzt, das heißt zwischen diese <tr><td> und diese codes </td></tr>. 3.2.1 Shoutbox <!- - Code Anfang- -> <iframe height="420" frameborder="1" width="250" scrolling="yes" mce_src="http://name.npage.de/shoutbox.php" src="http://name.npage.de/shoutbox.php" border="1" allowtransparency="true" marginwidth="2" marginheight="2" target="_self" name="shoutbox">shoutbox<br></iframe> <!- -Code Ende- -> Die Shoutbox ist ein sehr oft eingesetztes Navi Element, da es als eine art Chat sehr schön ist ein Gespräch mit verfolgen zu können wehrend man sich die einzelnen Unterseiten anschaut. 3.2.2 Umfrage <!- - Java script code für die Umfrage- -> <!- -code ende- -> <form method="post" action="umfrage.php" target="umfragepopup">beispielumfrage<br><br><input value="1" name="stimme" type="radio">antwort 1<br><input value="2" name="stimme" type="radio">antwort 2<br><input value="3" name="stimme" type="radio">antwort 3<br><input value="4" name="stimme" type="radio">antwort 4<br><input value="5" name="stimme" type="radio">antwort 5<br><br><input value="abstimmen" onclick="javascript:window.open('','umfragepopup','width=335,height=330');" type="submit"></form><p><br></p><script type="text/javascript"> <!- -Code Ende- -> Die Umfrage als Navi Element ist bei npage Seiten nicht so heufig zu sehen, aber bei so einer Umfrage die einen mit jedem klick verfolgt macht man eher mit, als bei einer die sich hinter einem Link versteckt! 12
3.2.3 News System <!- - Der News System code- -> <script type="text/javascript" src="http://www.npage.de/javascript/userpages.js"></script><script type="text/javascript" src="http://www.npage.de/javascript/collection/js_s4.js"></script> <script language="javascript" src="news.php"></script><!- -Code Ende- -> <!- - Der News Archiv Link- -> <p><a onclick="javascript:window.open('','newsarchivpopup','width=400, height=500,scrollbars=yes');" target="newsarchivpopup" mce_href="news.php?page=archiv" href="news.php?page=archiv">news-archiv</a></p></td></tr></tbody></table> <script type="text/javascript"> <!- -Code Ende- -> 3.2.4 Login Bereich Das aussehen des Login Bereich wenn man in ins Navi einbaut sollte so sein das jedes Element untereinander ist, der code der das ermöglicht ist dieser: <!-- Login Bereich--> <form method="post" action="login.html"> <input name="requested_url" value="" type="hidden"> <input name="do" value="1" type="hidden"> <table style="width: 100%; height: 140px;"><tbody> <tr><td>benutzername:</td></tr> <tr><td><input name="u_username" size="25" type="text"></td></tr> <tr><td>passwort</td></tr> <tr><td><input name="u_passwort" size="25" type="password"></td></tr> <tr><td><input value="einloggen" type="submit"></td></tr> </tbody></table> </form> <div style="margin-left: 40px; text-align: left;"> <span style="color: rgb(0, 0, 0);"> </span> <a href="register.html"><b>jetzt registrieren!</b></a><br> </div> <div style="margin-left: 40px; text-align: left;"> <span style="color: rgb(0, 0, 0);"> </span> <a href="forgot_pw.html">passwort vergessen?</a><br> </div> <div style="margin-left: 40px; text-align: left;"> <span style="color: rgb(0, 0, 0);"> </span> <a href="change_data.html">daten Ändern</a></div> <!- -Login Ende- -> Wenn ihr wissen wollt wie das aussieht besucht doch mal die npage Seiten www.buch-club.npage.de ; www.wii-players.npage.eu ; www.musawiz.npage.eu & andere! 13
3.3 Bilder einfügen Bilder kann man wie gesagt als Inhalt einfügen oder als Hintergrund. Der code um ein Bild als Inhalt einzufügen geht so: <img src= URL > Als Hintergrund kann man ein Bild auf verschiedene arten einbinden, aber ich bevorzuge diese und werde auch nur diese vorstellen: <style= background-image: url(url); > Man muss übrigens wissen dass der code style meistens ein Attribut eines höheren codes ist wie zum Beispiel des <body>; <table>; <td> oder auch <p> und so wird er eingesetzt: <body style= background-image: url(url); > <! - -Hintergrund des ganzen Design - -> <table style= background-image: url(url); > <! - -Hintergrund einer Tabelle - -> <td style= background-image: url(url); > <! - -Hintergrund einer Zelle - -> <p style= background-image: url(url); > <! - -Hintergrund eines Passus - -> Die Bilder können auch selbst Attribute haben, die zum Beispiel ihre Größe bestimmen, oder einen Rahmen anzeigen! Beispiel: Ich setze ein Bild ein mit der Höhe 300 Pixel und mit der Breite 400 Pixel und einem Rahmen von 2 Pixeln: <! - -Hintergrund einer Tabelle! Bild code style mit Attributen - -> <table style= background-image: url(url); height: 300px; width: 400px; border 2px; > <! - - Bild Code img mit Attributen - -> <img src= URL height= 300 width= 400 border= 2 > 4 Schlusswort Das was ich hier beschrieben habe steht so oder so ähnlich auch in vielen Hilfen von npage und viel kann man auch im npage Forum in den einzelnen Themen lesen. Wenn man etwas nicht verstanden hat oder einfach noch etwas wissen möchte einfach im schon erwähntem Forum nachfragen. Man bekommt dort kompetente und schnelle Hilfe. Ich möchte mich hier noch bei npage.de und beim npage Forum bedanken den ich habe viel durch ihren Service gelernt und ihr Service ermöglicht einem Anfänger wirklich sehr viele Möglichkeiten! Ich bedanke mich für Ihre Aufmerksamkeit und besuchen sie doch mal meine HP: www.musawiz.npage.eu 14