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

Hinweise
Alt 02.07.2007, 23:00   #1
Galgemaennle
Erfahrener Benutzer
 
Registriert seit: 29.07.2006
Ort: Aufm Berg
Beiträge: 212
Standard Homepage erstellen Mit Gimp

So dies wird eine Neuauflage meines alten Threads (http://www.gimpforum.de/showthread.php?t=5053).

Hier möchte ich genauer etwas genauer auf css eingehen, sodass jeder hier Selber modifizieren kann.

1) Eine Seite nach Wunsch im Gimp erstellen. Hier z.b. 800x600



2) Die Seite mit Hilfslinien rastern (Einfach von dem Lineal oben und links, eine Hilfslinie ins Bild ziehen)
Mit der Rasterung fällt es dann leichter die Bilder auszuschneiden und so immer wissen wo wir mit unserer Schere ansetzen müssen, sodass wir keine Stellen vergessen.




Da wir eine Dynamische Seite erstellen wollen, d.h. sich die Seite mit mehr Text auch weiter nach unten Ausdehnt, müssen wir die Rahmen des Content und Link Bereich so slicen das wenn mehr Text kommt sich die Seite weiter ausdehnen kann und die Rahmen Endstücke so auch erst zum Schluss kommen.

Das habe ich so gelöst das die Rahmenendstücke schon zum Footer bzw Header gehören. Da diese nur einfach angezeigt werden, leuten die schon den Content breich ein, die Bilder des Content können wir nun allso beliebigoft wiederhohlen lassen. Ohne das wir jedesmal einen Streifen vom Rahmen dazwischen haben.

Hier ein kleines Beispiel zur Verdeutlichung oben an dieser Linie (die unter dem Header)



Hier sieht man das der Rahmenanfang für den Content schon mit in das Obere Bild kommen, da dieses sich nicht ausdehnen wird/soll. So kann nun der Zwischenbereiche variieren. Soviel Platz wie wir halt brauchen werden.


Weiter habe ich mir gedacht, dass wenn man einen Link anklickt/über ihn fährt. Dass sich dieser Hintergrund ändert. So habe ich die 2verschiedenen Möglichkeiten mit gimp erstellt und untereinander plaziert. Diese Beiden werden dann auch zusammen gesliced. Wenn wir soweit sind, zeige ich euch weshalb

3) Slicen

So nun haben wir Hilfslinien, an denen wir uns Orientieren können.

Diese Werden mit dem Schneidewerkzeug (Umschalt+C) ausgeschnitten.

Und das geht so: Man nimmt dieses Werkzeug und erstellt die Auswahl genau auf den Hilfslinien. Das ist gar nicht so schwer, da die Auswahl automatisch auf die Hilfslinie geht (Snap-On).

Die Hilfslinie ändert dann auch seine Farbe:



4) Ist ein Bereich sauber markiert, so wird mit OK bestätigt. Man erhält nun das Einzelbild. Dieses muss unter einem anderen Namen gespeichert werden. Am besten in einen Extra Ordner um alle Bilder beieinander halten zu können.

Legt vorher eine Sicherheitskopie des Projektes an um nicht das ganze Projekt zu überschreiben.

Mit STRG+Z kommt man wieder zurück und die nächsten Bereiche können gesliced werden.

Weiter nehme ich einen ca 5px breiten Streifen aus der Navi und einen ebensogroßen aus dem Content. Diese Streifen werden unsere Puffer. Die je nach textlänge dann untereinander hängen.

Benutzt eindeutige Bezeichnungen der Bilder, sodass ihr immer wisst welches Stücken ihr gerade verarbeitet.

Nun gehts zum Css und HTML Bereich. Wo wir alles zusammen fügen werden

5)

HTML-Code:
<!-- Code by Florian Asal flo_asal@web.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>
  </body>
</html>
Das ein zigste was man hier erklären müsste ist das, title den Seitennamen angibt, der z.b. Dann auf den Tabs im Browser angezeigt wird und <link rel="stylesheet" type="text/css" href="css.css" > die Adresse der exterenen Css ist.

Da das ganze später zusammenhalten soll und man das Komplette verschieben möchte. Setze ich meinen ersten Container der den Gesammt Rahmen angibt:
HTML-Code:
<div id="Seite"></div>
mit id wird der Name des Containers bestimmt. Der dann im CSS definiert werden kann:

Code:
#Seite {
width: 800px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
hier wird Gesamt breite sowie der Abstand nach oben, und zur Seite angegeben

innerhalb dieses Containers kommen nun die Weiteren Elemente. Diese Werden einfach aufgelistet und mit Css ausgerichtet. So lässt sich das aussehen auch jeder zeit verändern. Indem man nur noch die CSS bearbeiten muss.

HTML-Code:
<div id="Seite">
      <div id="Header"></div>
      <div id="Line"></div>
      <div id="Left"></div>
      <div id="Right"></div>
</div>
nun werden die neuen Container bestimmt. Nix besonderes, eigentlich:

Code:
#Header {
height: 149px;
width: 800px;
background-image: url(img/header.png);
background-repeat: no-repeat;
}
Das wäre der Header hier wird die Breite und Höhe des Bildes angegeben. Ebenso wo das Bild liegt (Pfadangabe) und wie es heißt. header.png liegt hier in einem Ordner namens: img

no-repeat gibt an, dass sich das Bild nicht wiederholt.

gleichesspiel bei der Linie

Code:
#Line {
height: 59px;
width: 800px;
background-image: url(img/line.png);
background-repeat: no-repeat;
}
Nun kommen die 2Spalten dran. Es wird einfach der Linken Spalte gesagt, das sie links floaten soll. Also einen Textumfluss auf der Linken Seite erzeugen soll.

Code:
#Left {
float: left;
min-height: 400px;
width: 199px;
background-image: url(img/puffer_left.png);
}
Evtl fällt es euch auf, hier ist das no-repeat weg Aus dem einfachen Grund, dass wenn hier mehre Links hinkommen das Pufferbild einfach beliebig oft wiederholt wird.
Um eine Mindest Größe vorzugeben habe ich die höhe auf 400px eingesellt (minimum) ABER ACHTUNG: Diese Funktion funktioniert nicht bei dem IE!! (warrum auch immer....)


Die Rechte Spalte soll sich nun daneben stellen. Also sagen wir ihr das auch so:

Code:
#Right {
float: left;
min-height: 400px;
width: 601px;
background-image: url(img/puffer_right.png);
}
einfach wieder mit dem float Befehl.

zum guten Schluss fehlt noch der Footer:

Code:
#Footer {
clear: both;
height: 56px;
width: 800px;
background-image: url(img/footer.png);
background-repeat: no-repeat;
}
clear: both; Gibt einfach an das hier kein Textumfluss mehr erzeugt werden muss. Also die 2Spalten genügen.

Nun wären wir an dem Punkt an dem Wir das Bild aus Gimp nun in einem Webbrowser anzeigen könnten. Aber wem reicht das schon?

Inhalt muss her!


7) Hier das Fertige HTML document (Mit bisschen Inhalt)

HTML-Code:
<!-- Code by Florian Asal flo_asal@web.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="Line"><marquee>Hallo! Willkommen auf meiner Homepage!</marquee></div>
      <div id="Left">
        <img src="img/navi.png" />
        <a href="index.htm"><p>Startseite</p></a>
        <a href="http://www.gimpforum.de" target="_blank"><p>Gimpforum</p></a>
        <a href="http://www.florian-asal.de.tf" target="_blank"><p>Hp von FA</p></a>
      </div>
      <div id="Right">
        <h1>Willkommen</h1>
        <p>So da wären wir! =)</p>
      </div>
      <div id="Footer"><p>Copyright &copy; 2007 by Florian Asal • <a href="mailto:Flo_Asal@web.de">Florian Asal</a></p></div>
    </div>
  </body>
</html>
Ich habe zb in den Line Container ein Lauftext eingebaut (wird später im CSS genauer definiert)
Die Spalte Left hat 3 Text Links bekommen
Die Spalte Right hat eine Überschrift h1 und einen simplen Text

Der Footer hat hier Copyright und einen Link, der mit dem Email Programm verbindet um eine Email an den Inhaber der Seite schreiben zu können.


Dieser Inhalt möchte natürlich auch bearbeitet werden.



Hier das Fertige CSS document
Ich habe an diesen Wichtigen Punkten einige Kurze Kommentare drangehängt.

Falls Fragen auftreten sollten. Ruhig fragen oder sich bei Selfhtml schlau machen Verweise sind drin.

Code:
/* Code by Florian Asal flo_asal@web.de */
body {
color: #FFFFFF; /* Farbe jedes Textes. Es seidenn die Farbe wird für einzelne DIV´s anderst definiert */
background-color: #FFFFFF; /* Oder irgend ein Muster */
}

#Seite {
width: 800px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}

#Header {
height: 149px;
width: 800px;
background-image: url(img/header.png);
background-repeat: no-repeat;
}

#Line {
height: 59px;
width: 800px;
background-image: url(img/line.png);
background-repeat: no-repeat;
}

#Left {
float: left;
min-height: 400px;
width: 199px;
background-image: url(img/puffer_left.png);
}

#Right {
float: left;
min-height: 400px;
width: 601px;
background-image: url(img/puffer_right.png);
}

#Footer {
clear: both;
height: 56px;
width: 800px;
background-image: url(img/footer.png);
background-repeat: no-repeat;
}

marquee {
padding-top: 18px; /* Ausrichtung von Oben zum Lauftext (Wenns nicht passt einfach ändern) */
padding-left: 50px; /* Endebereich des von rechtskommenden Lauftext, sodass er nicht über den Rand wegläuft */
padding-right: 50px; /* Startbereich des Lauftextes */
font-size: 13px; /* Selbsterklärend */
font-weight: bold; /* Schrifteigenschaft. Hier fettdruck */
font-family: Arial, Tahoma; /* Schriftart. Arial ist erster Wert, hat ein PC kein Arial so wird der nächste Stil verwendet */
}
/* Weitere Eigenschaften, auch laufrichtung des Lauftextes etc finden Ihr auf: http://de.selfhtml.org/navigation/css.htm */

#Footer p { /* Gibt die Eigenschafft von p innerhalb des Containers: Footer an */
padding-top: 23px;
padding-left: 50px; /* Gibt inneren Rahmen an, sodass die Schrift in diesem Rahmen bleib thttp://de.selfhtml.org/css/formate/box_modell.htm */
padding-right: 50px;
text-align: center; /* Zentrierter Text */
font-size: 13px; 
font-weight: bold; 
font-family: Arial, Tahoma;
}

p { /* Gibt Allgemein die Eigenschafft von p an */
padding: 5px 10px 5px 30px; /* Hier padding alleine die 1.Zahl ist oben, die 2.Zahl ist rechts und so weiter (Uhrzeigersinn, beginnend bei 12Uhr) */
font-size: 13px; 
font-family: Arial, Tahoma;
} 

h1 { /* Gibt Allgemein die Eigenschafft der Übersschrift h1 an */
padding: 5px 10px 5px 40px; 
font-size: 15px;
font-weight: bold;  
font-family: Arial, Tahoma;
}

#Left a:link, #Left a:visited { /* sind die Schaltflächen nicht berührt, so wird nur 40px von den 80px die menu.png hat angezeigt */
display: block;
background: url(img/menu.png) no-repeat;
height: 40px;
width: 199px;
}

#Left a:hover { /* fährt man nun mit der Maus über einen Link, so werden die anderen 40px angezeigt, weiter ändert sich auch die Farbe des linkes */
background-position: 0px -40px;
color: #ffffff;
}

#Left p { /* Hier wird wieder p speziell für Left definiert, sodass man die URL-Texte gut lesen kann*/
padding-top: 10px;
font-size: 15px;
font-weight: bold;
text-indent: 40px; /* Gibt den Texteinzug an, sodass der Text nicht auf dem Dot beginnt */
font-family: Arial; 
}

a:link, a:visited, a:link:hover{ /* Link, Besuchter Link und Aktiver Link */
color: #000000; /* Farbe des Links */
text-decoration: none; /* kein Unterstrichener Link */
}
Das wars auch schon:P

Ergebnis:

http://florian-asal.de/gimp/



Hier noch einige Verweise, mit denen ich gute Erfahrungen gemacht habe:

HTML Editoren
http://www.weaverslave.ws/
http://www.chip.de/downloads/Notepad_12996935.html

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
http://www.chip.de/downloads/FileZilla_13011076.html


So dann wünsch ich viel Spaß UND ganz wichtig:
Sobald was unklar ist sofort Fragen. Ich werde es dann ausbessern ich bin nun schon ca 3-4h am Tut tippen. Schon Blasen an den Fingern, fast sicher das ich irgendetwas durcheinander gebraucht oder sogar vergessen habe.....


grüße euer Flo
__________________
Für Alle die eine HomePage mit Gimp erstellen möchten:

Geändert von Galgemaennle (29.05.2009 um 14:05 Uhr) Grund: updates
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
The GIMP 2.2.0 schumaml Neues von GIMP 8 01.07.2006 20:35
The GIMP 2.2-pre2 schumaml Neues von GIMP 11 25.01.2005 20:51
The GIMP 2.2-pre1 (Halloween Release) schumaml Neues von GIMP 2 14.11.2004 20:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:07 Uhr.


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