Dreamweaver でこれらのチュートリアルをお試しください
モダンでレスポンシブな web ページをデザイン
Webページのコンテンツを各種デバイスに対応させられるレスポンシブなグリッドレイアウトを作成します。

HTMLとCSSを使ってコンテンツを行と列のグリッドにレイアウトし、印象的なヘッダー画像とキャッチーなテキストをファーストビューに配置します。
どのWebページにも、メッセージを伝えるためのテキストと画像が必要です。グリッドの構造ができたら、今度はWebページのテキスト、画像、カラー、フッターなど、残りのコンテンツを追加して配置します。
Webデザインの表示がモバイルデバイスで完成したら、今度はCSSメディアクエリーを使用して、タブレットやデスクトップの画面で表示したときにレイアウトが自動的に調整されるようにします。これが終了すれば、DreamweaverでのレスポンシブWebページの作成は見事完成です。