• Slider-Bild
  • Slider-Bild
Anleitung Homepage erstellen @ homepages-tipps.de

Anleitung Homepage Erstellung


Informationen und Tipps vom Hobby-Webdesigner für die Erstellung einer eigenen Website



Homepageerstellung mit HTML/CSS-Templates


Was sind Templates?

Templates, auch Web-Templates genannt, sind fertige Designvorlagen zur Erstellung von Internetseiten. Diese Homepage-Vorlagen verfügen bereits über die notwendigen Inhalte, was das Aussehen, den Seitenaufbau und die Funktionalität einer Website anbelangt. Mit der Verwendung einer solchen Muster-Vorlage lassen sich insofern viele Arbeitsschritte und somit auch Zeit bei der Erstellung einer eigenen Homepage einsparen.

Was sind CSS Templates?

CSS-Templates verfügen neben den im HTML bereits enthaltenen Anweisungen auch über eine CSS-Datei, die weitere Anweisungen zur Formatierung der Website enthält. Zumeist befinden sich die im Cascading Stylesheet definierten Anweisungen in einer externen, also ausgelagerten Datei. Bearbeitet und nach den eigenen Vorstellungen angepasst werden Templates in einem HTML-Editor und auch unter Verwendung eines Programmes für die Bildbearbeitung, um die in der Vorlage zumeist enthaltenen Fotos durch eigene Bilder ersetzen bzw. diese jeweils austauschen zu können.

Werbung:



Kostenfreie und kostenpflichtige Web-Vorlagen
Es gibt sowohl kostenfreie Homepage-Vorlagen, als auch kostenpflichtige. Einige Webdesign-Vorlagen dürfen nur von Privatanwendern kostenfrei genutzt und entsprechend angepasst werden, während eine kommmerzielle Nutzung, also wenn Sie eine Firmen-Website mit so einer Design-Vorlage erstellen möchten, kostenpflichtig und insofern auch einige Euro teuer sein kann.

Andere Website-Templates dürfen wiederum sowohl privat, als auch geschäftlich genutzt und gemäß der eigenen Bedürfnisse verändert werden. In jedem Fall sind vor dem Download eines Templates die jeweiligen Nutzungs- oder Lizenzbestimmungen und die festgelegten Regeln für eine Veröffentlichung genau zu beachten. Und ganz egal, ob Sie ein Template für den Privatbereich oder für geschäftliche Zwecke verwenden möchten, der in der Vorlage auf den einzelnen Seiten enthaltene Hinweis und Link zum Autor der Website-Vorlage, also der Copyright Hinweis, sollte keinesfalls entfernt werden.

Wie Sie eine Homepage-Vorlage bearbeiten können

Nachdem Sie sich die Homepage-Vorlage, die zumeist als gepackte zip- oder rar-Datei zum Download angeboten wird, auf Ihren Rechner geladen und dort entsprechend entpackt haben, müssen Sie die im Verzeichnis (Ordner) der Vorlage enthaltenen Dateien, speziell zunächst die Startseite index.html - mitunter heisst diese auch default.html - über einen HTML-Editor Ihrer Wahl entsprechend öffnen.

Das machen Sie, indem Sie auf die index- oder default-Datei mit der rechten Maustaste klicken und dann im sich öffnenden Fenster auf "öffnen mit" die entsprechende Auswahl treffen, damit Sie die Seite mit Ihrem HTML-Editor öffnen können. Die Seite wird daraufhin in Ihren HTML-Editor geladen und dort angezeigt, d.h. Sie sehen nun in Ihrem Editor den HTML-Quelltext dieser Seite und können diesen entsprechend Ihren Vorstellungen individuell im Editor bearbeiten.

  • Text bearbeiten

    Mit Sicherheit steht in der Homepage-Vorlage nicht der Text, den Sie gerne hätten, sondern ein Blindtext, Lorem ipsum, der lediglich als Platzhalter im Layout vom Autor eingefügt worden ist, um einen Eindruck vom fertigen Dokument darstellen zu können. Aber das möchten Sie natürlich ändern und Ihre eigenen Texte in die Seite einfügen. Statt des Lorum ipsum schreiben Sie nun einfach im HTML-Editor Ihren gewünschten Text in die betreffende Stelle hinein und speichern diese vorgenommene Änderung anschließend unter "Datei speichern" ab, damit die ursprünglich vom Autor erstellte Seite überschrieben und somit anstelle von Lorem ipsum nun Ihr Text im Dokument und somit auch im Browser angezeigt wird.

  • Bilder und Grafiken bearbeiten

    Wenn Ihnen beispielsweise die Hintergrundgrafik in der Homepage-Vorlage nicht zusagt, laden Sie sich diese in Ihr Bildbearbeitungsprogramm. Sie werden Bild-Dateien innerhalb der Homepage-Vorlage zumeist in einem Ordner "images" oder auch "img" oder "pics" finden. In Ihrem Bildbearbeitungsprogramm können Sie sowohl die Hintergrundgrafik verändern, aber auch die in der Vorlage vorhandenen Bilder durch Ihre eigenen Fotos und Grafiken ersetzen. Sie speichern die von Ihnen bearbeiteten, veränderten oder ausgetauschten Bild-Dateien nur jeweils neu ab, d.h. Sie überschreiben die bisherigen Dateien, so dass nunmehr Ihr Hintergrundbild sowie Ihre Fotos oder Grafiken angezeigt werden.

  • Farbe und Größe der Überschriften bearbeiten

    Sofern Ihnen in der Homepage-Vorlage die Farbe oder auch die Größe der Überschriften nicht gefällt, lassen sich diese ebenfalls bearbeiten. In einer Vorlage, die eine externe CSS-Datei enthält, in der die Formatierungen festgelegt sind, können Sie dies entsprechend verändern. Sie müssen dafür nur die CSS-Datei öffnen. Diese erkennen Sie zumeist an dem Datei-Namen "style" oder auch "styles", mitunter heisst sie auch "format" oder ist anderweitig bezeichnet, aber Sie werden diese css im Ordner der Homepage-Vorlage finden. Klicken Sie diese Datei ganz einfach mit der rechten Maustaste an und gehen auf "öffnen". Daraufhin öffnet sich ein einfacher Text-Editor und Sie suchen sich innerhalb der Datei die Stelle, wo die Überschriften h1 bis h6 definiert sind. Natürlich lässt sich die Bearbeitung der CSS-Datei auch im HTML-Editor vornehmen.

    Unter "font-size" können Sie dann die Größe der Überschriften ändern, indem Sie einfach eine größere oder auch kleinere Zahl vor dem px; hineinschreiben. Falls die Größe innerhalb der css-Datei in einer Prozentzahl angegeben ist, ändern Sie vor dem %; auch nur jeweils die dort angegebene Prozentzahl, ebenso bei einer Größenangabe in em; indem Sie diese vergrößern oder verkleinern. Und unter "color" können Sie den einzelnen Überschriften eine andere Farbe zuweisen.

    Wenn Sie eine neue Farbe in den Text-Editor eingefügt haben für eine oder auch für mehrere Überschriften und evtl. auch die Größe der Überschriften verändert haben, speichern Sie die Datei entsprechend ab, damit nunmehr die von Ihnen im css vorgenommenen Änderungen in der Homepage-Vorlage sichtbar werden.


Darüber hinaus lassen sich viele weitere Veränderungen sowohl in der css-Datei, als auch in den einzelnen HTML-Dokumenten der Homepage-Vorlage vornehmen. Sofern die Homepage-Vorlage nur die "index.html" enthält, vervielfachen Sie diese einfach nach erfolgter Bearbeitung mit "kopieren". Fügen Sie anschließend die kopierte Datei mit "einfügen" in den Ordner der Homepage-Vorlage ein und benennen Sie die Kopie mit einem neuen Namen gemäß der von Ihnen geplanten Menüpunkte. Die auf diese Weise neu entstandene Seite lässt sich dann wiederum im HTML-Editor entsprechend bearbeiten, indem Sie dann dort neue und andere Inhalte einfügen, damit letztlich die Homepage-Vorlage mehr und mehr zu einer nach Ihrem persönlichen Geschmack ausgerichteten individuellen Website wird.

Kostenfreie Homepagevorlagen
Schauen Sie doch mal auf meine Homepage www.freetemplates4you.de. Dort finden Sie als Downloadangebot diverse kostenfreie Homepagevorlagen, HTML/CSS-Webseitenvorlagen, einfache Homepagevorlagen zum Ausprobieren und Üben sowie Templates in responsive Webdesign für flexible Webseiten.

Werbung:


Responsive Webdesign

Auf meiner Seite "Responsive Webdesign" finden Sie hierzu einige Informationen...


Mehr lesen