Microsoft-expression-web-images
提供：Dev Guides
Microsoft Expression Web-画像
画像は、ウェブページで頻繁に使用され、見た目を美しくし、ユーザーエクスペリエンスを向上させます。 この章では、ウェブサイトに画像を追加する方法を学びます。 いつものように、ステップごとに進み、プロセスを詳細に学びましょう。
- ステップ1 *-画像の追加を開始するには、新しい1ページのサイトを作成して、defaultlファイルの名前をindexlに変更します。
- ステップ2 *-次に、Webページに画像を含める必要があります。そのため、Webページでそれらの画像を使用できます。 新しいフォルダーを作成しましょう。 フォルダーリストで、Webサイト名を右クリックします。
- ステップ3 *-現在、このフォルダには画像がありません。 このフォルダに画像を追加するには、ハードドライブから画像を選択してドラッグし、画像フォルダにドロップします。
次のスクリーンショットに示すように、画像がWebサイトの images フォルダーに追加されていることがわかります。
- ステップ4 *-これらの画像はウェブサイトに含まれていますが、ウェブページでは使用されていません。 Webページに画像を追加する簡単な方法は、画像フォルダから画像をドラッグし、Webページで画像を追加するコードビューにドロップすることです。
見出しの下に画像を追加するとします。 画像をドロップしてマウスボタンを離すと、次のダイアログボックスが表示されます。
ここで、代替テキストと長い説明を指定できます。 次に、[OK]をクリックしてWebページを保存します。 これで、 <img> タグが画像の代替名とソースとともに追加されていることがわかります。
- ステップ5 *-同じプロセスに従い、2番目の画像とその代替名とソースを追加します。
*indexl* ファイルは次のようになります-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type"/>
</head>
<body>
<h1> Working with images </h1>
<img alt = "Beautiful Birds" src = "images/birds.jpg"/>
<img alt = "Other Birds" src = "images/birds2.jpg"/>
</body>
</html>- ステップ6 *-*画像のプロパティ*ダイアログボックスでは、最も一般的に使用される画像属性にアクセスできます。 画像をダブルクリックすると、[画像のプロパティ]ボックスが表示されます。
Expression Webの[画像のプロパティ]ダイアログには、[一般]と[外観]の2つのタブがあります。
[一般]タブで利用できるオプションは次のとおりです。
- 画像-グラフィック画像のフォルダ/ファイル名が含まれています。
- 代替テキスト-グラフィックがダウンロードされているとき、グラフィックが見つからないとき、またはサイト訪問者がポインタをその上に移動したときに、写真に表示するテキストを入力します。 視聴者が使用している場合、このテキストはスクリーンリーダーでも使用されます。
- 長い説明-いくつかの単語では画像を説明できない場合があります。 チャートとグラフは例です。 [参照]をクリックして、画像の長い説明を含むファイルを選択します。
- 場所-画像をWebページまたはより大きな画像にリンクする場合は、ここにハイパーリンクを挿入します。
- ターゲットフレーム-現在のページがフレームページの場合、このオプションはリンクを表示するフレームを示します。または、新しいウィンドウで画像またはページを開くことを選択できます。
[外観]タブでは、次のオプションを使用できます*。
- Wrapping Style -None、Left、Rightなど、ページ内での画像のフロート方法を指定します。
- レイアウト-このセクションでは、配置、境界線の太さ、水平および垂直マージンを設定できます。
- サイズ-Expression Webは、画像の実際の寸法に基づいて、画像の幅と高さのプロパティを自動的に設定します。 これらの寸法を変更して画像のサイズを変更するのではなく、グラフィックエディタを使用して画像のサイズを変更します。
- ステップ7 *-次に、ブラウザでWebページをプレビューします。次の出力が表示されます。
