• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Template Coden

D

David1990

Neues Mitglied
Hallo Leute,

Das hier ist mein erster Beitrag, und ich bin Neuling :)

Allso so zu meinem Problem :

Ich will mir mit Adobe Photoshop, ein eigenes Template gestallten und dan auf meiner Homepage verwenden, aber wie mache ich das und Code ich das?

Muss ich im Adobe Photoshop, das ganze Template erstellen und dan Speichern als ( JPGE, PDN, GIF oder Fur Web Speichern?)

Oder muss ich das Template erstellen und dan auseinanderschneiden und dan zusammen basteln? ( wen ja, mit welchem Tool im Photoshop, kann ich auseinander schneiden?

Und wie Code ich dan mein Template? mit HTML oder CSS?

Ich habe kein Dreamwaver, ich benutze Notepad++


Ich Entschuldige mich fuer die vielen Fragen, aber ich bin echt Neuling in diesem Gebiet.

PS. Ich will alles selber machen weil, ich habe viele Homepage Baukasten getestet, aber find die nicht so gut, weil man halt das zeug nicht so haben kann, wie man es will.


Ich hoffe es kann mir jemand weiterhelfen


Mit Freundlichen Gruessen David :):lol:


PSS. Habe nun noch ein Bild hochgeladen vom Template, das ich eben erstellt habe, meine Homepage sollte ein Reisebuero werden, speziell fuer fluege nach Thailand.

Aber nun weis ich nicht weiter :(, muss ich nun mein Template im Photoshop ausseinanderschneiden und jeden balken und banner einzel speichern?
 

Anhänge

  • Thailand Homepage vorschau.JPG
    Thailand Homepage vorschau.JPG
    66,4 KB · Aufrufe: 9
Zuletzt bearbeitet:
Als mit notepad biste schonmal auf dem richtigen Weg und mit ´HTML und CSS auch die brauchste wahrscheinlich beide ... für dein Flugsuchsystem wie du es auf dem Bild geschriben hast brauchst du php oder eine andere Programmir Sprache ... Also erstmal würde ich HTML lernen dann CSS und bei PHP würde bestimmt jemand von uns dir helfen weil das dauert wirklich etwas länger das zu lernen ... Also mit Photoshop würde ich erstmal garnichts machen ... du kannst schonmal das Bild nehmen was du oben gezeigt hast und die Schrift wegmachen und dann als Hintergrund nehmen für die Website ... Das geht so du machst erstmal eine html datei die so aussieht :
HTML: 
<html>
     <head>
  <title>Test...</title>
<link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
 
 
     </body>
</html>

so die CSS Datei sieht dann so aus :
Code: 
     body {
      background-image:url(DeinBild.jpg);
      background-repeat:no-repeat;
    }
so jetzt hast du schonmal eine einfache Seite mit einem Hintergrund ...
Wenn du nun Text haben willst kannst du ihn entweder in das Bild "malen"
oder was viel besser ist in die HTML datei das hier reinschreibst :

<div id="text">
<h1>Hier deine Überschrift</h1>
</div>

Das h1 steht glaub ich für header1 oder so auf jeden fall kannst du damit die größe bestimmen ... z.B. ist h2 etwas kleiner und h3 noch kleiner usw.
Jetzt hab ich um den Text eine "div-container" gesetzt damit du in positioniren kannst ... auch das geht in css ... Hier der Code

#text1 {
color: #ff33ff;
position:absolute;
top:55px;
left:30px;

}

so da kannst du die Zahlen belibig verändern bis der Text an der richtigen Stelle steht ...
Die Farbe kannst du auch verändern ... in meinem Fall habe ich lila genommen :)
weiter würde ich dann mit diesem tutorial machen :
HTML- und CSS-Tutorials - Erstellen Sie Ihre eigene Webseite - HTML.net
da kannste sehr gut HTML und danach CSS lernen ... so hab ichs auch gelernt ...
Ich hoffe mein mini-tutorial hat dir ein bisschen geholfen ... :)
 
Natürlich könntest du deine "Homepage" auch mit Photoshop designen und einfach das Bild online stellen. Aber gut sieht das nicht aus und auf dein Flugsystem müsstest du da auch verzichten. ;) Photoshop zu verwenden ist schon mal gut, aber Du musst das Design dann auch aufteilen. Teile der Homepage, die Text enthalten, der gut und gerne länger sein kann als der von dir (jetzt) definierte Bereich, schnippselst du diesen dann nur zu einem Balken und nimmst zusätzlich den oberen und unteren Rand. Den Mittelteil verwendest du dann als Hintergrundbild, den du auf y-Ebene wiederholst.
So ungefähr teilst du dein Design auf. :P

HTML und CSS ist wahrlich besser. Ein HTML-Tutorial von W3Schools, das ich persönlich genial finde (vor allem, da man direkt auf der Homepage mit dem Code herumprobieren kann) findest du hier. Als CSS-Tutorial empfehle ich SelfHTML : Stylesheets (CSS), auch wenn es eher ein Nachschlagewerk ist, als ein Tutorial. Aber anhand der Beispiele kommt man auch schon weit. ;)
Solltest du dann damit fertig sein empfehle ich Quake.net. Das Tutorial beweist BDGs Aussage, dass PHP zu lernen schon etwas länger dauern wird mit den 45 Seiten. :D

Was mich jetzt an den paar Codestellen meines Vorposters stört, ist:
  1. Er hat keinen schönen Programmierstil präsentiert und die Zeilen willkürlich eingerückt.
  2. Er möchte deinen Header als nicht wiederholtes Hintergrundbild des <body>-Tags verwenden. Ich würde den in einen extra <div> packen.
  3. #text1 {
    color: #ff33ff;
    position:absolute;
    top:55px;
    left:30px;

    }
    Zum Vergrößern anklicken....
    Das da solltest du dir gar nicht erst angewöhnen. Etwas absolut zu positionieren ist gut in einem ganzen Layout, zumal das bei einem einzelnen Darstellungsfehler zu ästhetischen Fehlern führen kann. Besser ist es, sowas dynamisch zu gestalten.
 
BDG schrieb:
Das h1 steht glaub ich für header1 oder so auf jeden fall kannst du damit die größe bestimmen ... z.B. ist h2 etwas kleiner und h3 noch kleiner usw.
Zum Vergrößern anklicken....
Die grösse des Textes wird in CSS mit font-size bestimmt und nicht mit HTML.
h steht für header, die 1 gibt die Wertigkeit der Überschrift an.

BDG schrieb:
Jetzt hab ich um den Text eine "div-container" gesetzt damit du in positioniren kannst ... auch das geht in css ... Hier der Code

#text1 {
color: #ff33ff;
position:absolute;
top:55px;
left:30px;

}
Zum Vergrößern anklicken....
Das div ist ebenso falsch wie die absolute positionierung.

Du kannst die ID auch deinem <h1> geben oder <h1> direkt formatieren.
Für den Abstand benutzt du margin oder padding, je nachdem wie deine Seite aufgebaut ist.

Gruss
Elroy
 
Hallo, :)

Vielen dank fuer die vielen Informationen, habe mir die posts mal durchgelesen, vieles verstanden, aber bei einigen dingen nur "Bahnhof" :( :)

Allso ich will mir eine Online Flug Reisebuero Homepage erstellen, die ich mit einem Partnerprogramm betreiben will, allso Affiliate Homepage wird es :)

Ich moechte mein Online Reisebuero speziel auf Thailand richten, dass allso nur fluege nach Thailand gebucht werden koennen.

Ein Partnerprogramm habe ich schon von einem Anbieter und da hat es auch ein Flug Suchsystem dabei, das man auf der eigenen Seite per Queltext einfuegen kann. Aber da habe ich gesehen, das man da fluege ueberall hin buchen kann, da ich aber nur Fluege nach Thailand will, kann man da irgendwie im Queltext von der Suchmaschine, die anderen orte rausnehmen oder wie geht das genau?

Aber das ist ja momentan noch nicht Wichtig, erstmal brauche ich eine Homepage und ein Template.

Wenn ich nun mein Homepage Template in Adobe Photoshop erstelle, muss ich es danach soviel ich verstanden habe auseinanderschneiden, geht das mit diesem "Slice select Tool" oder mit dem "Slice Tool" ?

Fals ja, da oeffnet sich dan ein Fenster wo steht :

URL:
Target:
Message Text:
Alt Tag:

Was muss ich da angeben? :?:


So und wenn dan die Homepage in einzelteile verschnitten ist :P , dann muss ich sie in Frontpage++ zusammenbasteln? oder wie ist das genau?


Ich weis, es sind viele Fragen, ich entschuldige mich dafuer aber wie neulinge halt sind :( :)


MFG David
 
@ BDG: Jetzt lass doch mal diese blöden SPAM-Posts! Alter!

Das Slice Tool ist da, um ein Design in Code umzuwandeln bzw. um das Design in keine Bildchen zu unterteilen. Außerdem kannst du so das Layout bzw. den Codeaufbau der späteren Homepage beeinflussen. Angeben musst du im Prinzip nichts, er speichert die Bilderchen dann einfach mit dem Namen der Datei + einer fortlaufenden Zahl (z.B. dateixy_01.jpg). Im Code setzt du die Bilder dann wieder zusammen. Dafür gibts genug Tutorials...
 
Hallo.

Wenn es dir nur um das Bild aus deinem ersten Post geht verstehe ich nicht warum du da überhaupt etwas scheiden willst.
Was bringt es dir dieses Bild zu schneiden?
Ich würde auch nicht Adobe Photoshop das Bild schneiden lassen sondern es von Hand machen. Adobe Photoschop erzeugt dir nur unnötigen Quellcode den du nicht brauchst.

Ich würde von Frontpage die Finger lassen. Ich weiss das dieses Programm noch sehr viel genutzt wird aberes ist Total veraltet.

Nimm lieber gleich einen Editor wie Notepad++ und lerne es richitg, oder wenn es unbedingt ein WYSIWYG Programm sein muss benutzte ein aktuelles.

Gruss
Elroy
 
Elroy schrieb:
Ich würde auch nicht Adobe Photoshop das Bild schneiden lassen sondern es von Hand machen. Adobe Photoschop erzeugt dir nur unnötigen Quellcode den du nicht brauchst.
Zum Vergrößern anklicken....

Es gibt die Möglichkeit, sich das Bilderpuzzle in ein Table-Konstrukt umwandeln zu lassen, aber diese Einstellung ist nur optimal und muss erst eingestellt werden. Wenn man das Slice Tool benutzt und für Web und Geräte speichert, dann bekommt man nur die kleinen Bilder.
 
HuHu Leute,

Danke fuer die vielen Infos :)

@ Elroy, sorry, ich benutze Notepad++ habs falsch hingeschrieben ;)

wie kann ich das den von hand aus auseinanderschneiden?

So, ich habe nun ein Template im Internet gefunden, was mir sehr gefaellt.

Free Website Templates - Travel Vacation - Travel agency, ticket, Hawai, hotel

Wie kann ich nun bei diesem Template, mein Banner einfuegen und bei der Navigation die Namen umaendern und ein Flugsuchsystem einfuegen?

allso ich moechte auf der Homepage mein Text ect. einfuegen koennen.


MFG David
 
Zuletzt bearbeitet:
Beschäftige dich bitte mit den Grundlagen von HTML. Tutorials und Hilfen findest du etwa in unserer Quellensammlung.

Was dort steht, ist nichts anderes, als das, was wir dir hier individuell erklären müssten.

Ein Flugsuchsystem findest du ja vermutlich bei deinem Affiliation-Partner als fertiges „Widget“ zusammen mit einer Anleitung zur Einbindung.

Falls du dich nicht selbst so intensiv mit der Materie beschäftigen möchtest, könntest du dich auch an die Jobbörse wenden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben