3 Konzeption und Management · für einen Konzern entwickeln, wesentlich mehr Details...

85

3 Konzeption und ManagementIn den letzten Abschnitten haben Sie den Arbeitsbereich erkundet und wichtige Funktionen in Dreamweaver kennen gelernt. Auch in diesem Kapitel wenden wir uns den Grundlagen zu. Dabei handelt es sich um einen kleinen, jedoch essentiellen Exkurs, der für erfolgreiche Websites unerlässlich ist. Sie erfahren gleich, wie Sie professionelle Websites planen, wich-tige Informationen über die Site in Dreamweaver hinterlegen und dadurch das Programm projektbezogen einrichten. Mit diesem Basiswissen erstellen Sie in Teil 2 dann die ersten Webseiten. Die im Folgenden beschriebenen Vorbereitungen unterstützen Sie auch bei der Wartung und Ergänzung bereits vorhandener Dokumente.

3.1 Den Projektablauf planenDie Realisierung erfolgreicher Webprojekte läuft meistens nach dem gleichen Schema ab, wobei Sie die Vorbereitungsphase nicht unterschätzen sollten. Es lohnt sich, hier etwas mehr Zeit zu investieren und das Projekt auf eine solide, gut durchdachte Basis zu stellen. Sie erspa-ren sich dann später unnötige Arbeitsgänge.

Als Projektmanager eines größeren Vorhabens stellen Sie nicht nur den Kontakt zum Kunden her, sondern sind auch Ansprechpartner für alle offenen Fragen Ihrer Projektmitarbeiter. Wer hier den Überblick (und häufig auch einen kühlen Kopf) behält, hat gute Karten. Im Fol-genden lernen Sie den Fahrplan Ihrer Website grob kennen und erhalten wertvolle Hinweise für Ihre Umsetzungsstrategie.

Dabei überschneiden sich einzelne Arbeitsschritte häufig und hängen stark von den gesteck-ten Zielen ab. Zudem müssen Sie bei einer großen Website mit Datenbankanbindung, die Sie für einen Konzern entwickeln, wesentlich mehr Details berücksichtigen als bei einer Shop-Integration für ein mittelständiges Handelsunternehmen oder einem einfachen statischen Webauftritt für einen Handwerker. Beispielsweise ist bei größeren Projekten der Übergang zwischen der Internetwelt, Warenwirtschafts- und ERP-Systemen oft fließend.

Grundsätzlich durchläuft ein Projekt folgende Phasen, die zweckmäßig in einem Arbeitsplan oder Pflichtenheft festgehalten und konkretisiert werden. Suchmaschinenoptimierung sowie andere Marketing-Aktivitäten und Erfolgskontrolle ergänzen diesen groben Fahrplan nach der Veröffentlichung der Site:

Briefing Layout & Inhalte zusammenstellen Umsetzung in Dreamweaver Prüfung bzw. Test der Umsetzung Veröffentlichung

3

86

Konzeption und Management3

3.1.1 Briefing: Inhalte und Struktur festlegen

Erstellen Sie den Webauftritt für einen Kunden, hat dieser meistens schon gewisse Vorstellungen über den Inhalt und die Art der Darstellung. In einem ersten Informationsgespräch, dem so genannten Briefing, sollten Sie daher so viele Informa-tionen wie möglich sammeln.

Erkundigen Sie sich nach den Schwerpunkten des Unternehmens, nach den angebotenen Produkten und Dienstleistungen. Welche Besonderheiten sollten auch im Internet hervor-gehoben werden und wie unterscheidet sich das Unternehmen von anderen? Schreiben Sie alles auf und wenn Sie etwas nicht verstanden haben, fragen Sie nach. Als Außenstehender sehen Sie das Unternehmen häufig etwas anders als der Auftraggeber, so dass Ihre Anre-gungen interessante Impulse liefern können. Halten Sie alle gesammelten Informationen und Anforderungen in einem Lastenheft fest, das Sie Ihrem Auftraggeber überreichen. Dadurch vermeiden Sie Missverständnisse und fassen die Aufgabenstellung übersichtlich zusammen.

Diese Sammelphase ist auch wichtig, wenn Sie Ihre eigenen Webseiten erstellen oder erwei-tern möchten. Gehen Sie jedoch davon aus, mit einer gewissen Betriebsblindheit geschlagen zu sein. Fragen Sie Freunde, Bekannte, Verwandte, wie die Ihr Unternehmen sehen. Auch eine Kunden-Befragung kann wichtige Anhaltspunkte für Ihre zukünftige Webpräsentation liefern. Schließlich möchten Sie damit ein positives Image und Kompetenz vermitteln und weitere neue Kunden gewinnen, die durch die Website angesprochen werden wollen.

Das Strukturdiagramm bestimmt die Verknüpfung einzelner Webseiten und damit die Navigation. Diese kann linear oder vernetzt aufgebaut sein. Häufig kommen auch Mischformen vor.

Notieren Sie alle Inhalte, die online veröffentlicht werden sollen, und sortieren Sie diese dann in thematisch verwandte Kategorien. Überlegen Sie, welche Inhalte so wichtig sind, dass sie auf der Homepage präsentiert werden müssen. Diese sollten stets aktualisiert werden und müssen daher interessant bzw. zielgruppenrelevant sein. Erstellen Sie ein Strukturdiagramm, in das Sie neben der Homepage die Themen der Unterseiten einzeichnen. Ziehen Sie Linien zwischen einzelnen Seiten, die per Hyperlink miteinander verbunden werden sollen. Diese Struktur sollte sich in der Navigationsleiste widerspiegeln. Wichtig ist, dass der Besucher möglichst schnell zur gewünschten Information gelangt.

Ein linearer Aufbau ist häufig nur sinnvoll, wenn Inhalte dynamisch eingebaut werden. Bei-spielsweise wird dem User die Ergebnis-Seite erst präsentiert, nachdem er entsprechende Suchkriterien in ein Formular eingetragen hat. Diese flache Hierarchie ist bei statischen Seiten recht mühsam und gilt als benutzerunfreundlich. Ein Beispiel: Angenommen Sie bie-ten einen Kontakt-Bereich mit den Unterseiten Anfahrt und Formular an. Interessiert Ihren Besucher nun das Formular, wäre es sehr mühsam, wenn er zuerst die darüber angeordnete Seite Anfahrt laden müsste, um ans Ziel zu gelangen.

Briefing = Kurzeinweisung

87

Den Projektablauf planen 3

In der Regel werden Sie daher eine vernetzte Struktur wählen, bei der der User sowohl in der Navigationsleiste als auch auf den passenden Unterseiten entsprechende Verweise zu thema-tisch verwandten Seiten findet. Das Diagramm in Abbildung 3.1 zeigt eine solche Struktur für einen fiktiven Buch- und DVD-Shop. Auf weitere denkbare Verlinkungen wurde zugun-sten einer besseren Übersichtlichkeit verzichtet. Auch der Shop-Bereich ist nicht detailliert ausgearbeitet.

Zudem ist eine Kombination zwischen linearer und vernetzter Struktur möglich. Hierbei wird der interessierte Benutzer an passender Stelle zu weiteren Detailinformationen geleitet. In der allgemeinen Navigationsleiste sind entsprechende Links zu solchen Detailseiten häufig nicht aufgeführt.

Abbildung 3.1: Bei dieser vernetzten Shop-Struktur gelangen User von der Homepage direkt zu allen Inhalten. Fachbücher sind über eine Titelseite aufrufbar.

Soll eine Datenbank integriert werden, ist häufig ein zusätzliches, ausführlicheres Schema er-forderlich, das die einzelnen Abfragen detailliert verdeutlicht. So ist beispielsweise zu regeln, was passiert, wenn der Benutzer falsche Daten eingibt.

Das Struktur- und Inhaltsdiagramm sollte erweiterungsfähig sein, damit es weitgehend erhal-ten bleibt, wenn eine Kategorie oder eine weitere Unterseite hinzukommt. Fehlen Informati-onen, planen Sie eine erweiterungsfähige Vorab-Version, wenn Sie möglichst schnell online sein möchten. Verzichten Sie jedoch auf Baustellen-Seiten mit dem schippeschwingenden Männchen, die dann manchmal Monate lang online sind. Für einen guten Webdesigner ist dies ohnehin eine Selbstverständlichkeit.

88


3.1.2 Layout und Corporate Identity

Erkundigen Sie sich nach den bisherigen Werbemaßnahmen Ihres Kunden. Hierzu gehören Flyer, Anzeigen, Broschüren, Plakate oder Videos. Auch Briefpapier, Visitenkarte und andere Geschäftsunterlagen zeigen, wie sich ein Unternehmen nach Außen präsentiert. Dieses beste-hende so genannte Corporate Design (CD) ist auf das Unternehmen abgestimmt und muss auch beim Layout der Internetseite berücksichtigt und eingehalten werden, sofern der Kunde das CD nicht ändern möchte. Die eingesetzten Gestaltungsmerkmale, zu denen übrigens auch verwendete Schriftarten gehören, erhöhen den Wiedererkennungswert und damit den Nutzen der gesamten Marketingkampagne. Das Unternehmen grenzt sich damit von seiner Konkurrenz ab.

Und ganz wichtig ist: Auch das Logo darf nicht geändert und verfremdet werden! Häufig ist es als Wort-Bild- (oder als reine Text-)Marke beim Deutschen Patent- und Markenamt registriert und dadurch vor Nachahmung geschützt. Das Gleiche gilt auch für Produkt- und andere eingetragenen bzw. registrierten Namen als signifikante Kennzeichen eines Unter-nehmens.

Zudem kann das (Produkt-)Design bzw. das Zusammenspiel von Farbe und Form, als Ge-schmacksmuster gegen Nachahmung geschützt sein. Auch hierbei handelt es sich um wesent-liche Geschäftsgrundlagen eines Unternehmens.

Möchten Sie selbst eine Marke anmelden, können Sie unter http://register.dpma.de/DPMA-register/marke/einsteiger den aktuellen Datenbestand des Markenregisters überprüfen. Eine Markenanmeldung kann generell jeder durchführen. Da hierzu jedoch weitere Fach-kenntnisse und Recherchen erforderlich sind, sollten Sie einen erfahrenen Fachmann oder Rechtsanwalt damit beauftragen. Das Gleiche gilt für Geschmacksmuster, die Sie unter http://register.dpma.de/DPMAregister/gsm/einsteiger recherchieren.

In anderen Ländern gibt es vergleichbare Institutionen. Zudem können Sie europäische Schutzrechte beim Europäischen Markenamt, dem Harmonisierungsamt für den Binnenmarkt (HABM) in Alicante, beantragen. Der Markenschutz kann auf weitere Länder ausgedehnt werden und beim der World Intellectual Property Organization (WIPO) in Genf international registriert werden.

Registrierte Marken sind häufig an dem Symbol ® zu erkennen und damit gekennzeichnet. Trade Marks kennzeichnen dagegen noch nicht amtlich registrierte Warenmarken mit den hochgestellten Buchstaben TM. Hierbei handelt es sich um eine vorläufige Kennzeichnung, die in der Regel durch die amtliche Registrierung und damit das Symbol ® abgelöst werden.

3.1.3 Texte und Botschaften formulieren bzw. gestalten

Einen Text liest man am Monitor anders als auf Papier. Dies fängt bereits bei der Schrift an: Während im Ausdruck eine Serifenschrift, wie beispielsweise die Times, besonders gut lesbar ist, wird für die Monitorversion eine serifenlose Schrift bevorzugt. Diese ermüdet das Auge nicht so schnell und ist auch in einer kleinen Schriftgröße noch gut auf dem Display lesbar.

89


Werden die Buchstaben dagegen bei einer Serifenschrift kleiner, nimmt die Deutlichkeit der einzelnen Schriftzeichen rapide ab. Arial, Helvetica und Verdana sind die wichtigsten Display-Schriftarten, die auf nahezu allen Systemen installiert sind. Ein damit formatierter Text wird also von unterschiedlichen Betriebssystemen nahezu einheitlich dargestellt. Weitere Informa-tionen hierzu erhalten Sie in Kapitel 6.7.2.

Typografie ist die Lehre der grafischen Gestaltung eines Zeichensatzes. Für das Lesen am Monitor ist eine serifenlose Schrift geeignet.

In den letzten Jahren finden sich im Web zunehmend mehrspaltige Texte, die dem klas-sischen Zeitungslayout nachempfunden sind. Solche kurzen Textzeilen sind leichter erfassbar und besser lesbar als lange Textzeilen.

Schreiben Sie kurze, prägnante Texte, deren Botschaft Bilder belegen. Achten Sie auf eine gute Lesbarkeit und sprechen Sie Ihre Zielgruppe direkt an. Thematisieren Sie Probleme und deren Lösung durch Ihr Angebot.

Insgesamt sollte ein Text fürs Web aus möglichst kurzen und prägnant formulierten Sät-zen bestehen, deren Inhalt schnell erfasst werden kann. Dazu gehören auch signifikante Überschriften, die den Seiteninhalt zusammenfassen, den Leser direkt ansprechen und Problemlösungen aufzeigen. Die ersten Textzeilen sollten dann das Wichtigste erläutern und zusammenfassen. Wie bei einem Zeitungsartikel folgen dann weitere Details. Ausnahmen bestätigen natürlich auch hier die Regel. Sie sollten sich jedoch stets vor Augen führen, dass das Internet ein schnelllebiges Medium ist. Binnen Sekunden entscheidet der User, ob ihn der Inhalt interessiert. Dabei scannt er zunächst grob die Seite und erst wenn ihn die Botschaft wirklich interessiert, wendet er sich den Detailinformationen und dem eigentlichen Text zu. Diese Informationen sollten passende Bilder und Grafiken unterstreichen und belegen, da diese vor der Textbotschaft wahrgenommen werden.

Eine geeignete Text-Bild-Komposition bzw. ein entsprechendes Layout unterstreicht die Wirkung Ihrer Botschaft, schafft eine Art Ambiente und kann positive Gefühle hervorrufen. Fühlen User sich auf Ihrer benutzerfreundlichen Website wohl, kommen Sie gerne wieder. Eine online vermittelte positive Grundeinstellung gegenüber Ihrem Unternehmen und Ihren Produkten bzw. Dienstleistungen bildet einen soliden Grundstein für das weitere Benutzer- und Kaufverhalten.

3.1.4 Zielgruppe und technische Randbedingungen bestimmen

Text und Layout sollen eine bestimmte Zielgruppe ansprechen und deren Erwartungen bzw. Bedürfnisse befriedigen. Um den richtigen Ton zu treffen sollten Sie diese Personen in der Vorbereitungsphase so konkret wie möglich beschreiben. Jugendliche wollen anders ange-sprochen werden als Erwachsene oder Geschäftskunden. Überlegen Sie auch, ob die Site eher

90


seriös wirken und Vertrauen wecken soll oder ob die Zielgruppe peppige, innovative Seiten-elemente bevorzugen könnte. Die Zielgruppe wird nicht durch passende Texte, sondern auch durch Layout und visuelle Effekte angesprochen oder aber abgeschreckt.

Eng damit verbunden ist die technische Ausstattung der Zielgruppe. Zahlreiche Statistiken liefern hier wichtige Anhaltspunkte. Über 80 % der User bewegen sich mittlerweile per DSL durchs Web (Abbildung 3.2). Gehört Ihre Zielgruppe dazu, haben Sie weit mehr Gestaltungs-möglichkeiten als wenn eine relativ langsame Modemverbindung anzunehmen ist.

Informieren Sie sich im Vorfeld auch über die in den Browsern vorhandenen Plug-ins, wenn Sie verschiedene Medientypen in die Webseite einbinden möchten. QuickTime, Shockwave Flash oder Java können nur mit diesen Erweiterungsmodulen wiedergegeben werden (vgl. Kapitel 11).

Abbildung 3.2: DSL und 17-Zoll-Monitore dominieren (Quelle: http://www.webhits.de).

Erkundigen Sie sich nach der Größe der verwendeten Monitore, für die Sie die Seiten op-timieren sollten (Abbildung 3.2). Da nach den Usability-Regeln wesentliche Informationen einer Webseite ohne Scrollen erfassbar sein sollten, bestimmt diese Auflösung den Platz, der Ihnen für die Gestaltung zur Verfügung steht. Vergessen Sie nicht, dabei den Rahmen des Browsers abzuziehen.

Auch sollten Sie die fertigen Webseiten vor der Veröffentlichung in unterschiedlichen Ziel-browsern überprüfen, die von Ihrer Zielgruppe am häufigsten verwendet werden. Dabei wer-den Mozilla-Browser, wie beispielsweise Firefox, immer wichtiger (Abbildung 3.3). Zusätzlich sollten Sie das Ergebnis entsprechend der Ausstattung Ihres Auftraggebers betrachten, damit Sie bei der Abnahme des Projekts keine Überraschung erleben.

91


Abbildung 3.3: Mozilla jagt den Internet Explorer (Quelle: http://www.webhits.de).

3.1.5 Zeit- und Arbeitsplan

Machen Sie eine Bestandsaufnahme bereits vorhandener Texte, Grafiken, Datenbanken, Videos etc., die in die Website eingebunden werden sollen. Häufig liegen zu Beginn eines Projektes noch nicht alle Inhalte vor. Tragen Sie in das Inhalts- und Strukturdiagramm ein, welche Inhalte bereits vorliegen und welche fehlen. Vermerken Sie, welcher Mitarbeiter bis wann die benötigten Daten liefert und erstellen Sie einen realis-tischen Zeit- und Arbeitsplan, dessen Einhaltung Sie als Projektmanager permanent überwa-chen sollten. Klären Sie, wer bis wann welche Fotos und andere grafischen Elemente für die Seiten abgibt. Händigen Sie diesen Plan allen Beteiligten aus, und betonen Sie dessen Ver-bindlichkeit. Änderungen sollten gemeinsam im Team bzw. mit Ihrem Kunden besprochen werden.

Können bestimmte Inhalte erst sehr spät geliefert werden, ist es häufig sinnvoll, nicht so lange zu warten, sondern die wichtigsten Seiten bereits im Web zu veröffentlichen. Auch eine solche Vorab-Version muss sorgfältig geplant werden. Diese sollte erweiterungsfähig sein und sich nicht wesentlich von der endgültigen Fassung unterscheiden. Verzichten Sie auf so genannte Baustellenseiten, die zwar den Inhalt ankündigen, dem Benutzer jedoch keine weiteren Informationen liefern.

Halten Sie Anforderungen und Ziele sowie technische Lösungen in einem Pflichtenheft fest und notieren wichtige Qualitätskriterien. Legen Sie Zeitrahmen und Aufgabenverteilung fest.

Aufgabenverteilung

92


Erstellen Sie ein Pflichtenheft als Arbeitsgrundlage, in dem Ziele bzw. wichtige Funktionali-täten beschrieben und zentrale Informationen eingetragen sind. Das Pflichtenheft erläutert technische Problemlösungen zur Erreichung der im Lastenheft beschriebenen Aufgabenstel-lung. Lassen Sie sich dieses vom Auftraggeber bestätigen, vermeiden Sie Missverständnisse und unnötigen Ärger.

3.1.6 Datei- und Verzeichnisstruktur festlegen

Legen Sie auf Ihrer Festplatte oder in Ihrem Netzwerk ein Arbeitsverzeichnis an. Speichern Sie alle vorhandenen Dokumente in einem neuen Unterordner, den Sie z. B. Originale nen-nen. Sortieren Sie die hier einfügten Dateien in weitere Verzeichnisse (z. B. Texte, Bilder, Video, Sound), so dass diese schnell gefunden werden. Häufig ist hier auch eine thematische Zuordnung in entsprechend angelegte Verzeichnisse sinnvoll. Die Verzeichnisstruktur soll mit der Navigationsstruktur übereinstimmen.

Das lokale Arbeitsverzeichnis enthält alle Originaldateien als Backup.

Scannen Sie vorhandene Fotoabzüge ein und sorgen Sie für die Digitalisierung anderer Medien, die im Web veröffentlicht werden sollen. Häufig müssen diese Elemente noch bear-beitet und webgerecht optimiert werden. Unterschätzen Sie den hierfür benötigten Zeit- und Arbeitsaufwand nicht.

In Datei- und Verzeichnisnamen sollten Sie auf Leer- und Sonderzeichen verzichten. Dazu zählen auch Umlaute. Verwenden Sie wenn möglich nur Kleinbuchstaben. Ein weiteres Verzeichnis (z. B. www) enthält Dateien für den Webserver zur Veröffentlichung.

Erstellen Sie in Ihrem Arbeitsverzeichnis einen weiteren Ordner, in dem alle Dateien ge-speichert sind, die Sie später auf den Webserver kopieren (vgl. Kapitel 22). Diese sind dann allgemein zugänglich, falls Sie keinen Passwortschutz einrichten. In der Regel nenne ich dieses lokale Verzeichnis www. Auch hierin sollte die zuvor definierte thematische Struktur in entsprechend benannten Unterverzeichnissen wieder zu finden sein.

In diese erweiterungsfähige Verzeichnisstruktur können Sie weitere Dateien problemlos integrieren. Wenn möglich, sollten Sie dabei bestehende Dokumente nicht verschieben müs-sen, auch wenn das in Dreamweaver recht einfach geht und Verweise automatisch angepasst werden (vgl. Kapitel 9.9). Das ist besonders im Hinblick auf spätere Suchmaschineneinträge wichtig, die nur in unregelmäßigen Abständen automatisch aktualisiert werden.

Vergeben Sie eindeutige Dateinamen, die sich an den Inhalten orientieren. Diese werden von Suchmaschinen positiv bewertet und können eine entscheidende Rolle bei der Positionierung in der Trefferliste sein. Diese Arbeitsweise hat sich in der Praxis bestens bewährt.

93


Speichern Sie das Impressum beispielsweise als impressum.htm ab. Im gezeigten Beispiel von Abbildung 3.4 ist das Dokument im Unterverzeichnis Kontakt des Stammordners zu finden. Um fehlerhafte Hyperlinks zu vermeiden, sollte die Verzeichnis- und Dateistruktur des Servers mit dem lokalen Site-Aufbau übereinstimmen. Sie finden sich schneller zurecht und arbeiten effektiver.

Abbildung 3.4: Die lokale Datei- und Verzeichnisstruktur spiegelt Navigation und Inhalte wider. Allgemeine Bilder sind direkt im Root gespeichert. Weitere Bilder gibt es für einzelne Bereiche.

Selbstverständlich können Sie auch Ihr eigenes Ordnungssystem verwenden und Dokumente durchnummerieren. Allerdings ist eine eindeutige Zuordnung dann nur über ein Inhalts- und Strukturdiagramm möglich, in das entsprechende Informationen eingetragen sind. Auch Suchmaschinen berücksichtigen diese Namen nur eingeschränkt bei der Indizierung. Wägen Sie Vor- und Nachteile ab und passen Sie das System dem jeweiligen Projekt an.

3.1.7 Webseiten erstellen

In der Regel wird die Webseite nicht in Dreamweaver, sondern in einem Grafikprogramm, wie beispielsweise Fireworks oder Photoshop von Adobe, entworfen. Da sich die Homepage oft von den Unterseiten unterscheidet, sind in der Regel zwei verschiedene Layouts erforder-lich. Anschließend werden so genannte Slices exportiert. Dabei werden grafische Elemente des erstellten Seitenlayouts in Einzelelemente zerlegt und dann in separaten Dateien gespei-chert. Die separaten Grafiken werden anschließend in Dreamweaver wieder zusammenge-setzt. Dies ermöglicht einen schnellen, benutzerfreundlichen Download und das Definieren weiterer, relevanter Codeelemente (Datenbankanbindung, Suchmaschinenoptimierung).

Beim Slicing wird die Grafikvorlage in einzelne Bereiche aufgeteilt, die als separate Dateien gespeichert werden. In HTML werden diese dann zusammengesetzt und durch Text ergänzt.

94


Dabei ist zwischen allgemeinen Seitenelementen, die auf allen Webseiten eingesetzt werden, und seitenspezifischen Grafiken zu unterscheiden. Zur ersten Gattung gehören beispielsweise das Logo, Buttons oder ein Hintergrundbild. Fotos werden dagegen häufig themenbezogen auf einzelnen Seiten verwendet und unterstreichen die hier vermittelte Botschaft.

Teilweise können diese Grafikprogramme auch HTML-Dateien exportieren, die Sie in Dreamweaver dann optimieren und mit anderen Dokumenten verlinken können. Die auf diese Weise entwickelte Musterseite enthält häufig noch Text-Platzhalter (Lorem ipsum) zur Verdeutlichung des Layouts. Auf den eigentlichen Webseiten werden diese ersetzt und durch geeignete seitenspezifische Grafiken ergänzt.

Dabei erleichtern Vorlagen (engl. templates), die im Dateiformat .dwt gespeichert werden, die Arbeit (vgl. Kapitel 16). Diese enthalten bearbeitbare und unbearbeitbare Bereiche, die den allgemeinen Seitenaufbau in HTML festlegen. Anschließend erstellen Sie die eigentlichen Webseiten, basierend auf einer solchen Vorlage. In diesen Webseiten können Informationen dann nur in den bearbeitbaren, also freigegebenen Bereichen geändert und formatiert wer-den. Auf diese Weise realisieren Sie ein einheitliches Layout innerhalb der gesamten Website.

Möchten Sie zudem Skripte und dynamische Elemente verwenden oder Videos und andere Medien einbinden, gelangen Sie in den Grafikprogrammen ebenfalls schnell an die Grenzen. Grafik ist dann eben doch nicht gleich Webprogrammierung… Vielmehr ist hierzu ein leis- tungsstarker Webeditor wie Dreamweaver erforderlich.

3.2 Sites in Dreamweaver anlegen und definierenIst das Layout der Webseiten entwickelt, richten Sie die lokale Site in Dreamweaver ein. Hier-bei hinterlegen Sie wichtige Informationen über die lokale Site und die Remote-Site. Dabei handelt es sich bei der Remote-Site um ein Duplikat der lokalen Dateien, das auf den Webser-ver eines Providers kopiert wird. Aus diesem Grund ist es wichtig, dass Sie alle auf den Server zu übertragenden Dateien in einem lokalen Projektverzeichnis (www) auf Ihrer Festplatte oder innerhalb des internen Netzwerks speichern (vgl. Kapitel 3.1.6). Damit haben Sie alles zusammen und vergessen bei der Veröffentlichung nichts. Der Provider sorgt dann dafür, dass die Dokumente über das Web zugänglich sind und heruntergeladen werden können.

Anders als das Internet ist das Intranet nur ausgewählten Usern zugänglich. Hier sind firmenrele-vante, häufig sensible Daten gespeichert.

Einige Firmen unterhalten eigene Server und setzen diese auch für ein eigenes Intranet ein, in dem sensible Daten gespeichert werden und das nur den Mitarbeitern zugänglich ist.

Auf den folgenden Seiten erfahren Sie, wie Sie in Dreamweaver eine neue Site anlegen und bereits vorhandene Projekte ergänzen und bearbeiten. Dabei spielt es keine Rolle, ob diese ursprünglich auch in Dreamweaver erstellt worden sind.

95

Sites in Dreamweaver anlegen und definieren 3

3.2.1 Eine neue lokale Site einrichten

Um alle Dreamweaver-Funktionen effektiv nutzen zu können, richten Sie die Site an. Dabei teilen Sie Dreamweaver das Verzeichnis mit, in dem alle Dokumente, Bilder und sonstige Dateien eines Projekts zu finden sind.

Arbeiten Sie nur in Ausnahmefällen direkt auf dem Webserver.

Vielleicht fragen Sie sich nun, warum man nicht direkt auf dem Webserver arbeiten soll, wenn später sowie alles dorthin kopiert wird. Zunächst deshalb, weil Dreamweaver einige Funktionen hier nicht ausführen kann. Beispielsweise wären die Hyperlink-Überprüfung oder die Erstellung von Site-Berichten in diesem Fall nicht möglich. Auch werden die auf dem Server vorgenommenen Änderungen ohne vorherige Überprüfung sofort veröffentlicht. Finden Sie erst dann einen Fehler, müssen Sie die korrekte vorherige Version in der Regel erst umständlich in den Backup-Dateien suchen – falls diese überhaupt noch vorhanden sind.

1 Drücken Sie auf den Site-Button am oberen Programmrand und wählen Sie im Menü Neue Site. Diesen Befehl finden Sie auch in der Menüleiste unter Site. Ist das Startfenster geöffnet, können Sie auch auf den Button in der Spalte Neu erstel-len klicken.

Das Dialogfenster Site-Definition enthält vier Kategorien (Site, Server, Versions-kontrolle, Erweiterte Einstellungen), in die Sie die einzelnen Informationen ein-geben. Dabei finden Sie unter den erweiterten Einstellungen weitere Bereiche.

2 In der Kategorie Site tragen Sie zentrale Informationen über Ihre lokales Projektverzeich-nis ein (Abbildung 3.5). Um mit Dreamweaver effektiv arbeiten zu können, genügen diese Angaben bereits.

Jeder Site-Name darf nur einmal vergeben werden. Ein Site-Verzeichnis sollte sich nicht in einer anderen Site befinden. Nur dann funktioniert Dreamweaver fehlerfrei.

Zunächst geben Sie einen aussagekräftigen Namen im Feld Site-Name an. Über die-sen identifizieren Sie später den Webauftritt in Dreamweaver und wählen diesen zur Bearbeitung aus. Wird der eingegebene Name bereits für eine Site verwendet, weist das rote Icon auf diesen Fehler hin. Sie können die Site-Definition dann erst speichern, nachdem Sie diesen Fehler korrigiert und einen anderen Namen eingetragen haben.

Im Feld Lokaler Site-Ordner bestimmen Sie das Arbeits- bzw. Root-Verzeichnis (vgl. Kapitel 3.1.6), das die noch nicht veröffentlichten Daten enthält. Dieses können Sie einfach über den Button auswählen. Wenn Sie noch kein lokales Arbeitsverzeichnis erstellt haben, holen Sie dies im dann geöffneten Dialogfenster nach, indem Sie auf den Button Neuen Ordner erstellen klicken.

96


Damit Dreamweaver die Synchronisierung korrekt durchführen kann und damit auch andere Funktionen einwandfrei ablaufen, darf dieser Site-Ordner sich nicht innerhalb eines bereits bestehenden Dreamweaver-Verzeichnisses befinden. In diesem Fall erscheint ein entsprechendes Meldefenster sowie das Fehlericon hinter dem Feld Lokaler Site-Ordner. Verschieben Sie das Projektverzeichnis und geben Sie den neuen Ort in der Site-Definition an.

Abbildung 3.5: Den lokalen Arbeitsbereich der Site in Dreamweaver angeben

3 Für die aktuelle lokale Site genügen diese Angaben. Drücken Sie auf Speichern, um die Site-Definition zu schließen und die Webseiten zu erstellen.

Haben Sie es nicht ganz so eilig, wechseln Sie in die Erweiterten Einstellungen. Hier geben Sie weitere Informationen für Ihre lokal gespeicherte Site in der Kategorie Lokale Info an (Abbildung 3.6):

Dabei sollte sich der Standard-Bilderordner im gleichen Projektverzeichnis befinden. In der Regel liegt dieser direkt im Root-Verzeichnis. Wenn Sie später einzelne Bilder von Ihrem Desktop oder aus einem anderen Programm in das Dokumentfenster ziehen, speichert Dreamweaver dieses automatisch in dem hier angegebenen Verzeichnis ab (vgl. Kapitel 7.2.1). Dieser Ordner wird häufig bilder oder images genannt. Lassen Sie das Feld leer, wenn Sie diese Speicherfunktion nicht nutzen möchten.

97


Abbildung 3.6: Erweiterte lokale Informationen enthalten das zentrale Bildverzeichnis und die Definition und Be-handlung von Hyperlinks. Zudem aktivieren Sie hier den Arbeitsspeicher.

Dokumentrelative Links funktionieren in der Browservorschau ohne temporäres Double. Stamm-relative Links sind bei dynamischen Webseiten sinnvoll und erfordern einen Webserver.

Neue Hyperlinks sowie Bilddateien werden entweder relativ zum Dokument oder zum Stammordner erstellt bzw. eingefügt. Dreamweaver verwendet standardmäßig dokumen-trelative Verweise. Aktivieren Sie die entsprechende Option. Bereits bestehende Hyper-links werden dadurch nicht geändert.

Vergleichen lassen sich die Unterschiede anhand einer Wegbeschreibung: Schreiben Sie die Adresse auf einem Briefumschlag, landet dieser immer bei dieser Adresse, ganz gleich, bei welcher Post Sie den Umschlag einwerfen. Genauso verhält es sich mit stammrelativen Verweisen. Fragen Sie dagegen in Frankfurt nach dem Weg und erhalten Sie die Auskunft, dass Sie nach 50 Metern links und dann in die nächste Straße rechts abbiegen müssen, um ans Ziel zu gelangen, stimmt diese Angabe in Hamburg nicht mehr. Auch dokumentspe-zifische Verweise stehen in Relation zum aktuellen Dokument.

Werden Dokumente häufig verschoben, sollten Sie stammrelative Verweise verwenden, bei denen ein Schrägstrich / auf das Root-Verzeichnis verweist. Die Verlinkung erfolgt immer vom Root-Verzeichnis ausgehend. Auch bei dynamischen Websites ist der Stam-mordner oft die bessere Wahl.

98


Da Browser Sitestämme jedoch nicht erkennen, werden diese Verweise in der Browser-vorschau nur richtig dargestellt, wenn Sie mit temporären Dateien (vgl. Kapitel 6.8.3) arbeiten, einen Testserver verwenden (vgl. Kapitel 19.3) oder die Dateien zuvor auf den Remote-Server übertragen (vgl. Kapitel 22) und von dort aufrufen. Bei dokumentrelativen Verweisen gibt es dieses Problem nicht.

Damit fehlerhafte absolute bzw. stammrelative Hyperlinks gefunden werden, geben Sie in das Feld HTTP-Adresse den URL der Website auf dem Server an. Diese Information wird zudem für die korrekte Angabe stammrelativer Hyperlinks benötigt. Dabei muss der lo-kale Stammordner nicht mit dem des Remote-Servers übereinstimmen. Wichtig ist ledig-lich, dass die darunter zu findenden Verzeichnisstrukturen identisch sind. Lassen Sie das Feld leer, wenn Sie Dreamweaver nur ausprobieren und die Website nicht veröffentlichen möchten. Haben Sie bereits Informationen in der Kategorie Server eingetragen, wird der URL automatisch von dort übernommen.

Soll die Hyperlink-Prüfung zwischen Groß- und Kleinschreibung unterscheiden, akti-vieren Sie das entsprechende Kontrollkästchen. Beispielsweise kann Dreamweaver erst dann zwischen aktuelles.htm und Aktuelles.htm unterscheiden. Auf einem Linux- bzw. Unix-System handelt es sich dabei um zwei verschiedene Dokumente. Mit dieser Option können Sie sichergehen, dass alle Verweise korrekt funktionieren.

Damit es auf dem Server keine Probleme gibt und alle Verweise funktionieren, schreiben Sie am besten alle Zeichen in Datei- und Verzeichnisnamen klein. Verzichten Sie auch auf Umlaute, Sonder-, Leer- und Satzzeichen. Viele Server wandeln diese um, so dass Verweise nicht mehr funktionieren. Verwenden Sie auch möglichst kurze Namen, die weitgehend der 8.3-Konvention von MS DOS entsprechen:

8 Zeichen.Dateiendung

Mit dem Kontrollkästchen darunter aktivieren Sie den Cache. Einige Prozesse laufen in Dreamweaver dann schneller ab, weil wichtige Datei- und Objektinformationen zentral gespeichert sind.

4 Für die aktuelle lokale Site sind dies nun alle Angaben. Bestätigen Sie mit Spei-chern. Anschließend wird der aktivierte Cache erstellt, was bei einer vorhandenen Site, die bereits aus vielen Dateien be-steht, etwas länger dauern kann. Abbildung 3.7: Bei der Erstellung des Site-Caches

speichert Dreamweaver zentrale Daten im Verzeichnis _notes.

99


Danach öffnet Dreamweaver automatisch das Bedienfeld Da-teien und blendet Dateien und Verzeichnisse der definierten Site bzw. des angegebenen Stammordners ein (Abbildung 3.8). Damit gilt die eben erstellte Site-Definition nur für eine Site.

Parallel dazu können Sie weitere Sites mit anderen Einstellungen für andere Verzeichnisse definieren. Die aktuell zu bearbeitende Site wählen Sie dann im Menü links oben im Bedien-feld Dateien aus. Damit hier tatsächlich lokale Dateien angezeigt werden, ist im Menü rechts daneben Lokale Ansicht eingestellt.

In diesem Bedienfeld wechseln Sie auch zu den übrigen Verzeichnissen Ihrer Datenträger. Stammordner erkennen Sie an dem grünen Ordner-Icon , andere Verzeichnisse sind gelb eingefärbt. Kann Dreamweaver den Stammordner einer Site nicht finden, weil Sie das Ver-zeichnis im Explorer oder im Finder umbenannt haben, werden Sie aufgefordert, die Site neu zu definieren. Hierzu öffnet Dreamweaver das im nächsten Kapitel vorgestellte Dialogfenster Sites verwalten.

Sie können Dokumente auch erstellen und bearbeiten, ohne dass Sie eine Site definiert haben. Sind diese Informationen jedoch hinterlegt, erleichtern Sie sich wesentlich die Arbeit und können weitere Dreamweaver-Funktionen nutzen.

Im Bedienfeld Dateien erstellen, löschen und verschieben Sie Dokumente und Ordner. Damit ist das Bedienfeld ein leistungsfähiger Dateimanager, den Sie in Kapitel 5 eingehend kennen lernen. Hier lernen Sie zudem weitere Site-Definitionen kennen, die im Umgang mit Dokumenten wertvolle Arbeit leisten. Wie Sie weitere Informationen in die Site-Definition eingeben, erfahren Sie u. a. in Kapitel 19.3 (Testserver) und in Kapitel 22.1 (Remote-Informa-tionen). Wie Sie Dateien über das Bedienfeld Dateien in die Remote-Site übertragen, zeigt Ihnen Kapitel 22.

Abbildung 3.8: Das Bedienfeld Dateien verwaltet Verzeichnisse und Dokumente.

Bedienfeld Dateien öffnen: (F8)

100


3.2.2 Vorhandene Sites ändern und verwalten

Eine bestehende Site-Definition können Sie jederzeit ergänzen und bearbeiten. Dies ist bei-spielsweise dann erforderlich, wenn Sie das Projektverzeichnis umbenannt haben.

1 Wählen Sie Sites / Sites verwalten. Diesen Eintrag finden Sie zudem im Site-Menü am oberen Programmrand und im Be- dienfeld Dateien, wenn Sie das linke, obere Pulldown-Menü (Abbil-dung 3.9) oder das Optionsmenü öffnen.

Abbildung 3.9: Sites auswählen und verwalten

2 Im nun geöffneten Dialogfenster sind alle bisher definierten Sites eingetragen (Abbildung 3.10). Wählen Sie die Site aus, deren Definition Sie bearbeiten möchten, und klicken Sie auf die Schaltfläche Bearbeiten .

3 Anschließend ändern bzw. erweitern Sie die Einstellungen im bereits bekannten Dialog-fenster Site-Definition (Abbildung 3.5, Abbildung 3.6).

4 Bestätigen Sie die Änderungen mit OK und klicken Sie anschließend im Dialogfenster Sites verwalten auf die Schaltfläche Fertig.

101


Über das Dialogfenster Sites verwalten können Sie ebenfalls eine neue Site ein-richten, indem Sie auf die Schaltfläche Neu

klicken (Abbildung 3.10). Abschlie-ßend hinterlegen Sie die Informationen wie gewohnt in der Site-Definition.

Daneben finden Sie im Dialogfenster weitere nützliche Schaltflächen:

Eine neu zu erstellende Site kann die Defini-tion einer bereits vorhandenen übernehmen. Bestehen zwischen den beiden Einstellungen viele Gemeinsamkeiten, weil beide Sites bei-spielsweise unter der gleichen Domain auf dem Server gespeichert sind, ersparen Sie sich dadurch lästige Tipparbeit. Typisches Beispiel ist die Website einer neu gegründeten Konzerngesellschaft, bei der auf Corporate Identity geachtet werden muss. Wählen Sie zunächst die entsprechende Site in der Liste aus und klicken Sie dann auf Duplizieren . Dreamweaver legt die Kopie an, deren Ein-stellungen Sie anschließend nur noch anpassen müssen.

Sind Projekte abgeschlossen, werden Sites nicht mehr benötigt. Sind die entsprechenden Verzeichnisse bereits entfernt, sollten Sie die entsprechenden Einträge auch in Dreamweaver löschen, um den Überblick nicht zu verlieren. Hierzu markieren Sie die Site im Dialogfenster Sites verwalten und klicken dann auf die Schaltfläche Entfernen . Dadurch wird jedoch nur der Eintrag in Dreamweaver selbst, nicht jedoch das angegebene Stammverzeich-nis entfernt. Dies müssen Sie manuell im Explorer oder Finder löschen.

Arbeiten mehrere Personen an dem gleichen Projekt, erleichtert die Im- und Exportfunktion die Site-Einrichtung. Die Einstellungen einer oder mehrerer ausgewählter Sites können Sie auf anderen Rechnern schnell übernehmen, indem Sie auf Exportieren klicken. Haben Sie bereits den Zugang zum Webserver durch Kenn- und Passwort eingerichtet und diese abgespeichert (vgl. Kapitel 22.1), erscheint ein Dialogfenster. Damit diese sensiblen Login-Daten mit exportiert werden, aktivieren Sie die untere Option (Abbildung 3.11), an-sonsten behalten Sie die Standardeinstellung bei. Bestätigen Sie mit OK.

Wollen Sie nur eine Site exportieren, geben Sie den gewünschten Dateinamen in das gleich-namige Feld ein. Bei mehreren Sites können Sie nur den Namen einer Datei bestimmen, die übrigen erhalten automatisch den entsprechenden Site-Namen. Exportierte Sites werden im STE-Format im angegebenen Verzeichnis gespeichert. STE steht für Site-Definitionsdatei.

Abbildung 3.10: Sites verwalten und bearbeiten

102


Abbildung 3.11: Login-Daten werden nicht mit exportiert, wenn Sie die Standardeinstellung ändern und die untere Option aktivieren.

Auf dem anderen Rechner übernehmen Sie nun die gespeicherten Site-Informationen, indem Sie im Dialogfenster Sites verwalten auf die Schaltfläche Importieren klicken und die STE-Datei auswählen.

3 Konzeption und Management · für einen Konzern entwickeln, wesentlich mehr Details...

Documents

Transcript of 3 Konzeption und Management · für einen Konzern entwickeln, wesentlich mehr Details...