髭仙人の漫ろ歩き
JavaScript
............................ unworldly man go for a ramble in the internet world ...
「JavaScrpt」を使用したWebサイト  
 「JavaScrpt」が記載されたサンプルを利用するには


 このページでは「JavaScrpt」を使用したWebサイトのサンプルを掲載しておりますが、それぞれ「メニューバー」を表示してありますから下記の方法で参照や利用をして下さい。

・「Webサイト」を丸ごと保存
 まず「メニューバー」の「ファイル」、「名前を付けて保存」でWebサイトを丸ごと保存することができます。この場合は「フレーム」を使用していれば、すべてのフレームも保存されますし、関連したデータも自動的に関連付けを保持したまま保存されます。

・「JavaScrpt」の記載内容を閲覧、参照
 まず「メニューバー」の「表示」、「ソース」でHTMLで記載された文章の中の「JavaScrpt」部分を参照することができます。
 また、HTML文章の中の「JavaScrpt」部分だけをコピーして、別のHTMLファイルに貼り付けることも出来ます。

 また、「Dreamweaver」の場合は、「編集」の「検索/置換」など編集に役立つ便利な機能もありますし、「デザインビュー表示」と「コードビュー表示」を使い分けたり、「ブラウザでプレビュー/デバック」も便利に使えます。

 

 
フレームと「JavaScript」のメニュー
 トップメニューを「JavaScript」で作成


 「JavaScript」の最も一般的な手法の「ロールオーバーイメージ」を使ったメニューの例を紹介します。

 ここではフレームを使用した例ですが、メニュー部を上部に設け、「ロールオーバーイメージ」を挿入しました。

・Index部の記載
<FRAMESET border=0 frameSpacing=0 rows=44,* frameBorder=no cols=*>
<FRAME name=top marginWidth=0 marginHeight=0 src="sample10/menu.htm" frameBorder=no noResize scrolling=no>
<FRAME name=main marginWidth=0 marginHeight=0 src="sample10/main.htm" frameBorder=no scrolling=no>
</FRAMESET>

 「index」部分は手書き、後は「Dreamweaver」で製作しましたので、比較的簡単に「JavaScript」を使用出来ます。
 そして「JavaScript」を使用したのは「Menu」の「ロールオーバーイメージ」部分のみで、「Dreamweaver」が自動的に記述します。

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

 サイドメニューを「JavaScript」で作成


 「JavaScript」の最も一般的な手法の「ロールオーバーイメージ」を使ったメニューの例を紹介します。

 ここではフレームを使用した例ですが、メニュー部を左部に設け、「ロールオーバーイメージ」を挿入しました。

・Index部の記載
<FRAMESET border=0 frameSpacing=0 rows=* cols=110,* frameBorder=no>
<FRAME name=top marginWidth=0 marginHeight=0 src="sample11/menu.htm" frameBorder=no noResize scrolling=no>
<FRAME name=main marginWidth=0 marginHeight=0 src="sample11/main.htm" frameBorder=no scrolling=no>
</FRAMESET>

 「index」部分は手書き、後は「Dreamweaver」で製作しましたので、比較的簡単に「JavaScript」を使用出来ます。
 そして「JavaScript」を使用したのは「Menu」の「ロールオーバーイメージ」部分のみで、「Dreamweaver」が自動的に記述します。

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

 ボトムメニューを「JavaScript」で作成


 「JavaScript」の最も一般的な手法の「ロールオーバーイメージ」を使ったメニューの例を紹介します。

 ここではフレームを使用した例ですが、メニュー部を左部に設け、「ロールオーバーイメージ」を挿入しました。

・Index部の記載
<FRAMESET border=0 frameSpacing=0 rows=*,44 frameBorder=no cols=*>
<FRAME name=main marginWidth=0 marginHeight=0 src="sample12/main.htm" frameBorder=no scrolling=no>
<FRAME name=bottom marginWidth=0 marginHeight=0 src="sample12/menu.htm" frameBorder=no noResize scrolling=no>
</FRAMESET>

 「index」部分は手書き、後は「Dreamweaver」で製作しましたので、比較的簡単に「JavaScript」を使用出来ます。
 そして「JavaScript」を使用したのは「Menu」の「ロールオーバーイメージ」部分のみで、「Dreamweaver」が自動的に記述します。

 

サブメニューの表示  
 メニュー項目の下にサブメニューを表示


 コンテンツが増えて、メニューを階層構造にした場合、最初は親メニューのみを表示して、必要な時に子メニューなどを表示したサンプルです。

 ここではメニュー部のサンプルに止め、各ページは代表のページだけをリンクしてあります。トップページの上部に親メニューが表示されているので、それぞれの項目にマウスを持って行くと、子メニューが表示されます。比較的多用されているテクニックです。

 テクニックも重要ですが、ショウウインドウの役目をするトップページですから、デザインが重要なポイントとなります。

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

 メニュー項目の上にサブメニューを表示


 コンテンツが増えて、メニューを階層構造にした場合、最初は親メニューのみを表示して、必要な時に子メニューなどを表示したサンプルです。

 ここではメニュー部のサンプルに止め、各ページは代表のページだけをリンクしてあります。トップページの上部に親メニューが表示されているので、それぞれの項目にマウスを持って行くと、子メニューが表示されます。この場合は子メニューの表示を斜めにするなどデザインを凝らしました。

 テクニックも重要ですが、ショウウインドウの役目をするトップページですから、デザインが重要なポイントとなります。

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

 サイドメニュー項目の下にサブメニューを表示


 コンテンツが増えて、メニューを階層構造にした場合、最初は親メニューのみを表示して、必要な時に子メニューなどを表示したサンプルです。

 ここではメニュー部のサンプルに止め、各ページは代表のページだけをリンクしてあります。トップページの左部に親メニューが表示されているので、それぞれの項目にマウスを持って行くと、子メニューが表示されます。フレームを使用するなど比較的多用されているテクニックです。

 テクニックも重要ですが、ショウウインドウの役目をするトップページですから、デザインが重要なポイントとなります。

 

 
デザイン性豊かなWebサイト  
 デザインとメニュー機能を融合したテクニック


 Webサイトに変化をもたせ楽しんで頂く手法の一つとして、トップページが重要となります。最近は「Flash」を使った楽しいサイトも多くなりました。ここでは幾何学的なデザインとメニュー機能を融合したテクニックの一例を紹介します。

 ここでは素晴らしいデザインの「WiLLshop.com」を紹介しますが、右のサンプルでは機能に関係ない部分を出来るだけ省略して、理解しやすいサンプルにしました。

 テクニック的には「Dreamweaver」の「ロールオーバーイメージの挿入」を利用しただけの比較的簡単なものです。デザインを最優先した素晴らしいトップページで、つい店の中に誘い込まれてしまう魅力があります。

デザイン性豊かなWebサイトを紹介

・「kaz soundwaves ・「zoomGALLERY
・「Viaduct ・「Square Pig In A Round Hole
・「ninjatune.net.home ・「Getty Images - G1WEB09
・「MAGNUM PHOTOS ・「++ You website ++
・「ICO ・「GAUCHO - HOME
・「RyanRyan Accessories ・「DEX WEB
・「sozaijiten.com ・「CLUB とむやん君
・「御木幽石さんを紹介します!!


 最近出会った素晴らしい、楽しい、面白いWebサイトを少し紹介いたします。これらはデザイン的に良質であるで毛でなく、何らかの形で「JavaScript」を使用したものです。

 

 
サブウインドウの利用  
 サブウインドウの大きさや表示位置の指定


 Webサイトで写真や画像の小さなサンプルを表示し、選択したものだけを実物大の大きさでサブウインドウに表示したサンプルを紹介します。

 ここでは本文に邪魔にならないように、右下に画像だけのスペースで表示するようにしました。その上表示スペース以外の不要な各種バースペースも非表示にしています。

・Head部の記載
<Script Language="JavaScript">
<!--
function openSubWin(url,name, wWidth,wHeight) {
sWidth = screen.availWidth;
sHeight = screen.availHeight;
x = sWidth - wWidth - 20;
y = sHeight - wHeight - 60;
newWin = window.open(url,name,"width="+wWidth+",height="+wHeight);
newWin.moveTo(x,y);
}
//-->
</Script>

・Body部の記載
<TD height=180 width=200 vAlign=top>
<div align="center">
<a href="#" onClick='openSubWin("sample16/yogo1L.jpg","Subwin1",500,380);return false'>
<IMG height=150 alt=GAUZINE src="sample16/yogo1s.jpg" width=200 border=0></A><br>
<b><font face="Arial, Helvetica, sans-serif" size="2">yogo1L.jpg</font></b><BR>
</div>
</TD>

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

 拡大表示とサブウインドウで実物大表示


 Webサイトで写真や画像の小さなサンプルを表示し、カーソルを重ねるとその画像が拡大表示されます。クリックするとサブウインドウに実物大の大きさで表示されます。

 ここでは実物大の大きさの画像はHTMLファイルに挿入したものにしました。これにより画像のタイトルや説明文等の併記が可能となります。

・Body部の記載
<TD vAlign=top align=middle width=100 height=110>
<DIV align=center><A
onmouseover="MM_swapImage('high','','sample17/yogo1L.jpg',1)" target="_blank"
onmouseout=MM_swapImgRestore() href="sample17/yogo1.htm"><IMG
height=75 src="sample17/yogo1s.jpg" width=100 border=0><BR>
</A><FONT face="Arial, Helvetica, sans-serif"
size=2><B>yogo1.jpg</B></FONT></DIV>
</TD>

 

 

 


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