gismos homepage workshop

Mein kleiner Workshop richtet sich an WebDesign Neulinge, um ein bischen Licht ins Dunkle zu bringen. Man findet hier Tips zu HTML und allgemeinen Themen die oft ein großes Fragezeichen über den Kopf von Anfängern schweben lassen.
Da im Webdesign nicht immer nur mit "Point & Click" Editoren alles zu bewerkstelligen ist, habe ich hier auch die "Grund-Tags" der HTML Befehle aufgeführt.
Profi Webartisten können sich diese Seite sparen, da sie hier bestimmt nichts neues erfahren werden...

Der Aufbau der Seiten, Frames oder Standard ?:

Was sind Frames ?

Frames Seiten unterteilen den Bildschirm in verschiedene Abschnitte, die sich alle gesondert mit Linksprünge ansprechen lassen. Klicke ich zum Beispiel in einem Framefenster auf einen Link, kann ich die zu startende Seite in einem anderen Fenster anzeigen.
In den geöffneten Seiten blättere ich mit dem "Back" oder "Forward" Button meines Browsers.

Mit Frames kann ich meinem Besucher eine komfortable Betrachtungsart bieten. Wobei ich erwähnen möchte, daß nicht jeder diese Dinger liebt. Ich kann heute nur jedem Raten den Besuchern 2 verschiedene Betrachtungsarten anzubieten. Es ist zwar der doppelte Aufwand, aber so kann man versichert sein, daß jeder User zufrieden ist. Ganz wird es einen nie gelingen, aber es ist zumindest ein entgegenkommen. Als absoluter Neuling solltest Du dich aber zunächst auf eine Variante einigen, eine fertige, bestehende Webseite kann meistens ganz einfach in eine andere Version umgewandelt werden.

Standard Seiten sind Homepages die mit jedem Link die aufgerufene Hauptseite erneuern. "Man klickt sich durch die Seiten". Der Vorteil bei dieser Betrachtung ist, es kann jeder Browser damit umgehen. Der große Nachteil, wenn die Homepage größer als 5 Seiten wird, verliert der Besucher leicht den Überblick. Man muß auch bei dieser Art der Seitenerstellung darauf achten, auf jeder Seite einen "Back" Link zu der Übersicht der einzelnen Seiten (Home) zu setzen.

Es gibt eine Unmenge von angebotener Software, die uns beim Erstellen nützlich sind. Sie reichen von Freeware - sündteure Profi Werkzeugen. Zum ersten Online-Test würde ich eine kostengünstige Variante wählen, um auf Nummer sicher zu gehen ob mir das gestalten der Seiten überhaupt Spass macht.

Ich benötige auf jedenfall einen Texteditor (Notpade, Ultraedit usw.) oder einen HTML Texteditor. Zur Not tut es auch M$ Frontpage 2000... ;-) ACHTUNG: Finger weg von M$ Word 2000! Dieses Textverarbeitungsprogramm kann auch Webseiten abspeichern, liefert aber ein "Hunds-gemeines-Ergebnis" ... es baut das Layout in XML auf (eine neue HTML Erweiterung), die den Quellcode mit unnützen HTML TAGS deartig aufbläht (unnütze KB Größe) dass die Seiten schon fast unbrauchbar werden. Danke Billy Boy!

Anmerkung zu MS Frontpage 97 - 99:

Auch wenn jetzt viele Maulen werden: "Ich finde, diese Software ist der absoluter Mist...."

Begründung:

MS oder besser gesagt unser allgeliebter Billy-Boy hat sich da ein ganz netten Joke geleistet mit dieser Software (Version 97-99).
Er verwendet zusätzliche HTML Tags die nur der MS Explorer darstellen kann ! Auch entwickelt das Programm sehr komische Eigenheiten im Umgang. Online wenn man Sie mit Netscape betrachtet sieht man entweder gar nichts (wenn alle dubiosen Meta EQUIV Einträge im Dokumenten - Header bleiben), oder das Seiten Layout ist kompl. durcheinander ...

Ich frage mich nur bei den ganzen: " Warum wurde der HTML 3.2 (4.0) Standard entwickelt ?!"

Die Version 2000 (2001) hat "Gott sei Dank" wieder halbwegs normale Zustände und es lässt sich auch nicht schlecht arbeiten damit ...
Obwohl aber noch immer der Quellcode mit unnützen Tags sehr aufgebläht wird ... Mit wenigen Worten in Ösideutsch gesagt: " I MOAG AEHM NET" ;-) ...

Aber das ist wie gesagt MEINE Ansicht, wenn jemand gute Erfahrungen gemacht hat mit Frontpage oder ähnlicher SW, dann möchte ich sie ihm auch nicht ausreden.

Welche Software Apfelbesitzer verwenden können, kann ich leider nicht beantworten. Da ich mich mit "Obst" Software nicht gut auskenne ;-)

*) Netscape Communicator 4.*. 6.1 (Der Composer als HTML)
*) Windows Notpade oder ein anderer Text Editor (für das HTML Finetuning)
*) Ulead Photoimpact 6.0 od. Corel Photopaint (zur Bildbearbeitung)
*) Gif Constructionset oder Ulead Gifanimator (für Gifanimationen)
*) IrvanView 32 (Bildbetrachter und Konverter)
*) WS_FTP 6.0 LE (zum Uploaden der Seiten)

Diese Programme decken den gesamten Bedarf an Werkzeugen zur Seitenerstellung und das veröffentlichen der Seiten ab.
Alle oben aufgeführten Programme findet Ihr auf Zeitschriften CDs, TUCOWS oder auf den Herstellerseiten der Software.

Anmerkung:
Da ich immer wieder Post von Besuchern bekomme mit der Frage: "Was verwendest Du eigentlich für Werkzeuge?" - hier meine persönliche Hitliste:

- Macromedia Dreamweaver 4.0 (zur Festlegung des Layouts im HTML)
- Ultraedit 7.0 (HTML Finetuning)
- Allaire Homesite 4.5 (HTML Editor für den Alltagsgebrauch)
- Scribbler 2000 (für CSS, DHTML, JS)
- Adobe Photoshop 5.5 (6.0) + diverser Plugins (Grafik)
- Metacreation Painter 6.0 (Grafik - Freihandzeichnen)
- Macromedia Fireworks 4.0 (Grafik - Specialaufgaben)
- Adobe Illustrator 9.0 (Grafik - für das Interface Design & Flash)
- Corel Draw 9.0 (Grafik - Verwaltung der Bibliotheken)
- Macromedia Extrem 3D 2.0 (Grafik - 3D)
- Flash 5 (Shockwave)
- WS - FTP 6.0 (Server)
- MetaFormer 2000 (für die Meta Tags)

... und noch viele andere kleine Helferleins, die ich Euch aber hier ersparen möchte ...

Kapitel 3

Die HTML Programmiersprache:

Man kommt nicht hinweg beim Schreiben der Seiten ab und zu auch ins Getriebe zu fassen. Was nützt einen der beste Editor der sofort die fertigen Seiten darstellt, wenn plötzlich die Zeilensprünge nicht stimmen, Grafiken unerwünschte Rahmen aufweisen und die Schriftart nicht stimmt.

Hier die wichtigsten HTML 3.2 (4.0)Tags:
(Anm.: Ich habe hier in dieser Liste absichtlich CSS, DHTML usw. ausgeklammert, da es für "Anfänger" noch keinen Sinn ergibt sich mit diesen Dingen auch noch herumzuschlagen. Diese Dinge werden demnächst in einem "Fortgeschrittenen" Workshop gesondert behandelt)

3.1 Der Seitenaufbau einer einfachen Seite:

<HTML> ..... (steht am Beginn der Seite und weist den Browser an, Html Tags zu verarbeiten)

<HEAD> ......(im Headbereich stehen die Seiteninfos)

<TITLE>Testseite</TITLE> .... (Der Titel der Seite)

<META NAME="Author" CONTENT=":gismo">
<META NAME="Description" CONTENT="Allerlei diverses Zeugs ....">
<META NAME="KeyWords" CONTENT="Grafik, Fun, Gifanimationen, Chat, Workshop">
<META NAME="Siteinfo" CONTENT="Http://www.gismo.at">
<META NAME="Copyright" CONTENT="©2000 gismo - Vienna Power Connection">
<Meta http-equiv="Reply-To" content="vpc@gismo.at">
...( Diese Einträge benötigen Suchmaschinen, bei den "KeyWords" maximal nur 5 Begriffe nennen, in Reihenfolge der Wichtigkeit!)

Special Meta Einträge:
<META HTTP-EQUIV="refresh" CONTENT="gismo; URL=http://www.gismo.at"> ... (URL Weiterleitung zu einem anderen Server)
<Meta http-equiv="Pragma" content="no-cache"> ... (Die Daten werden nicht im Cache des Surfers gespeichert)
<meta http-equiv="Cache-Control" content="no-cache"> ... (Der Browser lädt keine Dateien aus dem Cach des Surfers)
<meta http-equiv="Window-target" content="_top"> ... (Lässt alle Seiten aus Frames ausbrechen)

</HEAD> ... ( Abschluss des Bereiches )

<BODY> .... ( Der Startpunkt des Seiteninhalt )

<BODY TEXT="#FFFF00" BGCOLOR="#000000" LINK="#8000FF" VLINK="#FFFF00" ALINK="#8000FF" BACKGROUND="space.gif">
..... (Die Seitenfarben : Standartschriftart , Hintergrundfarbe, Linktext, besuchter Link, aktiver Link, Hintergrundbild )

********
Hier kommt der Seiteninhalt hinein ....
*******

</BODY> ....*

</HTML> ....* (*Seitenabschluss)

Um umfangreichere Informationen zu HTML und CO zu erhalten, kommt man um gute Literatur nicht herum:
Klicke hier für geeignete HTML Literatur, die ich für Euch probegelesen habe

4.1.1 Farben werden in HTML (z.B. für die Links, Schrifarten usw.) in einem RGB Code angegeben, klick hier für den Farbcode Schlüssel von RGB Farben (z.B. ...="#FFF080" )

4.2 HTML Tags und ihre Funktion:

Jede eingefügte Zeile Text, Bilder und Anweisungen haben einen "Anfang" und einen "Endpunkt". Auf gut Deutsch heißt das, ich schließe meine Inhalte in Bereiche ein. Das erreiche ich mit dem Spitzklammer Befehl .
Ein Beispiel: steht am Beginn des Eintrages, am Ende. Man verwendet IMMER den gleichen Eintrag wie am Anfang und am Ende der Zeile , nur dort mit einem Schrägstrich. Es können auch mehrer Spitzklammer Einträge aneinandergereiht werden.

ZB:
Um bei einem Text die Schriftgrösse, Farbe, Schriftart, Fett, festzulegen, benützt man folgenden Eintrag der eine Textformat Änderung herbeiführt. (Anm. Es muss am Ende der Textes oder auch nur eines Teilbereiches mit dem " End - Tag " / "Schrägstrich" eingeschlossen werden.)

Das sieht dann in der Praxis so aus:

<CENTER>
Gratuliere, Du hast mich gefunden ...</CENTER>

4.3 Die HTML Tags im einzelnen:

<CENTER> </CENTER> ...... (Zentriert den Text, Bilder, Rahmen in die Mitte der Seite )

 .... ( Umschließt den Zeileninhalt und erzeigt einen einfachen Zeilenvorschub )

 ...( Ein Zeilenumbruch ) Anm: mit jedem Tag in Serie verschiebt man den Inhalt um eine Zeile zB: = ein 4facher Zeilensprung nach unten

<UL></UL> ..... ( Ist der Seiteneinzug ) Anm: mit jedem gesetzten Einzug Tag in Serie verschiebt man den Inhalt. zB: <UL><UL><UL><UL> </UL></UL></UL></UL> = ein 4facher Einzug

<HR> ..... ( Einen Balken, mit Prozentangabe der Stärke und Länge)
... Die Länge wird in Prozent oder Pixel angegeben (eine Seitenbreite = 100 %)
zB: <HR SIZE=2 WIDTH="50%"> oder <HR SIZE=2 WIDTH="500">
Achtung: Der Balken kann nicht eingefärbt werden und ist immer schwarz!

 ....... (Die Schriftfarbe)

 ..... (Die Größe, es sind + und - Einträge erlaubt, von +4 bis -4 )

 ....
(Die Schriftarten, je nachdem sie verfügbar sind im Benutzer PC des Besuchers, sie werden Schrittweise abgesucht. Findet der Browser
"Arial" nicht, nimmt er Helevetica usw... man kann so viele Schriftarten setzen wie man möchte, nur müssen sie mit einem Beistrich getrennt werden)

 ...... ( Kursiv )

 ..... ( Fett )

 ...... (Unterstreichen)

<A HREF="http://www.gismo.at">TEXT DES LINKS </A>
( Setzt einen Link zu einer externen Seite im WWW )

<A HREF="uebersicht.htm"> TEXT DES LINKS</A>
( Setzt einen Link in der eigenen Homepage )

<A HREF="XXX.htm" TARGET=_BLANK></A>
( Ein neues Browserfenster wird mit dieser Seite gestartet )

<IMG SRC="gremlin.gif" BORDER= 0 HEIGHT=57 WIDTH=116 ALT= "Beschreibung des Bildes">
(Ein Bild mit der Größe des Bildes in Pixel und der Bildname )
(Anm: Mit BORDER=0 erreiche ich bei "Linkbutton", dass es keinen Rahmen gibt. Mit einer Zahl die Stärke)

<TABLE BORDER=10 > <TR> <TD> </TD> </TR> </TABLE>
( Ein einfacher Tableborder mit der Rahmenstärke 10 )

<EMBED SRC="gangsta.mid" autostart=true loop=true volume=50 align="center" width=52 height=20 controls=smallconsole >
(Der Int. String für ein Midi File Netscape Player "Ausführung kleiner Player" )

<EMBED SRC="gangsta.mid" HEIGHT=61 WIDTH=146 ALIGN=RIGHT AUTOSTART=TRUE LOOP=TRUE VOLUME=25>
(Grosser Player )

<Bgsound src="gangsta.mid">
(Ist der Eintrag für den MS Explorer, der das File automatisch abspielt)

<FORM Method="action" action=http:// ...----- hier den URL String ----.....>
<INPUT type="submit" value=" --== Klick Hier ==--">
(Mit diesem Eintrag erzeuge ich einen dynamischen grauen FORM Button)

Das sind in groben Zügen die wichtigsten HTML Tags, mit denen man in der Regel durchkommt.

TIPPS:
Den teuflischsten Fehler beim Erstellen der grafischen Elemente (den fast alle Neulinge erliegen) ist, daß Bilder die in die Seite eingebracht werden meistens falsch benannt werden - im Internet sind andere Spielregeln als auf einer Festplatte ("die Macht der Gewohnheit")...:

Z.B. "Währung.gif" oder "Mein Foto.jpg" ... wird oft verwendet (Leerzeichen oder Sonderzeichen in den Bildbeschriftungen)... Im Windows Offlinebetrieb werden Sie im Browser dargestellt - nur online am Server nicht ....

Schreibt man sie ohne darauf zu achten trotzdem in eine HTML Seite, kann nur der "deutsche" M$ Exploder die Bilder anzeigen (auf einem NT Server) . Wenn man sie mit Netscape betrachtet gibt es nur das allzubekannte Kästchen mit dem Fragezeichen ....

Also was lernen wir daraus, man benennt seine Bilder: waehrung.gif, mein_foto.jpg !

Anm.: Wenn man davon ausgeht, dass ~ 40% der Surfer Netscape verwenden (auch wenn MS ständig was anderes erzählt), ist es nicht die beste Wahl die Seiten auf MS zu optimieren.

Faustregel: Läuft die Seite unter Netscape einwandfrei, funktioniert sie auch im M$ Exploder zu 98% - nur umgekehrt gibt es sehr oft Probleme ...

Die Endung beim Abspeichern der Seiten *.HTM oder *.HTML ist im Prinzip egal, nur sollte bei Verknüpfungen darauf geachtet werden dass sie richtig angegeben werden, sonst findet sie der Server nicht ....

Kapitel 4

Die Erstellung eines FRAME - sets für Internetseiten:

Beispiel eines 2er Framesets:

<HTML>
<head>
<TITLE>Have more fun with gismos page </TITLE>
<META NAME="Author" CONTENT=":gismo">
<META NAME="Description" CONTENT="Allerlei diverses Internet Zeugs ....">
<META NAME="KeyWords" CONTENT="Grafik, Fun, Gifanimationen, Chat, Info">
</head>

<frameset cols="22%,78%"> ..... (Die Frameaufteilung, muss zusammen 100% ergeben )

<frame name="links" src="ani1.htm"> ..... (Der NAME des Frame - Fensters und die HTM Seite die es beim Start Anzeigen soll)

<frame name="rechts" src="ani2.htm"> ..... (Der NAME des Frame - Fensters und die HTM Seite die es beim Start Anzeigen soll)

</frameset> ....(Das Ende der Frame Einträge)

<noframes></noframes>
<body>
</body>
</HTML>

Erweiterte HTML-TAGS für Frames :

Beispiele:

<frameset cols="10%,90%" BORDER=5 BORDERCOLOR="#0066CC">
( Erzeugt einen Frame - Rahmen in Stärke 5 und in blauer Farbe - Achtung: Färbige Rahmen sind nur in Netscape 3.0 sichtbar )

<frameset cols="200,*" BORDER=5 BORDERCOLOR="#0066CC">
( Statt "Prozent" kann man auch den Abstand in "Pixel" angeben und mit einem " * " den Rest der Seitenbreite definieren )
TIP! Die Pixel Angabe ist die bessere Variante ! Wenn die Homepage in verschiedene Auflösungen betrachtet wird, bleibt das Seiten Layout IMMER gleich !

<frameset cols="10%,40%,10%,40%" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0">
( Erzeugt ein Framefenster mit NICHT sichtbaren Frameborder und einem Bilderrahmen Effekt)

<frame name="Links" src="ani1.htm" marginheight="3" marginwidth="2" scrolling="auto" noresize>
( Erzeugt inerhalb des Framefensters einen Seitenabstand von "3" und eine Weite von "2", dass Fenster scrollt automatisch wenn der Bildschirm zu klein wird und der Framebalken läßt sich nicht verschieben )

Zulässige Einträge:
scrolling = yes, no, auto
resize = yes, no

Anm: Für das scrolling NIE "YES" verwenden, sondern immer nur "AUTO oder NO" !
(Immer wenn Ihr eine Frameseite im Netz findet wo ein seltsamer Scrollbalken unten quer in der Linkleiste ist , aber sich nicht scrollen lässt, dann wurde entweder "kein scrolling" eingetragen, oder eben der Eintrag: scrolling=yes !)

4.1 Sprungpunkte innerhalb einer Frameseite:

Wenn ich erreichen möchte, dass sich eine HTML Seite (oder Bild) in einem anderem Frame - Fenster öffnen soll, muss ich das mit dem TARGET Befehl lösen.

Ein solcher Eintrag sieht dann so aus:

<A HREF="gismoswo.htm" TARGET="rechts"> BESPREIBUNG DES LINKS</A>
( "rechts" ist der NAME des Framefensters der in der Frame Indexseite eingetragen ist )

Zur Erinnerung:
....
...<frameset cols="22%,78%">

<frame name="links" src="ani1.htm" marginheight=3 marginwidth=2 scrolling=auto resize=no>

<frame name="rechts" src="ani2.htm" marginheight=3 marginwidth=2 scrolling=auto resize=no>
..........
Setze ich "KEINEN TARGET Befehl", startet die Seite in diesem Fenster !

Weitere Möglichkeiten des TARGET Befehls:

TARGET="_blank" ( Öffnet ein neues Browser Fenster )

TARGET="_top" ( Öffnet die angewählte Seite auf volle Fenstergröße des aktuellen Fensters, man bricht aus der Frame Struktur aus)
TARGET="_parent" ( Spricht den direkt Parent - Frame innerhalb einer mit Frames augeteilten Seite an )

Ein Hinweis noch:

JEDES Frame - Fenster ist eine eigene *.HTM(L) Datei, sie muss gesondert geschrieben werden. Ausser ich verwende einen "Schmuckrahmen" mit farbigen Hintergrund, dann genügt für diese Frame - Abschnitte eine Datei.

Wenn ich eine bestehende Homepage auf "Framebetrieb" umrüßte, müssen die Seiten NICHT neu erstellt werden. Man braucht lediglich die Seitenformatierung falls erforderlich ändern. Aber da muss jeder für sich Experimente machen, um das beste Ergebnis zu erzielen.

Hier findest Du Tips von mir für "Fortgeschrittene" mit dem Umgang von Frames.

Kapitel 5

IMAGEMAPS:

Imagemaps sind dynamische Bilder. Das heißt, "anklickbare Bildelemente" die eine Aktion auslösen.

Für eine Imagemap benötigt Ihr ein *.gif oder *.jpg Bild, in dem man verschiedene Bereiche als Link auswählen kann. Das ganze funktioniert wie eine Landkarte mit Sprungpunkten und Koordinaten.

Hier ein Bsp. eines HTML-Eintrages einer Imagemap :

<IMG USEMAP="#Wohnung" SRC="Wohnung2.gif" ALT="[ Loading Image Navigation Map ]" BORDER=0 HEIGHT=585 WIDTH=500 ALIGN=CENTER>
<MAP NAME="Wohnung">
<AREA SHAPE=RECT COORDS="15, 37,159, 92" HREF="nutzlich.htm">
<AREA SHAPE=RECT COORDS="174, 41,348, 89" HREF="Gismoswo.htm">
<AREA SHAPE=RECT COORDS="371, 12,487, 193" HREF="Hanl.htm">
<AREA SHAPE=RECT COORDS="123, 106,349, 194" HREF="greent.htm">
<AREA SHAPE=RECT COORDS="301, 209,488, 303" HREF="freegif.htm" >
<AREA SHAPE=RECT COORDS="20, 106,105, 245" HREF="modell.htm" >
<AREA SHAPE=RECT COORDS="124, 214,281, 344" HREF="Unddasbi.htm">
<AREA SHAPE=RECT COORDS="18, 262,104, 344" HREF="Jascript.htm" >
<AREA SHAPE=RECT COORDS="195, 365,277, 509" HREF="linkp.htm">
<AREA SHAPE=RECT COORDS="194, 525,400, 571" HREF="Mailto:vpc@gismo.at"></MAP>

Wie Ihr ganz leicht selbst erkennen könnt, herrscht bei den Einträgen der blanke Chaos.
Man benötigt also eine Software dafür, mit der man das ganze einfacher bewerkstelligen kann.
Um Imagemaps zu Erstellen, wird in den meisten HTML Editoren eine Möglichkeit dazu angeboten. Falls nicht, seht Euch am Shareware (Freeware) Markt um.

Kapitel 6

Diverse Tips & Tricks:

6.1 Der Inhalt & Outfit

Das größte Problem bei der Erstellung einer Privaten Homepage ist der Inhalt.
Was möchte ich den Leutchen die meine Seiten besuchen bieten und mitteilen ?
Also vorher überlegen und "DANN" loslegen!
Ein ständiges "Under Construction" auf dem Deckblatt ist auch nicht gerade einladend.
Ist einmal ein passables Grundgerüsst vorhanden, kann ich jederzeit die HP erweitern, dann kann ich mir die Baustellen - Schilder schenken ...

Den Hintergrund "Wallpaper" kann man entweder einfärbig wählen, oder mit kleinen "*.gif od. *.jpg" Bilder gekachelt hinterlegen.

ACHTUNG: Gif Bilder nicht im Interleace Verfahren und JPG Bilder mit Progressive-jpg verwenden, Browser der 3.0 Generation haben Probleme damit!

Wie komme ich nun zu diesen "GIF´s oder JPGs".
Jeder kennt doch gekachelte "Windows Hintergrundbilder - *.Bmp", die lassen sich prima in einem Grafikprogramm in dieses Format umwandeln. Es gibt auch Homepages im Internet, die nur gezielt Wallpaper für Homepages kostenlos anbieten. Selbstverständlich kann ich auch eingescannte Fotos oder Bildausschnitte. Man sollte nur eventuelle Copyrights beachten und das die Dateien nicht zu groß sind, sonst dauert das Laden der Seiten viel zu lange.

Weiters begebe ich mich auf die Suche nach "Icons", "Buttons" "Lines" u.s.w. Am besten kauft man sich dazu Zeitschriften wo CD - ROM´s beigepackt sind, die kostenloses Zubehör anbieten. Oder man wählt auch wieder den Weg des downloadens im WWW auf einschlägigen Freeware Seiten.
Wer ein tolles Grafikprogramm sein eigen nennt, kann sich diese Dinge natürlich auch selbst fertigen.

Zur Erstellung und Abspeicherung der HTML Seiten und Grafiken ist es ratsam ein eigenes Verzeichnis (Ordner) auf der Festplatte einzurichten. Dann kann ich mir das Mitschreiben der verwendeten Files ersparen und es kann keine Datei vergessen werden hochzuladen. Falles es der Server erlaubt, kann auch mit Untermenüs (Ordner) gearbeitet werden.

Solltet Ihr Tips zum Erwerb von Grafiksoftware & Plugins benötigt, dann geht auf meine Seite GRAFIK DESIGN.

6.2 "JAVA, JAVA Script, DHTML, FLASH"

Hier handelt es sich um eine Programmiersprache die eine Web-Seite um Features erweitert.

JAVA:
JAVA ist eine art "externes" Programm das in einem Browserfenster lauffähig wird. Man nennt es auch JAVA APPLET. Diese Files sind leicht erkennbar an der Endung *.class. Um ein APPLET zum Laufen zu bringen benötigt man den "PARAM" HTML Befehl. Welcher PARAM Befehle ein APPLET benötigt, entnehmt der jeweiligen Dokumentation des angebotenen und verwendeten APPLETS.

JAVA SCRIPT, DHTML:
Mit Java Script oder DHTML, dass eine eigene HTML (Text) Programmiersprache ist, kann ich z.B. Aktionen auslösen (Buttons die sich beim Drücken verändern), Laufbänder mit Textinhalt erzeugen, Animationen laufen lassen, Hilfstools einsetzen, kleine Effekte auf der HTML Seite Erzeugen usw.
Das ganze geschieht mit "Scripts". In die HTML Seite wird dann der Programmiercode geschrieben.
Um fertige Scripts zu bekommen, suche am besten im Internet nach einschlägigen Freeware Angeboten oder Du holst dir Beispiele aus meinen Java Script & DHTML Seiten.

FLASH:
Flash hat mit HTML nichts zu tun, es ist eine Vektor-Grafik orientierte Animationprogrammierung. Besser gesagt, die "HIGH-END" Lösung für Web-Sites die aber zur Darstellung ein eigens Plugin benötigt. Die Erstellung ist sehr zeitaufwendig und teilweise sehr mühsam, darum hat sich dieser Standard bedingt auch durch langsame Internet Verbindungen noch nicht durchgesetzt. Aber ich bin mir sicher, dass spätestens in 3 Jahren 90% der Webseiten mit FLASH laufen - die Optik der Seiten ist teilweise total überragend (WOW Effekt garantiert....)

6.3 Der erste Testlauf "Offline" im Browser.

Nachdem ich mein Kunstwerk fertig gestellt habe, mache ich einen Testlauf im Browser.
Tip von mir: Besorgt Euch verschiedene Browser, den jeder Anbieter stellt die Seiten anders dar. Wenn meine Seiten für Netscape ausgerichtet sind, stimmen meistens die Seiteneinzüge im M$ Exploder nicht.
Man braucht ein bißchen Fingerspitzengefühl um die Seiten so auszurichten, dass sie gut und vor allem gleich dargestellt werden.

Die Auflösung:
Wenn Ihr einen 17" (oder höher) Bildschirm Euer eigen nennt, ist auch noch zu beachten das Ihr die Seiten so aufteilt, dass sie auch noch mit einem 15" Bildschirm gut dargestellt werden. Zum Testen stellt einfach die Bildschirmauflösung im Betriebsystem kurz um.

Faustregeln:
21" wird mit mit einer Auflösung von 1280x* Pixel verwendet.
17" - 19" wird mit einer 1024x768 Pixel Auflösung verwendet.
15" wird mit 800x600 Pixel verwendet.
14" wird mit 640x480 Pixel verwendet.

Wobei die Pixelbreite nicht die freie Fläche des Browserfensters entspricht, am besten rechnet man immer -35 Pixel, dann ist man auf der sicheren Seite.

Sinnvoll ist auch vor dem ersten Upload, eure Seiten mit einem einfachen Text Editor (oder HTML Validator) nach falschen Einträgen, Umlaute "Ä,Ü,Ö usw." oder Werbungen von Shareware Programmen zu untersuchen und gegebenenfalls zu löschen.
(wenn Umlaute im Quelltext stehen, werden Sie von engl. Browsern nicht angezeigt!)
Manche Editor wie z.B Frontpage und Freewaretools hinterlassen oft unnütze Einträge.