Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von alci79

    alci79

    14.12.2011 - 22:00

    Hat mir gut gefallen danke!

  • Alternative Portrait von Stoegerbe

    Stoegerbe

    03.06.2011 - 10:59

    Sehr gutes Tutorial!

  • Alternative Portrait von kenny2011

    kenny2011

    30.05.2011 - 16:02

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

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    04.02.2011 - 20:24

    Echt gutes tutorial
    hat funktioniert

  • Alternative Portrait von Trucker_Graphics

    Trucker_Graphics

    26.12.2010 - 23:34

    1.a tutorial, das gibt 5 sterne

  • Alternative Portrait von cora

    cora

    27.11.2010 - 11:50

    bestens erklärt! Ich sag mal DANKE

  • Alternative Portrait von Jamaja

    Jamaja

    25.06.2010 - 16:27

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

  • Portrait von Designerist

    Designerist

    25.04.2010 - 17:44

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

  • Alternative Portrait von avaya

    avaya

    10.03.2010 - 15:34

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

  • Alternative Portrait von rest5

    rest5

    27.01.2010 - 12:41

    Gute Übersicht - sehr ausführlich!

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    31.08.2009 - 13:50

    ja ich kann den meisten nur zustimmen :)

  • Alternative Portrait von hans987

    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.

  • Alternative Portrait von butterfly

    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

    User hat PSD-Tutorials.de verlassen

    05.08.2009 - 15:57

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

  • Alternative Portrait

    User hat PSD-Tutorials.de 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 ..

  • Alternative Portrait von misterwossi

    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

      User hat PSD-Tutorials.de 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

    User hat PSD-Tutorials.de 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.

  • Alternative Portrait von sissy72

    sissy72

    14.11.2008 - 11:18

    Workshop ist sehr gut erklärt und gut bebildert, aber auch ich sehe keinen wirklichen Nutzen dieser neuen Funktion. Klingt nach einem abgespecktem Möchtegern-CMS und ich glaube auch, dass ich nicht möchte, dass Adobe meine FTP-Daten speichert und so Zugriff auf meinen Web-Server hat.

  • Alternative Portrait von Riddick75

    Riddick75

    13.11.2008 - 14:38

    Hi,
    ist zwar echt schön erklärt, allerdings versteh ich den sinn auch nicht wirklich. hat jemand ein wirklich praxisbespiel wo man sich dadurch irgendeinen aufwand spart? soll das eine art CMS werden?

    evtl. steh ich auch grad auf der leitung

Weitere Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Tutorial empfehlen

 

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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!
vBulletin 0.04 • ZF-App 0.554 • Total 0.594