挿入ツールバー
Home>Dreamweaver>ソフトの使い方>画面の基本構成>挿入ツールバー
このコンテンツは未公開です。
<--挿入
HTMLタグや編集可能領域等、ドキュメントを編集するためのコードを挿入します。挿入バーには、さらに「一般」「レイアウト」「フォーム」「データ」「Spry」「テキスト」「お気に入り」の7つのカテゴリがあります。
一般カテゴリ
ハイパーリンク
ハイパーリンクを貼ります。ハイパーリンクのダイアログボックスが表示されるので、アンカーテキスト、リンク先、表示先(ターゲット)、タイトルなどを入力します。
電子メールリンク
電子メールリンク(mailto:)設定します。アンカーテキストと電子メールアドレスを入力します。
※ただし、このままだと電子メールを取得され、スパムメールをおくりつけられることになるので、この方法に寄らず、メール暗号化などを行ってリンクを貼る方法をお薦めします。
アンカーポイント
アンカーポイントをドキュメント上に設置します。アンカーポイント名を入力します。
アンカーポイント名は、日本語の指定も可能ですが、なるべくなら半角英数にすべきです。
テーブル
テーブルを配置します。行数、列数、テーブル幅、ボーダーの有無、セル内の余白(cellpadding)と間隔(cellspacing)、ヘッダの有無、キャプション、サマリー属性値を設定できます。
Divタグを挿入
DIV要素をドキュメントに追加します。設置する場所、設定するクラス名、ID名を指定します。
イメージ
画像を配置します。配置できる画像の種類は以下の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要素に適用するクラス名を指定します。
[ID]は、div要素に適用するID名を指定します。
AP Divを描画
AP Divとは、絶対位置指定をしたdiv要素のことで、自由に位置を移動したり、他の要素と重ね合わせたりすることができます。
[AP Divを描画]をクリックしてから、デザインビュー上でマウスをドラッグ&ドロップすると、四角く描画した部分が絶対位置指定をしたdiv要素になります。
▲デザインビューではこのように描画される
▲AP Divを描画したときのCSSのソース
Spryのメニューバー
SpryとはJavaScriptを利用した動的なコンテンツのことです。
Spryのメニューバーとは、カーソルがメニューの上に乗ると、サブメニューが表示されるようなメニューのことです。
Spryの挿入については「挿入:Spry」でも詳しく触れています。
▲[水平]か[縦]かを選びます
▲デザインビュー上にメニューバーが配置されました
詳しくは「挿入:Spry」をご覧ください。
Spryのタブ付きのパネル
Spryを利用してタブによる切り替えができるように見せるパネルを配置します。
詳しくは「挿入:Spry」をご覧ください。
Spryアコーディオン
アコーディオンとは、クリックすると隠れていた内容が伸びて、内容が表示されるようなアニメーション処理をするものを指しています。
Spryアコーディオンでは、JavaScript処理による伸縮するコンテンツを挿入します。
詳しくは「挿入: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」をご覧ください。
Spry領域
Spryをセットするための領域を設定します。
以下のSpryを挿入する際にSpry領域は必ず必要になります。
以下のSpryを挿入する際に、Spry領域が設定されていない場合、Spry領域を挿入するように促します。
詳しくは「挿入:Spry」をご覧ください。
Spryリピート
詳しくは「挿入:Spry」をご覧ください。
Spryリピートリスト
詳しくは「挿入:Spry」をご覧ください。
Spryテーブル
XMLファイルなどからデータを読み込み、一覧表にして出力することができます。
詳しくは「挿入:Spry」をご覧ください。
レコードセット
MySQLなど、ローカルに設定したデータベースから、データを取得してページに反映させることができるようになります。
[レコードセット]を指定する前に、[サイト]と[ドキュメントタイプ]と[テストサーバー]を指定する必要があります。
サイト
[サイト]->[サイトの管理]で、サイト定義を指定します。
ドキュメントタイプ
レコードセットを使う言語を指定します。上図ではPHPを指定しています。
テストサーバー
[サイト]->[サイトの管理]->[詳細設定]->[テストサーバー]で設定します。
上図では[PHP MySQL]を指定しています。
以上の設定によりレコードセットを使えるようにしたら、バインディングパネルから各レコードのフィールドにアクセスできるようになります。
ストアードプロシージャ
動的データ
レコードセットをしたデータベースから、必要なデータを取り出して表示することができます。
動的テーブル
リピート領域を設定したテーブルを配置し、データベースから取り出したデータを表示します。
[動的テーブル]ダイアログボックスで、表示するデータ件数やテーブルの幅やセル内の空間を指定します。
動的テキスト
レコードセットからフィールドを指定して、[コード]に書いたPHPで貼り付けます。
動的テキストフィールド
テキストフィールド内にレコードセットから指定したデータを表示します。
まずドキュメントに、テキストフィールドを挿入しておきます([挿入]->[フォーム]->[テキストフィールド])。
[動的テキストフィールド]ダイアログボックスの、[テキストフィールド]欄に、データを挿入したいテキストフィールド名を指定します。
設定値には、レコードセット内のデータを指定します。右となりの雷マークをクリックすると、レコードセットの選択画面になります。
動的チェックボックス
レコードセットの値によって予めチェックを入れるか入れないかを動的に判断するチェックボックスを生成します。
まずドキュメントに、チェックボックスが挿入されている必要があります([挿入]->[フォーム]->[チェックボックス])。
[チェック項目]に指定するレコードセットのフィールドの型が、ブール型(Yes,No又はTrue,Falseのような2つの値のみをとる形)である必要があります。
[同等値の選択]では、チェック項目にセットしたレコードの取る値を入力します。
この値がレコードと同じときはチェックボックスに予めチェックが入ります。
動的ラジオボタングループ
予めドキュメントにラジオボタングループを設定しておく必要があります。
ラジオボタンに設定している値と一致するデータをもつフィールドを指定します。
[同等値の選択]で、そのフィールドを指定します。
レコードとラジオボタンの値が一致したものが選択状態になります。
動的選択リスト
select要素などで作成したリストメニューの項目に、レコードセットのデータを取り込みます。
リピート領域
ドキュメント上の指定したオブジェクトにリピート領域を設定します。
領域の表示
レコードセットページング
詳細ページへ移動
レコードカウントの表示
マスター詳細ページセット
レコードの挿入
レコードの更新
レコードの削除
ユーザー認証
XSL変換
Spryカテゴリ
Spryの挿入については「挿入:Spry」でも詳しく触れています。
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選択検査
JavaScriptによるselect要素の選択チェックを行う選択フィールドを挿入します。
Spryチェックボックス検査
JavaScriptによる入力チェックを行うチェックボックスを挿入します。
Spryテキストエリア検査
JavaScriptによる入力チェックを行うテキストエリアを挿入します。
Spryのメニューバー
JavaScriptでサブメニューを表示・非表示するメニューバーを挿入します。
▲メニューバーのレイアウトを選択
▲デザインビューでの表示
▲上図のコード
Spryのタブ付きのパネル
JavaScriptで動作するタブつきのパネルを挿入します。
▲デザインビューでの表示
▲タブ付きパネルのソースコード
Spryアコーディオン
JavaScriptでアコーディオン式に動作するコンテンツを挿入します。
▲デザインビューでの表示
▲Spryアコーディオンのソースコード
Spryの縮小可能なパネル
JavaScriptで動作する
▲デザインビューでの表示
▲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;)
- 著作権(©)
- 登録商標(®)
- 商標(™)
- その他の文字(その他一覧から選べます)
お気に入りカテゴリ
以上のカテゴリから、よくつかうアイコンだけを選んで自分なりの挿入バーを作りたいときは、お気に入りを使います。
挿入バーの上で[右クリック]→[お気に入りのカスタマイズ]を選ぶと、アイコンを追加・削除する画面になり、自分でメニューをつくることができます。
お気に入りバーに追加できないメニューをつくりたい場合には、「挿入バーに追加できないタグを追加する」をご覧ください。
-->関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010