ページに動きを付ける

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

JavaScriptの記述

IEで画面に動きを持たせるにはJavaScriptを利用します、以下の記述を追加します。

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

HTMLヘッダー部分にスタイルを記述

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

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

HTMLの修正

修正には以下の手順で行います。
  1. 3枚の画像データ(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. 合計3個の画像を削除します。
デザインタブで画像(web4logo.png)を貼り付けます
pic_ins
  1. 画像(web4logo.png)を貼り付けます。
  2. 貼り付けた画像を右クリック、表示されたメニューで[画像のプロパティ]を選択します。
  3. ’画像のプロパティ’の外観タブ、折り返しのスタイルの「左」をクリック
  4. OKを押下します。
画像(web4logo.png)の右にセクション(div#slideshow)を作成し画像を貼り付けます。
  1. セクション(div#slideshow)を作成(セクションの定義参照)
  2. コンテナー(div#slideshow)に画像(haru.png)をに貼り付けます。
  3. 最後に画像(haru.png)の右に画像(design4logo .png)を貼り付けます。
  4. コードタブでコードの整理を行います。

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

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

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

dhtml1