Website Konzept - Bildnerische Gestaltung, Kantonsschule Enge

Kantonsschule Enge Zürich, BG/DTP/SBT, Arbeitsblätter
Webdesign
Webdesign, 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, Webdesign 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).
Unterricht Bildnerische Gestaltung, Mario Leimbacher, Markus Kachel
bg.ken.ch/webdesign/bg_arbeitsblaetter_webdesign.pdf
Kantonsschule Enge Zürich, BG/DTP/SBT, Arbeitsblätter
Webdesign
Webdesign, Sitestruktur
Arbeitsstruktur:
2
Die Website (Site) besteht aus einem Basisordner, in dem einerseits die HTMLDateien 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: b:
Start (rechte Maustaste)- Explorer
Basisordner für gesamtes Projekt erstellen (H:/website)
Materialordner erstellen (H:/website/material)
Basisordner für Site erstellen (H:/website/www.xyz.ch)
Ordner für Sitebilder erstellen (H:/website/www.xyz.ch/bilder)
Ordner für Sitestile erstellen (H:/website/www.xyz.ch/stile)
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/www.xyz.ch)
Standard Bilderordener angeben (H:/website/www.xyz.ch/bilder)
Unterricht Bildnerische Gestaltung, Mario Leimbacher, Markus Kachel
bg.ken.ch/webdesign/bg_arbeitsblaetter_webdesign.pdf
Kantonsschule Enge Zürich, BG/DTP/SBT, Arbeitsblätter
Webdesign
Webdesign, Layoutvorlage, 1024 x 768 Pixel, Felder mit je 100 x 100 Pixel
Unterricht Bildnerische Gestaltung, Mario Leimbacher, Markus Kachel
bg.ken.ch/webdesign/bg_arbeitsblaetter_webdesign.pdf
2
Kantonsschule Enge Zürich, BG/DTP/SBT, Arbeitsblätter
Webdesign
Technik > Anleitung > HTML
Webdesign, 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
Webdesig H3a Text (Titel)
</title>
Endtag des Titels
</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> Starttag für eine grosse Zeilenschaltung
<strong> Starttag für fetten Text
Mein Name ist Mario Leimbacher Text
</strong>
Endtag für fetten Text
</p>
Endtag für grosse Zeilenschaltung
<br> Tag für eine kleine Zeilenschalung (Einzeltag)
Ich bin Sch&uuml;ler der Klasse H3a
Text (mit Umlaut)
<hr>
<p>
<font color=“#FF0000“>
</p>
horizontale Linie (Einzeltag)
Starttag für Schriftfarbe mit Attribut und Attributwert (Hexadezimalfarbwert)
Dies ist meine erste Website
</font>
Text
Endtag für Textfarbe
</body>
Endtag für den Dateikörper
</html>
Endtag für die ganze Datei
Unterricht Bildnerische Gestaltung, Mario Leimbacher, Markus Kachel
bg.ken.ch/webdesign/bg_arbeitsblaetter_webdesign.pdf
Kantonsschule Enge Zürich, BG/DTP/SBT, Arbeitsblätter
Webdesign
Technik > Anleitung > HTML
Webdesign, HTML-Code
Texteditor:
5
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:
02: 03:
Start-Programme-Zubehör-Editor
04:
Internet-Explorer oder Firefox
Datei öffnen - gespeicherte Datei im Webordner suchen und öffnen
Die Datei sollte nun angezeigt werden
Browser öffnen:
HTML-Code und Text nach Vorlage unten eintippen.
Datei speichern (in den Webordner im eigenen Verzeichnis)
Dateityp: Textdateien (.txt), Dateiname: index.htm
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.
Unterricht Bildnerische Gestaltung, Mario Leimbacher, Markus Kachel
bg.ken.ch/webdesign/bg_arbeitsblaetter_webdesign.pdf