第11回ホームページ勉強会

第71日目2023年08月24日





　通常のQponWaveでは、何枚かの表示をする場合はボタンなどで次へと進めていましたが、今回はQponLakeに続いてスライドショー風に自動切換えを実施します。
事前準備：
　HP勉強会12日目（2021年03月11日)に勉強した、QponWave(画面の池などの水面に波打つ水面を作る)を5作品程作っておいて下さい。本体だけでリンクボタンなどは要りません。

　戻るボタンやBGM音源（mp3)も準備しておいて下さい。
作成結果：
　下図をクリックするとスライドショーになります。
　
詳細説明

１．フレーム･ページの設定

ホームページ勉強会のホームページの設定
　ホームページ勉強会の最初のホームページは単純な1面のホームページで､次にフレームページを採用した｡左図の様にupperは①top.htmlが画面の上部に配置され､その下のleftには②menu.htmlが配置され､rightには③main.htmlが設けられたページでした。

　次にleftの②menu.htmlにiframeを採用し、メニューを見やすくしました。

フレームページの解り易い資料は第8回HP勉強会の資料をここからご覧下さい。

　更に、殆どのPCの画面が16:9の横長であることから、上図のAで固定されたupperがあると表示画面がBが狭くなっていることから、③main.htmlの上に①top.htmlの内容を張り付ける事により、③main.html全体をスクロールできるようにし、下図のように②『iframe.html』、③『main.html』の構成としました。


　このホームページ勉強会のホームページの『index.html』の設定は以下の様にしていました。
行  　設　　　　定
1
2
3
4
5
6
7
8
9
10
11
12
13
14		 <html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<frameset cols="220,*">
<frame name="left" src="iframe.html">
<frame name="right" src="main.html">
<noframes>
<body><p>このページを表示するには、フレームをサポートしているブラウザーが必要です。</p></body>
</noframes>
</frameset>
</html>

　このフレーム･ページの設定は、cols="220,*"で左から220pxの範囲でiframe.htmlを表示し、その右側にmain.htmlを表示させる設定です。
Ⅱ．スライドショーの設定

　QWaveをスライドショー風に切り替えますが、タイトル、BGM設定や戻るボタンは切り替えないので、下図の様に上下2つのファイルに分割します。



１．フォルダーの作成
　今回のQWaveスライドショー専用に新しくフォルダー(例えば『QWave』)を作成し、その中に写真専用のフォルダー(例えば『img』）を作成し　写真はその中に入れます。

２．『main.html』でフレームページを設定
　トップページでmain.htmlが表示されている場所に、上側にtop.htmlを表示し、その下にqwave1.htmlを表示させます。

　この設定ファイル名をmain.htmlとし、フォルダー『QWave』内にtop.htmlやqwave1.html～・・・等と一緒に保存します。

　フレームページを設定するmain.htmlは、以下の様になります。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 		 <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<TITLE>波のスライドショー</TITLE>
</head>
<frameset rows="65,*" border="0">
<frame name="top" src="top.html" scrolling="no">
<frame name="right" src="qwave1.html" scrolling="yes">
<noframes>
<body background="blue7.jpg">
<P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</body>
</noframes>
</frameset>
</html>

３．『top.html』にコメント、BGM、戻るボタンを設定します。
　下図の様な『top.html』を作って下さい
　2行1列で、1行目のコメントは左詰めで、2行目のBGMと戻るボタンは右詰めです。
　行の幅は写真と同じで600pxにします。1行目と2行目の高さは見やすいように調整して下さい。
　

　BGMの設定方法はここから改訂版をご覧下さい。

４．QWave(波打つ水面を作る)を加工
　5組ほど準備して頂いた、HP勉強会12日目（2021年03月11日)に勉強した、QponWaveのファイルは、
　1枚目のファイル名は『qwave1.html』とし2枚目以降は『qwave2.html～qwave3.html･･･』とします。

　HPビルダーのページ編集で下記表示の場合は、からまでを選択し、
　削除して下さい。
　

　また、3行1列の表に挿入した下記表示の場合は、1行目を右クリックし｢行｣→｢行の削除｣で削除し、
　3行目も同様に削除します。


　</head>の直前に、下記1行を追加します。
　<meta http-equiv="Refresh" content="5;URL=qwave2.html">

　『page1.html』を編集している場合『qwave2.html』は5秒後に表示するファイルです。
　常に次に表示するファイルを指定し､最後のファイルでは『qwave1.html』を指定し､ループ表示にします｡

　『qwave1.html』の設定例(表を使用しない場合)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23		 <html>
<head>
<meta charset="Shift_JIS">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>qwave</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Refresh" content="5;URL=qwave2.html">
</head>
<body>
<script>
ur="img/"; //ファイルのある場所
file="01.jpg,100";//写真,縮尺率％（省略時=100）
mask="01.gif,0";　//マスク,透明色：0=透明処理済み/1=白を透明にする
waves = 20; //波の数(+-で流れ方向が変わる)
speed = 0.2; //波の速さ(小さいと準備時間がかかる）
scale = 0.3; //波の振幅
lake = "0,100"; //波の範囲（縦位置で上から　開始％,終了％）
　　　　　　　　　　//　　　（範囲を狭めると準備時間が短縮できる）
</script>
<script src="qwave.js" charset="shift_jis">
</script>
</body>
</html>

以上の操作でQponWaveの画面がスライドショーの様な表示になります。

 
2023-08-16　資料改訂：三宅　節雄