画像のダウンロードを高速化
Web ページ上の画像が多すぎると、閲覧速度に影響します。 Dreamweaver では、プリロードされた画像を簡単にセットアップして画像のダウンロードを高速化し、サイトをできるだけ早くユーザーの前に表示できるようにします。
クリエイティブな思考 Dreamweaver MX 2004 ソフトウェアの新しいページを開き、ラベル パネルを開き、[動作] で [画像のプリロード] オプションを選択すると、画像のダウンロードが高速化されます。
操作手順
(1) 新規ファイルの作成 操作を図 36-1 に示します。
(2) ページを保存し、画像を挿入します。画像を挿入するときに相対パスの入力を求められないようにするには、まずページを「36.htm」として保存します。次に、図 36-2 に示すように、プリロードするイメージを挿入します。
図 36-2 画像の挿入
(3) 「画像のプリロード」機能を追加します。図 36-3 に示すように、Dreamweaver の動作パネルを使用して「イメージのプリロード」機能を追加します。
(4) プリロードする画像を選択すると、図 36-4 のような動作になります。
ヒント: サイトに大きな画像が複数ある場合は、[画像のプリロード] の上にある [+] アイコンをクリックして複数のプリロード画像を追加できます。具体的な操作は図 36-4 に示すものと同じです。
(5) ファイルを保存して操作は完了です。これにより、画像のダウンロード速度が高速化され、ユーザーが Web を閲覧する際に待ち時間が少なくなり、Web サイトのパフォーマンス向上に大きな意味を持ちます。
ランダムな広告画像の
閲覧者は、Web を閲覧しているときに、Web ページ内で動的に更新される広告画像が、静的で固定された画像よりも動的で魅力的であることに気づくことがあります。この例では、Web ページ内にランダムな広告画像を作成する方法が研究対象となります。
効果の説明 Web ページを閲覧すると、図 38-1 に示すように、Web ページのバナー領域に広告画像が表示されます。以降、図 38-2 に示すように、広告画像は 2 秒ごとに更新され、ランダムに広告画像が表示されます。
クリエイティブなアイデア Macromedia の拡張プラグイン Advance_Random_Images を使用すると、Web ページ内にランダムな広告画像を簡単に作成できます。
操作手順
(1) プラグインをインストールします。図 38-3 に示すように、メニュー バーの [コマンド] | [拡張機能管理] コマンドを使用して [Macromedia Extension Manager] ダイアログ ボックスを表示し、Advance_Random_Images 拡張機能をインストールします。
(2) コマンドを呼び出します。図 38-4 に示すように、この例のソース フォルダーにある Banner.htm ファイルを開き、広告を挿入する場所にカーソルを置き、[AdvancedRandomImages] コマンドを呼び出します。
(3) 画像を設定します。 図 38-5 に示すように、ポップアップ表示される [RandomImages] ダイアログ ボックスで画像変換プロパティを設定します。
(4) 写真を追加します。図38-6に示すように、最初の広告イメージを追加します。
ヒント: この例で使用されている画像は、この例の素材フォルダー内のバナー フォルダーに配置されています。
(5) 同じ方法で他の画像を追加し、追加が完了したら、図 38-7 に示すように [OK] ボタンをクリックして操作を確定します。
(6) ページファイルを保存してプレビューすると、ランダムな広告画像のエフェクトが作成されます。制作結果が正しいかどうかは、本作例の素材フォルダ内のエフェクトファイル「bannerok.htm」を参照してください。この時点で、この例は完了です。
この例で説明した技術は、さまざまな Web サイトで一般的に使用されており、たとえば、いくつかの国内の大手ポータル Web サイトでは、これらの変換広告がほぼすべてのページで見られ、読者はこれらのコンテンツを参照してさらに実践することができます。