Start Course

Adobe Dreamweaver CC (upper, middle, lower three volumes set)

Course Fee : ¥3,600 or Pay-As-You-Go

Explaining how to use Adobe Dreamweaver CC 2015, which is essential for web designers

Course Language: Japanese

Course Curriculum

Lesson 1

Duration: 03:42

完成例の確認

Lesson 2

Duration: 06:52

Dreamweaverの画面構成

Lesson 3

Duration: 02:55

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

Lesson 4

Duration: 18:53

マークアップ

Lesson 5

Duration: 09:50

画像と動画の挿入

Lesson 6

Duration: 19:36

CSSの基本

Lesson 7

Duration: 08:52

CSSによる画像の配置

Lesson 8

Duration: 09:28

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

Lesson 9

サンプルデータのダウンロード

Lesson 1

Duration: 19:00

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

Lesson 2

Duration: 10:33

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

Lesson 3

Duration: 07:47

ナビゲーションの設定

Lesson 4

Duration: 02:39

ヘッダー内のレイアウト

Lesson 5

Duration: 11:43

classの追加

Lesson 6

サンプルデータのダウンロード

Lesson 1

Duration: 09:31

基本レイアウトの仕上げ

Lesson 2

Duration: 04:04

CSSによるボタンの作成

Lesson 3

Duration: 04:19

リンクの設定

Lesson 4

Duration: 02:39

メタ情報の設定

Lesson 5

Duration: 26:37

レスポンシブなWebページ

Lesson 6

Duration: 10:15

アップロード

Lesson 7

サンプルデータのダウンロード

Course Overview

初心者向けではなく、普段からコードを良く使う人向けとなっております。オープンソースのCSSフレームワークのレスポンシブ対応のコンポーネントBootstrapについてと、独自の省略記法によってHTMLやCSSなどを高速に展開することができるEmmetについて解説しています。 

 

※このコースは、Adobe Dreamweaver CCをAdobe Dreamweaver CC 2015用にリメイクしたものです。基本的に映像と音声はAdobe Dreamweaver CCの教材収録時のものなので、画面の見た目や操作による挙動はAdobe Dreamweaver CC 2015と多少異なる場合があります。

 

■コースの内容

チャプター1 Adobe Dreamweaver CC 2015上巻(80分)
上巻では、Dreamweaverの画面構成、HTMLの基本的な要素のマークアップ操作、CSSの基礎、Div要素によるグループ化などを学習します。

1. 完成例の確認
 サンプルサイト
 モックデザイン
2. Dreamweaverの画面構成
 Dreamweaverの画面構成
 パネルの操作
 関連ファイルと3つのビュー
3. 新しいドキュメントの作成とサイト定義
 新規ドキュメントの作成
 新規サイトの定義
4. マークアップ
 プロパティインスペクターを使ったマークアップ
 テキストの読み込み
 見出し要素のマークアップ
 コードビューでのマークアップ
 セクション要素のマークアップ
 リストのマークアップ
5. 画像と動画の挿入
 画像の挿入
 代替プロパティの指定
 動画の挿入
 Photoshopとの連携
6. CSSの基本
 CSSとは
 ボックスモデルの概要
 CSSの添付
 新しいCSSファイルの作成
7. CSSによる画像の配置
 CSSによる背景画像の配置
 CSSによるロゴ画像の配置
8. DIV要素によるコンテンツのグループ化
 ヘッダー内のグループ化
 セクション内のグループ化

 

チャプター2 Adobe Dreamweaver CC 2015中巻(58分)
中巻では、IDやclassを設定して詳細にデザインを設定する方法を学習します。
1. IDの追加と基本的なデザインレイアウトの指定
 ヘッダー部分の設定
 コンテンツ部分の設定
 フッター部分の設定
2. IDと要素を組み合わせたセレクタの設定
 IDと要素を組み合わせたセレクタの設定
 li要素を横に並べる
 ビデオを横に並べる
3. ナビゲーションの設定
 float属性を使って横に並べる
 Adobe Edge Web Fonts 
4. ヘッダー内のレイアウト
 clearfixの利用 
 position属性の指定
5. classの追加
 classの追加
 複数箇所へのclassの適用

 

チャプター3 Adobe Dreamweaver CC 2015下巻(57分)
下巻では、デザインの仕上げを行い、スマートフォンやタブレットでも内容が読みやすくなるように、レスポンシブデザインの実装方法などを学習します。
1. 基本レイアウトの仕上げ
 asideとdivを横に並べる
 divの内容を横に並べる 
 画像をレスポンシブにする
2. CSSによるボタンの作成
 CSSによるボタンの作成
3. リンクの設定
 リンクの設定
 リンクのスタイル設定
4. メタ情報の設定
 descriptionの設定
 viewportの設定
5. レスポンシブなWebページ
 メディアクエリーのブレークポイントの追加
 タブレット用のスタイル設定
 スマートフォン用のスタイル設定
6. アップロード
 リモートサーバーの設定
 クロークの設定
 アップロード

 

Requirements

  • Adobe Dreamweaver CC 2015
  • HTML、CSSの知識

About Expert - アテイン株式会社

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

 

We have been producing and selling e-learning contents since 15 years. And we have over 1000 contents now. Furthermore, we have took orders from other firms. We primarily make educational videos for IT Development, Software, and Business Information. Since we have our own studio, production and editing facilities, we can consistently produce high quality contents. We strive to provide more and more realistic materials.

More Courses by アテイン株式会社

User Reviews Write a Review

[[ review.learner_username ]]

[[ review.comments ]]

No Review(s)