Dreamweaver CC 2015の使い方・基本トレーニング・講座

This work is licensed under a Creative Commons Attribution 3.0 Unported License

Dreamweaver CC 2015は、あらゆるブラウザーやデバイスに最適なWebサイトを構築できるアプリケーションで、HTMLやCSS、JavaScriptやjQueryなどのソースを入力すること無く、アプリケーションの操作感覚でWebサイトを構築していくことが可能なアプリケーションです。このトレーニングでは、自分の作品を紹介していくポートフォリオのサンプルサイトを作りながら、特にHTMLやCSSを意識せず、Dreamweaverの基本操作と、Webサイトが出来上がっていく一連のプロセスを学習していきます。また、このトレーニングでは、PCサイトに加え、スマートフォン、タブレットなどで見たときに自動的にレイアウトを変更していくレスポンシブWebデザインを考慮しながら、Webサイトを作成していきます。
Webサイト作成の手順と準備を理解し、CSSルールから各タグの挿入、画像や動画の挿入、リンク設定、アクセシビリティ、テーブルの基本、phpを使用したフォーム、各種書式の設定、スタイルシート、float及びflexによるレイアウト、アップロードと、一通りWebサイト作成に必要な手順と機能をご紹介いたします。
なお、このトレーニングは、HTMLやCSSに関する事前の知識を有している方のほうが、アプリケーションが行っていることの意味がよくわかるかと思いますので、「HTML/XHTML/CSSの基礎知識」のトレーニングを受講された後、またはこの「HTML/XHTML/CSSの基礎知識」の学習内容と同等のスキルがある方の受講をお勧めいたします。

• Dreamweaverを利用したWebサイト制作ができるようになります。
• ソースを入力することなく、HTML5やCSS3、jQuery、JavaScript、phpを活用したWebサイトを作成する方法が理解できます。

• 「HTML/XHTML/CSSの基礎知識」を受講済みの方、または同等のスキルがある方
• PCサイトに加え、スマートフォン等での表示に対応するレスポンシブWebデザインを行いたい方

●全般

Dreamweaverは、ご存じの通りWebページ・Webサイトを作成するアプリケーションです。

サイトを構成するのに必要なHTML・XHTML・CSS・JavaScript・jQueryなどのマークアップ言語に対応し、レイアウトソフトを使用する感覚でWebサイトを作成することが可能です。

ただし、やはり、Dreamweaverのみの使い方を覚えただけでは、Webサイトを作成するには残念ながら不十分といえるでしょう。HTML・XHTML・CSS・JavaScriptなどの言語をソースレベルで理解でき、これらを手入力する作業をDreamweaverで行うことで効率よくWebサイトを作成していけるようになった、という感覚がついて初めて、Dreamweaverの恩恵を受けることができるようになるかと思います。

また、Illustrator、Photoshop、Flash、AfterEffectsなどで作成したデータは、Webページの中の1つの素材として扱うことができます。これらで作成したデータは以下のように使用します。

• Photoshop：イメージ（GIF・JPEG・PNG画像の作成）
• Illustrator：イメージ（GIF・JPEG・PNG画像の作成・SVGデータの作成）
• Flash：アニメーション（SWFアニメーション、HTML5 Canvasで使用するJavaScriptアニメーション）
• AfterEffects：ビデオコンテンツ（MP4などのコンテンツを作成し、videoタグで使用する）

Webサイトを作成するにあたって、ホームページビルダー等、様々なアプリケーションがありますが、ホームページビルダーなどは、あらかじめ用意されたページの部品(ロゴやボタンなど)を並べて配置する操作でページを制作することが可能で、ホームページビルダーはどちらかというと入門・初心者向けといえるかと思います。

Dreamweaverは、ある程度ソースでページを編集できるということを前提として、HTML5やCSS3などのマークアップにも対応したソースの入力補助機能なども充実しているため、ホームページビルダーと比べると自由度の高い、どちらかと言えば中上級者向けのアプリケーションと言えるため、ソースを理解している方にとってみれば、Dreamweaverの方が、かえって使い勝手が良く感じるかと思います。

ただし、このトレーニングでは、ソースの入力はほとんど行いませんので、特にソースを理解した上で受講される必要はありません。

●Web業界

Dreamweaverを使いだす目的はいろいろあるかと思います。

• 単に、Webサイトを作成したい。
• 既存（アップロード済）のWebサイトのデータがあり、その編集を行いたい。
• 他の同アプリケーションの機能では自由度が少ないため、Dreamweaverに切り替えたい

主にこういった理由で使いだすケースが多いのではないかと思います。

CMSを利用してページを作成している場合には、DreamweaverのようなアプリケーションでWebページを作成することも無いかもしれませんが、CMSなどのシステムだけで制作してしまうと、Webページは出来上がるものの、最終的にHTMLやCSSのことはよくわからない、という状態になるかと思います。

このトレーニングでは、ソースの入力はほとんど行いませんが、ページを作成しながら、HTMLやCSSのこと、CSSによるレイアウトのことなども合わせてご説明していきますので、Dreamweaverの操作に加えて以下のことも同時に習得していきます。

• トレーニング中に使用するタグの意味・役割・使い方
• CSSのセレクタ・プロパティ・値とその使い方
• CSSのfloatによるレイアウト
• ブラウザに応じたレイアウトの注意点
• ビデオ・アニメの操作
• HTML4.01・XHTML1.0・HTML5の違い
• CSS3の追加セレクタ
• phpを使用したフォームの作成

Dreamweaverは、業界最先端のWebサイト・Webアプリケーションを効率的にデザイン・開発・管理できるアプリケーションです。CC2015ではビジュアルメディアクエリーを搭載し、スマートフォンサイトとPCサイトを同時にデザインしながらサイトを作成することがより簡単にできるようになりましたので、Webデザイナー、Webデベロッパー、ビジュアルデザイナーの方にとって理想的なアプリケーションといえます。このトレーニングでは、これからDreamweaverを使ってWebサイトを作る方を対象に、サイト作成の準備からサイトの制作手順、アップロードまでをトレーニングします。レスポンシブWebデザインはもちろん、CSS3.0のトランジション、Emmetによるソース入力補助機能、phpを使ったフォーム、jQuery、HTML5ビデオなどを作成しながらWebサイトを作成していきます。CC2015の新機能を活用し、より効率的なWebサイト作成を習得してください。