【開催終了】 Dreamweaver CC 2015の使い方・基本トレーニング |価格:13,200円より|
アドビ一覧 >
【開催終了】 Dreamweaver CC 2015の使い方・基本トレーニング |価格:13,200円より|
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サイト作成を習得してください。
伊藤 和博
株式会社イマジカデジタルスケープ
トレーニンググループ・トレーニングディレクター
講師歴20年。講座開発数100以上。
総合商社のスクールでMac/Winを使ったDTP/Webトレーニングスクールの業務全般を担当。大手PCメーカー、プリンターメーカー、化粧品メーカー、大手印刷会社、大手広告代理店、新聞社、大手玩具メーカー、大学、官公庁、団体などに向けたト レーニングなど幅広い企業の人材育成に携わる。
現在は、イマジカデジタルスケープにてAdobeCCを中心としたトレーニングの企画、講師を務める。Adobe認定エキスパート、JAGAT認定DTP エキスパート、アップルコンピュータ認定技術者、CIW JavaScript Specialist、CIW Web Design Specialist。
開催日 |
時間 |
【開催終了】 |
10:00〜17:00 |
イマジカデジタルスケープ・トレーニングルーム
住所:東京都渋谷区道玄坂1-10-8 渋谷道玄坂東急ビル8F (JR「渋谷」駅西口より徒歩5分、国道246号沿い)
[ MAP ]
はじめに
- Adobe Dreamweaver CC 2015の特徴
- 作業の基本手順
- 必要システム構成
インターフェイス
HTML4及びHTML5とXHTML、CSS
- HTMLとXHTML
- HTML4.01とHTML5
- CSS2.1とCSS3.0
- インラインCSS
- 内部CSSと外部CSS
- CSSの解除と追加、流用について
- id、クラス、タグ、複合
サイトの作成
- 完成イメージをブラウザで開く
- サイト作成の準備
- ローカルサイトフォルダーの作成
- トップページの作成
- ドキュメントタイプを変更する
- タイトルの設定
- divタグの挿入
- 新規スタイルシートファイルの作成
- リンク先ページの作成
- 保存
ナビゲーションとレイアウト
- リストを使ったメニュー
- ClearFIX
- Emmet(CC2015)
- エレメントクイックビュー(CC2015)
レスポンシブWebデザイン
JavaScript
- JavaScript
- DOM(CC2015)
- jQuery UI
テキスト
リンク
- 画像へのリンク
- テキストへのリンク
- メールリンク
- リンク先ページの作成
- ターゲット
画像とアニメの挿入
- Photoshopの画像
- Flash SWF
- SVG
- プライマリアプリケーションの設定
テーブル
フォーム
CSSトランジション
HTML5ビデオ
アップロード
- サイト定義の作成(サーバー)
- 動作確認(リンクチェック)
他
オリジナルテキストを使用。受講料に含まれているのでお得です!
- 受講票(プリントアウト環境が無い場合には、携帯・スマートフォン等への画面コピーでも可)
- 筆記用具
※データの持ち込み、データの持ち帰りはできません。
- Adobe Dreamweaver CC 2015
- Adobe Photoshop CC 2015
★☆受講者の声☆★