eigenes Design mit npage von A-Z

[thaileben]

Eigenes Design mit npage

Guten Tag

Ich stelle das Thema bewusst in das Thema Npage allgemein im öffentlichen bereich dieses Forums, da ich denke der Aufbau könnte schon auch von Interesse für andere sein.

Es geht darum, dass ich durch die Hilfe von anderen Mitgliedern hier schon ein eigenes Design verwirklichen durfte. Nun ja ich betreibe ja mehrere Webseiten und habe den entschluss gefasst zu versuchen für meine schnupperseiten alleine was zu entwerfen jedoch fühle ich noch zu unsicher alles selber zu schaffen.
So lange rede kurzer Sinn – es geht Los.
Ich werde die meisten Bilder-schritte mit aboad mit einem Direktlink hochladen um den Forenplatz zu schonen.

Mein erster Schritt war zur Kaffeemaschine.
2. Danach setzte ich mich vor den PC und sah mir die bestehende Seite an, die ich mit dem Anpassbaren 1 gemacht hatte, was relativ einfach war, und ich gerne weiterempfehle wenn ihr keine Designvorlage benutzen wollt.

Screen schnupperseiten
http://www.abload.de/img/srennschnupperseiten-z2fp7.jpg

Ich denke der zweite schritt ist wichtig um sich ein Bild zu machen was will ich verändern.

3. In jedem Windoofs hat es ein Paint Zeichnenprogramm da entstand der erste grob Entwurf.

Ich wollte den Header oben (das teil der grosse Banner) die Navi links und das Textfeld rechts.
Mir geht es meistens darum es für die Gäste so angenehm wie möglich zu machen also nix speziell kompliziertes – alles im überblick. Auch sollte es für alle Bildschirmauflösungen passen.

Ich habe dann beim Paint ein weisses Blatt genommen dieses auf 1024 gezogen und darauf dann den Entwurf mit dem rechteck-symbol skizziert.

Sreen entwurf weiss roh
http://www.abload.de/img/weissrohentwurf1j2ciu.jpg

4. Danach mal gekuckt wie es aussehen würde mit den Buttonelementen

Screen entwurf weiss mit button
http://www.abload.de/img/weissrohentwurfmitbut5scd3.jpg

Ja, so sollte es sein. Die Ausrichtung und einheitliche grösse der Buttons kann ich bestimmt nachher genau anpassen.

Eines kann ich schon mal vorwegnehmen es gibt viele Seiten im Netz wo ihr vorgefertigte Buttons zum beschriften findet, ich will jedoch alle selber machen.

5. Nun ging es an die Farbbestimmung auch dafür ist das Paint geeignet, mit dem Farbfüller könnt ihr alles versuchen wenns nicht gefällt einfach auf den zurückbutton klicken.
Tip: schreibt euch den Farbcode auf – ich habs vergessen also doppelte arbeit den wieder rauszufinden. :JJ

Ich denke mal die Farbzusammensetzung die ich wählte, ist gar nicht so übel

Screen Entwurf 1 braun
http://www.abload.de/img/entwurf1braunr2ddi.jpg

Viel spass und Erfolg wünscht
Jürg

[thaileben]

Ups dar ich zu spät zum ändern habe was vergessen :JJ

Screne Entwurf 3 braun mit Buttons
http://www.abload.de/img/entwurf3braunxmk0p.jpg

So dann ist es auch schon mal gut wenn wir uns in etwa die Schriftfarbe vorstellen können die grösse ist ja veränderlich.

Screen Entwurf 4 braun button schrifttest
http://www.abload.de/img/entwurf4braunzdj5d.jpg

und ist nun auch schon eine frage wie gross dürfen die buttons sein?
Ich habe aus dem screen einen ausgeschnitten den kopiere ich einfach so roh immer wieder um die einzeln zu beschriften.

Kopie von entwurf 2 braun butto.jpg

die würden dann so aussehen

butt praesentieren.jpg

8-ung wichtig die beschriftungen dürfen keine umlaute enthalten sonst meckerts beim hochladen bei npage desshalb (anstatt ä ae -- usw....)

Jürg

[moni]

Hallo Jürg....
Du hast Dir echt was vorgenommen [smilie=clap.gif] [smilie=clap.gif]
Mein Becher Kaffee habe ich mir auch eben geholt und es kann los gehen )

1) Dein Entwurf hast schon richtig gemacht
deine Vorlage ist 1024px breit...gute Breite ist das !
http://www.abload.de/img/entwurf4braunzdj5d.jpg
Ein frage dazu ...hast auch einen Footer geplant ?
wenn ja da muss den noch zugeben ...
und dir Gedanken machen wie hoch der sein soll ..auch Farbe oder ob da eine Grafik kommt..

2) die hedaer Höhe richtet sich an den Bild das du vor basteln hast ...

die breite bleibt 1024 .. wie du es magst am liebsten (Höhe )..muss einen Bild basteln dazu ...

So neben bei...es ist auch möglich den hedaer auch mit einen individuellen Text zu schmücken !
aber am einfachsten ist ..ein Logo Bild mit dem Text drauf und alles als Grafik ...
Logo Bild kannst auch auf dem transparenten HD machen ..so bleibt dir immer noch die alternative offen ,
falls Du doch die Hintergrund Farben ändern willst !
nicht zu vergessen in den Fall ...als PNG abspeichern....und vom Kb Zahl her.... klein wie möglich halten ...

3)wie schon gesagt vorher .... deine Vorlage ist 1024px breit...
Du fragst wie breit sollen die Buttons sein ?
Antwort ---- rechne mal nach, wie viele Buttons in oberen Bereich haben willst ,dann teile die 1024 durch zahl vom Buttons..
.dazu muss man auch den Abstand zwischen den Buttons nicht vergessen....so ca 2 px ...
das Ergebnis ist die breite vom deinen Buttons oben...
Die Höhe richtet sich je nach dem wie du es magst am liebsten...
großer Schrift da brauchst dicken Buttons......


4) die Buttons muss nicht beschriften ..weil das geht dann automatisch!!!

5) Linke Seite ----wie breit willst das haben ?
so gewöhnlich nehmt man ca 180px ...aber es ist individuell ....
angenommen hast 180px breit...und drin noch die vertikal navi leiste kommt ..
da muss Dir Gedanken machen wie breit dort die Buttons sein sollen...
zu beachten ist auch Abstand links und recht das die leiste schön in die Mitte bleibt ....

6)Es ist auch möglich das du für die Buttons nur ein Stückchen vom HD nähmst und die rammen (Border ) dann per CSS zufügst ...
zum B so wie das



So was kannst nur dann machen wenn die Buttons einfach sind und keine besondere Grafik (Uni Farbe und Border am Rand )beinhalten) !!

man kann auch komplett auf Grafik verzichten und nur mit den Farben arbeiten ...wen du exakt weiß was für Farben NR ...da gebt man nur Farben ein ....


7) wird dein Navi auch hover Funktion haben ? wen ja beliebt die Button Farbe die gleiche ?
wenn nein da brauchst noch ein Buttons Muster..Farbe etc..

8) Rammen an deine Vorlage kannst entweder direkt mit den Grafik Programm zufügen...
oder zweitens...ohne rammen machen und per CSS dann zufügen....

9) letzte frage ..ist mir eben eingefallen :JJ ....
soll die ober leiste in den Inhalt Bereich bleiben oder soll sie zwischen den hedaer und Inhalt rein kommen ?

So mein Kaffee ist schon alle
Hoffe Jürg das ich dir weiter helfen könntet

[thaileben]

Hallo Jürg....
Du hast Dir echt was vorgenommen [smilie=clap.gif] [smilie=clap.gif]
Mein Becher Kaffee habe ich mir auch eben geholt und es kann los gehen )
So mein Kaffee ist schon alle

Ja Moni jedoch schon wieder Kalte füsse gekriegt und das bei 36 Grad habe schon 6 grosse Tassen und zwei schachteln ziggigs überschritten

für deinen Einsatz wie ging das nochmals mit den böhmischen wäldern oder dörfern? :K

habe hier mal noch screens gemacht weiss nicht ob wir grad aneinander vorbeischreiben also das dingens ist mit dem weissen teil 1024
http://www.abload.de/img/kopieren2vonentwurf1bjratz.jpg
als umrandung stell ich mir das braun vor
http://www.abload.de/img/brauncnlr8.jpg
der innenteil (haupdesign) ist nur ca 900 Px so sieht es mit umradung aus
http://www.abload.de/img/mustermithgzqyv2.jpg
die weisse Linier zwischen header und Buttons bitte wegdenken ---ähm sieht zwar nicht mal so schlecht aus
und so soll mein header sein
http://www.abload.de/img/header0pbdl.jpg

So, nun ja den Passenden banner 468/60 hab ich schon gemacht ebenso sämtliche Buttons ( schulterklopf)
dachte eben die lade ich einzeln hoch und baue die dann einfach in die Navi ein , und oben unter den header
danach wollte ich die einzeln als Grafik zu den Textseiten verlinken also sprich am anfang für mein erstes eigen gemachtes design noch bisserl einfach
nun bin ich bisser verwirrt denn ich weiss auch gar nicht was ich nun für ein freame wählen müsste da ich dachte das erste bei der Auswahl wäre das richtige weil da auch alles weiss ist ohne strichlinien.
was genau du mit footer meinst weiss ich grad nicht ---- einfach das es unten bedeutet. wofür ist den der gut?
ich wollte es so machen wie beim entwurf also oben header links navi , buttons reinbauen, und eben rechts davon texten und fotos rein.

hoffe mich verständlich ausgedrückt zu haben

Jürg

[moni]

Jürg wen du so viel Zigaretten rauchst da bist aber sehr gut kosnerveirt

Muss dich echt loben..warst super fleißig ... [smilie=clap.gif] [smilie=clap.gif]

so und zur Sache ..
1)

habe hier mal noch screens gemacht weiss nicht ob wir grad aneinander vorbei schreiben also das dingens ist mit dem weissen teil 1024

stimmt bin davon ausgegangene das dein Design 1024 px breit sein soll....man schaut nie auf das weiß Hintergrund weil der passt sich vom alleine..je nach Auflösung...mal ist der viel zu sehnen mal kaum ist ....
900 Px..... etwas schmaler aber auch OK...muss nur später auf die Bilder schauen das sie nicht zu breit sind..sonst springen dir aus dem rammen


2)
Dies Grafik nehmst für den body Hintergrund ..das ist klar ...

3)http://www.abload.de/img/header0pbdl.jpg
dein Logo hat nur 899px...mache dem auf 900breit..sonst hast ein Lücke ...

4)Du brauchst ein HD für den Inhalt....schneide etwas ab und Speicher als Inhalt HD Grafik ab..große ist ja egal...kan auch super klein sein ,,weil es wird sich wiederholen ... sehe bild an



5)

hab ich schon gemacht ebenso sämtliche Buttons ( schulterklopf)
dachte eben die lade ich einzeln hoch und baue die dann einfach in die Navi ein

Ist schön das du sie schon fertig hast....doch vorher weist du wie groß sei sein sollten ??

6)

nun bin ich bisser verwirrt denn ich weiss auch gar nicht was ich nun für ein freame wählen müsste da ich dachte das erste bei der Auswahl wäre das richtige weil da auch alles weiss ist ohne strichlinien.

Das machst aber erst wenn du das Skript fertig hast ..werd dir dann sagen wie zu machen ist ...mach dir jetzt kein Kopf drüber ..

7)

was genau du mit footer meinst weiss ich grad nicht ---- einfach das es unten bedeutet. wofür ist den der gut?

habe ein Bild dazu gebastelt...
http://www.abload.de/img/jb3k344.jpg

wenn du kein footer haben willst da braucht auch nicht haben ...
---------------------------------------------------------------------
Deine Aufgaben Jürd als nächstes sind !!
1)du bastelst den Inhalt HD...
2)Logo Bild um ein Px breiter machen
3) sage wie viel buttons oben sein sollten..4 ? ist das richtig
4) soll ein hover Funktion rein ? wen ja da welch Farbemache dir ein sein soll..
5) bastle die Buttons fertig ....
6) mache dir ein liste mit all deinen Link URL Grafiken bereit ..weil man braucht sie dann ...
oder lade die Grafiken schon mal direkt auf deine HP
...................................................
bin jetzt für ein paar Stunden weg...
wenn du damit fertig bist da sende dir dann einen Skript welchen du selbst auffüllen wirst ...auf deinen Editor...

[thaileben]

Danke Moni werde dir morgen ( für dich dann Nacht) antworten wenn ich alles auf der reihe habe
bin völlig geschafft und werde mir ein paar :R :R :R :R gönnen

Jürg

[Patrick]

Huhu Jürg,

schau mal auf meiner seite, ganz unten ist der footer. Bei mir ist er etwas vom oberen bereich abgesetzt. Das kann aber jeder machen wie er mag

www.patschworks.de

LG

[thaileben]

Guten Tag
Mit frisch geputzter Brille ans Werk

Ja meine lieben da sieht man doch wie wichtig es ist, genau zu Arbeiten. Dachte ehrlich gesagt gar nicht daran das 1 Px soviel ausmachen kann. Ist ja nach reiflicher überlegung logisch, denn der header macht ja die breite aus, wenn da so eine komische zahl drinne ist wirkt sich das natürlich auf die Navi und textbreite aus .
Dieser tread finde ich bis jetzt schon richtig leerreich und zwischen-infos oder fragen von anderen Mitgliedern sind sehr gerne gesehen. :U --- danke Patrik.

So also nochmals von vorne
Habe nun die Headergrafik abgeändert in 900x130
Screen header
http://www.abload.de/img/header900x130s8bgo.png

Die Navibreite ist 140
Screen Navi
http://www.abload.de/img/navirotschnuppijwypd.png

daraus ergibt sich die Textbreite von 760 meine Bilder für die Hundis werden nicht grösser als 600x450Px sein.
Einen Ausschnit habe ich, und mit texseite Hg (Hintergrund) benannt
Screen textseite Hg (dein screen zeigt eine andere Farbe für den textbereich)
http://www.abload.de/img/textseitehgx9as5.png
Die buttons sind alle 122x32
Oben kommen 4 Buttons hin ( Gästebuch -- Impressum -- Kontakt -- linkliste (so wie auf deinem Bild-- Ja)
Screen button
http://www.abload.de/img/buttonwillk-beschradlja.jpg

Das mit dem Footer ist eine gute Idee da könnte ich ja einen link „ eigenes Design“ mit dem verweis auf diesen Tread in unserem Forum einbauen.
Die frage ist da noch ob sich das nicht stört mit dem Linktausch (Einstellungen—Promotion) von npage.

Die navi wird keine hoover funktion haben.

Habe bei allen Dateien das format zu png formatiert und bei npage den haken rausgemacht also nicht Komprimiert hoch geladen
der header ist nicht komprimiert 147,77 KB
von welchem code muss ich nun eine liste machen der obere oder untere ? die URL wäre ja der obere ist das richtig?

Noch eine frage : wie ist das, der header und die Navi wird ja dann auch auf allen Seiten angezeigt?

so hoffe mal nix vergessen zu haben

Jürg

[moni]

Hallo Jürg....
du hast das logo gut gemacht....habe dir auch das Skript erstellt und zwar alle so gemacht das du die angaben selbst zufügen muss...
dazu passende Kommentare das du weiß was gemeint auch ist...so kannst das auch CSS lernen..
.erschrecke dich bitte nicht weil du zur erst nichts sehen kannst ....
was wichtig ist immer die angaben zwischen den : und ; zufügen ....

Habe auch eine bitte an alle Mitglieder .... das Projekt kräftig zum unterstützen ..... wenn das erforderlich ist...

ich bekomme Besuch heute Abend und bis Dienstag bin sehr wenig hier zu sehen ....


Hier ist das skript...

bearbeite Bitte das Skript an deinen Phase 5 oder sckriptly am besten !!!!

Code: Alles auswählen

                                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>J&uuml;rg Hp selbstaufbau </title>
   <link href="#" type="text/css" rel="stylesheet" />   <!-- Hier kommt ganz zum schluss das  CSS URL auslagerung  -->

        <style type="text/css">
     /* Überschriften  */
        h1 {
      font-family:;   /* Angaben hier überall machen !!! und zwar  müssen  zweischen : und ; drin sein  */
      font-size: ;
      color: ;
    }
    h2 {
      font-family:;
      font-size:;
      color:;
    }
    h3 {
      font-family: ;
      font-size: ;
      color: ;
    }

    /* Hier sind die  links was  sonst an die Seite  zu sehen werden Zum B auch nach oben */
    a:link {font-family:;
    color: ;   /* hier auch alles ausfühlen color  schrift größe  und schrift dekoration  */
    font-size:;
    text-decoration:;
    }
    a:visited {
     color: ;
    font-size:;
    text-decoration:;
    }
    a:active {
     color: ;
    font-size:;
    text-decoration:;
    }
    a:hover {
     color: ;
    font-size:;
    text-decoration:;
}

  /* Hier  sit das Hindergrund ... ausherhalb dei HP  */
    body {
      font-family: ; /* die schrift angaben was du hier machst sidn verbindlich an deine kommpleten text seiten Seiten */
      color: ;
      font-size:;
      background-color:;
      background-image :url(); /* HG Grafik URL zugeben  */
      background-repeat: ;   /* Wiederholen zugeben */
      background-attachment: fixed;    /* das so lassen wie es ist ! */
      background-position: center center;   /* das so lassen wie es ist ! */
    }
     /* Aussen rammen vom HP */
    #wrap  {
      width: ;    /* Breite von dein HP 900px zugeben  */
      margin-right: auto;
      margin-left: auto;
      margin-top:;  /* abstand vom oben  */
      background-color:;   /* Hintergund  color */
      border-style: ;     /* rammen style es gibt mehere  sorten davon */
      border-width: ;    /* rammen dicke ...px zahl zugeben */
      border-color: ;      /* rammen farbe zugeben */
    }

    /* header  */
    #header {
      background-position: center top;
      width: ;   /* Breite  Px zahl  zufügen */
      height: ;     /* höhe   */
      background-color: ;   /* Hintergrund color */
      background-image: url();    /* Grafik Url vom  logo Bild */
      background-repeat: ;  /*  Wiederholen festlegen */


    }
   /* Navigation oben  alle  angaben wie die  leiste oben auseehn soll */
 A.menuoben:link, A.menuoben:visited, A.menuoben:active {
            display: block;
            width: ;   /* Button breite */
            height:  ;   /* Button höhe */
            line-height:  ;  /* position vom schrift */
            margin-left: ;      /*  button Abstand vom links */
            margin-bottom: ;     /* Button abstand von unten */
            text-align: ;          /*  Text richiung  ..links büdindig oder mittig oder rechtbündig*/
            text-decoration: ;         /* Schrift dekoration  */
            font-family: ;               /* Schrift art  */
            font-size: ;  /* Schrift größe  */
            color: ;  /* Schrift color */
            background-color: ;      /* hintergund color */
            background-image: url();   /* URL button grafik */
            border-style: ;        /* Border style ..falsl du  border  machen wilst seit dem du hast den  auf dem grafik schon fertig gemacht  */
            border-width: ;  /* Border  dicke */
            border-color: ;       /* border color */
    }
    A.menuoben:hover {      /* Angaben zur  hover ...sehe  oben  was du hier machen  sollst  */
            border-style: ;
            border-width: ;
            border-color: ;
            color: ;
            background-color:;
    }

/* Linke seite bereich...platz wo deine navi links  platzieren wird  */

    #navigation {
      float: left;   /* So sein lassen !! */
      width: ;  /* Breite px zahl zufügen */
      height: 100%; /* so sein lassen  */
       margin-top: ;   /* Ausehen abstand vom oben ..Px zahl  */
      text-align: ;     /* Schrift  richtung */
      background-color:;  /* HD Color ..wenn du aber grafik rein machst da  kannst auf transparent  machen  */
      background-image: url(); /* URL grafik */
      background-repeat: ;  /* Wiederholen  */
      padding: ;  /* man kann auch ihnen abstand machen...  wenn du willst das die  navi leiste nicht  ganz den HD  überdeckt ..px zahl angaben*/

    }


   /* Navi leiste  auf die linke seite ....die  angaben  so machen wie  in obere  leiste ... */
    A.menulink:link, A.menulink:visited, A.menulink:active {
            display: block;  /* so sein lassen !! */
            width: ;
            height:;
            line-height:;
            margin-bottom: ;
            text-align: ;
            text-decoration: ;
            font-family: ;
            font-size: ;
            color:;
            background-color:;
            border-style: ;
            border-width:;
            border-color: ;
    }
    A.menulink:hover {
            border-style: ;
            border-width: ;
            border-color: ;
            color: ;  /* schrift color für den hover   */
            background-color:;
    }



/* Inhalt Bereich ...... */

    #inhalt {

      float: right; /* so sein lassen */
       width: /* Breite Px Zahl zufügen */;
      background-color: ; /* HD color */
      background-image: url();  /* HD URL  grafilk zufügen */
      background-repeat: ;    /* wiederholen festlegen  */
      padding: ;    /* Inen eabstand  zufügen...das der  text inhalt nicht  direkt ganz am rand klebt ...px zahl ... die px zahl angaben */
     }


  /* Footer bereich  */
    #footer {
      width: /* breite Px zahl angaben */;
      height: ;     /* Höhe px zahl angaben  */
      line-height:;      /* au welch ehöhe soll das text liegen Px zahl angaben  */
      text-align: ;   /* Text richiung  ..links büdindig oder mittig oder rechtbündig  */
      background-image: url(); /* URL grafik ... */
      background-repeat: ;      /* wiederholen */
      background-color:;    /* HD color */

    }
    .clear {
      clear: both;   /* so sein lassen...das clear ist dazu da das den footer schön an die seite fest klebt  */
    }

    </style>
    </head>

    <body>



    </head>
    <body>

    <div id="wrap">
    <div id="header"></div>
    <!-- Navi Oben...habe sie in einer Tabelle gepackt ...und zweischen den hedaer und ihnalt plaziert..
    .man kann aber auch einen balken extra dafür bauen..aber das  kann man  auch ganz zum schlus machen  -->
       <table align="right" border="0">
                                     <tbody>
                                     <tr>
                                     <td><a class="menuoben" href="#">seite</a></td>
                                     <td><a class="menuoben" href="#">seite</a></td>
                                     <td><a class="menuoben" href="#">seite</a></td>
                                     <td><a class="menuoben" href="#">seite</a></td>
                                     </tr></tbody>
                                     </table>
        <!-- Navi Leiste auf die linke seite  -->
      <div id="navigation">

      <a href="#" class="menulink">Link 01</a>
       <a href="#" class="menulink">Link 02</a>
      <!-- Du kannst beleibege zahl an links zufügen  -->
</div>
<div id="inhalt">  </div>
    <br class="clear" />

    <div id="footer">   <!-- Hier kannst dein Banner oder sonst  ein werbung platzieren..
    .achte drauf je nach Bedarf dem  die richgige höhe zu geben  -->
 </div>
 </div>

    </body>
    </html>

Wünsche dir viel Erfolg und Spaß dabei..

[thaileben]

Vielen Dank moni für deine bisherige Arbeit und das script habe es mal in meinen webcoton rübergetan
und bin am staunen habe zur zeit nicht wirklich einen plan dafür.

werde mir heute mal das ganze genau ansehen und grübeln wo ich nun wo was reinpacken soll Du hast mir zwar geschrieben wo was aber für einen total anfänger ist es dennoch schwierig -- hab ja Zeit

Jürg