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