コース概要
初心者向けではなく、普段からコードを良く使う人向けとなっております。オープンソースのCSSフレームワークのレスポンシブ対応のコンポーネントBootstrapについてと、独自の省略記法によってHTMLやCSSなどを高速に展開することができるEmmetについて解説しています。
※このコースは、Adobe Dreamweaver CCをAdobe Dreamweaver CC 2015用にリメイクしたものです。基本的に映像と音声はAdobe Dreamweaver CCの教材収録時のものなので、画面の見た目や操作による挙動はAdobe Dreamweaver CC 2015と多少異なる場合があります。
■コースの内容
チャプター１ 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要素によるコンテンツのグループ化
ヘッダー内のグループ化
セクション内のグループ化
チャプター２ 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の適用
チャプター３ Adobe Dreamweaver CC 2015下巻（57分）
下巻では、デザインの仕上げを行い、スマートフォンやタブレットでも内容が読みやすくなるように、レスポンシブデザインの実装方法などを学習します。
1. 基本レイアウトの仕上げ
asideとdivを横に並べる
divの内容を横に並べる
画像をレスポンシブにする
2. CSSによるボタンの作成
CSSによるボタンの作成
3. リンクの設定
リンクの設定
リンクのスタイル設定
4. メタ情報の設定
descriptionの設定
viewportの設定
5. レスポンシブなＷｅｂページ
メディアクエリーのブレークポイントの追加
タブレット用のスタイル設定
スマートフォン用のスタイル設定
6. アップロード
リモートサーバーの設定
クロークの設定
アップロード
必要条件
- Adobe Dreamweaver CC 2015
- HTML、CSSの知識
Course Curriculum
Lesson 1
時間: 03:42
完成例の確認
Lesson 2
時間: 06:52
Dreamweaverの画面構成
Lesson 3
時間: 02:55
新しいドキュメントの作成とサイト定義
Lesson 4
時間: 18:53
マークアップ
Lesson 5
時間: 09:50
画像と動画の挿入
Lesson 6
時間: 19:36
CSSの基本
Lesson 7
時間: 08:52
CSSによる画像の配置
Lesson 8
時間: 09:28
DIV要素によるコンテンツのグループ化
Lesson 9
サンプルデータのダウンロード
Lesson 1
時間: 19:00
IDの追加と基本的なデザインレイアウトの指定
Lesson 2
時間: 10:33
IDと要素を組み合わせたセレクタの設定
Lesson 3
時間: 07:47
ナビゲーションの設定
Lesson 4
時間: 02:39
ヘッダー内のレイアウト
Lesson 5
時間: 11:43
classの追加
Lesson 6
サンプルデータのダウンロード
Lesson 1
時間: 09:31
基本レイアウトの仕上げ
Lesson 2
時間: 04:04
CSSによるボタンの作成
Lesson 3
時間: 04:19
リンクの設定
Lesson 4
時間: 02:39
メタ情報の設定
Lesson 5
時間: 26:37
レスポンシブなＷｅｂページ
Lesson 6
時間: 10:15
アップロード
Lesson 7
サンプルデータのダウンロード
About the Expert - アテイン株式会社
様々なｅラーニングコンテンツを15年以上制作販売しています。請負制作も含めると1000コンテンツを越えます。自社制作販売のｅラーニングコンテンツは主に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.
アテイン株式会社 によるその他のコース
レビューを書く
[[ errors.rating[0] ]]
[[ errors.comments[0] ]]
[[ serverMessage ]]
[[ errors.course_id[0] ]]
プロモーション動画
プレーヤーを読み込んでいます...
プレーヤーを読み込んでいます...