ウェブデザイン・ガイド Macromedia Studio MX

瀧上園枝

定価 3,850円
（本体 3,500円＋税10%） ※電子書籍の価格は各販売ストアにてご確認ください｡

紙の本を買う

紙の書籍を購入
- Amazon
- ヨドバシ.com

発売日	：2002-12-19
仕様	：B5変 232*182／272P
ISBN	：978-4-8443-5672-1

Webデザインのプロフェッショナルが、Dreamweaver MX、Fireworks MX、Flash MX、FreeHand、ColdFusion MX デベロッパー版を使って、華麗かつ実践的なTipsをふんだんに盛り込んだWebデザインの制作方法を伝授！機能だけにとらわれない、現場で使えるテクニックが身に付く一冊です。

→ダウンロードはこちら

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紹介サイト】
STEP1.Fireworksでナビゲーションバーを設定
・メニューの［オーバー］［ダウン］イメージ用のフレームを作成する
・ナビゲーションバーを設定する
・パーツごとに書き出す
STEP2.Dreamweaverでフレームセットを作成
・CSSで背景画像を制御する
・フレームセットを作成する
・フレームごとのプロパティを設定する
STEP3.Dreamweaverでテンプレートを活用
・基本的なテンプレートを作成する
・テンプレートから別のテンプレートを作成する
・テンプレートを利用する
STEP4.Dreamweaverで複数メンバーと共同作業
・アセットにカラーを登録する
・外部CSSスタイルでテキスト表示を統一する
・テンプレートを更新する
・レイアウトをライブラリに登録する
・ライブラリ項目を使用する
・コード表記を統一する
STEP5.DreamweaverとFireworksで更新作業を簡潔に
・ソース画像からの自動更新を利用する
・複数の画像を一括変換する
・親テンプレートを編集する
STEP6.DreamweaverとColdFusionでデータベースと連携
・サーバとWebアプリケーションを準備する
・ColdFusionでデータソースを指定する
・データベース利用の準備
・一覧表示ページを作成する
・検索フィールドを追加する
・ページデザインを整える

Chapter 05
●Flashで構成する動的サイトをつくる【ジュエリーショップサイト】
STEP1. FreeHand・Fireworksでパーツを作成
・Fireworksで画像を用意する
・FreeHandでメニューテキストを作成する
・FreeHandでイラストオブジェクトを描く
STEP2.Flashでスクロールするメニューを作成
・ドキュメントを設定する
・トップイメージをレイアウトする
・スクロールする画像を挿入する
・スクロールメニューのスクリプトを記述
STEP3.Flashでナビゲーションボタンを設定
・ボタンのロールオーバーを設定する
・ボタンにスクリプトを記述する
・各メニューの解説文を追加する
STEP4.Flashでドラッグ可能なウィンドウ風コンテンツを作成
・「シーン2」をレイアウトする
・コンテンツメニュー項目を追加する
・商品紹介用の小ウィンドウを作成する
・子ウィンドウにスクリプトを追加する
・商品紹介用のウィンドウを複製する
・メニューボタンにスクリプトを追加する
STEP5.Flashムービーを仕上げて書き出す
・シーン間の移動アクションを追加する
・プラグインのバージョンを判定する仕掛けを挿入する
・SWFムービーを書き出す
STEP6.Dreamweaverでサイトを仕上げる
・ページの詳細を設定する
・代替用画像を指定する
・ウィンドウサイズを強制的に変更する

PART2.サイト管理・運営編
Chapter 01
●Dreamweaverで効率よくサイトを設定・管理する
・セットアップウィザードでサイトを定義する
・リモートサイトにファイルをアップロード、ダウンロードする
・サイトマップを確認する
・サイト全体のリンクをチェック、変更する
・サイト全体のレポートを確認する
・サイト全体のテキスト、コードを検索・置換する
・リモートおよびローカルサイトを同期させる

Chapter 02
●グループでサイトを管理・運営する
・ファイルのチェックイン・チェックアウトを確認する
・デザインノートで情報を挿入する
・アセットパネルでパーツを管理する
・コードにコメントを挿入する
・コードスニペットを利用する

Chapter 03
●Dreamweaverの作業環境をカスタマイズする
・パネル表示をカスタマイズする
・キーボードショートカットを変更する
・ヒストリパネルで手順を自動コマンド化する
・ExtensionManagerで拡張機能を組み込む