 |
  平成２２年０２月度 |
 |
|
平成２２年０２月度 |
|
平成２２年０２月例会日時： 平成２２年０２月２７日（土） 午後１：００～４：００
（２） 今月の勉強会 「サイト」メニュー → 「サイト新規作成」 → ＜サイト名入力 ＋ 次へ＞ → 「新規トップ頁作成 ＋ 次へ」→ ＜ファイル名をindex.htlmに ＋ 保存場所指定 ＋ 詳細設定画像フォルダを指定＞ → 「完了」 → 「白紙ページ」 「フレーム・ページ」 → （フレーム作成ウィザード）＜分割方法指定 ＋ 境界線有無指定 ＋ 次へ＞ → ＜2つのフレーム名と最初にロードされるファイル 名を指定＞ → 「完了」 （２）サイト内の途中の頁にフレームを設定する場合 「ファイル」メニュー → 「フレーム設定ページの新規作成」 → （フレーム作成 ウィザード）＜分割方法指定 ＋ 境界線有無指定 ＋ 次へ＞ → ＜2つのフレーム名と最初にロードされるファイル名を指定＞ → 「完了」 ＜2つのフレームの境界位置を微調整＞ → 「フレーム」メニュー → 「フレーム設定ページを名前を付けて保存」 → ＜フレーム設定ページを名前 ＋ 保存場所 ＋ 「保存」＞ 上の手順で重要な箇所は赤字で示しましたので注意して下さい。 また、フレーム設定ページが作成された後のページのタイトル・バーに注目！！ ホームページ・ビルダーのタイトル・バーには： 「最初にロードされるファイル名ーとそのタイトル名／フレーム設定ページのファイル 名とそのタイトル名」のように”/”で区切って２段階に表示されます。 最初にロードされるファイル名は分割したフレーム毎に前段で表示されます。 （B） ＪａvａＳｃｒｉｐｔの復習 （１） Headの中のＦｕｎｃｔｉｏｎとしてのJavaScriptの書かれ方とそのＦｕｎｃｔｉｏｎへリンクの仕方 (a) HTMLのハイパー・リンクを利用してHeadの中に規定してあるFunction（関数）にリンクする。 例： Headの中 <script language="JavaScript"> <!-- function="XYZ()" ．．．．．． //--> </script> Bodyの中 <a href="JavaScript: XYZ()">ここをクリック</a> (b) HTMLのimageタグを利用してHeadの中に規定してあるFunctionにリンクする。 例： Head中 <script language="JavaScript"> <!-- function=” XYZ(a,b,c)” ．．．．．． //--> </script>
（２）JavaScriptの文法の復習 □ Object： a. ビルトインObject ＝ 予め規定されているもの 例；window, document, array, function 等 b. 一般のObject ＝ ユーザー自身で宣言しなければなりません。 □ Method： Objectへの操作命令で、次のように書きます： オブジェクト名．メソッド名（パラメータ） □ Property： Objectの情報を参照したり設定し、次のように書きます： オブジェクト名．プロパティ名 （注）Property名の後に（）を書きません □ 変数： 数値や文字列、真偽値、オブジェクトなどを代入して、計算や表示、オブジェクトの指定などを行う器のようなもの。 例： ｎ=10; // nに10を代入 □ 配列（Ａｒｒａｙ）： 「Array」オブジェクトを使い、一つのオブジェクトで複数の変数を包含し表現できる大変便利なものです。 （３）JavaＳｃｒｉｐｔのサンプルJavaScript入門０１a (３つの画像の切換えにした場合の回答） Headの中： <SCRIPT type="text/JavaScript"> <!-- pic=new Array("image1.jpg","image2.jpg","image3.jpg"); num =1; function Switch() { document.varIMG.src=pic[num] if (num==1) {num=2;} else if (num=2) { num=0;} else if (num=0) { num=1;} //--> </SCRIPT> Bodyの中： <P><A href="JavaScript:Switch()"><img src="image1.jpg" name="varIMG"></A></P>
（１） 4つのメニュー頁の作成 fldr_framesフォルダの中に「page_menu_01.html」、「page_menu_02.html」、「page_menu_03.html」、 「page_menu_04.html」という４種類のメニュー頁を用意します。 ４つのメニュー・ファイルはクリックする表のセルの背景色をそれぞれ変えておきます。 即ち、「page_menu_01.html」では最初のセルの色をピンクに、「page_menu_02.html」では２番目のセルの 色をピンクにする等々・・・。 （２） ４つのコンテンツ頁の作成 fldr_framesフォルダの中に「page_cont_01.html」、「page_cont_02.html」、「page_cont_03.html」、 「page_cont_04.html」という４種類のメイン・フレームに入れ替わり入れるべきコンテンツ頁を用意します。 それぞれのコンテンツ頁には別々の写真（６４０Ｘ４８０pxl程度のサイズ）を貼り付けておき、それぞれが ロードされた特に直ぐ識別できるようにしておく。
これから作成するフレーム設定頁はサイトのトップ頁ではないので、復習の項の（２）の手順に従って 次の手順に従って作成する。 「ファイル」メニュー → 「フレーム設定ページの新規作成」 → （フレーム作成ウィザード）＜分割方法指定 ＋ 境界線有無指定 ＋ 次へ＞ → ＜2つのフレーム名と最初にロードされるファイル名を指定＞ フレーム名： top → frm_menu このフレームに最初にロードされるファイル名 → page_menu_01.html フレーム名： bottom → frm_main このフレームに最初にロードされるファイル名 → page_cont_02.html → 「完了」 → ＜2つのフレームの境界を微調整＞ → 「フレーム」メニュー → 「フレーム設定ページを名前を付けて保存 」 → ＜フレーム設定ページを名前＝page_frame.html ＋ 保存場所= fldr_framesフォルダの中＞ → 「保存」 【注】この手順で、上の（１）と（２）のステップで各フレームにロードすべきメニュー頁とコンテンツ頁を予め 作成してfldr_framesフォルダの中に保存しておくと、スムーズに操作が出来ます。 さもないと、ホームページ・ビルダーが一見理解し難いメッセージを出して混乱します。 ４つのメニュー頁の中のHeadの中に以下のコードを貼り付ける： <SCRIPT language="JavaScript"> // 複数のフレームに同時にリンクする<!-- // Link1で切り替えるフレームとページ function link1() { parent.frm_menu.location.href='page_menu_01.html';parent.frm_main.location.href='page_cont_01.html'; } // Link2で切り替えるフレームとページ function link2() { parent.frm_menu.location.href='page_menu_02.html'; parent.frm_main.location.href='page_cont_02.html'; } //Link3で切り替えるレームとページ function link3() { parent.frm_menu.location.href='page_menu_03.html'; parent.frm_main.location.href='page_cont_03.html'; } // Link4で切り替えるフレームとページ function link4() { parent.frm_menu.location.href='page_menu_04.html'; parent.frm_main.location.href='page_cont_04.html'; } //--> </SCRIPT> ４つのメニュー頁の中のBodyの中に以下のコードを貼り付ける： <CENTER> <TABLE border="0" width="400" bgcolor="#ffffff" cellspacing="4"> <TBODY> <TR> <TD bgcolor="#ff00ff"><A href="JavaScript: link1();"><B>F_Page_01</B></A></TD> <TD bgcolor="#ffff00"><A href="JavaScript: link2();"><B>F_Page_02</B></A></TD> <TD bgcolor="#ffff00"><A href="JavaScript: link3();"><B>F_Page_03</B></A></TD> <TD bgcolor="#ffff00"><A href="JavaScript: link4();"><B>F_Page_04</B></A></TD> </TR> </TBODY> </TABLE> </CENTER>
１．作成したフレーム設定頁page_frame.htmlを開いて、｢プレビュー｣モードで表示してみる。 上端のメニュー・フレームにメニュー０１頁「page_menu_01.html」が、下端のメイン・フレームに コンテンツ０１頁「page_cont_01.html」が表示されていれば、フレーム設定は巧くなされています。 ２．｢プレビュー｣モードのままで、メニューの４つのセル（Ｆ－Ｐａｇｅ－１，Ｆ－Ｐａｇｅ－２、・・・等）を交互に クリックしてみる。 その度にそれぞれの対応するメニュー頁とコンテンツ頁が現れれば、ＪａｖａＳｃｒｉｐｔ の埋め込みは成功です。 【注】このテストでエラー・メッセージ、 例えば：”「parent.frm_menu.location」はNullまたはObjectではありません” されるファイル名等がＪａｖａＳｃｒｉｐｔで記述したＯｂｊｅｃｔ名と合致していないことを意味しますので、 フレーム設定を直すか、ＪａｖａＳｃｒｉｐｔのコードを直してから、再度テストして下さい。 上のエラー・メッセージの場合は、フレーム設定で指定したメニュー・フレームの名前が「frm_menu」 になっていないと思われますので、フレーム設定をやり直す必要があります。 このような場合、｢フレーム｣メニューから｢フレーム設定ページの属性｣などを表示してみると、 自分がとのような設定をしたかチェック出来ます。 ＪａｖａＳｃｒｉｐｔのコーッディングは覚える必要はありませんが、その仕組み（メカニズム）は理解して 下さい。
（Ｄ） 来月からの勉強のテーマの予定 |
