Home
Home

 

Top im Web BASIC

» BASIC Home
» Fragen/Antworten

 

Top im Web BASIC - eine Webpublishing-Einführung
Kurs der Universität Bern


Teil 1

Das Ziel dieses Minilehrgangs in 16 Teilen ist, anhand einer Online-Anleitung mit Tips und Tricks eine einfache Website mit Links sowie einigen Grafiken oder Fotos zu erstellen und dabei gleich die Grundprinzipien von HTML begriffen zu haben.

An sich kann man eine Website auch auf tausend Franken teuren speziellen Web-Editoren aufbauen und mit allen möglichen Gadgets ausstatten. Gute Programme sind zum Beispiel Macromedia Dreamweaver (arbeitet sehr gut mit Fireworks zusammen; spart viel Zeit!) oder Adobe GoLive (aus dem selben Hause wie der gute alte Photoshop). Nach der Fusion der beiden Firmen im Frühjahr 2005 wird sich hier wohl einiges ändern.

Wir beschränken uns in diesem Kurs auf jene Möglichkeiten, die alle standardmässig auf ihren eigenen Compis oder in den Pools an der Uni zur Verfügung haben - auch aus Zeitgründen.

Zudem kann man mit dem Zusammenspiel aus Gratis-Tools wie Composer (standardmässig in Netscape oder Mozilla eingebaut) und Notepad (einfacher Texteditor, in jedem Windows vorhanden) bereits einiges herausholen, wenn man auch zugeben muss, dass "State of the Art Design" seit einiger Zeit mit diesen Programmen nicht mehr möglich ist. Aber wir wollen ja auch keinen Avantgarde-Deisgn-Kurs abhalten in diesem Rahmen.

Dynamische Websites, die Scriptsprachen und Datenbanken kombinieren (PHP / mySQL, z.B. im Rahmen eines Content Management Systems, auch CMS genannt), sind heute Standard. Wer sich dafür interessiert: Am Ende des Kurses stehen ein paar Hinweise dazu.

Drum sei an dieser Stelle eindringlich vor allzu hohen Erwartungen gewarnt: Webpublishing ist komplex und nicht in einem Tag gelernt. Wir können hier bestenfalls ein Gefühl dafür bekommen, wie Websites aufegbaut sind, wie man überhaupt Seiten ins Netz stellt - und eine sehr einfache Page bauen. Für anspruchsvolle Grafik und Effekte bleibt nur sehr beschränkt Raum. Fragen kostet dennoch nichts - auch wenn die Antwort erfahrungsgtemäss oft lautet "Sorry, das ist zu komplex". Dies ist klar ein EinsteigerInnen-Kurs für Leute ohne Erfahrung.

Aber: Wen es "packt" - Profitools wie Dreamweaver kosten für Studierende nicht die Welt, im Gegenteil. Wer an einem Intensivkurs für Dreamweaver interessiert ist, soll doch - Achtung, Eigenwerbung - hier klicken. Dieser Lehrgang der Volkshochschule wird 2x im Jahr abgehalten und kostet etwas über 1000 Franken für 12 Kursabende. Auch für diesen Kurs gibts einen Online-Lehrgang; dafür wird aber ausdrücklich kein Support in diesem "BASIC"-Kurs geboten. "Top im Web ADVANCED" des ikmb der Uni Bern ist ähnlich gelagert wie der Volkshochschulkurs. ikmb-Studierende, die "Surfen ohne Taucher" nicht besucht haben, können sich nach "Top im Web BASIC" auch noch für "ADVANCED" anmelden, es hat noch wenige Plätze.

Zurück aber nun zum einfacheren Design. Vorab etwas ganz Zentrales, was gerade für EinsteigerInnen manchmal Probleme bereitet. Die Arbeit mit Webseiten ist auf zwei Arten möglich:

  • 1. Man erstellt eine Seite mit dem Netscape Composer (etwa so wie ein gewöhnliches Dokument im Word), speichert es als Datei mit der Endung .htm ab und schaut sich in einem Browser an, wie sie aussieht. Der sogenannte Quellcode ("HTML-Tags") wird vom Composer im Hintergrund erstellt und bleibt für Euch unsichtbar.

  • 2. Man programmiert "von Hand" und schreibt den Seiteninhalt zuammen mit den HTML-Codes (welche eben definieren, die der Inhalt auszusehen hat) in einen Texteditor. Diese reine Text-Datei speichert man dann mit der Endung .htm ab und prüft in einem Browser, wie sie aussieht.
Oftmals spielen beide Möglichkeiten zusammen - denn der Composer (ein sogenannter WYSIWYG-HTML-Editor, What You See Is What You Get bzw. eben Not Always) hat manchmal so seine Macken hat und zeigt nicht 1:1 das, was der Browser nachher darstellt. Praktisch ist, dass der Netscape Composer (sofern man einen zur Verfügung hat - man kann ihn hier für zu Hause downloaden) einen eingebauten Editor für HTML-Quellcode eingebaut hat. So hat man also "Texteditor" und WYSIWYG-Editor ("grafischer Editor") in einem!
  • Es ist immer wichtig, die Seite abzuspeichern und danach in einem Browser anzuschauen! - Also: ständig ein Browserfenster offenhalten, um zu schauen, wie die fertige Seite aussieht. Leider schaffen es nicht mal Profi-Programme, eine Page so darzustellen wie sie nachher im Browser aussieht.

  • Am besten prüft man eine Seite mit verschiedenen Browsern, da alle ein Design etwas anders darstellen. Am verbreitetsten sind Internet Explorer, Firefox, Netscape und Mozilla (Letztere sind eigentlich Netscape-Derivate). Eine Seite prüfen kann man, indem man sie mittels Datei/öffnen im Browser öffnet (ähnlich also wie eine DOC-Datei im Word).

  • Wichtig ist also, zwischen WYSIWYG- (Grafik-) und HTML-Editor-Modus zu unterscheiden! Man kann die Seite in beiden Modi bearbeiten - wobei AnfängerInnen den Grafikmodus vorziehen sollten.

Webpublishing lernt man an am besten durch Try and Error - und vor allem Spicken! Viele Seitengrundgerüste sind geklaut und nachher verfeinert worden. Das Prinzip von HTML begreift man ebenfalls am schnellsten, wenn man eine Page unter die Lupe nimmt und schaut, welche Tags was bewirken.

Öffnet mal den Internet Explorer - und schaut euch schnell den Quelltext einer einfachen Beispielseite an (der Link folgt gleich, weiter unten): Merkt Euch kurz, wie die Site aussieht und geht dann auf Ansicht / Quelltext anzeigen (im Netscape auf View / Page Source bzw. Ansicht / Quelltext bzw. Shortcut Ctrl+U).

Versucht, Euch 5 Minuten lang im Dschungel der Tags zurechtzufinden und stellt fest, welche Tags welchen Einfluss auf die Darstellung haben, indem ihr zwischen Quellcode und Browser-Seite hin und her wechselt. Wenn Ihr Fragen habt, ruft mich einfach. 

Hier ist die Beispielseite (eine einfache Testseite); sie wird in einem neuen Fenster geöffnet. Schliesst dieses nach dem Betrachten wieder und kehrt hierhin zurück!


Voilà, hier sind wir wieder. Falls alles klar ist, seid Ihr nun bereit für Eure ersten eigenen Website-Programmierungen... neugierig? Hier gehts weiter...


Zur Hauptseite zurück gehts hier.



webpublishing | kurse+texte | fotos+webcam | sounds
blog | yakome'tt | projekte | kontakt

last update 12.05.2005 1:56 © jacomet.ch 1999-2005