Anzeige
Tutorialbeschreibung

Dreamweaver CS4 und InContext Editing - 1

Dreamweaver CS4 und InContext Editing - 1

In diesem Tutorial werden wir den Umgang mit Dreamweaver CS4 und InContext Editing lernen.
Voraussetzung: Adobe Dreamweaver CS4, eine Adobe ID und ein Server


Was ist InContext Editing?

Mit der Creative Suite 4 führt Adobe neben Acrobat.com und Photoshop.com den Onlinedienst InContext Editing ein.
Dieser Onlinedienst ermöglicht es Benutzern,Designern, Kunden und andere Mitarbeitern einer Website den Inhalt derer zu bearbeiten.



Schritt 1 - Erstellen einer neuen Website, Einfügen von Inhalten und Verwalten von CSS-Klassen


Zunächst benötigen wir eine neue Website. Ich werde dazu eine Vorlage zur Verfügung stellen:

HTML-Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Startseite | Espadon Online</title>
</head>
<body>
<h1>Willkommen bei Espadon Online!</h1>
<p>Espadon Online ist dein gro&szlig;es Abenteuer im Mittelalter.<br/>
Spiele mit Freunden oder anderen Spielern ein einzigartiges Erlebnis in Frankreich im 14. Jahrhundert.<br/>
Starte jetzt mit dem Erstellen eines Kontos, lade dir den Client herunter oder erfahre mehr &uuml;ber Espadon Online.</p>
<h1>Neuigkeiten und Ank&uuml;ndigungen</h1>
<div id="news-1">
<div class="module-header">Espadon Online-Website in neuem Gewand</div>
<div class="module-body">Seit Heute ist die Espadon Online-Website in einem Gewand verf&uuml;gbar.<br/>
Aber nicht nur das Design, sondern auch die Funkionalität der finalen Website hat sich ver&auml;ndert.<br/>
Wir haben z.B. ein v&ouml;llig neues Redaktionssystem, viele Informationen rund um Espadon Online und das Entwicklerteam, ein G&auml;stebuch und ein Gesinnungsfragenspiel.</div>
<div class="module-body"><a href="#">&Uuml;ber die Website / Barrierefreiheit</a></div>
</div>
</body>
</html>

CSS-Quelltext:

@charset "utf-8";
/* CSS Document */

body {
color: #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 10px;
}
h1 {
color: #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
margin: 3px 0 3px 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
div.module-header {
color: #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
margin: 5px 0 0 0;
padding: 0;
}
div.module-body {
margin: 0;
padding: 5px 0;
}
div.module-footer {
margin: 0;
padding: 0;
text-align: right;
}
.keyword {
font-weight: bold;
}
.red {
color: #F00;
}

Der HTML-Quelltext muss bei meiner Vorlage in das Dokument "index.html" und der CSS-Quelltext in das Dokument "style.css" eingefügt werden, da der Anker zu dem CSS-Dokument bereits implementiert ist.

Wenn alles eingestellt ist, klicken wir auf "Einfügen" -> "InContext Editing" -> "Verfügbare CSS-Klassen verwalten".

Abbildung 1:

Bilder


In dem nachfolgendem Dialogfenster kreuzen wir das Kästchen neben demCSS-Dokument "style.css" an.

Abbildung 2:

Bilder


Ich habe in dem CSS-Dokument zwei Klassen für einen fetten und für einen roten Text eingefügt. Wenn ich jetzt in dem Dialogfenster das Kästchen neben dem CSS-Dokument ankreuze, werden die zwei dort enthaltenen Klassen für die spätere Bearbeitung mit InContext Editing eingebunden. Damit kann ich auch komplexe CSS-Stile einbinden und bleibe nicht bei den Standardformatierungen für fette, kursive oder unterstrichene Texte.

Schritt 2 - Erstellen von bearbeitbarenBereichen

Um bearbeitbare Bereich zu erstellen, muss unser Layout, welches wir später bearbeiten möchten, aus div-Containern aufgebaut sein.
Wir wählen dazu in der Entwurfsansicht einfach den gewünschten Bereich an, selektieren in der Pfadleiste (siehe Abbildung 3) den jeweiligen div-Container (in meinemBeispiel "module-header") und klicken auf "Einfügen" -> "InContext Editing" -> "BearbeitbarenBereich erstellen".

Abbildung 3:

Bilder


Abbildung 4:

Bilder


Wir speichern die Datei und Dreamweaver weist uns daraufhin hin, das neue Dateien im Verzeichnis "includes/ice" erstellt wurden. Diese werden für die spätere Bearbeitung mit InContext Editing benötigt und müssen daher mit den anderenDateien hochgeladen werden.

(i) -Verschiedene Optionen zur späteren Bearbeitung festlegen

Wenn wir auf einen div-Container klicken, sehen wir in der Registerkarte "Eigenschaften", dass wir einige Optionen an- und abkreuzen können. Damit können wir steuern, welcheÄnderungen Benutzer,Designer, Kunden und andere Mitarbeiter einer Website späterdurchnehmen dürfen und welche Elementeigenschaften bearbeitet werden dürfen.

Schritt 3 - Erstellen von wiederholenden Bereichen

Wiederholende Bereiche kommen ihrem Namen gleich, wir können also unseren vorhanden div-Container wiederholen.
Zuerst wählen wir unseren div-Container (in meinem Beispiel "news-1") aus und klicken auf "Einfügen" -> "InContext Editing" -> "WiederholendenBereich erstellen".

Abbildung 5:

Bilder


(i) -Verschiedene Optionen zur späteren Bearbeitung festlegen

Klicken wir nun auf den hierarchisch höchst stehenden div-Container, sehen wir in der Registerkarte "Eigenschaften", dass wir wie bei den bearbeitbaren Bereichen auch hier Optionen an- und abkreuzen können. Diese geben an, welcheÄnderungen Benutzer,Designer, Kunden und andere Mitarbeiter einer Website später an dem wiederholenden Bereich vornehmen dürfen.

Schritt 4 - Hochladen der Dokumente auf denServer und Zugriff auf InContext Editing

Wir laden nun die Dokumente auf unseren Webserver hoch und öffnen die Seite in einem Browser.

Abbildung 6:

Bilder


Damit wir das Dokument bearbeiten können, benötigen wir eineAdobe ID.
Um InContext Editing aufzurufen, drücken wir auf dem PC "STRG+E" und auf dem Mac "Command+E".

Abbildung 7:

Bilder


Nun erscheint ein Fenster, in dem wir uns anmelden sollen. Nachdem wir uns angemeldet haben, erscheint am oberenBildrand die InContext Editing-Leiste.

Abbildung 8:

Bilder


Wir wollen unsere Website bearbeiten, also klicken wir auf "Edit" und werden auf die Bearbeitungsseite weitergeleitet.

Abbildung 9:

Bilder


Hier sehen wir nun eine gewohnte WYSIWYG-Oberfläche. Die Schaltflächen sollten selbsterklärend sein und sind mit Titeln überlegt.

(i) -Verschiedene Optionen zur späteren Bearbeitung festlegen

Sollten wir jetzt bei den bearbeitbaren oder wiederholenden Bereichen eine Option abgekreuzt haben, so erkennt dies InContext Editing automatisch und deaktiviert die dazu verwendbarenSchaltflächen.

Schritt 5 - Bearbeiten von bearbeitbaren und wiederholenden Bereichen

Schritt 5.1 - Bearbeiten von bearbeitbarenBereichen

Bewegen wir die Maus über den umrahmten Bereich, so erscheint ein dicker Rahmen mit fünf Schaltflächen (am oberen linken Ende des Rahmens) um ihn herum.

Abbildung 10:

Bilder


Klicken wir auf den Bereich, so verdunkelt sich der restliche Bildbereich und wir können den Bereich nun bearbeiten.
Wir werden folgende Änderungen vornehmen:
  • Der Titel wird zu "Espadon Online-Website jetzt in Version 2.0 verfügbar" geändert.
  • Der Hauptteil wird zu "Die Espadon Online-Website ist jetzt inVersion 2.0 verfügbar.
    Viele funktionelle Verbesserungen, jedoch kein neues Gewand, erleichtern die Bedienung der Website, vereinfachen die Kontoverwaltung und fügen neue Communityfunktionen ein." geändert.
  • Der Link wird zu "Kontoverwaltung" geändert und anschließend wird der Link mit der URL "account/" verankert.
Abbildung 11:

Bilder


Schritt 5.2 - Wiederholen von wiederholenden Bereichen

Wir klicken dazu auf unseren wiederholenden Bereich und klicken in den oberen linken Schaltflächen auf "Add a region".
In diesem Bereich werden wir nun folgende Änderungen vornehmen:
  • Der Titel wird zu "Neuer Bereich" geändert.
  • Der Hauptteil wird zu "Dies ist ein neu erstellter Bereich." geändert.
  • Der Link wird zu "Adobe-Website" geändert und anschließend wird der Link mit der URL "http://www.adobe.com/de/" verankert.
Schritt 5.3 - Duplizieren und Löschen von wiederholbaren Bereichen

Klicken wir erneut auf auf unseren neuen Bereich, so erscheint abermals der Rahmen und die fünf Schaltflächen.
Klicken wir nun auf "Duplicate region", so ensteht ein neuer Bereich mit demselben Inhalt wie der vorher ausgewählte Bereich.

Abbildung 12:

Bilder


Klicken wir wiederum auf den neuen Bereich, so erscheinen wieder die fünf Schaltflächen.
Wir klicken nun auf "Delete region" und der wiederholende Bereich wird gelöscht.

(i) - Bereiche verschieben

Wir können über die fünf Schaltflächen unsere Bereiche verschieben.
Klicken wir auf den Pfeil nach oben, wandert der ausgewählte Bereich über den über ihm, klicken wir auf den Pfeil nach unten, so wandert der ausgewählte Bereich unter den unter ihm.

Abbildung 13:

Bilder


Schritt 6 - Speichern der fertigen Website und Beenden von InContext Editing

Um unsere fertige Website zu speichern, klicken wir auf "Save".

Falls wir unsere Website vorher nicht registriert haben, müssen wir das nun tun.
Dazu bestätigen wir die erscheinende Mitteilung, geben alle erforderlichenDaten in das nachfolgende Fenster ein, klicken auf "Test" und klicken bei erfolgreichem Test anschließend auf "Save".

Abbildung 14:

Bilder


Zurück in unserem ursprünglichenFenster klicken wir nun auf "Done".
Da unsere fertige Website aber bislang nur ein Entwurf (en: draft) ist, müssen wir diesen noch Publizieren und klicken auf "Publish".
Jetzt ist unsere fertige Website für die breite Öffentlichkeit verfügbar.

Abschließend klicken wir auf "Sign Out" oder das Symbol mit dem Eject-Pfeil (Abbildung 15) und kehren danach auf unsere Website zurück.

Abbildung 15:

Bilder




Fazit?


Mit InContext Editing liefert Adobe einen wirklich brauchbaren Onlinedienst, um schnell und unkompliziert Websites zu bearbeiten.
Jedoch bleiben ein paar Fragen offen:
  • Sind die Funktionen bezüglichInContext Editing auch im deutschenDreamweaver CS4 enhalten? - Ja, sind sie.
  • Wird es InContext Editing jemals auf Deutsch geben?
  • Wird InContext Editing kostenlos bleiben oder kostenpflichtig werden?
Wie geht es nun weiter?

Im nächsten Tutorial werden wir die neuenFunktionen in Dreamweaver CS4 kennenlernen und uns mit der neuenBenutzeroberfläche OWL beschäftigen.
Ebenso stehen die Live-Ansicht, der Code-Navigator, so wie auch die erweiterten Spry-Funktionen im Rampenlicht.
PS: Die nicht erschienenen Tutorials zu Dreamweaver CS3 werden ebenfalls in der neuen Serie enthalten sein.

Sollte es Fragen geben, könnt ihr euch über verschiedenste Wege an mich wenden. DieAdressen stehen in meinem Profil.

VielSpaß und gutes Gelingen!

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von HuNt3R92
  • 05.12.2012 - 15:01

Entweder fehlt mir das "Basicwissen" oder ich bin einfach zu doof. Jedenfalls war dieses Tutorial leider zu schwer für mich.

Portrait von Francesa
  • 08.06.2012 - 16:51

Danke :-) gut und verständlich erklärt.

Portrait von alci79
  • 14.12.2011 - 22:00

Hat mir gut gefallen danke!

Portrait von Stoegerbe
  • 03.06.2011 - 10:59

Sehr gutes Tutorial!

Portrait von kenny2011
  • 30.05.2011 - 16:02

sehr schön und verständlich erklärt, vielen dank

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 04.02.2011 - 20:24

Echt gutes tutorial
hat funktioniert

Portrait von Trucker_Graphics
Portrait von cora
  • 27.11.2010 - 11:50

bestens erklärt! Ich sag mal DANKE

Portrait von Jamaja
  • 25.06.2010 - 16:27

sehr schön und verständlich erklärt, vielen dank

Portrait von Designerist
  • 25.04.2010 - 17:44

Bestens erklärt und beschrieben - danke! Adobe könnte sich hiervon eine dicke Scheibe abschneiden.
Grüsse, Designerist

Portrait von avaya
  • 10.03.2010 - 15:34

Ich finde dieses Tut ist sehr schön beschrieben! l.g.avaya

Portrait von rest5
  • 27.01.2010 - 12:41

Gute Übersicht - sehr ausführlich!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 31.08.2009 - 13:50

ja ich kann den meisten nur zustimmen :)

Portrait von hans987
  • 16.08.2009 - 18:31

Gibt es zwischenzeitlich schon Informationen , ob es eine deutschsprachige Versionen von "InContext Editing" geben wird?
Oder ist man bei Adobe der Ansicht, dass es nur eine Sprache auf dieser einer Erde gibt.

Portrait von butterfly
  • 10.08.2009 - 19:28

Hallo,
wenn nur alles so ausführlich erklärt würde, wie du dieses Tutoriel beschrieben hast. Super, vielen Dank

Suche mich über die Adobe website seit Stunden durch wie ich den Incontext Bereich für den User aufrufen kann. Über deinen workshop und die Eingabe strg + e sollte ich meine ID eingeben - was ich über die Adobe Seite nie und nimmer gefunden habe. Leider nimmt er meine ID nicht an, ein neues Kennwort akzeptiert er nicht da die E-Mail-Adresse schon vergeben ist ..grrr((

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.08.2009 - 15:57

bin über google drauf gestoßen
war durchweg sehr gut beschrieben.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.06.2009 - 10:45

bin über google auf diese seite gestoßen .. anmeldung und punkte-abzug wenn man sich einträge anschaut ??? komisch, komisch .. mich hätte auch interessiert wann "incontext editing" auf deutsch erscheint und ob es kostenlos bleibt .. nach meiner anmeldung musste ich leider feststellen, dass die fragen zwar gestellt werden, man aber leider keine antwort bekommt :-(

gute und viel ausführlichere tutorials zu dieser funktionalität findet man auch auf der offiziellen adobe-seite, sogar ein film auf AdobeTV ..

und die kann man sich auch ohne "punkteabzug" anschauen ;-)

ich setze incontext editing bereits ein, leider muss man jedes einzelne div "freischalten" und kann die änderungs-optionen (kann der kunde nur text ändern oder auch bilder einfügen und/oder links setzen) nicht zentral steuern, sondern muss für jedes div manuell einstellen ..

besser wäre es, wenn man die sache zentral über die extern gelagerte css-datei lösen könnte .. hmm .. vielleicht geht das ja auch (irgendwann) ?

es ist also ratsam, die funktionalität bereits beim aufbau der seite einzuplanen, dann kopiert man die "freigeschalteten divs" nämlich gleich mit ..

und die neueste version von dreamweaver ist dafür meiner meinung nach nicht unbedingt nötig, ich habe die "freischaltung" manuell eingefügt (ich traue keinem editor): (= alle änderungsoptionen) / (= nur textänderungen) ..

ich weiß allerdings nicht ob adobe die für das laden des editors im browser benötigten javascript-dateien (2 x js / 1 x html) auch für ältere dreamweaver-versionen zur verfügung stellt - ich arbeite mit der cs4 master-collection ..

Portrait von misterwossi
  • 07.02.2009 - 18:01

Das Beste was ich bis jetzt an Workshops gefunden habe.

Habe auch alles auf dem Server. Aber um inContext Editing aufzurufen klemmts.
Mit Strg*E tut sich gar nichts. Ab da komme ich nicht weiter

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.06.2009 - 11:25

hast du den "includes-ordner" hochgeladen ? wenn ja, schaue mal im queltext der editierbaren seite nach ob der link zum ordner stimmt .. wenn nicht: schaue nach dem link, kopiere den ordner und lade sie per ftp hoch .. dann klappts !

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.11.2008 - 15:39

Sehr gut beschriebene grundlegende Einführung in InContext Editing. Der Nutzen sollte klar sein - dem Endkunden eine einfache Bearbeitungsmöglichkeit für seinen Content bereitstellen zu können, ohne ihm ein "richtiges" CMS verkaufen zu müssen. Dadurch werden kleine, einfach wartbare Websites kostengünstiger produzierbar, was ja grundsätzlich gut ist.
Ich sehe diesen Dienst unterhalb von Contribute angesiedelt, also nur für wirklich simple Bearbeitungen, und natürlich keinesfalls als CMS-Ersatz.

Ob ich Adobe die Kundendaten anvertrauen möchte, ist eine andere Geschichte. Das sollte man sich unabhängig von der durchaus brauchbaren Funktionalität überlegen.

x
×
×