Websites erstellen Fortbildung am 21. Juli 13:30 16:00 Uhr. bei hitzefrei Beginn nach Absprache

Websites erstellen Fortbildung am 21. Juli 13:30 16:00 Uhr bei hitzefrei Beginn nach Absprache Lerninhalt: Lerninhalte Entwicklung des Internets/Webs HTML weitere Entwicklung Seitenerstellung mit Vorüberlegungen Speicherplatz und Hosting Übertragung der Dateien Webseiten mit Weebly Evelyn Frank 1 16.07.2010

I. Die Entwicklung des Internets und des WWW Ursprung des heutigen Internets war das ARPANet. Dieses war ein Netzwerk von Computern in Händen des amerikanischen Militärs. Gegründet wurde das ARPANET im Jahre 1958. Das US-Verteidigungsministerium richtete im Auftrage des damaligen US-Präsidenten Dwight D. Eisenhower eine Arbeitsgruppe namens "ARPA" ("Advanced Research Projects Agency") ein. Diese hatte den offiziellen Auftrag, nach neuen Ideen und Technologien zu forschen und forschen zu lassen. Der erste Schritt der ARPA in die Informationstechnologie wurde 1962 mit der Gründung der ARPA-Abteilung "Command and Control" gelegt, dessen Leitung von Joseph Carl Robnett Licklider übernommen wurde. Licklider erkannte schon frühzeitig, dass Computer nicht nur zu rein wissenschaftlichen und militärischen Zwecken genutzt werden sollten, sondern in Zukunft dank interaktiver und intuitiver Bedienung immer größere Verbreitung finden würden. Fast zur gleichen Zeit arbeitete 1964 ein Wissenschaftler namens Paul Baran, Mitarbeiter der Firma RAND Corporation, für die US Air Force an einer neuartigen Netzwerkstruktur. Die Idee, die Paul Baran hatte, war ein maschendrahtartiges Gebilde mit redundanten Verbindungen zwischen den einzelnen Knoten. Mit Hilfe eines paketorientierten Übertragungsprotokolls konnten nun Daten zwischen den Knoten im Idealfall auf mehreren Wegen zum Ziel kommen, was die Chance erhöhte, dass im Ernstfall Knoten auch nach Ausfall mehrerer einzelner Verbindungen erreichbar blieben. Diese Idee wurde von der ARPA übernommen. Nach langen Überredungen stellte man Larry Roberts ein. Roberts war ein besessenes Computergenie und begann sogleich mit der Planung des Projekts. Roberts wollte zunächst vier Forschungsinstitute und Universitäten im Westen der USA miteinander verbinden, die allesamt unterschiedliche Großrechner einsetzten. Da so gut wie keine grundsätzlichen Standards zum Datenaustausch zwischen Großrechner existierten, waren nicht nur Neuentwicklungen für Netzwerkprotokolle gefragt, sondern auch ganze Definitionen für einheitliche Schnittstellen. Die ARPA schrieb deshalb das Projekt Ende 1968 aus und schickte die Ausschreibungsunterlagen an 140 Unternehmen in der Computerbranche, darunter auch so berühmte Namen wie IBM. Die Großrechner wurden nun nicht mehr direkt miteinander verbunden, sondern man schloss sie lokal an einem eigenständigen Rechner an, dem so genannten IMP. Diese Rechner wurden nun untereinander vernetzt. Jeder IMP stückelte die zu übertragende Information in kleine Pakete auf, versah jedes Paket mit Absender- und Empfängeradresse. Anhand von Routing-Tabellen konnten diese Pakete dann übertragen werden. Evelyn Frank 2 16.07.2010

Mitte der siebziger Jahre entstanden dank des Computerbooms an immer mehr Universitäten in den USA eigene computerwissenschaftliche Abteilungen. Während das ARPANet immer weiter wuchs und sich verbreitete, blieben die Universitäten in diesem Wachstum weitgehend außen vor. Von den rund 120 Universitäten mit Informatikabteilungen hatten 1979 nur 15 einen Zugang zum ARPANet, das zu dem Zeitpunkt 61 Knoten hatte. Im Mai 1979 trafen sich Vertreter von sieben US-Universitäten unter der Leitung von Larry Landweber, Leiter der Informatikfakultät an der University of Wisconsin, in Madison, um über die Einrichtung eines neuen Netzwerks, dem CSNet ("Computer Sciences Network") zu beraten. Nach diesem Treffen, an dem auch Bob Kahn als offizieller Berater der DARPA teilnahm, einigte man sich darauf, ein eigenes, vom ARPANet unabhängiges Netzwerk zu planen und allen computerwissenschaftlichen Abteilungen von Universitäten und Unternehmen offen zu halten. Die endgültige Planung des CSNet wurde von Landwebers Team im Sommer 1980 vorgestellt. Markantester Unterschied des CSNet zum ARPANet war die deutliche Vereinfachung des Netzaufbaus. 1985 verband das CSNet fast alle Universitäten mit computerwissenschaftlichen Abteilungen und viele private Forschungseinrichtungen miteinander. Am 1. Januar 1983 wurde das ARPANet auf das damals neue Übertragungsprotokoll TCP/IP umgestellt. TCP/IP war ein bahnbrechendes Protokoll, welches die Adressierung von theoretisch über 4 Milliarden Rechnern im Netzwerk und die hierarchische Delegation von Routing-Einstellungen ermöglichte. Die 80er Jahre des 20. Jahrhunderts waren eine Zeit, in der in den USA viele Netze etabliert wurden, die zunächst keine Verbindung zum CSNet oder zu anderen Netzen hatten, sondern zunächst rein intern Rechner miteinander verbanden. Auf diese Weise entstanden früh einige Netzwerke. Die Computertechnik entwickelte sich dank des 1981 vorgestellten Personal Computer und der rasend wachsenden Computerindustrie schlagartig weiter und in immer mehr Bereichen des Lebens wurden Computer ein unentbehrliches Werkzeug. Dieser Umstand ging auch an der NSF nicht spurlos vorüber, da an US-Universitäten immer mehr nicht-computerwissenschaftliche Abteilungen ebenfalls immer lauter nach einen Netzzugang riefen. Wissenschaftler, die nicht an Informatikfakultäten arbeiteten, dennoch aber Rechenleistung benötigten, beispielsweise Physiker und Astronomen, mussten teilweise ins Ausland reisen, um dort an Supercomputern arbeiten zu können, da die Supercomputer im eigenen Land nur über das CSNet erreichbar waren. Die NSF war zwar bereit, federführend an so einem Wissenschaftsnetz mitzuwirken, signalisierte jedoch schon frühzeitig, dass für den Aufbau eines weiteren Netzwerks keine Finanzmittel bereitstehen würden. Der NSF kam hierbei der Umstand zu Hilfe, dass 1985 in den USA fünf so genannte Supercomputerzentren eingerichtet wurden. Sie erklärte sich bereit, diese Zentren miteinander zu verbinden und somit für das neue Netz ein "Rückgrat" zu bilden - das Wort Backbone war in diesem Zusammenhang geboren. Evelyn Frank 3 16.07.2010

Die NSF verfolgte beim Aufbau des NSFNet ein Konzept, wie es das spätere Internet prägen sollte: Anstatt jeder einzelnen Forschungseinrichtung einen Zugang zu bezahlen, finanzierte sie lediglich den Aufbau des Backbones und bot akademischen Einrichtungen einer Region an, sie an das NSFNet anzuschließen, wenn diese ein eigenes Netzwerk untereinander einrichteten. Dieses Netzwerk wurde dann an das NSFNet-Backbone angeschlossen. Auf diese Weise entstanden viele regionale Netzwerke. Schon von vorneherein war es ein Ziel des NSFNet, das Netzwerk gegenüber kommerziellen Anbietern zu öffnen. Interessierte Institutionen sollten die benötigte Infrastruktur für eine Anbindung an das NSFNet so direkt bei kommerziellen Unternehmen einkaufen und die NSF stellte den Institutionen hierzu eigene Etats bereit. Erheblich größere Probleme kamen auf, als das NSFNet erste Verbindungen zum ARPANet bekam. Da viele Einrichtungen des US-Militärs am ARPANet angeschlossen waren, machten sich Verantwortliche im Pentagon Gedanken darüber, wie diese vor Angriffen und Einbruchsversuchen geschützt werden konnte. Letztendlich kam man 1983 zu dem Entschluss, die militärischen Einrichtungen komplett vom ARPANet abzukoppeln und in einem eigenen, nichtöffentlichen Netzwerk zu organisieren, dem MILNet. Im Laufe der Jahre wurde das ARPANet mit seinem Backbone immer unbedeutender, da der Großteil des Datenverkehrs inzwischen über das NSFNet abgewickelt wurde. So wurden bis Ende 1989 alle IMP, die am ARPANet hingen, entweder in andere Netzwerke überführt oder ausgeschaltet. Das ARPANet hörte auf zu existieren, dennoch waren die ursprünglichen Ideen in verschiedenen anderen Netzen aufgegangen und lebten dort erfolgreich weiter. Am 24. Oktober 1995 veröffentlichte das Federal Networking Council (FNC) eine Definition des Internet aus der (durchaus abstrakten) Sicht einer Bundesbehörde: Das Federal Networking Council (FNC) bestätigt, dass folgende Formulierung unsere Definition des Begriffs "Internet" reflektiert. Internet bezieht sich auf das globale Informationssystem, das logisch miteinander durch einen global eindeutigen Adressraum basierend auf dem Internet Protocol (IP) oder späteren Erweiterungen/Nachfolgern verbunden ist; in der Lage ist, Datenübertragung mit der Transmission Control Protocol/Internet Protocol (TCP/IP) Protokollsammlung oder späteren Erweiterungen/Nachfolgern und/oder anderen IP-kompatiblen Protokollen zu unterstützen; und höherwertige Dienste, sowohl für öffentliche oder private Zwecke, basierend auf der hier beschriebenen Kommunikations- und verwandten Infrastruktur anbietet, nutzt oder zugänglich macht. Diese auch heute noch geltende Definition wird wiederum von vielen Experten als Geburtsstunde des Internet gesehen, weil mit dieser Definition ein Beratergremium der US- Regierung offiziell das Internet formulierte, das bis dato aus offizieller Sicht weitgehend auf einer Vielzahl von Absichtserklärungen, Vereinbarungen, ungeschriebenen Regeln und einfach vorhandenen Tatsachen gelagert war. Evelyn Frank 4 16.07.2010

Der Bedarf nach einem Informationssystem Zwar gab es Ende der 90er Jahre des 20. Jahrhunderts schon seit über 20 Jahren das Internet, dennoch war das Internet weitgehend immer noch eine eher akademische Angelegenheit, die vornehmlich von Universitäten, Forschungsinstituten und in den USA auch von militärischen und behördlichen Einrichtungen genutzt wurde. Mit den bereits vorhandenen Diensten FTP, der E-Mail den Kommunikationsformen über Netnews und den ersten Informationssystemen Archie und WAIS waren die ersten Grundsteine zum Informationsaustausch bereits gelegt, dennoch war dies alles noch viel zu statisch. Selbst einschlägige Unternehmen aus der Computerbranche taten sich mit dem Internet bis dato eher schwer. Außer einer schnelleren Kommunikation mit anderen Geschäftspartnern, die ebenfalls das Internet nutzten, gab es keinen direkten "Benefit" - es gab zwar mit dem Internet nun eine interdisziplinäre und robuste Vernetzung von Computern, aber noch lange keine Möglichkeit zur sinnvollen Vernetzung von Inhalten über Computernetze. Genau mit diesen Gedanken spielte bereits seit Jahren ein britischer Physiker und Computerspezialist namens Tim Berners-Lee. Der Sohn von Mary Lee und Conway Berners Lee, zwei ausgebildeten Mathematikern, befasste sich schon seit den 80er Jahren mit der Frage, wie Information so strukturiert werden kann, damit sie elektronisch auf ähnliche Weise abgelegt und wieder gefunden werden können, wie es das menschliche Gehirn tut. Tim Berners-Lee arbeitete am CERN. Im Laufe des Jahres 1989 beendete Tim Berners-Lee erfolgreich seine Arbeiten mit RPC am LEP-Teilchenbeschleuniger und konnte sich stärker seinen Ideen eines neuartigen Informationsmanagements widmen. Er hatte zu diesem Thema ein Diskussionspapier namens "Information Management: A Proposal" (Informationsmanagement: Ein Vorschlag) verfasst, das er im März 1989 seinem damaligen Abteilungsleiter der Online-Computing-Gruppe, Mike Sendall, zukommen ließ. In diesem, auch heute noch höchst faszinierenden Dokument beschrieb Tim Berners- Lee zunächst die Schwierigkeiten der immer stärker aufkommenden Informationsfluten im CERN und prognostizierte, dass diese Entwicklung im CERN nur der Vorläufer für das ist, was generell in der Informationsgesellschaft in einigen Jahren passieren dürfte: Viele Menschen arbeiten an einer Stelle, bringen unterschiedlichste Computersysteme zum Einsatz, dokumentieren in verschiedenen Dokumentationssystemen. Dies führt dazu, dass an vielen Stellen Informationen abgelegt werden und im günstigsten Fall nur noch vom Urheber selbst wieder gefunden werden können. Auf dem Deckblatt des Papiers zeichnete Berners- Lee ein Diagramm, in dem verschiedene Objekte durch Pfeile miteinander verwoben waren und die Idee der Hyperlinking darstellen sollte. Die ersten NeXT-Computer tauchten im CERN 1989 auf. Tim Berners-Lee sah so einen Rechner und sah darin das ideale Entwicklungssystem für sein Projekt. Im März 1990 bat er Mike Sendall um zwei NeXT-Systeme und bekam die Zusage, dass Sendall sich bei der CERN-Verwaltung darum kümmern wolle. Ein halbes Jahr später, im September 1990, erhielt Berners-Lee die ersehnten NeXT-Rechner und machte sich daran, einen Server und einen Browser für sein Projekt zu schreiben. Evelyn Frank 5 16.07.2010

Zweieinhalb Monate später, Mitte November 1990, hatte er die Prototypen bereits am Laufen. Auch einen Namen hatte er bereits für sein Projekt und diesen Namen trugen auch die ersten Versionen seines Browsers: World Wide Web, im ersten Namen noch zusammengeschrieben. Sein Browser war im Grunde genommen eine einfache Textverarbeitung, mit der Hypertext-Dokumente erstellt und angezeigt werden konnten. In diese Hypertext- Dokumente konnten Links eingebettet werden, die zu anderen Hypertext- Dokumenten oder Grafiken zeigen konnten. Eine Lesezeichenverwaltung gab es nicht, stattdessen konnte der Benutzer ein eigenes Hypertext-Dokument anlegen und diese als Startseite, als so genannte Homepage, einrichten. Im Laufe des Dezembers 1990 entwickelte er schließlich die erste rudimentäre Version der Hypertext-Auszeichnungssprache HTML, mit der Hypertext-Dokumente erstellt werden konnten. Und Berners-Lee hatte nicht zu viel versprochen: WorldWideWeb funktionierte nun nicht mehr nur in der Theorie, sondern auch in der Praxis, der Prototyp des Browser und Server liefen einwand- und fehlerfrei. Zur Standardisierung des WWW wurde ein Consortium gegründet. Am 1. Oktober 1994 erfolgte der Umzug des europäischen W3C-Teil vom CERN zum INRIA Das World Wide Web hatte mit dem nagelneuen World Wide Web Consortium und Tim Berners-Lee als Direktor endlich einen vernünftigen Mantel für Forschungen und Weiterentwicklungen. Innerhalb kürzester Zeit traten verschiedene andere Institutionen und Unternehmen in das Konsortium bei und sorgten mit ihrer Arbeit für die Grundlage des nachfolgenden Web-Booms. Existierte Ende 1990 erst genau ein Webserver im Internet, nämlich auf dem Rechner von Tim Berners-Lee am CERN, und Ende 1995 schon immerhin knapp über 10.000 Rechner. Wiederum fünf Jahre später waren es Ende 2000 schon über 25 Millionen Webserver. Noch mal fünf Jahre später, Ende 2005, zählte man im Internet schon die dreifache Zahl davon, nämlich knapp 75 Millionen Webserver. Und die Tendenz ist weiterhin nahezu ungebrochen steigend. Dennoch: Solche Zahlen dürfen nicht darüber hinwegtäuschen, dass das World Wide Web im Internet bis 1994 praktisch keine Rolle spielte, obwohl die Kerntechnologie damals schon fünf Jahre alt war. Zwar begannen im Laufe des Jahres 1994 die ersten Unternehmen, eigene Homepages im Internet einzurichten, die jedoch oft genug Versuchsballons waren. Selbst Softwareunternehmen wie Microsoft schätzten das Internet und das World Wide Web zunächst falsch ein - Microsoft lieferte 1995 mit seinem neuen Betriebssystem Windows 95 den hauseigenen Webbrowser Internet Explorer nur in einem zusätzlich erhältlichen, kostenpflichtigen Zusatzpaket. Das Internet etablierte sich in der Wirtschaftswelt nur langsam. Großunternehmen erkannten die Zeichen der Zeit am ehesten, in dem Sie die E-Mail und die Firmen- Homepage als neue Kommunikationsform in ihre Unternehmensprozesse integrierten. Besonders Versandhäuser und Zeitungen implementierten sehr schnell entsprechende Schnittstellen und konnten ihre Waren und Dienstleistungen problemlos auch über das Internet anbieten. Evelyn Frank 6 16.07.2010

Lange Zeit sehr unbeholfen stand der Mittelstand dem Internet gegenüber. Die Registrierung einer eigenen Domain, das Erstellen einer Firmen-Homepage und die Versorgung der Mitarbeiter mit eigenen E-Mail-Adressen verlief bei den meisten Mittelständlern deutlich später und langsamer, was vor allem seine Gründe in fehlendem Personal hatte, das entsprechende Entwicklungen in der Branche hätte beobachten und bewerten können. Mittelständler, die schon frühzeitig den Schritt ins Internet wagten, konnten schon in den frühen Jahren des World Wide Web Erfolge in Form von internationalen Geschäftsabschlüssen ernten, die nur dadurch entstehen konnten, dass ihre Produkte durch eine Homepage schlagartig einem weltweiten Publikum präsentiert werden konnten. Ein alter Bekannter erlebte wieder eine Renaissance, der elektronische Handel, neudeutsch nun E-Commerce genannt. War das elektronische Einkaufen per Bildschirm bis dato weitgehend nur über das veraltete Bildschirmtext möglich, eröffnete das Internet und das World Wide Web ganz andere Präsentationsmöglichkeiten. Das WWW entwickelte sich gleichzeitig durch die Übertragungsgeschwindigkeit, die technische Computerentwicklung, die Möglichkeit der Anbindung an die Backbones auch für kleinere Firmen durch die Zunahme von privaten Providern. Dadurch bot sich auch für die privaten Kunden der Einstieg in die Welt des Internets. Innerhalb von 20 Jahren hat sich das Internet und das WWW rasant weiterentwickelt. Durch weitere Standards hat sich aus der einfachen HTML-Sprache ein vielfältiges Instrument entwickelt zum Erstellen und Anzeigen von Webseiten. Damit verbunden haben sich auch die möglichen Dienste enorm erweitert, die besonders in den Zeiten des Web 2.0 die User zu Producer werden ließ. Jeder kann relativ einfach seine eigene Internetpräsenz erstellen. Einen Internetshop zu erstellen geht ebenso einfach, wie das Kommunizieren und Publizieren über den Browser. Und die Zukunft hält noch viele Überraschungen für uns bereit. Quelle: http://www.netplanet.org/geschichte/index.shtml Evelyn Frank 7 16.07.2010

II. Grundlagen von HTML Verwenden eines Editors HTML ist - wie so vieles im Internet - eine Abkürzung und steht für den englischsprachigen Begriff Hypertext Markup Language. Tim Berners-Lee erfand eine vergleichsweise einfache Computersprache, die das Publizieren, Austauschen und vor allem Vernetzen (Hyperlinks) von Texten ermöglichte. HTML selbst beinhaltet - logisch betrachtet - zweierlei: Die Information, also zum Beispiel den Text, der dargestellt werden soll (das WAS), und die Art und Weise, wie der Text dargestellt werden soll (das WIE). Anders gesagt: Inhalt und Form bilden in HTML eine Einheit. Man könnte also sagen, HTML ist eine Beschreibungssprache (Markup!). Eine HTML-Datei besteht nur aus Text, der von einem Browser interpretiert wird. Dabei befindet sich die darzustellende Information zwischen zwei Tags (das sind Sprachelemente des HTML-Codes). Tags werden als spitze Klammern angezeigt < >. In ihnen ist der entsprechende Befehl enthalten. Zum Beispiel soll das Wort Internet fett angezeigt werden. Dann müsste man schreiben: <b>internet</b>. Der Befehl zur Anzeige besteht aus einem Tag am Beginn und endet meist wieder mit einem Tag mit Schrägstrich. Den HTML-Code (auch Quellcode, Source-Code oder einfach nur Source) einer beliebigen HTML-Seite kann man sich übrigens jederzeit ansehen. Klicken Sie in Ihrem Browser (z. B.: Internet Explorer, Opera oder Mozilla Firefox) auf =>Ansicht =>Quelltext anzeigen): Was Sie nun sehen, ist reiner HTML-Code. Alles zu HTML und CSS findet sich beim Projekt von SELF-HTML: http://selfhtml.org/ Die wichtigsten Tags finden sich im Anhang Aufgabe 1: Erstellen Sie im Editor einen html-datei mit Ihren Kontaktdaten, einem blauen Hintergrund, einer weißen Textfarbe, mehreren Zeilenumbrüchen und mindestens 2 Absätzen (linksbündig und zentriert). Speichern Sie die Datei und öffnen Sie die Datei im Browser. Öffnen Sie nun den Quelltext und verändern Sie die Hintergrundfarbe in eine Farbe nach Ihrem Belieben und einer kontrastreichen Schriftfarbe). Farbcodes können Sie u. a. dieser Seite entnehmen: http://colorschemedesigner.com/ Evelyn Frank 8 16.07.2010

III. Navigation/Struktur Verwenden des Programms Frontpage Will man eine Website erstellen, muss man sich im Vorfeld einige Gedanken machen zum Thema, zum Benutzer (Erwachsene, Kinder ) und zur Struktur der Navigation. Eine Website besteht aus mehreren html-seiten, die miteinander über die Navigation verknüpft sind. Dabei nennt man die Startseite Homepage. Wir wollen eine Website gestalten zum Thema Bewerbung Allgemeine Informationen Anschreiben Lebenslauf Online Bewerbung Vorstellungsgespräch Auswahltests Absagen Links Impressum Wir überlegen uns im Voraus, welche Informationen wir geben möchten. Welches Bildmaterial können wir verwenden (lizenzfreie Bilder oder eigene Fotos verwenden). Welche Multimediadateien können wir einbinden? Videos, Podcasts, Slideshows? Alles sammeln wir zuerst in einem Ordner mit dem Namen bewerbung. Wir verwenden das Programm Frontpage und erstellen das Grundgerüst für unsere Website: Aufgabe 2: Erstellen Sie das Grundgerüst für unsere Website. Arbeiten Sie mit Tabellen. Verwenden Sie zum Formatieren der Tabelle die Funktion Tabelleneigenschaften und Zelleigenschaften. Speichern Sie die Datei als index.html im Ordner bewerbung. Öffnen Sie die Datei im Browser. Evelyn Frank 9 16.07.2010

IV. Arbeiten mit Dreamweaver und einem vorgefertigten Layout Dreamweaver ist ein professionelles Programm zum Erstellen von Webseiten. Es ist sehr umfangreich und man benötigt eine gewisse Zeit der Einarbeitung. Es gibt sehr viele gute schöne Design-Vorlagen, die man gut verwenden kann für eigene Zwecke. Eine besonders große Auswahl findet sich bei OSWD http://www.oswd.org/designs/browse/ Man kann die Vorlagen ansehen und dann eine Ausgewählte auf den eigenen Rechner laden. Die Zip-Datei wird daraufhin entpackt und im Ordner finden sich alle zum Design gehörenden Dateien. Evelyn Frank 10 16.07.2010

Nun kann die index.html im Programm Dreamweaver geöffnet und mit eigenem Text bearbeitet werden. In Dreamweaver kann man das Programm so einstellen, dass oben der Quelltext zu sehen ist. Man kann nun entweder auf der Arbeitsfläche editieren, oder gleich im Quelltext. Klickt man auf der Arbeitsfläche einen Bereich oder Text an, sieht man sofort oben im Quelltext, wo sich der Cursor befindet und welche Tags dazugehören. Im Beispiel oben wurde im Sub menu in den Link pikanai geklickt. Oben im Quelltest sieht man nun wo sich der Cursor befindet. Hier könnte man nun den Text ändern, oder die Linkadresse, je nach Belieben. Durch Markieren, Kopieren und drunter einfügen, könnte man im Sub menu weitere Links hinzufügen und die Überschriften und Texte nach Belieben verändern. Evelyn Frank 11 16.07.2010

Aufgabe 3: Laden Sie sich eine nicht zu schwierig zu bearbeitende Design-Vorlage von OSWD herunter, entzippen sie die Datei. Öffnen Sie die index. htm und bearbeiten Sie die Datei im Dreamweaver passend zu einem von Ihnen gewählten Thema. Die nächsten Dateien müssen nur unter einem anderen Namen im selben Ordner gespeichert werden. Die Navigation muss dann zu den neu erstellten Dateien leiten. V. Upload der Dateien auf einen Server Hat man seine Dateien im installierten Programm offline erstellt, muss man sie nun auf den entsprechenden Serverplatz kopieren. Dazu benötigt man zuerst einen Provider/Webhoster. Man kann einen Speicherplatz für umsonst erhalten, muss dann aber Werbung in Kauf nehmen, die man nicht beeinflussen kann. Ansonsten muss man einige Euro monatlich für den Speicherplatz bezahlen. Vom Hoster bekommt man die Zugangsdaten, mit welchen man sich einwählen kann. Die Dateien können nun per ftp upgeloadet werden. Ein gutes Programm ist dabei WinSCP. Dieses ist ein Freewareprogramm, das man von Internet runterladen und auf dem eigenen Rechner installieren kann. Zu Beginn müssen die Zugangsdaten eingetragen werden. Nun klickt man auf Anmelden und die Verbindung wird aufgebaut. Man sieht dann die Oberfläche des Speicherplatzes Evelyn Frank 12 16.07.2010

Auf dem eigenen Rechner wählt man den Ordner, in welchem sich die Dateien befinden, die ins Internet übertragen werden sollen. Diese werden markiert und mit gedrückter Maustaste per drag and drop ins andere Fenster gezogen Es erscheint eine Meldung, wo nochmals aufgezeigt wird, wohin die Dateien kopiert werden und man klickt auf den Schalter Kopieren. Darauf werden die Dateien ins Internet upgeloadet. VI. Arbeiten mit dem Online-Webbaukasten Weebly Ein schöner, einfach und intuitiv zu bedienender Webbaukasten ist der Online-Dienst Weebly: http://weebly.com Man muss sich zuerst registrieren und kann dann seine eigene Website über den Browser direkt online erstellen. Evelyn Frank 13 16.07.2010

1. Registrieren 2. Create Website 3. Einen Titel auswählen - Continue 4. Eine Domain auswählen evt. Namen ändern, falls er schon vergeben ist Evelyn Frank 14 16.07.2010

5. oben befinden sich nun die Tools zur Verwendung 6. Design auswählen. Es gibt ca. 70 vorgefertigte Designs Evelyn Frank 15 16.07.2010

7. Preview Theme und mit Use Theme bestätigen Wenn man ein wenig von HTML/CSS versteht, kann man hier auch noch die Farben oder die Schrift ändern unter CSS. 8. Hinzufügen weiterer Seiten 9. Seiten mit Inhalt füllen Für die Bearbeitung der einzelnen Seiten stehen nun unterschiedliche Module zur Verfügung, die per drag and drop auf die Arbeitsfläche gezogen werden. Hier können sie editiert werden, mit eigenem Text oder Bildmaterial versehen und formatiert (etwas beschränkt) werden. Evelyn Frank 16 16.07.2010

10. Das Modul Basic Hier kann man wählen unter Absatz mit Titel, Absatz mit Bild, nur Bild, nur Titel, nur Absatz, 2-Spalten-Text. Man hat aber auch die Möglichkeit direkt im html- Quellcode zu arbeiten. Dies macht Sinn, wenn man evtl. ein Stück Scriptcode (Embed-Code) einfügen möchte. Man zieht mit gedrückter Maustaste das ausgewählte Element einfach in den Textbereich. Es öffnet sich ein kleiner Editor, in dem man schreiben kann. Es gibt auch ein paar Möglichkeiten zum Formatieren. Zieht man Picture in die Arbeitsfläche, kann man das Bild am eigenen Rechner auswählen und hochladen. Evelyn Frank 17 16.07.2010

11. Publizieren der Website Ist man mit dem Ergebnis der Website zufrieden, muss man die Seite publizieren. Die Beispielswebsite ist nun unter der URL http://bewerbungsinfos.weebly.com aufzurufen. Abschließend klickt man auf das X, um das Fenster zu schließen und kann an der Seite weiterarbeiten 12. Das Modul Multimedia Es beinhaltet eine Photo Gallerie, die Möglichkeit, eine Flickr Foto Show einzubetten, oder ein YouTube Video. Auch eine Flashdatei oder ein Dokument kann hier eingefügt werden. Um einen Audioplayer, ein Video (außer youtube) oder ein Dokument einzubetten, benötigt man einen Pro Account, für den man bezahlen muss. Evelyn Frank 18 16.07.2010

13. Das Modul Revenue Man könnte damit einen Online-Shop erstellen. Ich habe jedoch noch keine Erfahrung mit diesem Modul. 14. Das Modul More Hier finden wir noch einige weitere Möglichkeiten, um die Website aufzupeppen. So gibt es das Modul eines Feeds, mit welchem man die Website abonnieren kann. Es gibt einige Spiele, die man einfügen könnte. Man kann eine Befragung durchführen, ein Kontaktformular einbetten, und noch Einiges mehr. Alles in allem ist Weebly gut für die Präsentation von Projekten zu verwenden und könnte auch gut für einen Webquest verwendet werden. Die fertige Seite im Browser sieht so aus: Aufgabe 4: Registrieren Sie sich bei Weebly. Erstellen Sie eine Website zu einem Thema Ihrer Wahl. Publizieren Sie Ihre neu erstellte Website. Teilen Sie den Teilnehmern Ihre Domain mit. Evelyn Frank 19 16.07.2010

Anhang: Wichtige html Tags <html> </html> steht am Beginn des html Codes und am Ende <head>..</head> Beinhaltet den <title>titel</titel>, der in der Titelleiste des Browsers zu sehen ist und Meta-Angaben zum Autor, zu Begrifflichkeiten für die Suchmaschinen. <body>.</body> Dazwischen steht der Text und sind alle Inhalte aufgeführt, welche im Browserfenster zu sehen sind. Text, Bild, Video, weitere Objekte, sowie deren Formatierung und Platzierung. Nach dem </body> folgt der </html> Tag <body bgcolor= #ffcc00 text= #ffffff link= #00cc00 > hier werden die Hintergrundfarbe der Seite bestimmt, die Textfarbe, die Linkfarbe. <body img src= hintergrundbild.jpg > ein Hintergrundbild wird in der Seite eingefügt. <br> = Zeilenumbruch hat keinen Endtag! <p> </p> = Absatz align= left, align= right, align= center bestimmt die Ausrichtung z. B. <p align= center >.</p> = hier handelt es sich um einen zentrierten Absatz. <h1>..</h1> = Überschriftgröße 1. Es gibt 1 6 Größen <font face= Arial size= 4 color= #ccffee > bestimmt Schriftart, -größe und farbe </font> innerhalb des Bodys eine Tabelle einfügen <table> <tr> <td>hier ist die erste Zelle</td> <td>hier ist die zweite Zelle </td> </tr> </table> dies ist eine Tabelle mit einer Zeile und zwei Zellen. Evelyn Frank 20 16.07.2010