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

Hinweise
Alt 05.08.2006, 19:26   #1
Galgemaennle
Erfahrener Benutzer
 
Registriert seit: 29.07.2006
Ort: Aufm Berg
Beiträge: 212
Standard Homepage erstellen N°2

EDIT: Neue Version--> Hier <--Neue Version





Ich habe mir gedacht, da doch einige Fragen bezüglich des Homepage erstellen Threads (http://www.gimpforum.de/showthread.php?t=4323) aufgekommen sind, ein neues TuT zuschreiben!

Ich hoffe kaled wird mir nicht allzu böse sein


1) Vernüftigen HTML Editor zulegen (kommt mir erst garnet mit Frontpage-.-)

http://www.weaverslave.ws/ Ich benutze diesen Editor und bin vollauf zufrieden.


2)Überlegen wir uns, wie unsere Homepage aussehen soll.

Ich habe mir gedacht wir machen das ganze so:

_________________________
|_________header _________|

|links| mitte |rechts|
|links| mitte |rechts|
|links| mitte |rechts|
|links| mitte |rechts|
|links| mitte |rechts|
_________________________
|_________footer--_________|


Da dieses TuT eher an Nicht HTMLer gerichtet ist, habe ich hier schoneinmal das passende script geschrieben:

index.htm
Code:
<!-- Script by Florian Asal flo_asal@gmx.de -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Startseite</title>
    <link rel="stylesheet" type="text/css" href="css.css" />
  </head>
  <body>
  <table align="center">
    <tr>
      <td>
      
<!-- header -->        
        <table width="1030" border="0" cellspacing="5" cellpadding="5">
          <tr>
            <td height="100" valign="top" class="header"></td>
          </tr>
        </table>
        
<!-- links -->
        <table width="1024" border="0" cellspacing="5" cellpadding="5">
          <tr>
            <td width="140" height="500" class="links" valign="top">
              <p><a href="index.htm">Startseite</a></p>
              <p><a href="links.htm">Links</a></p>
              <p><a href="bilder.htm">Bilder</a></p>
              <p><a href="http://www.gimpforum.de" target="_blank">Gimp-Forum</a></p>
            </td>
            
<!-- mitte -->           
            <td width="*"  class="mitte" valign="top">
              <div align="center"><h1>Willkommen auf meiner Homepage!</h1></div>
              <p>Hier k&ouml;nnt ihr nun Inhalt einf&uuml;gen!</p>
            </td>
            
<!-- rechts -->          
            <td width="140" class="rechts" valign="center">
              <p>Hier habt Ihr weiteren Platz!</p>
              <p>Ver&auml;ndert valign="center" in "top" und der Text wird an den oberen Rand gesetzt</p>
            </td>
          </tr>
        </table>
        
<!-- footer -->    
        <table width="1030" border="0" cellspacing="5" cellpadding="5">
          <tr>
            <td height="45" class="footer" align="center">Copyright&copy; 2006 by Florian Asal • <a href="mailto:Flo_Asal@gmx.de">Florian Asal</a></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  </body>
</html>
sodass alles Gestallt annimmt, und unsere Bilder wissen wo sie einmal hinkommmen sollen und der text weis wie er auszusehen hat legen wir eine Stylsheet datei an:


Code:
.header {
  background-image: url(img/header.jpg);
  background-repeat: repeat;
}

.links {
  background-image: url(img/links.jpg);
  background-repeat: repeat;
  font-weight: bold;
  color: #2C323F;
  font-size: 20px;
  padding-top: 30px;
  padding: 20px;
  

}

.links a:link {color: #000000;}

.links a:visited {color: #000000;}

.links a:link:hover {color: #000000;}

.mitte {
  background-image: url(img/mitte.gif);
    background-repeat: repeat;
}

.rechts {
  background-image: url(img/rechts.jpg);
  background-repeat: repeat;
  color: #000000;
  font-size: 15px;
  padding-top: 30px;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.rechts a:link {color: #000000;}

.rechts a:visited {color: #000000;}

.rechts a:link:hover {color: #000000;}

.footer {
  background-image: url(img/footer.jpg);
  background-repeat: repeat;
  color: #000000;
  font-weight: bold;
  }
  
.footer a:link {color: #000000;}

.footer a:visited {color: #000000;}

.footer a:link:hover {color: #000000;}
Beide Datein können beliebig erweitert werden...

Diese Seite wird euch dabei behilflich sein: http://de.selfhtml.org/



3) nun zum Wichtigesten: Die Bilder

Die Bilder sind nach kaled´s (http://www.gimpforum.de/showthread.php?t=4323) anleitung gemacht worden. Ausschließlich ändern sich die größen:


Benennt eure bilder genau so!!!!

-"header" erstellen in der Größe 1024x100
-"links" in 180x500
-"rechs"Seite in 180x500 (einfach "links" horizontalspiegeln)
-"footer" in 1024x45


wenn ihr eure Bilder in diesen Größen erstellt, könnt ihr mein script übernehmen. Wenn nicht , spielt einfach mit den width und height werten im script bis es euch passt.

4) So nun Text einfügen und dann sind wir auch fast fertig.


5) Fetigstellen

-Die Bilder kommen in den "img" Ordner
-Das Script wird also index.htm gespeichert
-Die css-Datei als css.css

6) Das ganze kommt auf ein Webserver, sodass jeder zugriff auf diese Dateien hat:

Wenn ihr noch keinen habt legt euch einfach einen zu:
http://www.ohost.de/go/asalflorian



Tipps:
-Legt am besten einen Ordner für Dieses Projekt an.
-Die beispiele für die Weiteren Seiten Bilder oder Links, können natürlich geändert werden. Für weitere Seiten wird einfach alles kopiert, eine neue Datei angelegt diese sobenannt wie ihr sie dann verlinkt.
-buttons zum anklicken werden so gemacht:
<a href="linkzudemderbuttonführensoll"><img src"img/button"></a>
der button heißt hier Button und liegt im img Ordner.


So sieht das ganze nun aus:

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



viel Spaß beim testen. Bei Fragen bitte fragen

Geändert von Galgemaennle (25.09.2006 um 21:23 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
Textur erstellen Peterchen Grundlagen 30 11.01.2014 19:14
Schnelle kleine Homepage erstellen kaled Fortgeschritten 79 08.07.2011 15:24
Blender: Texte erstellen und verformen Ravetracer Alternative freie Software 11 26.07.2006 18:50
Homepage Design erstellen... Phasm Design 0 10.10.2005 22:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:44 Uhr.


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