ウェブデザイン・ガイド
Macromedia Studio MX
INTRODUCTION STUDIO MX各ソフトの概要 | |
●Fireworks MX ●Dreamweaver MX ●Flash MX ●FreeHand MX ●ColdFusion MXServer ●Extention Manager |
|
|
|
Part 1 サイト制作実践編 Chapter 01 ● ビジュアル重視のクールサイトをつくる 【オリジナルTシャツギャラリーサイト】 STEP.1 Fireworksでトップページをレイアウト |
|
・デジカメで撮影した素材を加工 ・ペンツールでベクターオブジェクトを挿入 ・サイトのタイトルロゴを作成する ・テキスト要素を追加する ・トップページのレイアウトを仕上げる |
|
STEP.2 Fireworksでコンテンツページをレイアウト | |
・トップページの要素を利用してレイアウト ・コンテンツページのレイアウトを仕上げる |
|
STEP.3 Fireworksでファイルを書き出す | |
・トップページにスライスを設定する ・コンテンツページのスライス設定、ファイル書き出し |
|
STEP.4 Dreamweaverでトップページを構成する | |
・ページを設定する
・本文テキストを挿入する ・ブラウザでプレビューを確認する |
|
STEP.5 Dreamweaverでコンテンツページを構成 | |
・ページの背景を整える ・コンテンツをレイアウトする ・テキストフォーマットを保存する ・ブラウザでプレビュー表示を確認する |
|
STEP.6 Dreamweaverでサイトを仕上げる | |
・リンクを設定する ・代替テキストを挿入する ・HTMLコードを調整する |
|
|
|
Chapter 02 ● ナビゲーションにひと工夫したサイトをつくる 【プロサッカーチーム公式サイト】 STEP.1 Fireworksでボタンのロールオーバーを設定 |
|
・ロールオーバー用イメージを作成する ・ロールオーバー用フレームを作成する ・スライスを作成してロールオーバーを設定する ・コンテンツページにもロールオーバーを設定する |
|
STEP.2 Fireworksでポップアップメニューを設定 | |
・トップページにポップアップメニューを設定する ・コンテンツページにポップアップメニューを設定する ・スライスを追加してファイルを書き出す |
|
STEP.3 Dreamweaverでフレーム構成のトップページを作成 | |
・フレームセットを作成する ・フレームごとにページを調整する ・フレーム名称を設定する |
|
STEP.4 Dreamweaverでポップアップウィンドウを設定 | |
・表示するページを準備する ・ビヘイビアを使ってポップアップウィンドウを制御する |
|
STEP.5 Dreamweaverでレイヤーを利用したナビゲーションを設定 | |
・コンテンツページをレイアウトする ・レイヤーを挿入する ・レイヤーの表示・非表示機能でニューステキストを入れ替える |
|
STEP.6 Dreamweaverでサイトを仕上げる | |
・ポップアップメニューのリンクを設定 ・コンテンツページのJavaScriptを別ファイルにする ・ノーフレームコンテンツを編集する ・HTMLコードの調整 |
|
|
|
Chapter 03 ● 細部にこだわったレイアウトのサイトをつくる 【アパレルブランド公式サイト】 STEP.1 Fireworksでトップページ、コンテンツページをレイアウト |
|
・2行のテキストの両端を揃える ・複数のオブジェクトの位置を均等に揃える ・範囲内にペーストする ・レイアウトを仕上げてトップページを書き出す ・コンテンツページをレイアウトする |
|
STEP.2 Flashでメニューボタンを作成 | |
・Fireworksの画像ファイルをボタンシンボルとして登録する ・[オーバー]フレームにムービークリップを仕込む ・リンク先アドレスを追加する ・ビットマップのずれを回避する ・ムービーをパブリッシュする |
|
STEP.3 Dreamweaverでトップページを構成 | |
・トップページのレイアウトを整える ・テーブルセルを分割・結合する ・テーブルセルにSWFファイルを読み込む ・背景画像を制御する ・文字のサイズを制御する ・環境に合わせてCSSを振り分ける ・コードスニペットを登録する |
|
STEP.4 Dreamweaverでコンテンツページを構成 | |
・ページレイアウトを整える ・角丸の囲み枠を作成する ・CSSファイルを編集する ・背景画像を固定する ・別の背景画像を利用する ・フレームセットを作成する |
|
STEP.5 Dreamweaverでテンプレートを利用 | |
・ファイルをテンプレートとして保存する ・テンプレートからページを作成する |
|
STEP.6 Dreamweaverでサイトを仕上げる | |
・ポップアップするページを作成する ・別のウィンドウが開くJavaScriptを追加する ・リンクをチェックする |
|
|
|
Chapter 04 ● 大量ページのサイトをグループで制作 【インディーズレーベルCD紹介サイト】 STEP.1 Fireworksでナビゲーションバーを設定 |
|
・メニューの[オーバー][ダウン]イメージ用のフレームを作成する ・ナビゲーションバーを設定する ・パーツごとに書き出す |
|
STEP.2 Dreamweaverでフレームセットを作成 | |
・CSSで背景画像を制御する ・フレームセットを作成する ・フレームごとのプロパティを設定する |
|
STEP.3 Dreamweaverでテンプレートを活用 | |
・基本的なテンプレートを作成する ・テンプレートから別のテンプレートを作成する ・テンプレートを利用する |
|
STEP.4 Dreamweaverで複数メンバーと共同作業 | |
・アセットにカラーを登録する ・外部CSSスタイルでテキスト表示を統一する ・テンプレートを更新する ・レイアウトをライブラリに登録する ・ライブラリ項目を使用する ・コード表記を統一する |
|
STEP.5 DreamweaverとFireworksで更新作業を簡潔に | |
・ソース画像からの自動更新を利用する ・複数の画像を一括変換する ・親テンプレートを編集する |
|
STEP.6 DreamweaverとColdFusionでデータベースと連携 | |
・サーバとWebアプリケーションを準備する ・ColdFusionでデータソースを指定する ・データベース利用の準備 ・一覧表示ページを作成する ・検索フィールドを追加する ・ページデザインを整える |
|
|
|
Chapter 05 ● Flashで構成する動的サイトをつくる 【ジュエリーショップサイト】 STEP.1 FreeHand・Fireworksでパーツを作成 |
|
・Fireworksで画像を用意する ・FreeHandでメニューテキストを作成する ・FreeHandでイラストオブジェクトを描く |
|
STEP.2 Flashでスクロールするメニューを作成 | |
・ドキュメントを設定する ・トップイメージをレイアウトする ・スクロールする画像を挿入する ・スクロールメニューのスクリプトを記述 |
|
STEP.3 Flashでナビゲーションボタンを設定 | |
・ボタンのロールオーバーを設定する ・ボタンにスクリプトを記述する ・各メニューの解説文を追加する |
|
STEP.4 Flashでドラッグ可能なウィンドウ風コンテンツを作成 | |
・「シーン2」をレイアウトする ・コンテンツメニュー項目を追加する ・商品紹介用の小ウィンドウを作成する ・子ウィンドウにスクリプトを追加する ・商品紹介用のウィンドウを複製する ・メニューボタンにスクリプトを追加する |
|
STEP.5 Flashムービーを仕上げて書き出す | |
・シーン間の移動アクションを追加する ・プラグインのバージョンを判定する仕掛けを挿入する ・SWFムービーを書き出す |
|
STEP.6 Dreamweaverでサイトを仕上げる | |
・ページの詳細を設定する ・代替用画像を指定する ・ウィンドウサイズを強制的に変更する |
|
|
|
PART2. サイト管理・運営編 Chapter 01 ● Dreamweaverで効率よくサイトを設定・管理する |
|
・セットアップウィザードでサイトを定義する ・リモートサイトにファイルをアップロード、ダウンロードする ・サイトマップを確認する ・サイト全体のリンクをチェック、変更する ・サイト全体のレポートを確認する ・サイト全体のテキスト、コードを検索・置換する ・リモートおよびローカルサイトを同期させる |
|
Chapter 02 ● グループでサイトを管理・運営する | |
・ファイルのチェックイン・チェックアウトを確認する ・デザインノートで情報を挿入する ・アセットパネルでパーツを管理する ・コードにコメントを挿入する ・コードスニペットを利用する |
|
Chapter 03 ● Dreamweaverの作業環境をカスタマイズする | |
・パネル表示をカスタマイズする ・キーボードショートカットを変更する ・ヒストリパネルで手順を自動コマンド化する ・ExtensionManagerで拡張機能を組み込む |