Webdesign, Aufgabestellung 1

Transkript

1 , Aufgabestellung 1 1. Teamarbeit Die Website wird in Teamarbeit gemacht (2er-Teams). Innerhalb des Teams werden Konzept, Design, Inhalt und Arbeitsverteilung besprochen und bestimmt. 2. Inhalte Es wird eine Website mit Informationen geplant, die es nicht schon mehrfach im Internet gibt. Die Inhalte sollen exklusiv sein. Möglichst ein Thema wählen, zu dem man persönlich Beziehungen hat. Zur Website gehört ein Impressum mit Informationen über die Teammitglieder und iher Arbeitsteilung. 3. Design Das Design soll einheitlich und dadurch klar erkennbar sein. Ein Farbkonzept wird ausgearbeitet (eine Grundfarbe und wenig Kontrastfarben). - Einheitliche Schriften und sinnvolle Schriftgrössen bestimmen. - Ein klares Navigationskonzept soll Übersichtlichkeit gewährleisten. (Hauptnavigation, Rubriken und Sekundärnavigation) - Ein eigenes und vielleicht sogar unkonventionelles Design ist erwünscht. - Das Design darf nicht nach einer Designvorlage übernommen werden. Arbeitsschritte 1. Konzept und Inhalt (Diskussion protokollieren, Inhalte formulieren) 2. Design (Layout, Farben, Schriften, Bilder usw., Layout-Skizzen auf Papier, auf Vorlageblätter) 3. Arbeitsverteilung - Texte recherchieren, suchen und schreiben, Bilder sammeln, scannen - Photoshoparbeit: Designelemente, Buttons, Logo, Bildbearbeitung - Siteverantwortung, im Dreamweaver 4. Dateitransfer untereinander besprechen und abmachen 5. Arbeitsbeginn Bewertung Inhalt 1. Werden Inhalte präsentiert, die nicht schon oft im Internet publiziert wurden (Exklusivität)? 2. Gehen die Informationen in die Tiefe? Eigene Erfahrungen und Erlebnisse beschreiben. Bilder sollen mit Legenden und Quellangaben versehen werden. 3. Eigene Recherche, eigene Texte, eigene Bilder? In der Arbeitsteilung (Impressum) soll festgehalten werden, wer für die Recherche und wer für die einzelnen Texte verantwortlich ist. Form/Design 1. Ist das Erscheinungsbild (Design) einheitlich und wird ein Farbkonzept deutlich? Produktion und Gestaltung von Logo, Navigationselementen und Grafiken gemeinsam konzipieren und überarbeiten. 2. Stimmen Design und Inhalt (Zielpublikum) überein? 3. Stimmen die Farben der Website, der Schriften, Bilder und Logos zusammen? 4. Sind die Grössenverhältnisse bildschirmgerecht? Technik/Funktionen 1. Funktioniert die Website (Ordner, Dateien, Bilderordner, Datenbanken) 2. Funktioniert die Navigation (Seitenwechsel mit Bildern, Buttons oder Texten) Die Navigation soll in einer eigenen Tabelle gestaltet werden, damit sie einfach auf alle anderen Seiten übertragen werden kann (mit Kopieren und Einfügen). 3. Funktionieren alle Links? 4. Externe (absolute) Links in neues Browserfenster (target=blank).

2 , Sitestruktur 2 Arbeitsstruktur: Die Website (Site) besteht aus einem Basisordner, in dem einerseits die HTML- Dateien und andererseits in weiteren Ordnern innerhalb der Website die dazugehörenden Bilder, Stile und weitere Downloaddateien gespeichert sind. Auf dem eigenen Comuter wird die Website mit allen Ordnern und Dateien so vorbereitet, wie sie dann auf dem eigentlichen Internetserver aussehen und funktionieren soll. Teamarbeit Wenn mehrere Personen an der Website arbeiten, muss eine die Verantwortung für die Daten der Site übernehmen. Diese Person liefert am Schluss der Lehrperson die definitive Site für den Webserver. Damit alle Personen an der Site arbeiten können, muss genau bestimmt werden, wer an welchen Dateien arbeitet und diese dem Verantwortlichen sendet. Die gesamte Site muss nach jedem wesentlichen Schritt der Lehrperson geschickt werden, damit die Site nötigenfalls den anderen Gruppenmitgliedern zur Weiterarbeit zur Verfügung gestellt werden kann. Im ersten Schritt wird die Ordnerstruktur auf dem eigenen Computer erstellt. (a). Im zweiten Schritt wird im Dreamweaver diese Ordnerstruktur als Site eingerichtet (b). Datei- und Namenskonventionen Alle Ordner- und Dateinamen innerhalb der Website dürfen keine Umlaute, keine Sonderzeichen und keine Leerschläge enthalten. Für Leerschläge wird ein _ verwendet. a: Ordner für Website erstellen Die Ordner für die Website müssen in einem eigenen Verzeichnis (Netzwerk:H:/) erstellt werden. Nicht im Ordner «eigene Dateien» und auch nicht auf dem Desktop!! Diese Ordner dürfen wärend der ganzen Zeit (Semester), an der man an der Site arbeitet, weder verändert, umbenannt noch gelöscht werden. 01: Windows Explorer öffnen: Start (rechte Maustaste)- Explorer Basisordner für gesamtes Projekt erstellen (H:/website) Materialordner erstellen (H:/website/material) Basisordner für Site erstellen (H:/website/ Ordner für Sitebilder erstellen (H:/website/ Ordner für Sitestile erstellen (H:/website/ b: Dreamweaver einrichten 01: Dreamweaver öffnen: Programme-Macromedia-Dreamweaver 02: Site einrichten: Im Fenster rechts unten: Dateien - Site - Sites bearbeiten neue Site Im Fenster «Sitedefinition» oben erweiteret anwählen Sitenamen angeben Lokalen Stammordner angeben (H:/website/ Standard Bilderordener angeben (H:/website/

3 , Layoutvorlage, 1024 x 768 Pixel, Felder mit je 100 x 100 Pixel 2

4 Technik > Anleitung > HTML, HTML-Code 4 HTML-Code: Der HTML-Code besteht in erster Linie aus Formatierungsbefehlen, den Tags. Die meisten Tags bestehen aus einem einführenden und einem abschliessenden Tag. Die meisten Tags können Attribute sowie Attributwerte enthalten, die das eigentliche Format oder die eigentliche Aktion definieren. <html> Starttag der ganzen Datei <head> <title> Starttag des Dateikopfes (head) Starttag des Titels der Datei </title> Webdesig H3a Endtag des Titels Text (Titel) </head> Endtag des Dateikopfes (head) <body bgcolor=green> Starttag des sichtbaren Dateikörpers (body) mit Atribut für Farbe und Attributwert für grün <p> </p> <strong> Mein Name ist Mario Leimbacher </strong> Starttag für eine grosse Zeilenschaltung Starttag für fetten Text Text Endtag für fetten Text Endtag für grosse Zeilenschaltung <br> Tag für eine kleine Zeilenschalung (Einzeltag) Ich bin Schüler der Klasse H3a Text (mit Umlaut) <hr> <p> <font color= #FF0000 > horizontale Linie (Einzeltag) Starttag für Schriftfarbe mit Attribut und Attributwert (Hexadezimalfarbwert) Dies ist meine erste Website Text </p> </font> Endtag für Textfarbe </body> Endtag für den Dateikörper </html> Endtag für die ganze Datei

5 Technik > Anleitung > HTML, HTML-Code 5 Texteditor: Die üblichen Internetseiten werden als HTML-Seiten bezeichnet. Dies sind einfache Textdateien, in denen der HTML-Code manuell geschrieben werden kann. Wenn Webseiten mit einem einfachen Texteditor (Editor) geschrieben werden, müssen sie als reine Textdateien (txt) ohne Formatierungen mit der Endung.HTM oder.html gespeichert werden. Der HTML-Code bestimmt das Aussehen der Website und das Format der einzelnen Teile des Layouts. erste Übung: 01: Editor öffnen: Start-Programme-Zubehör-Editor 02: HTML-Code und Text nach Vorlage unten eintippen. 03: Datei speichern (in den Webordner im eigenen Verzeichnis) Dateityp: Textdateien (.txt), Dateiname: index.htm 04: Browser öffnen: Internet-Explorer oder Firefox Datei öffnen - gespeicherte Datei im Webordner suchen und öffnen Die Datei sollte nun angezeigt werden 05: Fenster nebeneinander anordnen Das Fenster des Editors und des Browsers sollten so nebeneinander angeordnet werden, dass die Veränderungen, die nun im Editor gemacht werden, jederzeit im Browser mit dem Aktualisierungsbutton ohne Aufwand getestet werden können.