髭仙人の漫ろ歩き
Dreamweaver
............................ unworldly man go for a ramble in the internet world ...
イメージマップの作成 (レッスン)
 「Dreamweaver 4 レッスン」の例題 


 一つのイメージに複数のホットスポット領域を設定できます。ホットスポットには、ほかのドキュメントやファイルへのリンクを設定できます。

手順
1.イメージの選択
2.イメージマップに名前を付ける
  <map name="...">〜</map>
3.ホットスポットを定義
  <area shape="..." coords="..." href="..." alt="...">
4.リンクの作成
 注:<area> は <map> と組み合わせて使用します。
   詳細は「とほほのWWW入門」<map>を参照してください。

主要な記述Sample11T.htm

……………………………………………………………………………………………………………………

 「Dreamweaver 4 レッスン」の応用


 ここでは日本地図のイメージに複数のホットスポット領域(ブロック)を設定しました。尚、ホットスポットは、矩形(rect)でなく多角形(poly)で地図に沿って設定しました。この多角形の設定は非常に簡単に設定できました。

 このホットスポット定義
<area shape="..." coords="..." href="..." alt="...">の
shape="..."には下記のように設定します。
  rect:矩形(H3/e2/N2)
  poly:多角形(H3/e2/N2)
  circle:円形(H3/e2/N2)

主要な記述Sample12T.htm

 
新規ウインドウでページを開く (レッスン)  
 「Dreamweaver 4 レッスン」の例題


 ここではイメージマップのホットスポットに「ブラウザウインドウを開く」ビヘイビアを割り当てます。尚、ホットスポットにカーソルを重ねると、新しいブラウザウインドウにリンクされたページが開き、画面の一番手前に表示されます。

手順
1.オブジェクトの選択
2.「ビヘイビア」パネルを開く
3.「ブラウザウインドウを開く」ビヘイビアを割り当てる
  window.open(theURL,winName,features)
4.イベント/アクションの設定
  ここでは「onMouseOver」を選択

主要な記述Sample13T.htm

…………………………………………………………………………………………………………………

 「Dreamweaver 4 レッスン」の応用


 ここでは「ビヘイビア」を作動させるイベント(トリガ)として、例題の「onMouseOver」に「onClick」を追加しました。
 例えは、「onMouseOver」で概略説明文を表示して、「onClick」されたものだけ詳細説明文を表示させるなどの用途を想定しました。

 尚、「onClick」の場合だけ、「winName」にはsub1、sub2、sub3と個別の名前を設定しました。その名前を持つウィンドウがまだ存在しない場合は、その名前を持つ新規ウィンドウが開きます。

主要な記述Sample14T.htm

 
ジョイントロールオーバーの作成 (レッスン)  
 「Dreamweaver 4 レッスン」の例題


 ジョイントロールオーバーとは、マウスが別のイメージやオブジェクトの上をロールオーバー(移動)した時に、イメージの表示が変化します。

手順
1.ジョイントイメージの選択
2.ポインタイメージの選択
  「リンク」テキストボックスには「#」と入力
3.「ビヘイビア」パネルを開く
4.「スワップイメージ」ビヘイビアを追加
5.イベント/アクションの設定

主要な記述Sample15T.htm

…………………………………………………………………………………………………………………

 「Dreamweaver 4 レッスン」の応用


 ここではジョイントロールオーバーの例題と基本的にはほとんど変らないものですが、写真を題材にした応用例を掲載しました。

主要な記述Sample16T.htm

 
表データの挿入 (レッスン)  
 「Dreamweaver 4 レッスン」の例題


 最初からテーブルを作成し、各セルにデータを入力すのは、時間も掛かり結構大変な作業となります。そこでワードパッド、SimpleText、MicrosoftExcelなどで作成したデータを読み込めば、表データの作成は簡単にでき、作業性は高まります。

 ここでは用意された表データ(product_data.txt)を下記の手順で挿入、表を作成しています。

手順
1.データを挿入
 区切り:コロンを選択
2.テーブルの選択
3.テーブルのフォーマット
4.行と列のフォーマット
5.背景色を追加

……………………………………………………………………………………………………………………

 「Dreamweaver 4 レッスン」の応用


 ここではオリジナルデータをExcelで作成して、挿入可能なデータ形式に変換し、そのデータを挿入してみました。

 ここで作成・利用したデータを下記の通り紹介します・

・Excelで作成した元データ (Excel18.xls

・テキスト(タブ区切り)データ (Excel18.txt

・CSV(カンマ区切り)データ (Excel18.csv

 
フレームページの作成 (レッスン)  
 「Dreamweaver 4 レッスン」の例題


 フレームを使用すると、一つのWebページを複数の領域に分割し、各領域にWebページを個々にロードできます。 この例題では二つ領域を左右に分割しています。

手順
1.フレームセットの挿入
2.ボーダーの移動
3.フレームサイズの設定
4.フレームセットの保存
5.フレームプロパティの定義
6.フレームセットの保存
7.リンクとターゲットフレーム

主要な記述Sample19T.htm

……………………………………………………………………………………………………………………

 「Dreamweaver 4 レッスン」の応用


 ここでは、例題のフレームの右側をを上下に分割し、上部をメニューにし、さらに下部を上下に分割して、全部で4つの領域に分割しました。

 

主要な記述Sample20T.htm

 
カスケーディングスタイルシートの使用 (レッスン)  
 「Dreamweaver 4 レッスン」の例題


 カスケーディンングスタイルシート(CSS)を使用すると、一貫性のあるフォント、サイズ属性、カラーやその他のスタイルエレメントを複数のドキュメントに適用できます。
 ここでは、フォーマットなしのページを使用して、テキストとリンクのスタイルを作成し、適用しています。

手順
1.「CSSスタイル」パネルを開く
2.カスタムスタイルの作成
  specialNote を作成
3.ほかのカスタムスタイルの作成
  descriptionText を作成
4.アンカータグの定義
  A を作成

主要な記述Sample21T.htm

 

……………………………………………………………………………………………………………………

 「Dreamweaver 4 レッスン」の応用


 例題が日本語を入力すると文字化けするので、日本語に対応をしたこと。 そしてタイトルがFlash画像だったので、テキストに換え、カスタムスタイルを設定しました。

 

主要な記述Sample22T.htm

 
Flashオブジェクトの追加 (レッスン)  
 「Dreamweaver 4 レッスン」の例題


 Dreamweaverで「Flashテキスト」または「Flashボタン」を挿入すると、下記の記述が簡単に作成できます。

 Internet Explorer および Netscape Navigator 双方で確実に最善の結果を得るために、Dreamweaver では、object タグと embed タグの両方を使用して Flash ムービーが挿入されます。

手順
1.「Flashテキストの挿入」アイコンの選択
2.Flashテキストオブジェクトの再生
3.Flashテキストオブジェクトの編集
4.「Flashボタンの挿入」アイコンの選択
5.Flashボタンオブジェクトの再生
6.Flashボタンオブジェクトの編集

主要な記述Sample23T.htm

……………………………………………………………………………………………………………………

 「Dreamweaver 4 レッスン」の応用 (Flashテキストオブジェクト)


 「Flashテキストの挿入」するのに、Flash オブジェクトの [プロパティ] インスペクタには 、最も一般的に使われるプロパティが表示されます。

 例えば、[幅] および [高さ] や[スケール] の設定で、どのように表示されるかをテストしました。

[スケール]
ボタンオブジェクトまたはテキストオブジェクトを定義する object タグと embed タグの scale パラメータを設定します。このパラメータは、width と height によってムービーに定義されている範囲内でのムービーの表示方法を定義します。
[全体表示] :ムービーの縦横比が維持され、ゆがみが防止された状態で、指定した範囲にムービー全体が表示されます。また、境界線がムービーの両側に表示される場合があります。
[枠なし]:ムービーの一部が切り取られることを除いて、[全体表示] と同様です。
[フィット]:ムービー全体が指定した範囲に収まりますが、ムービーの縦横比が維持されないので、ゆがみが生じる場合があります。

……………………………………………………………………………………………………………………

 「Dreamweaver 4 レッスン」の応用 (Flashボタンオブジェクト)


 Dreamweaverで「Flashボタン」を挿入すると、[スタイル] リストに相当数の[サンプル]が表示され、その中からから必要なボタンスタイルを選択できます。
 そして[サンプル] フィールドに、選択したボタンの見本が表示されますので、この見本をクリックして、ブラウザでどのように機能するか確認できます。ただし、[サンプル] フィールドは、テキストまたはフォントに加えた変更を反映するために自動的に更新されます。これらの変更はデザインビューに表示されます。

 ここでは用意されている[サンプル]を一括表示いたしました。このサンプルを参照して利用すると便利です。

 

 


Design by unworldly man Teizo AMMA
Email amma@beach.ocn.ne.jp
URL http://www.t-amma.com/