Dreamweaver CC 2015

トレーニング動画
収録時間
全3巻【上・中・下巻】80分/58分/57分
内容紹介 Adobe Dreamweaver CC2015の基本操作と主な機能を解説します。

◆上巻:Dreamweaverの画面構成、HTMLの基本的な要素のマークアップ操作、CSSの基礎、Div要素によるグループ化などを学習します。

◆中巻:IDやclassを設定して詳細にデザインを設定する方法を学習します。

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

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

◆<中巻>(約58分)
  • IDの追加と基本的なデザインレイアウトの指定
    ヘッダー部分の設定/コンテンツ部分の設定/フッター部分の設定
  • IDと要素を組み合わせたセレクタの設定
    IDと要素を組み合わせたセレクタの設定/li要素を横に並べる/ビデオを横に並べる
  • ナビゲーションの設定
    float属性を使って横に並べる/Adobe Edge Web Fonts
  • ヘッダー内のレイアウト
    clearfixの利用/position属性の指定
  • classの追加
    classの追加/複数箇所へのclassの適用

◆<下巻>(約57分)
  • 基本レイアウトの仕上げ
    asideとdivを横に並べる/divの内容を横に並べる/画像をレスポンシブにする
  • CSSによるボタンの作成
    CSSによるボタンの作成
  • リンクの設定
    リンクの設定/リンクのスタイル設定
  • メタ情報の設定
    descriptionの設定/viewportの設定
  • レスポンシブなWebページ
    メディアクエリーのブレークポイントの追加/タブレット用のスタイル設定/スマートフォン用のスタイル設定
  • アップロード
    リモートサーバーの設定/クロークの設定/アップロード
サンプルムービー
視聴
サンプルムービー上巻
サンプルムービー中巻
サンプルムービー下巻