ヒューマンアカデミー たのまな Adobe Dreamweaverオンライン講座内容と感想【2020年5月】

「Webサイトを作成したい」 「Adobe Dreamweaverを使うとLP（ランディングページ）を簡単に作れるらしい」

ブログはWordPressで作れますが、企業の商品向けのペライチのWebサイト作成はPhotoshopやXDのカンプページからマークアップして作成するのが一般的です。

そのマークアップ作業で効率よく作業できるツールとして人気なのがAdobe Dreamweaverです。

Adobe Dreamweaverの使い方が分からない場合、Adobe Dreamweaverとその使い方を学べるオンライントレーニング通信講座がセットになったパッケージを購入すると良いでしょう。

ここでは以下を説明します。

• Adobe Dreamweaverを効率よく安く購入する方法
• Adobe Creative Cloudをたのまな ヒューマンアカデミーから購入する方法
• アドビオンライントレーニング通信講座のAdobe Dreamweaverの講義内容

※本記事は2020年の古い情報です。
最新の2022年7月の情報、「たのまな Adobeベーシック講座」の記事を参照してください。

【2022年7月】ヒューマンアカデミー たのまな Adobeベーシック講座の体験談

2022年7月2日

Adobe Dreamweaverを効率よく購入する方法

Adobe Dreamweaverを効率よく購入するには次の手順で進めるといいです。

1. Adobe Dreamweaverが含まれるAdobe Creative Cloudを無料で始める
2. Adobe Dreamweaverを7日間無料で体験する
3. 以下いずれかの方法でAdobeパッケージを購入する
   ・（学生・教職員の場合）独学で使いこなせそうならAdobeオンラインでコンプリートプランを直接購入する
   ・オンライン講座で基礎を勉強したいなら、たのまな ヒューマンアカデミーでAdobe Creative Cloudを購入する

まず、Adobe製品の各ソフトは7日間の無料体験がついています。

（個人向け）

（学生・教職員向け）

なので、Adobeオンラインにアクセスし、「無料で始める」からAdobe製品をダウンロード & インストールし、まず無料で体験してみるのがいいです。

なお、通常Dreamweaverでデザイナーから渡されるデータやデザインカンプはAdobe Photoshop、Adobe Illustrator、Adobe XDのいずれかのデータになるので、Dreamweaverだけでなくそれら全てが含まれたパッケージ、コンプリートプランが必要です。

無料期間中に解約すれば料金は発生しません。

それが面倒な場合、もしくは、基礎からしっかりと勉強すると決めてる場合、次の方法でAdobe Creative Cloudとアドビオンライントレーニング通信講座がセットになったパッケージをたのまな ヒューマンアカデミーから購入すると良いです。

その他のAdobeソフトについてはこちらを参照してください。

ヒューマンアカデミー たのまな のAdobeオンライン講座の体験談【2020年5月】

2020年5月8日

Adobe Creative Cloudをたのまな ヒューマンアカデミーから購入

Adobe Creative Cloudと動画解説のAdobeトレーニング通信講座がセットになったパッケージです。

その通信講座を受けることで学生扱いになるので、Adobe Creative Cloudを約半額で購入できます。

オンライントレーニング通信講座の期間は最短で1ヵ月、最長で3年を選択できます。

最短の1ヵ月の場合、Adobeトレーニング通信講座も含まれているのにAdobeオンラインから個人で購入するより安いです。

ヒューマンアカデミー　たのまな　アドビソフトウェア通信 はこちら

アドビオンライントレーニング通信講座のAdobe Dreamweaverの講義内容

概要

講義はオンラインの動画になっています。

上巻、中巻、下巻に分かれており、以下構成になっています。

講義で使う素材はダウンロードでき、手を動かしながら学べます。

以下にそれら講義内容を簡単に紹介します。

完成例の確認

完成例を確認します。

完成例とPhotoshopのモックデザインの確認を解説されています。

Dreamweaverの画面構成

Dreamweaverの画面構成を学べます。

メニューバー、ドキュメントウィンドウ、タグセレクター、プロパティインスペクター、パネル（ファイル、挿入、アセット、CSSデザイナー）、パネルの操作、３つのビュー（コード、分割、ライブ）

新しいドキュメントの作成とサイト定義

新規にサイトを作成する準備を学べます。

新規にindex.htmlを作成し、サイトの位置を定義してサイトを作成する準備について解説されています。

マークアップ

コードをマークアップする方法を学べます。

テキストファイルからペーストスペシャルでデザインビューにペースト（「改行の保持」を外す）、各要素（見出し、Header、ナビゲーション、Section、Aside、Footer、番号なしリスト、リスト項目、番号リスト）をマークアップする方法を解説されています。

画像と動画の挿入

画像と動画を挿入する方法を学べます。

画像の挿入、Alt属性の入力、画像サイズを削除、HTML5 Videoの挿入、ExtractでモックアップのPhotoshopファイルから画像とロゴを抽出について解説されています。

CSSの基本

CSSの基本を学べます。

CSSの仕組み、CSSのボックスモデルの要素（内容、padding、border、Margin）、CSSデザイナー、既存のCSSファイルをリンク、新規CSSファイルをリンク、セレクターを追加して値を変更（font-size）を解説されています。

CSSによる画像の配置

CSSによる画像の配置方法を学べます。

bodyに背景画像を挿入し、h1をロゴに置き換え、h1を削除せずに非表示、h1ロゴをCSS設定（background-size、widthとtext-indentを%指定、white-space、overflow-x、float）を解説されています。

DIV要素によるコンテンツのグループ化

DIV要素によるコンテンツのグループ化を学べます。

コンテンツごとにDiv要素を挿入し、グループ化する方法を解説されています。

IDの追加と基本的なデザインレイアウトの指定

IDの追加とデザインレイアウトの設定方法を学べます。

先ほど設定したDiv要素、Section要素にIDを追加し、セレクターのプロパティの各パラメーター（レイアウト、テキスト、背景）を設定する方法を解説されています。

IDと要素を組み合わせたセレクタの設定

IDと要素を組み合わせたセレクタの設定を学べます。

設定済みのIDのセレクターにセレクターを追加し、各パラメーター（レイアウト、テキスト、背景）を設定する方法を解説されています。

ナビゲーションの設定

ナビゲーションの設定を学べます。

header内のナビゲーションをfloat属性で配置し、フォント、位置、font-famly管理でAdobe Edge Web Fonts利用を解説されています。

ヘッダ内のレイアウト

ヘッダ内のレイアウトを学べます。

clearfix、position属性の設定を解説されています。

classの追加

classの追加方法を学びます。

classの追加、追加したclassで同一のスタイルを適用、パラメーターのショートハンドによる追加を解説されています。

基本レイアウトの仕上げ

基本レイアウトの最終仕上げ方を学べます。

asideにclassを追加、floatを適用してレイアウトを仕上げる方法を解説されています。

CSSによるボタンの作成

CSSによるボタンの作成方法を学べます。

ボタンにする文字列を選択し、classを追加、photoshopのデザインカンプからCSSの値を読み込みプロパティに設定してボタンを作成する方法を解説されています。

リンクの設定

リンクの設定方法を学べます。

ナビゲーションのメニューにリンクを設定する方法を解説されています。

メタ情報の設定

メタ情報の設定方法を学べます。

description、viewportを挿入する方法とmeta要素にそれらを含める目的について解説されています。

レスポンシブなWebページ

レスポンシブなWebページの作成方法を学べます。

タブレットサイズ、スマホサイズそれぞれにメディアクエリーを作成、ブレークポイントの追加、それぞれのメディアクエリーのCSSにセレクターのCSSをコピーして適切に変更する方法を解説されています。

アップロード

作成したファイル全体をサイトにアップロードする方法を学べます。

サイト設定、クローク設定、アップロード、更新したファイルのみアップロード（リモートサーバーに同期）を解説されています。

アドビオンライントレーニング通信講座を受けた感想

Adobe Dreamweaverを最短で学ぶのに最適な講座です。

真っ白な新規サイト作成からLP（ランディングページ）を作成するのに必要な知識全体を解説されており、オンライン講座で使用するサンプルも提供されているので、手を動かしながら学べます。

オンライン講座で使われているDreamweaverのバージョンはCC2015と少し古いですが、最新バージョン、CC2020（2020年5月）と操作画面は同じで問題なく使えました。

AdobeオンラインにもAdobe Dreamweaverチュートリアルがあるので、それで一度試してからヒューマンアカデミーのオンライン講座を申し込むかを決めるのが良いでしょう。