Hilfe
Das müssen Sie tun:
1. Entpacken der zip-Datei mit einem Entpack-Programm (wie z.b. Winzip oder
Winrar)
2. Anschauen der Vorlage im Browser (z.b. Internet-Explorer, Firefox,
Netscape)
3. Bearbeiten der Vorlage mit einem Html-Editor-Programm (z.b. Frontpage)
4. Hochladen der Vorlage mit einem Ftp-Programm (z.b. WS_Ftp)
***********************************************
Fehlervermeidung und erstes Handeln
***********************************************
Wenn Sie die Download-Datei entpackt haben, können Sie sich die Vorlage
direkt ansehen.
Bevor Sie die Vorlage in Ihrem Html-Editor laden und bearbeiten, machen Sie
bitte folgendes:
Starten Sie die Startdatei (index.html) der unbearbeiteten Vorlage in Ihrem
Browser.
Wenn Sie die Vorlagen dann in Ihrem Browser sehen - wovon ich ausgehe - mit
allen dazugehörigen Grafiken , wissen Sie, das die Vorlage technisch in
Ordnung ist.
Somit können Sie später Ihre evt. Bearbeitungsfehler leichter zuordnen.
Die Vorlagen bestehen aus folgenden Dateien und Ordnern:
HTML-Datei
CSS-Datei
Grafik-Dateien (welche sich im Ordner "images" befinden).
evt. JavaScript-Dateien)
Alle diese Dateien müssen Sie, wenn Sie die Seite ins Netz stellen, auch mit
hochladen.
***********************************************
Fragen zur Anzeige in Ihrem HTML-Editor
***********************************************
Viele Anfänger gehen davon aus, dass eine gut programmierte Seite in Ihrem HTML-Editor gut aussehen muss. Das ist falsch. Der Browser ist das einzig entscheidende Kriterium für die Funktionalität einer Webseite.
Denken Sie daran, eine Webseite muss im Browser korrekt angezeigt werden, nicht unbedingt in der Grafikansicht Ihres HTML-Editors, denn der ist ja nur ein Hilfswerkzeug.
Es gibt wirklich Hunderte von HTML-Editoren, erwarten Sie nicht von uns, dass wir jedes einzelne Programm kennen, um Ihnen eine Frage zu Ihrem Editor zu beantworten.
Installation:
Die einzelne Vorlage ist als "Zip-Datei" gepackt (komprimiert) und wird so
heruntergeladen. Dies hat noch nichts mit Homepages oder HTML zu tun.
Zip-Dateien werden oft im Internet verwendet um KB (und damit Ladezeit) zu
sparen oder um mehrere Dateien in ein Verzeichnis zu packen (und dann als
einzelne Datei zu versenden).
Mit dem Programm "Winzip" oder "Winrar"(Freeware oder Shareware) ist die Datei zu
entzippen (entpacken).
Danach die Datei "index.html" (so heisst generell die Startseite einer
Homepage) im Browser starten. Dann sehen Sie die Vorlage.
Anlegen von weiteren HTML-Seiten
also wenn Sie eine neue Seite für einen neuen Link anlegen bzw. einen der Beispiel-Links ersetzen)
Das geht am leichtesten durch Kopieren wie folgt:
Übers Windows-Betriebssystem die HTML-Datei kopieren und dann die Datei
umbenennen
oder
über den Html-Editor die Datei laden und dann mit "Datei speichern unter"
eine neue Html-datei mit neuem Namen anlegen.
- Bei Seiten ohne Frames ( Tabellen-Konstruktionen):
Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.
- Bei Frameset-Konstruktionen oder Inline-Frames:
Die Datei "inhalt.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.
Anmerkung: Die Datei "inhalt.html" ist bei meinen Frameset-Konstruktionen die erste Seite, die im Hauptinhaltsframe geladen wird. Der Hauptinhaltsframe wurde von mir mit dem Namen "haupt" (Framename ggflls. änderbar) benannt. Alles weiteren Seiten werden dann automatisch in diesen Hauptinhaltsframe hineingeladen.
Voraussetzung ist, dass direkt beim Link der Hauptinhaltsframe angesprochen wird. Dieses geschieht mit den Befehl "target="haupt".
In den Vorlagen habe ich das aber schon für Sie angegeben.
Startdatei der Homepage ist aber auch hier die Datei "index.html" , welche bei Frame-Konstruktionen als Framesteuerdatei (enthält Anweisungen zur Platzierung aller Frame-Dateien, wie inhalt.html, oben.html oder links.html) fungiert.
Anlegen von Links
Bei den Vorlagen sind die Beispiel-Links durch Ihre Links zu ersetzen. Diese Beispiel-Links sind hier probehalber von mir verlinkt,z.B. Verlinkung zu "index.html", "inhalt.html" oder per Platzhalter mit Raute-Symbol (#). Sie müssen hier Ihre Seiten verlinken, z.b. "hobbies.html" für ihre Hobby-Seite oder "gaestebuch.html" für Ihre Gästebuch-Seite.
In der Regel brauchen Sie nur in die Quelltextansicht Ihres Editors schalten und die vorhandendenen Links einfach überschreiben.
Wenn Sie neue Links (weitere Links als die vorhandenen Beispiel-Links) anlegen wollen, so können Sie am leichtesten folgendermassen handeln:
Schalten Sie in die Quelltextansicht Ihres Editors und kopieren den Quelltext des letzten Links einmal oder öfter.
So kann es gehen (p.s. es gibt noch andere Möglichkeiten in Ihrem Editor): Kopieren eines beliebigen Abschnitts oder Textes geht in jedem Html-Editor gleich - nämlich am leichtesten über die sogenannte Windows-Zwischenablage.
1. Markieren Sie den Abschnitt mit der Tastatur oder der Maus.
2. Drücken Sie auf der Tastatur gleichzeitig die Tasten STRG + C (Einlesen des Kopierabschnitts)
3. Platzieren Sie den Cursor an die Stelle, an welcher der neue Link stehen soll, also unter oder neben den letzen Link.
4. Drücken Sie auf der Tastatur gleichzeitig die Tasten STRG + V (Auslesen des Kopierabschnitts)
Text-Links und Grafik-Links:
Die Text-Links sind durch Erweitern oder Überschreiben leicht zu bearbeiten bzw. zu ersetzen. Bei einer Vorlage mit Grafik-Links sind die Grafik-Buttons vorab in einem Grafik-Programm Ihrer Wahl zu beschriften.
Der einzelne Grafik-Button ist im Grafik-Programm mit "Datei öffen" zu laden.
Dort - im Grafikprogramm - gibt es in der Regel einen Button mit einem T-Symbol (Buchstabe "T" für Text). Wählen Sie damit eine Schriftart und eine Schriftgrösse und speichern Sie die Grafik ab.
FRAMES ODER NICHT-FRAME-SEITEN: Die Unterschiede
1. Tabellen-Konstruktionen
(Seiten ohne Frames)
2. Frameset-Konstruktionen
(Seiten mit Frames, d.h. ein oder mehrere Rahmen bleiben permanent geladen und auch wenn gescrollt wird - konstant am Bildschirm sichtbar, z.b. das Menü oder ein Logo, welches sich ein einem dieser Rahmen befindet. Es wechselt nur immer der Inhalt des Haupt-Frames.)
Bei einer Tabellen-Konstruktion lädt jede Webseite neu, bei einer Frameset-Konstruktion lädt nur der Inhaltsframe (die Seite mit dem Haupt-Inhalt) neu und die anderen Frame-Seiten , z.B. der Navigations-Frame und der Logo-Frame bleiben konstant sichtbar.
Es geht hierbei nur um das Grundgerüst einer Homepage. Eine Frameset-Konstruktion enthält in der Regel auch Tabellen.
Auch muss man auf den ersten Blick nicht erkennen, um welche Konstruktionsart es sich handelt, da Tabellen unsichtar gehalten sein können oder bei Frames die Rahmen oder die Scroll-Leiste abgeschaltet sein können.
Ein Beispiel für ein Frameset-Konstrukt ist die Homepagevorlage
Nr. 01 (3-er-Frameset) und
Nr. 08 (4-er-Frameset).
Ein Beispiel für ein Tabellen-Konstrukt ist die Homepagevorlage
Nr. 05 und
Nr. 09.
Oder noch besser:
Vergleichen Sie beide Konstruktionsarten anhand der gleichen Vorlage.
Dann sehen Sie die Unterschiede noch leichter.
Denn die Vorlage Nr. 02 gibt es als Frameset - und als Tabellenkonstruktion.
Grundsätzlich kann man Tabellen-Konstruktionen in Frame-Konstrukte umwandeln und umgekehrt.
Je komplexer aber ein Layout ist bzw. wenn es vorher vom Autor auf einer der Konstruktionsarten exakt abgestimmt ist, desto schwieriger kann es in Einzelfällen sein.
Lesen Sie die Vor-und Nachteile von Frames und framelosen Seiten unter dem Button "Technik"
HTML-Editoren zum Bearbeiten der Vorlage
Um Bilder, Links, Texts usw. einzufügen gibt es folgende Möglichkeiten:
1. HTML-Editoren
a.) grafisch-orientiert
b.) text-orientiert.
2. reine Text-Editoren
3. andere Programme (die dieses als Neben-Funktion anbieten bzw dafür zweckentfremdet werden, zb. Word)
Der Reihe nach.....
HTML heisst die Sprache um Webseiten zu gestalten. HTML lässt sich sehr schnell lernen und umfasst nur wenige wichtige Befehle.
z.B. der nachstehende Befehl fügt ein Bild auf einer Webseite ein (in diesem Falle 13x92 Pixel gross):
<img src="beispiel.jpg" width="13" height="92" >
oder z.B. der nachstehende Befehl vergrössert eine Überschrift, damit diese sich vom eigentlichen Text abhebt:
<h2>Überschrift</h2>
HTML-Editoren erleichtern das Anlegen dieser Befehle (der sogenannte Quelltext), welche dann leztendlich die Webseite gestalten.
HTML-Editoren werden von Anfänger verwendet (denn hier wird der HTML-Quelltext im Hintergrund generiert) sowie auch von Profis benutzt (die kennen zwar die HTML-Befehle, sparen sich aber das mühsame Eintippen der Befehle).
Grafische HTML-Editoren (wie z.B. "Frontpage") funktionieren nach dem Prinzip "WYSIWYG" (What you see is what you get - Was du siehst, ist das, was du erhältst).
Das bedeutet, du fügst z.B.ein Bild ein - an irgendeiner Stelle auf der Webseite, ob oben oder unten, links oder rechts - so wie Du es im HTML-Editor siehst, wird es auch später im Browser angezeigt (denn hierfür wird der korrekte Quelltext im Hintergrund generiert).
Vorteil: Keine HTML-Kenntnisse.
Ein Nachteil: Oftmals wird zuviel und damit überflüssiger Quelltext angelegt, welcher die Ladezeit verlängert und den Quelltext sehr unübersichtlich macht.
Text-orientierte HTML-Editoren (wie z.B. "Phase5") erlauben es dem Profi (bzw. auch dem Anfänger/Fortgeschrittenen, welcher die grundlegende HTML-Befehle, wie "Bild, Link oder Text einfügen" kennt) durch wenige Klicks eine Webseite zusammenzustellen- hier gibt es aber keine grafische Oberfläche.
Ein Vorteil: Dieser Quelltext ist in der Regel sauberer und spart Ladezeit und ist damit sehr viel leichter weiterzubearbeiten.
Ich selber arbeite übrigens auch seit Jahren mit dem kostenlosen und überall hochgelobten HTML-Editor namens PHASE 5 (Freeware).
Download sowie ein klasse Tutorial (Anleitung) gibt es hier:
http://www.clairette.de/tutorial/
Statt text-orientierter HTML-Editoren können im Prinzip natürlich auch reine Text-Editoren -wie in Windows integriert (z.B. Notepad oder Wordpad) verwendet werden, nur muss hier jeder HTML-Befehl noch selber eingetippt werden.
Nicht zu empfehlen sind Programme, welche neben ihrer eigentlichen Hauptfunktion, auch das Bearbeiten von HTML erlauben (z.b. "Word")
Bearbeiten der CSS-Datei
Die Homepagevorlagen können komfortabel über eine CSS-Formatdatei angepasst werden (z.B. Schriftfarbe, Hintergrundfarbe, farbige Scroll-Leiste, Menü-Farb-Änderungen usw). Mit einer Änderung in dieser CSS-Datei können alle Einzelseiten einer Homepage auf einmal verändert und bearbeitet werden.
Das liegt daran, das sich im Kopf-Bereich jeder Webseite ein Verweis auf diese Datei befindet.
<link rel="stylesheet" href="format.css" type="text/css">
Ein weiterer Vorteil, den Sie auf den ersten Blick schnell erkennen können, ist nachstehend benannt:
Schauen Sie sich einmal den Quelltext der Homepagevorlagen an. Es tauchen dort keine veralteten HTML-Befehle für das Schriftbild (font face, font color, font size) auf. Der Quelltext ist somit sehr viel übersichtlicher und die Ladezeit der einzelen Webseite ist auch geringer. Das Schriftbild wird sehr viel effektiver und einfacher über die CSS-Datei geregelt.
Formatieren per CSS ist mittlerweile aus dem modernen Webdesign nicht mehr wegzudenken.
Die CSS-Datei (von mir benannt als "format.css") ist eine reine Textdatei und mit jedem HTML-Editor oder Texteditor zu bearbeiten. Es können auch von Ihnen weitere Anweisungen hinzugefügt werden, wenn Sie sich ein wenig mit CSS auskennen.
Die CSS-Datei muss immer die Endung "css" haben und ist auch so abzuspeichern.
Anmerkung:
Bitte beachten Sie für ein effektives, problemloses Arbeiten folgendes:
- Ein Beispiel -
Angenommen, Sie wollen z.b. per HTML-Befehl die Schriftfarbe (z.b. für die Farbe schwarz 'font color="#000000"' ) einer Homepagevorlage ändern, so tun Sie dieses nicht per HTML-Befehl in der jeweiligen Webseite, sondern machen es wie folgt:
Ändern Sie z.b. die Schriftfarbe in der CSS-Datei dort bei der diesbezüglichen Anweisung 'color:#000000'.
- Ein weiteres Beispiel -
Angenommen, Sie wollen z.b. per HTML-Befehl die Schriftgrösse (font size="3") einer Homepagevorlage ändern, so tun Sie dieses nicht per HTML-Befehl in der jeweiligen Webseite, sondern machen es wie folgt:
Ändern Sie z.b. die Schriftgrösse in der CSS-Datei dort bei der diesbezüglichen Anweisung 'font-size:10pt'.
Für diejenigen, die sich bereits mit CSS auskennen:
Obwohl die CSS-Anweisungen ausreichen, habe ich zusätzlich bei einigen Homepagevorlagen gleichlautende HTML-Befehle geschrieben. Deshalb, um die älteren Browser (z.b. Netscape 4.7) zu unterstützen, welche noch nicht alle CSS-Anweisungen umsetzen können.
Aber auch hier gilt:
Mit einer Änderung in dieser CSS-Datei können alle Einzelseiten einer Homepage auf einmal verändert und bearbeitet werden. Die HTML-Anweisungen werden immer bei den modernen Browsern durch die CSS-Anweisungen überschrieben.
Bitte finden Sie weitere Tipps unter Technik.
|
|
|
