ページに動きを付ける

ページに動きを持たせると見ていても楽しくなります、ここでは画面が順次変わるようにします。

JavaScriptの記述

ＩＥで画面に動きを持たせるにはＪａｖａＳｃｒｉｐｔを利用します、以下の記述を追加します。

script
操作
  1. 編集タブをコードにします。
  2. </style>タグの最後にカーソルを置き改行します。
  3. '<'（半角）を入力すると’ｉｎｔｅｌｌｉｓｅｎｓｅ’が機能します。
  4. 右図表示の通り入力します。

ＨＴＭＬヘッダー部分にスタイルを記述

複数の画像をz-indexを使って配置可能にします。

jquery
操作
ヘッダー部のスタイルシートの最後に右のように記述します。

HTMLの修正

修正には以下の手順で行います。
  1. ３枚の画像データ（web4logo.png, haru.png, design4logo .png）を削除します。
  2. コードタブで空白を削除します。
  3. デザインタブで画像（web4logo.png）を貼り付けます
  4. 画像（web4logo.png）の右にセクション（div#slideshow）を作成し順次画像を貼り付けます。
  5. 追加の画像コードを追記します。
画像データ（web4logo.png, haru.png, design4logo .png）を削除します。
pic_del
  1. 削除する画像をクリックします。（右図）
  2. メニュー[編集]－[削除]を押下します。
  3. 合計３個の画像を削除します。
デザインタブで画像（web4logo.png）を貼り付けます
pic_ins
  1. 画像（web4logo.png）を貼り付けます。
  2. 貼り付けた画像を右クリック、表示されたメニューで[画像のプロパティ]を選択します。
  3. ’画像のプロパティ’の外観タブ、折り返しのスタイルの「左」をクリック
  4. ＯＫを押下します。
画像（web4logo.png）の右にセクション（div#slideshow）を作成し画像を貼り付けます。
  1. セクション（div#slideshow）を作成（セクションの定義参照）
  2. コンテナー（div#slideshow）に画像（haru.png）をに貼り付けます。
  3. 最後に画像（haru.png）の右に画像（design4logo .png）を貼り付けます。
  4. コードタブでコードの整理を行います。

　　以下デザインタブ及びコードは次の通りです。

dhtml
残りの画像をコードタブで追加します

　　以下のように残りの画像をコードタブで追記します。

dhtml1