ビデオ: Dreamweaver CS5使い方講座(ドリームウィーバー)ロールオーバーイメージ/動学 2024
Adobe Creative Suite 5の空白ページにネイティブPhotoshop(PSD)ファイルとFireworks(PNG) (アドビCS5)Dreamweaver画像を配置すると、Dreamweaverの[ファイル]パネルに影響します。
-
挿入→イメージを選択します。
[イメージソースの選択]ダイアログボックスが表示されます。
または、[挿入]パネルの[共通]タブをクリックし、[イメージの挿入]ボタンをクリックします。
-
画像の場所に移動し、「選択」(Mac)または「OK」(Windows)をクリックします。
<! - 1 - >ネイティブPhotoshop(PSD)またはFireworks(PNG)ファイルを選択すると、イメージプレビューダイアログボックスが表示され、イメージをDreamweaverで直接最適化できます。
GIF、JPG、PNGなどのWeb対応画像を選択し、画像がサイトフォルダ外にある場合、警告が表示されます。 Dreamweaverはイメージがルートフォルダの外にあることを警告します。これは、ページをWebサーバーにコピーするときに問題が発生します。
<! - 2 - >ファイルをサイトのルートディレクトリにコピーするには、[はい]をクリックします。そこに新しい名前を付けるか、[保存]をクリックして同じ名前を保持し、画像ファイルをサイトフォルダに複製します。
[イメージタグアクセシビリティ属性]ダイアログボックスが表示されます。
すべての画像にAlt(代替)テキスト(画像がダウンロードされる前に表示されるテキスト)またはビューアーが画像を表示するオプションをオフにしている必要があります。
<! - 3 - > -
[代替テキスト]テキストボックスにイメージの適切な説明を追加します。
画像がロゴの場合、説明には会社名がAltテキストとして含まれている必要があります。写真やイラストの場合は、数語で画像を記述してください。アクセシビリティの観点から、altテキストは、ユーザに画像コンテンツを識別する際にスクリーンリーダ(視覚障害者が使用するものなど)を助ける。さらに、Altテキストは、検索エンジンにサイトに含まれる画像コンテンツのインデックスを作成するための貴重なツールです。
OKをクリックします。
-
画像がページとファイルパネルに追加されます。
画像を編集するには、ファイルパネルで画像をダブルクリックします。また、プロパティインスペクタを使用して、ディメンションやファイルサイズなど、イメージの詳細を表示することもできます。境界線、ハイパーリンク、垂直および水平パディングを含むイメージプロパティを変更することもできます。
プロパティインスペクタを使用して、イメージに関する情報を表示し、イメージプロパティを変更します。
複数のページがリンクされた大きなサイトを作成すると、[ファイル]パネルの表示を変更することができます。サイトがある場所のドロップダウンリスト([ファイル]パネルの左上)をクリックすると、最近使用したフォルダやその他のサイトを見つけることができます。右側の[表示]ドロップダウンリストをクリックすると、[ファイル]パネルの外観を変更できます。ファイルパネルからファイルをダブルクリックして開きます。