画像の配置について

Dreamweaverで画像を配置する方法を説明します。

方法はいくつかあります。

①メニューより
挿入メニューをポイントしイメージを選択。
画像ファイルを選択すると画像が貼り付けられます。
後はドラッグしたりして位置をいい場所に動かしましょう。
②挿入パネルより
一般カテゴリーの中にイメージというボタンのがあるので▼よりイメージを選択しボタンを押します。後はファイルを選択します。
③ファイルパネルより
ファイルパネルから画像を選択しドラッグ&ドロップします。
なおファイル名をダブルクリックするとプレビューウィンドウが表示されます。
④アセットパネルより
アセットパネルを選択すると左側のの上下にアイコンが並んでいるので一番上のイメージをクリックします。後は上に表示される縮小版イメージを見て画像を選択しドラッグ&ドロップします。こちらでもファイル名をダブルクリックするとプレビューウィンドウが表示されます。
⑤マイコンピュータまたはエクスプローラよりコピー&ペーストする方法
マイコンピュータまたはエクスプローラで画像ファイルをコピーしデザインビュー上で貼り付けます。

画像フォルダを作ろう。

ファイルパネル左上のリストボックスよりサイトの管理を選択、サイトの管理ダイアログからサイトを選択・編集または新規作成し、サイトを登録してから、詳細設定・ローカル情報よりデフォルトのイメージフォルダーを設定します。この後からはサイトに使った画像ファイルがこのフォルダに蓄積されていきます。

レイヤーは?

APエレメントという機能がレイヤーに相当するようです。環境設定で設定してから使うようです。

検索参考キーワード

画像 lt quot セル テーブル 機能 タグ 表示 Dreamweaver CSS ページ 指定 サイト 作成 リンク CS 選択 レイアウト 設定 挿入 amp ファイル 方法 リスト 配置

広告

関連コンテンツ

画像の位置を調整する方法

画像の位置を設定するステップ

①デザインビューに画像を貼り付けます。
ファイルパネルで作業用フォルダに画像用フォルダを作成し、画像ファイルを格納し、そこから画像を引っ張ってくるとアップロードするとき楽です。

②imgタグにクラスを指定します。

<img class="cls01" src="image/1.jpg" width="160" height="107" />

・IDでも良いのですがプロパティの再利用頻度を考えると、一回きりしか使えないIDより何度も使えるクラスのほうが使い勝手が良いような気がします。

③CSSでimgのクラスタグにpadding,background-color,marginを指定します。

img.cls01 {
padding: 30px;
background-color: #396;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

paddingはbackground-color(背景色)で塗りつぶされる内側の余白のことでmarginは上下左右隣り合うボックス要素とどれぐらい離すか設定できる、paddingよりもさらに外側の余白のことです。CSSの設定は関連付けるのが上手くいかない場合もありますが、なんとか頑張りましょう。どうしてもできないときはCSSスタイルパネルで新規CSSルールボタンからCSSファイルを作るのも一つの方法です。

④marginタグの数値を微調整していきます。
margin-top(上)
margin-right(右)
margin-bottom(下)
margin-left(左)
をpx(ピクセル)等で指定できます。

Tips

・bodyタグのmarginとpaddingを0pxにすると画像がぴったり端に配置できます。

body {
margin: 0px;
padding: 0px;
}

・メニューの下にあるドキュメントツールバーのマルチスクリーンボタンを押すとスマートフォン・タブレットなど様々な解像度でWebページがどのように表示されるか、簡単なプレビューテストを行うことができます。

関連キーワード(検索のヒント)

画像 lt quot Dreamweaver 表示 タグ CSS 作成 設定 テーブル 指定 ページ amp サイト リンク ファイル セル リスト 挿入 方法 入力 テキスト ホームページ 質問 背景 選択