ホームページビルダーを学ぼう＞JAVAを使ってみる

ホームページビルダー14・13・12・11　使い方解説

スクリプトの挿入には、ビルダーの機能を使う場合と、配布サイトからコピーする方法があります。自分の気に入ったスクリプトがビルダー内に無い場合は、配布から探すしかありません。ここでは配布サイトからのスクリプトの挿入の1例を先に紹介します。　

JAVAスクリプト

１	配布サイトより使用したいスクリプトのソースをメモ帳などにコピーをする。
２	サイトの指示に従い記述（スクリプトの挿入）場所を確認。・設定だけのスクリプト（リンクに触れると下線を出す等）の場合は、<HEAD></HEAD>の中に記述しますので、もし何も指示がなければそうしてください。・ページ上にスクリプトを形として表示させるもの（時計など）の場合は<BODY></BODY>の中に記述します。
３	ページ編集画面でHTMLソースを開く。するとたいてい以下のようになっていますので、下記を参考に貼り付けてください。<BODY>内のスクリプトがある場所には、編集画面の時だけ{S}のマークが付きます。

通常は<HEAD>と</HEAD>の間にスクリプトの記述をします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
<SCRIPT Language='JavaScript'>
・・・・・・・・・設定だけのスクリプトの場合この位置・・・・・・・
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT Language='JavaScript'>
・・・・・ページ上に表すスクリプトの場合この位置・・・・・・・
</SCRIPT>
</BODY>

JavaScript の記述　ソースが２つ（以上）の場合
１	スクリプトによっては２つのソースを必要とするもの（下にある日付付きの時計など）があります。サイトの指示に従い位置を確認してください。
２	スクリプトを挿入します。１つは<HEAD></HEAD>の中にもう一つは<BODY></BODY>の中に記述します。 <BODY>間に記述したスクリプトは、そのままブラウザに反映されますので、位置が問題となります。その場合、表を作成しその中に記述すると好きな所に表示できます。表の中に記述する方法は下記で確認してください。

JavaScript の記述　　表中に記述する
1	時計を表記したい場所に表を作成する。
2	表の中にカーソルを当て、入力状態にする。
3	HTMLソースを開く。何故ソースを開くの？=編集画面で、ビルダーの挿入機能を使わずに直接表中に貼り付けると↓風になり、ただの文字としか認識されませんので使えません。
×	<SCRIPT language="JavaScript"><!--/　ここはプログラムが記述されます　/ --></SCRIPT>
4	ソースを開くと、<TD></TD>このように点滅している場所を確認し、コピーしたソースを貼り付けます。
5	プレビューウィンドウで見ると、表の中に表示したいスクリプトが現れているはずです。
6	フォームが挿入され表の高さが編集画面とプレビューでは違って見えることがあります。レイアウト上小さくしたい場合は、表の中を右クリックし、メニューから「スタイルの変更」→次のメニューの上の「タグ」に「FORM」となっているのを確認し、2つある編集ボタンのうち下の編集(4)のボタンを押します。
7	次のメニューの「レイアウト」をクリック→マージン(A)の値を右側のプルダウンメニューから「ピクセルかcm」を選択し値から「0」を選択してください。OK→OKで終了です。変更後のようになります。
8	出来上がった表に色を付ける場合は、表の作成を参照してください。
注意	1行表の場合、表作成編を実行しても「セル」という表示が現れない場合があります。上2つのように2行であれば上行からドラッグして「セル」を呼び出せますが、1行ではできません。その場合は、7で選択した「レイアウト」の代わりに「カラーと背景」を選び「背景色」で色を変更してください。ちなみに「前景色」は文字色となります。

変更前

変更後

罫線の幅:：1　セル内の余白：1　枠線の表示：なし　表の色：グリーン　セルの色（背景色）：グレー

JavaScript の記述　　ビルダーを使う・・この方が簡単です。
1	スクリプトを用意する。（配布サイト）
2	ソースをコピーする。この際コピーをする範囲は今までと違います。赤い文字の部分です。ビルダー機能で挿入する場合は既に青文字は用意されていますので、 <!--と//-->の間の赤い部分をコピーしましょう。 <SCRIPT LANGUAGE="JavaScript"> <!-- var mes3=""; var i=0; setTimeout("msg3()",2000); } //--> </SCRIPT>
<HEAD>間にスクリプトを挿入する場合。
3	メニューバーの「編集」→「属性の変更」→一番上のメニューから「ページのプロパティー」を選択。
4	「その他」→「スクリプトの編集」をクリック。編集画面右下に下記の部分がありますので、赤字の部分を消去し、コピーしておいたソースを貼り付けましょう。右上の窓を確認してください。<HEAD>の下、<BODY>の上に//左の・・・があるはずです。
5	<!-- // 左のウィンドウからアイテムをドラッグして // ここにドロップするか、マウスの右ボタン // でポップアップメニューを出して「スクリプト // に挿入」を選択して、現在のカーソル位置に // コードを挿入します。 //-->
<BODY>間にスクリプトを挿入する場合。
1	スクリプトを挿入した場所にカーソルを当てます。
2	メニューバーの「挿入」→一番下の「その他」→上部の「Sclipt]をクリック。
3	上記5と同じ画面ですが、上の窓を確認してください。今度は<HEAD>が無く、<BODY>の下に//左の・・・があるはずです。後は先と同じ作業です。
	お疲れ様でした。

▲ページのTOP