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

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

Dreamweaver CC 2015の使い方・基本トレーニングはこちら

このトレーニングは、初めてDreamweaverCCの使い方を覚えるための基本トレーニングで、HTML4及びHTML5、CSS2及びCSS3を使ったWebサイト制作を学習するトレーニングです。PhotoshopやFlashで作成したデータを素材に、Webサイトを作成する一連のプロセスを学習いたします。トレーニング中は、特にHTMLやCSSを意識せずにページ制作を行いますので、HTMLやCSS等のソースに不慣れな方でも問題ありません。
Webサイト作成の手順と準備を理解し、ページを構成するために使用する主要なタグの習得、CSSの作成と適用、AI・PSデータの活用、FLムービーの挿入、リンクの設定、jQuery UIの使用、アクセシビリティの設定、テーブルの基本、フォーム、各種書式の設定、スタイルシート、ページレイアウト、アップロードと、一通りWebサイト作成に必要な手順と機能をご紹介いたします。

• Dreamweaverを利用したWebサイト制作ができるようになります。
• HTML4・HTML5で使用する主要なタグの理解から、CSS2・CSS3によるレイアウト、Webサイトを作成する手順や準備について理解できます。

• Macintoshの基本操作が出来る方
• Photoshopの役割を理解している方

●全般

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アプリケーションを効率的にデザイン・開発・管理できるアプリケーションです。Webデザイナー、Webデベロッパー、ビジュアルデザイナーの方にとって理想的なアプリケーションといえます。このトレーニングでは、これからDreamweaverを使ってWebサイトを作る方を対象に、サイトの準備から基本的なサイトの制作手順、アップロードまでをトレーニングします。PSやFLムービーをサイト上で活用し、HTML5やCSS3、jQuery、CCでの新機能の活用により、より効率的なWebサイト作成を習得してください。