Responsive Design mit Dreamweaver CC 2015 und Bootstrap Tutorials – Teil 3 und 4

Vor einigen Tagen habe ich den ersten und zweiten Teil meiner neuen Tutorial Serie „Responsive Design mit Dreamweaver CC 2015 und Bootstrap“ online gestellt. Jetzt ist es soweit – die Teile 3 und 4 sind ebenfalls online. Da Adobe bei der Erstellung von responsive Websites auf das Framework Bootstrap umgestellt hat, hat sich bei der Erstellung einer responsive Site doch einiges – zum Glück zum Vorteil verändert. Die Tutorial Serie zeigt Schritt für Schritt, wie man dabei vorgeht. In den Teilen eins und zwei wurden die Grundlagen erklärt und das Basis Gridsystem in Dreamweaver erstellt. In den Teilen drei und vier geht es um die Inhalte, im speziellen um das Einfügen verschiedenster Elemente und das anschliessende Formatieren.


Ihr findet alle 4 Teile in meinem Youtube Channel.

Teil 3 – Inhalte einfügen

Der dritte Teil der Serie widmet sich dem Einfügen der Inhalte. Dabei werden verschiedene Inhaltstypen eingefügt. Angefangen bei einem normalen Bild, über responsive Images bis zur responsive Navigation, die in der mobilen Variante das allseits bekannte Ausklapp Menü darstellt.

Teil 3: Responsive Design mit Dreamweaver CC 2015 und Bootstrap

Teil 4: Inhalte formatieren

Im abschliessenden vierten Teil geht es primär darum, die eingefügten Inhalte zu formatieren. Dabei wird gezeigt, wie man mit dem CSS Designer von Dreamweaver neue Regeln erstellt. Es wird aber auch gezeigt, wie man bestehende Bootstrap Regeln verändert, bzw. im Vorfeld herausfinden, welche Regeln überhaupt geändert werden müssen. Weiters gehe ich darauf ein, Regeln nur bei bestimmten Bildschirm Breiten wirken zu lassen.

Teil 4: Responsive Design mit Dreamweaver CC 2015 und Bootstrap

Wie schon im letzten Post erwähnt, könnt ihr auch bei meiner Kursplattform unter http://www.webdesign-coach.com vorbeisehen. Dort werde ich noch im Sommer meinen Dreamweaver Kurs starten. Als besonderen Bonus, bekommen alle, die sich im Juli zum Newsletter anmelden den Kurs nach Fertigstellung kostenlos zu Verfügung gestellt.

Ich würde mich auch freuen, wenn Ihr meine Facebook Page besucht und die Seite mit “Gefällt mir” markiert 🙂

Schreibt mir doch bitte ein Kommentar, wie ihr die neuen Funktionen zum Thema responsive Design in Dreamweaver findet und ob euch die Tutorials geholfen haben. Welche Infos zum Thema Dreamweaver würdet ihr noch benötigen?

Facebook

Ich würde mich übrigens freuen,
wenn Du auch meine Facebook Seite
besuchst und mein Fan wirst.

Andreas Stocker

Andreas Stocker

Andreas hat 25 Jahre Webagentur Erfahrung und gibt jetzt sein Wissen weiter, wie man selbst einen erfolgreichen Webauftritt umsetzt und betreut.

Dieser Beitrag hat 14 Kommentare

  1. Joachim Reichel

    Sehr geehrter Herr Stocker
    Mit den 4 Tutorials kann man sich hervorragend den Einstieg in die neue Bootstrap-Dreamweaver 2015 CC Version hineinarbeiten – Danke, GENAU das habe ich mich sehnlichst erhofft. Auch wenn man im vierten Teil manchmal etwas ins „Tanzen“ kommt sind die Dinge nach mehrmaligem Rückspulen perfekt verständlich! Die Herausforderung das „alte“ Dreamweaver Strap System zu vergessen gelingt mit diesen Tutorials perfekt, da wirklich ganz von Anfang alles detailliert und nachvollziehbar erklärt wird!

    Bleibt mir nur noch Ihnen einen riesigen Dank für diese 4 Tutorials auszusprechen! Das Durcharbeiten hat sich wirklich 100% gelohnt.

    1. Andreas

      Hi,

      danke für die positive Rückmeldung. Da lohnt sich die Arbeit der Tutorials, wenn man sieht, dass damit wirklich geholfen werden kann.

      Bei welchen Bereichen gab es die Probleme, wo man rückspulen musste?

      Ich denke der Kurs, der jetzt bald startet wird noch einiges Interessantes bieten.

      LG Andreas Stocker

  2. Peter

    Hallo,

    Deine Kurse sind sehr gut und auch logisch aufgebaut. Damit läßt sich wirklich was anfangen. Mir fehlen noch Informationen zum Umgang mit Templates im Dreamweaver. Ich möchte mit verschachtelten Templates arbeiten, wo oben die Hauptnavigation ist und an der Seite kontextabhängig ein weiteres Menü erscheint. Beispiel einer nicht-responsiven Seite ist unter „Website“ angegeben.
    Welche Hürden sind im Umgang mit responsive Design zu nehmen. Bei der Mobilphone-Ansicht sollte, nach meiner Meinung, noch eine Navigation ganz unten sein, damit bei langen Seiten niemand nach oben scrollen muß

    Grüße
    Peter

    1. Andreas

      Hallo Peter,

      ich werde in nächster Zeit auch mal auf das Thema Templates mit Dreamweaver eingehen.

      LG Andreas

  3. Samwana

    Hallo Andreas,

    ich hab viel gelernt aus deine Tutorials die sind top!
    Jetzt habe ich eine Frage, ich habe ein Design bekommen zum umsetzen, wo sich ein Bild praktisch auf 2 Spalten drauf setzt. Ist es möglich so was in Bootstrap zu machen? Ich habe eine 10+2 und müsste da oben drauf ein 8+4 draufsetzen um das Bild in der 4 zu positionieren. Geht so was?

    LG Samwana

    1. Andreas

      Hallo Samwana,

      wenn ich es richtig verstanden habe, dann möchtest Du oberhalb Deines Inhaltes noch eine Zeile mit einem Bild haben, wobei sich diese Zeile in 8+4 aufteilen soll. Wenn das so ist, dann ist das mit DW und Bootstrap sehr einfach. Du musst nur eine neue Bootstrap Row hinzufügen und halt oberhalb der Zeile ziehen, über der Du die Inhalte haben willst. In diese Row kann man nun recht einfach die Elemente 8+4 hineinziehen. Hoffe die Info hilft Dir weiter.

      LG Andreas

      1. Samwana

        Hallo Andreas,
        danke für die schnelle Antwort. Das ist nicht ganz was ich gemeint habe. Ich habe aber eine Lösung gefunden.
        LG
        Samwana

        1. Andreas

          Freut mich wenn es geht. Wenn es noch Fragen gibt einfach melden.

          LG Andreas

  4. Leo

    Hallo Andreas,

    deine Tutorials sind einfach toll und mir als relativer Neuling ist damit sehr geholfen! Die Videos sind sehr gut strukturiert und die Sachverhalte sehr verständlich erklärt. Mir stellt sich nur die Frage, wie ich hier Unterseiten erstellen und einbinden kann, die z.B. die gleiche Navigation (und z.B. einen gemeinsamen Footer) haben sollen. Beim Vorgänger war dies ja durch das Nutzen von HTML-Vorlagen für Unterseiten möglich. Wie verhält sich das, wenn die index.html wie in deinem Tutorial aus einem neuen bootstrap-framework heraus generiert wird? Ich vermute, das hier die index.html anders aufgebaut werden muss. Aber wie kann ich sie als Vorlage speichern? Oder geht das nun auch anders?

    Vielen Dank,
    Leo

  5. thomas

    Hallo Andreas

    Danke für die Tutorials!!
    Geht es weiter? Interessiere mich für die Themen Templates, JQuery-Funktionen, Farbschemata… Also Funktionen, die eine Webseite besser nutzbar und individueller machen.

    Viele Grüße, Thomas

    1. Andreas

      Hallo Thomas,

      ja es wird weitere Tutorials geben. Nachdem jetzt die Erstellung meines Kurses für Dreamweaver fertig gestellt ist, arbeite ich gerade an neuen Inhalten und Tutorials. Das Thema jQuery ist hier auf jeden Fall geplant. Auch dem Thema Templates werde ich mich noch näher widmen, da dies in der neuen Adobe DW Version in der Live Ansicht nicht gerade einfach geworden ist (da es dort gar nicht mehr unterstützt wird).

      Wenn Du weitere Vorschläge und Ideen für Inhalte hast, kannst mir diese gerne mitteilen.

      LG Andreas

  6. Doris

    Hallo Andreas,
    die Videos sind wirklich nicht schlecht, was aber schlecht ist, ist die Tatsache, dass beim Einfügen einer Navigation „Basic“, so wie du es beschreibst, das Menü NICHT responsive ist, sondern z.B. bei der Navigation „fixed to top“. Nach mehrmaligen Versuchen und exaktem Nacharbeiten ist mir dies aufgefallen.
    Gruß
    Doris

    1. Andreas

      Hallo Doris,

      danke fuer den Hinweis, ich werde mir das mal ansehen – das Menü sollte natürlich auch responsive sein.

      LG Andreas

Schreibe einen Kommentar

Video vom: 

Über den Autor

Andreas Stocker

Andreas Stocker

Andreas hat 25 Jahre Webagentur Erfahrung und gibt jetzt sein Wissen weiter, wie man selbst einen erfolgreichen Webauftritt umsetzt und betreut.

Letzte Beiträge