Meine eigene Webseite entwickeln

Transkript

1 2017 MS Informatik 5b Meine eigene Webseite entwickeln 0. Einleitung Erinnerst du dich an unsere Klassenseite im Internet? Erinnerst du dich ans Bild zuoberst, ans I Donfli? Deine Webseite wird zuoberst auch ein Bild haben, das du selber gestalten und zeichnen darfst. Es kann eine Blume sein, ein Einhorn, ein Graffiti, ein Muster etc. Was immer du möchtest. Und unterhalb des Bildes wirst du Inhalte vorstellen, die dir gefallen und an denen wir in der Schule arbeiten. Damit können wir uns innerhalb unserer Klasse, mit Freunden, der Familie oder auch mit anderen Klassen austauschen und unsere Arbeiten der ganzen Welt zeigen. Und los geht s 1. Entwerfe deine Webseite im Allerleiheft Benutze dein Allerleiheft. Plane deine eigene Webseite: Welche Überschriften werden auf deiner Seite stehen? Welche Bilder? Wie sehen die Seiten ungefähr aus? Welchen Text wirst du auf deinen Seiten schreiben? Arbeitsauftrag 1 - Webseitenentwurf im Allerleiheft: Gestalte insgesamt fünf Seiten. Die erste Seite muss Wer ich bin heissen. Schreibe auf, wer du bist, woher du kommst, was dein Lieblingsessen ist, deine Hobbies usw. Eine Seite muss Mein Zukunftstag 2016 heissen. Dort kannst du deinen Aufsatz zeigen und Bilder des Zukunftstages, die du bereits für deinen Vortrag gemalt hast. Eine Seite muss Meine Lieblingsmusik heissen. Schreibe dazu eine Liste all deiner Lieblingslieder auf. Arbeitsauftrag 2 - Titelbildzeichnung für deine Webseite: Hole dir ein Zeichnungsblatt bei der Lehrperson. Halte es im Querformat. Zeichne ein Bild, das Hauptbild für deine Webseite. (Achtung: zeichne zuerst mit Bleistift und zeige den Entwurf deiner Lehrperson. Danach malst du das Bild mit Farbstiften aus.) Zur Information: Das Bild wird auf allen deinen Seiten zuoberst erscheinen. So wie auf der Klassenseite das Bild I Donfli. Dein Bild kann frei von dir gewählt und gemalt werden. Und bald schon kann die Arbeit am Computer losgehen

2 2. Eine Webseite am Computer erstellen Arbeitsauftrag 1 - Ordner, Datei und Tabelle erstellen und beschriften: Erstelle einen neuen Ordner auf deinem Desktop Schreibe den neuen Ordner an mit Webseite DEIN NAME. (Als Beispiel: Welats Ordner wird Webseite Welat heissen.) Öffne das Programm Word Öffne eine neue, leere Worddatei Erstelle innerhalb der leeren Datei eine Tabelle mit zwölf Zeilen und einer Spalte. So wie hier: in deinen neuen Ordner, der auf dem Desktop liegt. Gib der neuen Datei den Namen SeiteEINS.doc. Schliesse Word und die Datei. Kontrolliere jetzt, ob die gespeicherte Worddatei SeiteEINS.doc im Ordner Webseite DEIN NAME liegt (Doppelklick auf den Ordner). Arbeitsauftrag 2 - Wortdatei kopieren und neu beschriften: Kopiere die Worddatei SeiteEINS.doc vier Mal (linke Maustaste > kopieren). Zur Kontrolle: Jetzt solltest du insgesamt fünf Dateien in deinem Ordner haben. Die erste heisst SeiteEINS.doc. Schreibe die anderen Dateien neu an mit SeiteZWEI.doc, SeiteDREI.doc, SeiteVIER.doc und SeiteFUNF.doc. Arbeitsauftrag 3 - Tabelle in eine bestehende Tabelle einfügen: Öffne die erste Worddatei SeiteEINS.doc. Lass die obersten zwei Zeilen der Tabelle leer. (Später fügen wir dort dein Hauptbild ein). Klicke in die dritte Spalte. (Danach siehst du den Cursor dort blinken.) Füge jetzt eine weitere Tabelle ein mit einer Zeile und fünf Spalten. Die ersten paar Zeilen sollten neu so aussehen: und schliesse sie.

3 Arbeitsauftrag 4 - alle Dokumente gleich erstellen: Öffne die erste der kopierten Dateien ( SeiteZWEI.doc ) und wiederhole den Schritt von Arbeitsauftrag 3. (In die dritte Zeile fügst du also eine Tabelle ein mit einer Zeile und fünf Spalten). SeiteZWEI.doc und schliesse sie. Öffne die nächste der kopierten Dateien ( SeiteDREI.doc ) und wiederhole den Schritt. Also: in die dritte Zeile fügst du eine Tabelle ein mit einer Zeile und fünf Spalten. SeiteDREI.doc und schliesse sie danach. Wiederhole die Schritte mit den restlichen Dateien SeiteVIER.doc und SeiteFUNF.doc. Vergiss nie, die Dateien zu speichern, wenn du sie angepasst hast. Zur Kontrolle: Jetzt solltest du fünf Dateien in deinem Ordner haben, die alle eine Tabelle beinhalten. Die dritte Zeile dieser Haupttabelle beinhaltet wiederum eine Tabelle mit nur einer Zeile und fünf Spalten. Arbeitsauftrag 5 - Sicherheitskopie des Ordners auf dem Desktop erstellen: Kopiere deinen Ordner Webseite DEIN NAME (CTRL-C) Füge den kopierten Ordner als Kopie auf dem Desktop ein (CTRL-V) Nun hat es zwei gleiche Ordner auf dem Desktop liegen Doppelklicke den neuen Ordner und kontrolliere, ob alle Dateien auch kopiert wurden Schliesse den Ordner wieder Arbeitsauftrag 6 - Dateien neu beschriften: Öffne nun den ursprünglichen Ordner Webseite DEIN NAME Du siehst deine vorbereiteten Worddateien Schreibe die Dateien nun neu an (klicke zweifach auf den Dateinamen): Die erste Datei soll Wer_ich_bin.docx heissen. Die zweite Datei soll Meine_Klasse.docx heissen. Die dritte Datei soll Mein_Hobby.docx heissen. Die vierte Datei soll Mein_Zukunftstag_2016.docx heissen. Die fünfte Datei soll Meine_Lieblingsmusik.docx Arbeitsauftrag 7 - Datei erstellen und speichern: Öffne Word und eine neue Datei Schreibe auf die erste Linie das Wort Bilder als Bilder.docx in den Ordner Webseite DEIN NAME Arbeitsauftrag 8 - Datei erstellen und speichern, Tabelle einfügen: Öffne Word und eine neue Datei Schreibe zuoberst das Wort Liederliste als Liederliste.docx in den Ordner Webseite DEIN NAME Füge nun auf einer neuen Linie eine Tabelle ein (fünf Zeilen, drei Spalten) So sollte die Tabelle aussehen:

4 Arbeitsauftrag 9 - Bilder im Internet suchen und abspeichern: Suche im Internet Bilder zu I ain t your mama oder Jennifer Lopez Speichere davon ein Bild in deinen Ordner Webseite DEIN NAME Suche im Internet Bilder zu Hello oder Adele Speichere ein Bild in deinen Ordner Webseite DEIN NAME Suche im Internet Bilder zu Love Yourself oder Justin Bieber Speichere ein Bild in deinen Ordner Webseite DEIN NAME Arbeitsauftrag 10 - Bild in bestehende Datei importieren und Grösse anpassen: Öffne die Datei Bilder.docx Ziehe mit der Maus ein Bild aus dem Ordner Webseite DEIN NAME in die offene Datei Bilder.docx Verkleinere jetzt das erste Bild so, dass es etwa 2cm lange Seiten hat (oder einen etwa 2.5cm langen Durchmesser) Wiederhole dasselbe für die anderen zwei Bilder Jetzt solltest du drei etwa gleich grosse Bilder in der Datei sehen Klicke einmal auf dein erstes Bild Kopiere jetzt dieses Bild (CTRL-C) Arbeitsauftrag 11 - angepasstes Bild in bestehende Datei einfügen: Öffne die Datei Liederliste.docx Klicke in die erste Zelle (erste Spalte der ersten Zeile) deiner Tabelle Füge jetzt das vorher kopierte Bild dort ein (CTRL-V) Jennifer Lopez I ain t your mama Wo die vier Sterne sind, sollte jetzt dein erstes Bild sein. Wie in der oberen Tabelle: Schreibe nun den Künstlernamen in die zweite Spalte der ersten Zeile und den Liedtitel in die dritte Spalte der ersten Zeile Klicke jetzt in die erste Spalte der zweiten Zeile Füge dort das nächste Bild ein (Kopiere es zuerst aus der Datei Bilder.docx ) Wiederhole alle restlichen Schritte für die anderen zwei Bilder und Lieder Suche nach weiteren Bildern und speichere sie im Ordner Webseite DEIN NAME Ergänze die Tabelle mit weiteren Bildern, Künstlerinnen und Liedern

5 Arbeitsauftrag 12 - Inhalt einer Datei erstellen: Öffne die Datei Wer_ich_bin.docx Klicke den Cursor mit der Maus in die fünfte Zeile deiner Tabelle Schreibe in diese Zeile die Überschrift Wer ich bin Klicke mit der Maus in die siebte Zeile deiner Tabelle Schreibe in diese Zeile einen kleinen Aufsatz darüber, wer du bist, also woher du kommst, was dein Lieblingsessen ist, deine Hobbies, etwas über deine Freunde usw. und schliesse sie Arbeitsauftrag 13 - Inhalt einer Datei erstellen: Öffne die Datei Meine_Klasse.docx Klicke den Cursor mit der Maus in die fünfte Zeile deiner Tabelle Schreibe in diese Zeile die Überschrift Meine Klasse Klicke mit der Maus in die siebte Zeile deiner Tabelle Schreibe ein paar Sätze über deine Klasse (verwende nur Fantasienamen) und schliesse sie Arbeitsauftrag 14 - Inhalt einer Datei erstellen, bestehenden Text einfügen: Öffne die Datei Mein Zukunftstag 2016 Klicke den Cursor mit der Maus in die fünfte Zeile deiner Tabelle Schreibe in diese Zeile die Überschrift Mein Zukunftstag 2016 Klicke mit der Maus in die siebte Zeile deiner Tabelle Suche und öffne (Doppelklick) die Datei mit deinem Aufsatz zum Zukunftstag Markiere den Aufsatztext mit der Maus (blau anmalen) Kopiere den Aufsatztext (CTRL-C) Schliesse den Aufsatz Klicke wieder auf die Datei Mein Zukunftstag 2016 Klicke den Cursor in die siebte Zeile deiner Tabelle Füge jetzt den kopierten Text in die siebte Zeile der Tabelle ein (CTRL-V) und schliesse sie Arbeitsauftrag 15 - Inhalt einer Datei erstellen: Öffne die Datei Meine_Lieblingsmusik.docx Klicke den Cursor mit der Maus in die fünfte Zeile deiner Tabelle Schreibe in diese Zeile die Überschrift Meine Lieblingsmusik Klicke mit dem Cursor in die siebte Zeilen Erstelle in der siebten Zeile eine Tabelle mit sieben Zeilen und drei Spalten Wiederhole jetzt die Schritte wie in Arbeitsauftrag 9 und schliesse sie Arbeitsauftrag 16 - Inhalt einer Datei erstellen: Öffne die Datei Mein_Hobby.docx Klicke den Cursor mit der Maus in die fünfte Zeile deiner Tabelle Schreibe in diese Zeile die Überschrift Mein Hobby Klicke mit der Maus in die siebte Zeile deiner Tabelle Schreibe ein paar Sätze über dein Hobby und wann du es ausübst und schliesse sie Arbeitsauftrag 17 - Linkleiste auf allen Seiten erstellen: Öffne die Datei Wer_ich_bin.docx und schreibe in die fünf Spalten der

6 dritten Zeile Titel, so wie hier im nachfolgenden Beispiel: Wer ich bin Meine Klasse Mein Hobby Zukunftstag Meine Musik. Öffne die Datei Meine_Klasse.docx Beschrifte auch hier die Spalten gleich wie oben Öffne die Datei Mein_Hobby.docx Beschrifte auch hier die Spalten gleich wie oben Öffne die Datei Mein_Zukunftstag_2016.docx Beschrifte auch hier die Spalten gleich wie oben Öffne die Datei Meine_Lieblingsmusik.docx Beschrifte auch hier die Spalten gleich wie oben Arbeitsauftrag 18 - Sicherheitskopie des Ordners erzeugen: Jetzt machst du eine erneute Sicherheitskopie deiner bisherigen Arbeit Schliesse alle Dateien und Ordner Klicke in den Desktop Klicke nun ein Mal auf den Ordner Webseite MEIN NAME Mache eine Kopie des Ordners (CTRL-C) Klicke erneut ein Mal in den Desktop Füge nun die Kopie auf deinem Desktop ein (CTRL-V), als Sicherheitskopie Arbeitsauftrag 19 - Word-Dokumente in HTML-Dokumente konvertieren: Öffne die Word-Datei Wer ich bin.docx Unter dem Menüpunkt Datei, wähle Speichern unter Wähle als Dateiformat das Format.htm/.html (als Webseite speichern) Der Computer erstellt nun eine Kopie der Word-Datei als HTML-Datei, die du alle in deinem Ordner sehen kannst Arbeitsauftrag 20 - Konvertiere alle Word-Dateien in HTML-Dateien: Wiederhole die obigen Schritte (siehe Arbeitsauftrag 19) für alle restlichen vier Dateien und konvertiere sie in HTML-Dateien Kontrolliere, ob du am Schluss alle fünf Word-Dateien auch als HTML-Dateien in deinem Ordner hast Arbeitsauftrag 21 - Links unter den einzelnen Seiten der Webseite erstellen: Öffne das Word-Programm Wähle unter dem Menüpunkt Datei die Option Datei öffnen öffne nun die vorher erstellte HTML-Datei ( Wer ich bin.html )

7 In der nun offenen Datei siehst du die fünf Überschriften in der dritten Zeile deiner Tabelle wie folgt: (Wer ich bin) Meine Klasse Mein Hobby Zukunftstag Meine Musik Markiere nun die Überschrift Meine Klasse und erstelle einen Hyperlink zur entsprechenden Datei meine Klasse.html Markiere nun die Überschrift Mein Hobby in der dritten Zeile und erstelle einen Hyperlink zur entsprechenden Datei Mein Hobby.html Markiere nun die Überschrift Zukunftstag und erstelle einen Hyperlink zur entsprechenden Datei Zukunftstag.html Markiere nun die Überschrift Meine Musik und erstelle einen Hyperlink zur Datei Meine Musik.html Die Überschrift Wer ich bin bleibt stehen, ohne verlinkt zu werden Arbeitsauftrag 22 - Links unter den einzelnen Seiten erstellen: Wiederhole diese Schritte aus Arbeitsauftrag 21 für die vier restlichen HTML- Dokumente, die du konvertiert hast und verlinke alle Überschriften mit den entsprechenden HTML-Dateien [Beachte: diejenige Überschrift, welche mit dem Dateinamen übereinstimmt, verlinkst du jeweils NICHT! Also in jedem Dokument hat es vier Links und eine Überschrift, die in Klammern steht, die nicht verlinkt wird. Sie stimmt mit dem Dateinamen überein.] Speichere alle Dateien Schliesse alle Dateien Schliesse alle Programme Schliesse alle Ordner Arbeitsauftrag 23 - Erstelle eine Sicherheitskopie deines Ordners: Klicke ein Mal in den Desktop Wähle nun den Ordner, den du kopieren möchtest, mit einem Klick an Wähle CTRL-C und kopiere den Ordner Füge eine Kopie des Ordners auf dem Desktop ein (CTRL-V) Eine Sicherheitskopie deines Ordners ist nun auf dem Desktop erstellt Arbeitsauftrag 24 - Testen der verlinkten Webseiten: Öffne deinen Ordner Doppelklicke eine deiner HTML-Seiten Im Webbrowser wirst du nun deine Webseite mit den Links sehen Teste die von dir erstellten Links, indem du sie anklickst - führen sie zu den richtigen Seiten, die du angegeben hast? Korrigiere, wenn nötig Arbeitsauftrag 25 - Inhalt der Webseiten erstellen: Erstelle nun für alle deiner fünf Seiten den Inhalt Speichere zwischendurch deine geschriebenen Texte Erstelle Sicherheitskopien und kopiere deine Arbeit auf deinen Memorystick

8 3. Informationen finden: Nutze das Internet für dich Du möchtest einen Kuchen backen, aber weisst nicht, wie das geht. Du möchtest nochmals schauen, wie man Winkel misst, für eine anstehende Geometrieprüfung, aber du kannst niemanden fragen. Oder du würdest gerne wissen, wie Samira immer diese tolle Frisur hinbekommt, diese schönen, französischen Zöpfe Wie macht man solche Zöpfe bloss? Im Internet kannst du Antworten zu solchen und unendlich vielen anderen Fragen finden. Die folgenden Abschnitte erklären dir Schritt für Schritt, wie das geht. a. Google Google.com oder google.ch ist eine Internetseite, die speziell gemacht wurde, um Informationen im Internet zu finden. Solche Seiten nennt man Suchmaschinen. Doch wie funktioniert das? Was heisst das? Arbeitsauftrag 1 - Informationen auf google.com oder google.ch suchen: Öffne den Internetbrowser Tippe in die Adresszeile (ganz zuoberst) die Internetseite google.ch ein Drücke die Entertaste (Eingabetaste) Die google.ch Seite erscheint auf deinem Bildschirm. In der Mitte siehst du ein Eingabefeld. Dort hinein kannst du die Wörter tippen, nach denen du das Internet durchsuchen möchtest. Du kannst auch direkt Fragen hineinschreiben, so wie du einem Menschen eine Frage stellst, wenn du etwas von ihm wissen möchtest. Samira würdest du fragen: Samira, wie machst du deine französischen Zöpfe? Vielleicht möchte Samira ihr Geheimnis für sich behalten. Doch kein Problem für dich, die Suchmaschine kannst du auch fragen! Du tippst einfach ein: Wie macht man französische Zöpfe? Probieren wir das selber wie folgt aus: Arbeitsauftrag 2 - eine Frage unter Google eingeben, eine Information finden: Auf google.ch, tippe die folgende Frage ins Textfeld: Wie macht man französische Zöpfe? Drücke die Entertaste Du siehst eine Liste mit den Antworten Klicke auf die Links und finde die Antwort zu deiner Frage [Wenn du Videos zu deiner Antwort schauen möchtest, klicke sie oberhalb an] Ein anderes Beispiel: Wir kennen den Hauptort des Kantons Zürich. Aber welches ist der Hauptort des Kantons Aargau? Wieder können wir diese Frage direkt eingeben. Oder wir können auch einfach die Stichwörter ins Textfeld unter google.ch eintippen und nach der Antwort suchen. So wie nachfolgend: Arbeitsauftrag 3 - Stichwörter in Google eingeben, eine Information finden: Auf google.ch, tippe die Stichworte Kanton, Aargau und Hauptstadt ein Drücke die Entertaste Du siehst eine Liste mit Internetseiten, die deine Stichworte enthalten Klicke auf die Links und finde die Antwort zu deiner Frage [Manchmal kommt die gesuchte Antwort direkt zuoberst auf der Resultateseite]

9 Weitere Beispiel: Wie macht man Graffitis? Wie zeichnet man Rösser? Wie backt man eine Quarktorte? Wie kann man seine Freundin überraschen? Wie misst man Winkel? Wie singt man richtig? Wie konjugiert man das Verb être? Arbeitsauftrag 4 - Eigene Fragen eintippen und die Antworten finden: Überlege dir etwas, die du gerne wissen möchtest Tippe die Frage unter google.ch ein und finde die Antworten und Videos dazu Präsentiere dein Resultat der Klasse und zeige, wie du vorgegangen bist b. Youtube Youtube.com, ähnlich wie google.com, ist eine Internetseite, auf welcher du nach Informationen suchen und diese auch finden kannst. Das Spezielle auf youtube.com ist, dass alle Suchresultate Videos sind, die du anklicken und anschauen kannst. Wenn du also ein Video suchst, das dir zum Beispiel erklären soll, wie man Breakdance tanzt, dann gib diese Frage in die Suchmaschine google.ch oder eben youtube.ch ein: Wie tanzt man Breakdance? [Hinweis: Du kannst für eine Suche auch immer zuerst google.ch wählen, um deine Frage einzutippen. Bei den Resultaten dann kannst du zuoberst einfach auf Videos klicken. Dann werden deine Resultate nochmals sortiert und nur Videos angezeigt, die deine Frage beantworten, keine Textseiten mehr.] Probieren wir das letzte Beispiel gleich aus: Arbeitsauftrag 5 - Information als Videos unter Youtube oder Google finden: Auf youtube.ch - oder google.ch -, tippe die folgende Frage ins Textfeld: Wie tanzt man Breakdance? Drücke die Entertaste Du siehst die Liste mit Antwortvideos (Unter google.ch, klicke Videos an) Klicke auf die Videos und schaue dir die Antworten zu deiner Frage an [Wenn dir ein Video nicht gefällt, oder es nicht gut ist, versuche andere Videos oder gib eine etwas genauere Frage ein. Zum Beispiel: Wie tanzt man New York Hip Hop Breakdance for Girls? ] Wichtig! Im Internet gibt es viel mehr englische Seiten als es deutsche Seiten gibt. Deshalb: Wenn du manchmal keine guten Antworten auf deine Fragen findest, dann tippe die Frage auf Englisch ein. Du wirst sehen, es gibt viel mehr und vielfach bessere Seiten und Videos auf Englisch. Auf Englisch kann man die Fragen so stellen: How to? (Deutsch: Wie macht man?) Wenn du nun auf Englisch suchen möchtest, aber ein Wort auf Englisch nicht kennst, dann suche es im Internet unter dict.cc oder oder frage wiederum einfach google.ch. Wenn du zum Beispiel Haarzopf auf Englisch nicht kennst, tippe zuerst unter google.ch ein: Wie sagt man Haarzopf auf Englisch? Schreibe dir das Wort ab und brauche es im Anschluss für deine englische Suche. Tippe dann ein: How to? und schreibe hinter die drei Punkte das Wort, das du auf Englisch soeben herausgefunden hast. Klicke danach die Entertaste und schau dir deine Resultate an.

10 Machen wir unser Beispiel der Haarzöpfe gleich selber durch. Hier sieht es also wie folgt aus: Arbeitsauftrag 6 - Englisches Wort finden und englische Frage stellen: Auf google.ch, tippe ein: Was heisst Haarzopf auf Englisch? [Das Wort, das wir im Internet herausfinden werden, heisst pigtail.] Auf google.ch, tippe nun die englische Frage ein: How to [make] pigtails? Schau dir die Resultate an und klicke auf die Videos Um zusätzlich zu zeigen, wie unterschiedlich die Resultate auf Deutsch und auf Englisch sein können, machen wir das folgende Experiment: Arbeitsauftrag 7 - Englische und deutsche Resultate vergleichen: Unter google.ch tippe die Frage ein: Wie tanzt man Hip Hop Breakdance? Schau dir die Resultate an Öffne jetzt ein neues Browserfenster und tippe dieselbe Frage auf Englisch ein: How to dance hip hop break dance? Vergleiche nun die beiden Listen - wo gibt es mehr und bessere Resultate? 4. Bilder sammeln Öffne das Programm fürs Internet, den Internetbrowser Gehe auf die Seite und suche Bilder, die dir gefallen und die du für deine Webseite vielleicht brauchen möchtest. Speichere die Bilder in deinem neuen Ordner.