Dreamwaever CC 2015 基礎編 パート1

Creative Edge School Books

Dreamweaver CC 2015 Basic I

Dreamweaver CC 2015.1 基礎編パート1

BootstrapとDreamweaverでレスポンシブWebデザインのページをデザインしよう!
久しぶりに最新のDreamweaverを見てどう使っていいのか分からなくなった人、ライブビューで挫折してしまった人も再チャレンジ!


「Dreamweaver CC 2015 基礎編 パート1」は、2015年2月に発売した「デザイナーのためのデザイニング・イン・ザ・ブラウザ」シリーズの第一弾「Dreamweaver基礎編」のアップデート版です。

14本のスクリーンキャスト(2時間30分の学習ビデオ)と素材データ、前作の電子書籍で構成されています。

今回のコンテンツは基礎編の2015バージョンという位置づけで、初心者向けの内容になっています。


購入方法、価格については[購入情報]をご覧ください。

「デザイナーのためのデザイニング・イン・ザ・ブラウザ」シリーズは当初、Dreamweaver基礎編、実践編、Photoshop実践編の3冊を予定していましたが、バージョンアップによるカリキュラム変更でリリースを延期していました。12月1日に新しい外観のPhotoshopがリリースされましたので、「Photoshop実践編」の編集作業を再開しています。

今回のパート1は、「Dreamweaver基礎編」のアップデート版になります。1月下旬予定のパート2が「Dreamweaver実践編」に相当します。

予定していた「デザイナーのためのデザイニング・イン・ザ・ブラウザ」シリーズの3冊

尚、「Dreamweaver基礎編」の購入者には、「Photoshop実践編」を無料提供するキャンペーンをやっていましたので、リリース日にはダウンロードページに追加します。
※「Photoshop実践編」ダウンロード用のパスワードを掲載しておきますので、メモしておいてください。


更新日:2015年12月7日(月)

Dreamweaver CCの最新バージョン2015.1について

2015.1バージョンの新しいスプラッシュスクリーン

12月1日、Dreamweaverがアップデートし、2015.1バージョンになりました。

CC 2015でネイティブサポートしたBootstrapのバージョンが3.3.5になり、jQueryも1.11.3に更新されています(挿入パネルにはBootstrapの新しいコンポーネントが追加されています)。ビジュアルメディアクエリーやExtract、DOMパネル、CSSデザイナー、そしてライブビューも機能強化されています。詳細は新機能のページをごらんください。

「Dreamweaver CC 2015 基礎編 パート1」は、アップデートする前の2015バージョンを使用していますが、第10回から最新の2015.1バージョンに切り替えています。初心者を対象とした学習内容になっていますので、2015.1バージョンでも問題なく学ぶことができます。


更新日:2015年12月6日(日)


Contents

学習内容と達成目標:

「Dreamweaver CC 2015 基礎編」は、パート1と2に分け、別のコンテンツとしてリリースします。パート2は、パート1の学習内容をマスターしている前提で、中級者以上を対象にします(2016年1月末リリース予定)。

学習内容:

  • Bootstrapを使ったウェブページ制作の「基本」を習得
  • DreamweaverのライブビューやDOMパネル、CSSデザイナーを最大限に活用した効率的な作業を完全習得
    ※完全習得できるように2時間かけてじっくり学びます。コードビューは使用しません

達成目標:

  • Bootstrapのグリッドシステムについて理解できる
  • 初歩レベルのレスポンシブWebデザインのページを効率よく作成できる
  • ライブビューやDOMパネル、CSSデザイナーの使い方を理解し、実践できる

Dreamweaver基礎編の電子書籍

本コンテンツには、2月にリリースした「Dreamweaver 基礎編」の電子書籍が含まれています。2014バージョンを対象にしていますが、大半は2015.1バージョンでも違いはなく、参考書として活用することができます。

学習ビデオは、2時間30分ありますが、Dreamweaverについての概要やHTML、CSSについては詳しく解説していませんので、ビデオによる実習を始める前に、事前学習しておくことをお薦めします。

※電子書籍は、EPUB 3形式になっており、対応リーダー(iBooksやAdobe Digital Editionsなどで読むことができます)



第1回 Bootstrapについて理解する

Dreamweaver CC 2015で統合されたCSSフレームワーク「Bootstrap(ブートストラップ)」について学びます。Bootstrapは、水平方向に12カラム並ぶグリッドシステムを採用しており、可変幅と固定幅のデザインを使い分けることができます。このグリッドシステムは、ページレイアウトのベースになりますので、作業を始める前に理解しておく必要があります。

  • 再生時間:9分53秒
  • 学習優先度:最重要
  • 学習レベル:初歩

更新日:2015年11月29日(日)



第2回 サイトを定義する

デスクトップにフォルダを作成して、新規サイトを定義します。素材データを定義したサイトのフォルダにコピーしますので、事前にダウンロードしておいてください。ワークスペースのレイアウトは[デフォルト]の状態で解説します。Bootstrapを選択して、新規ドキュメントを作成し、登録したブラウザーでプレビューできるように初期設定を確認しておきます。

  • 再生時間:6分45秒
  • 学習優先度:最重要
  • 学習レベル:初歩

更新日:2015年11月24日(火)



第3回 画像を配置してBootstrapのクラス名を追加する

DOMパネルとエレメントディスプレイ、挿入パネルの基本操作について学習します。DOMパネルのタグを選択し、ページに表示される[エレメントディスプレイ]で、Bootstrapのクラス名を追加していく手順を覚えてください。挿入パネルを使って、BootstrapのコンポーネントやHTMLのImage(画像)をページに挿入します(第2回でコピーした素材データを使用)。

  • 再生時間:8分41秒
  • 学習優先度:最重要
  • 学習レベル:初歩
  • 素材データ:第2回の素材データを使用

更新日:2015年11月24日(火)



第4回 クラス名を追加して画像を水平に並べる

Bootstrapのグリッドシステムの初歩を学びます。第3回で挿入した画像を2つ複製して、水平に3つの画像を並べます。画像の複製はDOMパネルを使用、レイアウトは(各画像の)エレメントディスプレイでBootstrapのクラス名を追加しながら、設定していきます。DOMパネルとエレメントディスプレイは使用頻度の高い機能です、しっかり理解しておきましょう。

  • 再生時間:8分24秒
  • 学習優先度:最重要
  • 学習レベル:初歩
  • 素材データ:第2回の素材データを使用

更新日:2015年11月24日(火)



第5回 挿入パネルとDOMパネルの使い方を習得する

Dreamweaver CC 2015の挿入パネルに追加された[Bootstrapのコンポーネント]には、列の数を指定するだけで、マルチカラムの行をページに挿入できるコンポーネントが用意されています。第4回で作成した(3つの画像を水平に並べる)レイアウトをBootstrapのコンポーネントで素早く作成します。ページレイアウトの基本的な組み立て方を学んでください。

  • 再生時間:11分01秒
  • 学習優先度:最重要
  • 学習レベル:初級
  • 素材データ:第2回の素材データを使用

更新日:2015年12月6日(日)



第6回 Bootstrapのコンポーネントでカラムを配置する

第5回では、マルチカラムの行を挿入できるBootstrapのコンポーネントで、3つの画像を水平方向に並べましたが、ここではテキストを配置します。素材データのテキストファイルを使って、文章をコピーして、ライブビューで編集していきます。ライブビューでテキストブロックを編集するための操作方法について学習します。また、段落を見出しに変更する方法も学びます。

  • 再生時間:9分01秒
  • 学習優先度:最重要
  • 学習レベル:初級
  • 第2回の素材データに入っているテキストファイル(DW-Lesson01.txt)を使用

更新日:2015年12月6日(日)



第7回 ページを作成しながらライブビューの操作を習得する

第2〜6回で作成したページを複製して、全ての要素を削除、一からページを作成していきます。ライブビューとコードビューを同時に使用する「効率的なテキスト編集」について学習します。Bootstrapには、「固定幅」と「可変幅」の2種類のグリッドレイアウトがあります。固定幅レイアウトと可変幅レイアウトを比較しながら、どのような違いがあるのか確認していきます。

  • 再生時間:14分40秒
  • 学習優先度:最重要
  • 学習レベル:初級
  • 素材データ:第2回の素材データに入っているテキストファイル(DW-Lesson01.txt)を使用
  • 保存するファイル:index2.html

更新日:2015年12月6日(日)



第8回 タグを挿入しながらページの基本構造を作る

第7回で作成したページを編集します。挿入パネルで「div」タグを挿入して、Bootstrapのクラス名を追加しながら、レスポンシブWebデザインのベースとなるページを作成します。挿入パネルでライブビューの画面にタグを挿入し、DOMパネルでタグを選択、エレメントディスプレイでBootstrapのクラス名を追加していく作業手順を繰り返しながらデザインを進めていきます。

  • 再生時間:9分06秒
  • 学習優先度:最重要
  • 学習レベル:初級
  • 素材データ:ありません

更新日:2015年12月6日(日)



第9回 CSSファイルを作成して見栄えを整える

第7〜8回で作成したページを編集します。エレメントディスプレイで独自のクラス名を追加して、新しいCSSファイルを作成、[CSSデザイナー]パネルでスタイルを指定していきます。ここでは、CSSを記述せず、CSSデザイナーで見栄えを整えます。コードは書きませんが、CSSの基礎知識は必要になります(※CSSに詳しくなくてもページデザインの「体験」は可能です)。

  • 再生時間:12分35秒
  • 学習優先度:最重要
  • 学習レベル:初級
  • 素材データ:ありません
  • 保存するファイル:style.css

更新日:2015年12月6日(日)



第10回 ナビゲーションバーとジャンボトロンを編集する

新規ページを作成して、Bootstrapコンポーネントのナビゲーションバーとジャンボトロンを配置します。ページの最上部にはナビゲーション、その下にジャンボトロンをレイアウトして、独自のクラス名を追加しながら、CSSデザイナーでページの見栄えを整えていきます。また、ナビゲーションバーの不必要なボタンをマウス操作とコンテキストメニューで削除します。

  • 再生時間:13分33秒
  • 学習優先度:重要
  • 学習レベル:中級
  • 素材データ:ありません
  • 保存するファイル:demo.html、demo.css

更新日:2015年12月6日(日)



第11回 得した機能を使ってシングルページを作成する

新規ページを作成して、(第10回で学んだ操作・手順とは異なる方法で)Bootstrapコンポーネントのナビゲーションバーとジャンボトロンを配置します。DOMパネルでジャンボトロンを3つ複製して、水平方向に配置していきます。エレメントディスプレイとCSSデザイナーの[セレクター]で、独自のクラス名を追加し、背景色を変更したり、余白などを調整します。

  • 再生時間:16分10秒
  • 学習優先度:重要
  • 学習レベル:中級
  • 素材データ:ありません
  • 保存するファイル:demo2.html、demo2.css

更新日:2015年12月6日(日)



第12回 レイアウトを調整してページ内のリンクを設定する

第11回で作成したページを編集します。挿入パネルで、4つのジャンボトロンの上に「div」タグを挿入して、ID名を追加していきます。ナビゲーションの4つのボタンにページ内リンクを指定、クリックするとページ内の指定した箇所を表示する仕組みを作ります。また、モバイル用メニューが(リンクをクリックしたとき)自動的に閉じるスクリプトをページに組み込みます。

  • 再生時間:11分15秒
  • 学習優先度:重要
  • 学習レベル:中級

更新日:2015年12月6日(日)



第13回 見出しレベルを変更/他のページの要素をコピーする

第12回で作成したページを編集します。ジャンボトロンの中に配置されているタイトルの「見出しレベル」を変更します。第7回で作成したページを開いて、マルチカラムのテキスト部分をコピーし、作成中のページに組み込みます。コピーしたテキストは、CSSデザイナーで文字サイズと行間(行の高さ)を調整します。CSSデザイナーパネルとDOMパネルを最大限に活用します。

  • 再生時間:12分26秒
  • 学習優先度:重要
  • 学習レベル:中級
  • 素材データ:ありません(第7回で作成したページを使用)

更新日:2015年12月6日(日)



第14回 ブレークポイントを設定してスタイルを指定する

第13回で作成したページを編集します。マルチカラムのテキスト部分を4つのジャンボトロンにコピーしていきます。ウィンドウの幅が狭いときに、ジャンボトロンのタイトルの一部が隠れてしまうため、ブレークポイントを設定して、タイトルを小さくします。ここでは、ウィンドウの幅が480ピクセル以下になったとき、タイトルの文字サイズを小さくする仕組みを作ります。

  • 再生時間:7分27秒
  • 学習優先度:重要
  • 学習レベル:中級
  • 素材データ:ありません

更新日:2015年12月6日(日)



第14回の追加 自動スクロールを設定する

追加コンテンツです。第14回では、ナビゲーションバーのボタンにページ内リンクを設定しました。ここでは、「自動スクロール」を組み込みます(ボタンをクリックすると自動的にスクロールして指定した箇所を表示します)。JavaScriptのライブラリを使用しますので上級レベルになりますが、パート1では対象外となりますので、組み込む方法だけ解説します。JavaScriptの知識は必要ありません。
この追加コンテンツは、スクリーンキャストではありません。テキストと図版で解説しています。

  • 学習優先度:参考
  • 学習レベル:上級
  • 素材データ:[DW-PageScroll.zip][MyLP.zip]
    ※読者ページでダウンロードしてください
  • 完成サンプルビデオ(完成ページを確認できます)

更新日:2015年12月10日(木)



Lesson

第1〜2回の課題

第1回は概論です。Bootstrapのグリッドシステムについて学習します。第2回は、サイトの定義について学びます。ここから第14回までは実技学習になります。

  • Bootstrapのグリッドシステムについて
  • Bootstrapの「可変幅」レイアウトと「固定幅」レイアウトの違い
  • Dreamweaverに組み込まれたBootstrapのコンポーネント
  • ライブビューではコードを記述しないがHTMLとCSSの知識は必要。なぜ、CSSの基礎知識がないとページを作成できないのか理解しておくこと
  • サイトを定義する
  • 素材データの画像を定義したサイトにコピーする
  • Bootstrapを使用した新規ページの作成
  • ウェブブラウザーを登録する方法

第2〜4回の課題

第3回では、DOMパネルとライブビューのエレメントディスプレイの使い方、挿入パネルの「Bootstrapのコンポーネント」をページに挿入する方法などを学習します。第4回では、Bootstrapのクラス名を追加しながら、画像を水平方向に3つ並べます(ウィンドウの幅が狭くなると垂直方向に並びます)。

  • デフォルトのワークスペースレイアウトの構成
  • スクラバーの使い方
  • DOMパネルでタグを選択する方法
  • ライブビューに表示されるエレメントディスプレイについて
  • 挿入パネルの「Bootstrapのコンポーネント」からページに挿入してみる。DOMパネルとエレメントディスプレイにどう表示されるか理解する
  • 配置されている要素の中に挿入したい(子要素にしたい)場合は[ネスト]を使う
  • 配置されている要素の「親要素」として挿入したい場合は[折り返し]を使う
  • エレメントディスプレイであらかじめ用意されているBootstrapのクラス名を追加する方法
  • レスポンシブな画像にする
  • DOMパネルでページ上の画像を複製する
  • エレメントディスプレイでページ上の画像を入れ替える
  • 画像を水平方向に並べる/ウィンドウの幅が狭いときには垂直方向に並べる

第5回の課題

第5回では、第4回と同じ表現を異なる手順で進めます。ここでは、div要素を挿入して「親要素」にしたり、画像を「子要素」として挿入するなど、要素の親子関係について理解します。DOMパネルを使って、視覚的に学習していきます。

  • 挿入パネルの「Bootstrapのコンポーネント」で「3列」の行を挿入する
  • 挿入した行の各列に画像を配置していく
  • DOMパネルで、親要素、子要素を設定する
  • Bootstrapのグリッドシステムでは、カラムの左右に15ピクセルの余白が設定されている
  • Bootstrapのデザインの調整は、CSSデザイナーで指定していく

第6回の課題

第6回では、第4回で作成したレイアウトを削除し、新たに「3列」の行を挿入して、段落を追加していきます。DOMパネルの「子としてペースト」やエレメントディスプレイの「クイックタグ編集」の使い方などが新しい学習です。

  • DOMパネルでページ上の要素を削除する方法
  • 挿入パネルで「段落」を挿入するとダミーテキストが挿入される
  • テキストブロックのテキストを全て選択する場合はトリプルクリック
  • DOMパネルの「子としてペースト」を理解する
  • 画像が並ぶ行とテキスト行の間に区切り線を挿入する
  • エレメントディスプレイで「クイックタグ編集」を使って「段落」を「見出し」に変更する

第7回の課題

第7回では、第2〜6回で作成したページを複製して、全ての要素を削除、一からページを作成していきます。ライブビューでは、テキストを編集しにくいため、コードビューを併用します。DOMパネルを使いこなすための学習が中心になります。また、固定幅レイアウトと可変幅レイアウトの違いをここで学びます。

  • ファイルパネルでファイルを複製する方法
  • 挿入パネルで「見出し」を挿入する
  • 挿入したテキスト(見出しや本文)の編集はライブビューではなくコードビューを使うこと
  • ページ上の見出しや段落をコンテナの中に入れたい場合の操作手順を理解する
  • コンテナの中に見出しや段落を移動させたい場合はDOMパネルを使う
  • Bootstrapのコンポーネント「container」と「container-fluid」の違いを理解する
  • 「container」と「container-fluid」を実際に試してみる

第8回の課題

第8回では、レスポンシブWebデザインのベースとなる基本のページを作成します。コンテナ(div要素)の中にもう1つのコンテナがあって、さらにその中に段落がある、といった入れ子の構造をDOMパネルで効率よく作成していきます。DOMパネルの実践的な使い方をここで習得します。

  • DOMパネルで、コンテナの中に見出しや段落を移動させたいときの操作方法(復習)
  • DOMパネルで段落(「p」タグ)を選択
  • 挿入パネルでコンテナ(「div」タグ)を挿入して「折り返し」で親要素にする
  • エレメントディスプレイでBootstrapのクラス名を追加してグリッドレイアウトを指定していく
  • 追加したクラス名の変更は「クイックタグ編集」を使う

第9回の課題

第7〜8回で作成したページを編集します。エレメントディスプレイで独自のクラス名を追加して、新しいCSSファイルを作成、[CSSデザイナー]パネルでスタイルを指定していきます。ここでは、CSSを記述せず、CSSデザイナーで見栄えを整えます。コードは書きませんが、CSSの基礎知識は必要になります(※CSSに詳しくなくてもページデザインの「体験」は可能です)。

第10回の課題

新規ページを作成して、Bootstrapコンポーネントのナビゲーションバーとジャンボトロンを配置します。ページの最上部にはナビゲーション、その下にジャンボトロンをレイアウトして、独自のクラス名を追加しながら、CSSデザイナーでページの見栄えを整えていきます。また、ナビゲーションバーの不必要なボタンをマウス操作とコンテキストメニューで削除します。

第11回の課題

新規ページを作成して、(第10回で学んだ操作・手順とは異なる方法で)Bootstrapコンポーネントのナビゲーションバーとジャンボトロンを配置します。DOMパネルでジャンボトロンを3つ複製して、水平方向に配置していきます。エレメントディスプレイとCSSデザイナーの[セレクター]で、独自のクラス名を追加し、背景色を変更したり、余白などを調整します。

第12回の課題

第11回で作成したページを編集します。挿入パネルで、4つのジャンボトロンの上に「div」タグを挿入して、ID名を追加していきます。ナビゲーションの4つのボタンにページ内リンクを指定、クリックするとページ内の指定した箇所を表示する仕組みを作ります。また、モバイル用メニューが(リンクをクリックしたとき)自動的に閉じるスクリプトをページに組み込みます。

第13回の課題

第11回で作成したページを編集します。挿入パネルで、4つのジャンボトロンの上に「div」タグを挿入して、ID名を追加していきます。

第14回の課題

第11回で作成したページを編集します。挿入パネルで、4つのジャンボトロンの上に「div」タグを挿入して、ID名を追加していきます。


Text Casting

中学生のためのレスポンシブWebデザイン

「Dreamweaver 基礎編パート1」の追加コンテンツです。

中学生向けのDreamweaver CC 2015「超」入門です。「シンクゼロマガジン・ライト版」で投稿しているテキストキャスティングのアーカイブをまとめて掲載しています。
専用ページにログインすると、素材データ、および完成データ、サンプルデータなどをダウンロードすることができます。


テキストキャスティングとは、オンライン講座のエッセンスをテキスト化し、簡潔にまとめて数回に分けて配信する学習コンテンツのことです。




更新日:2016年3月4日(金)



Payment

購入方法

本コンテンツ「Dreamweaver CC 2015 基礎編 パート1」は、「デザイナーのためのデザイニング・イン・ザ・ブラウザ」シリーズの第一弾「Dreamweaver 基礎編」のアップデート版です。14本のスクリーンキャスト(学習ビデオ)と素材データ、前作の電子書籍がセットになっています。

  • 内容:学習ビデオ(14本)+素材データ+前作の電子書籍
  • 学習ビデオの総再生時間:2時間30分
  • 価格:1,500円(税込)
    ※パート2がリリースされるまでは、先行販売の特別価格800円(税込)で購入できます。

購入ページについて:

以下の購入ボタンをクリックすると「デザイナーのためのデザイニング・イン・ザ・ブラウザ Dreamweaver 基礎編」の購入ページが表示されますが、問題ありません。本コンテンツの価格は、1,500円(税込)ですが、パート2がリリースされるまでは、先行販売特別価格 800円(税込)で提供するため、前作のページを利用しています。

「Dreamweaver CC 2015 基礎編 パート1」(特別価格)の購入

先行販売特別価格:800円(税込)
購入方法は、PayPal のみですが、特別価格800円です。
当サイトで購入者の個人情報を取得しませんので、こちらからメールは送信されません。ダウンロードURLのリンクは、PayPalの決済完了ページに表示されます。

「Dreamweaver CC 2015 基礎編 パート1」(通常価格)の購入

通常価格:1,500円(税込)
購入方法は、PayPal、クレジットカード、銀行振込、コンビニ決済、楽天ID決済、電子マネー(Suica・楽天Edy)から選択できます。
決済完了後、ダウンロードURLをお知らせするメールが送信されます。


※パート2のリリース後は、通常価格になります。

続編「Dreamweaver CC 2015 基礎編 パート2」の購入

通常価格:1,500円(税込)
購入方法は、PayPal、クレジットカード、銀行振込、コンビニ決済、楽天ID決済、電子マネー(Suica・楽天Edy)から選択できます。
決済完了後、ダウンロードURLをお知らせするメールが送信されます。


※パート2は、2016年1月末のリリースを予定しています。

更新日:2015年12月7日(月)



ホームに戻る »