For the latest information on this website, please visit Twitter (@commonstyle). To contact us ebookcast@gmail.com.
Para obtener la información más reciente en este sitio web, visite Twitter (@commonstyle). Para contactarnos ebookcast@gmail.com.
有关本网站的最新信息,请访问Twitter(@commonstyle)。 联系我们ebookcast@gmail.com。
順次、学習コンテンツを追加中
Overview
こちらのサイトに情報が追加されます。視聴にはパスワードが必要になります(IDとパスワードは購入されている学習コンテンツの専用ページと同じです)。
高校生のためのDreamweaver
Adobe Dreamweaver(ドリームウィーバー)の基礎を学ぶための講座です。2019年バージョンを対象としています。本講座では、FlexboxやGrid Layoutなどの「これからの新しいCSSレイアウト」習得を目的として、カリキュラムを構成しています。Dreamweaverの基本操作をトレーニングしながら、CSSレイアウトを学習していきます。
今月(4/3)アップデートしたバージョン19.1では、Bootstrapのバージョンが3.4.1および 4.3.1になりましたが、この講座のカリキュラムにBootstrap(CSSフレームワークの学習)は含まれていません。CSSレイアウトの基礎を完全習得する内容になっています。Bootstrap編は要望に応じて検討する予定です。
※高校生向けのカリキュラムですが、一般向けの「Dreamweaver 実践編」でも同様の学習項目を採用しています。一般向けではより難易度の高いプロジェクト学習が追加されていますが、Dreamweaverの基本操作やCSSレイアウトの習得レベルは高校生向けと変わりません。
Lesson
新しいサイトを定義しよう!
本講座では、Dreamweaverの「標準」レイアウト(ワークスペース)を使って進めていきます。作業を始めるときには「ワークスペースのレイアウト」→「'標準'のリセット」を実行して、パネルのレイアウトを初期化します。
このStepでは、デスクトップに新規フォルダーを作成、サイトを定義し、新規のHTMLファイルを作成していきます。主に、ライブビューを使って作成します。
再生時間:5分42秒
DOMパネルの使い方を理解しよう!
Dreamweaverに搭載されているDOMパネルの基本操作を学習します。本講座では、ライブビュー(ブラウザーにページを表示した状態で作業できるモード)とDOMパネルを活用して、HTMLの構造を構築していていきます。
HTMLを直接記述しませんが、HTMLの知識なしで作成できるわけではありません。HTMLの要素について理解していないと、機能を使いこなすことはできません。
レッスンデータのダウンロード:Step-02.zip
再生時間:9分43秒
Bootstrapの機能を使ってみよう!
本講座は、FlexboxやGrid Layoutなどの「新しいCSSレイアウト」を習得するためのカリキュラムになっていますので、Bootstrap(CSSフレームワーク)の学習は含まれていませんが、このStepでは「体験」目的で学びます。
DOMパネルでBootstrap用のクラスを入力しながら、簡易なWebページを作成していきます。最新のDreamweaver 19.1は、Bootstrap 3.4.1および 4.3.1です。
再生時間:11分28秒
課題用のサイトを定義しよう!
最初の課題を始めていきましょう。Step-02で使った素材データ(テキストファイル)を使用し、HTMLページを作成します。まず、復習を兼ねて「サイトの定義」から進めます。Bootstrap(CSSフレームワーク)は使用しません。
DOMパネルを活用して(HTMLを直接コーディングするより)速くHTMLを構造化していきます。見出しや段落などのHTMLの要素をDOMパネルに入力します。
レッスンデータのダウンロード:Step-04.zip
再生時間:05分55秒
新規CSSファイルを作成しよう!
本講座では、HTMLやCSSを直接コーディングせず、Dreamweaverに搭載されている「DOMパネル」や「CSSデザイナー」などの支援機能を最大限に活用して、最新のCSSレイアウトを学習するカリキュラムになっています。
このStepでは、新規のCSSファイルを作成して、「CSSデザイナー」を使いながらWebページの基本レイアウトを設定していきます。CSSデザインの初歩です。
再生時間:09分35秒
構造化しながらスタイルを定義しよう!
このStepから課題の本格的な作業に入っていきます。DOMパネルを使ってHTMLの構造化をおこないます。DOMパネルに表示されるHTML要素(タグ)を入れ子構造にするなど、Webページの基本構造を構築していきます。
本講座は、Dreamweaverの操作習得が中心になっていますので、HTMLやCSSの学習は含まれていません。HTMLタグ辞典などを必要に応じて準備してください。
再生時間:14分35秒
トップページに戻る
Update: 2019.4.15
Soy activo en la posición de Adobe Community Evangelist. Está principalmente a cargo de "Adobe Sensei" y "Adobe XD".
난은 Adobe Community Evangelist의 입장에서 활동하고 있습니다. 주로 "Adobe Sensei」과 「Adobe XD」를 담당하고 있습니다.
我是Adobe的“社区布道者”。它主要负责“Adobe Sensei”和“Adobe XD”。