GIMP-Forum 3.0

GIMP-Forum 3.0 (http://www.gimpforum.de/index.php)
-   Fortgeschritten (http://www.gimpforum.de/forumdisplay.php?f=36)
-   -   Homepage erstellen Mit Gimp (http://www.gimpforum.de/showthread.php?t=7803)

Galgemaennle 02.07.2007 22:00

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

http://www.gimpforum.de/album/images/2757/1_hp.jpg

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.

http://www.gimpforum.de/album/images...ilfslinien.jpg


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)

http://www.gimpforum.de/album/images...ausschnitt.jpg

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:

http://www.gimpforum.de/album/images/2757/1_makiert.jpg

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.



8) 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

Renderer 02.07.2007 23:08

Hey klasse!. Schönen Dank.
Die CSS Kommentare sind spitze. Endlich mal auch für CSS Dösel wie mich verständlich geschrieben. :D
Tolles Tutorial.


MfG
Renderer

Julius-Caeser 04.07.2007 21:13

Nice!
Auch wenn ich das nicht brauchen kann ;)
Auf jeden Fall besser als das alte :)

Sparky 05.07.2007 04:16

Hi Renderer,

In diesem Buch gehts auch um CSS

Hier haste mal ein paar links zu kostenlosen Ebooks ;-)

http://www.professionelle-websites.de/download.htm

Das ist die 2te Auflage

http://groups.google.com/group/professionelle-websites

Greetz
Sparky

Edit: Jaaaa is schon spät... oder früh ???
Da war ja noch ein Link. Da isser

http://www.webmaster-resource.de/tut...s-tutorial.php

Übrigens auf meinem Wecker ist es jetzt 04:46 und hier 02:46 hmmmmm

houz 05.07.2007 10:56

Hast du vieleicht eine falsche Zeitzone eingestellt? Für mich geht die Uhr nämlich richtig.

Sinan61 22.09.2007 15:12

danke sowas habe ich gesucht:p

Bluefire 22.09.2007 23:43

Hab mal ne Frage: Kann ich das irgendwie machen das ich für meine Website nicht für jede Seite ein neues HTML-Dokument machen muss?

Ravetracer 23.09.2007 12:01

Zitat:

Zitat von Bluefire (Beitrag 70904)
Hab mal ne Frage: Kann ich das irgendwie machen das ich für meine Website nicht für jede Seite ein neues HTML-Dokument machen muss?

Ja, das geht, entweder mit ServerSideIncludes, mit include() über PHP, oder alle Texte/Inhalte in einer Datei, die Seite per $_GET-Variable übermitteln und per IF-Abfrage den entsprechenden Teil anzeigen.

TheGrudge 23.09.2007 12:23

Oder gleich ein CMS... vor allem wenn du mehrere Seiten hast, nicht nur so 3...

Bluefire 23.09.2007 13:55

Naja egal. Ich hab ja eigentlich nen anderes Problem. Eine Website designen könnte ich ja halbwegs (header und so) aber wenn man ein HTML-Dokument hat dann sind eigentlich immer tabellen darin enthalten. Naja ich poste das mal in diesem Thread anstatt einen neuen zu machen.
Hier guckt mal wenn ich ne website im HTML editor geöffnet habe:
http://img219.imageshack.us/img219/9541/tabelleev3.png

Wie mache ich das mit den Tabellen? Das die genau in der mitte ist und das sie so ist wie ich sie haben will also genau in den maßen? Ich habe N|vu (naja...) und Dreamweaver dazu noch den Editor :D


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

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