高校生のための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レイアウトの習得レベルは高校生向けと変わりません。

本講座では、Dreamweaverの「標準」レイアウト（ワークスペース）を使って進めていきます。作業を始めるときには「ワークスペースのレイアウト」→「'標準'のリセット」を実行して、パネルのレイアウトを初期化します。

このStepでは、デスクトップに新規フォルダーを作成、サイトを定義し、新規のHTMLファイルを作成していきます。主に、ライブビューを使って作成します。

再生時間：5分42秒

Dreamweaverに搭載されているDOMパネルの基本操作を学習します。本講座では、ライブビュー（ブラウザーにページを表示した状態で作業できるモード）とDOMパネルを活用して、HTMLの構造を構築していていきます。

HTMLを直接記述しませんが、HTMLの知識なしで作成できるわけではありません。HTMLの要素について理解していないと、機能を使いこなすことはできません。

再生時間：9分43秒

本講座は、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パネルに入力します。

再生時間：05分55秒

本講座では、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