Adobe DreamweaverCS4 パーフェクトマスター

概 要

本書は、Webオーサリングツールの定番「Dreamweaver」の最新版CS4の全機能解説書です。CS4では、JavaScriptやFlashをプレビューできるLive View機能が新たに実装され、ユーザーインタフェースが共通化されたことで他のAdobe Creative Suite 4コンポーネントを併用しやすくなっています。本書では、Dreamweaverの基本的な操作方法、テンプレートやスタイルシート(CSS)を使ったページの作成方法、APエレメントの使い方、サイト管理の手法はもちろん、CS3から搭載されたSpryについても詳しく解説しています。WidgetとSpryデータによってXMLデータベースを使用するWebページを容易に作る方法を紹介。サンプルのダウンロードサービス付き。

著者 金城俊哉
価格 本体2900円(税別)
ISBN 978-4-7980-2252-9
発売日 2009/4/11
判型 B5変
色数 4色
ページ数 844
CD/DVD
対象読者 初級
シリーズ パーフェクトマスター
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

●Chapter 1 Dreamweaver CS4の概要と画面構成

1.1 ●Dreamweaver CS4の特徴

1.1.1 Dreamweaver CS4の機能

1.1.2 Dreamweaver CS4の主な新機能

コラム Ajaxとは

コラム Spryとは

1.1.3 Dreamweaver CS4に必要な環境(Windows版)

1.1.4 Dreamweaver CS4に必要な環境(Macintosh版)

1.2 ●Dreamweaver CS4の起動と終了(Windows版)

1.2.1 Dreamweaver CS4の起動

スタートメニューから起動するには

スタートページを表示しないようにするには

コラム スタートアップスクリーンとは

コラム ライセンス認証を行うには

ショートカットから起動するには

コラム スタートページを再び表示するには

1.2.2 Dreamweaver CS4の終了

[ファイル]メニューから終了するには

[閉じる]ボタンを使って終了するには

1.3 ●Dreamweaver CS4の起動と終了(Macintosh版)

1.3.1 Dreamweaverを起動する

Finderを使ってDreamweaver CS4を起動するには

Dockに登録したアイコンから起動するには

1.3.2 Dreamweaver CS4の終了

1.4 ●Dreamweaver CS4の画面構成

1.4.1 Dreamweaverのワークスペース

Dreamweaver CS4のワークスペースを確認する

1.4.2 Macintosh版のワークスペース

Dreamweaver CS4 Macintosh版のワークスペースを確認する

1.4.3 ドキュメントウィンドウの構造

デザインビューの表示内容を確認する

コードビューの表示内容を確認する

分割ビューの表示内容を確認する

1.4.4 ビューの切り替え

コードビューを表示するには

分割ビューを表示するには

デザインビューを表示するには

1.5 ●Dreamweaver CS4のバーとパネル

1.5.1 メニューバー

[ファイル]メニューに登録されているコマンドを確認する

[編集]メニューに登録されているコマンドを確認する

[表示]メニューに登録されているコマンドを確認する

[挿入]メニューに登録されているコマンドを確認する

[修正]メニューに登録されているコマンドを確認する

[フォーマット]メニューに登録されているコマンドを確認する

[コマンド]メニューに登録されているコマンドを確認する

[サイト]メニューに登録されているコマンドを確認する

[ウィンドウ]メニューに登録されているコマンドを確認する

[ヘルプ]メニューに登録されているコマンドを確認する

1.5.2 ドキュメントツールバー

ドキュメントツールバーを表示するには

ドキュメントツールバーの機能を確認する

1.5.3 標準ツールバー

標準ツールバーを表示するには

標準ツールバーの機能を確認する

1.5.4 ステータスバー

ステータスバーの機能を確認する

1.5.5 挿入バー

挿入バーを表示するには

挿入バーのカテゴリを切り替えるには

コラム ドキュメントツールバーを非表示にする

コラム Macintosh版における[Dreamweaver]メニュー

コラム Adobe Bridgeとは

コラム 挿入バーのカテゴリをメニューとして表示するには

挿入バーの機能を確認する

1.5.6 パネルグループ

アイコン化されたパネルを展開するには

表示されていないパネルを表示するには

コラム すべてのパネルグループを非表示にするには

パネルの機能を確認する

コラム Macintosh版におけるパネルグループの非表示

1.5.7 プロパティインスペクタ

プロパティインスペクタを表示するには

プロパティインスペクタの内容を確認する

コラム プロパティインスペクタの非表示

1.6 ●ワークスペースのカスタマイズ

1.6.1 ワークスペースのレイアウトを変更する

パネルグループの表示幅を変更するには

パネルグループを画面の左側に配置するには

コラム Macintoshの場合

ドキュメントウィンドウ以外を非表示にするには

複数のドキュメントウィンドウを並べて表示するには

コラム ドキュメントウィンドウを元の状態に戻すには

コラム Macintoshの場合

プロパティインスペクタをフローティング表示するには

1.6.2 タブグループのカスタマイズ

特定のタブグループをフローティング表示にするには

フローティング表示にしたタブグループを元に戻すには

コラム プロパティインスペクタを元の位置へ戻すには

特定のタブだけをフローティング表示にするには

フローティング表示にしたタブを元に戻すには

特定のパネルを別のタブグループへ移動するには

特定のタブグループを閉じるには

コラム タブグループの再表示

独自のタブグループを作成するには

コラム ワークスペースを元の状態に戻すには

コラム 新規に作成したパネルグループだけを表示するには

1.6.3 挿入バーの[お気に入り]をカスタマイズする

挿入バーの[お気に入り]カテゴリに任意のボタンを登録するには

コラム [お気に入りオブジェクトのカスタマイズ]ダイアログボックスの操作方法

Q&A

●Chapter 2 サイトの作成

2.1 ●サイトの概要

2.1.1 サイトの概要

サイトについて確認する

ローカルサイトとリモートサイト

2.1.2 Dreamweaver CS4のサイト管理機能

Dreamweaver CS4のサイト管理機能を確認するには

コラム LAN上のパソコンにローカルサイト用フォルダを作成する場合

コラム トップページの保存場所

2.2 ●サイトの作成

2.2.1 サイト作成の準備

サイトの構造を決定する流れを確認する

2.2.2 サイトを公開する目的の確認

情報のグループ化

2.2.3 ローカルサイト用フォルダの準備

ローカルサイト用フォルダを作成する場所を決める

フォルダの構造を決める

ローカルサイト用フォルダを作成するには(Windows編)

ローカルサイト用フォルダを作成するには(Macintosh編)

コラム サーバーサイドテクノロジー

2.2.4 サイトの作成

[サイト定義]ウィザードを起動するには

サイトの基本的事項を登録するには

ローカルサイトを登録するには

リモートサイトを登録するには

コラム LAN上のパソコンにあるフォルダをローカルサイトにするには

コラム FTP

コラム FTPの設定

コラム WebサーバーにLANで接続されている場合

チェックイン/チェックアウト機能を設定するには

コラム [チェックイン/チェックアウト機能を有効にする]をオンにした場合

設定内容を確認するには

2.2.5 サイト定義の編集

ローカルサイトの設定を変更するには

リモートサイトの設定を変更するには

2.2.6 ローカルおよびリモートサイトの表示

ローカルサイトを表示するには

リモートサイトを表示するには

コラム リモートサイトへの接続を切断するには

ローカルサイトとリモートサイトを同時に表示するには

コラム ローカルサイトが表示されていない場合

Q&A

●Chapter 3 新規ページの作成

3.1 ●新規ページの作成

3.1.1 新規ページの作成

[ファイル]メニューを使って新規のページを作成するには

[スタートページ]を使って新規のページを作成するには

[ファイル]パネルを使って新規のページを作成するには

コラム ローカルサイト内の任意のフォルダに新規ファイルを作成するには

コラム 初期設定のドキュメントタイプ

XHTMLファイルの機能を確認する

コラム ファイル作成時にドキュメントタイプを指定するには

コラム ドキュメントタイプの記述部分を見る

コラム ドキュメントタイプを変更するには

コラム CSSスタイルとHTMLタグにおける[ページプロパティ]の違い

3.2 ●ページの保存

3.2.1 新規ページの保存

3.2.2 保存したページを開くための操作

保存済みのページを[ファイル]メニューから開くには

コラム 複数のページを開く

保存済みのページを[スタートページ]から開くには

保存済みのページを[ファイル]パネルから開くには

3.2.3 編集内容の保存

編集した内容を上書き保存するには

コラム ページをまだ保存していない場合

編集した内容を別のページとして保存するには

複数のページをまとめて保存するには

コラム [スタートページ]の[最近使用した項目を開く]

3.3 ●ページの基本設定

3.3.1 ページのサイズ設定

Webブラウザの表示サイズを知る

ページの表示サイズを設定するには

コラム 縦スクロールと横スクロールはどちらが使いやすいか

コラム 表示サイズを変更してしまった場合

コラム 表示サイズの選択

3.3.2 ページタイトルの設定

[ページプロパティ]を使ってページタイトルを設定するには

[ドキュメント]ツールバーを使ってページタイトルを設定するには

コラム [ページプロパティ]においてCSSが使用される項目

3.3.3 マージンの設定

ページのマージンを設定するには

3.3.4 ページ全体の文字コードの設定

ページ全体の文字コードを設定するには

文字コードの初期設定値を変更するには

3.4 ●テキスト入力の基本操作

3.4.1 テキストの入力

ページにテキストを入力するには

コラム 入力したテキストを消すには

他のファイルからテキストをコピーするには

3.4.2 テキストのコピー&ペースト

コピーしたテキストをペーストするには

コラム コピー&ペーストをすばやく行うには

テキストを別の位置へ移動するには

コラム CSSを使用したマージンの設定

3.4.3 テキストの置き換え

特定のテキストをまとめて別のテキストに置き換えるには

コラム サイト内の特定のテキストを一括して置き換えるには

コラム カット&ペーストをすばやく行うには

3.5 ●段落の設定

3.5.1 改行と改段落

改段落して行間を空けるには

コラム 改段落のHTMLタグを確認する

行間を空けずに改行のみを行うには

コラム 改行のHTMLタグを確認する

段落を区切り線を使って分割するには

コラム 区切り線

3.5.2 リストの設定

テキストを箇条書きで表示するには

コラム 区切り線の編集

段落記号の●を■に変更するには

段落ごとに番号を付けるには

コラム 段落ごとに本文を入れる

コラム リストのHTMLタグを確認する

コラム 段落番号を途中から始めるには

段落番号の種類を変更するには

3.6 ●ライブビューを使用したWebページのプレビュー

3.6.1 ライブビューによるWebページのプレビュー

作成中のWebページをライブビューでプレビューする

3.7 ●プレビュー用のWebブラウザの設定

3.7.1 Webブラウザを使ったプレビュー

作成したページをWebブラウザでプレビューするには

コラム 保存済みのページを対象にしたプレビュー

編集内容をすぐに確認できるようにするには

3.7.2 ブラウザリストの編集

プレビュー用のWebブラウザを登録するには

コラム プライマリブラウザとセカンダリブラウザ

新たに登録したWebブラウザでプレビューするには

3.8 ●操作の取り消しとやり直し

3.8.1 操作の取り消しとやり直し

直前に行った操作を取り消すには

取り消した操作をもう一度やり直すには

複数の操作をまとめて取り消すには

コラム [ファイル]メニューの[復帰]

ページを開いたときの状態まで戻すには

Q&A

●Chapter 4 CSSを利用したスタイル設定

4.1 ●テキストのスタイル設定

4.1.1 CSSルールの基本

CSSの役割について確認する

CSSルール用のプロパティインスペクタを確認する

CSSルールの仕組みを知る

コラム CSSに関する用語について

コラム HTML用の[プロパティインスペクタ]

コラム HTMLファイルのヘッダ部

コラム コメントアウト

コラム CSSスタイルを記述する場所

CSSルールの適用範囲

CSSルールの定義方法を確認する

コラム CSSルールの定義

4.1.2 テキストに対するCSSルールの作成と適用

[プロパティインスペクタ]を使ってCSSルールを作成するには

コラム Web標準への準拠

コラム クラススタイルの作成

CSSルールを他の段落に適用するには

CSSルールを特定の範囲のテキストに適用するには

適用したCSSルールを解除するには

CSSルールの名前を独自の名前に変更するには

コラム [CSSスタイル]パネルを使ってCSSルールを適用する

不要になったクラススタイルを削除するには

4.2 ●CSSルールとボックスの構造

4.2.1 CSSにおけるボックス構造

ボックスの構造を確認する

ボックスの役割を確認する

コラム ブロック要素とインライン要素

コラム APエレメントが回り込みを設定できない理由

4.3 ●テキストの外観の設定

4.3.1 テキストのサイズとカラー設定

テキストのサイズを指定するには

コラム テキストの表示サイズと単位

コラム HTMLによる文字サイズの設定

テキストのカラーを指定するには

テキストのカラーを設定する際の注意点を確認する

コラム RGB値の指定

コラム HTMLによるテキストカラーの設定

段落内のテキストのスタイルをまとめて設定するには

CSSルールを解除するには

コラム 段落全体に適用されているスタイルを解除するには

テキストに複数のCSSルールを設定するに

複数のCSSルールを設定したときのクラススタイルを確認するには

コラム 2つのクラススタイルが使用されている段落のコード

4.3.2 フォントの指定

フォントとは

テキストのフォントを指定するには

コラム フォントリスト

コラム フォントの指定を確認する

独自のフォントリストを作成するには

コラム システムにインストールされていないフォントを指定する場合

必要のないフォントリストを削除するには

4.3.3 ページ全体のテキストのスタイル設定 24

ページ全体のテキストのスタイルを設定するには

コラム ページプロパティの適用範囲

コラム ページプロパティのコードを確認する

4.4 ●Webブラウザにおけるテキストの表示

4.4.1 Webブラウザにおけるテキストの表示

Webブラウザの種類による表示の違いを確認する

CSSルールが使用される範囲を確認する

Dreamweaver CS4の初期設定を変更するには

コラム dpi

4.4.2 解像度の違いによる文字サイズの変化

WindowsとMacintoshの表示解像度の違いを知る

ポイント(pt)でサイズ指定した文字の表示方法を検証する

ポイント指定によるレイアウトの崩れを検証する

コラム ドットとピクセル

コラム 最新のWebブラウザ事情

4.5 ●[新規CSSルール]ダイアログボックスを使用したCSSルールの作成と編集

4.5.1 独自のCSSルールの作成(クラススタイルの作成)

独自のクラススタイルを作成するには

コラム 作成されたクラススタイルを確認する

コラム 独自のクラススタイルの作成

コラム 外部スタイルシートへのリンク

コラム クラススタイルを内部スタイルシートに記述する方法

クラススタイルで定義したCSSルールを適用するには

コラム CSSルールのテキストへの適用を確認する

コラム 適用したCSSルールの解除

コラム [CSSスタイル]パネルを利用してCSSルールを適用する

4.5.2 CSSルールによるHTMLタグの再定義(HTMLタグスタイルの作成)

HTMLタグを再定義してCSSルールを作成するには

コラム HTMLタグの再定義

コラム 作成済みの外部スタイルシートにCSSルールを追加する方法

4.5.3 CSSルールによるHTMLタググループの再定義

(CSSセレクタスタイルの作成)

複数のHTMLタグを再定義してCSSスタイルを作成するには

コラム HTMLタグの再定義をコードビューで確認する

CSSセレクタスタイルで定義したスタイルを適用するには

コラム CSSセレクタスタイルの効果

4.5.4 CSSスタイル定義の編集

定義済みのCSSルールを編集するには

4.5.5 [CSSスタイル]パネルの機能

[CSSスタイル]パネルの機能を確認する

4.6 ●外部スタイルシートの活用

4.6.1 外部スタイルシートの作成

外部スタイルシートを新規に作成するには

コラム [CSSスタイル]パネルを使用した外部スタイルシートの作成方法

CSSルールを外部スタイルシートに書き出すには

コラム 不用になった内部スタイルシートを削除する方法

4.6.2 外部スタイルシートの適用

外部スタイルシートへのリンクを設定するには

コラム 外部スタイルシートへのリンク

コラム 外部スタイルシートの適用

外部スタイルシートのCSSスタイルを適用するには

外部スタイルシートにCSSルールを追加するには

コラム 新規のクラススタイルの作成

コラム 外部スタイルシートの編集

4.7 ●テキストの強調と背景の設定

4.7.1 強調と文字飾り

テキストを太字で表示するには

コラム 太字の設定

コラム HTMLタグを使って太字にする方法

コラム [ボールド]ボタンを使ってスタイル設定を行う

コラム HTMLタグを使って斜体にする方法

文字を斜体で表示するには

コラム 斜体の設定

英文を小さく表示するには

コラム スモールキャップスの設定

文字にラインを付けるには

4.7.2 テキストの背景色の設定

背景色を設定するクラススタイルを作成するには

コラム 段落全体に設定したスタイルを解除するには

段落全体の背景色を設定するには

特定のテキストだけに背景色を設定するには

コラム テキストに設定したCSSルールを解除するには

背景イメージを表示するクラススタイルを作成するには

テキストの背景にイメージを表示するには

コラム 背景イメージの設定

コラム 文字飾り

4.7.3 テキストの表示位置の設定

CSSスタイルを使って2行目以降を字下げするには

コラム 設定されたCSSルールを確認する

4.8 ●背景の設定

4.8.1 効果的な背景色を設定するためのポイント

カラープランを立てる

コラム 画像の補正について

Webセーフカラーについて

4.8.2 背景色の設定

カラーピッカーを使って背景色を設定するには

コラム 背景色を設定する際の注意点

コラム 画面上に表示されている他のアプリケーションから色を吸着する

4.8.3 背景イメージの設定

ページの背景にイメージを設定するには

コラム イメージファイルの参照

コラム 外部スタイルシートへの書き出し

コラム 絶対パスと相対パス

背景が連続して表示されないようにするには

コラム ページの背景を統一するには

Q&A

●Chapter 5 文書の構造化とCSSの活用

5.1 ●文書の構造化とCSSルールの適用

5.1.1 見出しと本文のスタイル設定

見出しと本文のスタイルを決める

見出し1のCSSルールを定義するには

見出し2のCSSルールを定義するには

見出し3のCSSルールを定義するには

本文用のCSSルールを定義するには

コメント用のCSSルールを定義するには

ボーダー用のCSSルールを定義するには

コラム ボーダーの高さ

ページ全体のマージンを設定するには

5.1.2 CSSルールの適用

見出し1のCSSルールを適用するには

見出し2のCSSルールを適用するには

本文用のCSSルールを適用するには

見出し3のCSSルールを適用するには

コラム 大見出しにイメージを使用する

コラム 余白を活用した文書のレイアウト

コメント用のCSSルールを適用するには

ボーダー用のCSSルールを適用するには

5.2 ●段落内のスタイル設定

5.2.1 行に対するスタイル設定

行間隔を指定するには

1行目のテキストの開始位置を指定するには

5.2.2 テキストの配置に対するスタイル指定

テキストの間隔を指定するには(文字間隔)

5.3 ●テキストブロックの表示

5.3.1 テキストブロックの表示

テキストブロックを表示するには

コラム ボックスのサイズについて

コラム ボックスを画面中央に表示する方法

コラム テキストブロックのフローティング表示

コラム ボックスにスクロールバーを表示する

Q&A

●Chapter 6 イメージの挿入と編集

6.1 ●イメージの基礎知識

6.1.1 イメージファイルの形式

Webで利用できるイメージのファイル形式を確認する

6.1.2 イメージの準備

イメージを用意する方法を確認する

6.1.3 グラフィックソフトの利用

特定のグラフィックソフトを関連付けるには

関連付けたグラフィックソフトでイメージを編集するには

6.2 ●イメージを表示するための基本操作

6.2.1 イメージの挿入

イメージを挿入するには

コラム イメージファイルへのパスの指定

コラム 絶対パスと相対パス

コラム イメージを挿入するHTMLタグを確認する

コラム イメージを取り込むテクニック

コラム イメージを挿入した場合の表示時間を確認する

6.2.2 イメージの交換と削除

イメージを別のイメージに取り替えるには

挿入したイメージを削除するには

コラム イメージプレースホルダーを使う

コラム サイズ変更ハンドル

コラム 変更したサイズを元に戻すには

コラム Dreamweaver CS4でイメージを編集する

6.3 ●CSSルールによる表示位置の指定

6.3.1 インラインでのイメージの埋め込み

本文のブロックにインラインでイメージを埋め込むには

コラム 行間の設定

コラム レイアウト崩れを防止する

イメージまわりの余白を設定するには

コラム イメージを段落の右側に表示する

コラム マージンの設定

コラム Netscapeの問題

コラム CSSルールを活用したページの作成

Q&A

●Chapter 7 CSSを使用したレイアウト

7.1 ●コンテンツを中央に配置したページの作成

7.1.1 スタイルの定義

ページ全体のスタイルを定義するには

ヘッダのスタイルを定義するには

本体部分のスタイルを定義するには

コラム タグ要素と独自のクラス名を組み合わせたエレメント名

メインコンテンツ用のスタイルを定義するには

見出し1のスタイルを定義するには

見出し2のスタイルを定義するには

見出し3のスタイルを定義するには

コメント用のスタイルを定義するには

本文用テキストのスタイルを定義するには

本文の左側に配置するイメージのスタイルを定義するには

本文の右側に配置するイメージのスタイルを定義するには

7.1.2 テキストの入力

テキストを入力するには

7.1.3 本体部分のスタイル設定

本体部分のスタイルを適用するには

コラム ブロック要素にCSSルールを適用する場合は<div>タグを使う

7.1.4 ヘッダのスタイル設定

ヘッダにスタイルを適用するには

7.1.5 見出しのスタイル設定

見出し1をマークアップするには

見出し2をマークアップするには

見出し3をマークアップするには

7.1.6 本文のスタイル設定

本文にスタイルを適用するには

イメージを挿入してスタイルを適用するには

メインコンテンツ用のスタイルを適用するには

コラム ブロック要素に対するCSSルールの適用

7.1.7 ナビゲーションバーの作成

ナビゲーションバーのスタイルを定義するには

バー内部のメニューボタンのスタイルを定義するには

コラム 「p.menu a」が適用される仕組み

コラム クラススタイル「p.menu」の内容

コラム [Line-height]でブロックの高さを指定する理由

メニューボタン用のテキストを入力するには

メニューボタン用のテキストにリンクを設定するには

ナビゲーションバーにスタイルを適用するには

コラム ナビゲーションバーが表示される仕組み

コラム スタイルの適用

ロールオーバーを設定するには

7.1.8 表示状態の確認

完成したページをプレビューするには

コラム クラススタイル「p.menu」の内容

コラム ブラウザの表示サイズが小さい場合

7.2 ●フローティング型1段組ページの作成

7.2.1 フローティングの設定

ページをフローティングさせる手順を確認する

ページをフローティングさせるCSSルールを定義するには

7.2.2 フッタの設定

ページにフッタを付けるには

コラム テキストのみのページを作る

7.3 ●固定型2段組ページの作成

7.3.1 CSSルールの作成

全体のCSSルールを作成するには

ヘッダのCSSルールを作成するには

フッタのCSSルールを作成するには

コラム 絶対配置

メインコンテンツのCSSルールを作成するには

見出し1のCSSルールを作成する

見出し2のCSSルールを作成する

見出し3のCSSルールを作成する

サイドバーのCSSルールを作成するには

コラム インライン要素からブロック要素への変換

7.3.2 テキストの入力とCSSルールの適用

テキストを入力するには

ヘッダのCSSルールを適用するには

サイドバーとリンクボタンにCSSルールを適用するには

コラム 最後のテキストにリンクが設定できない場合

メインコンテンツにCSSルールを適用するには

メインコンテンツ内部のCSSルールを適用するには

フッタにCSSルールを適用するには

ページ全体の背景を設定するには

7.4 ●フローティング型2段組ページの作成

7.4.1 ページをフローティング表示するためのCSSルールの作成

ページの作成手順を確認する

本体のスタイルに回り込みを設定するには

サイドバーの回りこみを設定するには

メインコンテンツとサイドバーの位置を確認するには

7.4.2 フローティング用のCSSルールの作成と適用

ページをフローティングさせるスタイルを作成するには

ページ全体をフローティングさせるCSSルールを適用するには

7.5 ●固定型3段組ページの作成

7.5.1 CSSルールの作成

ページ全体のCSSルールを作成するには

ページ全体のサイズを設定するCSSルールを作成するには

ヘッダのCSSルールを作成するには

フッタのCSSルールを作成するには

メインコンテンツのCSSルールを作成するには

左側のサイドバーのCSSルールを作成するには

右側のサイドバーのCSSルールを作成するには

7.5.2 テキストの入力とCSSルールの適用

テキストを入力するには

ヘッダのCSSルールを適用するには

左側のサイドバーとリンクボタンにCSSルールを適用するには

ページ全体のサイズを設定するCSSルールを適用するには

メインコンテンツにCSSルールを適用するには

右側のサイドバーとリンクボタンにCSSルールを適用するには

フッタにCSSルールを適用するには

ページ全体の背景を設定するには

7.6 ●フローティング型3段組ページの作成

7.6.1 ページをフローティング表示するためのCSSルールの作成

ページを作成する手順を確認する

7.6.2 フローティング用のルールの追加と適用

ページをフローティングさせるスタイルを作成するには

Q&A

●Chapter 8 APエレメントによるレイアウト

8.1 ●APエレメントの機能と仕組み

8.1.1 APエレメントの役割

APエレメントの仕組みを確認する

APエレメントの用途を確認する

8.2 ●APエレメントの作成と編集

8.2.1 APエレメントの作成

マウスを使ってAPエレメントを描画するには

[挿入]メニューを使ってAPエレメントを挿入するには

コラム 挿入されるAPエレメントのサイズをあらかじめ指定する

APエレメントを選択するには

APエレメントの識別名を設定するには

APエレメントを削除するには

8.2.2 APエレメントのサイズ変更

サイズ変更ハンドルを使ってAPエレメントのサイズを変更するには

矢印キーを使ってAPエレメントのサイズを1ピクセル単位で変更するには

コラム サイズ変更ハンドル

コラム 矢印キーによるAPエレメントの拡大と縮小

[プロパティインスペクタ]を使ってAPエレメントのサイズを指定するには

コラム [プロパティインスペクタ]の[幅]と[高さ]に関する注意点

8.2.3 APエレメントの移動

選択ハンドルを使ってAPエレメントを移動するには

矢印キーを使って1ピクセル単位でAPエレメントを移動するには

数値を使ってAPエレメントを移動するには

コラム [プロパティインスペクタ]の[左]と[上]

8.2.4 [APエレメント]パネルによる操作

[APエレメント]パネルを表示する

[APエレメント]パネルを使ってAPエレメントを選択するには

8.3 ●APエレメントによるコンテンツの表示

8.3.1 APエレメントによるイメージの表示

APエレメント内にイメージを挿入するには

コラム イメージの挿入

8.3.2 APエレメントによるテキストの表示

APエレメント内にテキストを入力するには

APエレメントの背景色を独自に設定するには

APエレメント内に配置したテキストのスタイルを設定するには

コラム APエレメント自体にクラススタイルを適用するには

コラム APエレメントのサイズ表示

8.3.3 APエレメントの重ね合わせ

APエレメント内にテキストを入力するには

APエレメント同士を重ね合わせて一体化するには

APエレメントを重ねる順序を変更するには

コラム APエレメントのネスト

コラム ネストさせずに複数のAPエレメントを一緒に移動するには

コラム Zインデックスを指定して重ね順を指定する

コラム APエレメントを一時的に非表示にする

8.3.4 APエレメントの整列とサイズの統一

ばらばらに配置されたAPエレメントを整列させるには

複数のAPエレメントのサイズを統一するには

APエレメントをグリッドに揃えて配置するには

コラム APエレメントの整列

コラム APエレメントのサイズの統一

コラム [プロパティインスペクタ]を使ったサイズの統一

コラム グリッドの設定

8.4 ●APエレメントのテーブルへの変換

8.4.1 APエレメントのレイアウトテーブルへの変換

APエレメントをレイアウトテーブルに変換するには

コラム [絶対位置のDIVをテーブルに変換]ダイアログボックスのオプション

Q&A

●Chapter 9 フレーム+CSSによるレイアウト

9.1 ●フレームの作成と保存

9.1.1 フレームを使ったページの作成

フレームを使うメリットを確認する

フレームの仕組みを確認する

コラム [フレーム]パネルを使ったフレームの選択

フレームを使ったページを新規に作成するには

既存のページを開いてフレームを作成するには

9.1.2 フレームの保存

フレームセットを保存するには

特定のフレームを保存するには

9.2 ●フレームの編集

9.2.1 フレーム名の設定

フレーム名を設定するには

9.2.2 フレームのサイズ変更

フレームのサイズ変更をするには

ピクセル単位でフレームのサイズを指定するには

画面に対する相対値でフレームのサイズを指定するには

ネストしたフレームのサイズを指定するには

コラム フレームのサイズ指定

コラム 縦に分割したフレームの場合

9.2.3 フレームの追加と削除

フレームを追加するには

特定のフレームを削除するには

9.3 ●フレーム内のコンテンツの表示

9.3.1 フレームのレイアウト

フレームボーダーを非表示にするには

コラム フレームボーダーの設定

コラム フレームボーダーの幅を設定するには

コラム フレームボーダーのカラー指定

フレームボーダーに色を着けるには

フレームのサイズ変更を禁止するには

中段のフレームを画面中央に固定する

コラム 真ん中のフレームを画面中央に固定するには

9.3.2 スクロールバーの設定

スクロールバーが常に表示されるようにするには

コラム スクロールバーの自動表示

自動的にスクロールバーが表示されるようにするには

コラム スクロールバーの表示

スクロールバーの表示を禁止するには

Q&A

●Chapter 10 データテーブルの作成

10.1 ●データテーブルの作成

10.1.1 データテーブルの作成

テーブルの仕組みを確認する

テーブルを挿入するには

テーブルを削除するには

コラム テーブルにタイトルを付けるには

10.1.2 テーブルのサイズ設定

マウスを使ってテーブルのサイズを変更するには

コラム テーブルの選択

ピクセル単位でテーブルの幅を指定するには

コラム テーブルのサイズ変更ハンドル

コラム テーブルの移動

画面サイズに対する比率でテーブルの幅を指定するには

10.1.3 テーブルを表示する位置の指定

テーブルを別の段落へ移動するには

テーブルを中央に揃えて表示するには

10.2 ●テキストおよびイメージの挿入

10.2.1 テキストの入力

テーブル内部のセルにテキストを入力するには

セルに見出しを設定するには

10.2.2 イメージの挿入

セルにイメージを挿入するには

コラム 拡張テーブルモードとは

コラム [ヘッダ]の設定

10.3 ●行および列の操作

10.3.1 テーブルにおける行の操作

テーブル内に行を追加するには

複数の行をまとめて追加するには

特定の行の高さを変更するには

特定の行を削除するには

行単位でデータを移動するには

10.3.2 列の操作

テーブル内に列を追加するには

複数の列をまとめて追加するには

特定の列の幅を変更する

特定の列を削除する

列単位でデータを移動するには

コラム 追加位置の指定

列内のすべてのテキストを中央揃えで表示するには

10.4 ●セルの編集

10.4.1 セルの分割と結合

複数のセルを結合して1つのセルにするには

1つのセルを複数のセルに分割するには

10.4.2 セルのレイアウト調整

テーブル内のセルの列幅と高さを一括して変更するには

セルの余白を調整するには

セル同士の間隔を調整するには

セル内のデータを中央に配置するには

セル内のイメージにテキストを回り込ませるには

コラム CSSルールでセルの余白とマージンを指定する

コラム テキストを回り込ませる位置

コラム CSSを適用してテキストを回り込ませる

セル内のテキストにCSSスタイルを適用するには

セルに背景色を設定するには

コラム CSSでセルの背景色を指定する

10.5 ●テーブルの編集

10.5.1 テーブルのデザイン設定

テーブルに背景色を設定するには

テーブルのボーダーをカラーで表示するには

10.6 ●テーブル内のデータの操作

10.6.1 外部データの読み込み

外部のデータファイルを読み込むには

コラム [表データの読み込み]ダイアログボックス

10.6.2 データの並べ替え

指定した条件でテーブル内のデータを並べ替えるには

コラム ソートの条件

●Chapter 11 リンクとナビゲーション

11.1 ●リンクの設定

11.1.1 テキストに対するリンクの設定

テキストにリンクを設定するには

[ファイル]パネルを使ってリンクを設定するには

コラム リンクの設定

コラム 設定したリンク先を変更する

コラム リンク先のページをDreamweaver CS4で開くには

コラム [ファイル]パネルで設定したリンク先を変更する

リンクを解除するには

11.1.2 リンク用テキストの編集

リンク用テキストの表示色を設定するには

コラム [リンクカラー]、[ロールオーバーリンク]、[訪問済みリンク]、[アクティブリンク]

11.1.3 イメージ対するリンクの設定

イメージにリンクを設定するには

コラム 設定したリンク先を変更する

コラム CSSルールを確認する

コラム [ファイル]パネルの利用

11.1.4 リンク先の表示

リンク先を新しいウィンドウに表示するには

11.1.5 サイト以外のリンク設定

Web上のページにリンクを設定するには

メール送信用のリンクを設定するには

ファイルのダウンロード用のリンクを設定するには

11.2 ●アンカーポイントの設定

11.2.1 アンカーポイントの配置とリンクの設定

アンカーポイントを配置するには

同じページの特定の場所にリンクを設定するには

コラム アンカーポイントの削除

コラム アンカーポイントの名前を変更する

他のページの特定の場所にリンクを設定するには

11.3 ●ビヘイビアを利用したナビゲーションメニューの作成

11.3.1 ジャンプメニューの作成

ジャンプメニューを作成するには

コラム ジャンプメニューに移動用のボタンを付けるには

ジャンプメニューの項目を追加するには

コラム ジャンプメニューの修正

コラム リンク先の設定

11.4 ●ロールオーバーとスワップイメージの作成

11.4.1 ロールオーバーイメージの作成

ロールオーバーイメージを配置するには

コラム リンク先の設定

配置済みのイメージにロールオーバーイメージの設定を行うには

ロールオーバーイメージにリンクを設定するには

コラム スワップイメージの設定

11.4.2 スワップイメージの配置

スワップイメージを配置するには

コラム スワップイメージのサイズ

リンクボタンで複数のイメージを切り替えるようにするには

コラム スワップイメージによる複数イメージの切り替え

11.5 ●ナビゲーションバーの作成

11.5.1 ナビゲーションバーの作成

ナビゲーションバーを設置するには

コラム [最初に"ダウンイメージ"を表示]

11.5.2 ナビゲーションバーの編集

ナビゲーションバーのエレメントを追加するには

コラム ナビゲーションバーの設置

コラム [ナビゲーションバーの挿入]ダイアログボックスの機能

エレメントの順序を変更するには

11.6 ●フレームを使用したページにおけるナビゲーションの設定

11.6.1 リンク先の表示

リンクメニューのリンク先を特定のフレームに表示させるには

ジャンプメニューのリンク先を特定のフレームに表示させるには

コラム ターゲットフレームの設定

コラム ナビゲーションバーの設置

11.7 ●サブウィンドウの作成

11.7.1 サブウィンドウの設定

新しいウィンドウにリンク先を表示させるには

サブウィンドウをボタンクリックで開くようにするには

コラム 指定できるウィンドウの機能

コラム [ブラウザウィンドウを開く]アクションにおけるJavaScriptのコード

コラム [ブラウザウィンドウを開く]アクション

コラム サブウィンドウをボタンクリックで開く仕組み

11.7.2 サブウィンドウの機能の設定

サブウィンドウの機能を指定するには

Q&A

●Chapter 12 ビヘイビア&JavaScriptによる動的処理の設定

12.1 ●ビヘイビアによる動的処理の設定

12.1.1 代替イメージの表示

重たい画像を読み込む間に別の画像を表示させるには

コラム 訪問者のブラウザがJavaScriptをオフにしている場合

コラム 代替イメージの表示

12.2 ●JavaScriptの記述

.2.1 JavaScriptによる動的処理の実行

時刻によってイメージを切り替えて表示させるには

コラム リファレンスパネル

コラム JavaScriptのコードを記述する際の注意

コラム 切り替えるimageの設定

Q&A

●Chapter 13 サイト管理の方法

13.1 ●サイトの管理

13.1.1 ファイル名の変更と保存場所の移動

リンク切れを起こさずにファイル名を変更できるようにするには

コラム [ファイルを更新するときにリンクを更新する]

ローカルサイト内のファイル名を変更するには

コラム [ファイルの更新]ダイアログボックス

新規フォルダを作成してファイルを移動するには

13.1.2 リンク状況のチェック

ローカルサイト内のリンク切れをチェックするには

コラム 特定のファイルのリンク切れをチェックするには

リンク切れを修正するには

不要なファイルを検出して削除するには

コラム 不要なファイルの削除

特定のファイルへのリンクを一括して変更するには

13.1.3 ローカルサイトのバックアップ

ローカルサイト全体をバックアップするには

13.2 ●Webページの問題点のチェック

13.2.1 サイト内の問題点のチェック

サイト内の問題点をピックアップするには

コラム エラーの修正

コラム レポートの内容

13.2.2 HTMLコードの問題点のチェック

HTMLコードの問題点をピックアップするには

不要なHTMLコードを削除するには

13.2.3 Webブラウザの対応状況のチェック

コラム レポート結果の一部が隠れている場合

コラム ターゲットとなるブラウザの指定

13.3 ●リモートサイトへのアップロード

13.3.1 リモートサイトへのアップロード

ローカルサイトのデータをリモートサイトにアップロードするには

ローカルサイトとリモートサイトの内容を同期させるには

コラム 複数のファイルをまとめてアップロードする

特定のファイルだけをアップロードするには

13.3.2 リモートサイトからのダウンロード

リモートサイトのファイルをダウンロードするには

Q&A

●Chapter 14 ASP.NET対応ページの作成

14.1 ●ASP.NETを利用するための準備

14.1.1 Dreamweaver CS4におけるASP.NETの利用

Webアプリケーションを開発するための環境を確認する

コラム 自前のWebサーバーの必要性

14.1.2 IISのインストール

WindowsにIISをインストールするには

コラム コマンド一発でIIS関連のコンポーネントをフルインストール

14.1.3 ASP.NETを利用するためのサイトの作成

ASP.NETを利用するためのサイトの構造を確認する

ASP.NETを利用するための専用のサイトを構築するには

コラム サイトのURL

コラム IISのホームディレクトリ

コラム IISのホームディレクトリを変更する

14.2 ●ASP.NETページの作成

14.2.1 ASP.NETページの新規作成

空白のASP.NETページを新規に作成するには

作成したASP.NETページを保存するには

ASP.NETページをブラウザでプレビューするには

14.3 ●ASP.NETユーザーコントロールを利用したコードの再利用

14.3.1 ASP.NETコントロール

ASP.NETユーザーコントロールについて確認する

Dreamweaverが生成するPage ディレクティブを確認する

14.3.2 ASP.NETユーザーコントロールの作成

ヘッダー用ユーザーコントロールを作成するには

フッター用ユーザーコントロールを作成するには

ヘッダーおよびフッターユーザーコントロールを呼び出す

ASP.NETページを作成するには

ブラウザで確認するには

Q&A

●Chapter 15 Spry(Ajaxフレームワーク)の使用

15.1 ●AjaxフレームワークとSpry

15.1.1 Ajaxの概要

Ajaxについて確認する

15.1.2 Spryの機能

Spryについて確認する

15.2 ●メニューバーWidgetの配置

15.2.1 メニューバーWidgetの配置

メニューバーWidgetを配置するには

コラム 依存ファイルのコピー

サブメニューを追加するには

メニューの任意の項目を削除するには

不要なサブメニューを削除するには

コラム 「#」の設定

15.2.2 リンクの設定

リンクをさせない項目を設定するには

メニュー項目のリンク先を設定するには

15.3 ●アコーディオンWidgetの配置

15.3.1 アコーディオンWidgetの作成

ページ上にアコーディオンWidgetを配置するには

コラム 依存ファイルのコピー

アコーディオンWidgetのラベルを設定するには

アコーディオンWidgetのコンテンツを入力するには

2番目のラベルとコンテンツを設定するには

アコーディオンWidgetの項目を追加するには

15.4 ●XMLデータベースと連携したWebアプリケーションの作成

15.4.1 XMLデータの作成

空白のXMLファイルを作成するには

XMLファイルの構造を確認する

XMLファイルにデータを入力するには

15.4.2 Spryテーブルの作成

データセットを作成するには

コラム 依存ファイルのコピー

Spryテーブルを配置するには

Spryテーブルの動作を確認するには

●Chapter 16 Fireworks CS4によるイメージ・パーツの作成

16.1 ●Fireworks CS4の特徴

16.1.1 Fireworks CS4の機能

Fireworks CS4の機能を確認する

16.1.2 Fireworks CS4の画面構成

Fireworks CS4の画面構成を確認する

16.1.3 Fireworks CS4の起動と終了(Windows編)

Fireworks CS4を起動するには

コラム スタートページを表示しないようにする

Fireworks CS4を終了するには

16.1.4 Fireworks CS4の起動と終了(Macintosh編)

Fireworks CS4(Macintosh版)を起動するには

Fireworks CS4(Macintosh版)を終了するには

16.2 ●Firewoks CS4の基本操作

16.2.1 イメージの新規作成

サイズを指定して新規イメージを作成するには

16.2.2 イメージの保存

PNG方式でイメージを保存するには

JPEGファイルの圧縮率を指定して保存するには

コラム 読み込みに必要な時間の目安

イメージの一部を除いて圧縮するには

GIFファイルのサイズを小さくして保存するには

コラム GIFファイルにおける色数の設定

徐々に表示されるイメージを作るには

16.3 ●イメージの作成

16.3.1 図形の描画

四角形を描くには

16.3.2 図形の編集

図形の位置とサイズを変更する

コラム 円形のイメージを編集するには

図形のまわりに枠線を表示する

図形にシャドウを付ける

16.3.3 写真の編集

カラー写真をモノクロに変換する

写真に緊張感を付ける

PR

秀和システム