上記のナビゲーションを上部に配置したい場合は、ul.nav をページ上部に移動してスタイル付けを再作成する。メニューが増えてきたら階層化して追加します。

画像の表示のサンプル例

 Webページでは、画像の利用が欠かせません。代表的なのは写真、イラスト、ロゴなどがあります。
 画像ファイルは <img> タグで、外部ファイルを読み込んで利用します。
(例)として<img src="img/photo1.jpg" alt="">

基本的な写真の表示

1.テーブルを利用しての写真の表示

 写真はただ表示するだけでは、見る人にとって必ずしも写真が表現している内容を理解してもらうことは出来ません。 このため写真と合わせてその説明を掲載する必要があります。そこで、テーブル設定を利用して、 写真とその説明文を掲載します。

参加者全員 食事の風景 抽選会
平成23年10月16日に開催された緑区民まつり 「緑と森のフェスティバル 2011」に参加したMICSの会員の方々です。 緑区民まつりに参加したMICSの「大和なでしこ」の方々です。非常に明るく、元気でPCにも詳しいモダンなご婦人方です。 緑区民まつりではMICSは大抽選会を開催し、Tシャツ、絵はがき、名刺作り(無償提供)を実施、500名の方々が行列を作りました。

2.スライドショーによる写真の表示

  1. 自動のスライドショー
  2. 番号選択によるスライドショー

3.その他の写真やイラストの表現

小さな写真をクリックして大きな写真を表示する関数を利用

JavaScriptを使った表示例、小さくした画像をクリックすると拡大表示できます。
予め、640X480pxに加工したサイズの画像を準備して、小さく表示:96x63のサイズで一覧で表示します。 マウスでクリックすると拡大された写真が切り替わります。

鹿児島仙巌園 特攻隊三角兵舎 知覧武家屋敷 枕崎お魚センター 枕壽官窯 霧島神社龍馬 霧島白土焼

上記の写真を名前で拡大写真を表示する方式です。上記は、写真の変更が容易です。

画像のロールオーバー

マウスを重ねると別の写真に変わります。マウスが外れると元の写真に戻ります。

ここをクリック下さい、同じものですが。

恩田川の桜 弘明寺の桜

ツールをたかって写真をスライドショーに変換する方式

単純にFlashを使っての写真のスライドショーへの変換

Windows Liveムビーメーカーを使用しての写真をスライドショーへの変換

パワーポイントを使用しての写真をスライドショーを作成し動画への変換

画像を同様に切り替える:メニューイメージ

但し、メニューのリンク先は設定していません

inserted by FC2 system