• Expression Web: CSS
• Dreamweaver 8: CSS
•  

Konzept der Site in einem Webeditor

Warum und wie man in enem Webeditor eine "site" anlegt und was die Vorteile sind.

Weiters ein Vorschlag, wie man alle Dateien, Informationen und Arbeitsschritte vom Fach Informationsmanagement und Medientechnik am eigenen Computer organisieren könnte.

Überblick

Lokale Arbeitskopie

Neue Websites werden zuerst am eigenen Computer (oft Lokal, Lokale Ansicht oder local genannt) erstellt. Erst wenn sie fertig sind, werden sie auf den Webserver hochgeladen und somit "online gestellt". Das heißt, sie werden in die entsprechenden Ordner des Webspaces (oft Server oder remote genannt) beim Provider kopiert.Von dort können sie dann von den BenutzerInnen der Website abgerufen werden.

Genauso wird mit Änderungen und Aktualisierungen an der Website vorgegangen. Diese werden zuerst an der lokalen Kopie am eigenen Computer gemacht. Erst wenn alles auf Fehler überprüft worden ist, wird sie auf den Webserver hochgeladen und damit den BenutzerInnen zur Verfügung gestellt.

Vorteile einer Site

Wenn in einem Webeditor eine Site definiert ist, kann er alle entsprechenden Dateien als eine Gesamtheit betrachten. Das bringt unter anderem folgende Vorteile:

Kann Aufgaben erfüllen wie:

• Verweise auf andere Dateien (Hyperlinks, eingefügte Bilder) werden automatisch aktualisiert, wenn:
  • eine Datei umbenannt wird
  • eine Datei in einen anderen Ordner verschoben wird

  oder es wird gewarnt, dass Verweise existieren, die ins Leere gehen werden, wenn

  • eine Datei gelöscht wird.

  Vorsicht: Dies gilt nicht für id-Namen und darauf verweisende Hyperlinks. Diese müssen selbst aktualisiert werden.

• Es kann die gesamte Website in einem Stück hochgeladen werden.
• Man kann in der gesamten Website Suchen und Ersetzen oder Überprüfen anwenden, ohne die Dateien einzeln angeben zu müssen.

Webeditoren erkennen dann Fehler wie:

• Eine Datei (z.B. ein Bild) ist nicht innerhalb des Bereiches der site, sondern in einem Ordner außerhalb.
  Der Fehler wird beim Arbeiten lokal nicht erkannt, da der Webeditor oder ein Browser auf die Datei zugreifen kann und sie daher "korrekt" darstellt. Aber beim Hochladen der gesamten site ist die Datei nicht inkludiert, bzw. beim individuellen Hochladen der einzelnen Datei kann sie nicht hochgeladen werden, da sie in einen Ordner außerhalb des Webspaces kopiert werden müsste.
  Somit fehlt sie am Webserver und die Browser der BenutzerInnen können sie daher nicht anzeigen.
• Ein Hyperlink zeigt auf eine Datei, die nicht (mehr) existiert.

Ordnerstruktur (Empfehlung)

Um beim Konzipieren und Erstellen der Website den Überblick zu bewahren, sollte man am Computer mehrere Ordner anlegen.

Die Ordnerstruktur für die Berufsreifeprüfung kann jede/r individuell anlegen, z.B. einen Ordner "BRP", darin einen Ordner "Medieninformatik", oder wie es jetzt heißt "IFOM", "Medientechnik" oder "IFOM und Medientechnik" und natürlich Ordner die der anderen Fächer.
Im Ordner "Medieninformatik" können Ordner angelegt werden für: Unterlagen, Übungen und auch einen für die Projektarbeit. Dieser kann "Projektarbeit" oder "Website" heißen oder aber auch den Namen der Firma tragen, für die ihr die Website erstellt.

In diesem Ordner sollte es einen Ordner für "Originale" geben. Darin sollten alle Daten, die man vom Auftraggeber/in bekommt, sowie alle selbstgemachten Fotos, unverändert (im Original) gespeichert werden. Auf diese kann man dann "im Notfall" zurückgreifen.

Weiters ein Ordner "Arbeit". In diesem werden alle Zwischenergebnisse und Arbeitsschritte gespeichert. Dies sind verfasste Texte, Konzepte, Ausarbeitungen, bearbeitete Fotos usw. Dazu können diverse Unterordner angelegt werden.

Zuletzt ein Ordner, in dem die lokale Kopie der Website gespeichert ist. Dieser kann z.B. " online" heißen.

Web-Editoren

Vorbereitungen (für alle Webeditoren gleich)

Mit dem Windows-Explorer (auf Mac mit dem Finder) auf dem eigenen Computer einen Ordner für die Website anlegen und diesem einen aussagekräftigen Namen geben (bei der Projektarbeit z.B. "online" oder den Firmennamen der/des AuftraggeberIn, …). Dieser Ordner soll lokal (also auf dem eigenen Computer) alle Dateien enthalten, die dann beim Hochladen eins-zu-eins auf den Webserver kopiert werden.

In Dreamweaver wird dieser Ordner "Stammordner" genannt, in Expression Web einfach "Speicherort". Dieser lokale Ordner entspricht dann dem Ordner im Webspace, der von den Kunden im Browser allein durch Angabe der Domain selbst erreicht ist (z.B. http://www.firma.at).

Aus diesem Grund, müssen alle Dateien, die in der Website verwendet werden, innerhalb dieses "Stammordners" gespeichert werden, da sie sonst nicht auf den Webspace hochgeladen werden können. Dies betrifft vor allem alle Bilder. Verweise auf andere Websites (z.B. Link auf Wikipedia) sind davon natürlich nicht betroffen.

Arbeiten mit einer Site

Expression Web | BlueGriffon | Dreamweaver 8

Anmerkung: sollte hier gemacht werden (wegen der UE 4, sites werden dort benötigt) - Nachgeholt am Mi 02.11.2011 (ergänzt mit Teilen von "site hochladen", 2. Semester - ist dort komplett)
Ev. vor Hyperlinks machen, da sonst "Fadenkreuz" ev. nicht funktioniert

 

Upload / ftp

siehe Provider: Upload (todo: Pfad bei Bedarf ändern)

 

Website realisieren: Umsetzen von Feinkonzepte und Designkonzept

Als erster Schritt sollte im Webeditor eine Site angelegt werden. (siehe Vorteile und Anlegen im Webeditor).

Um das Design zu testen und gleichzeitig umzusetzten, ist es bei kleinen, statischen Website wie für die Projektarbeit sinnvoll, zuerst als Muster eine einzige Webseite (HTML-Datei) anzulegen (Name daher z.B. muster.html). In diese Musterwebseite wird von allen Strukturen und Formatierungen, die man in der Website benutzen möchte, ein Exemplar in dieser Datei erstellt.

Dies ist vor Allem die Grundstruktur, mit Banner bzw. Kopfbereich, die Navigation, Inhaltsbereich, Fusszeile, usw. Im Inhaltsbereich werden Überschriften, Textblöcke aller Arten (normale Absätze, wichtige Infos, Auflistungen, Hinweise, zentriere Texte, …), Bilder, Diagramme, Hyperlinks, …) angelegt. Darunter besondere Inhalte wie Bildgalerien, Tabellen, usw.

Dazu können Blindtexte (z.B. von www.blindtextgenerator.de ) und Platzhalter-Bilder (z.B. von dummy-image-generator.com) verwendet werden.

Wichtig ist, dass alle CSS-Regeln in einer seperaten CSS-Datei angelegt werden. Wenn nun alles formatiert ist, hat man eine komplett fertige CSS-Datei schon mit allen Regeln die in der gesamten Website vorkommen werden.

In dieser Musterwebseite sieht man nun, ob das Design funktioniert und die einzelnen "Bausteine" zusammenpassen und man kann gegebenenfalls noch Änderungen durchführen.

Ist die Musterwebseite fertig, so kann man für jede gewünschte Webseite die HTML-Datei der Musterwebseite (muster.html) kopieren (in Dreamweaver besser mit Strg+D duplizieren). Danach wird die Kopie jeweils auf den richtigen Namen umbenannt, die nicht benötigten Inhalte gelöscht und mit den jeweiligen Texten, Bilder, Hyperlinks etc. gefüllt.

 

"Henne-Ei-Problem" bei Navigation

Dabei ergibt sich mit der Navigation folgendes Problem: Wenn die Musterdatei fertig stellen, gibt es noch keine anderen HTML-Dateien. Daher können wir für die Navigation keine Hyperlinks auf diese Dateien erstellen. Somit müssen wir die Musterdatei ohne Hyperlinks in der Navigation duplizieren und müssen diese dann in jeder einzelnen Datei erstellen.

Lösungen:

• Erstellen der Hyperlinks im Voraus ohne existierenden (Ziel)Dateien:
  Wenn man im Eigenschaftsfenster im Feld "Hyperlink" einen Dateinamen als Ziel angibt, überprüft der Webeditor nicht, ob diese Datei existiert.Wenn wir uns die Dateinamen der einzelnen Seiten schon vorher überlegen, dann können wir sie nun eintippen und die Hyperlinks im Voraus erstellen. Wichtig: Eingabe mit der Eingabetaste bestätigen, sonst wird sie nicht angenommen.
  Wenn wir nun die Musterdatei kopieren bzw. duplizieren, so beinhaltet sie schon die korrekte Navigation inklusive Hyperlinks.
• Navigation zwischen den Dateien kopieren:
  Befinden sich die HTML-Dateien innerhalb des selben Ordners, so sind die Hyperlinks in der Navigation ident. Um nicht wie bei der Problembeschreibung erläutert, in jeder HTML-Datei die Navigationseinträge ändern zu müssen, kann man diese kopieren.
  • Dazu im der Datei, in der die vollständige Navigationsliste erstellt ist, in die Liste klicken.
  • In der Statusleiste in Zweig der Dokumentstruktur auf das tag "div#navigation" klicken (oder welchen Namen ihr verwendet habt).
  • Nun das gesamte div-tag (mit Inhalt) kopieren (Strg+C).
  • Für jede weitere Datei: In die Liste klicken.
  • In der Statusleiste in Zweig der Dokumentstruktur auf das tag "div#navigation" klicken (oder welchen Namen ihr verwendet habt).
  • Einfügen der kopierten, vollständigen Liste mit Strg+V und damit überschreiben der vorhandenen, unvollständigen.
  Dies funktioniert aber nur, wenn die Navigationslisten ident sind. Wurde eine id für den "aktuellen" Eintrag verwendet, so wird dieser überschrieben. Dann müsste ihr selbst entscheiden, was weniger Arbeit bedeutet: kopieren und neu zuordnen oder in jeder Datei die Liste erweitern.
• Suche/Ersetzten
  Ist der zu ersetztende Teil in allen HTML-Dateien gleich, so kann man mit Suchen/Ersetzen arbeiten. Dies ist sehr effizient, kann aber auch Probleme bereiten.
  • Umsetzung: In einer HTML-Datei die Änderungen durchführen und danach den geänderten HTML-Code markieren und kopieren. In eine andere HTML-Datei wechseln und dort den noch unveränderten HTML-Code markieren. Wenn man nun Suchen/Ersetzten aufruft, fügen die meisten Webeditoren den markierten Code bei Suchen ein. Nun kann man bei Ersetzten mit Einfügen den zu ändernden HTML-Code einfügen.
  • Voraussetzung zum Gelingen ist, dass der HTML-Code in allen HTML-Dateien vollständig identisch ist. Schon kleine Abweichungen wie ein Leerzeichen mehr oder ein anderer Zeilenumbruch im Quellcode verhindern das Ersetzten und somit das Gelingen des Arbeitsschrittes.

Kopieren nachträglicher Änderungen

Bei Bereiche, die bei allen Dateien gleich sein sollen, sind nachträgliche Änderungen meist ärgerlich, da man die gleichen Arbeitsschritte in allen Dateien durchführen muss.

Ist der HTML-Code in allen Dateien jedoch vollständig gleich, kann man folgende Möglichkeiten verwenden:

• Kopieren und Einfügen ganzer Blöcke (meist div-Bereiche)
  Das Kopieren von ganzen div-Bereichen funktioniert immer dann, wenn die Inhalte ident sind. Wird z.B. im Kopf etwas verändert und ist der Kopf auf jeder Seite identisch, dann kann nach oben beschriebenen Weise vorgegangen werden.
• Bei kleinen Änderungen ist Suchen/Ersetzen oft effizienter:
  Bei nachträglichen Änderungen, wie z.B. das Ausbessern eines Tippfehlers im Text, kann man auch den Befehl "Suchen und ersetzen…" verwenden. Soll in der gesamten Website etwas "ausgetauscht" werden, dann in Suchen die "alten" Textstelle eingeben (diese muss eindeutig sein, damit nicht auch andere Stellen unerwünschter Weise ausgetauscht werden) und in Ersetzten die "neue". Oft muss man aber dann im Quelltext ersetzen - vorsichtig sein!

 

Titel

Titel der einzelnen Webseiten:
Jede Webseite hat einen Titel, der beim Anzeigen im Browser in dessen Titelleiste und somit auch in der Taskleiste erscheint. Dies sollte man unbedingt machen, da sonst der provisorische Titel "Untitled 1" angezeigt werden würde.
Der neue Titel sollte gleich nach dem Duplizieren der Musterdatei und dem speichern mit neuen Dateinamen erfolgen.
In Dreamweaver wird der Titel in der Symbolleiste eingegeben, in der sich auch die Schaltflächen zum Umschalten von Code- zu Entwurfsansicht befinden.
Tipp: Der Titel sollte sowohl den Namen der Site (z.B. Firma) und auch der einzelnen Seite enthalten. Ich bevorzuge die Reihenfolge Seitenname - Trennzeichen - Sitename, weil dann in der Taskleiste immer die einzelne Seite anhand des Namens indentifizierbar bleibt.
Beispiele für eine fiktive Firma Gastro Ges.m.b.H. (auch für verschiedene Trennzeichen):

• Kontakt - Gastro Ges.m.b.H.
• Impressum | Gastro Ges.m.b.H.
• Mitarbeiter ~ Gastro Ges.m.b.H.
• .: Produkte :. .: Gastro Ges.m.b.H. :.