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

ヒューマンアカデミー Adobe Dreamweaver 感想
XD デザイン

「Webサイトを作成したい」

Adobe Dreamweaverを使うとLP(ランディングページ)を簡単に作れるらしい」

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

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

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

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

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

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

ヒューマンアカデミー たのまな Adobe

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

2020年5月8日




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

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

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

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

(個人向け)

Adobe Dreamweaver 購入方法 個人

(学生・教職員向け)

Lightroom_スクリーンショット 2020-05-05 8.31.32

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

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

Adobeのコンプリートプランパッケージ

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

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

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

たのまな アドビトレーニング講座

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

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

たのまなAdobeオンライントレーニング1ヵ月

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

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

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

概要

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

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

Adobe Dreamweaverの講義内容(2020年4月)

(上巻)

  • 完成例の確認
  • Dreamweaverの画面構成
  • 新しいドキュメントの作成とサイト定義
  • マークアップ
  • 画像と動画の挿入
  • CSSの基本
  • CSSによる画像の配置
  • DIV要素によるコンテンツのグループ化

(中巻)

  • IDの追加と基本的なデザインレイアウトの指定
  • IDと要素を組み合わせたセレクタの設定
  • ナビゲーションの設定
  • ヘッダ内のレイアウト
  • classの追加

(下巻)

  • 基本レイアウトの仕上げ
  • CSSによるボタンの作成
  • リンクの設定
  • メタ情報の設定
  • レスポンシブなWebページ
  • アップロード

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

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

完成例の確認

Dreamweaver_スクリーンショット 2020-05-05 21.49.40

完成例を確認します。

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

Dreamweaverの画面構成

Dreamweaver_スクリーンショット 2020-05-06 8.35.56

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

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

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

Dreamweaver_スクリーンショット 2020-05-06 8.42.13

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

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

マークアップ

Dreamweaver_スクリーンショット 2020-05-06 9.04.46

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

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

画像と動画の挿入

Dreamweaver_スクリーンショット 2020-05-06 9.36.46

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

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

CSSの基本

Dreamweaver_スクリーンショット 2020-05-06 10.10.03

CSSの基本を学べます。

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

CSSによる画像の配置

Dreamweaver_スクリーンショット 2020-05-06 11.09.23

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

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

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

Dreamweaver_スクリーンショット 2020-05-06 12.58.46

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

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

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

Dreamweaver_スクリーンショット 2020-05-06 13.48.14

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

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

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

Dreamweaver_スクリーンショット 2020-05-06 17.35.30

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

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

ナビゲーションの設定

Dreamweaver_スクリーンショット 2020-05-06 17.53.46

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

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

ヘッダ内のレイアウト

Dreamweaver_スクリーンショット 2020-05-06 19.50.36

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

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

classの追加

Dreamweaver_スクリーンショット 2020-05-06 20.03.58

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

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

基本レイアウトの仕上げ

Dreamweaver_スクリーンショット 2020-05-06 21.07.23

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

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

CSSによるボタンの作成

Dreamweaver_スクリーンショット 2020-05-06 21.17.55

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

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

リンクの設定

Dreamweaver_スクリーンショット 2020-05-06 21.20.29

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

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

メタ情報の設定

Dreamweaver_スクリーンショット 2020-05-06 21.25.19

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

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

レスポンシブなWebページ

Dreamweaver_スクリーンショット 2020-05-06 21.47.08

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

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

アップロード

Dreamweaver_スクリーンショット 2020-05-06 21.53.06

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

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

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

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

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

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

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

Adobeのコンプリートプランパッケージ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください