|
Ihr habt erfolgreich ein Template heruntergeladen. Nun liegt eine Zip-Datei bei euch auf dem Desktop oder in einem Ordner. Aber was müsst Ihr jetzt machen? Wie könnt Ihr dort euren Inhalt einfügen, Bilder anzeigen lassen oder den Header anpassen?
Dies und noch einiges mehr, wird euch in dieser Schritt-für-Schritt-Anleitung (Tutorial) gezeigt.
Template entpacken und öffnen
Ihr habt ein Template heruntergeladen und dieses liegt nun bei euch auf dem Desktop.
Als nächstes muss es nun entpackt werden. Dazu muss ein Programm zum entpacken von ZIP-Dateien auf eurem PC installiert sein.
Wer kein Packprogramm hat, kann sich z.B. hier einen ZIP-Entpacker downloaden. Ihr könnt aber auch mit Windows eigenen Bordmitteln ZIP-Archive entpacken.
Überprüfen auf Vollständigkeit
Als nächstes öffnen wir das Template mit einem Doppelklick auf das Ordnersymbol.
Dann sollten wir diese Ansicht vorfinden.
In dem Order "bilder" befinden sich alle Bilder, die wir für unsere Webseite benötigen.
Dieser Ordner kann auch "img", "pic" oder sonst wie heißen.
Die Index - Datei ist eine HTML-Datei. Es kann aber auch eine HTM-Datei sein. Dies ist im Grunde das selbe, wobei wir aber bei Verlinkungen innerhalb unserer Seite darauf achten müssen, welche Endung unsere Dateien haben.
Die Datei "design" ist eine CSS ( Cascading Style Sheet ) - Datei. Mithilfe dieser Datei wird das komplette Design unserer Webseite gestaltet.
Nun möchten wir uns das Template einmal im Browser ansehen. Dazu doppelklicken wir einfach auf die index.htm(l) Datei in unserem Template Ordner. Euer Standardbrowser wird sich nun öffnen und das Template anzeigen. Jetzt ist es Zeit daran, das Template einmal zu testen.
Wichtig hierbei ist, das alle Grafiken auch geladen werden. Ferner kann man auch testen ob die Links einen "Hover-Effekt" haben, also wenn man mit dem Mauszeiger über die Links fährt, sich Farben, Formen oder Zeichen ändern.
Nachdem wir alles überprüft haben, fangen wir an, das Template zu personalisieren.
Wir fangen jetzt einfach mal mit dem Header, also dem großen Banner ganz oben, an.
Dazu benötigen wir ein geeignetes Bildbearbeitungsprogramm.
Ich verwende z.B. Gimp2, da es kostenlos ist und dafür jede Menge Funktionen beinhaltet. Downloaden kann man es hier.
Zum ändern des Headers öffnen wir erst einmal Gimp. Danach klicken wir auf den Reiter "Datei" und klicken auf "Öffnen".
Nun suchen wir uns den Header, der idealerweise in einem Vectorformat vorliegt, also einem Dateiformat, das alle Ebenen des Headers gespeichert hat, und somit bearbeitbar ist. Normale Grafikformate wie JPG oder GIF sind hier kaum nützlich, da man diese Formate im Nachhinein nur schwer verändern kann. Wir haben also die Datei "header-vorlage.xcf" gefunden und öffnen diese. Das sollte nun so aussehen:
Um den Schriftzug "Ihre - Seite.de" zu ändern klicken wir rechts im Fenster Ebenen auf dem Punkt "Ihre - Seite.de" (1) und wählen damit diese Ebene aus. Als nächstes wählen wir das Textwerkzeug im linken Werkzeugfenster aus (2). Nach einem Doppelklick auf den Schriftzug im Header wird das Texteingabefeld (3) angezeigt und wir können den Text ändern. Das gleiche können wir für den Text rechts neben dem Bild machen.
Danach können wir das Bild über Datei -> Speichern unter... als header im Format JPG, PNG oder GIF ( unter dem Namen des voherigen Headers ) im Verzeichnis "bilder" abspeichern und ersetzten damit den alten Header. Mann sollte übrigens alle Dateinamen klein schreiben, da manche Server Probleme mit Großbuchstaben haben. Nun können wir unsere index.html erneut aufrufen und sehen die Seite mit unserem angepasstem Header.
Für das Bearbeiten der Navigation und das Verändern des Inhaltes sind gewisse HTML- und CSS-Kenntnisse Voraussetzung. Eine sehr gute Referenz für HTML ist de.selfhtml.org. Auch das ein oder andere über CSS könnt Ihr dort nachlesen. Für die Bearbeitung von HTML-Dateien ist ein sogenannter HTML-Editor sehr von Vorteil. Zwar kann man auch die HTML-Dateien mit dem normalen Editor oder mit dem Wordpad öffnen und ändern, doch hat der HTML Editor ganz entscheidende Vorteile wie z.B. Quelltexthervorhebung oder leichtes einfügen von Sonderzeichen, Tabellen o.ä. . Hierzu verwende ich den Phase 5 Editor. Für Privatanwender und Schulen ist dieser Editor kostenlos. Bezugsquelle des Phase 5 Editors ist hier.
Nun öffnen wir den HTML- Editor und suchen unsere index.html über den Reiter Datei -> Datei öffnen. Nun sehen wir den Quelltext der index.html. Ab Zeile 30 sehen wir dann die Navigation (1). Nun sehen wir in der Navigation einige <li> Elemente. Das sind die einzelnen Menüpunkte (2).
Um jetzt die einzelnen Menüpunkte zu ändern, ist es ratsam sich vorher bereits Gedanken zu machen, wie viele Menüpunkte man benötigt und wie diese heißen sollen. Weil stellt man später fest, dass man einen Menüpunkt vergessen hat, oder einen Punkt falsch bezeichnet hat, muss man sämtlich Seiten manuell von Hand abändern. Sollte man dann ein Projekt haben, das 40 oder 50 Seiten umfasst, kann dies sehr mühsam sein.
In diesem Tutorial wollen wir insgesamt 8 Seiten verwenden. Nun sehen wir, das inklusive der Startseite aber nur 7 Seiten angelegt sind. Also müssen wir einen weiteren Menüpunkt hinzufügen. Die machen wir einfach per kopieren und einfügen. Wir markieren die komplette Zeile
von <li> bis </li> (inklusive der <li> und </li>), drücken Strg+C und fügen sie unter der letzten <li> Zeile mit Strg+V wieder ein.
Nun haben wir insgesamt 8 Menüpunkte.
Nun möchten wir folgende Menüpunkte anlegen:
- Home (Startseite)
- Über mich
- Interessen
- Meine Bilder
- Meine Familie
- Gästebuch
- Kontakt
- Impressum
Legen wir jetzt also dies Menüpunkte fest.
Eine <li> Zeile schaut so aus:
<li><a class="current" href="/index.html"><font color="#FF7F00">» </font>Home</a></li>
Dabei stören wir uns im Moment nicht daran das dort im Gegensatz zu den anderen Zeilen ein class="current" steht. Dies ist nur ein Hinweis darauf das dieser Menüpunkt wie ein über einen Menüpunkt gefahrener Cursor aussieht. Zurück zu unserer <li> Zeile...
Dieses href="/index.html" stellt die zu verweisende HTML-Seite dar und das Wort "Home" zeigt es im jeweiligen Menüpunkt an.
Nun machen wir aus dem "index.html" für den zweiten Menüpunkt ein "ueber_mich.html" und aus dem Home ein "Über mich". Die 2. Zeile schaut nun so aus: <li><a href="/ueber_mich"><font color="#FF7F00">» </font>Über mich</a></li>
Wie wir sehen verwenden wir in den Dateinamen keinerlei Sonderzeichen, Leerzeichen oder Großschreibung, da es sonst bei der Verlinkung zu Problemen kommen kann. Man kann bei mehr als einem Wort in der Menübeschreibung auch nur ein Wort im Dateinamen verwenden. Aus "meine_familie.html" kann so auch "familie.html" werden.
Die 3te Zeile heißtdann logischerweise "interessen.html", die 4te "meine_bilder.html" usw...
Nun speichern wir das ganze über Datei -> Datei speichern ab.
Nun können wir die "index.html" nochmals über den Browser aufrufen und das Ergebnis betrachten.
Nun beschäftigen wir uns mit dem Content, dem eigentlichem Inhalt unserer Webseite.
Eigentlich ist es nicht schwer den Inhalt abzuändern, zumindest nicht, wenn wie hier der Seitenaufbau (hier: Text umfliest Bilder) übernommen wird. Es gibt in HTML einige Elemente und Attribute zum positionieren und Anordnen von Textinhalten. Dazu gehören z.B. <br> oder auch der der <p> Tag. Jetzt rede ich die ganze Zeit von Elementen und Attributen. Zur Erklärung: Elemente sind sind die Inhalte die zwischen den
spitzen Klammern <> (Tags) stehen z.B.: <h1> ( Überschrift Größe 1) . Attribute sind zusätzliche Anweisungen zu den HTML-Elementen z.B.: <h1 align="center">ihre-seite.de</h1> (Textausrichtung mittig).
Welche Elemente und Attribute es gibt und was sie bewirken, lest bitte bei de.selfhtml.org nach. Dies würde dieses Tutorial sprengen. Aber nachstehend mal einige wichtige Elemente und Attribute:
- <h1> Überschrift der 1. Ordnung (geht bis h6). </h1> beendet die Überschrift
- <br> (br = break = Umbruch) fügt an der gewünschten Stelle einen Zeilenumbruch ein. Tag braucht nicht geschlossen zu werden.
- <p> (p = paragraph = Absatz) leitet einen Textabsatz ein. </p> beendet den Textabsatz und steht am Ende des Absatztextes.
- <ul> leitet eine Aufzählungsliste ein (ul = unordered list = unsortierte Liste). </ul> schließt die Aufzählungsliste.
- <ol> leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste). </ol> schließt die Aufzählungsliste.
- <li> Damit beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag.
- <div> Damit leitet man ein Block-Element ein. Mit </div> schließt man das Blockelement.
- align="left" Textausrichtung links
- align="center" Textausrichtung mittig
- align="right" Textausrichtung rechts
- align="justify" Textausrichtung Block
Wenn man nun größere Textpassagen hat oder öfters den gleichen Style, kann man die Attribute auch extern in eine CSS-Datei einbinden. Dies ist vor allem dann sinnvoll, damit man den Quelltext nicht unnötig aufbläht. CSS-Dateien werden vom Browser nur einmal aufgerufen und verbleibt dann im Cache, was den Seitenaufbau schneller machen kann. Außerdem bleibt der Quelltext wesentlich übersichtlicher und ist damit leichter zu pflegen.
Mit diesem Wissen könnt Ihr nun Euren Text ganz leicht an euere Bedürfnisse anpassen. Probiert es aus!
Jetzt kommen wir zu einem weiteren wichtigen Punkt: Bilder einfügen.
Man kann Bilder entweder als normales Bild oder als Link anzeigen lassen.
Bei einem normalen Bild schaut das so aus:
<img src="/bilder/bild.gif" alt="Mein Bild">
Für Grafiken gibt es in HTML das <img>-Tag (img = image = Bild, src = source = Quelle). Es handelt sich um ein Standalone-Tag ohne Elementinhalt und ohne End-Tag. Das Attribut alt ist eine Pflichtangabe. Es beschreibt das Bild wenn sie mit dem Cursor darüberfahren. Bei z.B. Transparenten Grafiken kann es sinnvoll sein das Attribut leer zu lassen. ( alt="" ).
Bei einem Bild als Link schaut das dann so aus:
<a href="/index.html"><img src="/bilder/bild.gif" alt="Mein Bild"></a>
Wenn man jetzt auf diese Bild klicken würde, würde man zu der Datei "index.html" weitergeleitet werden. Natürlich kann man nicht nur auf HTML-Dateien verweisen sondern, beispielsweise auch auf andere Grafiken. <a href="/bilderbilder/bild1gross.gif"><img src="/bilder/bild1klein.gif"></a> Somit können wir kleine Bilder im einer Übersicht darstellen und der Benutzer kann, wenn er auf das Bild klickt das Bild größer ansehen.nsehen.nsehen.nsehen.nsehen.. Das spart Traffic und Ladezeit. Außerdem hat man eine hübsche Bildergalerie mit "Zoom-Effekt".
Jetzt können wir auch einfache Verweise, entweder intern oder auch zu anderen Webseiten darstellen. Auf Wunsch auch mit Grafiken.
Ein interner Link auf eine HTML Datei sieht dann so aus:
<a href="/gaestebuch.html">Gästebuch</a>
Ein Verweis auf eine externe Webseite sieht dann so aus:
<a href="http://www.kostenlose-templates.eu">Kostenloser Webmasterbedarf</a>
Wie Ihr seht ist es eigentlich ziemlich simpel, euren Inhalt anzupassen.
So, im letzten Kapitel dieses Tutorials möchte ich euch zeigen wie man den nun die ganzen HTML- und Bilddateien auf euren Webspace bekommt und worauf ihr achten müsst.
Zunächst einmal benötigen wir Webspace, also Speicherplatz auf einem Server, der ans Internet angebunden ist und eine Domain.
Wenn Ihr kein Geld dafür ausgeben wollt, gibt es auch Anbieter für Webspace (auch für Domains) die Ihren Service kostenlos anbieten.
Meist wird dann bei Aufruf eurer Homepage von diesem Anbieter Werbung eingeblendet. Dazu könnt ihr eine kostenlose Subdomain nehmen.
Euere Domain lautet dann z.B. www.eueredomain.de.vu oder www.eueredomain.de.ki . Dies ist sicherlich praktisch für den Anfang und für eine private Homepage.
Für kommerzielle Webseiten und auch größere Projekte empfiehlt sich ein bezahlter Webspace ohne Werbeeinblendungen des Hosters. Meist ist in diesen Webspacepaketen auch gleich eine oder mehrere Top-Level-Domains wie .de oder. com inbegriffen. Ansonsten kann man die Domains auch ohne Webspace mieten oder kaufen.
Nun wollen wir aber unsere Daten auf unseren Webspace bekommen. Dazu benötigen wir am besten ein Programm mit dem wir alles leicht verwalten können. Es würde zwar auch über den Windows Explorer funktionieren, nur ist dieser nicht komfortabel genug und des öfteren sehr umständlich. Deswegen gehe ich hier nicht weiter darauf ein. Als kostenloses aber trotzdem hervorragendes Programm hat sich meiner Meinung nach FileZilla erwiesen. Downloaden könnt ihr es hier.
Nach der Installation starten wir das Programm mit einem Doppelklick auf das FileZilla-Symbol auf dem Desktop. Nun benötigen wir die FTP-Zugangsdaten, die uns der Webspaceanbieter zur Verfügung gestellt hat. Genauer gesagt benötigen wir den Namen des FTP-Server, den Loginname sowie das Passwort. Manchmal muss man auch noch den entsprechenden Port mit angeben. Dies sagt euch aber der Webspaceanbieter.
Mit einem Klick auf "Verbinden" seid Ihr mit eurem Webspace verbunden. Links seht Ihr eure lokalen Verzeichnisse, also den Ihnalt euer Festplatten. Rechts ist alles was Ihr auf Euren Webspace habt. Ja nach eurer Internetanbindung kann vor allem der Upload der Bilder eine gewisse Zeit dauern.
Wenn Ihr nun alle Dateien auf dem Webspace habt ( auch mit den richtigen Ordnern ) und Ihr eure Domain richtig konfiguriert habt, müsste jetzt bei Aufruf eurer Domain im Browser die Startseite angezeigt werden und eure Webseite erfolgreich im Internet sein.
Überprüft zum Schluss nochmal alle Links und Bilder auf Funktion bzw. auf Vorhandensein.
Herzlichen Glückwunsch! Ihr habt eure Webseite allein gestaltet und erfolgreich online gebracht!
|
Templates Tutorial