You are on page 1of 20

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 Vorberlegungen Speicherplatz und Hosting bertragung der Dateien Webseiten mit Weebly

Evelyn Frank

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 Hnden des amerikanischen Militrs. Gegrndet wurde das ARPANET im Jahre 1958. Das US-Verteidigungsministerium richtete im Auftrage des damaligen US-Prsidenten 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 Grndung der ARPA-Abteilung "Command and Control" gelegt, dessen Leitung von Joseph Carl Robnett Licklider bernommen wurde. Licklider erkannte schon frhzeitig, dass Computer nicht nur zu rein wissenschaftlichen und militrischen Zwecken genutzt werden sollten, sondern in Zukunft dank interaktiver und intuitiver Bedienung immer grere Verbreitung finden wrden. Fast zur gleichen Zeit arbeitete 1964 ein Wissenschaftler namens Paul Baran, Mitarbeiter der Firma RAND Corporation, fr 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 erhhte, 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 zunchst vier Forschungsinstitute und Universitten im Westen der USA miteinander verbinden, die allesamt unterschiedliche Grorechner einsetzten. Da so gut wie keine grundstzlichen Standards zum Datenaustausch zwischen Grorechner existierten, waren nicht nur Neuentwicklungen fr Netzwerkprotokolle gefragt, sondern auch ganze Definitionen fr einheitliche Schnittstellen. Die ARPA schrieb deshalb das Projekt Ende 1968 aus und schickte die Ausschreibungsunterlagen an 140 Unternehmen in der Computerbranche, darunter auch so berhmte Namen wie IBM. Die Grorechner wurden nun nicht mehr direkt miteinander verbunden, sondern man schloss sie lokal an einem eigenstndigen Rechner an, dem so genannten IMP. Diese Rechner wurden nun untereinander vernetzt. Jeder IMP stckelte die zu bertragende Information in kleine Pakete auf, versah jedes Paket mit Absender- und Empfngeradresse. 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 Universitten in den USA eigene computerwissenschaftliche Abteilungen. Whrend das ARPANet immer weiter wuchs und sich verbreitete, blieben die Universitten in diesem Wachstum weitgehend auen vor. Von den rund 120 Universitten 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-Universitten unter der Leitung von Larry Landweber, Leiter der Informatikfakultt 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 unabhngiges Netzwerk zu planen und allen computerwissenschaftlichen Abteilungen von Universitten und Unternehmen offen zu halten. Die endgltige 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 Universitten 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 ermglichte. Die 80er Jahre des 20. Jahrhunderts waren eine Zeit, in der in den USA viele Netze etabliert wurden, die zunchst keine Verbindung zum CSNet oder zu anderen Netzen hatten, sondern zunchst rein intern Rechner miteinander verbanden. Auf diese Weise entstanden frh 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 vorber, da an US-Universitten immer mehr nicht-computerwissenschaftliche Abteilungen ebenfalls immer lauter nach einen Netzzugang riefen. Wissenschaftler, die nicht an Informatikfakultten arbeiteten, dennoch aber Rechenleistung bentigten, beispielsweise Physiker und Astronomen, mussten teilweise ins Ausland reisen, um dort an Supercomputern arbeiten zu knnen, da die Supercomputer im eigenen Land nur ber das CSNet erreichbar waren. Die NSF war zwar bereit, federfhrend an so einem Wissenschaftsnetz mitzuwirken, signalisierte jedoch schon frhzeitig, dass fr den Aufbau eines weiteren Netzwerks keine Finanzmittel bereitstehen wrden. Der NSF kam hierbei der Umstand zu Hilfe, dass 1985 in den USA fnf so genannte Supercomputerzentren eingerichtet wurden. Sie erklrte sich bereit, diese Zentren miteinander zu verbinden und somit fr das neue Netz ein "Rckgrat" 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 sptere Internet prgen 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 anzuschlieen, 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 gegenber kommerziellen Anbietern zu ffnen. Interessierte Institutionen sollten die bentigte Infrastruktur fr eine Anbindung an das NSFNet so direkt bei kommerziellen Unternehmen einkaufen und die NSF stellte den Institutionen hierzu eigene Etats bereit. Erheblich grere Probleme kamen auf, als das NSFNet erste Verbindungen zum ARPANet bekam. Da viele Einrichtungen des US-Militrs am ARPANet angeschlossen waren, machten sich Verantwortliche im Pentagon Gedanken darber, wie diese vor Angriffen und Einbruchsversuchen geschtzt werden konnte. Letztendlich kam man 1983 zu dem Entschluss, die militrischen Einrichtungen komplett vom ARPANet abzukoppeln und in einem eigenen, nichtffentlichen Netzwerk zu organisieren, dem MILNet. Im Laufe der Jahre wurde das ARPANet mit seinem Backbone immer unbedeutender, da der Groteil des Datenverkehrs inzwischen ber das NSFNet abgewickelt wurde. So wurden bis Ende 1989 alle IMP, die am ARPANet hingen, entweder in andere Netzwerke berfhrt oder ausgeschaltet. Das ARPANet hrte auf zu existieren, dennoch waren die ursprnglichen Ideen in verschiedenen anderen Netzen aufgegangen und lebten dort erfolgreich weiter. Am 24. Oktober 1995 verffentlichte das Federal Networking Council (FNC) eine Definition des Internet aus der (durchaus abstrakten) Sicht einer Bundesbehrde: Das Federal Networking Council (FNC) besttigt, 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 spteren Erweiterungen/Nachfolgern verbunden ist; in der Lage ist, Datenbertragung mit der Transmission Control Protocol/Internet Protocol (TCP/IP) Protokollsammlung oder spteren Erweiterungen/Nachfolgern und/oder anderen IP-kompatiblen Protokollen zu untersttzen; und hherwertige Dienste, sowohl fr ffentliche oder private Zwecke, basierend auf der hier beschriebenen Kommunikations- und verwandten Infrastruktur anbietet, nutzt oder zugnglich 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 Absichtserklrungen, 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 Universitten, Forschungsinstituten und in den USA auch von militrischen und behrdlichen 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 einschlgige Unternehmen aus der Computerbranche taten sich mit dem Internet bis dato eher schwer. Auer einer schnelleren Kommunikation mit anderen Geschftspartnern, die ebenfalls das Internet nutzten, gab es keinen direkten "Benefit" - es gab zwar mit dem Internet nun eine interdisziplinre und robuste Vernetzung von Computern, aber noch lange keine Mglichkeit 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 knnen, 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 strker 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 Mrz 1989 seinem damaligen Abteilungsleiter der Online-Computing-Gruppe, Mike Sendall, zukommen lie. In diesem, auch heute noch hchst faszinierenden Dokument beschrieb Tim BernersLee zunchst die Schwierigkeiten der immer strker aufkommenden Informationsfluten im CERN und prognostizierte, dass diese Entwicklung im CERN nur der Vorlufer fr das ist, was generell in der Informationsgesellschaft in einigen Jahren passieren drfte: Viele Menschen arbeiten an einer Stelle, bringen unterschiedlichste Computersysteme zum Einsatz, dokumentieren in verschiedenen Dokumentationssystemen. Dies fhrt dazu, dass an vielen Stellen Informationen abgelegt werden und im gnstigsten Fall nur noch vom Urheber selbst wieder gefunden werden knnen. Auf dem Deckblatt des Papiers zeichnete BernersLee 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 fr sein Projekt. Im Mrz 1990 bat er Mike Sendall um zwei NeXT-Systeme und bekam die Zusage, dass Sendall sich bei der CERN-Verwaltung darum kmmern wolle. Ein halbes Jahr spter, im September 1990, erhielt Berners-Lee die ersehnten NeXT-Rechner und machte sich daran, einen Server und einen Browser fr sein Projekt zu schreiben. Evelyn Frank 5 16.07.2010

Zweieinhalb Monate spter, Mitte November 1990, hatte er die Prototypen bereits am Laufen. Auch einen Namen hatte er bereits fr 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 HypertextDokumente konnten Links eingebettet werden, die zu anderen HypertextDokumenten 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 schlielich die erste rudimentre 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 gegrndet. Am 1. Oktober 1994 erfolgte der Umzug des europischen 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 vernnftigen Mantel fr Forschungen und Weiterentwicklungen. Innerhalb krzester Zeit traten verschiedene andere Institutionen und Unternehmen in das Konsortium bei und sorgten mit ihrer Arbeit fr die Grundlage des nachfolgenden Web-Booms. Existierte Ende 1990 erst genau ein Webserver im Internet, nmlich auf dem Rechner von Tim Berners-Lee am CERN, und Ende 1995 schon immerhin knapp ber 10.000 Rechner. Wiederum fnf Jahre spter waren es Ende 2000 schon ber 25 Millionen Webserver. Noch mal fnf Jahre spter, Ende 2005, zhlte man im Internet schon die dreifache Zahl davon, nmlich knapp 75 Millionen Webserver. Und die Tendenz ist weiterhin nahezu ungebrochen steigend. Dennoch: Solche Zahlen drfen nicht darber hinwegtuschen, dass das World Wide Web im Internet bis 1994 praktisch keine Rolle spielte, obwohl die Kerntechnologie damals schon fnf 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 schtzten das Internet und das World Wide Web zunchst falsch ein - Microsoft lieferte 1995 mit seinem neuen Betriebssystem Windows 95 den hauseigenen Webbrowser Internet Explorer nur in einem zustzlich erhltlichen, kostenpflichtigen Zusatzpaket. Das Internet etablierte sich in der Wirtschaftswelt nur langsam. Grounternehmen erkannten die Zeichen der Zeit am ehesten, in dem Sie die E-Mail und die FirmenHomepage als neue Kommunikationsform in ihre Unternehmensprozesse integrierten. Besonders Versandhuser und Zeitungen implementierten sehr schnell entsprechende Schnittstellen und konnten ihre Waren und Dienstleistungen problemlos auch ber das Internet anbieten.

Evelyn Frank

16.07.2010

Lange Zeit sehr unbeholfen stand der Mittelstand dem Internet gegenber. Die Registrierung einer eigenen Domain, das Erstellen einer Firmen-Homepage und die Versorgung der Mitarbeiter mit eigenen E-Mail-Adressen verlief bei den meisten Mittelstndlern deutlich spter und langsamer, was vor allem seine Grnde in fehlendem Personal hatte, das entsprechende Entwicklungen in der Branche htte beobachten und bewerten knnen. Mittelstndler, die schon frhzeitig den Schritt ins Internet wagten, konnten schon in den frhen Jahren des World Wide Web Erfolge in Form von internationalen Geschftsabschlssen ernten, die nur dadurch entstehen konnten, dass ihre Produkte durch eine Homepage schlagartig einem weltweiten Publikum prsentiert 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 mglich, erffnete das Internet und das World Wide Web ganz andere Prsentationsmglichkeiten. Das WWW entwickelte sich gleichzeitig durch die bertragungsgeschwindigkeit, die technische Computerentwicklung, die Mglichkeit der Anbindung an die Backbones auch fr kleinere Firmen durch die Zunahme von privaten Providern. Dadurch bot sich auch fr 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 vielfltiges Instrument entwickelt zum Erstellen und Anzeigen von Webseiten. Damit verbunden haben sich auch die mglichen Dienste enorm erweitert, die besonders in den Zeiten des Web 2.0 die User zu Producer werden lie. Jeder kann relativ einfach seine eigene Internetprsenz erstellen. Einen Internetshop zu erstellen geht ebenso einfach, wie das Kommunizieren und Publizieren ber den Browser. Und die Zukunft hlt noch viele berraschungen fr uns bereit.

Quelle: http://www.netplanet.org/geschichte/index.shtml

Evelyn Frank

16.07.2010

II. Grundlagen von HTML Verwenden eines Editors


HTML ist - wie so vieles im Internet - eine Abkrzung und steht fr 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 ermglichte. 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 knnte 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 msste man schreiben: <b>Internet</b>. Der Befehl zur Anzeige besteht aus einem Tag am Beginn und endet meist wieder mit einem Tag mit Schrgstrich. 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 weien Textfarbe, mehreren Zeilenumbrchen und mindestens 2 Abstzen (linksbndig und zentriert). Speichern Sie die Datei und ffnen Sie die Datei im Browser. ffnen Sie nun den Quelltext und verndern Sie die Hintergrundfarbe in eine Farbe nach Ihrem Belieben und einer kontrastreichen Schriftfarbe). Farbcodes knnen Sie u. a. dieser Seite entnehmen: http://colorschemedesigner.com/

Evelyn Frank

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 verknpft sind. Dabei nennt man die Startseite Homepage. Wir wollen eine Website gestalten zum Thema Bewerbung Allgemeine Informationen Anschreiben Lebenslauf Online Bewerbung Vorstellungsgesprch Auswahltests Absagen Links Impressum Wir berlegen uns im Voraus, welche Informationen wir geben mchten. Welches Bildmaterial knnen wir verwenden (lizenzfreie Bilder oder eigene Fotos verwenden). Welche Multimediadateien knnen wir einbinden? Videos, Podcasts, Slideshows? Alles sammeln wir zuerst in einem Ordner mit dem Namen bewerbung. Wir verwenden das Programm Frontpage und erstellen das Grundgerst fr unsere Website:

Aufgabe 2: Erstellen Sie das Grundgerst fr 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

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 bentigt eine gewisse Zeit der Einarbeitung. Es gibt sehr viele gute schne Design-Vorlagen, die man gut verwenden kann fr eigene Zwecke. Eine besonders groe Auswahl findet sich bei OSWD http://www.oswd.org/designs/browse/ Man kann die Vorlagen ansehen und dann eine Ausgewhlte auf den eigenen Rechner laden. Die Zip-Datei wird daraufhin entpackt und im Ordner finden sich alle zum Design gehrenden Dateien.

Evelyn Frank

10

16.07.2010

Nun kann die index.html im Programm Dreamweaver geffnet 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 Arbeitsflche editieren, oder gleich im Quelltext. Klickt man auf der Arbeitsflche einen Bereich oder Text an, sieht man sofort oben im Quelltext, wo sich der Cursor befindet und welche Tags dazugehren. Im Beispiel oben wurde im Sub menu in den Link pikanai geklickt. Oben im Quelltest sieht man nun wo sich der Cursor befindet. Hier knnte man nun den Text ndern, oder die Linkadresse, je nach Belieben. Durch Markieren, Kopieren und drunter einfgen, knnte man im Sub menu weitere Links hinzufgen und die berschriften und Texte nach Belieben verndern.

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 gewhlten Thema. Die nchsten Dateien mssen 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 bentigt man zuerst einen Provider/Webhoster. Man kann einen Speicherplatz fr umsonst erhalten, muss dann aber Werbung in Kauf nehmen, die man nicht beeinflussen kann. Ansonsten muss man einige Euro monatlich fr den Speicherplatz bezahlen. Vom Hoster bekommt man die Zugangsdaten, mit welchen man sich einwhlen kann. Die Dateien knnen 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 mssen die Zugangsdaten eingetragen werden.

Nun klickt man auf Anmelden und die Verbindung wird aufgebaut. Man sieht dann die Oberflche des Speicherplatzes

Evelyn Frank

12

16.07.2010

Auf dem eigenen Rechner whlt man den Ordner, in welchem sich die Dateien befinden, die ins Internet bertragen werden sollen. Diese werden markiert und mit gedrckter 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 schner, 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 auswhlen - Continue

4. Eine Domain auswhlen 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 auswhlen. Es gibt ca. 70 vorgefertigte Designs

Evelyn Frank

15

16.07.2010

7. Preview Theme und mit Use Theme besttigen

Wenn man ein wenig von HTML/CSS versteht, kann man hier auch noch die Farben oder die Schrift ndern unter CSS. 8. Hinzufgen weiterer Seiten

9. Seiten mit Inhalt fllen

Fr die Bearbeitung der einzelnen Seiten stehen nun unterschiedliche Module zur Verfgung, die per drag and drop auf die Arbeitsflche gezogen werden. Hier knnen sie editiert werden, mit eigenem Text oder Bildmaterial versehen und formatiert (etwas beschrnkt) werden.

Evelyn Frank

16

16.07.2010

10. Das Modul Basic Hier kann man whlen unter Absatz mit Titel, Absatz mit Bild, nur Bild, nur Titel, nur Absatz, 2-Spalten-Text. Man hat aber auch die Mglichkeit direkt im htmlQuellcode zu arbeiten. Dies macht Sinn, wenn man evtl. ein Stck Scriptcode (Embed-Code) einfgen mchte. Man zieht mit gedrckter Maustaste das ausgewhlte Element einfach in den Textbereich. Es ffnet sich ein kleiner Editor, in dem man schreiben kann. Es gibt auch ein paar Mglichkeiten zum Formatieren.

Zieht man Picture in die Arbeitsflche, kann man das Bild am eigenen Rechner auswhlen 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. Abschlieend klickt man auf das X, um das Fenster zu schlieen und kann an der Seite weiterarbeiten

12. Das Modul Multimedia Es beinhaltet eine Photo Gallerie, die Mglichkeit, eine Flickr Foto Show einzubetten, oder ein YouTube Video. Auch eine Flashdatei oder ein Dokument kann hier eingefgt werden. Um einen Audioplayer, ein Video (auer youTube) oder ein Dokument einzubetten, bentigt man einen Pro Account, fr den man bezahlen muss.

Evelyn Frank

18

16.07.2010

13. Das Modul Revenue Man knnte damit einen Online-Shop erstellen. Ich habe jedoch noch keine Erfahrung mit diesem Modul. 14. Das Modul More Hier finden wir noch einige weitere Mglichkeiten, um die Website aufzupeppen. So gibt es das Modul eines Feeds, mit welchem man die Website abonnieren kann. Es gibt einige Spiele, die man einfgen knnte. Man kann eine Befragung durchfhren, ein Kontaktformular einbetten, und noch Einiges mehr. Alles in allem ist Weebly gut fr die Prsentation von Projekten zu verwenden und knnte auch gut fr 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 fr die Suchmaschinen. <body>.</body> Dazwischen steht der Text und sind alle Inhalte aufgefhrt, 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 eingefgt. <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> = berschriftgre 1. Es gibt 1 6 Gren <font face=Arial size=4 color=#ccffee> bestimmt Schriftart, -gre und farbe </font> innerhalb des Bodys eine Tabelle einfgen <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