Forum Wiki Galerie Kontakt Wie man Fragen richtig stellt. Tutorial Forum
Zurück   GIMP-Forum 3.0 > Arbeiten mit Gimp > Tutorials > Fortgeschritten

Hinweise
Alt 12.08.2006, 21:26   #1
Galgemaennle
Erfahrener Benutzer
 
Registriert seit: 29.07.2006
Ort: Aufm Berg
Beiträge: 212
Standard Homepage erstellen + Slicen

NEUE VERSION: http://www.gimpforum.de/showthread.php?t=7803


In diesem Tutorial möchte ich euch zeigen wie wir unsere Bilder aus Gimp zur einer Homepage zusammensetzen.


Es gibt 2 Möglichkeiten diese Bilder für eine Seite zu erstellen:
  • Alle Einzelbilder werden einzeln erstellt
  • Ein Gesamtbild wird erstellt und dann zugeschnitten (slicen)
Ich werde auf beides eingehen.


Inhaltsverzeichnis:
  1. Voraussetzungen
  2. Die Seite
  3. Einzelbilder erstellen
  4. Slicen
  5. HTML Datei
  6. Css Datei
  7. Hochladen
  8. Tipps
  9. Das Fertige Template
1.Voraussetzungen:


Ein Anständigen HTML Editor :
http://www.weaverslave.ws/


Server:
http://www.ohost.de/go/asalflorian


FTP (File Transfer Protocol) -Client
es gibt so viele verschiedene FTP Clients, sucht euch einen Kostenlosen der zu euch passt


Und Natürlich The Gimp




2. Die Seite


Nun müssen wir uns Überlegen wie unsere Seite einmal aussehen soll!
Ich habe mir gedacht wir machen das ganze einmal so:


____________________________________
|____________Header_________________|


|Links| Mitte |Rechts|
|Links| Mitte |Rechts|
|Links| Mitte |Rechts|
|Links| Mitte |Rechts|
____________________________________
|____________Footer__________________|




3. Einzelbilder erstellen


(Die Bilder sind nach kaled´s (http://www.gimpforum.de/showthread.php?t=4323) Anleitung gemacht worden.)


header.jpg (Ohne Transparenz)
Breite: 1024px
Höhe: 100px


footer.jpg (Ohne Transparenz)
Breite: 1024px
Höhe: 45px


links.jpg (Ohne Transparenz)
Breite: 180px
Höhe: 500px (Spielt keine rolle)


rechts.jpg (Ohne Transparenz)
Breite: 180px
Höhe: 500px (Spielt keine rolle)


Wenn ihr eure Bilder mit diesen Namen und Größen speichert, könnt und dürft ihr mein Script verwenden! Vorausgesetzt ihr wollt eure Seite so aufbauen.




4. Slicen


Das Ganze geht auch anders:


Erstellt ein Gesamtbild (Breite: 1024px ; Höhe: Spielt keine rolle).
So wie es kaled in seinem Tut gemacht hat.


Um das Bild zu zuschneiden, also die einzelne Bereiche aufzutrennen, um sie dann einzeln zu speichern nehmen wir am besten die Guillotine!


Das geht so:


Wir nehmen unser Gesamtbild und klicken auf das Lineal links oder oben im Fenster und ziehen mit gedrückter Maus Taste die somit erzeugte Hilfslinie an die gewünschte Position. Ist unser Bild nun so mit Hilfslinien versehen, wie wir sie brauchen, führen wir die Guillotine unter:
Bild > Transformieren > Guillotine aus. Die Neuen Bilder Werden nun gespeichert.


Oder so:


Einzelne Bereiche werden mit dem Auswahlwerkzeug markiert und dann mit: Ebene > Ebene zuschneiden zugeschnitten. So erhalten wir nur den ausgewählten Bereich.


Tipp: Legt vorher eine Sicherheitskopie des Bildes an, oder dupliziert die Ebene (Strg+D) um falsches Speichern oder verschandeln des Bildes zu vermeiden






Es gibt auch ein Tool zum slicen! Das Web-o-tine (Windos) oder Perl-o-tine (Linux)


Genauere Anleitung gibt es hier:
http://www.gimp-werkstatt.de/webotine.html




Alle Bilder Werden nun in einem extra Ordner gespeichert!


Ordner Name: img




5. HTML


Kommen wir nun zum einbinden unserer Einzelbilder in eine HTML Datei.


Dazu müssen wir eine HTML-Datei erstellen. Dazu wird unser HTML-Editor aufgerufen und ein neues Dokument erstellt und unter dem Namen index.htm gespeichert.


Das sieht so aus:


index.htm
HTML-Code:
<!-- Script by Florian Asal flo_asal@gmx.de -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Startseite</title> 
    <link rel="stylesheet" type="text/css" href="css.css" >
</head>
<body>

<div id="seite">
    <div id="header"></div> 
    <div id="links">
  
<ul>
  <li><a href="index.htm">Startseite</a></li>
  <li><a href="http://www.gimpforum.de">Gimpforum</a></li>
  <li><a href="http://www.gimpforum.de">Gimpforum</a></li>
</ul> 
<p><a href="index.htm"><img src="img/home.gif" border="0"/></a></p>

  </div>
  <div id="mitte"> 

<h1>Willkommen auf meiner Seite!</h1>
<p>Beide Scripte dürfen verändert werden!</p>

  </div>
    <div id="rechts">
  
<p>Hier ist weiterer Platz... <br />
zum Beispiel für ein Bild:
<img src="img/fox.gif" /></p>
  
  </div>
    <div id="footer"><p>Copyright &copy; 2006 by Florian Asal • <a href="mailto:Flo_Asal@gmx.de">Florian Asal</a></p></div>
</div>

</body>
</html>
6. CSS


Weiteres brauchen wir eine Cascading Stylesheet Datei (css) die uns Text und Ausrichtung der Bilder bestimmt.


Dazu wird eine CSS Datei erstellt und mit dem namen css.css gespeichert.


css.css
HTML-Code:
 #seite{
   width: 1024px;
   color: #000000;
   background-color: #ffffff;
   margin: 1em auto;
 }
 

 body {
   color: #000000;
   background-color: #ffffff;
 }
 

 #header {
   height: 100px;
   width: 1024px;
   background-image: url(img/header.jpg);
   background-repeat: no-repeat;
   position: static;
   border: 0px;
 }
 

 #links {
   height: 500px;
   width: 180px;
   background-image: url(img/links.jpg);
   background-repeat: no-repeat;
   position: static;
   border: 0px;
   float: left;
   padding-top: 30px;
   padding-left: 15px;
   font-family: sans-serif;
   font-size: 20px;  
 

 }
 

 

 #links a:link {
   color: #000000; /* Farbe des Links */
   text-decoration: none; /* kein Unterstrichener Link */
 }  
  

 #links a:visited {
   color: #000000; /* Farbe des schon besuchten Links */
   text-decoration: none; /* kein Unterstrichener Link */
 }  
  

 #links a:link:hover {
   color: #262CF2; /* Farbe des Aktiven Links */
   text-decoration: none; /* kein Unterstrichener Link */
 }
  

 #mitte {
   color: #618FCF;
   position: absolute;
   padding-top: 1em;
   padding-left: 13em;
 }
  

 #rechts {
   height: 500px;
   width: 180px;
   background-image: url(img/rechts.jpg);
   background-repeat: no-repeat;
   position: static;
   border: 0px;
   float: right;
 }
  

 #rechts p {
   padding-top: 20px;
   padding-left: 15px;
 }
  

 #footer {
   height: 45px;
   width: 1024px;
   background-image: url(img/footer.jpg);
   background-repeat: no-repeat;
   position: relative;
   border: 0px;
   clear: both;
 }
  

 #footer p {
   padding-top: 13px; /* Ausrichtung der Schrift im Footer (vertikal) */
   text-align: center; /* Ausrichtung der Schrift im Footer (horizontal) */
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
 }
  

 #footer a:link {color: #000000;} /* Farbe des Links */
  

 #footer a:visited {color: #000000;} /* Farbe des schon besuchten Links */
  

 #footer a:link:hover {color: #262CF2;} /* Farbe des Aktiven Links */
</i>






[FONT=Times New Roman, serif]Verändert die beiden Dateien auf eure Wünsche um.[/FONT]


[FONT=Times New Roman, serif]Für Hilfe steht die Seite http://de.selfhtml.org/ zu Verfügung.[/FONT]




[FONT=Times New Roman, serif]7. Hochladen [/FONT]


[FONT=Times New Roman, serif]Das Ganze wird nun auf den Webserver geladen (Alle wichtigen Daten findet ihr bei eurem Server Anbieter) Und Fertig! [/FONT]


[FONT=Times New Roman, serif]-> Vergesst den Inhalt nicht[/FONT]


[FONT=Times New Roman, serif]8.Tipps[/FONT]


[FONT=Times New Roman, serif]-Legt am besten einen Ordner für Dieses Projekt an.[/FONT]
[FONT=Times New Roman, serif]-In meinem Beispiel Habe ich auch ein Button eingebaut. Das Button wird einfach in den img Ordner gespeichert und mit dem Befehl <a href=“link“><img scr=“img/buttonname“></a> an die Gewünschte Stelle in der HTML Datei eingefügt.[/FONT]
[FONT=Times New Roman, serif]-Weitere Seiten werden so angelegt: HTML Datei kopieren und verändern und unter neuem Namen Speichern. Und dann einfach verlinken.[/FONT]




[FONT=Times New Roman, serif]9. Das Fertige Template[/FONT]


[FONT=Times New Roman, serif]Sieht so aus: http://www.florian-asal.de.tf/gimp/index.htm[/FONT]






[FONT=Times New Roman, serif]Viel Spaß mit HTML und Gimp [/FONT]


[FONT=Times New Roman, serif]bei fragen, einfach Fragen.[/FONT]

Geändert von Galgemaennle (03.07.2007 um 19:24 Uhr)
Galgemaennle ist offline   Mit Zitat antworten
 

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist An.
Smileys sind An.
[IMG] Code ist An.
HTML-Code ist Aus.

Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Schnelle kleine Homepage erstellen kaled Fortgeschritten 80 05.06.2018 04:20
Homepage erstellen N°2 Galgemaennle Tutorials 16 25.09.2006 22:18
Homepage Design erstellen... Phasm Design 0 10.10.2005 23:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:16 Uhr.


Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.