Adobe Dreamweaver CS3: Fundamentals（アドビ ドリームウィーバーCS3：ファンダメンタルズ） / 講座ダイジェスト

Adobe Dreamweaver CS3: Fundamentals ～ Webサイト構築の基礎は、9つのユニットから構成されています。

以下の学習サイクルをユニット内で身につけることによって、Adobe Dreamweaver CS3（アドビ ドリームウィーバーCS3）に必要な要素を習得していきます。

Adobe Dreamweaver CS3（アドビ ドリームウィーバーCS3）の基礎を実習で習得

まずはDreamweaverの基本的な使い方、インターフェースを習得

Webサイト制作にとりかかる前に、まずはDreamweaver CS3の使い方やインターフェースを理解しましょう。ドキュメントの作成方法から環境設定、ツールバーやパネルなどのワークスペース操作まで、このあとの作業をスムーズに進められるように、基本をきっちり習得します。

またDreamweaverでWebサイトを制作するには、サイト定義とよばれる作業環境の設定をする必要があります。自分のパソコン上に公開するページと同じ構成を定義することで、開発やテストなどを効率的に行えるようになるのです。このようなWeb制作ツール特有の設定も、ここで学習します。

ドキュメント（Webページ）を作成

Dreamweaver CS3は、Microsoft WordやExcelのドキュメントをそのまま読み込んだり、ペーストすることができます。再現性は高く、たとえばExcelのスプレッドシートは、Webページ内でテーブルとしてコピーされます。一からページを作ることももちろんできますが、こういった既存の情報を利用することもできます。

ページにテキストを配置したら、見出しや段落、リストをつけて、文章の構造を設定します。これをマークアップと言い、「Web標準」と呼ばれる正しいHTMLを作成するのに欠かせない知識です。

文字コードや著作者などの「ページの情報」を指定するには、METAタグを利用します。キーワード（Keyword）や詳細（Description）などの、検索エンジンが使用する情報も登録できるので、ぜひおぼえておきましょう。

CSS（カスケーティング スタイルシート）を使用したレイアウト制作

CSS（カスケーディング スタイルシート）を使えば、ページのデザインやレイアウトを細かく柔軟に指定できます。CSSを使用することで、さまざまな利点があります。

• 文書の構造とレイアウトデザインが切り離せるため、運用や管理がしやすくなる。
• HTMLだけでは指定できない細かい調整、設定ができる。
• 現在のWebサイト制作の仕様に準拠したページが作成できる。

この便利なCSSを、Dreamweaver CS3でどうやって利用していくのかを、実習を通して学びます。文章を読むだけでは理解しにくいCSSも、ご自身の手で動かしながら確認できるので、しっかり身につきます。

グラフィックやムービーを利用する

Dreamweaverでは、挿入バーやアセットパネルを利用して、簡単にGIFやJPEG、PNG形式のグラフィックを配置できます。これらの画像形式の特長や選び方などを解説します。

またDreamweaver CS3は、Adobe Creative Suite 3（アドビ クリエイティブスイート3）の各グラフィックツールと強力に連携しているため、Dreamweaver上からAdobe Photoshop CS3（アドビ フォトショップCS3）やAdobe Fireworks CS3（アドビ ファイヤーワークスCS3）を起動して編集、加工できます。この機能はRoundtrip編集機能と呼ばれ、効率的な作業をするのに便利です。

さらに、Adobe Flash CS3（アドビ フラッシュCS3）で作成したFlashムービー（swfファイル）の埋め込みや制御方法も習得します。

サイトのナビゲーションを作成する

ページからページへとジャンプするリンク（ハイパーリンク）機能は、インターネット上のWebサイトを制作する上でとても重要です。ここでは、ページの指定方法（ファイルパス）やイメージマップ、電子メールリンクの方法などを学習します。さらに、Dreamweaver CS3の新機能Spry（スプライ）を使用した、動きのあるメニューナビゲーションも作成します。

レイアウトを作成する

CSSやナビゲーションなどを習得したあとは、いよいよページをレイアウトして形にしていきます。実習で一つ一つポイントをおさえて進みますので、いままで「テーブルレイアウト」しか作成したことがなかった方も、ここでぜひ「CSSページレイアウト」をマスターしてください。

もっとCSSレイアウトを知りたい方は、CSSデザイン手法の講座がおすすめです。

テンプレート機能、ライブラリ機能で効率化を

複数のページで共通のデザインを使用する場合は、Dreamweaverのテンプレート機能を使用すると便利です。 テンプレートはページの「雛形」として利用できるため、複数のページを同時に更新したいときなどに便利です。さらに簡単にデータが再利用できるライブラリ機能も合わせて学習し、効率のよいサイト作りを身につけます。

テンプレート機能に内容を絞った、徹底活用講座が開催中です。

公開と管理

作成したWebページのインターネットへの公開（アップロード）も、Dreamweaverから行えます。公開するということは、自分以外の人が閲覧するということです。そこで、ブラウザーの種類が違っても正しく表示されるか？HTMLは正しく記載されているか？などのチェックをします。

またWebサイトは「作りっぱなし」とはいきません。新しい情報を追加するためにページを追加したり、リンク切れがないかを確認したりといった、サイト管理が必要になります。最後のユニットでは、このような「インターネットに公開してほかの人に見てもらう」ことに注視した内容を学習します。

実践で使えるカタチに

ご紹介したのは、講座のごく一部分です（詳細は講座目録等をご参考ください）。実習では、もっと多くの技術を学習します。

独学では、どこからはじめていいのか迷いがちなWebページの制作ですが、Dreamweaver CS3を使ってワンステップごとに習得し、ひとつのサイトを作り上げることで「実践で使えるカタチ」を実感できます。

Adobe Dreamweaver CS3: Fundamentalsから、Dreamweaverをスタートしてみませんか！