Dreamweaverであなたのウェブサイトに画像を追加する方法 - ダミー

ビデオ: 3分で分かる！WEBサイトのレイアウトの決め方 2025

Webページに画像を追加することは、Dreamweaverで処理が非常に簡単であるため、 Webグラフィックスの課題は、それらをページに追加するのではなく、視聴者のブラウザにすばやく読み込む見栄えのよい画像を作成することです。

画像を作成、変換、編集、最適化するには、Photoshop、Photoshop Elements、Fireworksなどの別のプログラムが必要です。画像を最適化するとファイルサイズが小さくなり、画像をより高速にダウンロードできます。 Dreamweaverにはいくつかの基本的な画像編集ツールが用意されていますが、主にDreamweaverを使用して画像をページに挿入して配置します。

Dreamweaverでは、Webページに画像を簡単に配置できます。複数の方法で提供できます。

[共通挿入]パネルの[画像]アイコンをクリックし、[画像の挿入]ダイアログボックスを使用して画像を選択します。

ファイルパネルで、イメージ名をクリックして、イメージを表示するページにドラッグします。
[挿入]メニューを使用します。
ウェブに最適化されたJPEG、GIF、またはPNG画像がない場合は、すでに最適化されたフリー画像をダウンロードできます。

<！挿入メニューを使用してWebページに画像を配置するには、次の手順に従います。

既存のページを開くか、新しいページを作成して保存します。

画像をページに挿入する場所にカーソルを置きます。

新しい空白ファイルの左上にイメージを挿入し、イメージをWebページのタグや要素に挿入できますが、追加のHTMLを使用せずにイメージをページの中央に配置することはできませんタグまたはCSSフォーマットを使用して配置します。
- >

挿入→イメージ→イメージを選択します。
[イメージソースの選択]ダイアログボックスが表示されます。
挿入したい画像を参照して探します。

お使いのコンピュータシステムによっては、画像をさまざまな方法でプレビューできます。次の3つの一般的なオプションがあります。
Windows XPを搭載したPCで、

[Look In]フィールドの右側にある[View]メニューのドロップダウンリストから[Thumbnails]を選択すると、開いているフォルダ内のすべての画像のサムネイルを表示できます。また、ダイアログボックスの右端にある選択した画像を1つプレビューすることもできます。
- Windows VistaまたはWindows 7 を搭載したPCの場合は、ルックインの右側にある[表示]メニューのドロップダウンリストからアイコンオプション（スモールアイコン、ミディアムアイコン、ラージアイコン、またはエクストララージアイコン）を選択します開いているフォルダ内のすべての画像のサムネイルバージョンを表示します。選択した画像のプレビューをダイアログボックスの右端に表示することもできます。
- Macでは、 ダイアログボックスの左上から「列として表示」オプションを選択します。ダイアログボックスの右端にある選択した画像の1つのプレビューを表示できます。
- クレジット：Casey Stollによる写真 イメージを挿入するには、イメージ名をダブルクリックするか、一度クリックしてからOKをクリックします。
  
  イメージをページに挿入し、そのイメージがローカルサイトフォルダに保存されていない場合、警告ダイアログボックスが表示され、ローカルサイトフォルダにイメージをコピーするように指示されます。多くのデザイナーは、ローカルサイトフォルダー内に
images

というサブフォルダーを作成し、サイト内のすべてのイメージを保存しますが、複数のサブフォルダーでイメージを整理できます。画像プロパティを表示および編集するには、Webページ上の画像を選択します。画像オプションは、画像が選択されたときにページの下部にあるプロパティインスペクタで自動的に表示されます。
クレジット：Casey Stollによる写真

画像ファイルをページに挿入すると、画像のコピーを実際にページに追加することはありません。イメージへの参照を作成します。基礎となるコードは、あるページから別のページへのリンクのコードによく似ています。

画像参照とリンクの両方に、ファイル名とページからそのファイルへのパスが含まれます。基本的に、ページを表示するときに画像を見つけるためのWebブラウザの指示を作成しています。