誰でもわかる Adobe Dreamweaver CC 2015

スマートフォンやタブレット向けにレスポンシブデザインの実装を行いながらDreamweaver CC 2015の便利な機能を学びます。webページ作成の基礎を初心者の方向けに丁寧に解説しています。
4.4 (12 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
49 students enrolled
$30
Take This Course
  • Lectures 20
  • Length 3.5 hours
  • Skill Level Beginner Level
  • Languages Japanese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2015 Japanese

Course Description

2015リリース版のAdobe Dreamweaver CCの基本的な利用方法を学習します。スマートフォンやタブレット向けにレスポンシブデザインの実装を行いながらDreamweaver CC 2015の便利な機能紹介、webページ作成の基礎を初心者の方に向け丁寧に解説しています。

  • セクション1では、画面の構成や、基本的なマークアップの方法などを学びます。作成するサンプルサイトの完成例を確認し、Dreamweaverの画面構成を学習、HTMLの基本的な要素のマークアップ操作を行い、CSSの基礎を学んで、最後にDiv要素によるグループ化を行います。テキスト情報を保ったままロゴ画像をCSSで配置する方法など、テキストを意味づけ整理を行う事で効果的に閲覧者に伝える方法がわかります。
  • セクション2では、セクション1で作成した要素に対し詳細にデザインを適用する方法を学びます。CSSスタイルパネルを活用しながら、IDを追加して基本的なデザインレイアウトを行っていく中で、IDと要素を組み合わせたセレクタの設定、floatに対しclearfix等を使ったレイアウト崩れの直し方等も学び、記述を短縮するCSSのショートハンド等のCSSが理解できます。
  • セクション3では、デザインの仕上げを行い、スマートフォンやタブレットでも読みやすくなるように、レスポンシブデザインを実装します。画像をレスポンシブ化し、メディアクエリーのブレークポイントの追加を行い、タブレット用、スマートフォン用のスタイル設定を行っていきます。アップロードの際に便利なクロークの設定なども行います。

映像内で使用されている演習ファイルがダウンロードできます。アプリケーションがインストールされているPCをお持ちの場合は、視聴しながら、あるいは視聴後に、実際のアプリケーションで操作してみましょう。

What are the requirements?

  • Dreamweaver CC 2015がインストールされたPC
  • サンプルを使った操作説明が主体となります。丁寧に解説するので、初めての方でも安心です。インターネットやwebサイトなどを利用したことがあり、web制作に興味がある方であれば ここで学習したことをきっかけに、さらにご自身で知識を深めていける講座です。
  • Dreamweaver CC 2015向けに作成していますが Dreamweaver CC 2015の便利な機能紹介のほかにも、 webページ作成の基礎を初心者の方に向けて丁寧に解説していますので ご自身が使いやすいエディタソフトやブラウザを使用して、ある程度復習することが可能です。
  • 最終章は、アップロード用のリモートサーバーの情報を保有していることを前提としています。プロバイダーやシステム管理者から提供された情報を手元にご用意ください。もし、リモートサーバーの情報をお持ちでない場合は、映像で手順のみのご確認となります。

What am I going to get from this course?

  • WEB制作がより向上したDreamweaver CC 2015の新しいUIを使いこなすことができる
  • レスポンシブWEBデザインの実装を簡単に行う事ができる
  • 具体的なサンプルファイルを使用して一連の手順に従って操作手順を覚えることができる
  • テキストの状態からマークアップし、cssスタイルパネルを活用し、コーディングの知識がそれほどなくとも、Web基準に沿ったまま直観的に作成を行うことができる。
  • テキストからマークアップ、レスポンシブWEBデザインの適用まで一貫して行う事ができる。

What is the target audience?

  • WEBデザイナーを目指す方、 新人教育や実務の補助に。
  • Dreamweaver CC 2015の新機能に興味があるwebデザイナー、webデザイナー志望
  • Dreamweaver CC 2015の新しいインターフェイスにまだ慣れていない人
  • レスポンスWEBデザインをすでに実務で行っており、Dreamweaver CC 2015を効果的に取り入れたいと考えてる人
  • CSSデザイナーパネルを状況に合わせて便利に使いこなしたい人
  • コーディングには自信がないけれど、ツールで何とか補う事ができればと考えている人
  • CSSには詳しくないけれど、実用よりな基礎は身につけておきたい人
  • Dreamweaver CC 2015の機能を活用して作業時間を短縮したい人。

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

各セクションで使用する演習ファイルをダウンロードします。
Article
Section 1: Dreamweaverの画面構成、HTMLの基本的な要素のマークアップ操作、CSSの基礎、Div要素によるグループ化などを学習します。
03:42

「サンプルサイト」「モックデザイン」について学びます。

06:51

「Dreamweaverの画面構成」「パネルの操作」「関連ファイルと3つのビュー」について学びます。

【注意!】コードビューについて
Dreamweaver CC 2015のバージョンアップによって、初期状態ではコードビューの背景が黒くなり、コードの種類により色変えが行われています。映像と同じ色合いで学習を進めたい場合は、メニューバーの[編集]から、[環境設定]>[コードカラーリング]>[テーマ]>[Classic]で以前のカラーリングに変更できます。

02:55

「新規ドキュメントの作成」「新規サイトの定義」について学びます。

18:53

「プロパティインスペクターを使ったマークアップ」「テキストの読み込み」「見出し要素のマークアップ」「コードビューでのマークアップ」「セクション要素のマークアップ」「リストのマークアップ」について学びます。

09:50

「画像の挿入」「代替プロパティの指定」「動画の挿入」「Photoshopとの連携」について学びます。

19:36

「CSSとは」「ボックスモデルの概要」「CSSの添付」「新しいCSSファイルの作成」について学びます。

08:51

「CSSによる背景画像の配置」「CSSによるロゴ画像の配置」について学びます。

09:28

「ヘッダー内のグループ化」「セクション内のグループ化」について学びます。

Section 2: IDやclassを設定して詳細にデザインを設定する方法を学習します。
19:00

「ヘッダー部分の設定」「コンテンツ部分の設定」「フッター部分の設定」について学びます。

10:32

「IDと要素を組み合わせたセレクタの設定」「li要素を横に並べる」「ビデオを横に並べる」について学びます。

07:46

「float属性を使って横に並べる」「Adobe Edge Web Fonts」について学びます。

09:32

「clearfixの利用」「position属性の指定」について学びます。

11:43

「classの追加」「複数箇所へのclassの適用」について学びます。

Section 3: デザインの仕上げを行い、スマートフォンやタブレットでも内容が読みやすくなるように、レスポンシブデザインの実装方法などを学習します。
09:30

「asideとdivを横に並べる」「divの内容を横に並べる」「画像をレスポンシブにする」について学びます。

04:04

「CSSによるボタンの作成」について学びます。

04:19

「リンクの設定」「リンクのスタイル設定」について学びます。

02:39

「descriptionの設定」「viewportの設定」について学びます。

26:36

「メディアクエリーのブレークポイントの追加」「タブレット用のスタイル設定」「スマートフォン用のスタイル設定」について学びます。

10:14
「リモートサーバーの設定」「クロークの設定」「アップロード」について学びます。

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

アテイン 株式会社, IT、ソフトウェア、ビジネス

様々なeラーニングコンテンツを15年以上制作販売しています。請負制作も含めると1000コンテンツを越えます。自社制作販売のeラーニングコンテンツは主にIT、開発、ソフトウェア、ビジネス知識などの動画教材です。自社スタジオと編集環境があるので、シナリオ、ナレーション、映像収録、編集まで全ての工程を自社内で完結しており、それが安定したクオリティに繋がっています。今後はさらに実務に役立つ教材の提供を考えています。

Ready to start learning?
Take This Course