Kurs Homepage Erstellung 


1. Ein Verzeichnis erstellen:
 auf dem eigenen PC: homepage, hier kommt die Datei index.html rein, dann ggf. weitere Unterverzeichnisse erstellen

2. Domain bei 1und1.com erstellen:
 Aufruf:    1und1  <Webhosting>   <Private Homepages>  z.B. Homepage Basic für  3,99 € pro Monat , das erste Jahr entstehen zur Zeit keine Kosten (Werbeaktion).
check Domain-Namen z.B. Vorname.Nachname.de (ob Groß- oder Kleinbuchstaben verwendet werden, spielt keine Rolle, hier ist Groß- und Kleinbuchstabe gleichbedeutend, genauso wie bei einer E-Mail-Adresse)
man wird nach seiner E-Mail-Adresse gefragt, die Adresse mit Passwort muss bekannt sein, damit man später auf seine Homepage zugreifen kann
Wenn die Domain registriert ist (nach etwa 1 Stunde) kann man die Daten für den ftp abfragen,
Aufruf der Domain-Verwaltung: https://login.1und1.de/
Login: Domain-Namen z.B. Vorname-Nachname.de  Passwort (dasjenige, das man vorher bei der Anmeldung angegeben hat)
Nachschauen bei ftp hier ist der login und das Passwort angegeben


3. FTP Installieren:
Aufruf: http://www.coreftp.com/ dann den Free FTP Client Version 2.1 auf Download klicken > Dann das runtergeladene Programm ausführen: damit wir ftp installiert. >

4. FTP ausführen, um Dateien rauf- oder runterzuladen

Aufruf von Programm Core ftp light

 Parameter: > Site Name : Host /IP /URL: z.B. >Vorname-Nachname.de> Username: xxx wie angegeben Password: yyy wie angegeben in der Regel genauso wie das Passwort der Domain
dann Schalter <Adcanced> anklicken
dann links <Directory/Folder> >in die Zeile  <Remote Start Folder>  /  <Local Start Folder> den tatsächlichen Wert des Homepageverzeichnisse eingeben z.B. D:\Homepage eingeben (damit ist sichergestellt, dass bei jedem neuen Aufruf von ftp sofort die Homepage-Daten auf seinem PC in dem linken Fenster erscheinen)

Diese nur einmal einzugebenden Daten sind dann fest gespeichert (einschließlich passwort),
das nächste mal brauchst Du nach dem Aufruf von Core ftp light nur mehr den Button MeinName anklicken


5. Nach der erfolgreichen Verbindung:
die Dateien hochladen, z.B. index.html (die muss so heißen!, alle weiteren sind wahlfrei, sollten aber als Endung html oder htm haben bzw. jpg für die Bilddateien, zip für die gepackten Dateien, pdf für die Druckdateien)


6. Beachte
Es ist sinnvoll, auf Deinem PC die gleiche Hierachie aufzubauen, wie sie auch auf dem Server ist, das macht alles einfacher.
Nachdem ich die Hierachie auf dem Server bereits vorgegeben habe, also alle Deine Daten stehen unter Verzeichnis homepage
solltest Du auch ein Verzeichnis homepage  auf Deinem PC haben (entweder C oder D oder sonstwo) haben.

Du kannst jederzeit Unterverzeichnisse aufmachen, aber bitte synchron sowohl lokal als auch auf dem Server.

Wenn man beim ersten Aufruf des ftp die Serverseite  (die rechte Seite) sieht, sollte man überprüfen, ob bereits eine index.html da ist. Wenn ja, dann ist das in der Regel die Defaultseite, dass die Domain reserviert ist, die Seite sich noch im Aufbau befindet. Dann ist zu überprüfen, ob sonst noch weitere Verzeichnisse da sind. Normalerweise ist dies nicht der Fall. Es kann aber sein, dass ein Verzeichnis, das auf einen Webspace hindeutet,  da ist, weil früher mit anderen Tools als ftp die Homepage aufgebaut wurde. In diesem Fall sollte man auf dieses Verzeichnis gehen und dort die index.html anschauen und ggf. mit der neuen überschreiben bzw. in der vorhanden index.html einen Link für seine neuen Seiten einbauen. Hier würde ich dann empfehlen, den Inhalt, so wie er ist, stehen zu lassen und seine neuen Seiten in einem Unterverzeichnis zu plazieren. Dann sollte man ebenfalls auf der PC-Seite (linke Seite des ftp) dieses neue Verzeichnis aufbauen, damit man eine analoge Verzeichnisstruktur hat.

Erste Schritte mit NVU

NVU aufrufen

Text schreiben wie gewohnt bei jedem Textprogramm, also z.B.

erste Zeile: Homepage für Vornamen Nachname

Datei speichern: sofort nach dem Schreiben der Überschrift sollte man die Seite speichern. Also die Überschrift für die neue Homepageseite kopieren und dann bei NVU <Datei> <speichern unter> ins aufgehende Fenster Dateititel den Titel einfügen <rechte Maustaste> <einfügen> und abspeichern, in diesem Fall Dateinamen index.html in das Verzeichnis z.B. D:\Homepage (Dies ist deshalb wichtig, damit die weiter unten folgenden Links auch richtig relativ interpretiert werden:)

weitere Zeile: mein Steckbrief (das wird später eine Datei, die von hier aufrufen wird), siehe Link weiter unten

einfügen eines Fotos: das Foto hier im Beispiel ist so etwa 100 X 75 Pixel (bei Breitformat) oder 75 X 100 (bei Hochformat haben), wie das Bild zu verkleinern ist, siehe Paint Shop Pro weiter unten.
Natürlich kann das Bild auch größer sein, maximal würde ich sagen 800 X 600 bzw., 600 X 800, aber dann füllt es die ganze Bildschirmseite. Es ist nicht ratsam, das Originalformat der Digitalkamera (ca 2 MB) zu nehmen und dann dies bei NVU unter Eigenschaften und Größe anzupassen.

Tabelle: diese ist immer ratsam, wenn man eine bestimmte Struktur auf dem Bildschirm haben will. Man muss immer in Rechnung stellen, dass es bei der html-Programmierung keine Tabs, keine Leerraumzeichen (Spaces) gibt. Auch muss man wissen, dass es unbekannt ist, mit welchem Browser, welcher Bildschirmgröße, welcher Standardschrift etc. der unbekannte Leser die eigenen Seiten aufruft. Wenn immer möglich, sollte man die Feldgrößen bei den Tabellenposten nicht starr, also xx Pixel, definieren, viel flexibler ist es, einen Prozentsatz der Bildschirmgröße zu nehmen. Das ist bei Texten relativ einfach, bei schwierigeren Tabellen mit Bildern geht das natürlich nicht, wenn ein Tabellenfeld mit einem Bild mit 200 x 300 Pixel gefüllt ist, dann ist diese Größe fest.  Wenn die Größe aber z.B.2000 X 3000 Pixel ist, ist es evident, dass man dieses Feld nicht auf einmal anzeigen kann (es kommen dann die altbekannten Laufleiste von Windows.)

z.B. soll der Text rechts vom Bild stehen und ein weiterer Link darunter  
<Tabelle> <Einfügen> <Tabelle> nun z.B. 2 Posten nach rechts und 3 Posten nach unten markieren

Kurs Homepage erstellen
Heinz Wember mein Steckbrief
zu meiner Homepage Genealogie

das sieht dann so aus. Nun kann man die Tabelle entsprechend bearbeiten: den Rand entfernen (bei Tabelleneigenschaften <Tabelle> Ränder 0 Pixel statt 1), die einzelnen Felder vergrößern oder verkleinern (natürlich kann das Feld mit dem Foto nicht kleiner sein als das Foto selbst), sinnvoll ist auch, die Tabelle zu zentrieren (bei Tabelleneigenschaften: <Tabelle>  <Tabellenausrichtung> Mitte), dann kann man jeden Feldinhalt zentrieren (siehe Beispiel Foto und Link Genealogie)
Diese Datei speichern wir in das Verzeichnis Homepage mit den Namen index.html. Das Foto sollte (zumindest vorerst) auch in diesem Verzeichnis sein. Wenn die Links (Verweise) z.B. mein Steckbrief in dem gleichen Verzeichnis Homepage sind, ist es sinnvoll, eine relative Adressierung zu verwenden. Bei externen Links die volle Adresse angeben z.B.  http://wiki-de.genealogy.net/Bayerischer_Landesverein_f%C3%BCr_Familienkunde_e.V._(BLF).
Es ist für die Homepageerstellung immer praktisch, wenn man relativ adressiert, denn dann kann man seine im Entstehen begriffene Seite lokal auf seinem PC testen, natürlich geht das Testen der externen Links auch. Wie oben schon gesagt, sollte die Struktur der Verzeichnisse auf dem eigenen PC und auf dem Homepage-Server immer gleich sein.

Links (Verweise) und Anker erstellen: die Textstelle (oder auch eine Bilddatei) markieren , <Link> und dann die Linkadresse eingeben, in der Regel macht man es so, dass diese Seite ja bereits im Internet vorhanden ist, dann also mit Firefox diese Seite aufrufen und die Adresse markieren und kopieren (rechte Maustaste und <kopieren>), dann also wie oben gesagt, die Textstelle auf der zu erstellen Homepageseite markieren, dann <Link> und den Link einfügen mit rechter Maustaste und <einfügen> . Bei dem Linkbeispiel "mein Steckbrief" ist vorausgesetzt, dass diese Datei (Impressum.htm) ebenso im Verzeichnis z.B. D:\Homepage steht. Der Beispiellink "zu meiner Homepage" ist in diesem Fall ebenfalls ein relativer  Link, weil ich diese Dokumentation (Datei HPindex.html) ebenfalls in meinem Rootverzeichnis stehen habe.

Ein Anker ist ein anspringbares Markmal innerhalb einer Datei z.B. der Beginn eines Kapitels innerhalb der Datei. Natürlich muss zuerst der Anker gesetzt sein, bevor man dieses Merkmal anspringen kann. z.B. ist ein Anker für das nachfolgende Kapitel (Einführung in die Bildbearbeitung) gesetzt, wenn man auf den Link hierfür klickt, springt der Cursur auf diesen Anker. Vorgehensweise: den Beginn für den Ankel anklicken, ich habe bei diesem Beispiel Einf markiert, dann klick auf <Ziel>. Intern sieht es so aus: HPindex.html#Einf  d.h. die Datei und mit # verbunden der Wert des Ankers. Wenn das Ziel nicht relativ zur eigenen Datei angesprochen werden kann (das Ziel liegt z.B. auf einem anderen Server), dann muss natürlich die komplette Adresse angewendet werden, dieses Beispiel sieht dann so aus: http://www.heinz-wember.de/HPindex.html#Einf Die Auswirkung ist in diesem Fall natürlich dieselbe.
Wenn immer möglich verwendet man natürlich die relative Adressierung, denn dann ist es auch möglich, die zu bearbeitende Datei mit ihren Links lokal auf seinem eigenen PC zu testen. Später, wenn die Datei auf dem Server steht, funktioniert der Link in gleicher Weise.  Wie ganz oben schon erwähnt, sollte man ganz zu Anfang, bevor man überhaupt einen Text in seine aufzubauende Datei schreibt, die noch fast leere Datei mit seinem endgültigen Namen (im richtigen Verzeichnis) abspeichern, nur so ist das Programm NVU in der Lage, eine relative Adressierung vornehmen zu können.


Einführung in die Bildbearbeitung (Programm Paint Shop Pro):
Aufruf Paint Shop Pro 7 , <open> das Bild laden, <Selection> (das Rechteck links), Ausschneiden eines Bildteils, <edit> <copy> , mit diesem Ausschnitt ein neues Bild aufbauen: <File> <New> , nun die neue Größe definieren z.B. 100 X 75 Pixel, Bild einfügen: <Edit> <Paste> <as new Selection> nun das Bild entsprechend positionieren; wie die aktuellen Maße des Bildes sind, kann man ablesen, wenn man die Eigenschaften des Bildes anschaut (z.B. mit dem Explorer). Dann hat man mit dieser Maßnahme nun den richtigen Ausschnitt definiert, aber das kann dann noch nicht die richtige Größe sein, also das Bild mal abspeichern und dann wieder öffnen und nun verkleinern (vergrößern geht nicht, denn dann ist die Qualität in der Regel nicht mehr ausreichend), <Image> <Resize> und nun die Größe entsprechend definieren.


Erstellung einer Bildergalerie: Verwendung des Programms Ulead Photo Explorer 8.5 ESD,
Aufruf, <File> <go to> Verzeichnis für die Fotos eingeben  <Internet> <Qutput Web Thumnails>  <Output Options> Verzeichnis eingeben, wo die Bildergalerie erstellt werden soll z.B. D:\Homepage\BilderGalerie  <General> bei Standard Bildergröße z.B. 800 X 600 auswählen bei Header z.B. Bilder von Südtirol Footer z.B. erstellt von Heinz Wember <Thumb Nails>  z.B. <User defined> Dimensions 96 <Layout> Across 3  <Down> z.B. 3 (dies ist abhängig, wieviel Dokumentation man vorher als Description für die Fotos eingegeben hat,  <Images> <Automatically adjust image for optimal display>  <Text> z.B. Haken für Description  und Date picture was taken sowohl für Thumbnail page  und File name und Description for Image page. <Style/color> nach Belieben  <ok> nun wird die Galerie für die Vorschau und die einzelnen Bilder erstellt. Dieses ganze Verzeichnis dann in ein Unterverzeichnis z.B. BilderGalerie des Servers kopieren. (Wenn es sich um sehr viele Fotos handelt, ist es ratsam, zuerst alle Dateien dieses Verzeichnisses mit Winzip zu packen und dann nur diese gezippte Datei mit ftp raufkopieren.  Nun über die Domainverwaltung (https://login.1und1.de)  <Webspace Explorer>  ins Verzeichnis BilderGalerie gehen und dann die hochgeladene Datei entpacken (in genau dasselbe Verzeichnis, wo man auch die gepackte Datei hochgeladen hat.)
Nun auf der Homepage einen Link auf dieses Verzeichnis erstellen z.B. LINK auf  http://www.vorname-nachname.de/BilderGalerie . Damit wird automatisch die Datei index.html in diesem Verzeichnis aufgerufen. (Wie früher schon gesagt, muss in jedem Verzeichnis, das man nur mit dem Verzeichisnamen (also nicht mit einer speziellen html-Datei) aufruft, eine Datei mit dem Namen index.html vorhanden sein. Beispiel für so eine Bilder-Galerie.


Übliche Dateiformate bei der Homepage:
html, jpg oder gif, pdf, zip, mpeg, mp3 u.a. Während viele Dateitypen sofort richtig interpretiert werden (z.B. erkennt der Browser eine Datei pdf, so wird sofort der Acrobat-Reader aufgerufen und man kann diese pdf-Datei lesen bzw. auf seinem PC abspeichern. Das setzt natürlich voraus, dass die entsprechenden Programme auf dem eigenen PC installiert sind, wenn nicht, kann man diese unbekannten Dateien nur abspeichern.


Scannen Hier empfehle ich folgende Schritte:
  1. Bild einscannen und auf dem eigenen PC als jpg abspeichern
  2. Die gewonnene Grafikdatei mit ACDSee 9 Fotomanager bearbeiten <ändern> <Bearbeitungsmodes> <Bildrauschen> hierdurch kann man die Qualität oft erheblich verbessern besonders bei Zeitungsausschnitten
  3. Die aus 2 gewonnene Datei bearbeiten evt. Ausschnitt erstellen aber in jedem Fall Größe für die Internetseite anpassen (ich nehme im allgemeinen nur maximal 600 X 800 Pixel, dann ist die Datei in der Regel um 100 bis 150 kB groß)
  4. Die aus 3 gewonnene Datei in das Verzeichnis homepage (bzw. dem entsprechenden Unterverzeichnis) kopieren
  5. Mit NVU <Einfügen> <Grafik> die Bilddatei an der gewünschten Stelle einfügen

Der Forward Bis jetzt haben wir immer die Seiten, die wir programmiert haben, auf ein und denselben Server gelegt. Das ist auch das Normale. Wenn jemand aber mehrere Server hat, ist es sinnvoll, den html-Befehl Forward zu kennen bzw. anwenden zu können. Nachdem aber Betrüger, die z.B. dem Benutzer eine falsche Seite unterschieben, um an seine privaten Daten zu kommen, damit auch arbeiten, hat der Browser Firefox seit kurzem eine zusätzliche Sicherung eingebaut, die dem Benutzer anzeigt, dass nun ein Forward erfolgt, also das Zeigen einer Seite nicht von dem ursprünglich angegeben Server erfolgt, sondern nun von einem anderen Server, der theoretisch eine Seite von einem Betrüger sein kann. Deshalb kommt nun bei Firefox immer die Warnung "Firefox hat diese Webseite daran gehindert automatisch auf eine andere Webseite umzuleiten", das man mit <Erlauben> quittieren kann oder auch nicht. Wenn damit eine Seite kommt, die persönliche Daten abfrägt, ist höchste Vorsicht geboten. Natürlich sind die meisten Forwards kein Anzeichen von Betrug, denn viele benützen diesen Forward, um es sich oder dem Benutzer einfacher zu machen, wenn man mit mehreren Servern arbeitet.

Auf die Technik selbst, wie man das macht, will ich bewußt nicht eingehen, denn man kommt ganz gut auch ohne Forward aus, wenn man selbst nur seine Daten auf einem Server ablegt.
Viele Internet-Administratoren arbeiten  mit höherenen Sprachen, d.h. sie machen es nicht so, wie ich es in diesem Kurs mit NVU gezeigt habe. Auch aus diesem Grund sind Forwards nötig, z.B. wenn man mit php arbeitet.
Wenn man meine Seiten auf den Domains heinz-wember.de und wember.info genauer anschaut, wird man erkennen, warum es praktisch ist, mit diesem Forward zu arbeiten. Ich arbeite deshalb mit verschiedenen Providern, weil nicht alle gleich komfortabele Produkte anbieten und die komfortabelsten Produkte sind in der Regel nicht die billigsten.
Einem Anfänger empfehle ich aber, einen komfortablen Provider wie z.B. 1und1 zu nehmen, denn hier sind viele Funktionen angeboten, die es bei anderen Providern nicht gibt (siehe nächstes Kapitel).



Einzelne Funktionen des 1&1 Control Centers
<Domains> je nach Wahl des Vertrages kann man ein oder mehrere Subdomains und Inklusivdomains erstellen (beim billigsten Tarif ist jede zusätzliche Domain kostenpflichtig)

<E-Mail> hier kann man (für eine Privatperson praktisch beliebig viele) E-Mail-Adressen definieren, die jeweils nach dem @ den Domain-Namen haben.
Beispiel: <neu>  z.B. test  <Passwort> test1234 <Passwort wiederholen> (wenn man Virenschutz aktivieren anhakt, kostet es eine zusätzliche monatliche Gebühr) gegebenfalls Weiterleitung angeben hier im Beispiel nicht, <ok>
wenn man pop-server anklickt, bekommt man eine Anweisung, wie es bei z.B. Thunderbird einzustellen ist <logout>

Mailverkehr online:  Aufruf über Firefox von https://login.1und1.de <Webmailer login>  <Benutzername> z.B. test@heinz-wember.de <Passwort> z.B. test1234  die weitere Führung, wie man Mails abruft oder wegschickt, ist ähnlich wie bei web.de oder gmx.de, man kann auch ein Adressbuch anlegen (leider nicht über Import, sondern jede Adresse einzeln eingeben)

<1&1 Web Statistik> je nach Vertrag kann man einige unterschiedliche Auswertungen zu seiner Domain erstellen also <WebStatistik starten>
<CGI-Programme> hier hat man die Möglichkeit Counter (Besucherzähler)  für einige Seiten zu definieren oder auch ein (oder mehrere) Foren zu definieren. Ebenso Zeit-/Datumsanzeigen.
Beispiel Seitenzähler:  <CGI-Programme>  <neu> nun <counter>  es wird ein cgi-Skript erstellt z.B. <img src="/tinc?key=G2abcde">  dieses Skript wird kopiert und an die Stelle, wo der Zähler einscheinen soll, eingefügt, also bei NVU
<Ansicht> <Quelltext>  nun ans Ende der HTML-Datei gehen, wenn der Zähler ganz unten stehen soll (aber vor dem Befehl </body>) und einfügen (<rechte Maustaste>  ><einfügen>  Beispiel für einen Besucherzähler  Beispiel für Datum-/Zeitangaben  

<1&1 Webtool> hier sind nützliche Dienstprogramme verfügbar, um seine Seite zu optimieren. Sehr praktisch ist es auch, seine Seiten dahingehend zu testen, ob auch alle Links ok sind.

<FTP Zugang> hier kann man seinen login/passwort erfragen und ggf. weitere logins für z.B. Familienangehörige erstellen

<Geschütze Verzeichnisse> hier kann für bestimmte Personen einen Login/Passwort definieren und für diese Person Verzeichnisse zuordnen. Damit ist sichergestellt, dass kein Fremder diese Seite aufrufen kann, natürlich auch nicht die Suchmaschinen (z.B. Google).
Beispiel:<Geschützte Verzeichnisse>  <neuer Benutzer>  <Benutzername>  z.B. Benutzer <Passwort>  zB. Benutzer <Passwort wiederholen> <Beschreibung>  Text, ich gebe immer das Passwort hier noch einmal an, damit ich nachschauen kann, wenn ich es vergessen habe  <neues Verzeichnis> Benutzer <hinzufügen>  <speichern> , wenn man das Passwort nicht mehr kennt, kann man jederzeit ein neues generieren (ein vergebenes Passwort kann man nicht lesen!). Wenn man mit ftp auf dieses Verzeichnis zugreift, findet man eine Datei mit dem Namen .htaccess, die alles steuert (nicht löschen!) <logout> . Nun bei <Verzeichnisse> <Passwortschutz für neues Verzeichnis> im darunter stehenden Feld z.B. privat eingeben <Hinzufügen>  <speichern>.  Nach einer gewissen Zeit ist dieses neue Verzeichnis privat angelegt und auch mit Passwort geschützt. Alle Unterverzeichnisse, die später bei privat angelegt werden, haben dann dieselbe Security.
<WebspaceExplorer> sehr nützliches Programm, ich benutze es immer, wenn ich viele Dateien auf einmal auf den Server kopiere. In diesem Fall alle Dateien eines Verzeichnisses, die raufkopiert werden sollen, mit WinZip packen und dann nur diese eine WinZip-Datei mit ftp oder anders raufladen, anschließend mit WebspaceExplorer diese WinZip-Datei entpacken.

Eintragung in Suchmaschinen z.B. Google.de
 Aufruf http://www.google.de  <Über Google>  <Ihre URL hinzufügen/entfernen>  nun die zu übermittelnde URL in das entsprechende Feld reinkopieren dann den mehrstelligen Code in das Feld darunter abtippen (damit ist sichergestellt, dass kein automatisches Programm diese Prozedur durchführen kann.)  Dies dauert dann so etwa 14 Tage, bis der Link in Google ersichtlich ist.
Man sollte sich genau überlegen, welche Suchanfragen kommen könnten, wenn man Wert darauf legt, dass ein Unbekannter auch die eigene Seite findet. Diese möglichen Suchbegriffe sollten nun in der Homepage (also in der Seite index.html vorkommen), entweder sichtbar oder auch unsichtbar (unsichtbar ist ein Wort, wenn die Schriftfarbe und die Hintergrundfarbe gleich ist). Sichtbar wird man immer den eigenen Namen eingeben und ihn evt. unten auf jeder Seite eintippen. Sinnvoll ist auch, den Änderungsstand einzugeben, damit kann man selbst erkennen, wie alt eine Seite ist und ob es sinnvoll ist, die Seite zu überarbeiten. Außerdem ist auch damit ersichtlich, zu welchem Änderungsstand Google die Seite referenziert hat. Ich habe mir angewöhnt das Datum so zu schreiben: 05-Apr-2008 20:20 , das hat den Vorteil, dass auch fremde Länder, die das Datum anders schreiben als wir in Deutschland, sofort das Datum richtig interpretieren.
Wenn eine Seite weggefallen ist, und man Google veranlassen will, dass diese Seite aus dem Google-Verzeichnis gelöscht wird, soll man die Seite, die früher einmal existiert hat, auch mit der Funktion <Ihre URL hinzufürnen/entfernen> eintippen. Wenn Google nach ca 14 Tagen diese Seite neu referenzieren will, stellt es fest, dass es diese Seite gar nicht mehr gibt und damit wird der alte Inhalt gelöscht.
Wenn erst einmal die Homepage (die Datei index.html) bei Google referenziert ist, dann ist es nicht mehr notwendig, seine weiteren Seiten, die mit der Homepage verlinkt sind, in Google hinzuzufügen, das wird dann automatisch von Google gemacht. Natürlich ist die Besuchsfrequenz von Google sehr davon abhängig, wie häufig Benutzer eine spezielle Internet-Seite über Google sucht und findet. Durch spezielle Maßnahmen kann man verhindern, dass eine oder mehrere Homepageseiten in Google gezeigt werden, siehe hier.


Internetseiten teilweise ausdrucken
  Es kommt oft vor, dass man bestimmte Internetseiten teilweise ausdrucken will. Ein Beispiel: Sektion Augsburg>   Hier will man z.B. nur die Terminliste drucken. Vorgehensweise: mit Firefox die Seite im Quelltext anzeigen (<Ansicht> <Seitenquelltext anzeigen>), wichtig davon sind die Frames: 
<frameset cols="*,1024,*" 
frameborder="0" 
framespacing="0">
	<
frame name="frameRandL" src=
"/web/Rand/links.htm" scrolling="no" 
frameborder="no" noresize />
	<frameset rows="194, *" 
frameborder="0" 
framespacing="0">
	  <
frame name=
"frameTop" src="/web/wLayout/structure/top.php" scrolling="no" frameborder="no" noresize />
	  <frameset cols="142, *" frameborder="0" framespacing="0">
		<frame name="frameLeft" src="navigation/start.htm" scrolling="no" frameborder="no" noresize />
			  <frameset rows="160, *" frameborder="1" framespacing="0">
				<frame name="FrameHuetten" src="/web/start/huetten.php" scrolling="no" frameborder="no" noresize />
				<frame name="content" src="/web/start/start.php" scrolling="auto" frameborder="no" noresize />
			</frameset>
	  </frameset>
	</frameset>
	<
frame name="frameRandR" src="/web/Rand/rechts.htm" scrolling="no" frameborder="no" noresize />
</frameset>
<noframes>
Ohne html voll zu beherrschen erkennt man sofort, dass es auf die Datei /web/start/start.php ankommt. Lösung: nur diese Datei anzeigen, also http://www.alpenverein-augsburg.de/web/start/start.php. Nun hat man nur die Terminliste, die man über das Programm Firefox ausdrucken kann.

Zweites Beispiel:  Bei Seite http://www.wandertipp.de/regionen_bayern.htm kommt es z.B. darauf an, eine Bildschirmseite auszudrucken. Diesen Teil der Seite markieren und in NVU einfügen. Ergebnis ist dann hier zu sehen.


Bildschirmausdruck
Bildschirmausdruck  z.B. aus Google Earth der Rathausplatz in Augsburg, mit <STRG> <Druck> die aktuelle Bildschirmseite in den Zwischenspeicher, bei Paint Shop Pro 7 <File> <New>  Width 1300 Height 1000, <Edit> <Paste> <As new Selection> das Foto einfügen,  und mit <File> <Save Copy As> abspeichern, nun die Datei wieder laden mit <File> <Open> und >><Selection> einen passenden Ausschnitt vornehmen mit <Edit><Copy> in den Zwischenspeicher, <File> <New> die Maße entsprechend kleiner wählen (in meinem Beispiel 1270 X 700), die Ergebnisdatei ist etwa 800 KB groß, die man natürlich noch komprimieren sollte auf etwa 250 kB (<Options> <kompression factor> 20 Ergebnis


Spezielle Seitenvorschläge für Genealogen 

Manuelle Auswertung von Zugriffen auf die Seiten der eigenen Homepage, siehe hierzu ein Beispiel.

Verzeichnis von Adressen, welche Tools ich zur Homepage-Erstellung verwende.


Trennung von Inhalt und Form

1. Wenn man dies konsequent machen will, darf man die meisten HTML-Editoren, so auch NVU nicht verwenden, weil hier meistens Schrift-Formate eingebettet werden. Ich verwende den Editor Weaverslave 4.

2. Tabellen relativ definieren, z.B. Tabellenbreite statt 1600px oder so 100%, die Spalten dann ebenso also 20 % , 30%,  50%
das hat den Vorteil, dass sich die Seite nach der Bildschirmgröße richtet. Ich habe z.B. 1600 Pixel, andere haben 1024px oder noch weniger.
Natürlich geht das nur gut, wenn man Texte hat. Wenn man ein Bild eingefügt hat (z.B. ein Foto mit 184 Pixel Breite), dann kann die Spalte nicht kleiner als eben 184 px werden, aber nachdem das so klein ist, ist das kein Problem. Das kann man auch testen, wenn man das Fenster selbst kleiner machst, dann sieht man, wie sich die Schrift und die Spaltenbreite entsprechend ändert.

3. Alle Arten von Schriftbestimmungen komplett entfernen also z.B. der html-Befehl <span style="font-family: Arial;">Schrift </span>. Die Schrifttypen sollen nur in der CSS-Datei stehen.

4. Absolute Schriftgrößen, wie size=1 oder size=2 durch relative Schriftgrößendefinitionen ersetzen, also <big> zum größer machen, also auch <big><big> und dann natürlich </big></big>
es ist auch <small> und </small> möglich

5. Man kann unterschiedliche Hervorhebungen bei Überschriften dadurch definieren, dass man <h1> </h1>, bzw. <h2></h2>,  <h3> </h3> verwendet. Bei jeder Überschrift steht in der CSS-Datei, wie es sein soll, also Rothintergrund, Grünhintergrund, Schrift selbst schwarz oder blau etc.

6. Dran denken, dass es Tab und Space (=Zwischenraumzeichen) nicht gibt, das geht immer schief. Wenn man z.B. einen Abstand zwischen einem Foto und der Spalte danach haben will, dann muss man eine Spalte einfügen, die z.B. 10% Breite hat, aber worin nichts steht.

7. Hier sind die Details für die Format-Datei beschrieben.

8. Farbenübersicht

Besondere "Tricks" im Umfeld Homepage-Erstellung
E-Mail-Bild-Datei: Um zu vermeiden, dass man zu viele Spams bekommt, ist es ratsam, seine E-Mail-Adresse nicht "offen" (d.h. so, dass  jeder Roboter sie lesen kann) anzugeben. Ich habe mir angewöhnt, die Adresse als Bilddatei (jpg) zu erstellen und diese jpg-Datei dann auf dem Homepage anzugeben. z.B. HW-E-Mail.jpg
Dies ist leicht mit dem Programm Paint Shop Pro zu erstellen. Ausserdem kann man ja von Zeit zu Zeit seine öffentliche E-Mail-Adresse ändern. Auf den eigenen Internet-Seiten braucht man nur eine neue Bild-Datei mit der neuen Adresse erstellen und auf seine Domain raufkopieren. Alle Seiten (selbst wenn man viele 100 Seiten hat), rufen nur diese eine Datei auf, bei mir also  HW-E-Mail.jpg
Ausserdem ist es sinnvoll, mehrere E-Mail-Adressen selbst zu verwenden, eine öffentliche, die man auch bei der Anmeldung seiner Domain angeben muss, und dann auch eine private E-Mail, mit der man Mails an Freunde schickt, von denen man weiß, dass sie keine Spams verschicken.

HTML-Dokumentation: Spezielle Probleme, wenn z.B. NVU nicht so will, wie man es gerne möchte. 
Das ist dann schon Fortgeschrittenen vorbehalten, aber es ist nicht so schwer, wie man meinen könnte. Ich verwende dazu die Dokumentation von html
Ein Beispiel, wie man vorgehen könnte: Das Beispiel Buttons
Den Button kann man z.B. mit Paint Shop Pro erstellen und als button.gif speichern (oder man speichert sich einen schönen Button, den man auf einer anderen Homepage gefunden hat). Nun kann man bei den angegeben Parametern die Werte anpassen (width, height) und den entsprechenen html-Code einfügen. Hierzu schaltet man bei NVU von Vorschau auf Quelltext um (<Ansicht> <Quelltext>). Hier kann man nun direkt den html-Code einfügen z.B. von der Seite Buttons mittels <markieren> <kopieren> und dann in die passenden Zeile den Quelltext einfügen.
Es kann nicht schaden, wenn man anhand der html-Dokumentation die wichigsten html-Befehle lernt und dann bei Problemen im Quelltext analysiert, welcher spezielle html-Befehl Ärger macht. An einfachsten ist es dann, diese Sequenz ganz zu löschen und dann im Vorschau-Mode wieder das nun gelöschte Textfeld neu eingibt.

Höhere Weihen: php
 Wer sich das antun will (ich persönlich mache das nur in Ausnahmefällen), muss schon einiges Neues lernen, um dieses Tool sinnvoll nützen zu können. Dokumentation siehe hier.
Ein sehr schönes Beispiel hierfür ist die Seite DAV ASM  (Ich habe dieses kunstvolle Script nicht geschrieben, es stammt von Florian Schöppe.)  Das schöne an dieser Sprache und an NVU ist, dass man, wenn dieses Script mal fehlerfrei ist, den eigentlichen php-Code nicht mehr ändern muss, man ändert nur die Benutzer-Daten, die ohnehin in html geschrieben sind. Alles, was in php geschrieben ist, wird von NVU mitgenommen und es bleibt unverändert. In diesem Zusammenhang muss man auch My-SQL erwähnen. Dies ist eine SQL-Datenbank, die man leicht als Benutzer von 1&1 definieren kann und dann anwendet. Allerdings sollte man hier schon SQL einigermaßen beherrschen, sonst schafft man sich mehr Probleme als man löst.
Die meisten Daten bei der Seite ASM stehen in der SQL-Datenbank, wofür es für Benutzer einfache Pflegeroutinen gibt. Z.B. die Veranstaltungen sind alles Felder dieser SQL-DB, die dynamisch beim Aufruf der Seite als html generiert werden (das macht das php-Script, das hier dahintersteht). Ein Dokumentationsbeispiel, wie man eine Homepage mit PHP und MySQL erstellt steht hier.

Ein letzter Tipp
 Ich habe am meisten dadurch gelernt, dass ich  im Internet nach "schönen" Seiten gesucht habe und diese dann auf meine PC runtergeladen habe. Nun kann man mit NVU diese Seite analysieren und dadurch Beispiele für die eigene Homepage gewinnen.
weitere Links zu diesem Thema ,  HTML-Besonderheiten ,  Homepage erstellen ,  Tools  , Homepage Heinz Wember  
Display Pagerank
Änderungsstand: 22-Jun-2010 06:40
Heinz Wember