ビデオ: Dreamweaver CC入門:店内写真を挿入する|lynda.com 日本版 2024
Dreamweaverのミニマリスト画像編集ツールを使用すると、
Dreamweaverでイメージを作成しないでください。AdobeではIllustrator(アートワーク、グラフィックテキスト、ページ背景イメージ、ナビゲーションなど)を提供しています。アイコンなど)とPhotoshop(Web用の写真を準備するためのもの)などのツールがありますが、一般的なルールとして、それらのプログラムでWeb用の画像を準備してください。
<! - 1 - >イメージを挿入するには、デザインビュー(またはウィンドウのデザイン側にカーソルを置いてスプリットビュー)で作業していることを確認します。マシンから挿入するかコピーを使用するか、どちらの場合でも、デザインビューにする必要があります(ビュー→デザインを選択するか、スプリットビューの場合は選択します) e表示→コードとデザイン)を使用して、画像を貼り付けるか埋め込むかを確認します。
画像を埋め込んでいるHTMLページに何らかのテキストが表示される可能性があります。だから、最初のステップは、画像を表示する場所を特定することです。
<! - 2 - >印刷デザインとは異なり、Webページの画像は特定の場所に配置されません。それはデザイナーナットを動かす。
Dreamweaverの開いているHTML Webページに画像ファイルを挿入するには、次の手順に従います。
-
画像を挿入する場所の文書ウィンドウをクリックします。
このステップでは、画像を挿入するHTMLコードの場所を指定します。ここでも、画像がどこにどのように表示されるかは、CSSで定義されます。
-
挿入→イメージを選択します。
-
画像ソースの選択ダイアログボックスが表示されたら、コンピュータ上の任意のファイルに移動して選択します。
選択したイメージがサイトフォルダ外にある場合、役立つダイアログボックスが表示され、イメージのコピーをDreamweaverサイトのルートフォルダに保存するよう指示されます。
-
はいをクリックします。
-
[ファイルを別の場所にコピー]ダイアログボックスで[保存]をクリックします。
-
-
アクセシビリティ属性を定義します。
デフォルトでは、画像がページに最後に挿入される前に、[Dreamweaver Image Tag Accessibility Attributes]ダイアログボックスが表示されます。
[代替テキスト]フィールドは、このダイアログボックスの2つのオプションの中で最も重要です。視覚障害のある訪問者のために読者のソフトウェアで読み上げられたテキストと、画像表示が無効になっている閲覧環境に表示されるテキストを表示します。代替テキストには、大文字と小文字、スペース、特殊文字を含めることができます。
視覚障害者や画像をサポートしていないブラウジング環境のユーザーがターゲットオーディエンスの一部である場合、より多くの実質的な画像記述を含むHTMLファイルを作成することを検討することができます。このようなファイルは、Image Tag Accessibility AttributesダイアログボックスのLong Descriptionボックスにリンクを定義することによってイメージにリンクされます。
-
OKをクリックしてイメージを挿入します。
この時点では、画像のみを挿入しました。画像の配置やテキストの流し込みを含むページデザインは、CSS