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. SFTP
Installieren:
Es gibt zwei
unterschiedliche File Transfer Programme: ftp und sftp, wobei der
secure ftp vorzuziehen ist. Beim ftp werden die Daten (auch das
Passwort) unverschlüsselt übertragen wird, diese Daten
könne Hacker mit geeigneten Mitteln sehen und dann kann der Hacker
die eigene Homepage manipolieren (das ist mir schon einmal passiert, es
betraf damals die Homepage der Sektion Augsburg, die ich von 1999-2009
pflegte).
4. Details zum Installieren von SFTP: https://heinz-wember.de/dokus/html/sftp.html
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
sftp 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 |
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:
Bild einscannen und auf dem eigenen PC als jpg abspeichern
Die gewonnene Grafikdatei mit ACDSee 9 Fotomanager bearbeiten <ändern> <Bearbeitungsmodes> <Bildrauschen> hierdurch kann man die Qualität oft erheblich verbessern besonders bei Zeitungsausschnitten
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ß)
Die aus 3 gewonnene Datei in das Verzeichnis homepage (bzw. dem entsprechenden Unterverzeichnis) kopieren
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(at)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.
Internetseiten teilweise ausdrucken
Es
kommt oft vor, dass man bestimmte Internetseiten teilweise ausdrucken
will. Ein Beispiel: Diese
Seite
Nachdem die Dokumentationsseite in
Fenstertechnik programmiert ist, ist es sinnvoll, den Link auf diese
Seite so auszuführern:
Nachdem die Hauptseite aufgerufen
wurde: http://heinz-wember.de/dokus/index.html
auf
den entsprechenden Link gehen, "Rechte Maustaste" "Links
in einem privaten Fenster öffnen" Nun steht nur das
Hauptfenster zur Verfügung, man kann normal aus dem Brower die
Druckfunktion verwenden.
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.
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.
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 wichtigsten
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 auch nicht generell), 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.
zur Übersicht Dokumentationen , HTML-Besonderheiten , Homepage erstellen , Tools , Homepage Heinz Wember
Änderungsstand: 17-Aug-2017 Upd 26-Aug-2020
Heinz
Wember