Wenn dieses Tutorial ist nicht genau was Sie suchen und Sie noch Fragen oder Vorschläge haben – lassen Sie uns wissen. Helfen Sie uns bitte um besser zu dienen!

Ihr Name

Emailadresse

Ihre Nachricht (benötigt)

captcha

Ausgewählte Vorlagen

JS Animated Troubleshooter. Design-Modus in Dreamweaver

Dieses Tutorial zeigt Ihnen, wie Sie Ihr JavaScript animiertes Template (JavaScript Based, Responsive Web, Bootstrap, one-page html) in Dreamweaver bearbeiten können, wenn das Layout nicht dasselbe wie in der Browser-Ansicht ist.

JS Animated Troubleshooter. Design-Modus in Dreamweaver Das Problem wird durch JavaScript, das sich in solchen Templates befindet, verursacht. Um Templates im Design-Modus zu bearbeiten, aktivieren Sie die Modus Live Code/ Live-Code und Live View/ Live-Ansicht in Dreamweaver. Mit Live View können Sie Ihre Seite bei Bearbeitung anschauen ohne dazu den Dreamweaver-Arbeitsbereich verlassen zu müssen. Live Code zeigt Ihnen den Code (gelb markiert), der der Darstellung des Seitenquelltexts in einem Browser entspricht. Diese beiden Ansichten sind nicht editierbar, deswegen schalten Sie die aus, um zu bearbeiten.

Seitenvorschau in der Live-Ansicht

  1. In Dreamweaver öffnen Sie Ihre .html Datei und drücken Sie auf Code- und Design-Ansicht (im Hauptmenü View/Ansicht > Code und Design oder drücken Sie nun auf Split).
  2. Drücken Sie auf den Button Live view oder Live (das hängt von der Version Ihrer Dreamweaver ab).
  3. In der Codeansicht verändern Sie .html (.css oder andere zugehörige Datei).
  4. Aktualisieren Sie die Live-Ansicht mit dem Drück auf den Schalter Refresh/Aktualisieren, der in der Werkzeugleiste des Dokuments ist, oder halten die F5-Taste fest gedrückt, um die Änderungen in der Vorschau anzusehen.
  5. Wenn Ihr Template DropDown-Menüs hat und Sie die beim Änderungen öffnen lassen möchten, halten die F6-Taste fest gedrückt (oder wählen Sie Freeze JavaScript vom Options-Menü View/Ansicht > Live View/Live-Ansicht). Mit dem Drück auf F6 treten Sie zurück
  6. Drücken Sie noch mal auf den Schalter Live view/ Live-Ansicht, um zur Split -Ansicht zurückzukehren.

Vorschau von Live-Code

  1. Stellen Sie sicher, dass Sie in der Live-Ansicht sind.
  2. Drücken Sie auf den Button Live Code.
  3. Versuchen Sie mit Elementen auf der Seite zu interagieren. Live-Code färbt die im Code (es ist möglich nun wenn Sie vorher Highlight Changes in Live Code (Änderungen in Live-Code hervorheben)in View > Live View Options („Ansicht“ > „Live-Ansicht-Optionen“) ausgewählt haben)
  4. Drücken Sie noch mal auf den Schalter Live Code , damit Sie den Code bearbeiten können.

Sehen Sie jetzt das ausführliche Video-Tutorial an:

JS Animated Troubleshooter. Design-Modus in Dreamweaver
  • Alex Ross

    You’re right, Live view was introduced in CS4. It’s not essential but it is convenient.

    There’s really no work-around but you can always do a Preview in Browser (menu: File>Preview in Browser>select a browser). it’s really only necessary when you want to see the affect of a rollover, visited link state, pop-out menu, etc.

    No votes yet.
    Please wait...
  • Alex Ross

    Unfortunately, some HTML-based templates just can’t be edited using Split/Design mode of DW due to their advanced and complex HTML5/CSS3/JS coding.

    No votes yet.
    Please wait...
 
Online-Chat
We help you to choose the right product.
Chat starten