挿入ツールバー

Home>Dreamweaver>ソフトの使い方>画面の基本構成>挿入ツールバー

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

このコンテンツは未公開です。

<--

挿入

HTMLタグや編集可能領域等、ドキュメントを編集するためのコードを挿入します。挿入バーには、さらに「一般」「レイアウト」「フォーム」「データ」「Spry」「テキスト」「お気に入り」の7つのカテゴリがあります。

一般カテゴリ

挿入バー[一般]カテゴリ

ハイパーリンク

ハイパーリンクを貼ります。ハイパーリンクのダイアログボックスが表示されるので、アンカーテキスト、リンク先、表示先(ターゲット)、タイトルなどを入力します。

ハイパーリンクのダイアログボックス

電子メールリンク

電子メールリンク(mailto:)設定します。アンカーテキストと電子メールアドレスを入力します。
※ただし、このままだと電子メールを取得され、スパムメールをおくりつけられることになるので、この方法に寄らず、メール暗号化などを行ってリンクを貼る方法をお薦めします。

電子メールリンク設定ダイアログボックス

アンカーポイント

アンカーポイントをドキュメント上に設置します。アンカーポイント名を入力します。
アンカーポイント名は、日本語の指定も可能ですが、なるべくなら半角英数にすべきです。

アンカーポイント設定ダイアログボックス

テーブル

テーブルを配置します。行数、列数、テーブル幅、ボーダーの有無、セル内の余白(cellpadding)と間隔(cellspacing)、ヘッダの有無、キャプション、サマリー属性値を設定できます。

テーブル設定ダイアログボックス

Divタグを挿入

DIV要素をドキュメントに追加します。設置する場所、設定するクラス名、ID名を指定します。

Divタグを挿入他イアログボックス

イメージ

画像を配置します。配置できる画像の種類は以下の5つです。また、イメージマップ(クリッカブルマップ)のホットスポットを作成することもできます。

イメージの挿入

イメージ 画像ファイルを配置します。
イメージプレースホルダー 画像のURLを指定しないで高さや幅、補足情報を入れたimgタグを配置します。
ロールオーバーイメージ JavaScriptによるロールオーバーイメージを配置します。
Fireworks HTML Fireworksからスライスで書き出したHTMLファイルを挿入します。
ナビゲーションバー ヘッダーなどで使われるナビゲーションバーをつくります。
ホットスポットの描画 クリッカブルマップなど、画像の上にホットスポットを設定します。

メディア

Flash、Shockwave、その他アプレット、ActiveXなどを挿入します。

メディアを挿入

日付

指定した形式で日付を貼り付けます。更新情報などに使います。

日付の挿入ダイアログボックス

サーバーサイドインクルード

サーバーサイドインクルードとは、ドキュメントに埋め込まれたコメントの部分に、サーバ側で処理したデータをHTMLファイルに出力してから表示する機能です。この機能を使用するには、サーバ側でサーバーサイドインクルードに対応していなければなりません。

埋め込むタイプには、fileとvirtualがあり、初期設定ではfileになっています。
基本的にウェブサーバがIISの場合はfile、Apache場合はvirtualで使用します。
fileとvirtualの指定方法は、[挿入]→[サーバーサイドインクルード]で、ファイルの選択ダイアログボックスが開いているときに、[相対位置]を[ドキュメント]にするとfile、[サイトルート]にするとvirtualになります。

サーバーサイドインクルードの埋め込みタイプの指定

コメント

HTMLのソースコードにコメントを挿入します。コメントは、<!-- -->の間に書いたテキストのことを指し、ソースコード上は見えますが、ブラウザ上では表示されません。

コメントダイアログボックス

ヘッド

head要素の間にmeta要素、キーワード(keywords)、詳細(description)、更新(ページの再読み込み時間)、ベース(基準URL)、外部ファイルへのリンクなどを指定します。

ヘッドの挿入

スクリプト

JavaScript等の外部ファイルの読み込みを設定します。[スクリプトなし]では、noscript要素配置されます。

スクリプトの挿入

テンプレート

テンプレートファイルに関連するデータを挿入します。

テンプレートの挿入

※詳しくは「テンプレートオブジェクト」をご覧下さい。

タグ選択

HTMLタグなど、アイコンとして表示されていないメニューを直接選べます。

タグ選択

レイアウトカテゴリ

挿入バー[レイアウト]カテゴリ

標準モード

デザインビューの表示をできるだけブラウザで表示したときと同じように見えるように表現するモードです。

標準モードのテーブル

▲テーブルの枠線は点線で表示される

拡張テーブルモード

デザインビューの表示において、テーブルの境界線などがわかりやすいように表現したモードです。

拡張テーブルモードの開始

拡張テーブルモード

▲テーブルの枠線ははっきりと表示される

Divタグを挿入

カーソルを置いた場所にdiv要素を配置します。

Divタグを挿入

[挿入]ではdiv要素を挿入する場所を指定します。
[挿入ポイント]は、カーソルを置いた場所に配置します。
[開始タグの後]を選択すると、右側のプルダウンリストに、そのドキュメント内に存在する開始タグが表示されるので、その中から一つを選ぶと、その位置にdiv要素が挿入されます。
[終了タグの前]を選択すると、右側のプルダウンリストに、そのドキュメント内に存在する終了タグが表示されるので、その中から一つを選ぶと、その位置にdiv要素が挿入されます。

[クラス]はdiv要素に適用するクラス名を指定します。

[ID]は、div要素に適用するID名を指定します。

AP Divを描画

AP Divとは、絶対位置指定をしたdiv要素のことで、自由に位置を移動したり、他の要素と重ね合わせたりすることができます。

[AP Divを描画]をクリックしてから、デザインビュー上でマウスをドラッグ&ドロップすると、四角く描画した部分が絶対位置指定をしたdiv要素になります。

AP Divを描画

▲デザインビューではこのように描画される

AP Divを描画したときのコード

▲AP Divを描画したときのCSSのソース

Spryのメニューバー

SpryとはJavaScriptを利用した動的なコンテンツのことです。
Spryのメニューバーとは、カーソルがメニューの上に乗ると、サブメニューが表示されるようなメニューのことです。

Spryの挿入については「挿入:Spry」でも詳しく触れています。

Spryのメニューバー

▲[水平]か[縦]かを選びます

Spryのメニューバーを配置したところ

▲デザインビュー上にメニューバーが配置されました

詳しくは「挿入:Spry」をご覧ください。

Spryのタブ付きのパネル

Spryを利用してタブによる切り替えができるように見せるパネルを配置します。

Spryのタブ付きのパネル

詳しくは「挿入:Spry」をご覧ください。

Spryアコーディオン

アコーディオンとは、クリックすると隠れていた内容が伸びて、内容が表示されるようなアニメーション処理をするものを指しています。

Spryアコーディオンでは、JavaScript処理による伸縮するコンテンツを挿入します。

Spryアコーディオン

詳しくは「挿入:Spry」をご覧ください。

Spryの縮小可能なパネル

タブをクリックするとコンテンツが縮小して隠れるパネルを挿入します。

Spryの縮小可能なパネル

詳しくは「挿入:Spry」をご覧ください。

テーブル

table要素を配置します。

テーブルの配置

[テーブルサイズ]では、行(縦)と列(横)の数や、テーブルの幅、ボーダー(枠線)の太さ、セル内の余白や、セルとセル同士の間隔を指定します。

[ヘッダ]では、指定した位置に、th要素を配置します。

[アクセシビリティ]では、テーブルのキャプション(caption要素)、サマリー(table要素にsummary属性をつける)を設定します。

テーブルが配置された

▲デザインビューでテーブルが配置されたところ

詳しくは「挿入:テーブル」をご覧ください。

上に行を挿入

テーブルの内部のカーソルを配置している場所から上に、一行(tr要素)追加します。

下に行を挿入

テーブルの内部のカーソルを配置している場所から下に、一行(tr要素)追加します。

左に列を挿入

テーブルの内部のカーソルを配置している場所から左に、一列(td要素)追加します。

右に列を挿入

テーブルの内部のカーソルを配置している場所から右に、一列(td要素)追加します。

IFRAME

[IFRAME]とはインラインフレームのことで、ドキュメント内に「穴」(フレーム)を開け、そこに指定した別のドキュメントを表示させます。

ドキュメント上ではiframe要素が配置されます。

フレーム

フレーム分割されたページとして、フレームの大元のインデックスページと、他の分割ページを自動的に生成します。

現在のドキュメントは、フレームを構成するページのうちの一つに設定されます。

例えば、[左フレーム]を選択した場合は、フレームのインデックスページ(frame要素が書かれているページ)と、左側のページを自動的に生成し、現在のドキュメントは右側のページとして設定されます。

レイアウトテーブルを描画(レイアウトモードのみ)

[表示]->[テーブルモード]->[レイアウトモード]にしているときに有効です。
レイアウトテーブルをデザインビュー上に描画します。

レイアウトセルを描画(レイアウトモードのみ)

[表示]->[テーブルモード]->[レイアウトモード]にしているときに有効です。
レイアウトセルをデザインビュー上に描画します。

フォームカテゴリ

挿入バー[フォーム]カテゴリ

フォーム

form要素を挿入します。

テキストフィールド

input要素を挿入します。

テキストフィールドの挿入

非表示フィールド

input要素に、type="hidden"を指定した状態で挿入します。

テキストエリア

textarea要素を挿入します。

チェックボックス

input要素に、type="checkbox"を指定した状態で挿入します。

ラジオボタン

input要素に、type="radio"を指定した状態で挿入します。

ラジオボタングループ

複数のラジオボタンを同じグループとして管理する、ラジオボタングループを生成します。

ラジオボタングループの挿入

リスト/メニュー

select要素を挿入します。

ジャンプメニュー

選択すると該当ページにジャンプする、JavaScriptとselect要素からなるジャンプメニューを挿入します。

ジャンプメニューの挿入

イメージフィールド

input要素に、type="image"を指定した状態で挿入します。

イメージフィールドの挿入

ファイルフィールド

input要素に、type="file"を指定した状態で挿入します。

ボタン

input要素に、type="submit"を指定した状態で挿入します。

ラベル

label要素を挿入します。

フィールドセット

fieldset要素を挿入します。

Spryテキストフィールド検査

JavaScriptによるテキストフィールドの入力チェックを行うプログラムを組み込みます。

Spryテキストエリア検査

JavaScriptによるテキストエリアの入力チェックを行うプログラムを組み込みます。

Spryチェックボックス検査

JavaScriptによるチェックボックスの入力チェックを行うプログラムを組み込みます。

Spry選択検査

JavaScriptによるラジオボタンの入力チェックを行うプログラムを組み込みます。

データカテゴリ

挿入バー[データ]カテゴリ

表データの読み込み

表の形式になっているデータを読み込みます。

[データファイル]でテキストファイルなどを指定します。
[区切り]では、データとデータを区切る文字を指定します。
[OK]をクリックすると、table要素で配置されます。

表データの読み込み

Spry XMLデータセット

XMLファイルを解析して、その中のデータを取り込みます。
詳しくは「挿入:Spry」をご覧ください。

SpryXMLデータセットの指定

Spry領域

Spryをセットするための領域を設定します。
以下のSpryを挿入する際にSpry領域は必ず必要になります。
以下のSpryを挿入する際に、Spry領域が設定されていない場合、Spry領域を挿入するように促します。

Spry領域の挿入

詳しくは「挿入:Spry」をご覧ください。

Spryリピート

 

Spryリピートの挿入

詳しくは「挿入:Spry」をご覧ください。

Spryリピートリスト

 

Spryリピートリストの挿入

詳しくは「挿入:Spry」をご覧ください。

Spryテーブル

XMLファイルなどからデータを読み込み、一覧表にして出力することができます。

Spryテーブルの挿入

詳しくは「挿入:Spry」をご覧ください。

レコードセット

MySQLなど、ローカルに設定したデータベースから、データを取得してページに反映させることができるようになります。

レコードセット

[レコードセット]を指定する前に、[サイト]と[ドキュメントタイプ]と[テストサーバー]を指定する必要があります。

サイト

[サイト]->[サイトの管理]で、サイト定義を指定します。

ドキュメントタイプ

レコードセットを使う言語を指定します。上図ではPHPを指定しています。

テストサーバー

[サイト]->[サイトの管理]->[詳細設定]->[テストサーバー]で設定します。
上図では[PHP MySQL]を指定しています。

以上の設定によりレコードセットを使えるようにしたら、バインディングパネルから各レコードのフィールドにアクセスできるようになります。

バインディングパネルからレコードセットを利用する

ストアードプロシージャ

コマンドの設定

 

動的データ

レコードセットをしたデータベースから、必要なデータを取り出して表示することができます。

動的テーブル

リピート領域を設定したテーブルを配置し、データベースから取り出したデータを表示します。

動的テーブル

[動的テーブル]ダイアログボックスで、表示するデータ件数やテーブルの幅やセル内の空間を指定します。

デザインビューでの結果

動的テキスト

動的テキストフィールド

レコードセットからフィールドを指定して、[コード]に書いたPHPで貼り付けます。

動的テキストフィールド

テキストフィールド内にレコードセットから指定したデータを表示します。

動的テキストフィールドの設定

まずドキュメントに、テキストフィールドを挿入しておきます([挿入]->[フォーム]->[テキストフィールド])。

[動的テキストフィールド]ダイアログボックスの、[テキストフィールド]欄に、データを挿入したいテキストフィールド名を指定します。

設定値には、レコードセット内のデータを指定します。右となりの雷マークをクリックすると、レコードセットの選択画面になります。

動的チェックボックス

動的チェックボックス

レコードセットの値によって予めチェックを入れるか入れないかを動的に判断するチェックボックスを生成します。

まずドキュメントに、チェックボックスが挿入されている必要があります([挿入]->[フォーム]->[チェックボックス])。

[チェック項目]に指定するレコードセットのフィールドの型が、ブール型(Yes,No又はTrue,Falseのような2つの値のみをとる形)である必要があります。

[同等値の選択]では、チェック項目にセットしたレコードの取る値を入力します。
この値がレコードと同じときはチェックボックスに予めチェックが入ります。

動的ラジオボタングループ

動的ラジオボタングループ

予めドキュメントにラジオボタングループを設定しておく必要があります。

ラジオボタンに設定している値と一致するデータをもつフィールドを指定します。
[同等値の選択]で、そのフィールドを指定します。

レコードとラジオボタンの値が一致したものが選択状態になります。

動的選択リスト

select要素などで作成したリストメニューの項目に、レコードセットのデータを取り込みます。

動的リスト/メニュー

リピート領域

ドキュメント上の指定したオブジェクトにリピート領域を設定します。

領域の表示

 

レコードセットページング

 

詳細ページへ移動

 

レコードカウントの表示

 

マスター詳細ページセット

 

レコードの挿入

 

レコードの更新

 

レコードの削除

 

ユーザー認証

 

XSL変換

 

Spryカテゴリ

Spryの挿入については「挿入:Spry」でも詳しく触れています。

挿入バー[Spry]カテゴリ

Spry XMLデータセット

Spry XMLデータセットの挿入

XMLファイルとJavaScriptによる動的なコンテンツ作成をする場合に使います。
データを抽出するためのXMLファイルの指定を行います。

詳しくは「挿入:Spry」をご覧ください。

Spry領域

Spryをセットするための領域を設定します。
以下のSpryを挿入する際にSpry領域は必ず必要になります。
以下のSpryを挿入する際に、Spry領域が設定されていない場合、Spry領域を挿入するように促します。

詳しくは「挿入:Spry」をご覧ください。

Spryリピート

JavaScriptなどで動作するリピート領域を挿入します。
リピート領域は、表示するデータによってフォーマットを設定できます。

詳しくは「挿入:Spry」をご覧ください。

Spryリピートリスト

 

詳しくは「挿入:Spry」をご覧ください。

Spryテーブル

XMLファイルなどからデータを読み込み、一覧表にして出力することができます。

詳しくは「挿入:Spry」をご覧ください。

Spryテキストフィールド検査

JavaScriptによる入力チェックを行うテキストフィールドを挿入します。

Spryテキストフィールド検査

Spry選択検査

JavaScriptによるselect要素の選択チェックを行う選択フィールドを挿入します。

Spry選択検査

Spryチェックボックス検査

JavaScriptによる入力チェックを行うチェックボックスを挿入します。

Spryチェックボックス検査

Spryテキストエリア検査

JavaScriptによる入力チェックを行うテキストエリアを挿入します。

Spryテキストエリア検査

Spryのメニューバー

JavaScriptでサブメニューを表示・非表示するメニューバーを挿入します。

▲メニューバーのレイアウトを選択

Spryのメニューバー

▲デザインビューでの表示

Spryメニューバーのコード

▲上図のコード

Spryのタブ付きのパネル

JavaScriptで動作するタブつきのパネルを挿入します。

Spryのタブ付きパネル

▲デザインビューでの表示

タブ付きパネルのソースコード

▲タブ付きパネルのソースコード

Spryアコーディオン

JavaScriptでアコーディオン式に動作するコンテンツを挿入します。

Spryアコーディオン

▲デザインビューでの表示

Spryアコーディオンのソースコード

▲Spryアコーディオンのソースコード

Spryの縮小可能なパネル

JavaScriptで動作する

Spryの縮小可能なパネル

▲デザインビューでの表示

Spryの縮小可能なパネル

▲Spryの縮小可能なパネル

テキストカテゴリ

挿入バー[テキスト]カテゴリ

ボールド

選択したテキストを太字にします(b要素で囲います)。

イタリック

選択したテキストをイタリック体にします(i要素で囲います)。

より強調

選択したテキストを強調表示にします(strong要素で囲います)。

強調

選択したテキストをやや強調表示にします(em要素で囲います)。

段落

段落にします(p要素を配置します)。

ブロック引用

ブロックレベルを丸ごと引用箇所にします(blockquote要素で囲います)。

プリフォーマットテキスト

選択したテキストを、プリフォーマットテキストにします(pre要素で囲います)。

見出し1

指定した行を大見出しにします(h1要素を配置します)。

見出し2

指定した行を中見出しにします(h2要素を配置します)。

見出し3

指定した行を小見出しにします(h3要素を配置します)。

リスト

指定した箇所にリストを配置します(ul要素li要素を配置します)。

番号リスト

指定した箇所に番号つきリストを配置します(ol要素li要素を配置します)。

リスト項目

リストに項目を追加します(li要素を配置します)。

定義リスト

指定した箇所に定義リストを配置します(dl要素dt要素を配置します)。

定義する用語

指定した箇所に定義する用語(dt要素)を配置します。

定義の詳細

指定した箇所に定義した用語の解説(dd要素)を配置します。

省略形

完全なテキストとその省略文字を指定するタグ(abbr要素)を配置します。

頭字語

 完全なテキストとその頭文字を指定するタグ(acronym要素)を配置します。

文字:その他の文字

その他の文字として、以下の文字を配置できます。

  • 改行(br要素
  • 区切りなしスペース( )
  • 開始引用符(“)
  • 終了引用符(”)
  • Em Dash(—)
  • ポインド(£)
  • ユーロ(€)
  • 円(&#yen;)
  • 著作権(©)
  • 登録商標(®)
  • 商標(™)
  • その他の文字(その他一覧から選べます)

お気に入りカテゴリ

以上のカテゴリから、よくつかうアイコンだけを選んで自分なりの挿入バーを作りたいときは、お気に入りを使います。
挿入バーの上で[右クリック]→[お気に入りのカスタマイズ]を選ぶと、アイコンを追加・削除する画面になり、自分でメニューをつくることができます。

お気に入りバーに追加できないメニューをつくりたい場合には、「挿入バーに追加できないタグを追加する」をご覧ください。

-->

関連リンク

よく読まれている記事

UpDate:2010